Angela/add course modal UI tweaks

packages/frontend/components/AddCourseModal/AddCourseModal.tsx

@@ -28,10 +28,12 @@ import { NUPathCheckBox } from "./NUPathCheckBox";
 import { SearchCoursesInput } from "./SearchCoursesInput";
 import { SearchResult } from "./SearchResult";
 import { SelectedCourse } from "./SelectedCourse";
+import { SecondaryButton } from "../Button";
 
 interface AddCourseModalProps {
   isOpen: boolean;
   catalogYear?: number;
+  addTo: string;
   /** Function to close the modal UX, returned from the useDisclosure chakra hook */
   closeModalDisplay: () => void;
 
@@ -48,6 +50,7 @@ interface AddCourseModalProps {
 export const AddCourseModal: React.FC<AddCourseModalProps> = ({
   isOpen,
   catalogYear,
+  addTo,
   closeModalDisplay,
   isCourseAlreadyAdded,
   addSelectedClasses,
@@ -119,18 +122,24 @@ export const AddCourseModal: React.FC<AddCourseModalProps> = ({
   };
 
   return (
-    <Modal isOpen={isOpen} onClose={onClose} size="3xl" isCentered>
+    <Modal isOpen={isOpen} onClose={onClose} size="4xl" isCentered>
       <ModalOverlay />
       <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">
@@ -139,12 +148,12 @@ export const AddCourseModal: React.FC<AddCourseModalProps> = ({
             <Flex
               direction="column"
               bg="neutral.50"
-              paddingLeft="7"
-              paddingY="9"
-              borderRight="2px"
-              borderColor="neutral.100"
+              padding="xl"
+              borderRight="1px"
+              borderColor="neutral.200"
+              borderEndStartRadius="lg"
             >
-              <Text fontSize="lg" as="b" marginBottom="5">
+              <Text fontSize="md" fontWeight="bold" 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}
@@ -174,14 +184,18 @@ export const AddCourseModal: React.FC<AddCourseModalProps> = ({
                   direction="column"
                   height="300px"
                   overflow="scroll"
-                  marginTop="4"
+                  marginTop="sm"
                 >
                   {/* No course search */}
                   {!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,12 +241,12 @@ export const AddCourseModal: React.FC<AddCourseModalProps> = ({
               </Flex>
 
               {/* Selected Courses Area */}
-              <Flex padding="4" direction="column">
+              <Flex padding="md" paddingBottom="0" direction="column">
                 <Text fontSize="md" fontWeight="bold">
                   Courses to Add:
                 </Text>
                 <VStack
-                  paddingY="2"
+                  paddingY="xs"
                   height="130px"
                   overflow="scroll"
                   alignItems="stretch"
@@ -248,19 +262,11 @@ export const AddCourseModal: React.FC<AddCourseModalProps> = ({
                 </VStack>
               </Flex>
               <ModalFooter justifyContent="end" gap="md">
-                <Button
-                  variant="whiteCancelOutline"
-                  size="md"
-                  borderRadius="lg"
-                  onClick={onClose}
-                >
-                  Cancel
-                </Button>
+                <SecondaryButton onClick={onClose}>Cancel</SecondaryButton>
                 <Button
                   leftIcon={<AddIcon />}
                   variant="solid"
                   borderRadius="lg"
-                  size="md"
                   backgroundColor="primary.blue.light.main"
                   borderColor="primary.blue.light.main"
                   colorScheme="primary.blue.light.main"

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>

packages/frontend/components/AddCourseModal/NUPathLabel.tsx

@@ -48,28 +48,20 @@ export const NUPathLabel: React.FC<NuPathLabelProps> = ({
   }
 
   return (
-    <Flex
-      justifyContent="end"
-      align="center"
-      gap="1"
-      marginRight="5"
-      wrap="wrap"
-      flex="1"
-      flexBasis="0px"
-    >
+    <Flex justifyContent="end" gap="2xs" flex="1" ml="xs">
       {nuPaths.map((nuPath) => (
         <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"
+          width="6"
+          height="4"
           justifyContent="center"
           alignItems="center"
-          borderRadius="md"
+          borderRadius="base"
         >
-          <Text fontSize="xs">{pathToAbbrev(nuPath)}</Text>
+          <Text fontSize="2xs">{pathToAbbrev(nuPath)}</Text>
         </Flex>
       ))}
     </Flex>

packages/frontend/components/AddCourseModal/SearchResult.tsx

@@ -34,25 +34,26 @@ export const SearchResult: React.FC<SearchResultProps> = ({
     <Flex
       justifyContent="space-between"
       alignItems="end"
-      padding="1"
-      paddingY="2"
-      borderBottom="2px"
+      padding="2xs"
+      paddingY="xs"
+      borderBottom="1px"
       borderColor="neutral.100"
     >
-      <Box flex="2">
-        <Text>
-          <Text as="span" fontSize="14px" fontWeight="bold" marginRight="2">
+      <Flex width="100%" mr="md" alignItems="center" minH="25px">
+        <Box lineHeight="1.2">
+          <Text as="span" fontSize="sm" fontWeight="bold" marginRight="sm">
             {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}
+        />
+      </Flex>
+
       <GraduateToolTip
         label={addButtonTooltip}
         isDisabled={!isAddButtonDisabled}
@@ -65,6 +66,7 @@ export const SearchResult: React.FC<SearchResultProps> = ({
           colorScheme="primary.blue.light.main"
           isRound
           size="xs"
+          mr="sm"
           onClick={() => addSelectedCourse(course)}
           isLoading={isSelectingAnotherCourse}
           isDisabled={isResultAlreadyAdded || isResultAlreadySelected}

packages/frontend/components/AddCourseModal/SelectedCourse.tsx

@@ -19,19 +19,18 @@ export const SelectedCourse: React.FC<SelectedCourseProps> = ({
     <Flex
       alignItems="center"
       justifyContent="space-between"
-      padding="2"
+      padding="xs"
+      px="sm"
       borderRadius="xl"
       border="1px"
       borderColor="neutral.200"
     >
-      <Box flex="2">
-        <Text>
-          <Text as="span" fontSize="14px" fontWeight="bold" marginRight="2">
+      <Box lineHeight="1">
+        <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
@@ -48,6 +47,7 @@ export const SelectedCourse: React.FC<SelectedCourseProps> = ({
         size="xs"
         onClick={() => removeSelectedCourse(selectedCourse)}
         alignSelf="center"
+        ml="sm"
       />
     </Flex>
   );

packages/frontend/components/Button/SecondaryButton.tsx

@@ -0,0 +1,17 @@
+import { Button, ButtonProps, ComponentWithAs } from "@chakra-ui/react";
+
+export const SecondaryButton: ComponentWithAs<"button", ButtonProps> = ({
+  ...rest
+}) => {
+  return (
+    <Button
+      variant="whiteCancelOutline"
+      borderRadius="lg"
+      boxShadow="0px 2px 0px 0px #E6E9EE"
+      borderColor="#E6E9EE"
+      color="neutral.400"
+      border="2px"
+      {...rest}
+    />
+  );
+};

packages/frontend/components/Button/index.ts

@@ -1 +1,2 @@
 export * from "./BlueButton";
+export * from "./SecondaryButton";

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>[]) =>

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}

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",
       }}
     >