FE Theme Colour Overhaul (#203)

Overhauls the theme colour to match WATO designs
WATonomous · Sep 17, 2024 · 40f330b · 40f330b
1 parent bb109b6
commit 40f330b
Show file tree

Hide file tree

Showing 21 changed files with 148 additions and 60 deletions.
diff --git a/frontend/src/App.js b/frontend/src/App.js
@@ -7,6 +7,7 @@ import {
     createRoutesFromElements,
 } from 'react-router-dom'
 import { ChakraProvider } from '@chakra-ui/react'
+import { WATonomousTheme } from './theme'
 
 import { AuthLayout } from './contexts/AuthContext'
 import { PrivateRoute, LoggedInRedirect } from './contexts/CustomRoutes'
@@ -39,7 +40,7 @@ const router = createBrowserRouter(
 const App = () => {
     return (
         <RecoilRoot>
-            <ChakraProvider>
+            <ChakraProvider theme={WATonomousTheme}>
                 <RouterProvider router={router} />
             </ChakraProvider>
         </RecoilRoot>

diff --git a/frontend/src/components/CommentInput.js b/frontend/src/components/CommentInput.js
@@ -133,7 +133,7 @@ const CommentInput = ({ code, getComments, reply, onClose, ticket }) => {
                             onClick={onClose}
                             padding="10px"
                             height="32px"
-                            colorScheme="red"
+                            variant="redDark"
                         >
                             Cancel
                         </Button>
@@ -143,7 +143,7 @@ const CommentInput = ({ code, getComments, reply, onClose, ticket }) => {
                         disabled={val.length === 0 || invalidInput(val)}
                         padding="10px"
                         height="32px"
-                        colorScheme="blue"
+                        variant="secondary"
                         onClick={() => {
                             handleSubmit(code, ticket)
                         }}

diff --git a/frontend/src/components/ConfirmationModal.js b/frontend/src/components/ConfirmationModal.js
@@ -19,11 +19,11 @@ const ConfirmationModal = ({ title, body, onConfirm, isOpen, onClose }) => {
                 <ModalBody>{body}</ModalBody>
 
                 <ModalFooter>
-                    <Button colorScheme="red" mr={3} onClick={onClose}>
+                    <Button variant="redDark" mr={3} onClick={onClose}>
                         Cancel
                     </Button>
                     <Button
-                        colorScheme="green"
+                        variant="greenDark"
                         onClick={() => {
                             onClose()
                             onConfirm()

diff --git a/frontend/src/components/CreateTicketModal.js b/frontend/src/components/CreateTicketModal.js
@@ -161,12 +161,12 @@ export function CreateTicketModal({ isOpen, onClose }) {
                     {displayTicketType()}
                 </ModalBody>
                 <ModalFooter>
-                    <Button colorScheme="red" mr={3} onClick={onClose}>
+                    <Button variant="redDark" mr={3} onClick={onClose}>
                         Close
                     </Button>
                     <Button
                         isLoading={isLoading}
-                        colorScheme="blue"
+                        variant="greenDark"
                         onClick={handleSubmit(createTicket)}
                     >
                         Create Ticket

diff --git a/frontend/src/components/DeleteTicketAlertDialog.js b/frontend/src/components/DeleteTicketAlertDialog.js
@@ -128,7 +128,7 @@ const DeleteTicketAlertDialog = ({ isOpen, onClose }) => {
                             Cancel
                         </Button>
                         <Button
-                            colorScheme="red"
+                            variant="redDark"
                             onClick={handleDeleteCurrentTicket}
                             ml={3}
                         >

diff --git a/frontend/src/components/FilterDropdown.js b/frontend/src/components/FilterDropdown.js
@@ -20,6 +20,7 @@ const FilterDropdown = ({ filter, setFilter }) => {
             <Menu closeOnSelect={false}>
                 <MenuButton
                     as={Button}
+                    variant="offWhite"
                     w="100%"
                     rightIcon={<ChevronDownIcon />}
                 >

diff --git a/frontend/src/components/Navbar.js b/frontend/src/components/Navbar.js
@@ -47,11 +47,11 @@ const Navbar = () => {
             left="0"
             alignItems="center"
             p="16px 24px"
-            bgColor="deepskyblue"
+            bgColor="wato.primary"
             w="100%"
             h="80px"
         >
-            <Link href="/">
+            <Link href="/" color="white">
                 <Heading
                     lineHeight="48px"
                     fontSize={{ base: 'lg', md: '2xl', lg: '3xl' }}
@@ -61,13 +61,14 @@ const Navbar = () => {
             </Link>
             <Spacer />
             {currentUser && (
-                <Button onClick={onOpen} colorScheme="green" mr="20px">
+                <Button onClick={onOpen} variant="greenLight" mr="20px">
                     Create New Ticket
                 </Button>
             )}
             <Button
                 onClick={currentUser ? handleLogout : handleLogin}
                 disabled={loading}
+                variant="offWhite"
             >
                 {error ? error : currentUser ? 'Log Out' : 'Log In'}
             </Button>

diff --git a/frontend/src/components/TicketContent/PPRAdminContentTable.js b/frontend/src/components/TicketContent/PPRAdminContentTable.js
@@ -61,7 +61,7 @@ const PPRAdminContentTable = () => {
         return (
             <Center pb="7px">
                 <Button
-                    colorScheme="blue"
+                    variant="secondary"
                     size="sm"
                     onClick={() => handleUpdateStatus('REPORTER_PAID')}
                 >

diff --git a/frontend/src/components/TicketContent/PPRContentTable.js b/frontend/src/components/TicketContent/PPRContentTable.js
@@ -104,7 +104,7 @@ const PPRContentTable = () => {
                         heading={'Finance/Admin Approval'}
                         value={
                             <Checkbox
-                                borderColor="lightslategrey"
+                                borderColor="wato.grey"
                                 disabled={
                                     !auth.isAdmin ||
                                     currentTicket.status !==
@@ -122,7 +122,7 @@ const PPRContentTable = () => {
                         heading={'Faculty Advisor Approval'}
                         value={
                             <Checkbox
-                                borderColor="lightslategrey"
+                                borderColor="wato.grey"
                                 disabled={
                                     !auth.isAdmin ||
                                     currentTicket.status !==

diff --git a/frontend/src/components/TicketContent/PPRReporterTable.js b/frontend/src/components/TicketContent/PPRReporterTable.js
@@ -28,7 +28,7 @@ const PPRReporterTable = ({ currentTicket, supportingDocuments }) => {
                 isDisabled={supportingDocuments.length !== 0}
             >
                 <Button
-                    colorScheme="blue"
+                    variant="secondary"
                     size="sm"
                     mr="20px"
                     onClick={() => {
@@ -45,7 +45,7 @@ const PPRReporterTable = ({ currentTicket, supportingDocuments }) => {
     const getReimbursementConfirmationBody = () => {
         return (
             <Button
-                colorScheme="blue"
+                variant="secondary"
                 size="sm"
                 mr="20px"
                 onClick={() => {

diff --git a/frontend/src/components/TicketContent/SFAdminContentTable.js b/frontend/src/components/TicketContent/SFAdminContentTable.js
@@ -92,7 +92,7 @@ const SFAdminContentTable = () => {
                     )}
                     {currentTicket.status !== 'REIMBURSED' && (
                         <Button
-                            colorScheme="blue"
+                            variant="secondary"
                             size="sm"
                             onClick={handleOpenConfirmation}
                         >
@@ -105,7 +105,7 @@ const SFAdminContentTable = () => {
                             `/claim/${currentTicket._id}`
                         )}
                     >
-                        <Button colorScheme="green" size="sm">
+                        <Button variant="greenDark" size="sm">
                             View Claim Page
                         </Button>
                     </Link>

diff --git a/frontend/src/components/TicketContent/TicketContentTableRow.js b/frontend/src/components/TicketContent/TicketContentTableRow.js
@@ -26,7 +26,11 @@ const TicketContentTableRow = ({ heading, value, onChange, type }) => {
                 {onChange ? (
                     <Input onChange={onChange} value={value} />
                 ) : type === 'URL' ? (
-                    <Link color="blue.500" href={addhttps(value)} isExternal>
+                    <Link
+                        color="wato.secondary"
+                        href={addhttps(value)}
+                        isExternal
+                    >
                         {value}
                     </Link>
                 ) : (

diff --git a/frontend/src/components/TicketContent/UPRAdminContentTable.js b/frontend/src/components/TicketContent/UPRAdminContentTable.js
@@ -111,7 +111,7 @@ const UPRAdminContentTable = () => {
             <Center pb="7px">
                 {currentTicket.status === 'SENT_TO_COORDINATOR' && (
                     <Button
-                        colorScheme="blue"
+                        variant="secondary"
                         size="sm"
                         mr="20px"
                         onClick={transitionToPurchased}
@@ -122,7 +122,7 @@ const UPRAdminContentTable = () => {
                 )}
                 {currentTicket.status === 'ORDERED' && (
                     <Button
-                        colorScheme="blue"
+                        variant="secondary"
                         size="sm"
                         mr="20px"
                         onClick={transitionToReadyForPickup}
@@ -132,7 +132,7 @@ const UPRAdminContentTable = () => {
                 )}
                 {currentTicket.status === 'READY_FOR_PICKUP' && (
                     <Button
-                        colorScheme="blue"
+                        variant="secondary"
                         size="sm"
                         mr="20px"
                         onClick={transitionToPickedUp}
@@ -141,7 +141,7 @@ const UPRAdminContentTable = () => {
                     </Button>
                 )}
                 <Button
-                    colorScheme="green"
+                    variant="greenDark"
                     size="sm"
                     onClick={saveFields}
                     disabled={!changed}

diff --git a/frontend/src/components/TicketContent/UPRContentTable.js b/frontend/src/components/TicketContent/UPRContentTable.js
@@ -112,7 +112,7 @@ const UPRContentTable = () => {
                         heading={'Finance/Admin Approval'}
                         value={
                             <Checkbox
-                                borderColor="lightslategrey"
+                                borderColor="wato.grey"
                                 disabled={
                                     !auth.isAdmin ||
                                     currentTicket.status !==
@@ -130,7 +130,7 @@ const UPRContentTable = () => {
                         heading={'Faculty Advisor Approval'}
                         value={
                             <Checkbox
-                                borderColor="lightslategrey"
+                                borderColor="wato.grey"
                                 disabled={
                                     !auth.isAdmin ||
                                     currentTicket.status !==

diff --git a/frontend/src/components/TicketList.js b/frontend/src/components/TicketList.js
@@ -99,7 +99,7 @@ const TicketList = ({ isLoading }) => {
                         return (
                             <Card
                                 _hover={{
-                                    bg: 'blue.500',
+                                    bgColor: 'wato.secondary',
                                     color: 'white',
                                     cursor: 'pointer',
                                 }}
@@ -113,7 +113,11 @@ const TicketList = ({ isLoading }) => {
                                     preserveParamsNavigate(ticket.path)
                                 }
                                 cursor="pointer"
-                                bg={ticket === currentTicket ? 'blue.600' : ''}
+                                bgColor={
+                                    ticket === currentTicket
+                                        ? 'wato.primary'
+                                        : ''
+                                }
                                 color={
                                     ticket === currentTicket ? 'white' : 'black'
                                 }

diff --git a/frontend/src/components/TreeView.js b/frontend/src/components/TreeView.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Text, Box, Stack } from '@chakra-ui/react'
+import { Text, Box, Stack, Button } from '@chakra-ui/react'
 import { useGetCurrentTicket, usePreserveParamsNavigate } from '../hooks/hooks'
 import { useRecoilValue } from 'recoil'
 import { currentTreeState } from '../state/atoms'
@@ -15,12 +15,12 @@ const TreeView = () => {
 
     const getFundingItemTree = (fi) => (
         <Box key={fi.code} m="0 !important">
-            <Box
-                bgColor="blue.200"
+            <Button
+                variant="primary"
+                height="auto"
                 m="4px 10% 0"
-                p="4px 8px"
+                p="8px"
                 borderRadius="8px"
-                cursor="pointer"
                 onClick={() => preserveParamsNavigate(fi.path)}
             >
                 <Text
@@ -29,16 +29,16 @@ const TreeView = () => {
                 >
                     {fi.codename}
                 </Text>
-            </Box>
+            </Button>
             {sortTickets(fi.personalPurchases).map((ppr) => {
                 return (
-                    <Box
+                    <Button
                         key={ppr.code}
-                        bgColor="cyan.200"
+                        variant="secondary"
+                        height="auto"
                         m="4px 0 0 20%"
-                        p="4px 8px"
+                        p="8px"
                         borderRadius="8px"
-                        cursor="pointer"
                         onClick={() => preserveParamsNavigate(ppr.path)}
                     >
                         <Text
@@ -49,18 +49,18 @@ const TreeView = () => {
                         >
                             {ppr.codename}
                         </Text>
-                    </Box>
+                    </Button>
                 )
             })}
             {sortTickets(fi.uwFinancePurchases).map((upr) => {
                 return (
-                    <Box
+                    <Button
                         key={upr.code}
-                        bgColor="teal.200"
+                        variant="greenDark"
+                        height="auto"
                         m="4px 0 0 20%"
-                        p="4px 8px"
+                        p="8px"
                         borderRadius="8px"
-                        cursor="pointer"
                         onClick={() => preserveParamsNavigate(upr.path)}
                     >
                         <Text
@@ -71,7 +71,7 @@ const TreeView = () => {
                         >
                             {upr.codename}
                         </Text>
-                    </Box>
+                    </Button>
                 )
             })}
         </Box>
@@ -92,12 +92,13 @@ const TreeView = () => {
 
     return (
         <Stack>
-            <Box
-                bgColor="purple.200"
-                p="4px 8px"
+            <Button
+                variant="primaryDark"
+                height="auto"
                 mr="20%"
+                p="8px"
+                w="fit-content"
                 borderRadius="8px"
-                cursor="pointer"
                 onClick={() => preserveParamsNavigate(currentTree.path)}
             >
                 <Text
@@ -108,7 +109,7 @@ const TreeView = () => {
                 >
                     {currentTree.codename}
                 </Text>
-            </Box>
+            </Button>
             {sortTickets(currentTree.fundingItems).map(getFundingItemTree)}
         </Stack>
     )