From 52c389450f0979542a792ab2fff25f21842df585 Mon Sep 17 00:00:00 2001
From: aadalal <57609353+AaDalal@users.noreply.github.com>
Date: Tue, 26 Mar 2024 01:39:28 -0400
Subject: [PATCH 1/3] restyle ui

---
 .../degree-plan/components/Course/Course.tsx  |  5 +-
 .../components/FourYearPlan/DegreeModal.tsx   | 13 ++---
 .../components/FourYearPlan/Semesters.tsx     | 13 +++--
 .../components/Requirements/QObject.tsx       |  1 +
 .../components/Requirements/ReqPanel.tsx      |  7 +--
 .../components/Requirements/Rule.tsx          | 51 +++++++++++++-----
 .../degree-plan/pages/FourYearPlanPage.tsx    |  5 +-
 frontend/degree-plan/pages/OnboardingPage.tsx | 54 +++++++++----------
 frontend/degree-plan/styles/globals.css       |  5 ++
 9 files changed, 90 insertions(+), 64 deletions(-)

diff --git a/frontend/degree-plan/components/Course/Course.tsx b/frontend/degree-plan/components/Course/Course.tsx
index fac4bec3c..ae7d9cac0 100644
--- a/frontend/degree-plan/components/Course/Course.tsx
+++ b/frontend/degree-plan/components/Course/Course.tsx
@@ -7,7 +7,7 @@ import { Draggable } from "../common/DnD";
 import Skeleton from "react-loading-skeleton"
 import 'react-loading-skeleton/dist/skeleton.css'
 
-const COURSE_BORDER_RADIUS = "10px";
+const COURSE_BORDER_RADIUS = "9px";
 
 export const BaseCourseContainer = styled.div<{ $isDragging?: boolean, $isUsed: boolean, $isDisabled: boolean }>`
   display: flex;
@@ -16,11 +16,12 @@ export const BaseCourseContainer = styled.div<{ $isDragging?: boolean, $isUsed:
   min-width: 70px;
   min-height: 35px;
   border-radius: ${COURSE_BORDER_RADIUS};
-  padding: .5rem;
+  padding: .75rem;
   text-wrap: nowrap;
   cursor: ${props => props.$isDisabled || props.$isUsed ? "not-allowed" : "grab"};
   opacity: ${props => props.$isDisabled || props.$isDragging ? 0.7 : 1};
   background-color: ${props => props.$isDragging ? "#4B9AE7" : "var(--background-grey)"};
+  box-shadow: rgba(0, 0, 0, 0.01) 0px 6px 5px 0px, rgba(0, 0, 0, 0.04) 0px 0px 0px 1px;
 `;
 
 export const PlannedCourseContainer = styled(BaseCourseContainer)`
diff --git a/frontend/degree-plan/components/FourYearPlan/DegreeModal.tsx b/frontend/degree-plan/components/FourYearPlan/DegreeModal.tsx
index 9de8fae34..e8a0b3a42 100644
--- a/frontend/degree-plan/components/FourYearPlan/DegreeModal.tsx
+++ b/frontend/degree-plan/components/FourYearPlan/DegreeModal.tsx
@@ -17,7 +17,7 @@ import {
 import useSWR, { useSWRConfig } from "swr";
 import ModalContainer from "../common/ModalContainer";
 import Select from "react-select";
-import useSWRMutation from "swr/mutation";
+import { schoolOptions } from "@/pages/OnboardingPage";
 
 export type ModalKey =
   | "plan-create"
@@ -116,7 +116,7 @@ const DegreeAddInterior = styled.div`
   flex-direction: column;
   gap: 2rem;
   width: 100%;
-  padding: 1.2rem 2rem 280px;
+  padding: 1.2rem 2rem;
 `;
 
 interface RemoveDegreeProps {
@@ -166,12 +166,6 @@ const ModalInterior = ({
   const { data: degrees, isLoading: isLoadingDegrees } =
     useSWR<DegreeListing[]>(`/api/degree/degrees`);
 
-  const defaultSchools = ["BSE", "BA", "BAS", "BS"];
-  const schoolOptions = defaultSchools.map((d) => ({
-    value: d,
-    label: d,
-  }));
-
   /** Create label for major listings */
   const createMajorLabel = (degree: DegreeListing) => {
     const concentration =
@@ -289,11 +283,14 @@ const ModalInterior = ({
                 isClearable
                 placeholder="Select School or Program"
                 isLoading={false}
+                styles={{ menuPortal: base => ({ ...base, zIndex: 9999 }) }}
+                menuPortalTarget={document.body}
               />
               <Select
                 options={getMajorOptions()}
                 value={major}
                 onChange={(selectedOption) => setMajor(selectedOption)}
+                styles={{ menuPortal: base => ({ ...base, zIndex: 9999 }) }}
                 isClearable
                 placeholder={
                   school
diff --git a/frontend/degree-plan/components/FourYearPlan/Semesters.tsx b/frontend/degree-plan/components/FourYearPlan/Semesters.tsx
index d56879016..05760a132 100644
--- a/frontend/degree-plan/components/FourYearPlan/Semesters.tsx
+++ b/frontend/degree-plan/components/FourYearPlan/Semesters.tsx
@@ -86,7 +86,7 @@ const AddButton = styled.div`
   gap: 1rem;
 `;
 
-const selectStyles = {
+const selectStyles = (topOrBottom: boolean) => ({
   control: (provided) => ({
     ...provided,
     width: "130px",
@@ -97,12 +97,17 @@ const selectStyles = {
     "&:hover": {
       borderColor: "#9FB5EF",
     },
+    ...(
+      topOrBottom ? 
+      { borderBottomLeftRadius: 0, borderBottomRightRadius: 0, borderBottom: 0 } : 
+      { borderTopLeftRadius: 0, borderTopRightRadius: 0 }
+    )
   }),
   singleValue: (provided) => ({
     ...provided,
     color: "#C1C1C1",
   }),
-};
+});
 
 // TODO: get a consistent color palette across PCx
 interface ModifySemestersProps {
@@ -162,14 +167,14 @@ const ModifySemesters = ({
       </AddButtonContainer>
 
       <Select
-        styles={selectStyles}
+        styles={selectStyles(true)}
         options={seasonOptions}
         value={seasonOptions.find((option) => option.value === selectedSeason)}
         onChange={(option) => setSelectedSeason(option.value)}
       />
 
       <Select
-        styles={selectStyles}
+        styles={selectStyles(false)}
         options={yearOptions}
         value={yearOptions.find((option) => option.value === selectedYear)}
         onChange={(option) => setSelectedYear(option.value)}
diff --git a/frontend/degree-plan/components/Requirements/QObject.tsx b/frontend/degree-plan/components/Requirements/QObject.tsx
index b96c75ba2..b134dbf55 100644
--- a/frontend/degree-plan/components/Requirements/QObject.tsx
+++ b/frontend/degree-plan/components/Requirements/QObject.tsx
@@ -79,6 +79,7 @@ const SearchConditionWrapper = styled(BaseCourseContainer)`
     background-color: var(--primary-color-light);
     box-shadow: 0px 0px 14px 2px rgba(0, 0, 0, 0.05);
     cursor: pointer;
+    padding: .5rem .75rem;
 `
 
 const Wrap = styled.span`
diff --git a/frontend/degree-plan/components/Requirements/ReqPanel.tsx b/frontend/degree-plan/components/Requirements/ReqPanel.tsx
index d76f46d8a..86c84024e 100644
--- a/frontend/degree-plan/components/Requirements/ReqPanel.tsx
+++ b/frontend/degree-plan/components/Requirements/ReqPanel.tsx
@@ -39,7 +39,8 @@ const DegreeHeaderContainer = styled.div`
   align-items: center;
   font-size: 1rem;
   font-weight: 500;
-  background-color: var(--primary-color);
+  background-color: var(--primary-color-xx-dark);
+  color: #FFF;
   padding: 0.75rem 1.25rem;
   border-radius: var(--req-item-radius);
 `
@@ -50,6 +51,7 @@ const ReqPanelTitle = styled.div`
 `
 
 const DegreeBody = styled.div`
+  margin-top: .75rem;
   overflow-y: auto;
   overflow-x: hidden;
 `
@@ -58,9 +60,8 @@ export const DegreeYear = styled.span`
   margin-left: .25rem;
   font-size: .9rem;
   font-weight: 500;
-  color: #575757;
 `
-const DegreeTitleWrapper = styled.div`
+const  DegreeTitleWrapper = styled.div`
   display: flex;
   flex-direction: row;
   align-items: center;
diff --git a/frontend/degree-plan/components/Requirements/Rule.tsx b/frontend/degree-plan/components/Requirements/Rule.tsx
index 97a47c99f..d6df259fc 100644
--- a/frontend/degree-plan/components/Requirements/Rule.tsx
+++ b/frontend/degree-plan/components/Requirements/Rule.tsx
@@ -11,7 +11,7 @@ import { DegreeYear, RuleTree } from './ReqPanel';
 import assert from 'assert';
 
 const RuleTitleWrapper = styled.div`
-    background-color: var(--primary-color-light);
+    background-color: var(--primary-color);
     position: relative;
     border-radius: var(--req-item-radius);
 `
@@ -34,12 +34,12 @@ const RuleTitle = styled.div<{$progress: number}>`
   align-items: center;
   width: 100%;
   color: #575757;
-  padding: 0.25rem .5rem;
-  margin: 0.5rem 0;
+  padding: 0.5rem 1.25rem;
+  margin-bottom: 0.5rem;
 `
 
 const RuleLeafWrapper = styled.div<{$isDroppable:boolean, $isOver: boolean}>`
-  margin: .5rem;
+  margin: .25rem;
   margin-left: 0;
   display: flex;
   justify-content: space-between;
@@ -52,6 +52,14 @@ const CusCourses = styled.div`
   font-weight: 500;
   font-size: .9rem;
   white-space: nowrap;
+
+  sup {
+    margin-right: .2em;
+  }
+
+  sub {
+    margin-left: .2em;
+  }
 `
 
 const Row = styled.div`
@@ -61,13 +69,13 @@ const Row = styled.div`
 
 const Indented = styled.div`
   margin-left: .75rem;
-  margin-bottom: 1rem;
+  margin-bottom: .5rem;
 `
 
 const Column = styled.div`
   display: flex;
   flex-direction: column;
-  gap: .25rem;
+  gap: .1rem;
 `
 
 const PickNWrapper = styled.div`
@@ -86,6 +94,14 @@ const PickNTitle = styled.div`
   justify-content: space-between;
 `
 
+const RuleLeafLabel = styled.div`
+  font-size: .9rem;
+`
+
+const RuleLeafContainer = styled(Column)`
+  margin-top: 0.25rem;
+`
+
 
 /**
  * Skeleton of a rule, which excepts children that are skeleton rules. If the skeleton has children, then
@@ -159,15 +175,22 @@ const RuleComponent = (ruleTree : RuleTree) => {
     if (type === "LEAF") {
       const { fulfillments, cus, num } = ruleTree;
       return (
-        <RuleLeafWrapper $isDroppable={canDrop} $isOver={isOver} ref={drop}>
-            <RuleLeaf q_json={rule.q_json} rule={rule} fulfillmentsForRule={fulfillments} satisfied={satisfied} activeDegreePlanId={activeDegreePlanId}/>
-            <Row>
+          <RuleLeafContainer>
+            <RuleLeafLabel>{rule.title}</RuleLeafLabel>
+            <RuleLeafWrapper $isDroppable={canDrop} $isOver={isOver} ref={drop}>
+              <RuleLeaf q_json={rule.q_json} rule={rule} fulfillmentsForRule={fulfillments} satisfied={satisfied} activeDegreePlanId={activeDegreePlanId}/>
+              <Row>
               {!!satisfied && <i className="fas fa-check-circle" style={{color: '#5EA872'}}></i>}
-              {rule.credits && <CusCourses>{`${cus} / ${rule.credits} ${rule.credits > 1 ? 'cus' : 'cu'}`}</CusCourses>}
-              {" "}
-              {rule.num && <CusCourses>{num} / {rule.num}</CusCourses>}
-            </Row>
-        </RuleLeafWrapper>
+              <Column>
+                {rule.credits && 
+                  <CusCourses><sup>{cus}</sup>/<sub>{rule.credits}</sub><div>{rule.credits > 1 ? 'cus' : 'cu'}</div></CusCourses>
+                  }
+                {" "}
+                {rule.num && <CusCourses><sup>{num}</sup>/<sub>{rule.num}</sub></CusCourses>}
+              </Column>
+              </Row>
+            </RuleLeafWrapper>
+          </RuleLeafContainer>
       )
     }
 
diff --git a/frontend/degree-plan/pages/FourYearPlanPage.tsx b/frontend/degree-plan/pages/FourYearPlanPage.tsx
index a23051a5e..5e5eb350f 100644
--- a/frontend/degree-plan/pages/FourYearPlanPage.tsx
+++ b/frontend/degree-plan/pages/FourYearPlanPage.tsx
@@ -36,7 +36,7 @@ const BodyContainer = styled.div`
   flex-grow: 1;
 `;
 
-const PanelWrapper = styled.div`
+const PanelWrapper = styled(Pane)`
   padding: 5px;
   height: 100%;
   display: flex;
@@ -157,11 +157,10 @@ const FourYearPlanPage = ({
               <Row>
                 <SplitPane
                   split="vertical"
-                  minSize={0}
                   maxSize={windowWidth ? windowWidth * 0.65 : 1000}
                   defaultSize="50%"
                   style={{
-                    padding: "2rem"
+                    padding: "1.5rem"
                   }}
                 >
                   <PanelWrapper>
diff --git a/frontend/degree-plan/pages/OnboardingPage.tsx b/frontend/degree-plan/pages/OnboardingPage.tsx
index b2a7d9cf5..145976c43 100644
--- a/frontend/degree-plan/pages/OnboardingPage.tsx
+++ b/frontend/degree-plan/pages/OnboardingPage.tsx
@@ -89,6 +89,14 @@ export const Label = styled.h5`
   }
 `;
 
+export const schoolOptions = [
+  { value: "BA", label: "Arts & Sciences" },
+  { value: "BSE", label: "Engineering BSE" }, 
+  { value: "BAS", label: "Engineering BAS" },
+  { value: "BS", label: "Wharton" },
+  { value: "BSN", label: "Nursing" }
+];
+
 const TextInput = styled.input`
   font-size: 1rem;
   padding: 2px 6px;
@@ -105,7 +113,7 @@ const FieldWrapper = styled.div`
   align-items: left;
 `;
 
-const customSelectStylesLeft = {
+const ustomSelectStylesLeft = {
   control: (provided) => ({
     ...provided,
     width: 250,
@@ -187,24 +195,18 @@ const OnboardingPage = ({
   const [graduationYear, setGraduationYear] = useState(null);
   const [schools, setSchools] = useState<SchoolOption[]>([]);
   const [majors, setMajors] = useState<MajorOption[]>([]);
-  const [concentrations, setConcentrations] = useState([]);
   const [minor, setMinor] = useState([]);
-  const [complete, setComplete] = useState(false);
   const [name, setName] = useState("");
 
   const { create: createDegreeplan } = useSWRCrud<DegreePlan>(
     "/api/degree/degreeplans"
   );
 
-  useEffect(() => {
-    setComplete(
-      startingYear !== null &&
+  const complete = startingYear !== null &&
         graduationYear !== null &&
         schools.length > 0 &&
         majors.length > 0 &&
-        name !== ""
-    );
-  }, [startingYear, graduationYear, schools, majors, name]);
+        name !== "";
 
   const { data: degrees, isLoading: isLoadingDegrees } =
     useSWR<DegreeListing[]>(`/api/degree/degrees`);
@@ -220,7 +222,7 @@ const OnboardingPage = ({
     const currentYear = Number(options.SEMESTER.substring(0, 4));
     return {
       // Up and down to 5 years
-      startYears: [...Array(5).keys()].map((i) => ({
+      startYears: [...Array(5).keys()].reverse().map((i) => ({
         value: currentYear - i,
         label: currentYear - i,
       })),
@@ -234,13 +236,6 @@ const OnboardingPage = ({
   const startingYearOptions = getYearOptions()?.startYears;
   const graduationYearOptions = getYearOptions()?.gradYears;
 
-  const defaultSchools = ["BA", "BSE", "BAS", "BS", "BSN"];
-
-  const schoolOptions = defaultSchools.map((d) => ({
-    value: d,
-    label: d,
-  }));
-
   /** Create label for major listings */
   const createMajorLabel = (degree: DegreeListing) => {
     const concentration =
@@ -295,10 +290,19 @@ const OnboardingPage = ({
     <CenteredFlexContainer>
       <PanelContainer $maxWidth="90%" $minWidth="90%">
         <h1 style={{ paddingLeft: "5%", paddingTop: "5%" }}>
-          Degree Information
+          Enter your degree(s):
         </h1>
         <ColumnsContainer>
           <Column>
+            <FieldWrapper>
+              <Label required>Degree Plan Name</Label>
+              <TextInput
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                placeholder=""
+              />
+            </FieldWrapper>
+
             <FieldWrapper>
               <Label required>Starting Year</Label>
               <Select
@@ -322,15 +326,6 @@ const OnboardingPage = ({
                 styles={customSelectStylesLeft}
               />
             </FieldWrapper>
-
-            <FieldWrapper>
-              <Label required>Degree Plan Name</Label>
-              <TextInput
-                value={name}
-                onChange={(e) => setName(e.target.value)}
-                placeholder=""
-              />
-            </FieldWrapper>
           </Column>
 
           <Column>
@@ -356,10 +351,9 @@ const OnboardingPage = ({
                 onChange={(selectedOption) => setMajors(selectedOption)}
                 isClearable
                 isMulti
+                isDisabled={schools.length === 0}
                 placeholder={
-                  schools.length > 0
-                    ? "Major - Concentration"
-                    : "Please Select Program First"
+                  "Major - Concentration"
                 }
                 styles={customSelectStylesRight}
                 isLoading={isLoadingDegrees}
diff --git a/frontend/degree-plan/styles/globals.css b/frontend/degree-plan/styles/globals.css
index 89009dfbf..8cc71bd5b 100644
--- a/frontend/degree-plan/styles/globals.css
+++ b/frontend/degree-plan/styles/globals.css
@@ -97,6 +97,11 @@
   }
 }
 */
+input, select, textarea, button { 
+  font-family: inherit;
+  background-color: inherit;
+  color: inherit;
+}
 
 * {
   box-sizing: border-box;

From 54b0757ebfa1b165a46942a9bf1e8dd7611c09b6 Mon Sep 17 00:00:00 2001
From: aadalal <57609353+AaDalal@users.noreply.github.com>
Date: Tue, 26 Mar 2024 02:51:21 -0400
Subject: [PATCH 2/3] fix degree add modal, try to fix initial semesters, minor
 style fixes

---
 .../components/FourYearPlan/DegreeModal.tsx   | 18 +++--
 .../components/FourYearPlan/PlanPanel.tsx     |  2 +-
 .../components/FourYearPlan/Semesters.tsx     | 77 ++++++-------------
 .../components/Requirements/ReqPanel.tsx      |  6 +-
 .../components/common/ModalContainer.tsx      | 68 ++++++++--------
 .../components/common/TrashIcon.tsx           |  8 ++
 frontend/degree-plan/pages/OnboardingPage.tsx | 26 +++----
 7 files changed, 94 insertions(+), 111 deletions(-)

diff --git a/frontend/degree-plan/components/FourYearPlan/DegreeModal.tsx b/frontend/degree-plan/components/FourYearPlan/DegreeModal.tsx
index e8a0b3a42..093d94996 100644
--- a/frontend/degree-plan/components/FourYearPlan/DegreeModal.tsx
+++ b/frontend/degree-plan/components/FourYearPlan/DegreeModal.tsx
@@ -133,12 +133,14 @@ interface ModalInteriorProps {
   modalObject: DegreePlan | null | RemoveSemesterProps | RemoveDegreeProps;
   setActiveDegreeplan: (arg0: DegreePlan | null) => void;
   close: () => void;
+  modalRef: React.RefObject<HTMLSelectElement | null>;
 }
 const ModalInterior = ({
   modalObject,
   modalKey,
   setActiveDegreeplan,
   close,
+  modalRef
 }: ModalInteriorProps) => {
   const {
     create: createDegreeplan,
@@ -283,21 +285,21 @@ const ModalInterior = ({
                 isClearable
                 placeholder="Select School or Program"
                 isLoading={false}
-                styles={{ menuPortal: base => ({ ...base, zIndex: 9999 }) }}
-                menuPortalTarget={document.body}
+                styles={{ menuPortal: base => ({ ...base, zIndex: 999 }) }}
+                menuPortalTarget={modalRef.current}
               />
               <Select
                 options={getMajorOptions()}
                 value={major}
                 onChange={(selectedOption) => setMajor(selectedOption)}
-                styles={{ menuPortal: base => ({ ...base, zIndex: 9999 }) }}
+                styles={{ menuPortal: base => ({ ...base, zIndex: 999 }) }}
+                menuPortalTarget={modalRef.current}
                 isClearable
+                isDisabled={!school}
                 placeholder={
-                  school
-                    ? isLoadingDegrees
-                      ? "loading programs"
-                      : "Major - Concentration"
-                    : "Please Select Program First"
+                  isLoadingDegrees
+                    ? "loading programs..."
+                    : "Major - Concentration"
                 }
                 isLoading={isLoadingDegrees}
               />
diff --git a/frontend/degree-plan/components/FourYearPlan/PlanPanel.tsx b/frontend/degree-plan/components/FourYearPlan/PlanPanel.tsx
index 2cec8663f..cd228e68c 100644
--- a/frontend/degree-plan/components/FourYearPlan/PlanPanel.tsx
+++ b/frontend/degree-plan/components/FourYearPlan/PlanPanel.tsx
@@ -31,7 +31,7 @@ interface PlanPanelProps {
     activeDegreeplan: DegreePlan | null;
     degreeplans: DegreePlan[] | undefined;
     isLoading: boolean;
-    currentSemester: string;
+    currentSemester?: string;
     setShowOnboardingModal: (arg0: boolean) => void;
 }
 
diff --git a/frontend/degree-plan/components/FourYearPlan/Semesters.tsx b/frontend/degree-plan/components/FourYearPlan/Semesters.tsx
index 05760a132..d8c270831 100644
--- a/frontend/degree-plan/components/FourYearPlan/Semesters.tsx
+++ b/frontend/degree-plan/components/FourYearPlan/Semesters.tsx
@@ -22,20 +22,7 @@ const getNextSemester = (semester: string) => {
   }
 };
 
-const semesterCompare = (a, b) => {
-  const yearA = parseInt(a.substring(0, 4), 10);
-  const yearB = parseInt(b.substring(0, 4), 10);
-  const seasonA = a.substring(4);
-  const seasonB = b.substring(4);
-
-  if (yearA !== yearB) {
-    return yearA - yearB;
-  }
-  const seasonOrder = { A: 1, B: 2, C: 3 };
-  return seasonOrder[seasonA] - seasonOrder[seasonB];
-};
-
-const getLocalSemestersKey = (degreeplanId: DegreePlan["id"]) =>
+export const getLocalSemestersKey = (degreeplanId: DegreePlan["id"]) =>
   `PDP-${degreeplanId}-semesters`;
 
 const SemestersContainer = styled.div`
@@ -45,13 +32,6 @@ const SemestersContainer = styled.div`
   flex-wrap: wrap;
 `;
 
-// const AddSemesterContainer = styled.div`
-//     flex: 1 1 15rem;
-//     display: flex;
-//     flex-direction: column;
-//     gap: .5rem;
-// `;
-
 const AddSemesterContainer = styled.div`
   background: #ffffff;
   border-style: dashed;
@@ -122,7 +102,7 @@ const ModifySemesters = ({
   className,
 }: ModifySemestersProps) => {
   const latestSemester =
-    Object.keys(semesters).sort(semesterCompare).pop() || "2026A"; // TODO: Change fallback value to start semester (based on onboarding?)
+    Object.keys(semesters).sort((a, b) => a.localeCompare(b)).pop() || "2026A"; // TODO: Change fallback value to start semester (based on onboarding?)
 
   const nextSemester = getNextSemester(latestSemester);
   const [nextYear, nextSeason] = [
@@ -183,6 +163,15 @@ const ModifySemesters = ({
   );
 };
 
+export const interpolateSemesters = (startingYear: number, graduationYear: number) => {
+  let res = {} as { [semester: string]: Fulfillment[] };
+  for (let year = startingYear; year < graduationYear; year++) {
+    res[`${year}C`] = [];
+    res[`${year + 1}A`] = []; // A is Spring, C is Fall
+  }
+  return res;
+}
+
 interface SemestersProps {
   activeDegreeplan?: DegreePlan;
   showStats: any;
@@ -192,7 +181,7 @@ interface SemestersProps {
   setModalObject: (obj: any) => void;
   setEditMode: (arg0: boolean) => void;
   isLoading: boolean;
-  currentSemester: string;
+  currentSemester?: string;
 }
 
 const Semesters = ({
@@ -216,28 +205,8 @@ const Semesters = ({
   // semesters is state mostly derived from fulfillments
 
   const getDefaultSemesters = React.useCallback(() => {
-    if (!currentSemester) return {};
-
-    var startingYear, graduationYear;
-    if (typeof window === "undefined") {
-      startingYear = Number(currentSemester.substring(0, 4)); // Use current semester as default starting semester
-      graduationYear = startingYear + 4;
-    } else {
-      const startGradYearStr = localStorage.getItem("PDP-start-grad-years");
-      if (!!startGradYearStr) {
-        const startGradYear = JSON.parse(startGradYearStr);
-        startingYear = startGradYear.startingYear;
-        graduationYear = startGradYear.graduationYear;
-      } else {
-        return {};
-      }
-    }
-
-    var res = {} as { [semester: string]: Fulfillment[] };
-    for (var year = startingYear; year < graduationYear; year++) {
-      res = { ...res, [`${year}C`]: [], [`${year + 1}A`]: [] }; // A is Spring, C is Fall
-    }
-    return res;
+    const startingYear = currentSemester ? Number(currentSemester.substring(0, 4)) : new Date().getFullYear(); // Use current semester as default starting semester
+    return interpolateSemesters(startingYear, startingYear + 4);
   }, [currentSemester]);
 
   const [semesters, setSemesters] = useState<{
@@ -260,15 +229,19 @@ const Semesters = ({
   /** Get semesters from local storage */
   useEffect(() => {
     if (!activeDegreeplan) return;
-    if (typeof window === "undefined")
-      return setSemesters(getDefaultSemesters()); // default state
+    if (typeof window === "undefined") return setSemesters(getDefaultSemesters());
     const stickyValue = localStorage.getItem(
       getLocalSemestersKey(activeDegreeplan.id)
     );
-    setSemesters(
-      stickyValue !== null ? JSON.parse(stickyValue) : getDefaultSemesters()
-    );
-  }, [activeDegreeplan]);
+    if (stickyValue === null) return setSemesters(getDefaultSemesters());
+    let parsed;
+    try {
+      parsed = JSON.parse(stickyValue)
+    } catch {
+      setSemesters(getDefaultSemesters());
+    }
+    setSemesters(parsed);
+  }, [activeDegreeplan, currentSemester]);
 
   /** Update semesters to local storage */
   useEffect(() => {
@@ -310,7 +283,7 @@ const Semesters = ({
             <SkeletonSemester showStats={showStats} />
           ))
         : Object.keys(semesters)
-            .sort(semesterCompare)
+            .sort((a,b) => a.localeCompare(b))
             .map((semester: any) => (
               <FlexSemester
                 activeDegreeplanId={activeDegreeplan?.id}
diff --git a/frontend/degree-plan/components/Requirements/ReqPanel.tsx b/frontend/degree-plan/components/Requirements/ReqPanel.tsx
index 86c84024e..fef20e7c1 100644
--- a/frontend/degree-plan/components/Requirements/ReqPanel.tsx
+++ b/frontend/degree-plan/components/Requirements/ReqPanel.tsx
@@ -8,7 +8,7 @@ import useSWR from 'swr';
 import { Icon } from '../common/bulma_derived_components';
 import React from 'react';
 import { ModalKey } from '../FourYearPlan/DegreeModal';
-import { TrashIcon } from '../common/TrashIcon';
+import { LightTrashIcon } from '../common/TrashIcon';
 
 const EmptyPanelContainer = styled.div`
   display: flex;
@@ -108,9 +108,9 @@ const DegreeHeader = ({ degree, remove, setCollapsed, collapsed, editMode, skele
       </DegreeTitleWrapper>
       <span>
         {!skeleton && !!editMode ? 
-        <TrashIcon role="button" onClick={() => remove(degree.id)}>
+        <LightTrashIcon role="button" onClick={() => remove(degree.id)}>
           <i className="fa fa-trash fa-md"/>
-        </TrashIcon>
+        </LightTrashIcon>
         :
         <Icon>
           <i className={`fas fa-chevron-${collapsed ? "up" : "down"}`}></i>
diff --git a/frontend/degree-plan/components/common/ModalContainer.tsx b/frontend/degree-plan/components/common/ModalContainer.tsx
index 9f1a1113c..8f351d7a3 100644
--- a/frontend/degree-plan/components/common/ModalContainer.tsx
+++ b/frontend/degree-plan/components/common/ModalContainer.tsx
@@ -1,7 +1,7 @@
 // TODO: this is copied from plan, we should factor out into a shared component
 
 
-import React, { PropsWithChildren } from "react";
+import React, { PropsWithChildren, useRef } from "react";
 import styled from "@emotion/styled";
 
 interface ModalContainerProps {
@@ -10,6 +10,7 @@ interface ModalContainerProps {
     modalProps: any;
     modalKey: string | null;
     isBig: boolean;
+    ref: React.RefObject<HTMLSelectElement>
 }
 
 const OuterModalContainer = styled.div<{ $title: string }>`
@@ -130,35 +131,40 @@ const ModalContainer = ({
     modalKey,
     modalProps,
     isBig: isBig,
-}: PropsWithChildren<ModalContainerProps>) => (
-    <OuterModalContainer $title={title}>
-        <ModalBackground />
-        <ModalCard $isBig={isBig}>
-            <ModalCardHead>
-                <ModalCardTitle>{title}</ModalCardTitle>
-                <div
-                    role="button"
-                    aria-label="close"
-                    onClick={close}
-                    style={{ cursor: "pointer" }}
-                >
-                    <span className="icon is-small">
-                        <i className="fa fa-times" />
-                    </span>
-                </div>
-            </ModalCardHead>
-            <ModalCardBody>
-                {modalKey && 
-                    React.Children.map(children, (child: React.ReactNode) =>
-                        React.cloneElement(child as React.ReactElement, {
-                            close,
-                            modalKey,
-                            ...modalProps
-                        })
-                    )}
-            </ModalCardBody>
-        </ModalCard>
-    </OuterModalContainer>
-);
+    ref
+}: PropsWithChildren<ModalContainerProps>) => {
+    const modalRef = useRef(null);
+    return (
+        <OuterModalContainer $title={title} ref={modalRef}>
+            <ModalBackground />
+            <ModalCard $isBig={isBig}>
+                <ModalCardHead>
+                    <ModalCardTitle>{title}</ModalCardTitle>
+                    <div
+                        role="button"
+                        aria-label="close"
+                        onClick={close}
+                        style={{ cursor: "pointer" }}
+                    >
+                        <span className="icon is-small">
+                            <i className="fa fa-times" />
+                        </span>
+                    </div>
+                </ModalCardHead>
+                <ModalCardBody>
+                    {modalKey && 
+                        React.Children.map(children, (child: React.ReactNode) =>
+                            React.cloneElement(child as React.ReactElement, {
+                                close,
+                                modalKey,
+                                modalRef,
+                                ...modalProps
+                            })
+                        )}
+                </ModalCardBody>
+            </ModalCard>
+        </OuterModalContainer>
+    )
+};
 
 export default ModalContainer;
\ No newline at end of file
diff --git a/frontend/degree-plan/components/common/TrashIcon.tsx b/frontend/degree-plan/components/common/TrashIcon.tsx
index 51c48c8fd..728627313 100644
--- a/frontend/degree-plan/components/common/TrashIcon.tsx
+++ b/frontend/degree-plan/components/common/TrashIcon.tsx
@@ -8,3 +8,11 @@ export const TrashIcon = styled(GrayIcon)`
     color: #7E7E7E;
   }
 `;
+
+export const LightTrashIcon = styled(GrayIcon)`
+  pointer-events: auto;
+  color: #F5F5F5;
+  &:hover {
+    color: #E0E0E0;
+  }
+`
diff --git a/frontend/degree-plan/pages/OnboardingPage.tsx b/frontend/degree-plan/pages/OnboardingPage.tsx
index 145976c43..ec3eeedd8 100644
--- a/frontend/degree-plan/pages/OnboardingPage.tsx
+++ b/frontend/degree-plan/pages/OnboardingPage.tsx
@@ -13,6 +13,7 @@ import {
   SchoolOption,
 } from "@/types";
 import { postFetcher, useSWRCrud } from "@/hooks/swrcrud";
+import { getLocalSemestersKey, interpolateSemesters } from "@/components/FourYearPlan/Semesters";
 
 const PanelContainer = styled.div<{ $maxWidth: string; $minWidth: string }>`
   border-radius: 10px;
@@ -113,7 +114,7 @@ const FieldWrapper = styled.div`
   align-items: left;
 `;
 
-const ustomSelectStylesLeft = {
+const customSelectStylesLeft = {
   control: (provided) => ({
     ...provided,
     width: 250,
@@ -191,8 +192,8 @@ const OnboardingPage = ({
   setShowOnboardingModal: (arg0: boolean) => void;
   setActiveDegreeplan: (arg0: DegreePlan) => void;
 }) => {
-  const [startingYear, setStartingYear] = useState(null);
-  const [graduationYear, setGraduationYear] = useState(null);
+  const [startingYear, setStartingYear] = useState<{ label: any, value: number } | null>(null);
+  const [graduationYear, setGraduationYear] = useState<{ label: any, value: number } | null>(null);
   const [schools, setSchools] = useState<SchoolOption[]>([]);
   const [majors, setMajors] = useState<MajorOption[]>([]);
   const [minor, setMinor] = useState([]);
@@ -258,23 +259,16 @@ const OnboardingPage = ({
     return majorOptions;
   }, [schools]);
 
-  // const getConcentrationOptions = React.useCallback(() => {
-  //   /** Filter concentration options based on selected majors */
-  //   const concentrationOptions = degrees
-  //     ?.filter(d => majors.map(s => s.value).includes(d.major))
-  //     .map((degree) => ({ value: degree.concentration, label: degree.concentration}))
-  //     || [];
-  //     console.log(concentrationOptions)
-  //   return concentrationOptions;
-  // }, [majors]);
-
-  // TODO: Load in minorOptions
-
   const handleAddDegrees = () => {
     createDegreeplan({ name: name })
-      .catch((e) => alert("Trouble adding degrees: " + e))
       .then((res) => {
         if (res) {
+          if (startingYear && graduationYear) {
+            window.localStorage.setItem(
+              getLocalSemestersKey(res.id),
+              JSON.stringify(interpolateSemesters(startingYear.value, graduationYear.value))
+            );
+          }
           setActiveDegreeplan(res);
           const updated = postFetcher(
             `/api/degree/degreeplans/${res.id}/degrees`,

From 96b3be7f4d6edc12a16a157e3336c92d7c05b89e Mon Sep 17 00:00:00 2001
From: aadalal <57609353+AaDalal@users.noreply.github.com>
Date: Wed, 27 Mar 2024 01:53:59 -0400
Subject: [PATCH 3/3] more look and feel

---
 frontend/degree-plan/components/Infobox/InfoRatings.js   | 5 ++---
 frontend/degree-plan/components/Requirements/QObject.tsx | 9 +++++++--
 .../degree-plan/components/Requirements/ReqPanel.tsx     | 2 +-
 frontend/degree-plan/components/Requirements/Rule.tsx    | 5 +++--
 frontend/degree-plan/components/Search/SearchPanel.tsx   | 2 +-
 frontend/degree-plan/styles/globals.css                  | 5 +++--
 6 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/frontend/degree-plan/components/Infobox/InfoRatings.js b/frontend/degree-plan/components/Infobox/InfoRatings.js
index 0a8fceeed..8fe912621 100644
--- a/frontend/degree-plan/components/Infobox/InfoRatings.js
+++ b/frontend/degree-plan/components/Infobox/InfoRatings.js
@@ -10,10 +10,9 @@ const RatingRow = ({
   difficulty,
   work
 }) => {
-  const numOrNA = num => (isNaN(num) ? "N/A" : num.toFixed(1));
-  // TODO: After switching to styled-components or some other styling solution, refactor this code.
+  const numOrNA = num => (!num || isNaN(num) ? "N/A" : num.toFixed(1));
   const getColor = (num, reverse) => {
-    if (isNaN(num)) {
+    if (!num || isNaN(num)) {
       return "rating-good";
     }
     num = num.toFixed(1);
diff --git a/frontend/degree-plan/components/Requirements/QObject.tsx b/frontend/degree-plan/components/Requirements/QObject.tsx
index b134dbf55..4355a80df 100644
--- a/frontend/degree-plan/components/Requirements/QObject.tsx
+++ b/frontend/degree-plan/components/Requirements/QObject.tsx
@@ -181,11 +181,16 @@ const SearchCondition = ({ ruleId, ruleQuery, fulfillments, ruleIsSatisfied, q,
 
     return (
         <SearchConditionWrapper 
-        $isDisabled={ruleIsSatisfied}>
+            $isDisabled={false}>
             <SearchConditionInner q={q} />
             <DarkGrayIcon onClick={() => {
             setSearchRuleQuery(ruleQuery);
-            setSearchRuleId(ruleId);
+            if ((q.type === "OR" || q.type === "AND") && q.clauses.length == 0) {
+                // only set search ruleId if the search rule is non-empty
+                setSearchRuleId(null);
+            } else {
+                setSearchRuleId(ruleId)
+            }
             setSearchPanelOpen(true);
             setSearchFulfillments(fulfillments)
         }}>
diff --git a/frontend/degree-plan/components/Requirements/ReqPanel.tsx b/frontend/degree-plan/components/Requirements/ReqPanel.tsx
index fef20e7c1..8813e8f11 100644
--- a/frontend/degree-plan/components/Requirements/ReqPanel.tsx
+++ b/frontend/degree-plan/components/Requirements/ReqPanel.tsx
@@ -51,7 +51,7 @@ const ReqPanelTitle = styled.div`
 `
 
 const DegreeBody = styled.div`
-  margin-top: .75rem;
+  margin-top: .5rem;
   overflow-y: auto;
   overflow-x: hidden;
 `
diff --git a/frontend/degree-plan/components/Requirements/Rule.tsx b/frontend/degree-plan/components/Requirements/Rule.tsx
index d6df259fc..d193dc3b3 100644
--- a/frontend/degree-plan/components/Requirements/Rule.tsx
+++ b/frontend/degree-plan/components/Requirements/Rule.tsx
@@ -65,6 +65,7 @@ const CusCourses = styled.div`
 const Row = styled.div`
   display: flex;
   gap: .5rem;
+  align-items: center;
 `
 
 const Indented = styled.div`
@@ -79,7 +80,7 @@ const Column = styled.div`
 `
 
 const PickNWrapper = styled.div`
-  background-color: var(--primary-color-light);
+  background-color: var(--primary-color-extra-light);
   padding: .5rem;
   padding-bottom: .25rem;
   border-radius: .5rem;
@@ -197,7 +198,7 @@ const RuleComponent = (ruleTree : RuleTree) => {
     // otherwise, type == "INTERNAL_NODE"
     const { children, num } = ruleTree; 
 
-    if (num) {
+    if (num && children.length > num) {
       return <PickNWrapper>
         <PickNTitle>
           <div>Pick {num}:</div>
diff --git a/frontend/degree-plan/components/Search/SearchPanel.tsx b/frontend/degree-plan/components/Search/SearchPanel.tsx
index 61ef6cca5..0786f3de2 100644
--- a/frontend/degree-plan/components/Search/SearchPanel.tsx
+++ b/frontend/degree-plan/components/Search/SearchPanel.tsx
@@ -85,7 +85,7 @@ export const SearchPanel = ({ activeDegreeplanId }: { activeDegreeplanId: Degree
         searchRuleId: ruleId, 
         searchRuleQuery: ruleQuery,
         searchFulfillments: fulfillments
-    }= useContext(SearchPanelContext); 
+    } = useContext(SearchPanelContext); 
 
     // queryString and searchRuleQuery are different (queryString is the actual query e.g., "World Civ",
     // and searchRuleQuery is a q object)
diff --git a/frontend/degree-plan/styles/globals.css b/frontend/degree-plan/styles/globals.css
index 8cc71bd5b..25d9e8798 100644
--- a/frontend/degree-plan/styles/globals.css
+++ b/frontend/degree-plan/styles/globals.css
@@ -10,11 +10,12 @@
   --background-end-rgb: 255, 255, 255;
 
   /* blue */
-  --primary-color-extra-dark: #9AA7C6;
   --primary-color-xx-dark: #819AE1;
+  --primary-color-extra-dark: #9AA7C6;
   --primary-color-dark: #C5D2F6;
   --primary-color: #E3E8F4;
-  --primary-color-light: #EDF1FCAA; /* Semi-transparent */
+  --primary-color-light: #DCE4F999;  /* Semi-transparent */
+  --primary-color-extra-light: #EDF1FCAA; /* Semi-transparent */
   --background-white: #F7F9FC;
   --background-blue-grey:#F7F9FC;
   --background-light-grey: #F8F8F8;