Restyle transfer credits (#536)

* initial style consistency * transfer modal column widths adjust * transfer modal width and font size * feat: transfer button style improve * feat: further improve add entry button style * fix: consistent add entry font size --------- Co-authored-by: Cadecraft <[email protected]>
icssc · Jan 14, 2025 · 607f14d · 607f14d
1 parent ee83a46
commit 607f14d
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 16 deletions.
diff --git a/site/src/pages/RoadmapPage/Transfer.scss b/site/src/pages/RoadmapPage/Transfer.scss
@@ -6,7 +6,8 @@
     border-top-color: var(--overlay3);
   }
 }
-.transfer {
+
+.transfer-body {
   max-height: 75vh;
   overflow-y: auto;
 }
@@ -16,11 +17,45 @@
   overflow-x: scroll;
 }
 
-.transfer .list-group .list-group-item {
+.transfer-body .list-group .list-group-item {
   min-width: max-content;
   background-color: var(--overlay3);
 }
 
 .entry {
   margin-top: 1%;
 }
+
+.add-entry {
+  background-color: transparent;
+  color: var(--peterportal-primary-color-1);
+  font-size: 16px;
+  font-weight: bold;
+  width: fit-content;
+  margin-inline: auto;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.add-entry:hover {
+  background-color: transparent;
+  color: var(--peterportal-primary-color-1);
+}
+
+[data-theme='dark'] {
+  .add-entry,
+  .add-entry:hover {
+    color: var(--peterportal-primary-color-2);
+  }
+}
+
+.transfer-modal {
+  .modal-dialog {
+    max-width: 500px;
+    max-height: 80%;
+  }
+  p {
+    font-size: 16px;
+  }
+}
diff --git a/site/src/pages/RoadmapPage/Transfer.tsx b/site/src/pages/RoadmapPage/Transfer.tsx
@@ -8,6 +8,7 @@ import Container from 'react-bootstrap/Container';
 import Row from 'react-bootstrap/Row';
 import Col from 'react-bootstrap/Col';
 import CloseButton from 'react-bootstrap/CloseButton';
+import { PlusLg } from 'react-bootstrap-icons';
 
 import { setShowTransfer, deleteTransfer, setTransfer, addTransfer } from '../../store/slices/roadmapSlice';
 import { useAppSelector, useAppDispatch } from '../../store/hooks';
@@ -45,13 +46,13 @@ const TransferEntry: FC<TransferEntryProps> = (props) => {
 
   return (
     <Row className="g-2 mb-1" xs={3}>
-      <Col xs="auto" md="auto" className="d-flex flex-row justify-content-center">
+      <Col xs="1" md="1" className="d-flex flex-row justify-content-center p-0">
         <CloseButton onClick={() => dispatch(deleteTransfer(props.index))} />
       </Col>
-      <Col xs md>
+      <Col xs="8" md="7" className="pr-0">
         <Form.Control type="text" placeholder="Name" value={name} onChange={(e) => setName(e.target.value)} />
       </Col>
-      <Col xs md>
+      <Col xs="3" md="4" className="pr-0">
         <Form.Control
           type="number"
           placeholder="Units"
@@ -80,11 +81,11 @@ const Transfer: FC<MissingCoursesProps> = ({ missingPrereqNames }) => {
   };
 
   return (
-    <Modal show={show} onHide={handleClose} centered>
-      <Modal.Header className="transfer-header" closeButton>
-        <Modal.Title>Transfer Credits</Modal.Title>
+    <Modal className="transfer-modal ppc-modal" show={show} onHide={handleClose} centered>
+      <Modal.Header closeButton>
+        <h2>Transfer Credits</h2>
       </Modal.Header>
-      <Modal.Body className="transfer">
+      <Modal.Body className="transfer-body">
         <p>
           Record your AP Credits or Community College Credits here. Doing so will clear the prerequisites on the
           roadmap.
@@ -100,19 +101,20 @@ const Transfer: FC<MissingCoursesProps> = ({ missingPrereqNames }) => {
           </>
         )}
         <Container className="entry">
-          <Form>
+          <Form className="ppc-modal-form">
             {transfers.map((transfer, i) => (
               <TransferEntry key={`transfer-${i}`} index={i} {...transfer}></TransferEntry>
             ))}
           </Form>
         </Container>
       </Modal.Body>
-      <Modal.Footer className="transfer-footer d-flex flex-row justify-content-between">
-        <Button variant="primary" onClick={() => dispatch(addTransfer({ name: '', units: undefined }))}>
-          Add Entry
-        </Button>
-        <Button variant="secondary" onClick={handleClose}>
-          Close
+      <Modal.Footer className="transfer-footer d-flex flex-row justify-content-between pt-0">
+        <Button
+          className="add-entry"
+          variant="none"
+          onClick={() => dispatch(addTransfer({ name: '', units: undefined }))}
+        >
+          <PlusLg /> Add Entry
         </Button>
       </Modal.Footer>
     </Modal>