Add course modal ui tweaks

sandboxnu · Feb 28, 2024 · 90e0511 · 90e0511
1 parent cc101af
commit 90e0511
Show file tree

Hide file tree

Showing 8 changed files with 48 additions and 33 deletions.
diff --git a/packages/frontend/components/AddCourseModal/AddCourseModal.tsx b/packages/frontend/components/AddCourseModal/AddCourseModal.tsx
@@ -32,6 +32,7 @@ import { SelectedCourse } from "./SelectedCourse";
 interface AddCourseModalProps {
   isOpen: boolean;
   catalogYear?: number;
+  addTo: string;
   /** Function to close the modal UX, returned from the useDisclosure chakra hook */
   closeModalDisplay: () => void;
 
@@ -48,6 +49,7 @@ interface AddCourseModalProps {
 export const AddCourseModal: React.FC<AddCourseModalProps> = ({
   isOpen,
   catalogYear,
+  addTo,
   closeModalDisplay,
   isCourseAlreadyAdded,
   addSelectedClasses,
@@ -124,13 +126,19 @@ export const AddCourseModal: React.FC<AddCourseModalProps> = ({
       <ModalContent>
         <ModalHeader
           color="primary.blue.dark.main"
-          borderBottom="2px"
-          borderColor="neutral.100"
+          borderBottom="1px"
+          borderColor="neutral.200"
         >
-          <Flex alignItems="center" justifyContent="center" columnGap="2xs">
+          <Flex alignItems="center" justifyContent="center" columnGap="xs">
             <Text>Add Courses</Text>
             <HelperToolTip label="We try our best to search for courses across as many semesters as possible. If you cannot find your course, please report a bug with your plan catalog year and we will try to solve it as soon as possible." />
           </Flex>
+          <Text fontSize="sm" align="center" fontWeight="normal">
+            Select courses to add to{" "}
+            <Text as="span" fontWeight="bold">
+              {addTo}
+            </Text>
+          </Text>
         </ModalHeader>
         <ModalCloseButton />
         <ModalBody padding="0">
@@ -141,10 +149,11 @@ export const AddCourseModal: React.FC<AddCourseModalProps> = ({
               bg="neutral.50"
               paddingLeft="7"
               paddingY="9"
-              borderRight="2px"
-              borderColor="neutral.100"
+              borderRight="1px"
+              borderColor="neutral.200"
+              borderEndStartRadius="lg"
             >
-              <Text fontSize="lg" as="b" marginBottom="5">
+              <Text fontSize="md" as="b" marginBottom="xs">
                 NUPath
               </Text>
               <Flex direction="column" gap="2">
@@ -163,8 +172,9 @@ export const AddCourseModal: React.FC<AddCourseModalProps> = ({
               <Flex
                 direction="column"
                 padding="4"
-                borderBottom="2px"
-                borderColor="neutral.100"
+                paddingBottom="0"
+                borderBottom="1px"
+                borderColor="neutral.200"
               >
                 <SearchCoursesInput
                   setSearchQuery={setSearchQuery}
@@ -180,8 +190,12 @@ export const AddCourseModal: React.FC<AddCourseModalProps> = ({
                   {!error && (!courses || courses.length === 0) && (
                     <Flex alignItems="center" justifyContent="center">
                       <InfoIcon color="neutral.300" marginRight="2" />
-                      <Text fontSize="sm" color="neutral.300">
-                        Search results will show up here.
+                      <Text
+                        fontSize="sm"
+                        fontWeight="semibold"
+                        color="neutral.400"
+                      >
+                        Search results will show up here...
                       </Text>
                     </Flex>
                   )}
@@ -227,7 +241,7 @@ export const AddCourseModal: React.FC<AddCourseModalProps> = ({
               </Flex>
 
               {/* Selected Courses Area */}
-              <Flex padding="4" direction="column">
+              <Flex padding="4" paddingBottom="0" direction="column">
                 <Text fontSize="md" fontWeight="bold">
                   Courses to Add:
                 </Text>

diff --git a/packages/frontend/components/AddCourseModal/NUPathCheckBox.tsx b/packages/frontend/components/AddCourseModal/NUPathCheckBox.tsx
@@ -30,17 +30,18 @@ export const NUPathCheckBox: React.FC<NUPathCheckProps> = ({
 
   return (
     <Checkbox
-      size="lg"
+      size="md"
       colorScheme="blue"
       checked={isChecked}
       onChange={updateFilters}
+      borderColor="neutral.300"
     >
-      <Flex alignItems="baseline">
+      <Flex alignItems="baseline" ml="-0.5">
         <Text
           fontWeight="bold"
           color="primary.blue.light.main"
           fontSize="sm"
-          marginRight="2"
+          marginRight="2xs"
         >
           {nuPath}
         </Text>

diff --git a/packages/frontend/components/AddCourseModal/NUPathLabel.tsx b/packages/frontend/components/AddCourseModal/NUPathLabel.tsx
@@ -61,7 +61,7 @@ export const NUPathLabel: React.FC<NuPathLabelProps> = ({
         <Flex
           key={nuPaths.indexOf(nuPath)}
           backgroundColor={
-            filteredPaths.includes(nuPath, 0) ? "blue.200" : "gray.200"
+            filteredPaths.includes(nuPath, 0) ? "blue.100" : "gray.200"
           }
           width="7"
           height="5"

diff --git a/packages/frontend/components/AddCourseModal/SearchResult.tsx b/packages/frontend/components/AddCourseModal/SearchResult.tsx
@@ -1,5 +1,5 @@
 import { AddIcon } from "@chakra-ui/icons";
-import { Box, Flex, IconButton, Text } from "@chakra-ui/react";
+import { Box, Flex, IconButton, Text, HStack } from "@chakra-ui/react";
 import { NUPathEnum, ScheduleCourse2 } from "@graduate/common";
 import { getCourseDisplayString } from "../../utils/";
 import { GraduateToolTip } from "../GraduateTooltip";
@@ -36,23 +36,23 @@ export const SearchResult: React.FC<SearchResultProps> = ({
       alignItems="end"
       padding="1"
       paddingY="2"
-      borderBottom="2px"
+      borderBottom="1px"
       borderColor="neutral.100"
     >
-      <Box flex="2">
-        <Text>
-          <Text as="span" fontSize="14px" fontWeight="bold" marginRight="2">
+      <HStack>
+        <Box>
+          <Text as="span" fontSize="sm" fontWeight="bold" marginRight="2">
             {getCourseDisplayString(course)}
           </Text>
-          <Text as="span" size="sm" fontWeight="normal">
+          <Text as="span" fontSize="sm">
             {course.name}
           </Text>
-        </Text>
-      </Box>
-      <NUPathLabel
-        nuPaths={course.nupaths ? course.nupaths : []}
-        filteredPaths={filteredPaths}
-      />
+        </Box>
+        <NUPathLabel
+          nuPaths={course.nupaths ? course.nupaths : []}
+          filteredPaths={filteredPaths}
+        />
+      </HStack>
       <GraduateToolTip
         label={addButtonTooltip}
         isDisabled={!isAddButtonDisabled}

diff --git a/packages/frontend/components/AddCourseModal/SelectedCourse.tsx b/packages/frontend/components/AddCourseModal/SelectedCourse.tsx
@@ -25,13 +25,11 @@ export const SelectedCourse: React.FC<SelectedCourseProps> = ({
       borderColor="neutral.200"
     >
       <Box flex="2">
-        <Text>
-          <Text as="span" fontSize="14px" fontWeight="bold" marginRight="2">
+        <Text fontSize="sm">
+          <Text as="span" fontWeight="bold" marginRight="2">
             {getCourseDisplayString(selectedCourse)}
           </Text>
-          <Text as="span" size="sm" fontWeight="normal">
-            {selectedCourse.name}
-          </Text>
+          <Text as="span">{selectedCourse.name}</Text>
         </Text>
       </Box>
       <NUPathLabel

diff --git a/packages/frontend/components/Plan/ScheduleTerm.tsx b/packages/frontend/components/Plan/ScheduleTerm.tsx
@@ -89,6 +89,7 @@ export const ScheduleTerm: React.FC<ScheduleTermProps> = ({
       <AddCourseModal
         isOpen={isOpen}
         catalogYear={catalogYear}
+        addTo={getSeasonDisplayWord(scheduleTerm.season)}
         closeModalDisplay={onClose}
         isCourseAlreadyAdded={isCourseInCurrTerm}
         addSelectedClasses={(courses: ScheduleCourse2<null>[]) =>

diff --git a/packages/frontend/components/Plan/TransferCourses.tsx b/packages/frontend/components/Plan/TransferCourses.tsx
@@ -146,6 +146,7 @@ const TransferCoursesBody: React.FC<TransferCoursesBodyProps> = ({
       <AddCourseButton onOpen={onOpen} />
       <AddCourseModal
         isOpen={isOpen}
+        addTo="Transfer Courses"
         closeModalDisplay={onClose}
         addSelectedClasses={addTransferCourses}
         isCourseAlreadyAdded={isTransferCoursesAlreadyAdded}

diff --git a/packages/frontend/components/ScheduleCourse/CourseDragIcon.tsx b/packages/frontend/components/ScheduleCourse/CourseDragIcon.tsx
@@ -11,7 +11,7 @@ export const CourseDragIcon: React.FC = () => {
         lineHeight: "1em",
         WebkitFlexShrink: 0,
         flexShrink: 0,
-        color: "var(--chakra-colors-primary-blue-dark-main)",
+        color: "var(--chakra-colors-gray-400)",
         verticalAlign: "middle",
       }}
     >