fix neutral gray color styles

sandboxnu · Nov 6, 2023 · 3cd027a · 3cd027a
1 parent fefc581
commit 3cd027a
Show file tree

Hide file tree

Showing 13 changed files with 33 additions and 37 deletions.
diff --git a/packages/frontend-v2/components/AddCourseModal/AddCourseButton.tsx b/packages/frontend-v2/components/AddCourseModal/AddCourseButton.tsx
@@ -10,12 +10,12 @@ export const AddCourseButton: React.FC<AddCourseButtonProps & ButtonProps> = ({
   ...buttonProps
 }) => {
   const hoverStyle = {
-    borderColor: "neutral.gray3",
+    borderColor: "neutral.300",
   };
 
   const activeStyle = {
-    backgroundColor: "neutral.gray2",
-    borderColor: "neutral.gray2",
+    backgroundColor: "neutral.200",
+    borderColor: "neutral.200",
   };
 
   return (
@@ -26,8 +26,8 @@ export const AddCourseButton: React.FC<AddCourseButtonProps & ButtonProps> = ({
       margin="0"
       borderRadius="10px"
       border="1px"
-      borderColor="neutral.gray0"
-      backgroundColor="neutral.gray0"
+      borderColor="neutral.50"
+      backgroundColor="neutral.50"
       boxShadow="sm"
       _hover={hoverStyle}
       _active={activeStyle}

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.gray"
+        backgroundColor="neutral.100"
         placeholder="SEARCH BY NAME, CRN, ETC."
       />
     </InputGroup>

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.gray"
+      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.gray"
-          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/Form/Input.tsx b/packages/frontend-v2/components/Form/Input.tsx
@@ -32,7 +32,7 @@ export const GraduateInput = forwardRef<HTMLInputElement, InputProps>(
         ref={ref}
         size="md"
         variant="outline"
-        borderColor="neutral.gray"
+        borderColor="neutral.100"
         borderWidth="2px"
         borderRadius="lg"
         errorBorderColor="red.300"

diff --git a/packages/frontend-v2/components/Header/AccountOverview.tsx b/packages/frontend-v2/components/Header/AccountOverview.tsx
@@ -139,7 +139,7 @@ export const AccountOverview: React.FC<AccountOverviewProps> = ({
                   type="email"
                   size="md"
                   variant="outline"
-                  borderColor="neutral.gray"
+                  borderColor="neutral.100"
                   borderWidth="2px"
                   borderRadius="md"
                 />

diff --git a/packages/frontend-v2/components/Plan/ReqErrorModal.tsx b/packages/frontend-v2/components/Plan/ReqErrorModal.tsx
@@ -70,7 +70,7 @@ export const ReqErrorModal: React.FC<ReqErrorModalProps> = ({
           <ModalHeader
             textAlign="center"
             borderBottomWidth="1px"
-            borderBottomColor="neutral.gray"
+            borderBottomColor="neutral.100"
           >
             <ModalCloseButton />
             <Flex

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.gray2" : "neutral.gray"}
+      backgroundColor={isOver ? "neutral.200" : "neutral.100"}
       display="flex"
       flexDirection="column"
       px="sm"

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.gray"}>
+    <Flex direction="column" backgroundColor={"neutral.100"}>
       <TransferCoursesHeader
         isExpanded={isExpanded}
         toggleExpanded={toggleExpanded}
@@ -170,12 +170,12 @@ const TransferCoursesHeader: React.FC<TransferCoursesHeaderProps> = ({
     <Flex
       alignItems="center"
       justifyContent="space-between"
-      backgroundColor="neutral.gray0"
+      backgroundColor="neutral.50"
       _hover={{
-        backgroundColor: "neutral.gray",
+        backgroundColor: "neutral.100",
       }}
       _active={{
-        backgroundColor: "neutral.gray2",
+        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.gray2"
+      borderBottomColor="neutral.200"
       paddingX="md"
     >
       <Flex flexDirection="column">

diff --git a/packages/frontend-v2/components/Sidebar/Sidebar.tsx b/packages/frontend-v2/components/Sidebar/Sidebar.tsx
@@ -327,9 +327,9 @@ const SidebarContainer: React.FC<PropsWithChildren<SidebarContainerProps>> = ({
   return (
     <Box
       pt="xl"
-      backgroundColor="neutral.gray0"
+      backgroundColor="neutral.50"
       borderRight="1px"
-      borderRightColor="neutral.gray2"
+      borderRightColor="neutral.200"
     >
       <Box px="md" pb="md">
         <Box pb="sm">

diff --git a/packages/frontend-v2/components/Sidebar/SidebarSection.tsx b/packages/frontend-v2/components/Sidebar/SidebarSection.tsx
@@ -29,7 +29,7 @@ const SidebarSection: React.FC<SidebarSectionProps> = ({
 }) => {
   const [opened, setOpened] = useState(false);
 
-  const grey = "neutral.gray4";
+  const grey = "neutral.400";
   const green = "states.success.main";
 
   const warningLabel = section.warnings && (
@@ -49,7 +49,7 @@ const SidebarSection: React.FC<SidebarSectionProps> = ({
   return (
     <Box
       borderTopWidth="1px"
-      borderTopColor="neutral.gray2"
+      borderTopColor="neutral.200"
       cursor="pointer"
       userSelect="none"
     >
@@ -65,13 +65,13 @@ const SidebarSection: React.FC<SidebarSectionProps> = ({
         py="md"
         px="md"
         margin="0"
-        backgroundColor="neutral.gray0"
+        backgroundColor="neutral.50"
         transition="background-color 0.25s ease"
         _hover={{
-          backgroundColor: "neutral.gray",
+          backgroundColor: "neutral.100",
         }}
         _active={{
-          backgroundColor: "neutral.gray2",
+          backgroundColor: "neutral.200",
         }}
         display="flex"
         position="sticky"
@@ -160,9 +160,9 @@ const SidebarSection: React.FC<SidebarSectionProps> = ({
       </Flex>
       <Box
         style={{ display: opened ? "" : "none" }}
-        backgroundColor="neutral.gray"
+        backgroundColor="neutral.100"
         borderTopWidth=".5px"
-        borderTopColor="neutral.gray2"
+        borderTopColor="neutral.200"
         padding="10px 20px 15px 10px"
         cursor="default"
       >

diff --git a/packages/frontend-v2/pages/home.tsx b/packages/frontend-v2/pages/home.tsx
@@ -226,7 +226,7 @@ const HomePage: NextPage = () => {
     >
       <PageLayout>
         <Box
-          bg="neutral.gray"
+          bg="neutral.100"
           overflowY="auto"
           width={{ desktop: "360px", tablet: "300px" }}
           flexShrink={0}
@@ -260,7 +260,7 @@ const HomePage: NextPage = () => {
                   mutateStudentWithUpdatedPlan={mutateStudentWithUpdatedPlan}
                   setIsRemove={setIsRemove}
                 />
-                <Divider borderColor="neutral.gray2" borderWidth={1} />
+                <Divider borderColor="neutral.200" borderWidth={1} />
               </>
             )}
             <TransferCourses

diff --git a/packages/frontend-v2/utils/theme/index.ts b/packages/frontend-v2/utils/theme/index.ts
@@ -48,11 +48,11 @@ const colors = {
     },
   },
   neutral: {
-    gray0: "#f4f6f9",
-    gray: "#e7ebf1",
-    gray2: "#d2d8e3",
-    gray3: "#b4bbc8",
-    gray4: "#7586a0",
+    50: "#f4f6f9",
+    100: "#e7ebf1",
+    200: "#d2d8e3",
+    300: "#b4bbc8",
+    400: "#7586a0",
   },
   states: {
     success: {