Make add and edit year a modal

site/src/pages/RoadmapPage/AddYearPopup.scss

@@ -8,22 +8,23 @@
 }
 
 .add-year-btn {
-  background-color: transparent;
-  color: var(--petr-gray);
+  border-color: var(--peterportal-primary-color-1);
+  background-color: var(--peterportal-primary-color-1);
+  color: var(--ring-road-white);
   border: none;
-  display: block;
+  display: flex;
+  align-items: center;
   margin: 0.5rem;
 }
 
 .add-year-btn:hover,
-.add-year-btn:focus,
-.add-year-btn:active {
-  background-color: transparent;
-  color: var(--petr-gray);
+.add-year-btn:focus {
+  background-color: var(--peterportal-primary-color-1);
 }
 
 .add-year-icon {
-  margin-right: 10px;
+  margin-right: 4px;
+  transform: scale(1.5);
 }
 
 .add-year-text {
@@ -42,6 +43,32 @@
   border-radius: 1.25rem;
 }
 
-h5 {
-  font-weight: bold;
+/** @todo Mostly copy-pasted from Bootstrap styles; we should fix the import */
+.form-check-input {
+  --bs-form-check-bg: var(--overlay1);
+  -webkit-appearance: none;
+  appearance: none;
+  background-color: var(--bs-form-check-bg);
+  background-image: var(--bs-form-check-bg-image);
+  background-position: 50%;
+  background-repeat: no-repeat;
+  background-size: contain;
+  border: 1px solid #8888;
+  border-radius: 0.25rem;
+  width: 1em;
+  height: 1em;
+  margin-top: 0.25em;
+  transition: box-shadow 0.2s;
+  &:focus {
+    border-color: #86b7fe;
+    box-shadow: 0 0 0 0.25rem #0d6efd40;
+    outline: 0;
+  }
+  &:checked {
+    background-color: var(--peterportal-primary-color-1);
+    border-color: var(--peterportal-primary-color-1);
+    &[type='checkbox'] {
+      --bs-form-check-bg-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3E%3C/svg%3E");
+    }
+  }
 }

site/src/pages/RoadmapPage/AddYearPopup.tsx

@@ -1,112 +1,40 @@
-import React, { FC, useState, useEffect } from 'react';
+import { FC, useState } from 'react';
 import './AddYearPopup.scss';
-import { PlusCircleFill } from 'react-bootstrap-icons';
-import { Button, Form, Popover, OverlayTrigger } from 'react-bootstrap';
+import { Plus } from 'react-bootstrap-icons';
+import { Button } from 'react-bootstrap';
+import CourseYearModal from './YearModal';
 import { addYear } from '../../store/slices/roadmapSlice';
 import { useAppDispatch } from '../../store/hooks';
+import { PlannerYearData } from '../../types/types';
 
 interface AddYearPopupProps {
   placeholderName: string;
   placeholderYear: number;
 }
 
 const AddYearPopup: FC<AddYearPopupProps> = ({ placeholderName, placeholderYear }) => {
-  const dispatch = useAppDispatch();
-  const [name, setName] = useState(placeholderName);
-  const [year, setYear] = useState(placeholderYear);
-  const [validated, setValidated] = useState(false);
-  const [show, setShow] = useState(false);
-
-  useEffect(() => {
-    setYear(placeholderYear);
-    setName(placeholderName);
-  }, [placeholderYear, placeholderName]);
-
-  const overlay = (
-    <Popover id="add-year-popover">
-      <Popover.Content>
-        <Form noValidate validated={validated} className="add-year-form">
-          <Form.Group>
-            <Form.Label className="add-year-form-label">Name</Form.Label>
-            <Form.Control
-              required
-              type="text"
-              name="name"
-              value={name}
-              onChange={(e) => {
-                setName(e.target.value);
-              }}
-              onKeyDown={(e: React.KeyboardEvent) => {
-                // prevent submitting form (reloads the page)
-                if (e.key === 'Enter') {
-                  e.preventDefault();
-                }
-              }}
-              maxLength={35}
-              placeholder={placeholderName}
-            ></Form.Control>
-          </Form.Group>
-          <Form.Group>
-            <Form.Label className="add-year-form-label">Start Year</Form.Label>
-            <Form.Control
-              required
-              type="number"
-              name="year"
-              value={year}
-              onChange={(e) => {
-                setYear(parseInt(e.target.value));
-              }}
-              onKeyDown={(e: React.KeyboardEvent) => {
-                // prevent submitting form (reloads the page)
-                if (e.key === 'Enter') {
-                  e.preventDefault();
-                }
-              }}
-              min={1000}
-              max={9999}
-              placeholder={placeholderYear.toString()}
-            ></Form.Control>
-          </Form.Group>
-          <Button
-            className="popup-btn"
-            onClick={() => {
-              if (name === '' || year < 1000 || year > 9999 || Number.isNaN(year)) {
-                setValidated(true);
-                return;
-              }
+  const [showModal, setShowModal] = useState(false);
 
-              setValidated(false);
-              setShow(!show);
-              dispatch(
-                addYear({
-                  yearData: {
-                    startYear: year,
-                    name: name.trim(),
-                    quarters: ['fall', 'winter', 'spring'].map((quarter) => {
-                      return { name: quarter, courses: [] };
-                    }),
-                  },
-                }),
-              );
-              setYear(placeholderYear);
-              setName(placeholderName);
-            }}
-          >
-            Add Year
-          </Button>
-        </Form>
-      </Popover.Content>
-    </Popover>
-  );
+  const dispatch = useAppDispatch();
+  const saveHandler = (yearData: PlannerYearData) => dispatch(addYear({ yearData }));
 
   return (
     <div>
-      <OverlayTrigger placement="top" overlay={overlay} trigger="click" rootClose onToggle={setShow} show={show}>
-        <Button variant="light" className="add-year-btn">
-          <PlusCircleFill className="add-year-icon" />
-          <div className="add-year-text">Add year</div>
-        </Button>
-      </OverlayTrigger>
+      <CourseYearModal
+        show={showModal}
+        setShow={setShowModal}
+        placeholderName={placeholderName}
+        placeholderYear={placeholderYear}
+        type="add"
+        saveHandler={saveHandler}
+        currentQuarters={['fall', 'winter', 'spring']}
+        // When the year changes, this will force default values to reset
+        key={'add-year-' + placeholderYear}
+      />
+      <Button variant="primary" className="add-year-btn" onClick={() => setShowModal(true)}>
+        <Plus className="add-year-icon" />
+        <div className="add-year-text">Add Year</div>
+      </Button>
     </div>
   );
 };