Skip to content

Commit

Permalink
FE Theme Colour Overhaul
Browse files Browse the repository at this point in the history
  • Loading branch information
@ansonjwhe
ansonjwhe committed Aug 29, 2024
1 parent bb109b6 commit 42102e4
Show file tree
Hide file tree
Showing 20 changed files with 127 additions and 43 deletions.
70 changes: 68 additions & 2 deletions frontend/src/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import {
RouterProvider,
createRoutesFromElements,
} from 'react-router-dom'
import { ChakraProvider } from '@chakra-ui/react'
import { ChakraProvider, extendTheme } from '@chakra-ui/react'

import { AuthLayout } from './contexts/AuthContext'
import { PrivateRoute, LoggedInRedirect } from './contexts/CustomRoutes'
Expand Down Expand Up @@ -39,11 +39,77 @@ const router = createBrowserRouter(
const App = () => {
return (
<RecoilRoot>
<ChakraProvider>
<ChakraProvider theme={WATonomousTheme}>
<RouterProvider router={router} />
</ChakraProvider>
</RecoilRoot>
)
}

const WATonomousTheme = extendTheme({
colors: {
wato: {
offBlack: '#222222',
grey: '#414141',
offWhite: '#c7cfd8',

primaryDark: '#08192d',
primary: '#0f4271',
secondary: '#1f5d96',

greenDark: '#0c4842',
greenLight: '#66ddc8',

redDark: '#92093a',
redLight: '#d8436d',
},
},
components: {
Button: {
variants: {
offWhite: {
bgColor: 'wato.offWhite',
_hover: {
bgColor: 'wato.offWhite',
},
},
grey: {
color: 'white',
bgColor: 'wato.grey',
_hover: {
bgColor: 'wato.grey',
},
},
secondary: {
color: 'white',
bgColor: 'wato.secondary',
_hover: {
bgColor: 'wato.secondary',
},
},
greenDark: {
color: 'white',
bgColor: 'wato.greenDark',
_hover: {
bgColor: 'wato.greenDark',
},
},
greenLight: {
bgColor: 'wato.greenLight',
_hover: {
bgColor: 'wato.greenLight',
},
},
redDark: {
color: 'white',
bgColor: 'wato.redDark',
_hover: {
bgColor: 'wato.redDark',
},
},
},
},
},
})

export default App
4 changes: 2 additions & 2 deletions frontend/src/components/CommentInput.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -133,7 +133,7 @@ const CommentInput = ({ code, getComments, reply, onClose, ticket }) => {
onClick={onClose}
padding="10px"
height="32px"
colorScheme="red"
variant="redDark"
>
Cancel
</Button>
Expand All @@ -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)
}}
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/components/ConfirmationModal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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()
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/components/CreateTicketModal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/DeleteTicketAlertDialog.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -128,7 +128,7 @@ const DeleteTicketAlertDialog = ({ isOpen, onClose }) => {
Cancel
</Button>
<Button
colorScheme="red"
variant="redDark"
onClick={handleDeleteCurrentTicket}
ml={3}
>
Expand Down
1 change: 1 addition & 0 deletions frontend/src/components/FilterDropdown.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ const FilterDropdown = ({ filter, setFilter }) => {
<Menu closeOnSelect={false}>
<MenuButton
as={Button}
variant="offWhite"
w="100%"
rightIcon={<ChevronDownIcon />}
>
Expand Down
7 changes: 4 additions & 3 deletions frontend/src/components/Navbar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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' }}
Expand All @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/TicketContent/PPRAdminContentTable.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ const PPRAdminContentTable = () => {
return (
<Center pb="7px">
<Button
colorScheme="blue"
variant="secondary"
size="sm"
onClick={() => handleUpdateStatus('REPORTER_PAID')}
>
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/TicketContent/PPRContentTable.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,7 @@ const PPRContentTable = () => {
heading={'Finance/Admin Approval'}
value={
<Checkbox
borderColor="lightslategrey"
borderColor="wato.grey"
disabled={
!auth.isAdmin ||
currentTicket.status !==
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/components/TicketContent/PPRReporterTable.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ const PPRReporterTable = ({ currentTicket, supportingDocuments }) => {
isDisabled={supportingDocuments.length !== 0}
>
<Button
colorScheme="blue"
variant="secondary"
size="sm"
mr="20px"
onClick={() => {
Expand All @@ -45,7 +45,7 @@ const PPRReporterTable = ({ currentTicket, supportingDocuments }) => {
const getReimbursementConfirmationBody = () => {
return (
<Button
colorScheme="blue"
variant="secondary"
size="sm"
mr="20px"
onClick={() => {
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/components/TicketContent/SFAdminContentTable.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,7 @@ const SFAdminContentTable = () => {
)}
{currentTicket.status !== 'REIMBURSED' && (
<Button
colorScheme="blue"
variant="secondary"
size="sm"
onClick={handleOpenConfirmation}
>
Expand All @@ -105,7 +105,7 @@ const SFAdminContentTable = () => {
`/claim/${currentTicket._id}`
)}
>
<Button colorScheme="green" size="sm">
<Button variant="greenDark" size="sm">
View Claim Page
</Button>
</Link>
Expand Down
6 changes: 5 additions & 1 deletion frontend/src/components/TicketContent/TicketContentTableRow.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
) : (
Expand Down
8 changes: 4 additions & 4 deletions frontend/src/components/TicketContent/UPRAdminContentTable.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand All @@ -122,7 +122,7 @@ const UPRAdminContentTable = () => {
)}
{currentTicket.status === 'ORDERED' && (
<Button
colorScheme="blue"
variant="secondary"
size="sm"
mr="20px"
onClick={transitionToReadyForPickup}
Expand All @@ -132,7 +132,7 @@ const UPRAdminContentTable = () => {
)}
{currentTicket.status === 'READY_FOR_PICKUP' && (
<Button
colorScheme="blue"
variant="secondary"
size="sm"
mr="20px"
onClick={transitionToPickedUp}
Expand All @@ -141,7 +141,7 @@ const UPRAdminContentTable = () => {
</Button>
)}
<Button
colorScheme="green"
variant="greenDark"
size="sm"
onClick={saveFields}
disabled={!changed}
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/components/TicketContent/UPRContentTable.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -112,7 +112,7 @@ const UPRContentTable = () => {
heading={'Finance/Admin Approval'}
value={
<Checkbox
borderColor="lightslategrey"
borderColor="wato.grey"
disabled={
!auth.isAdmin ||
currentTicket.status !==
Expand All @@ -130,7 +130,7 @@ const UPRContentTable = () => {
heading={'Faculty Advisor Approval'}
value={
<Checkbox
borderColor="lightslategrey"
borderColor="wato.grey"
disabled={
!auth.isAdmin ||
currentTicket.status !==
Expand Down
8 changes: 6 additions & 2 deletions frontend/src/components/TicketList.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,7 @@ const TicketList = ({ isLoading }) => {
return (
<Card
_hover={{
bg: 'blue.500',
bgColor: 'wato.secondary',
color: 'white',
cursor: 'pointer',
}}
Expand All @@ -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'
}
Expand Down
12 changes: 8 additions & 4 deletions frontend/src/components/TreeView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,8 @@ const TreeView = () => {
const getFundingItemTree = (fi) => (
<Box key={fi.code} m="0 !important">
<Box
bgColor="blue.200"
bgColor="wato.primary"
color="white"
m="4px 10% 0"
p="4px 8px"
borderRadius="8px"
Expand All @@ -34,7 +35,8 @@ const TreeView = () => {
return (
<Box
key={ppr.code}
bgColor="cyan.200"
bgColor="wato.secondary"
color="white"
m="4px 0 0 20%"
p="4px 8px"
borderRadius="8px"
Expand All @@ -56,7 +58,8 @@ const TreeView = () => {
return (
<Box
key={upr.code}
bgColor="teal.200"
bgColor="wato.greenDark"
color="white"
m="4px 0 0 20%"
p="4px 8px"
borderRadius="8px"
Expand Down Expand Up @@ -93,7 +96,8 @@ const TreeView = () => {
return (
<Stack>
<Box
bgColor="purple.200"
bgColor="wato.primaryDark"
color="white"
p="4px 8px"
mr="20%"
borderRadius="8px"
Expand Down
Loading

0 comments on commit 42102e4

Please sign in to comment.