Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

FE Theme Colour Overhaul #203

Merged
merged 2 commits into from
Sep 17, 2024
Merged

FE Theme Colour Overhaul #203

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
42102e4
FE Theme Colour Overhaul
ansonjwhe Aug 28, 2024
8526915
consolidate button style in new theme file
ansonjwhe Sep 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion frontend/src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -39,7 +40,7 @@ const router = createBrowserRouter(
const App = () => {
return (
<RecoilRoot>
<ChakraProvider>
<ChakraProvider theme={WATonomousTheme}>
<RouterProvider router={router} />
</ChakraProvider>
</RecoilRoot>
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/components/CommentInput.js
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
4 changes: 2 additions & 2 deletions frontend/src/components/TicketContent/PPRContentTable.js
View file
Open in desktop
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 All @@ -122,7 +122,7 @@ const PPRContentTable = () => {
heading={'Faculty Advisor 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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
43 changes: 22 additions & 21 deletions frontend/src/components/TreeView.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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'
Expand All @@ -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
Expand All @@ -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
Expand All @@ -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
Expand All @@ -71,7 +71,7 @@ const TreeView = () => {
>
{upr.codename}
</Text>
</Box>
</Button>
)
})}
</Box>
Expand All @@ -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
Expand All @@ -108,7 +109,7 @@ const TreeView = () => {
>
{currentTree.codename}
</Text>
</Box>
</Button>
{sortTickets(currentTree.fundingItems).map(getFundingItemTree)}
</Stack>
)
Expand Down
Loading
Loading