UI updates (#636)

* decrease font size * italicize directions, add colon * modify neutral.300 to be the "gray" color style in figma * sidebar color updates, remove some colors that arent used * lighten sidebar hover bg color * remove background color from error icon when clicking * remove background color variable, only use blue.light * update year hover and active colors * update button colors * change transfer courses bg + hover * neutral.200 -> gray2 * remove border from transfer courses button * add + icon to add year button * move checkbox to left * move checkbox edit plan modal * change name input fields to md * decrease spacing between label and input * remove extra " * add back open year color * delete plan border width * update year active color * decrease spacing between home page title * neutral.main -> neutral.gray * remove neutral.main * use neutral.gray * fix color * more styling changes, remove GrayButton * fix neutral gray color styles
sandboxnu · Nov 8, 2023 · 374808b · 374808b
1 parent eee6d44
commit 374808b
Show file tree

Hide file tree

Showing 26 changed files with 97 additions and 101 deletions.
diff --git a/packages/api-v2/src/emailConfirmation/emailConfirmation.controller.ts b/packages/api-v2/src/emailConfirmation/emailConfirmation.controller.ts
@@ -34,8 +34,9 @@ export class EmailConfirmationController {
     if (email instanceof Error) {
       throw new BadRequestException();
     }
-    const updateResult =
-      await this.emailConfirmationService.confirmEmail(email);
+    const updateResult = await this.emailConfirmationService.confirmEmail(
+      email
+    );
     if (updateResult instanceof EmailAlreadyConfirmed) {
       throw new BadRequestException("Email is already confirmed");
     }

diff --git a/packages/frontend-v2/components/AddCourseModal/AddCourseButton.tsx b/packages/frontend-v2/components/AddCourseModal/AddCourseButton.tsx
@@ -10,14 +10,12 @@ export const AddCourseButton: React.FC<AddCourseButtonProps & ButtonProps> = ({
   ...buttonProps
 }) => {
   const hoverStyle = {
-    backgroundColor: "neutral.700",
-    borderColor: "primary.blue.dark.300",
+    borderColor: "neutral.300",
   };
 
   const activeStyle = {
-    backgroundColor: "neutral.900",
-    borderColor: "primary.blue.dark.300",
-    transform: "scale(0.96)",
+    backgroundColor: "neutral.200",
+    borderColor: "neutral.200",
   };
 
   return (
@@ -27,8 +25,10 @@ export const AddCourseButton: React.FC<AddCourseButtonProps & ButtonProps> = ({
       size="md"
       margin="0"
       borderRadius="10px"
-      borderColor="neutral.main"
-      backgroundColor="neutral.main"
+      border="1px"
+      borderColor="neutral.50"
+      backgroundColor="neutral.50"
+      boxShadow="sm"
       _hover={hoverStyle}
       _active={activeStyle}
       color="primary.blue.light.main"

diff --git a/packages/frontend-v2/components/AddCourseModal/SearchCoursesInput.tsx b/packages/frontend-v2/components/AddCourseModal/SearchCoursesInput.tsx
@@ -36,7 +36,7 @@ export const SearchCoursesInput: React.FC<SearchCoursesInputProps> = ({
         borderRadius={10}
         fontSize="sm"
         color="primary.blue.light.main"
-        backgroundColor="neutral.main"
+        backgroundColor="neutral.100"
         placeholder="SEARCH BY NAME, CRN, ETC."
       />
     </InputGroup>

diff --git a/packages/frontend-v2/components/AddCourseModal/SearchResult.tsx b/packages/frontend-v2/components/AddCourseModal/SearchResult.tsx
@@ -33,7 +33,7 @@ export const SearchResult: React.FC<SearchResultProps> = ({
         <Heading size="sm" fontWeight="normal">
           {searchResult.name}
         </Heading>
-        <Text fontSize="12px" color="neutral.main.900" fontStyle="italics">
+        <Text fontSize="12px" fontStyle="italics">
           {getCourseDisplayString(searchResult)}
         </Text>
       </Box>

diff --git a/packages/frontend-v2/components/AddCourseModal/SelectedCourse.tsx b/packages/frontend-v2/components/AddCourseModal/SelectedCourse.tsx
@@ -16,7 +16,7 @@ export const SelectedCourse: React.FC<SelectedCourseProps> = ({
     <Flex
       borderRadius="md"
       boxShadow="md"
-      backgroundColor="neutral.main"
+      backgroundColor="neutral.100"
       alignItems="center"
     >
       <Text pl="sm" pr="2xs">

diff --git a/packages/frontend-v2/components/Authentication/AuthPageLayout.tsx b/packages/frontend-v2/components/Authentication/AuthPageLayout.tsx
@@ -13,11 +13,7 @@ export const AuthenticationPageLayout: React.FC<
       <GraduatePreAuthHeader />
       <Grid templateColumns="repeat(8, 1fr)" templateRows="1fr" flexGrow={1}>
         <GridItem colSpan={3}>{form}</GridItem>
-        <GridItem
-          colSpan={5}
-          backgroundColor="neutral.main"
-          position="relative"
-        >
+        <GridItem colSpan={5} backgroundColor="neutral.100" position="relative">
           <Image
             src="/app_snippet.png"
             alt="GraduateNU app snippet"

diff --git a/packages/frontend-v2/components/Button/BlueButton.tsx b/packages/frontend-v2/components/Button/BlueButton.tsx
@@ -5,6 +5,7 @@ export const BlueButton: ComponentWithAs<"button", ButtonProps> = ({
 }) => {
   return (
     <Button
+      border="1px"
       variant="outline"
       borderColor="primary.blue.light.main"
       colorScheme="primary.blue.light"

diff --git a/packages/frontend-v2/components/Button/GrayButton.tsx b/packages/frontend-v2/components/Button/GrayButton.tsx
diff --git a/packages/frontend-v2/components/Button/index.ts b/packages/frontend-v2/components/Button/index.ts
@@ -1,2 +1 @@
 export * from "./BlueButton";
-export * from "./GrayButton";
diff --git a/packages/frontend-v2/components/Form/Input.tsx b/packages/frontend-v2/components/Form/Input.tsx
@@ -23,16 +23,16 @@ export const GraduateInput = forwardRef<HTMLInputElement, InputProps>(
   ({ error, helpMessage, formLabel, ...rest }, ref) => (
     <FormControl isInvalid={error != undefined}>
       {formLabel && (
-        <FormLabel>
+        <FormLabel mb="1px">
           <Text color="primary.blue.dark.main">{formLabel}</Text>
         </FormLabel>
       )}
       <Input
         {...rest}
         ref={ref}
-        size="lg"
+        size="md"
         variant="outline"
-        borderColor="neutral.main"
+        borderColor="neutral.100"
         borderWidth="2px"
         borderRadius="lg"
         errorBorderColor="red.300"
@@ -57,7 +57,7 @@ export const PlanInput = forwardRef<HTMLInputElement, PlanInputProps>(
         color="primary.blue.dark.main"
         size="md"
         fontWeight="medium"
-        mb="2xs"
+        mb="1px"
       >
         {label}
       </FormLabel>

diff --git a/packages/frontend-v2/components/Form/Select.tsx b/packages/frontend-v2/components/Form/Select.tsx
@@ -80,7 +80,7 @@ export const PlanSelect: React.FC<PlanSelectProps> = ({
         color="primary.blue.dark.main"
         size="md"
         fontWeight="medium"
-        mb="2xs"
+        mb="4xs"
       >
         {label}
       </FormLabel>

diff --git a/packages/frontend-v2/components/Header/AccountOverview.tsx b/packages/frontend-v2/components/Header/AccountOverview.tsx
@@ -107,7 +107,7 @@ export const AccountOverview: React.FC<AccountOverviewProps> = ({
                 />
               </Flex>
               <FormControl>
-                <FormLabel>
+                <FormLabel mb="4xs">
                   <Text>Email</Text>
                 </FormLabel>
                 <Input
@@ -116,7 +116,7 @@ export const AccountOverview: React.FC<AccountOverviewProps> = ({
                   type="email"
                   size="md"
                   variant="outline"
-                  borderColor="neutral.main"
+                  borderColor="neutral.100"
                   borderWidth="2px"
                   borderRadius="md"
                 />

diff --git a/packages/frontend-v2/components/Plan/AddPlanModal.tsx b/packages/frontend-v2/components/Plan/AddPlanModal.tsx
@@ -144,6 +144,13 @@ export const AddPlanModal: React.FC<AddPlanModalProps> = ({
                   })}
                 />
                 <Flex alignItems="center">
+                  <Checkbox
+                    mb="0"
+                    mr="xs"
+                    borderColor="primary.blue.dark.main"
+                    isChecked={isNoMajorSelected}
+                    onChange={() => setIsNoMajorSelected(!isNoMajorSelected)}
+                  />
                   <Text
                     color="primary.blue.dark.main"
                     size="md"
@@ -153,13 +160,6 @@ export const AddPlanModal: React.FC<AddPlanModalProps> = ({
                   >
                     No Major
                   </Text>
-                  <Checkbox
-                    mb="0"
-                    mr="xs"
-                    borderColor="primary.blue.dark.main"
-                    isChecked={isNoMajorSelected}
-                    onChange={() => setIsNoMajorSelected(!isNoMajorSelected)}
-                  />
                   <HelperToolTip label={noMajorHelperLabel} />
                 </Flex>
                 {!isNoMajorSelected && (

diff --git a/packages/frontend-v2/components/Plan/AddYearButton.tsx b/packages/frontend-v2/components/Plan/AddYearButton.tsx
@@ -1,6 +1,7 @@
 import { PlanModel } from "@graduate/common";
 import { addEmptyDndYearToPlan } from "../../utils";
 import { BlueButton } from "../Button";
+import { AddIcon } from "@chakra-ui/icons";
 
 interface AddYearButton {
   plan: PlanModel<string>;
@@ -15,5 +16,9 @@ export const AddYearButton: React.FC<AddYearButton> = ({
     const updatedPlan = addEmptyDndYearToPlan(plan);
     mutateStudentWithUpdatedPlan(updatedPlan);
   };
-  return <BlueButton onClick={addYear}>Add Year</BlueButton>;
+  return (
+    <BlueButton onClick={addYear} leftIcon={<AddIcon />}>
+      Add Year
+    </BlueButton>
+  );
 };
diff --git a/packages/frontend-v2/components/Plan/DeletePlanModal.tsx b/packages/frontend-v2/components/Plan/DeletePlanModal.tsx
@@ -54,6 +54,7 @@ export const DeletePlanModal: React.FC<DeletePlanModalProps> = ({
           icon={<DeleteIcon />}
           aria-label="Delete plan"
           variant="outline"
+          border="1px"
           borderColor="primary.red.main"
           colorScheme="primary.red"
           color="primary.red.main"

diff --git a/packages/frontend-v2/components/Plan/EditPlanModal.tsx b/packages/frontend-v2/components/Plan/EditPlanModal.tsx
@@ -178,6 +178,13 @@ export const EditPlanModal: React.FC<EditPlanModalProps> = ({ plan }) => {
                   })}
                 />
                 <Flex alignItems="center">
+                  <Checkbox
+                    mb="0"
+                    mr="xs"
+                    borderColor="primary.blue.dark.main"
+                    isChecked={isNoMajorSelected}
+                    onChange={() => setIsNoMajorSelected(!isNoMajorSelected)}
+                  />
                   <Text
                     color="primary.blue.dark.main"
                     size="md"
@@ -187,13 +194,6 @@ export const EditPlanModal: React.FC<EditPlanModalProps> = ({ plan }) => {
                   >
                     No Major
                   </Text>
-                  <Checkbox
-                    mb="0"
-                    mr="xs"
-                    borderColor="primary.blue.dark.main"
-                    isChecked={isNoMajorSelected}
-                    onChange={() => setIsNoMajorSelected(!isNoMajorSelected)}
-                  />
                   <HelperToolTip label={noMajorHelperLabel} />
                 </Flex>
                 {!isNoMajorSelected && (

diff --git a/packages/frontend-v2/components/Plan/ReqErrorModal.tsx b/packages/frontend-v2/components/Plan/ReqErrorModal.tsx
@@ -52,7 +52,7 @@ export const ReqErrorModal: React.FC<ReqErrorModalProps> = ({
       }}
       _active={{ background: "primary.red.900" }}
       onClick={() => {
-        setHovered(false)
+        setHovered(false);
         onOpen();
       }}
     >
@@ -70,7 +70,7 @@ export const ReqErrorModal: React.FC<ReqErrorModalProps> = ({
           <ModalHeader
             textAlign="center"
             borderBottomWidth="1px"
-            borderBottomColor="neutral.main"
+            borderBottomColor="neutral.100"
           >
             <ModalCloseButton />
             <Flex
@@ -101,7 +101,7 @@ export const ReqErrorModal: React.FC<ReqErrorModalProps> = ({
                   <HelperToolTip
                     label={`You will need to statisfy the following requirement(s) along with ${getCourseDisplayString(
                       course
-                    )}."`}
+                    )}.`}
                   />
                 </Flex>
                 <ParseCourse course={coReqErr} parent={true} />

diff --git a/packages/frontend-v2/components/Plan/ScheduleTerm.tsx b/packages/frontend-v2/components/Plan/ScheduleTerm.tsx
@@ -60,7 +60,7 @@ export const ScheduleTerm: React.FC<ScheduleTermProps> = ({
     <GridItem
       ref={setNodeRef}
       transition="background-color 0.1s ease"
-      backgroundColor={isOver ? "neutral.main" : "#D2D8E2"}
+      backgroundColor={isOver ? "neutral.200" : "neutral.100"}
       display="flex"
       flexDirection="column"
       px="sm"

diff --git a/packages/frontend-v2/components/Plan/ScheduleYear.tsx b/packages/frontend-v2/components/Plan/ScheduleYear.tsx
@@ -147,7 +147,6 @@ const YearHeader: React.FC<YearHeaderProps> = ({
   const backgroundColor = isExpanded
     ? "primary.blue.dark"
     : "primary.blue.light";
-
   return (
     <Flex
       alignItems="center"
@@ -156,6 +155,9 @@ const YearHeader: React.FC<YearHeaderProps> = ({
       _hover={{
         backgroundColor: "primary.blue.light.600",
       }}
+      _active={{
+        bg: "primary.blue.dark.700",
+      }}
       transition="background-color 0.15s ease"
       paddingTop="sm"
       paddingBottom="sm"
@@ -180,8 +182,8 @@ const YearHeader: React.FC<YearHeaderProps> = ({
               variant="ghost"
               color="primary.red.main"
               icon={<WarningIcon />}
-              _hover={{ bg: 'none', cursor: 'auto' }}
-              _active={{ bg: `${backgroundColor}.900` }}
+              _hover={{ bg: "none", cursor: "auto" }}
+              _active={{ bg: "none" }}
               onClick={(e) => {
                 if (isExpanded) {
                   e.stopPropagation();
@@ -199,7 +201,7 @@ const YearHeader: React.FC<YearHeaderProps> = ({
             marginLeft="auto"
             marginRight="sm"
             _hover={{ bg: "white", color: "primary.red.main" }}
-            _active={{ bg: `${backgroundColor}.900` }}
+            _active={{ bg: "primary.blue.light.900" }}
             onClick={(e) => {
               // important to prevent the click from propogating upwards and triggering the toggle
               e.stopPropagation();

diff --git a/packages/frontend-v2/components/Plan/TransferCourses.tsx b/packages/frontend-v2/components/Plan/TransferCourses.tsx
@@ -71,7 +71,7 @@ export const TransferCourses: React.FC<TransferCoursesToggleProps> = ({
   };
 
   return (
-    <Flex direction="column" backgroundColor={"neutral.main"}>
+    <Flex direction="column" backgroundColor={"neutral.100"}>
       <TransferCoursesHeader
         isExpanded={isExpanded}
         toggleExpanded={toggleExpanded}
@@ -133,11 +133,7 @@ const TransferCoursesBody: React.FC<TransferCoursesBodyProps> = ({
           removeCourse={() => removeTransferCourse(course)}
         />
       ))}
-      <AddCourseButton
-        onOpen={onOpen}
-        borderColor="#C1CAD9"
-        borderWidth="1px"
-      />
+      <AddCourseButton onOpen={onOpen} />
       <AddCourseModal
         isOpen={isOpen}
         closeModalDisplay={onClose}
@@ -174,8 +170,12 @@ const TransferCoursesHeader: React.FC<TransferCoursesHeaderProps> = ({
     <Flex
       alignItems="center"
       justifyContent="space-between"
+      backgroundColor="neutral.50"
       _hover={{
-        backgroundColor: "neutral.900",
+        backgroundColor: "neutral.100",
+      }}
+      _active={{
+        backgroundColor: "neutral.200",
       }}
       transition="background-color 0.15s ease"
       paddingTop="xs"
@@ -184,7 +184,7 @@ const TransferCoursesHeader: React.FC<TransferCoursesHeaderProps> = ({
       cursor="pointer"
       userSelect="none"
       borderBottomWidth={isExpanded ? "2px" : "0px"}
-      borderBottomColor="neutral.900"
+      borderBottomColor="neutral.200"
       paddingX="md"
     >
       <Flex flexDirection="column">
Original file line number	Diff line number	Diff line change
		@@ -1,2 +1 @@
		export * from "./BlueButton";
		export * from "./GrayButton";