Merge pull request #635 from pennlabs/aag/pdp-frontend-uiux

UI/UX fixes
pennlabs · Apr 9, 2024 · a379c99 · a379c99
2 parents 39c89c4 + af921fd
commit a379c99
Show file tree

Hide file tree

Showing 12 changed files with 53 additions and 46 deletions.
diff --git a/frontend/degree-plan/components/Course/Course.tsx b/frontend/degree-plan/components/Course/Course.tsx
@@ -6,6 +6,7 @@ import { ReviewPanelTrigger } from "../Infobox/ReviewPanel";
 import { Draggable } from "../common/DnD";
 import Skeleton from "react-loading-skeleton"
 import 'react-loading-skeleton/dist/skeleton.css'
+import { TRANSFER_CREDIT_SEMESTER_KEY } from "@/constants";
 
 const COURSE_BORDER_RADIUS = "9px";
 
@@ -103,10 +104,9 @@ const IconBadge = styled.div`
 
 `
 
-
 const SemesterIcon = ({semester}:{semester: string | null}) => {
   if (!semester) return <div></div>;
-  const year = semester.substring(2,4);
+  const year = semester === TRANSFER_CREDIT_SEMESTER_KEY ? "AP" : semester.substring(2,4);
   const sem = semester.substring(4);
 
   return (

diff --git a/frontend/degree-plan/components/FourYearPlan/CoursesPlanned.tsx b/frontend/degree-plan/components/FourYearPlan/CoursesPlanned.tsx
@@ -34,7 +34,6 @@ const CoursesPlanned = ({fulfillments, removeCourse, className, semester, isLoad
             {fulfillments.map(fulfillment => 
                 <CourseInPlan key={fulfillment.full_code} semester={semester} course={fulfillment} removeCourse={removeCourse} isDisabled={false}/>
             )}
-            {/* <PlannedCourseContainer $isDepressed={true}/> */}
         </PlannedCoursesContainer>
     )
 }

diff --git a/frontend/degree-plan/components/FourYearPlan/DegreeModal.tsx b/frontend/degree-plan/components/FourYearPlan/DegreeModal.tsx
@@ -120,6 +120,15 @@ const DegreeAddInterior = styled.div`
   padding: 1.2rem 2rem;
 `;
 
+/** Create label for major listings */
+export const createMajorLabel = (degree: DegreeListing) => {
+  const concentration =
+    degree.concentration && degree.concentration !== "NONE"
+      ? ` - ${degree.concentration_name}`
+      : "";
+  return `${degree.major_name}${concentration} (${degree.year})`;
+};
+
 interface RemoveDegreeProps {
   degreeplanId: number;
   degreeId: number;
@@ -169,15 +178,6 @@ const ModalInterior = ({
   const { data: degrees, isLoading: isLoadingDegrees } =
     useSWR<DegreeListing[]>(`/api/degree/degrees`);
 
-  /** Create label for major listings */
-  const createMajorLabel = (degree: DegreeListing) => {
-    const concentration =
-      degree.concentration && degree.concentration !== "NONE"
-        ? ` - ${degree.concentration_name}`
-        : "";
-    return `${degree.major_name}${concentration}`;
-  };
-
   const getMajorOptions = React.useCallback(() => {
     /** Filter major options based on selected schools/degrees */
     const majorOptions =
@@ -301,7 +301,7 @@ const ModalInterior = ({
                 placeholder={
                   isLoadingDegrees
                     ? "loading programs..."
-                    : "Major - Concentration"
+                    : "Major - Concentration (Starting Year)"
                 }
                 isLoading={isLoadingDegrees}
               />

diff --git a/frontend/degree-plan/components/FourYearPlan/PanelCommon.tsx b/frontend/degree-plan/components/FourYearPlan/PanelCommon.tsx
@@ -7,7 +7,6 @@ import { Icon } from "../common/bulma_derived_components";
 export const PanelTopBarIcon = styled(Icon)`
     width: 1rem;
     height: 1rem;
-    color: #FFFFFF;
     flex-shrink: 0;
 `;
 
@@ -28,10 +27,8 @@ export const PanelTopBarButton = styled.button`
 
     font-size: 1rem;
     font-weight: 500;
-   
-    background: var(--primary-color-xx-dark); 
     border-radius: 5px;
-    color: #FFFFFF;
+    color: var(--primary-color-xxx-dark);
 `;
 export const DarkBlueBackgroundSkeleton: React.FC<{ width?: string; }> = (props) => (
     <Skeleton
@@ -44,6 +41,7 @@ export const PanelHeader = styled.div`
     justify-content: space-between;
     align-items: center;
     background-color: var(--primary-color);
+    color: var(--primary-color-ultra-dark);
     padding: 0.5rem 1rem;
     flex-grow: 0;
     font-weight: 300;

diff --git a/frontend/degree-plan/components/FourYearPlan/SatisfiedCheck.tsx b/frontend/degree-plan/components/FourYearPlan/SatisfiedCheck.tsx
@@ -0,0 +1,4 @@
+const SatisfiedCheck = () => (
+    <i className="fas fa-check-circle" style={{color: '#5EA872'}} />
+)
+export default SatisfiedCheck;
diff --git a/frontend/degree-plan/components/FourYearPlan/Semester.tsx b/frontend/degree-plan/components/FourYearPlan/Semester.tsx
@@ -11,16 +11,24 @@ import Skeleton from "react-loading-skeleton"
 import 'react-loading-skeleton/dist/skeleton.css'
 import { mutate } from "swr";
 import { ModalKey } from "./DegreeModal";
+import { TRANSFER_CREDIT_SEMESTER_KEY } from "@/constants";
 
+const SEMESTER_REGEX = /\d{4}[ABC]/
 
 const translateSemester = (semester: Course["semester"]) => {
+    if (semester === TRANSFER_CREDIT_SEMESTER_KEY) return "AP & Transfer Credit";
     const year = semester.slice(0, 4);
     const term = semester.slice(4);
     return `${term === "A" ? "Spring" : term === "B" ? "Summer" : "Fall"} ${year}`
 }
 
-export const SemesterCard = styled.div<{$isDroppable:boolean, $isOver: boolean}>`
-    background: #FFFFFF;
+export const SemesterCard = styled.div<{
+    $isDroppable:boolean,
+    $isOver: boolean,
+    $semesterComparison: number // -1 if currentSemester is less than this semester...
+}>`
+    background: ${props => props.$semesterComparison < 0 ? "#F8F8F8" : props.$semesterComparison === 0 ? "var(--primary-color)" : "#FFFFFF"};
+    color: ${props => props.$semesterComparison === 0 ? "var(--primary-color-ultra-dark)" : "inherit"};
     box-shadow: 0px 0px 4px 2px ${props => props.$isOver ? 'var(--selected-color);' : props.$isDroppable ? 'var(--primary-color-dark);' : 'rgba(0, 0, 0, 0.05);'}
     border-radius: 10px;
     border-width: 0px;
@@ -38,7 +46,7 @@ const SemesterHeader = styled.div`
 `
 
 const SemesterLabel = styled.div`
-    font-weight: 500;
+    font-weight: 600;
 `;
 
 const SemesterContent = styled.div`
@@ -76,7 +84,7 @@ export const SkeletonSemester = ({
     showStats,
 } : { showStats: boolean }) => {
     return (
-        <SemesterCard $isDroppable={false} $isOver={false}>
+        <SemesterCard $isDroppable={false} $isOver={false} $semesterComparison={1}>
             <SemesterHeader>
                 <SemesterLabel>
                     <Skeleton width="5em" />
@@ -103,6 +111,7 @@ interface SemesterProps {
     setModalKey: (arg0: ModalKey) => void;
     setModalObject: (obj: any) => void;
     removeSemester: (sem: string) => void;
+    currentSemester?: Course["semester"];
     isLoading?: boolean
 }
 
@@ -115,6 +124,7 @@ const FlexSemester = ({
     setModalKey,
     setModalObject,
     removeSemester,
+    currentSemester,
     isLoading = false
 } : SemesterProps) => {
     const credits = fulfillments.reduce((acc, curr) => acc + (curr.course?.credits || 1), 0)
@@ -166,7 +176,12 @@ const FlexSemester = ({
     }
 
     return (
-        <SemesterCard $isDroppable={canDrop} $isOver={isOver} ref={drop}>
+        <SemesterCard
+        $isDroppable={canDrop}
+        $isOver={isOver}
+        ref={drop}
+        $semesterComparison={currentSemester ? semester.localeCompare(currentSemester) : 1}
+        >
             <SemesterHeader>
                 <SemesterLabel>
                     {translateSemester(semester)}

diff --git a/frontend/degree-plan/components/FourYearPlan/Semesters.tsx b/frontend/degree-plan/components/FourYearPlan/Semesters.tsx
@@ -295,6 +295,7 @@ const Semesters = ({
                 removeSemester={removeSemester}
                 setModalKey={setModalKey}
                 setModalObject={setModalObject}
+                currentSemester={currentSemester}
               />
             ))}
       {editMode && (

diff --git a/frontend/degree-plan/components/FourYearPlan/Stats.tsx b/frontend/degree-plan/components/FourYearPlan/Stats.tsx
@@ -23,7 +23,7 @@ const ScoreCircle = styled(CircularProgressbar)`
 `;
 
 const ScoreLabel = styled.div`
-    font-size: 1rem;
+    font-size: .75rem;
     line-height: 125%;
 `;
 interface ScoreRowProps { 
@@ -44,7 +44,7 @@ const ScoreRow = ({ score, label, reverse = false }: ScoreRowProps) => {
                 text: {
                     fontSize: "2rem",
                     fill: color,
-                    fontWeight: 500
+                    fontWeight: 700
                 }
             }}
             />

diff --git a/frontend/degree-plan/components/Requirements/Rule.tsx b/frontend/degree-plan/components/Requirements/Rule.tsx
@@ -9,6 +9,7 @@ import { ItemTypes } from '../dnd/constants';
 import { DarkBlueBackgroundSkeleton } from "../FourYearPlan/PanelCommon";
 import { DegreeYear, RuleTree } from './ReqPanel';
 import assert from 'assert';
+import SatisfiedCheck from '../FourYearPlan/SatisfiedCheck';
 
 const RuleTitleWrapper = styled.div`
     background-color: var(--primary-color);
@@ -182,7 +183,7 @@ const RuleComponent = (ruleTree : RuleTree) => {
             <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>}
+              {!!satisfied && <SatisfiedCheck />}
               <Column>
                 {rule.credits && 
                   <CusCourses><sup>{cus}</sup>/<sub>{rule.credits}</sub><div>{rule.credits > 1 ? 'cus' : 'cu'}</div></CusCourses>
@@ -204,9 +205,7 @@ const RuleComponent = (ruleTree : RuleTree) => {
         <PickNTitle>
           <div>Pick {num}:</div>
           {satisfied &&
-            <Icon>
-              <i className="fas fa-check-circle"></i>
-            </Icon>
+            <SatisfiedCheck />
             }
         </PickNTitle>
             {children.map((ruleTree) => (

diff --git a/frontend/degree-plan/constants.js b/frontend/degree-plan/constants.js
@@ -1,3 +1,4 @@
+export const TRANSFER_CREDIT_SEMESTER_KEY = "_TRAN";
 // TODO: this is copied from alert constants, should be moved to a shared location
 
 export const DESKTOP = "1248px";

diff --git a/frontend/degree-plan/pages/OnboardingPage.tsx b/frontend/degree-plan/pages/OnboardingPage.tsx
@@ -1,7 +1,5 @@
 import React, { useState, useEffect } from "react";
 import { Button } from "@radix-ui/themes";
-import { PlusIcon } from "@radix-ui/react-icons";
-import { Theme } from "@radix-ui/themes";
 import styled from "@emotion/styled";
 import useSWR, { mutate } from "swr";
 import Select from "react-select";
@@ -14,6 +12,8 @@ import {
 } from "@/types";
 import { postFetcher, useSWRCrud } from "@/hooks/swrcrud";
 import { getLocalSemestersKey, interpolateSemesters } from "@/components/FourYearPlan/Semesters";
+import { TRANSFER_CREDIT_SEMESTER_KEY } from "@/constants";
+import { createMajorLabel } from "@/components/FourYearPlan/DegreeModal";
 
 const PanelContainer = styled.div<{ $maxWidth: string; $minWidth: string }>`
   border-radius: 10px;
@@ -236,16 +236,7 @@ const OnboardingPage = ({
 
   const startingYearOptions = getYearOptions()?.startYears;
   const graduationYearOptions = getYearOptions()?.gradYears;
-
-  /** Create label for major listings */
-  const createMajorLabel = (degree: DegreeListing) => {
-    const concentration =
-      degree.concentration && degree.concentration !== "NONE"
-        ? ` - ${degree.concentration_name}`
-        : "";
-    return `${degree.major_name}${concentration}`;
-  };
-
+
   const getMajorOptions = React.useCallback(() => {
     /** Filter major options based on selected schools/degrees */
     const majorOptions =
@@ -265,14 +256,11 @@ const OnboardingPage = ({
       .then((res) => {
         if (res) {
           if (startingYear && graduationYear) {
+            const semesters = interpolateSemesters(startingYear.value, graduationYear.value);
+            semesters[TRANSFER_CREDIT_SEMESTER_KEY] = [];
             window.localStorage.setItem(
               getLocalSemestersKey(res.id),
-              JSON.stringify(interpolateSemesters(startingYear.value, graduationYear.value))
-            );
-            console.log(
-              "****",
-              getLocalSemestersKey(res.id),
-              JSON.stringify(interpolateSemesters(startingYear.value, graduationYear.value))
+              JSON.stringify(semesters)
             );
           }
           setActiveDegreeplan(res);

diff --git a/frontend/degree-plan/styles/globals.css b/frontend/degree-plan/styles/globals.css
@@ -10,6 +10,8 @@
   --background-end-rgb: 255, 255, 255;
 
   /* blue */
+  --primary-color-ultra-dark: #3D4177;
+  --primary-color-xxx-dark: #6C72B6;
   --primary-color-xx-dark: #819AE1;
   --primary-color-extra-dark: #9AA7C6;
   --primary-color-dark: #C5D2F6;