diff --git a/public/Bell.jpg b/public/Bell.jpg deleted file mode 100644 index a5c21ac..0000000 Binary files a/public/Bell.jpg and /dev/null differ diff --git a/public/DigiEVLogo.png b/public/DigiEVLogo.png deleted file mode 100644 index 6b9434f..0000000 Binary files a/public/DigiEVLogo.png and /dev/null differ diff --git a/public/Digiev.png b/public/Digiev.png deleted file mode 100644 index 2f11f05..0000000 Binary files a/public/Digiev.png and /dev/null differ diff --git a/public/Digilogo.png b/public/Digilogo.png deleted file mode 100644 index 1a7d127..0000000 Binary files a/public/Digilogo.png and /dev/null differ diff --git a/public/Group 14.svg b/public/Group 14.svg deleted file mode 100644 index 503ae50..0000000 --- a/public/Group 14.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/public/Jobopro.png b/public/Jobopro.png deleted file mode 100644 index 579b79c..0000000 Binary files a/public/Jobopro.png and /dev/null differ diff --git a/public/Jobopro1.png b/public/Jobopro1.png deleted file mode 100644 index 98867d4..0000000 Binary files a/public/Jobopro1.png and /dev/null differ diff --git a/public/Login.svg b/public/Login.svg deleted file mode 100644 index 3a484c3..0000000 --- a/public/Login.svg +++ /dev/null @@ -1,27 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/public/apple_store.png b/public/apple_store.png deleted file mode 100644 index c37372c..0000000 Binary files a/public/apple_store.png and /dev/null differ diff --git a/public/arrow-top-right.png b/public/arrow-top-right.png deleted file mode 100644 index 2ba9780..0000000 Binary files a/public/arrow-top-right.png and /dev/null differ diff --git a/public/avatar.png b/public/avatar.png deleted file mode 100644 index 8c87604..0000000 Binary files a/public/avatar.png and /dev/null differ diff --git a/public/bgBottom.png b/public/bgBottom.png deleted file mode 100644 index 850f6cf..0000000 Binary files a/public/bgBottom.png and /dev/null differ diff --git a/public/bgEV.png b/public/bgEV.png deleted file mode 100644 index 850f6cf..0000000 Binary files a/public/bgEV.png and /dev/null differ diff --git a/public/dev-bg.png b/public/dev-bg.png deleted file mode 100644 index 794996d..0000000 Binary files a/public/dev-bg.png and /dev/null differ diff --git a/public/developer.png b/public/developer.png deleted file mode 100644 index e85838c..0000000 Binary files a/public/developer.png and /dev/null differ diff --git a/public/digimantra_labs_logo.jpeg b/public/digimantra_labs_logo.jpeg deleted file mode 100644 index eb470ea..0000000 Binary files a/public/digimantra_labs_logo.jpeg and /dev/null differ diff --git a/public/evLogo.png b/public/evLogo.png deleted file mode 100644 index 0c96ea1..0000000 Binary files a/public/evLogo.png and /dev/null differ diff --git a/public/favicon.ico b/public/favicon.ico deleted file mode 100644 index a11777c..0000000 Binary files a/public/favicon.ico and /dev/null differ diff --git a/public/google_play.png b/public/google_play.png deleted file mode 100644 index a31274d..0000000 Binary files a/public/google_play.png and /dev/null differ diff --git a/public/hero.png b/public/hero.png deleted file mode 100644 index 46cafee..0000000 Binary files a/public/hero.png and /dev/null differ diff --git a/public/home-img.png b/public/home-img.png deleted file mode 100644 index 486b292..0000000 Binary files a/public/home-img.png and /dev/null differ diff --git a/public/home.png b/public/home.png deleted file mode 100644 index db164a9..0000000 Binary files a/public/home.png and /dev/null differ diff --git a/public/iMockup - iPhone.png b/public/iMockup - iPhone.png deleted file mode 100644 index 6745822..0000000 Binary files a/public/iMockup - iPhone.png and /dev/null differ diff --git a/public/jobo.png b/public/jobo.png deleted file mode 100644 index 388bffa..0000000 Binary files a/public/jobo.png and /dev/null differ diff --git a/public/left-bottom-arrow.png b/public/left-bottom-arrow.png deleted file mode 100644 index be38e68..0000000 Binary files a/public/left-bottom-arrow.png and /dev/null differ diff --git a/public/logo.png b/public/logo.png deleted file mode 100644 index 9749af7..0000000 Binary files a/public/logo.png and /dev/null differ diff --git a/public/logo192.png b/public/logo192.png deleted file mode 100644 index fc44b0a..0000000 Binary files a/public/logo192.png and /dev/null differ diff --git a/public/logo512.png b/public/logo512.png deleted file mode 100644 index a4e47a6..0000000 Binary files a/public/logo512.png and /dev/null differ diff --git a/public/mainPageLogo.png b/public/mainPageLogo.png deleted file mode 100644 index 719a885..0000000 Binary files a/public/mainPageLogo.png and /dev/null differ diff --git a/public/model-s-exterior-front-view.webp b/public/model-s-exterior-front-view.webp deleted file mode 100644 index 3af1533..0000000 Binary files a/public/model-s-exterior-front-view.webp and /dev/null differ diff --git a/public/tablet-img.png b/public/tablet-img.png deleted file mode 100644 index 18e83d0..0000000 Binary files a/public/tablet-img.png and /dev/null differ diff --git a/public/vector-arrows.png b/public/vector-arrows.png deleted file mode 100644 index 516aeb3..0000000 Binary files a/public/vector-arrows.png and /dev/null differ diff --git a/src/App.css b/src/App.css index 0f0c182..db06a2b 100644 --- a/src/App.css +++ b/src/App.css @@ -48,3 +48,4 @@ body { transform: rotate(360deg); } } + diff --git a/src/assets/images/exercise.webp b/src/assets/images/exercise.webp deleted file mode 100644 index 9880539..0000000 Binary files a/src/assets/images/exercise.webp and /dev/null differ diff --git a/src/components/CustomTable/customTable.tsx b/src/components/CustomTable/customTable.tsx index afac62f..6fa3c12 100644 --- a/src/components/CustomTable/customTable.tsx +++ b/src/components/CustomTable/customTable.tsx @@ -21,8 +21,8 @@ import ArrowDownwardIcon from "@mui/icons-material/ArrowDownward"; // Styled Components const StyledTableCell = styled(TableCell)(({ theme }) => ({ [`&.${tableCellClasses.head}`]: { - backgroundColor: "#000000", - color: "#D0E1E9", + backgroundColor: theme.palette.common.black, // instead of "#000000" + color: theme.palette.primary.light, fontWeight: 600, fontSize: "16px", padding: "12px 16px", @@ -32,7 +32,7 @@ const StyledTableCell = styled(TableCell)(({ theme }) => ({ zIndex: 10, transition: "background-color 0.2s ease", "&:hover": { - backgroundColor: "#2A2A2A", + backgroundColor: theme.palette.grey[900], cursor: "pointer", }, }, @@ -40,10 +40,9 @@ const StyledTableCell = styled(TableCell)(({ theme }) => ({ fontSize: "16px", padding: "12px 16px", borderBottom: "none", - color: "#333333", + color: theme.palette.text.primary, transition: "background-color 0.2s ease", fontWeight: 500, - }, })); diff --git a/src/constants/messages.tsx b/src/constants/messages.tsx new file mode 100644 index 0000000..5482493 --- /dev/null +++ b/src/constants/messages.tsx @@ -0,0 +1,8 @@ + +export const MESSAGES = { + STUDENTS_LOADED: "Students loaded from file.", + STUDENT_REMOVED_LOCAL: "Student removed from local backlog.", + STUDENT_REMOVED_SERVER: "Student removed from backlog.", + FAILED_TO_REMOVE: "Failed to remove student.", + FAILED_TO_FETCH: "Failed to fetch students", +}; diff --git a/src/hooks/useAuth.js b/src/hooks/useAuth.js index cce0daf..098cf29 100644 --- a/src/hooks/useAuth.js +++ b/src/hooks/useAuth.js @@ -1,24 +1,20 @@ import React from 'react'; import { useDispatch, useSelector } from 'react-redux'; -import { checkUserAuth } from '../redux/slices/authSlice'; const useAuth = () => { const dispatch = useDispatch(); - const [isAuthorized, setIsAuthorized] = React.useState(false); const { isAuthenticated } = useSelector((state) => ({ - isAuthenticated: state.authReducer.isAuthenticated, + isAuthenticated: state.auth.isAuthenticated, })); - + const [loading, setLoading] = React.useState(true); React.useEffect(() => { - if (isAuthenticated) { - dispatch(checkUserAuth()); - } else { - setIsAuthorized(false); - } - }, [dispatch, isAuthenticated]); + + dispatch(checkUserAuth()).finally(() => setLoading(false)); + + }, [dispatch]); - return { isAuthenticated, isAuthorized }; + return { isAuthenticated, loading }; }; export default useAuth; diff --git a/src/pages/EmailPage/index.tsx b/src/pages/EmailPage/index.tsx index 56d1825..f314d62 100644 --- a/src/pages/EmailPage/index.tsx +++ b/src/pages/EmailPage/index.tsx @@ -29,15 +29,6 @@ export default function EmailPage() { toast.warning("Subject and Message are required."); return; } - - console.log( - "Sending email to:", - selectedStudents.map((s) => s.email) - ); - console.log("Subject:", subject); - console.log("Message:", message); - console.log("Attachment:", attachment?.name); - dispatch(markStudentAsSent(selectedIds)); toast.success("Emails sent successfully."); navigate("/"); diff --git a/src/pages/NotFoundPage/index.tsx b/src/pages/NotFoundPage/index.tsx index 6a2cc09..71096e4 100644 --- a/src/pages/NotFoundPage/index.tsx +++ b/src/pages/NotFoundPage/index.tsx @@ -1,20 +1,8 @@ import React from "react"; import { Box, Typography, Button, Card, Grid } from "@mui/material"; import ElectricCarIcon from "@mui/icons-material/ElectricCar"; -import { keyframes } from "@emotion/react"; +import { pulse } from "./style.css"; -// Animation for the car icon -const pulse = keyframes` - 0% { - transform: scale(1); - } - 50% { - transform: scale(1.1); - } - 100% { - transform: scale(1); - } -`; const NotFoundPage = () => { return ( diff --git a/src/pages/NotFoundPage/style.css.tsx b/src/pages/NotFoundPage/style.css.tsx new file mode 100644 index 0000000..ca019d3 --- /dev/null +++ b/src/pages/NotFoundPage/style.css.tsx @@ -0,0 +1,12 @@ +import { keyframes } from "@emotion/react"; +export const pulse = keyframes` + 0% { + transform: scale(1); + } + 50% { + transform: scale(1.1); + } + 100% { + transform: scale(1); + } +`; diff --git a/src/redux/slices/backlogSlice.ts b/src/redux/slices/backlogSlice.ts index 1852521..5a96b3a 100644 --- a/src/redux/slices/backlogSlice.ts +++ b/src/redux/slices/backlogSlice.ts @@ -1,7 +1,7 @@ import { createSlice, createAsyncThunk, PayloadAction } from "@reduxjs/toolkit"; import http from "../../lib/https"; import { toast } from "sonner"; - +import { MESSAGES } from "../../constants/messages"; export interface Student { id: string; name: string; @@ -46,10 +46,10 @@ export const removeStudentFromServer = createAsyncThunk< >("backlog/removeStudentFromServer", async (studentId, { rejectWithValue }) => { try { await http.delete(`/students/${studentId}`); - toast.success("Student removed from backlog."); + toast.success(MESSAGES.STUDENT_REMOVED_SERVER); return studentId; } catch (error: any) { - toast.error("Failed to remove student."); + toast.error(MESSAGES.FAILED_TO_REMOVE); return rejectWithValue( error.response?.data?.message || "Remove operation failed" ); @@ -68,7 +68,7 @@ const backlogSlice = createSlice({ ...student, status: "Pending", })); - toast.success("Students loaded from file."); + toast.success(MESSAGES.STUDENTS_LOADED); }, @@ -76,7 +76,7 @@ const backlogSlice = createSlice({ state.students = state.students.filter( (student) => student.id !== action.payload ); - toast.success("Student removed from local backlog."); + toast.success(MESSAGES.STUDENT_REMOVED_LOCAL); }, diff --git a/src/shared-theme/ColorModeIconDropdown.js b/src/shared-theme/ColorModeIconDropdown.js deleted file mode 100644 index ea2ce97..0000000 --- a/src/shared-theme/ColorModeIconDropdown.js +++ /dev/null @@ -1,89 +0,0 @@ -import * as React from 'react'; -import DarkModeIcon from '@mui/icons-material/DarkModeRounded'; -import LightModeIcon from '@mui/icons-material/LightModeRounded'; -import Box from '@mui/material/Box'; -import IconButton from '@mui/material/IconButton'; -import Menu from '@mui/material/Menu'; -import MenuItem from '@mui/material/MenuItem'; -import { useColorScheme } from '@mui/material/styles'; - -export default function ColorModeIconDropdown(props) { - const { mode, systemMode, setMode } = useColorScheme(); - const [anchorEl, setAnchorEl] = React.useState(null); - const open = Boolean(anchorEl); - const handleClick = (event) => { - setAnchorEl(event.currentTarget); - }; - const handleClose = () => { - setAnchorEl(null); - }; - const handleMode = (targetMode) => () => { - setMode(targetMode); - handleClose(); - }; - if (!mode) { - return ( - ({ - verticalAlign: 'bottom', - display: 'inline-flex', - width: '2.25rem', - height: '2.25rem', - borderRadius: (theme.vars || theme).shape.borderRadius, - border: '1px solid', - borderColor: (theme.vars || theme).palette.divider, - })} - /> - ); - } - const resolvedMode = systemMode || mode; - const icon = { - light: , - dark: , - }[resolvedMode]; - return ( - - - {icon} - - - - System - - - Light - - - Dark - - - - ); -} diff --git a/src/shared-theme/ColorModeIconDropdown.tsx b/src/shared-theme/ColorModeIconDropdown.tsx deleted file mode 100644 index 3af1e07..0000000 --- a/src/shared-theme/ColorModeIconDropdown.tsx +++ /dev/null @@ -1,89 +0,0 @@ -import * as React from 'react'; -import DarkModeIcon from '@mui/icons-material/DarkModeRounded'; -import LightModeIcon from '@mui/icons-material/LightModeRounded'; -import Box from '@mui/material/Box'; -import IconButton, { IconButtonOwnProps } from '@mui/material/IconButton'; -import Menu from '@mui/material/Menu'; -import MenuItem from '@mui/material/MenuItem'; -import { useColorScheme } from '@mui/material/styles'; - -export default function ColorModeIconDropdown(props: IconButtonOwnProps) { - const { mode, systemMode, setMode } = useColorScheme(); - const [anchorEl, setAnchorEl] = React.useState(null); - const open = Boolean(anchorEl); - const handleClick = (event: React.MouseEvent) => { - setAnchorEl(event.currentTarget); - }; - const handleClose = () => { - setAnchorEl(null); - }; - const handleMode = (targetMode: 'system' | 'light' | 'dark') => () => { - setMode(targetMode); - handleClose(); - }; - if (!mode) { - return ( - ({ - verticalAlign: 'bottom', - display: 'inline-flex', - width: '2.25rem', - height: '2.25rem', - borderRadius: (theme.vars || theme).shape.borderRadius, - border: '1px solid', - borderColor: (theme.vars || theme).palette.divider, - })} - /> - ); - } - const resolvedMode = (systemMode || mode) as 'light' | 'dark'; - const icon = { - light: , - dark: , - }[resolvedMode]; - return ( - - - {icon} - - - - System - - - Light - - - Dark - - - - ); -} diff --git a/src/shared-theme/ColorModeSelect.js b/src/shared-theme/ColorModeSelect.js deleted file mode 100644 index 2e07e3d..0000000 --- a/src/shared-theme/ColorModeSelect.js +++ /dev/null @@ -1,25 +0,0 @@ -import * as React from 'react'; -import { useColorScheme } from '@mui/material/styles'; -import MenuItem from '@mui/material/MenuItem'; -import Select from '@mui/material/Select'; - -export default function ColorModeSelect(props) { - const { mode, setMode } = useColorScheme(); - if (!mode) { - return null; - } - return ( - - ); -} diff --git a/src/shared-theme/ColorModeSelect.tsx b/src/shared-theme/ColorModeSelect.tsx deleted file mode 100644 index 6e71b9b..0000000 --- a/src/shared-theme/ColorModeSelect.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import * as React from 'react'; -import { useColorScheme } from '@mui/material/styles'; -import MenuItem from '@mui/material/MenuItem'; -import Select, { SelectProps } from '@mui/material/Select'; - -export default function ColorModeSelect(props: SelectProps) { - const { mode, setMode } = useColorScheme(); - if (!mode) { - return null; - } - return ( - - ); -} diff --git a/src/shared-theme/customizations/autoFill.tsx b/src/shared-theme/customizations/autoFill.tsx deleted file mode 100644 index a2dbe00..0000000 --- a/src/shared-theme/customizations/autoFill.tsx +++ /dev/null @@ -1,26 +0,0 @@ -export const autofillFix = { - "& input:-webkit-autofill": { - WebkitBoxShadow: "0 0 0 1000px transparent inset !important", - WebkitTextFillColor: "#000000 !important", - transition: "background-color 5000s ease-in-out 0s", - }, - "& input:-webkit-autofill:hover": { - WebkitBoxShadow: "0 0 0 1000px transparent inset !important", - }, - "& input:-webkit-autofill:focus": { - WebkitBoxShadow: "0 0 0 1000px transparent inset !important", - }, - "& input:-webkit-autofill:active": { - WebkitBoxShadow: "0 0 0 1000px transparent inset !important", - }, - "& input:-moz-autofill": { - boxShadow: "0 0 0 1000px transparent inset !important", - MozTextFillColor: "#000000 !important", - transition: "background-color 5000s ease-in-out 0s", - }, - "& input:autofill": { - boxShadow: "0 0 0 1000px transparent inset !important", - textFillColor: "#000000 !important", - transition: "background-color 5000s ease-in-out 0s", - }, -}; diff --git a/src/shared-theme/customizations/dataDisplay.js b/src/shared-theme/customizations/dataDisplay.js deleted file mode 100644 index 6eb1af3..0000000 --- a/src/shared-theme/customizations/dataDisplay.js +++ /dev/null @@ -1,237 +0,0 @@ -import { alpha } from '@mui/material/styles'; -import { svgIconClasses } from '@mui/material/SvgIcon'; -import { typographyClasses } from '@mui/material/Typography'; -import { buttonBaseClasses } from '@mui/material/ButtonBase'; -import { chipClasses } from '@mui/material/Chip'; -import { iconButtonClasses } from '@mui/material/IconButton'; -import { gray, red, green } from '../themePrimitives'; - -/* eslint-disable import/prefer-default-export */ -export const dataDisplayCustomizations = { - MuiList: { - styleOverrides: { - root: { - // padding: '8px', - display: "flex", - flexDirection: "column", - - gap: 0, - }, - }, - }, - MuiListItem: { - styleOverrides: { - root: ({ theme }) => ({ - [`& .${svgIconClasses.root}`]: { - width: "3rem", - height: "2rem", - color: (theme.vars || theme).palette.text.secondary, - }, - [`& .${typographyClasses.root}`]: { - fontWeight: 500, - fontSize: "16px", - }, - [`& .${buttonBaseClasses.root}`]: { - display: "flex", - // gap: 8, - // padding: '2px 8px', - borderRadius: (theme.vars || theme).shape.borderRadius, - opacity: 0.7, - "&.Mui-selected": { - opacity: 2, - // backgroundColor: "rgb(66, 64, 64)", - - [`& .${svgIconClasses.root}`]: { - //color: (theme.vars || theme).palette.text.primary, - color: " #FFFFFF", - }, - "&:focus-visible": { - // backgroundColor: alpha(theme.palette.action.selected, 0.3), - }, - "&:hover": { - //backgroundColor: alpha(theme.palette.action.selected, 0.5), - }, - }, - // "&:focus-visible": { - // backgroundColor: "transparent", - // }, - }, - }), - }, - }, - MuiListItemText: { - styleOverrides: { - primary: ({ theme }) => ({ - fontSize: "16px", - fontWeight: 500, - lineHeight: theme.typography.body2.lineHeight, - }), - secondary: ({ theme }) => ({ - fontSize: theme.typography.caption.fontSize, - lineHeight: theme.typography.caption.lineHeight, - }), - }, - }, - MuiListSubheader: { - styleOverrides: { - root: ({ theme }) => ({ - backgroundColor: "transparent", - // padding: '4px 8px', - fontSize: theme.typography.caption.fontSize, - fontWeight: 500, - lineHeight: theme.typography.caption.lineHeight, - }), - }, - }, - MuiListItemIcon: { - styleOverrides: { - root: { - minWidth: 0, - }, - }, - }, - MuiChip: { - defaultProps: { - size: "small", - }, - styleOverrides: { - root: ({ theme }) => ({ - border: "1px solid", - borderRadius: "999px", - [`& .${chipClasses.label}`]: { - fontWeight: 600, - }, - variants: [ - { - props: { - color: "default", - }, - style: { - borderColor: gray[200], - backgroundColor: gray[100], - [`& .${chipClasses.label}`]: { - color: gray[500], - }, - [`& .${chipClasses.icon}`]: { - color: gray[500], - }, - ...theme.applyStyles("dark", { - borderColor: gray[700], - backgroundColor: gray[800], - [`& .${chipClasses.label}`]: { - color: gray[300], - }, - [`& .${chipClasses.icon}`]: { - color: gray[300], - }, - }), - }, - }, - { - props: { - color: "success", - }, - style: { - borderColor: green[200], - backgroundColor: green[50], - [`& .${chipClasses.label}`]: { - color: green[500], - }, - [`& .${chipClasses.icon}`]: { - color: green[500], - }, - ...theme.applyStyles("dark", { - borderColor: green[800], - backgroundColor: green[900], - [`& .${chipClasses.label}`]: { - color: green[300], - }, - [`& .${chipClasses.icon}`]: { - color: green[300], - }, - }), - }, - }, - { - props: { - color: "error", - }, - style: { - borderColor: red[100], - backgroundColor: red[50], - [`& .${chipClasses.label}`]: { - color: red[500], - }, - [`& .${chipClasses.icon}`]: { - color: red[500], - }, - ...theme.applyStyles("dark", { - borderColor: red[800], - backgroundColor: red[900], - [`& .${chipClasses.label}`]: { - color: red[200], - }, - [`& .${chipClasses.icon}`]: { - color: red[300], - }, - }), - }, - }, - { - props: { size: "small" }, - style: { - maxHeight: 20, - [`& .${chipClasses.label}`]: { - fontSize: theme.typography.caption.fontSize, - }, - [`& .${svgIconClasses.root}`]: { - fontSize: theme.typography.caption.fontSize, - }, - }, - }, - { - props: { size: "medium" }, - style: { - [`& .${chipClasses.label}`]: { - fontSize: theme.typography.caption.fontSize, - }, - }, - }, - ], - }), - }, - }, - MuiTablePagination: { - styleOverrides: { - actions: { - display: "flex", - gap: 8, - marginRight: 6, - [`& .${iconButtonClasses.root}`]: { - minWidth: 0, - width: 36, - height: 36, - }, - }, - }, - }, - MuiIcon: { - defaultProps: { - fontSize: "small", - }, - styleOverrides: { - root: { - variants: [ - { - props: { - fontSize: "small", - }, - style: { - fontSize: "1rem", - }, - }, - ], - }, - }, - }, -}; diff --git a/src/shared-theme/customizations/dataDisplay.tsx b/src/shared-theme/customizations/dataDisplay.tsx deleted file mode 100644 index 8d5bd1f..0000000 --- a/src/shared-theme/customizations/dataDisplay.tsx +++ /dev/null @@ -1,237 +0,0 @@ -import { Theme, alpha, Components } from '@mui/material/styles'; -import { svgIconClasses } from '@mui/material/SvgIcon'; -import { typographyClasses } from '@mui/material/Typography'; -import { buttonBaseClasses } from '@mui/material/ButtonBase'; -import { chipClasses } from '@mui/material/Chip'; -import { iconButtonClasses } from '@mui/material/IconButton'; -import { gray, red, green } from '../themePrimitives'; - -/* eslint-disable import/prefer-default-export */ -export const dataDisplayCustomizations: Components = { - MuiList: { - styleOverrides: { - root: { - - display: 'flex', - flexDirection: 'column', - gap: 0, - }, - }, - }, - MuiListItem: { - styleOverrides: { - root: ({ theme }) => ({ - - [`& .${svgIconClasses.root}`]: { - width: '1rem', - height: '1rem', - color: (theme.vars || theme).palette.text.secondary, - }, - [`& .${typographyClasses.root}`]: { - fontWeight: 500, - - }, - [`& .${buttonBaseClasses.root}`]: { - display: 'flex', - gap: 8, - - borderRadius: (theme.vars || theme).shape.borderRadius, - opacity: 0.7, - '&.Mui-selected': { - opacity: 1, - backgroundColor: alpha(theme.palette.action.selected, 0.3), - - [`& .${svgIconClasses.root}`]: { - color: (theme.vars || theme).palette.text.primary, - }, - '&:focus-visible': { - backgroundColor: alpha(theme.palette.action.selected, 0.3), - }, - '&:hover': { - backgroundColor: alpha(theme.palette.action.selected, 0.5), - }, - }, - - '&:focus-visible': { - backgroundColor: 'transparent', - }, - }, - }), - }, - }, - MuiListItemText: { - styleOverrides: { - primary: ({ theme }) => ({ - fontSize: theme.typography.body2.fontSize, - fontWeight: 500, - lineHeight: theme.typography.body2.lineHeight, - }), - secondary: ({ theme }) => ({ - fontSize: theme.typography.caption.fontSize, - lineHeight: theme.typography.caption.lineHeight, - }), - }, - }, - MuiListSubheader: { - styleOverrides: { - root: ({ theme }) => ({ - backgroundColor: 'transparent', - // padding: '4px 8px', - fontSize: theme.typography.caption.fontSize, - fontWeight: 500, - lineHeight: theme.typography.caption.lineHeight, - }), - }, - }, - MuiListItemIcon: { - styleOverrides: { - root: { - minWidth: 0, - }, - }, - }, - MuiChip: { - defaultProps: { - size: 'small', - }, - styleOverrides: { - root: ({ theme }) => ({ - border: '1px solid', - borderRadius: '999px', - [`& .${chipClasses.label}`]: { - fontWeight: 600, - }, - variants: [ - { - props: { - color: 'default', - }, - style: { - borderColor: gray[200], - backgroundColor: gray[100], - [`& .${chipClasses.label}`]: { - color: gray[500], - }, - [`& .${chipClasses.icon}`]: { - color: gray[500], - }, - ...theme.applyStyles('dark', { - borderColor: gray[700], - backgroundColor: gray[800], - [`& .${chipClasses.label}`]: { - color: gray[300], - }, - [`& .${chipClasses.icon}`]: { - color: gray[300], - }, - }), - }, - }, - { - props: { - color: 'success', - }, - style: { - borderColor: green[200], - backgroundColor: green[50], - [`& .${chipClasses.label}`]: { - color: green[500], - }, - [`& .${chipClasses.icon}`]: { - color: green[500], - }, - ...theme.applyStyles('dark', { - borderColor: green[800], - backgroundColor: green[900], - [`& .${chipClasses.label}`]: { - color: green[300], - }, - [`& .${chipClasses.icon}`]: { - color: green[300], - }, - }), - }, - }, - { - props: { - color: 'error', - }, - style: { - borderColor: red[100], - backgroundColor: red[50], - [`& .${chipClasses.label}`]: { - color: red[500], - }, - [`& .${chipClasses.icon}`]: { - color: red[500], - }, - ...theme.applyStyles('dark', { - borderColor: red[800], - backgroundColor: red[900], - [`& .${chipClasses.label}`]: { - color: red[200], - }, - [`& .${chipClasses.icon}`]: { - color: red[300], - }, - }), - }, - }, - { - props: { size: 'small' }, - style: { - maxHeight: 20, - [`& .${chipClasses.label}`]: { - fontSize: theme.typography.caption.fontSize, - }, - [`& .${svgIconClasses.root}`]: { - fontSize: theme.typography.caption.fontSize, - }, - }, - }, - { - props: { size: 'medium' }, - style: { - [`& .${chipClasses.label}`]: { - fontSize: theme.typography.caption.fontSize, - }, - }, - }, - ], - }), - }, - }, - MuiTablePagination: { - styleOverrides: { - actions: { - display: 'flex', - gap: 8, - marginRight: 6, - [`& .${iconButtonClasses.root}`]: { - minWidth: 0, - width: 36, - height: 36, - }, - }, - }, - }, - MuiIcon: { - defaultProps: { - fontSize: 'small', - }, - styleOverrides: { - root: { - variants: [ - { - props: { - fontSize: 'small', - }, - style: { - fontSize: '1rem', - }, - }, - ], - }, - }, - }, -}; diff --git a/src/shared-theme/customizations/feedback.js b/src/shared-theme/customizations/feedback.js deleted file mode 100644 index d531c30..0000000 --- a/src/shared-theme/customizations/feedback.js +++ /dev/null @@ -1,46 +0,0 @@ -import { alpha } from '@mui/material/styles'; -import { gray, orange } from '../themePrimitives'; - -/* eslint-disable import/prefer-default-export */ -export const feedbackCustomizations = { - MuiAlert: { - styleOverrides: { - root: ({ theme }) => ({ - borderRadius: 10, - backgroundColor: orange[100], - color: (theme.vars || theme).palette.text.primary, - border: `1px solid ${alpha(orange[300], 0.5)}`, - '& .MuiAlert-icon': { - color: orange[500], - }, - ...theme.applyStyles('dark', { - backgroundColor: `${alpha(orange[900], 0.5)}`, - border: `1px solid ${alpha(orange[800], 0.5)}`, - }), - }), - }, - }, - MuiDialog: { - styleOverrides: { - root: ({ theme }) => ({ - '& .MuiDialog-paper': { - borderRadius: '10px', - border: '1px solid', - borderColor: (theme.vars || theme).palette.divider, - }, - }), - }, - }, - MuiLinearProgress: { - styleOverrides: { - root: ({ theme }) => ({ - height: 8, - borderRadius: 8, - backgroundColor: gray[200], - ...theme.applyStyles('dark', { - backgroundColor: gray[800], - }), - }), - }, - }, -}; diff --git a/src/shared-theme/customizations/feedback.tsx b/src/shared-theme/customizations/feedback.tsx deleted file mode 100644 index 6d475c9..0000000 --- a/src/shared-theme/customizations/feedback.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import { Theme, alpha, Components } from '@mui/material/styles'; -import { gray, orange } from '../themePrimitives'; - -/* eslint-disable import/prefer-default-export */ -export const feedbackCustomizations: Components = { - MuiAlert: { - styleOverrides: { - root: ({ theme }) => ({ - borderRadius: 10, - backgroundColor: orange[100], - color: (theme.vars || theme).palette.text.primary, - border: `1px solid ${alpha(orange[300], 0.5)}`, - '& .MuiAlert-icon': { - color: orange[500], - }, - ...theme.applyStyles('dark', { - backgroundColor: `${alpha(orange[900], 0.5)}`, - border: `1px solid ${alpha(orange[800], 0.5)}`, - }), - }), - }, - }, - MuiDialog: { - styleOverrides: { - root: ({ theme }) => ({ - '& .MuiDialog-paper': { - borderRadius: '10px', - border: '1px solid', - borderColor: (theme.vars || theme).palette.divider, - }, - }), - }, - }, - MuiLinearProgress: { - styleOverrides: { - root: ({ theme }) => ({ - height: 8, - borderRadius: 8, - backgroundColor: gray[200], - ...theme.applyStyles('dark', { - backgroundColor: gray[800], - }), - }), - }, - }, -}; diff --git a/src/shared-theme/customizations/inputs.js b/src/shared-theme/customizations/inputs.js deleted file mode 100644 index af5fccc..0000000 --- a/src/shared-theme/customizations/inputs.js +++ /dev/null @@ -1,460 +0,0 @@ -import * as React from 'react'; -import { alpha } from '@mui/material/styles'; -import { outlinedInputClasses } from '@mui/material/OutlinedInput'; -import { svgIconClasses } from '@mui/material/SvgIcon'; -import { toggleButtonGroupClasses } from '@mui/material/ToggleButtonGroup'; -import { toggleButtonClasses } from '@mui/material/ToggleButton'; -import CheckBoxOutlineBlankRoundedIcon from '@mui/icons-material/CheckBoxOutlineBlankRounded'; -import CheckRoundedIcon from '@mui/icons-material/CheckRounded'; -import RemoveRoundedIcon from '@mui/icons-material/RemoveRounded'; -import { gray, brand } from '../themePrimitives'; -import {autofillFix} from './autoFill'; - -/* eslint-disable import/prefer-default-export */ -export const inputsCustomizations = { - MuiButtonBase: { - defaultProps: { - disableTouchRipple: true, - disableRipple: true, - }, - styleOverrides: { - root: ({ theme }) => ({ - boxSizing: "border-box", - transition: "all 100ms ease-in", - "&:focus-visible": { - outline: `3px solid ${alpha( - theme.palette.primary.main, - 0.5 - )}`, - outlineOffset: "2px", - }, - }), - }, - }, - MuiButton: { - styleOverrides: { - root: ({ theme }) => ({ - boxShadow: "none", - borderRadius: (theme.vars || theme).shape.borderRadius, - textTransform: "none", - variants: [ - { - props: { - size: "small", - }, - style: { - height: "2.25rem", - padding: "8px 12px", - }, - }, - { - props: { - size: "medium", - }, - style: { - height: "2.5rem", // 40px - }, - }, - { - props: { - color: "primary", - variant: "contained", - }, - style: { - color: "white", - backgroundColor: gray[900], - backgroundImage: `linear-gradient(to bottom, ${gray[700]}, ${gray[800]})`, - boxShadow: `inset 0 1px 0 ${gray[600]}, inset 0 -1px 0 1px hsl(220, 0%, 0%)`, - border: `1px solid ${gray[700]}`, - "&:hover": { - backgroundImage: "none", - backgroundColor: gray[700], - boxShadow: "none", - }, - "&:active": { - backgroundColor: gray[800], - }, - ...theme.applyStyles("dark", { - color: "black", - backgroundColor: gray[50], - backgroundImage: `linear-gradient(to bottom, ${gray[100]}, ${gray[50]})`, - boxShadow: "inset 0 -1px 0 hsl(220, 30%, 80%)", - border: `1px solid ${gray[50]}`, - "&:hover": { - backgroundImage: "none", - backgroundColor: gray[300], - boxShadow: "none", - }, - "&:active": { - backgroundColor: gray[400], - }, - }), - }, - }, - { - props: { - color: "secondary", - variant: "contained", - }, - style: { - color: "white", - backgroundColor: brand[300], - backgroundImage: `linear-gradient(to bottom, ${alpha( - brand[400], - 0.8 - )}, ${brand[500]})`, - boxShadow: `inset 0 2px 0 ${alpha( - brand[200], - 0.2 - )}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`, - border: `1px solid ${brand[500]}`, - "&:hover": { - backgroundColor: brand[700], - boxShadow: "none", - }, - "&:active": { - backgroundColor: brand[700], - backgroundImage: "none", - }, - }, - }, - { - props: { - variant: "outlined", - }, - style: { - color: (theme.vars || theme).palette.text.primary, - border: "1px solid", - borderColor: gray[200], - backgroundColor: alpha(gray[50], 0.3), - "&:hover": { - backgroundColor: gray[100], - borderColor: gray[300], - }, - "&:active": { - backgroundColor: gray[200], - }, - ...theme.applyStyles("dark", { - backgroundColor: gray[800], - borderColor: gray[700], - "&:hover": { - backgroundColor: gray[900], - borderColor: gray[600], - }, - "&:active": { - backgroundColor: gray[900], - }, - }), - }, - }, - { - props: { - color: "secondary", - variant: "outlined", - }, - style: { - color: brand[700], - border: "1px solid", - borderColor: brand[200], - backgroundColor: brand[50], - "&:hover": { - backgroundColor: brand[100], - borderColor: brand[400], - }, - "&:active": { - backgroundColor: alpha(brand[200], 0.7), - }, - ...theme.applyStyles("dark", { - color: brand[50], - border: "1px solid", - borderColor: brand[900], - backgroundColor: alpha(brand[900], 0.3), - "&:hover": { - borderColor: brand[700], - backgroundColor: alpha(brand[900], 0.6), - }, - "&:active": { - backgroundColor: alpha(brand[900], 0.5), - }, - }), - }, - }, - { - props: { - variant: "text", - }, - style: { - color: gray[600], - "&:hover": { - backgroundColor: gray[100], - }, - "&:active": { - backgroundColor: gray[200], - }, - ...theme.applyStyles("dark", { - color: gray[50], - "&:hover": { - backgroundColor: gray[700], - }, - "&:active": { - backgroundColor: alpha(gray[700], 0.7), - }, - }), - }, - }, - { - props: { - color: "secondary", - variant: "text", - }, - style: { - color: brand[700], - "&:hover": { - backgroundColor: alpha(brand[100], 0.5), - }, - "&:active": { - backgroundColor: alpha(brand[200], 0.7), - }, - ...theme.applyStyles("dark", { - color: brand[100], - "&:hover": { - backgroundColor: alpha(brand[900], 0.5), - }, - "&:active": { - backgroundColor: alpha(brand[900], 0.3), - }, - }), - }, - }, - ], - }), - }, - }, - MuiIconButton: { - styleOverrides: { - root: ({ theme }) => ({ - boxShadow: "none", - borderRadius: (theme.vars || theme).shape.borderRadius, - textTransform: "none", - fontWeight: theme.typography.fontWeightMedium, - letterSpacing: 0, - color: (theme.vars || theme).palette.text.primary, - border: "1px solid ", - borderColor: gray[200], - backgroundColor: alpha(gray[50], 0.3), - "&:hover": { - backgroundColor: gray[100], - borderColor: gray[300], - }, - "&:active": { - backgroundColor: gray[200], - }, - ...theme.applyStyles("dark", { - backgroundColor: gray[800], - borderColor: gray[700], - "&:hover": { - backgroundColor: gray[900], - borderColor: gray[600], - }, - "&:active": { - backgroundColor: gray[900], - }, - }), - variants: [ - { - props: { - size: "small", - }, - style: { - width: "2.25rem", - height: "2.25rem", - padding: "0.25rem", - [`& .${svgIconClasses.root}`]: { fontSize: "1rem" }, - }, - }, - { - props: { - size: "medium", - }, - style: { - width: "2.5rem", - height: "2.5rem", - }, - }, - ], - }), - }, - }, - MuiToggleButtonGroup: { - styleOverrides: { - root: ({ theme }) => ({ - borderRadius: "10px", - boxShadow: `0 4px 16px ${alpha(gray[400], 0.2)}`, - [`& .${toggleButtonGroupClasses.selected}`]: { - color: brand[500], - }, - ...theme.applyStyles("dark", { - [`& .${toggleButtonGroupClasses.selected}`]: { - color: "#fff", - }, - boxShadow: `0 4px 16px ${alpha(brand[700], 0.5)}`, - }), - }), - }, - }, - MuiToggleButton: { - styleOverrides: { - root: ({ theme }) => ({ - padding: "12px 16px", - textTransform: "none", - borderRadius: "10px", - fontWeight: 500, - ...theme.applyStyles("dark", { - color: gray[400], - boxShadow: "0 4px 16px rgba(0, 0, 0, 0.5)", - [`&.${toggleButtonClasses.selected}`]: { - color: brand[300], - }, - }), - }), - }, - }, - MuiCheckbox: { - defaultProps: { - disableRipple: true, - icon: ( - - ), - checkedIcon: , - indeterminateIcon: ( - - ), - }, - styleOverrides: { - root: ({ theme }) => ({ - margin: 10, - height: 16, - width: 16, - borderRadius: 5, - border: "1px solid ", - borderColor: alpha(gray[300], 0.8), - boxShadow: "0 0 0 1.5px hsla(210, 0%, 0%, 0.04) inset", - backgroundColor: alpha(gray[100], 0.4), - transition: "border-color, background-color, 120ms ease-in", - "&:hover": { - borderColor: brand[300], - }, - "&.Mui-focusVisible": { - outline: `3px solid ${alpha(brand[500], 0.5)}`, - outlineOffset: "2px", - borderColor: brand[400], - }, - "&.Mui-checked": { - color: "white", - backgroundColor: brand[500], - borderColor: brand[500], - boxShadow: `none`, - "&:hover": { - backgroundColor: brand[600], - }, - }, - ...theme.applyStyles("dark", { - borderColor: alpha(gray[700], 0.8), - boxShadow: "0 0 0 1.5px hsl(210, 0%, 0%) inset", - backgroundColor: alpha(gray[900], 0.8), - "&:hover": { - borderColor: brand[300], - }, - "&.Mui-focusVisible": { - borderColor: brand[400], - outline: `3px solid ${alpha(brand[500], 0.5)}`, - outlineOffset: "2px", - }, - }), - }), - }, - }, - MuiInputBase: { - styleOverrides: { - root: { - border: "none", - }, - input: { - "&::placeholder": { - opacity: 0.7, - color: gray[500], - }, - }, - }, - }, - MuiOutlinedInput: { - styleOverrides: { - input: { - padding: 0, - ...autofillFix, - }, - root: ({ theme }) => ({ - padding: "8px 12px", - color: (theme.vars || theme).palette.text.primary, - borderRadius: (theme.vars || theme).shape.borderRadius, - border: `1px solid ${(theme.vars || theme).palette.divider}`, - // backgroundColor: "#272727", - backgroundColor: "#D9E7ED", - transition: "border 120ms ease-in", - "&:hover": { - borderColor: gray[400], - }, - [`&.${outlinedInputClasses.focused}`]: { - outline: `3px solid ${alpha(brand[500], 0.5)}`, - borderColor: brand[400], - }, - ...theme.applyStyles("dark", { - "&:hover": { - borderColor: gray[500], - }, - }), - variants: [ - { - props: { - size: "small", - }, - style: { - height: "2.25rem", - }, - }, - { - props: { - size: "medium", - }, - style: { - height: "2.5rem", - }, - }, - ], - }), - notchedOutline: { - border: "none", - }, - }, - }, - MuiInputAdornment: { - styleOverrides: { - root: ({ theme }) => ({ - color: (theme.vars || theme).palette.grey[500], - ...theme.applyStyles("dark", { - color: (theme.vars || theme).palette.grey[400], - }), - }), - }, - }, - MuiFormLabel: { - styleOverrides: { - root: ({ theme }) => ({ - typography: theme.typography.caption, - marginBottom: 8, - }), - }, - }, -}; diff --git a/src/shared-theme/customizations/inputs.tsx b/src/shared-theme/customizations/inputs.tsx deleted file mode 100644 index 1b633ef..0000000 --- a/src/shared-theme/customizations/inputs.tsx +++ /dev/null @@ -1,461 +0,0 @@ -import * as React from "react"; -import { alpha, Theme, Components } from "@mui/material/styles"; -import { outlinedInputClasses } from "@mui/material/OutlinedInput"; -import { svgIconClasses } from "@mui/material/SvgIcon"; -import { toggleButtonGroupClasses } from "@mui/material/ToggleButtonGroup"; -import { toggleButtonClasses } from "@mui/material/ToggleButton"; -import CheckBoxOutlineBlankRoundedIcon from "@mui/icons-material/CheckBoxOutlineBlankRounded"; -import CheckRoundedIcon from "@mui/icons-material/CheckRounded"; -import RemoveRoundedIcon from "@mui/icons-material/RemoveRounded"; -import { gray, brand } from "../themePrimitives"; -import { autofillFix } from "./autoFill"; - -/* eslint-disable import/prefer-default-export */ -export const inputsCustomizations: Components = { - MuiButtonBase: { - defaultProps: { - disableTouchRipple: true, - disableRipple: true, - }, - styleOverrides: { - root: ({ theme }) => ({ - boxSizing: "border-box", - transition: "all 100ms ease-in", - "&:focus-visible": { - outline: `3px solid ${alpha( - theme.palette.primary.main, - 0.5 - )}`, - outlineOffset: "2px", - }, - }), - }, - }, - MuiButton: { - styleOverrides: { - root: ({ theme }) => ({ - boxShadow: "none", - borderRadius: (theme.vars || theme).shape.borderRadius, - textTransform: "none", - variants: [ - { - props: { - size: "small", - }, - style: { - height: "2.25rem", - padding: "8px 12px", - }, - }, - { - props: { - size: "medium", - }, - style: { - height: "2.5rem", // 40px - }, - }, - { - props: { - color: "primary", - variant: "contained", - }, - style: { - color: "white", - backgroundColor: gray[900], - backgroundImage: `linear-gradient(to bottom, ${gray[700]}, ${gray[800]})`, - boxShadow: `inset 0 1px 0 ${gray[600]}, inset 0 -1px 0 1px hsl(220, 0%, 0%)`, - border: `1px solid ${gray[700]}`, - "&:hover": { - backgroundImage: "none", - backgroundColor: gray[700], - boxShadow: "none", - }, - "&:active": { - backgroundColor: gray[800], - }, - ...theme.applyStyles("dark", { - color: "black", - backgroundColor: gray[50], - backgroundImage: `linear-gradient(to bottom, ${gray[100]}, ${gray[50]})`, - boxShadow: "inset 0 -1px 0 hsl(220, 30%, 80%)", - border: `1px solid ${gray[50]}`, - "&:hover": { - backgroundImage: "none", - backgroundColor: gray[300], - boxShadow: "none", - }, - "&:active": { - backgroundColor: gray[400], - }, - }), - }, - }, - { - props: { - color: "secondary", - variant: "contained", - }, - style: { - color: "white", - backgroundColor: brand[300], - backgroundImage: `linear-gradient(to bottom, ${alpha( - brand[400], - 0.8 - )}, ${brand[500]})`, - boxShadow: `inset 0 2px 0 ${alpha( - brand[200], - 0.2 - )}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`, - border: `1px solid ${brand[500]}`, - "&:hover": { - backgroundColor: brand[700], - boxShadow: "none", - }, - "&:active": { - backgroundColor: brand[700], - backgroundImage: "none", - }, - }, - }, - { - props: { - variant: "outlined", - }, - style: { - color: (theme.vars || theme).palette.text.primary, - border: "1px solid", - borderColor: gray[200], - backgroundColor: alpha(gray[50], 0.3), - "&:hover": { - backgroundColor: gray[100], - borderColor: gray[300], - }, - "&:active": { - backgroundColor: gray[200], - }, - ...theme.applyStyles("dark", { - backgroundColor: gray[800], - borderColor: gray[700], - - "&:hover": { - backgroundColor: gray[900], - borderColor: gray[600], - }, - "&:active": { - backgroundColor: gray[900], - }, - }), - }, - }, - { - props: { - color: "secondary", - variant: "outlined", - }, - style: { - color: brand[700], - border: "1px solid", - borderColor: brand[200], - backgroundColor: brand[50], - "&:hover": { - backgroundColor: brand[100], - borderColor: brand[400], - }, - "&:active": { - backgroundColor: alpha(brand[200], 0.7), - }, - ...theme.applyStyles("dark", { - color: brand[50], - border: "1px solid", - borderColor: brand[900], - backgroundColor: alpha(brand[900], 0.3), - "&:hover": { - borderColor: brand[700], - backgroundColor: alpha(brand[900], 0.6), - }, - "&:active": { - backgroundColor: alpha(brand[900], 0.5), - }, - }), - }, - }, - { - props: { - variant: "text", - }, - style: { - color: gray[600], - "&:hover": { - backgroundColor: gray[100], - }, - "&:active": { - backgroundColor: gray[200], - }, - ...theme.applyStyles("dark", { - color: gray[50], - "&:hover": { - backgroundColor: gray[700], - }, - "&:active": { - backgroundColor: alpha(gray[700], 0.7), - }, - }), - }, - }, - { - props: { - color: "secondary", - variant: "text", - }, - style: { - color: brand[700], - "&:hover": { - backgroundColor: alpha(brand[100], 0.5), - }, - "&:active": { - backgroundColor: alpha(brand[200], 0.7), - }, - ...theme.applyStyles("dark", { - color: brand[100], - "&:hover": { - backgroundColor: alpha(brand[900], 0.5), - }, - "&:active": { - backgroundColor: alpha(brand[900], 0.3), - }, - }), - }, - }, - ], - }), - }, - }, - MuiIconButton: { - styleOverrides: { - root: ({ theme }) => ({ - boxShadow: "none", - borderRadius: (theme.vars || theme).shape.borderRadius, - textTransform: "none", - fontWeight: theme.typography.fontWeightMedium, - letterSpacing: 0, - color: (theme.vars || theme).palette.text.primary, - border: "1px solid ", - borderColor: gray[200], - backgroundColor: alpha(gray[50], 0.3), - "&:hover": { - backgroundColor: gray[100], - borderColor: gray[300], - }, - "&:active": { - backgroundColor: gray[200], - }, - ...theme.applyStyles("dark", { - backgroundColor: gray[800], - borderColor: gray[700], - "&:hover": { - backgroundColor: gray[900], - borderColor: gray[600], - }, - "&:active": { - backgroundColor: gray[900], - }, - }), - variants: [ - { - props: { - size: "small", - }, - style: { - width: "2.25rem", - height: "2.25rem", - padding: "0.25rem", - [`& .${svgIconClasses.root}`]: { fontSize: "1rem" }, - }, - }, - { - props: { - size: "medium", - }, - style: { - width: "2.5rem", - height: "2.5rem", - }, - }, - ], - }), - }, - }, - MuiToggleButtonGroup: { - styleOverrides: { - root: ({ theme }) => ({ - borderRadius: "10px", - boxShadow: `0 4px 16px ${alpha(gray[400], 0.2)}`, - [`& .${toggleButtonGroupClasses.selected}`]: { - color: brand[500], - }, - ...theme.applyStyles("dark", { - [`& .${toggleButtonGroupClasses.selected}`]: { - color: "#fff", - }, - boxShadow: `0 4px 16px ${alpha(brand[700], 0.5)}`, - }), - }), - }, - }, - MuiToggleButton: { - styleOverrides: { - root: ({ theme }) => ({ - padding: "12px 16px", - textTransform: "none", - borderRadius: "10px", - fontWeight: 500, - ...theme.applyStyles("dark", { - color: gray[400], - boxShadow: "0 4px 16px rgba(0, 0, 0, 0.5)", - [`&.${toggleButtonClasses.selected}`]: { - color: brand[300], - }, - }), - }), - }, - }, - MuiCheckbox: { - defaultProps: { - disableRipple: true, - icon: ( - - ), - checkedIcon: , - indeterminateIcon: ( - - ), - }, - styleOverrides: { - root: ({ theme }) => ({ - margin: 10, - height: 16, - width: 16, - borderRadius: 5, - border: "1px solid ", - borderColor: alpha(gray[300], 0.8), - boxShadow: "0 0 0 1.5px hsla(210, 0%, 0%, 0.04) inset", - backgroundColor: alpha(gray[100], 0.4), - transition: "border-color, background-color, 120ms ease-in", - "&:hover": { - borderColor: brand[300], - }, - "&.Mui-focusVisible": { - outline: `3px solid ${alpha(brand[500], 0.5)}`, - outlineOffset: "2px", - borderColor: brand[400], - }, - "&.Mui-checked": { - color: "white", - backgroundColor: brand[500], - borderColor: brand[500], - boxShadow: `none`, - "&:hover": { - backgroundColor: brand[600], - }, - }, - ...theme.applyStyles("dark", { - borderColor: alpha(gray[700], 0.8), - boxShadow: "0 0 0 1.5px hsl(210, 0%, 0%) inset", - backgroundColor: alpha(gray[900], 0.8), - "&:hover": { - borderColor: brand[300], - }, - "&.Mui-focusVisible": { - borderColor: brand[400], - outline: `3px solid ${alpha(brand[500], 0.5)}`, - outlineOffset: "2px", - }, - }), - }), - }, - }, - MuiInputBase: { - styleOverrides: { - root: { - border: "none", - }, - input: { - "&::placeholder": { - opacity: 0.7, - color: gray[600], - }, - }, - }, - }, - MuiOutlinedInput: { - styleOverrides: { - input: { - padding: 0, - ...autofillFix, - }, - root: ({ theme }) => ({ - padding: "8px 12px", - color: (theme.vars || theme).palette.text.primary, - borderRadius: (theme.vars || theme).shape.borderRadius, - border: `1px solid ${(theme.vars || theme).palette.divider}`, - backgroundColor: (theme.vars || theme).palette.background - .default, - transition: "border 120ms ease-in", - "&:hover": { - borderColor: gray[400], - }, - [`&.${outlinedInputClasses.focused}`]: { - outline: `3px solid ${alpha(brand[500], 0.5)}`, - borderColor: brand[400], - }, - ...theme.applyStyles("dark", { - "&:hover": { - borderColor: gray[500], - }, - }), - variants: [ - { - props: { - size: "small", - }, - style: { - height: "2.25rem", - }, - }, - { - props: { - size: "medium", - }, - style: { - height: "2.5rem", - }, - }, - ], - }), - notchedOutline: { - border: "none", - }, - }, - }, - MuiInputAdornment: { - styleOverrides: { - root: ({ theme }) => ({ - color: (theme.vars || theme).palette.grey[500], - ...theme.applyStyles("dark", { - color: (theme.vars || theme).palette.grey[400], - }), - }), - }, - }, - MuiFormLabel: { - styleOverrides: { - root: ({ theme }) => ({ - typography: theme.typography.caption, - marginBottom: 8, - }), - }, - }, -}; diff --git a/src/shared-theme/customizations/navigation.js b/src/shared-theme/customizations/navigation.js deleted file mode 100644 index 9459331..0000000 --- a/src/shared-theme/customizations/navigation.js +++ /dev/null @@ -1,294 +0,0 @@ -import * as React from 'react'; -import { alpha } from '@mui/material/styles'; - -import { buttonBaseClasses } from '@mui/material/ButtonBase'; -import { dividerClasses } from '@mui/material/Divider'; -import { menuItemClasses } from '@mui/material/MenuItem'; -import { selectClasses } from '@mui/material/Select'; -import { tabClasses } from '@mui/material/Tab'; -import UnfoldMoreRoundedIcon from '@mui/icons-material/UnfoldMoreRounded'; -import { gray, brand } from '../themePrimitives'; - -/* eslint-disable import/prefer-default-export */ -export const navigationCustomizations = { - MuiMenuItem: { - styleOverrides: { - root: ({ theme }) => ({ - borderRadius: (theme.vars || theme).shape.borderRadius, - // padding: '6px 8px', - [`&.${menuItemClasses.focusVisible}`]: { - backgroundColor: "transparent", - }, - [`&.${menuItemClasses.selected}`]: { - [`&.${menuItemClasses.focusVisible}`]: { - // backgroundColor: alpha( - // theme.palette.action.selected, - // 0.3 - // ), - - backgroundColor: "transparent", - }, - }, - }), - }, - }, - MuiMenu: { - styleOverrides: { - list: { - gap: "0px", - [`&.${dividerClasses.root}`]: { - margin: "0 -8px", - }, - }, - paper: ({ theme }) => ({ - marginTop: "4px", - borderRadius: (theme.vars || theme).shape.borderRadius, - border: `1px solidrgb(141, 135, 135)`, - backgroundImage: "none", - background: "#D9E7ED", - boxShadow: - "hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px", - [`& .${buttonBaseClasses.root}`]: { - "&.Mui-selected": { - backgroundColor: "transparent", - }, - "&.Mui-selected:hover": { - backgroundColor: "transparent", - }, - }, - ...theme.applyStyles("dark", { - background: "#272727", - boxShadow: - "hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px", - }), - }), - }, - }, - MuiSelect: { - defaultProps: { - IconComponent: React.forwardRef((props, ref) => ( - - )), - }, - styleOverrides: { - root: ({ theme }) => ({ - borderRadius: (theme.vars || theme).shape.borderRadius, - border: "1px solid", - borderColor: gray[200], - backgroundColor: (theme.vars || theme).palette.background.paper, - boxShadow: `inset 0 1px 0 1px hsla(220, 0%, 100%, 0.6), inset 0 -1px 0 1px hsla(220, 35%, 90%, 0.5)`, - "&:hover": { - borderColor: gray[300], - backgroundColor: (theme.vars || theme).palette.background - .paper, - boxShadow: "none", - }, - [`&.${selectClasses.focused}`]: { - outlineOffset: 0, - borderColor: gray[400], - }, - "&:before, &:after": { - display: "none", - }, - ...theme.applyStyles("dark", { - borderRadius: (theme.vars || theme).shape.borderRadius, - borderColor: gray[700], - backgroundColor: (theme.vars || theme).palette.background - .paper, - boxShadow: `inset 0 1px 0 1px ${alpha( - gray[700], - 0.15 - )}, inset 0 -1px 0 1px hsla(220, 0%, 0%, 0.7)`, - "&:hover": { - borderColor: alpha(gray[700], 0.7), - backgroundColor: (theme.vars || theme).palette - .background.paper, - boxShadow: "none", - }, - [`&.${selectClasses.focused}`]: { - outlineOffset: 0, - borderColor: gray[900], - }, - "&:before, &:after": { - display: "none", - }, - }), - }), - select: ({ theme }) => ({ - display: "flex", - alignItems: "center", - ...theme.applyStyles("dark", { - display: "flex", - alignItems: "center", - "&:focus-visible": { - backgroundColor: gray[900], - }, - }), - }), - }, - }, - MuiLink: { - defaultProps: { - underline: "none", - }, - styleOverrides: { - root: ({ theme }) => ({ - color: (theme.vars || theme).palette.text.primary, - fontWeight: 500, - position: "relative", - textDecoration: "none", - width: "fit-content", - "&::before": { - content: '""', - position: "absolute", - width: "100%", - height: "1px", - bottom: 0, - left: 0, - backgroundColor: (theme.vars || theme).palette.text - .secondary, - opacity: 0.3, - transition: "width 0.3s ease, opacity 0.3s ease", - }, - "&:hover::before": { - width: 0, - }, - "&:focus-visible": { - outline: `3px solid ${alpha(brand[500], 0.5)}`, - outlineOffset: "4px", - borderRadius: "2px", - }, - }), - }, - }, - MuiDrawer: { - styleOverrides: { - paper: ({ theme }) => ({ - backgroundColor: (theme.vars || theme).palette.background - .default, - }), - }, - }, - MuiPaginationItem: { - styleOverrides: { - root: ({ theme }) => ({ - "&.Mui-selected": { - color: "white", - backgroundColor: (theme.vars || theme).palette.grey[900], - }, - ...theme.applyStyles("dark", { - "&.Mui-selected": { - color: "black", - backgroundColor: (theme.vars || theme).palette.grey[50], - }, - }), - }), - }, - }, - MuiTabs: { - styleOverrides: { - root: { minHeight: "fit-content" }, - indicator: ({ theme }) => ({ - backgroundColor: (theme.vars || theme).palette.grey[800], - ...theme.applyStyles("dark", { - backgroundColor: (theme.vars || theme).palette.grey[200], - }), - }), - }, - }, - MuiTab: { - styleOverrides: { - root: ({ theme }) => ({ - padding: "6px 8px", - marginBottom: "8px", - textTransform: "none", - minWidth: "fit-content", - minHeight: "fit-content", - color: (theme.vars || theme).palette.text.secondary, - borderRadius: (theme.vars || theme).shape.borderRadius, - border: "1px solid", - borderColor: "transparent", - ":hover": { - color: (theme.vars || theme).palette.text.primary, - backgroundColor: gray[100], - borderColor: gray[200], - }, - [`&.${tabClasses.selected}`]: { - color: gray[900], - }, - ...theme.applyStyles("dark", { - ":hover": { - color: (theme.vars || theme).palette.text.primary, - backgroundColor: gray[800], - borderColor: gray[700], - }, - [`&.${tabClasses.selected}`]: { - color: "#fff", - }, - }), - }), - }, - }, - MuiStepConnector: { - styleOverrides: { - line: ({ theme }) => ({ - borderTop: "1px solid", - borderColor: (theme.vars || theme).palette.divider, - flex: 1, - borderRadius: "99px", - }), - }, - }, - MuiStepIcon: { - styleOverrides: { - root: ({ theme }) => ({ - color: "transparent", - border: `1px solid ${gray[400]}`, - width: 12, - height: 12, - borderRadius: "50%", - "& text": { - display: "none", - }, - "&.Mui-active": { - border: "none", - color: (theme.vars || theme).palette.primary.main, - }, - "&.Mui-completed": { - border: "none", - color: (theme.vars || theme).palette.success.main, - }, - ...theme.applyStyles("dark", { - border: `1px solid ${gray[700]}`, - "&.Mui-active": { - border: "none", - color: (theme.vars || theme).palette.primary.light, - }, - "&.Mui-completed": { - border: "none", - color: (theme.vars || theme).palette.success.light, - }, - }), - variants: [ - { - props: { completed: true }, - style: { - width: 12, - height: 12, - }, - }, - ], - }), - }, - }, - MuiStepLabel: { - styleOverrides: { - label: ({ theme }) => ({ - "&.Mui-completed": { - opacity: 0.6, - ...theme.applyStyles("dark", { opacity: 0.5 }), - }, - }), - }, - }, -}; diff --git a/src/shared-theme/customizations/navigation.tsx b/src/shared-theme/customizations/navigation.tsx deleted file mode 100644 index ee1d1f0..0000000 --- a/src/shared-theme/customizations/navigation.tsx +++ /dev/null @@ -1,279 +0,0 @@ -import * as React from 'react'; -import { Theme, alpha, Components } from '@mui/material/styles'; -import { SvgIconProps } from '@mui/material/SvgIcon'; -import { buttonBaseClasses } from '@mui/material/ButtonBase'; -import { dividerClasses } from '@mui/material/Divider'; -import { menuItemClasses } from '@mui/material/MenuItem'; -import { selectClasses } from '@mui/material/Select'; -import { tabClasses } from '@mui/material/Tab'; -import UnfoldMoreRoundedIcon from '@mui/icons-material/UnfoldMoreRounded'; -import { gray, brand } from '../themePrimitives'; - -/* eslint-disable import/prefer-default-export */ -export const navigationCustomizations: Components = { - MuiMenuItem: { - styleOverrides: { - root: ({ theme }) => ({ - borderRadius: (theme.vars || theme).shape.borderRadius, - padding: '6px 8px', - [`&.${menuItemClasses.focusVisible}`]: { - backgroundColor: 'transparent', - }, - [`&.${menuItemClasses.selected}`]: { - [`&.${menuItemClasses.focusVisible}`]: { - backgroundColor: alpha(theme.palette.action.selected, 0.3), - }, - }, - }), - }, - }, - MuiMenu: { - styleOverrides: { - list: { - gap: '0px', - [`&.${dividerClasses.root}`]: { - margin: '0 -8px', - }, - }, - paper: ({ theme }) => ({ - marginTop: '4px', - borderRadius: (theme.vars || theme).shape.borderRadius, - // border: `1px solid ${(theme.vars || theme).palette.divider}`, - backgroundImage: 'none', - // background: 'hsl(0, 0%, 100%)', - boxShadow: - 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px', - [`& .${buttonBaseClasses.root}`]: { - '&.Mui-selected': { - backgroundColor: alpha(theme.palette.action.selected, 0.3), - }, - }, - ...theme.applyStyles('dark', { - background: gray[900], - boxShadow: - 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px', - }), - }), - }, - }, - MuiSelect: { - defaultProps: { - IconComponent: React.forwardRef((props, ref) => ( - - )), - }, - styleOverrides: { - root: ({ theme }) => ({ - borderRadius: (theme.vars || theme).shape.borderRadius, - border: '1px solid', - borderColor: gray[200], - backgroundColor: (theme.vars || theme).palette.background.paper, - boxShadow: `inset 0 1px 0 1px hsla(220, 0%, 100%, 0.6), inset 0 -1px 0 1px hsla(220, 35%, 90%, 0.5)`, - '&:hover': { - borderColor: gray[300], - backgroundColor: (theme.vars || theme).palette.background.paper, - boxShadow: 'none', - }, - [`&.${selectClasses.focused}`]: { - outlineOffset: 0, - borderColor: gray[400], - }, - '&:before, &:after': { - display: 'none', - }, - - ...theme.applyStyles('dark', { - borderRadius: (theme.vars || theme).shape.borderRadius, - borderColor: gray[700], - backgroundColor: (theme.vars || theme).palette.background.paper, - boxShadow: `inset 0 1px 0 1px ${alpha(gray[700], 0.15)}, inset 0 -1px 0 1px hsla(220, 0%, 0%, 0.7)`, - '&:hover': { - borderColor: alpha(gray[700], 0.7), - backgroundColor: (theme.vars || theme).palette.background.paper, - boxShadow: 'none', - }, - [`&.${selectClasses.focused}`]: { - outlineOffset: 0, - borderColor: gray[900], - }, - '&:before, &:after': { - display: 'none', - }, - }), - }), - select: ({ theme }) => ({ - display: 'flex', - alignItems: 'center', - ...theme.applyStyles('dark', { - display: 'flex', - alignItems: 'center', - '&:focus-visible': { - backgroundColor: gray[900], - }, - }), - }), - }, - }, - MuiLink: { - defaultProps: { - underline: 'none', - }, - styleOverrides: { - root: ({ theme }) => ({ - color: (theme.vars || theme).palette.text.primary, - fontWeight: 500, - position: 'relative', - textDecoration: 'none', - width: 'fit-content', - '&::before': { - content: '""', - position: 'absolute', - width: '100%', - height: '1px', - bottom: 0, - left: 0, - backgroundColor: (theme.vars || theme).palette.text.secondary, - opacity: 0.3, - transition: 'width 0.3s ease, opacity 0.3s ease', - }, - '&:hover::before': { - width: 0, - }, - '&:focus-visible': { - outline: `3px solid ${alpha(brand[500], 0.5)}`, - outlineOffset: '4px', - borderRadius: '2px', - }, - }), - }, - }, - MuiDrawer: { - styleOverrides: { - paper: ({ theme }) => ({ - backgroundColor: (theme.vars || theme).palette.background.default, - }), - }, - }, - MuiPaginationItem: { - styleOverrides: { - root: ({ theme }) => ({ - '&.Mui-selected': { - color: 'white', - backgroundColor: (theme.vars || theme).palette.grey[900], - }, - ...theme.applyStyles('dark', { - '&.Mui-selected': { - color: 'black', - backgroundColor: (theme.vars || theme).palette.grey[50], - }, - }), - }), - }, - }, - MuiTabs: { - styleOverrides: { - root: { minHeight: 'fit-content' }, - indicator: ({ theme }) => ({ - backgroundColor: (theme.vars || theme).palette.grey[800], - ...theme.applyStyles('dark', { - backgroundColor: (theme.vars || theme).palette.grey[200], - }), - }), - }, - }, - MuiTab: { - styleOverrides: { - root: ({ theme }) => ({ - padding: '6px 8px', - marginBottom: '8px', - textTransform: 'none', - minWidth: 'fit-content', - minHeight: 'fit-content', - color: (theme.vars || theme).palette.text.secondary, - borderRadius: (theme.vars || theme).shape.borderRadius, - border: '1px solid', - borderColor: 'transparent', - ':hover': { - color: (theme.vars || theme).palette.text.primary, - backgroundColor: gray[100], - borderColor: gray[200], - }, - [`&.${tabClasses.selected}`]: { - color: gray[900], - }, - ...theme.applyStyles('dark', { - ':hover': { - color: (theme.vars || theme).palette.text.primary, - backgroundColor: gray[800], - borderColor: gray[700], - }, - [`&.${tabClasses.selected}`]: { - color: '#fff', - }, - }), - }), - }, - }, - MuiStepConnector: { - styleOverrides: { - line: ({ theme }) => ({ - borderTop: '1px solid', - borderColor: (theme.vars || theme).palette.divider, - flex: 1, - borderRadius: '99px', - }), - }, - }, - MuiStepIcon: { - styleOverrides: { - root: ({ theme }) => ({ - color: 'transparent', - border: `1px solid ${gray[400]}`, - width: 12, - height: 12, - borderRadius: '50%', - '& text': { - display: 'none', - }, - '&.Mui-active': { - border: 'none', - color: (theme.vars || theme).palette.primary.main, - }, - '&.Mui-completed': { - border: 'none', - color: (theme.vars || theme).palette.success.main, - }, - ...theme.applyStyles('dark', { - border: `1px solid ${gray[700]}`, - '&.Mui-active': { - border: 'none', - color: (theme.vars || theme).palette.primary.light, - }, - '&.Mui-completed': { - border: 'none', - color: (theme.vars || theme).palette.success.light, - }, - }), - variants: [ - { - props: { completed: true }, - style: { - width: 12, - height: 12, - }, - }, - ], - }), - }, - }, - MuiStepLabel: { - styleOverrides: { - label: ({ theme }) => ({ - '&.Mui-completed': { - opacity: 0.6, - ...theme.applyStyles('dark', { opacity: 0.5 }), - }, - }), - }, - }, -}; diff --git a/src/shared-theme/customizations/surfaces.js b/src/shared-theme/customizations/surfaces.js deleted file mode 100644 index a7584dd..0000000 --- a/src/shared-theme/customizations/surfaces.js +++ /dev/null @@ -1,114 +0,0 @@ -import { alpha } from '@mui/material/styles'; -import { gray } from '../themePrimitives'; - -/* eslint-disable import/prefer-default-export */ -export const surfacesCustomizations = { - MuiAccordion: { - defaultProps: { - elevation: 0, - disableGutters: true, - }, - styleOverrides: { - root: ({ theme }) => ({ - padding: 4, - overflow: 'clip', - backgroundColor: (theme.vars || theme).palette.background.default, - border: '1px solid', - borderColor: (theme.vars || theme).palette.divider, - ':before': { - backgroundColor: 'transparent', - }, - '&:not(:last-of-type)': { - borderBottom: 'none', - }, - '&:first-of-type': { - borderTopLeftRadius: (theme.vars || theme).shape.borderRadius, - borderTopRightRadius: (theme.vars || theme).shape.borderRadius, - }, - '&:last-of-type': { - borderBottomLeftRadius: (theme.vars || theme).shape.borderRadius, - borderBottomRightRadius: (theme.vars || theme).shape.borderRadius, - }, - }), - }, - }, - MuiAccordionSummary: { - styleOverrides: { - root: ({ theme }) => ({ - border: 'none', - borderRadius: 8, - '&:hover': { backgroundColor: gray[50] }, - '&:focus-visible': { backgroundColor: 'transparent' }, - ...theme.applyStyles('dark', { - '&:hover': { backgroundColor: gray[800] }, - }), - }), - }, - }, - MuiAccordionDetails: { - styleOverrides: { - root: { mb: 20, border: 'none' }, - }, - }, - MuiPaper: { - defaultProps: { - elevation: 0, - - }, - }, - MuiCard: { - styleOverrides: { - root: ({ theme }) => { - return { - padding: 16, - gap: 16, - transition: 'all 100ms ease', - backgroundColor: gray[50], - borderRadius: (theme.vars || theme).shape.borderRadius, - border: `1px solid ${(theme.vars || theme).palette.divider}`, - boxShadow: 'none', - ...theme.applyStyles('dark', { - backgroundColor:"#1C1C1C", - }), - variants: [ - { - props: { - variant: 'outlined', - }, - style: { - border: `1px solid ${(theme.vars || theme).palette.divider}`, - boxShadow: 'none', - background: 'hsl(0, 0%, 100%)', - ...theme.applyStyles('dark', { - background: alpha(gray[900], 0.4), - }), - }, - }, - ], - }; - }, - }, - }, - MuiCardContent: { - styleOverrides: { - root: { - padding: 0, - '&:last-child': { paddingBottom: 0 }, - }, - }, - }, - MuiCardHeader: { - styleOverrides: { - root: { - padding: 0, - }, - }, - }, - MuiCardActions: { - styleOverrides: { - root: { - padding: 0, - }, - }, - }, -}; diff --git a/src/shared-theme/customizations/surfaces.ts b/src/shared-theme/customizations/surfaces.ts deleted file mode 100644 index f47a6d8..0000000 --- a/src/shared-theme/customizations/surfaces.ts +++ /dev/null @@ -1,113 +0,0 @@ -import { alpha, Theme, Components } from '@mui/material/styles'; -import { gray } from '../themePrimitives'; - -/* eslint-disable import/prefer-default-export */ -export const surfacesCustomizations: Components = { - MuiAccordion: { - defaultProps: { - elevation: 0, - disableGutters: true, - }, - styleOverrides: { - root: ({ theme }) => ({ - padding: 4, - overflow: 'clip', - backgroundColor: (theme.vars || theme).palette.background.default, - border: '1px solid', - borderColor: (theme.vars || theme).palette.divider, - ':before': { - backgroundColor: 'transparent', - }, - '&:not(:last-of-type)': { - borderBottom: 'none', - }, - '&:first-of-type': { - borderTopLeftRadius: (theme.vars || theme).shape.borderRadius, - borderTopRightRadius: (theme.vars || theme).shape.borderRadius, - }, - '&:last-of-type': { - borderBottomLeftRadius: (theme.vars || theme).shape.borderRadius, - borderBottomRightRadius: (theme.vars || theme).shape.borderRadius, - }, - }), - }, - }, - MuiAccordionSummary: { - styleOverrides: { - root: ({ theme }) => ({ - border: 'none', - borderRadius: 8, - '&:hover': { backgroundColor: gray[50] }, - '&:focus-visible': { backgroundColor: 'transparent' }, - ...theme.applyStyles('dark', { - '&:hover': { backgroundColor: gray[800] }, - }), - }), - }, - }, - MuiAccordionDetails: { - styleOverrides: { - root: { mb: 20, border: 'none' }, - }, - }, - MuiPaper: { - defaultProps: { - elevation: 0, - }, - }, - MuiCard: { - styleOverrides: { - root: ({ theme }) => { - return { - padding: 16, - gap: 16, - transition: 'all 100ms ease', - backgroundColor: gray[50], - borderRadius: (theme.vars || theme).shape.borderRadius, - border: `1px solid ${(theme.vars || theme).palette.divider}`, - boxShadow: 'none', - ...theme.applyStyles('dark', { - backgroundColor: gray[800], - }), - variants: [ - { - props: { - variant: 'outlined', - }, - style: { - border: `1px solid ${(theme.vars || theme).palette.divider}`, - boxShadow: 'none', - background: 'hsl(0, 0%, 100%)', - ...theme.applyStyles('dark', { - background: alpha(gray[900], 0.4), - }), - }, - }, - ], - }; - }, - }, - }, - MuiCardContent: { - styleOverrides: { - root: { - padding: 0, - '&:last-child': { paddingBottom: 0 }, - }, - }, - }, - MuiCardHeader: { - styleOverrides: { - root: { - padding: 0, - }, - }, - }, - MuiCardActions: { - styleOverrides: { - root: { - padding: 0, - }, - }, - }, -}; diff --git a/src/shared-theme/themePrimitives.js b/src/shared-theme/themePrimitives.js deleted file mode 100644 index 4a8c52b..0000000 --- a/src/shared-theme/themePrimitives.js +++ /dev/null @@ -1,384 +0,0 @@ -import { createTheme, alpha } from "@mui/material/styles"; - -const defaultTheme = createTheme(); - -const customShadows = [...defaultTheme.shadows]; - -export const brand = { - 50: "hsl(210, 100%, 95%)", - 100: "hsl(210, 100%, 92%)", - 200: "hsl(210, 100%, 80%)", - 300: "hsl(210, 100%, 65%)", - 400: "hsl(210, 98%, 48%)", - 500: "hsl(210, 98%, 42%)", - 600: "hsl(210, 98%, 55%)", - 700: "hsl(210, 100%, 35%)", - 800: "hsl(210, 100%, 16%)", - 900: "hsl(210, 100%, 21%)", -}; - -export const gray = { - 50: "hsl(220, 35%, 97%)", - 100: "hsl(220, 30%, 94%)", - 200: "hsl(220, 20%, 88%)", - 300: "hsl(220, 20%, 80%)", - 400: "hsl(220, 20%, 65%)", - 500: "hsl(220, 20%, 42%)", - 600: "hsl(220, 20%, 35%)", - 700: "hsl(220, 20%, 25%)", - 800: "hsl(220, 30%, 6%)", - 900: "hsl(220, 35%, 3%)", -}; - -export const green = { - 50: "hsl(120, 80%, 98%)", - 100: "hsl(120, 75%, 94%)", - 200: "hsl(120, 75%, 87%)", - 300: "hsl(120, 61%, 77%)", - 400: "hsl(120, 44%, 53%)", - 500: "hsl(120, 59%, 30%)", - 600: "hsl(120, 70%, 25%)", - 700: "hsl(120, 75%, 16%)", - 800: "hsl(120, 84%, 10%)", - 900: "hsl(120, 87%, 6%)", -}; - -export const orange = { - 50: "hsl(45, 100%, 97%)", - 100: "hsl(45, 92%, 90%)", - 200: "hsl(45, 94%, 80%)", - 300: "hsl(45, 90%, 65%)", - 400: "hsl(45, 90%, 40%)", - 500: "hsl(45, 90%, 35%)", - 600: "hsl(45, 91%, 25%)", - 700: "hsl(45, 94%, 20%)", - 800: "hsl(45, 95%, 16%)", - 900: "hsl(45, 93%, 12%)", -}; - -export const red = { - 50: "hsl(0, 100%, 97%)", - 100: "hsl(0, 92%, 90%)", - 200: "hsl(0, 94%, 80%)", - 300: "hsl(0, 90%, 65%)", - 400: "hsl(0, 90%, 40%)", - 500: "hsl(0, 90%, 30%)", - 600: "hsl(0, 91%, 25%)", - 700: "hsl(0, 94%, 18%)", - 800: "hsl(0, 95%, 12%)", - 900: "hsl(0, 93%, 6%)", -}; - -export const getDesignTokens = (mode) => { - customShadows[1] = - mode === "dark" - ? "hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px" - : "hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px"; - - return { - palette: { - mode, - primary: { - light: brand[200], - main: brand[400], - dark: brand[700], - contrastText: brand[50], - ...(mode === "dark" && { - contrastText: brand[50], - light: brand[300], - main: brand[400], - dark: brand[700], - }), - }, - info: { - light: brand[100], - main: brand[300], - dark: brand[600], - contrastText: gray[50], - ...(mode === "dark" && { - contrastText: brand[300], - light: brand[500], - main: brand[700], - dark: brand[900], - }), - }, - warning: { - light: orange[300], - main: orange[400], - dark: orange[800], - ...(mode === "dark" && { - light: orange[400], - main: orange[500], - dark: orange[700], - }), - }, - error: { - light: red[300], - main: red[400], - dark: red[800], - ...(mode === "dark" && { - light: red[400], - main: red[500], - dark: red[700], - }), - }, - success: { - light: green[300], - main: green[400], - dark: green[800], - ...(mode === "dark" && { - light: green[400], - main: green[500], - dark: green[700], - }), - }, - grey: { - ...gray, - }, - divider: - mode === "dark" ? alpha(gray[700], 0.6) : alpha(gray[300], 0.4), - background: { - default: "hsl(0, 0%, 99%)", - paper: "hsl(220, 35%, 97%)", - ...(mode === "dark" && { - default: gray[900], - paper: "hsl(220, 30%, 7%)", - }), - }, - text: { - primary: gray[800], - secondary: gray[600], - warning: orange[400], - ...(mode === "dark" && { - primary: "hsl(0, 0%, 100%)", - secondary: gray[400], - }), - }, - action: { - hover: alpha(gray[200], 0.2), - selected: `${alpha(gray[200], 0.3)}`, - ...(mode === "dark" && { - hover: alpha(gray[600], 0.2), - selected: alpha(gray[600], 0.3), - }), - }, - }, - typography: { - fontFamily: "Gilory", - h1: { - fontSize: defaultTheme.typography.pxToRem(48), - fontWeight: 600, - lineHeight: 1.2, - letterSpacing: -0.5, - }, - h2: { - fontSize: defaultTheme.typography.pxToRem(36), - fontWeight: 600, - lineHeight: 1.2, - }, - h3: { - fontSize: defaultTheme.typography.pxToRem(30), - lineHeight: 1.2, - }, - h4: { - fontSize: defaultTheme.typography.pxToRem(24), - fontWeight: 600, - lineHeight: 1.5, - }, - h5: { - fontSize: defaultTheme.typography.pxToRem(20), - fontWeight: 600, - }, - h6: { - fontSize: defaultTheme.typography.pxToRem(18), - fontWeight: 600, - }, - subtitle1: { - fontSize: defaultTheme.typography.pxToRem(18), - }, - subtitle2: { - fontSize: defaultTheme.typography.pxToRem(14), - fontWeight: 500, - }, - body1: { - fontSize: defaultTheme.typography.pxToRem(14), - }, - body2: { - fontSize: defaultTheme.typography.pxToRem(14), - fontWeight: 400, - }, - caption: { - fontSize: defaultTheme.typography.pxToRem(12), - fontWeight: 400, - }, - }, - shape: { - borderRadius: 8, - }, - shadows: customShadows, - }; -}; - -export const colorSchemes = { - light: { - palette: { - primary: { - light: brand[200], - main: brand[400], - dark: brand[700], - contrastText: brand[50], - }, - info: { - light: brand[100], - main: brand[300], - dark: brand[600], - contrastText: gray[50], - }, - warning: { - light: orange[300], - main: orange[400], - dark: orange[800], - }, - error: { - light: red[300], - main: red[400], - dark: red[800], - }, - success: { - light: green[300], - main: green[400], - dark: green[800], - }, - grey: { - ...gray, - }, - divider: alpha(gray[300], 0.4), - background: { - default: "hsl(0, 0%, 99%)", - paper: "hsl(220, 35%, 97%)", - }, - text: { - primary: gray[800], - secondary: gray[600], - warning: orange[400], - }, - action: { - hover: alpha(gray[200], 0.2), - selected: `${alpha(gray[200], 0.3)}`, - }, - baseShadow: - "hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px", - }, - }, - dark: { - palette: { - primary: { - contrastText: brand[50], - light: brand[300], - main: brand[400], - dark: brand[700], - }, - info: { - contrastText: brand[300], - light: brand[500], - main: brand[700], - dark: brand[900], - }, - warning: { - light: orange[400], - main: orange[500], - dark: orange[700], - }, - error: { - light: red[400], - main: red[500], - dark: red[700], - }, - success: { - light: green[400], - main: green[500], - dark: green[700], - }, - grey: { - ...gray, - }, - divider: alpha(gray[700], 0.6), - background: { - default: gray[900], - paper: "hsl(220, 30%, 7%)", - }, - text: { - primary: "hsl(0, 0%, 100%)", - secondary: gray[400], - }, - action: { - hover: alpha(gray[600], 0.2), - selected: alpha(gray[600], 0.3), - }, - baseShadow: - "hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px", - }, - }, -}; - -export const typography = { - fontFamily: "Gilory", - h1: { - fontSize: defaultTheme.typography.pxToRem(48), - fontWeight: 600, - lineHeight: 1.2, - letterSpacing: -0.5, - }, - h2: { - fontSize: defaultTheme.typography.pxToRem(36), - fontWeight: 600, - lineHeight: 1.2, - }, - h3: { - fontSize: defaultTheme.typography.pxToRem(30), - lineHeight: 1.2, - }, - h4: { - fontSize: defaultTheme.typography.pxToRem(24), - fontWeight: 600, - lineHeight: 1.5, - }, - h5: { - fontSize: defaultTheme.typography.pxToRem(20), - fontWeight: 600, - }, - h6: { - fontSize: defaultTheme.typography.pxToRem(18), - fontWeight: 600, - }, - subtitle1: { - fontSize: defaultTheme.typography.pxToRem(18), - }, - subtitle2: { - fontSize: defaultTheme.typography.pxToRem(14), - fontWeight: 500, - }, - body1: { - fontSize: defaultTheme.typography.pxToRem(14), - }, - body2: { - fontSize: defaultTheme.typography.pxToRem(14), - fontWeight: 400, - }, - caption: { - fontSize: defaultTheme.typography.pxToRem(12), - fontWeight: 400, - }, -}; - -export const shape = { - borderRadius: 8, -}; - -const defaultShadows = [ - "none", - "var(--template-palette-baseShadow)", - ...defaultTheme.shadows.slice(2), -]; - -export const shadows = defaultShadows; diff --git a/src/shared-theme/themePrimitives.ts b/src/shared-theme/themePrimitives.ts deleted file mode 100644 index 63dd01a..0000000 --- a/src/shared-theme/themePrimitives.ts +++ /dev/null @@ -1,410 +0,0 @@ -import { createTheme, alpha, PaletteMode, Shadows } from "@mui/material/styles"; - -declare module "@mui/material/Paper" { - interface PaperPropsVariantOverrides { - highlighted: true; - } -} -declare module "@mui/material/styles/createPalette" { - interface ColorRange { - 50: string; - 100: string; - 200: string; - 300: string; - 400: string; - 500: string; - 600: string; - 700: string; - 800: string; - 900: string; - } - - interface PaletteColor extends ColorRange {} - - interface Palette { - baseShadow: string; - } -} - -const defaultTheme = createTheme(); - -const customShadows: Shadows = [...defaultTheme.shadows]; - -export const brand = { - 50: "hsl(210, 100%, 95%)", - 100: "hsl(210, 100%, 92%)", - 200: "hsl(210, 100%, 80%)", - 300: "hsl(210, 100%, 65%)", - 400: "hsl(210, 98%, 48%)", - 500: "hsl(210, 98%, 42%)", - 600: "hsl(210, 98%, 55%)", - 700: "hsl(210, 100%, 35%)", - 800: "hsl(210, 100%, 16%)", - 900: "hsl(210, 100%, 21%)", -}; - -export const gray = { - 50: "hsl(220, 35%, 97%)", - 100: "hsl(220, 30%, 94%)", - 200: "hsl(220, 20%, 88%)", - 300: "hsl(220, 20%, 80%)", - 400: "hsl(220, 20%, 65%)", - 500: "hsl(220, 20%, 42%)", - 600: "hsl(220, 20%, 35%)", - 700: "hsl(220, 20%, 25%)", - 800: "hsl(220, 30%, 6%)", - 900: "hsl(220, 35%, 3%)", -}; - -export const green = { - 50: "hsl(120, 80%, 98%)", - 100: "hsl(120, 75%, 94%)", - 200: "hsl(120, 75%, 87%)", - 300: "hsl(120, 61%, 77%)", - 400: "hsl(120, 44%, 53%)", - 500: "hsl(120, 59%, 30%)", - 600: "hsl(120, 70%, 25%)", - 700: "hsl(120, 75%, 16%)", - 800: "hsl(120, 84%, 10%)", - 900: "hsl(120, 87%, 6%)", -}; - -export const orange = { - 50: "hsl(45, 100%, 97%)", - 100: "hsl(45, 92%, 90%)", - 200: "hsl(45, 94%, 80%)", - 300: "hsl(45, 90%, 65%)", - 400: "hsl(45, 90%, 40%)", - 500: "hsl(45, 90%, 35%)", - 600: "hsl(45, 91%, 25%)", - 700: "hsl(45, 94%, 20%)", - 800: "hsl(45, 95%, 16%)", - 900: "hsl(45, 93%, 12%)", -}; - -export const red = { - 50: "hsl(0, 100%, 97%)", - 100: "hsl(0, 92%, 90%)", - 200: "hsl(0, 94%, 80%)", - 300: "hsl(0, 90%, 65%)", - 400: "hsl(0, 90%, 40%)", - 500: "hsl(0, 90%, 30%)", - 600: "hsl(0, 91%, 25%)", - 700: "hsl(0, 94%, 18%)", - 800: "hsl(0, 95%, 12%)", - 900: "hsl(0, 93%, 6%)", -}; - -export const getDesignTokens = (mode: PaletteMode) => { - customShadows[1] = - mode === "dark" - ? "hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px" - : "hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px"; - - return { - palette: { - mode, - primary: { - light: brand[200], - main: brand[400], - dark: brand[700], - contrastText: brand[50], - ...(mode === "dark" && { - contrastText: brand[50], - light: brand[300], - main: brand[400], - dark: brand[700], - }), - }, - info: { - light: brand[100], - main: brand[300], - dark: brand[600], - contrastText: gray[50], - ...(mode === "dark" && { - contrastText: brand[300], - light: brand[500], - main: brand[700], - dark: brand[900], - }), - }, - warning: { - light: orange[300], - main: orange[400], - dark: orange[800], - ...(mode === "dark" && { - light: orange[400], - main: orange[500], - dark: orange[700], - }), - }, - error: { - light: red[300], - main: red[400], - dark: red[800], - ...(mode === "dark" && { - light: red[400], - main: red[500], - dark: red[700], - }), - }, - success: { - light: green[300], - main: green[400], - dark: green[800], - ...(mode === "dark" && { - light: green[400], - main: green[500], - dark: green[700], - }), - }, - grey: { - ...gray, - }, - divider: - mode === "dark" ? alpha(gray[700], 0.6) : alpha(gray[300], 0.4), - background: { - default: "hsl(0, 0%, 99%)", - paper: "hsl(220, 35%, 97%)", - ...(mode === "dark" && { - default: gray[900], - paper: "hsl(220, 30%, 7%)", - }), - }, - text: { - primary: gray[800], - secondary: gray[600], - warning: orange[400], - ...(mode === "dark" && { - primary: "hsl(0, 0%, 100%)", - secondary: gray[400], - }), - }, - action: { - hover: alpha(gray[200], 0.2), - selected: `${alpha(gray[200], 0.3)}`, - ...(mode === "dark" && { - hover: alpha(gray[600], 0.2), - selected: alpha(gray[600], 0.3), - }), - }, - }, - typography: { - fontFamily: "Gilroy", - h1: { - fontSize: defaultTheme.typography.pxToRem(48), - fontWeight: 600, - lineHeight: 1.2, - letterSpacing: -0.5, - }, - h2: { - fontSize: defaultTheme.typography.pxToRem(36), - fontWeight: 600, - lineHeight: 1.2, - }, - h3: { - fontSize: defaultTheme.typography.pxToRem(30), - lineHeight: 1.2, - }, - h4: { - fontSize: defaultTheme.typography.pxToRem(24), - fontWeight: 600, - lineHeight: 1.5, - }, - h5: { - fontSize: defaultTheme.typography.pxToRem(20), - fontWeight: 600, - }, - h6: { - fontSize: defaultTheme.typography.pxToRem(18), - fontWeight: 600, - }, - subtitle1: { - fontSize: defaultTheme.typography.pxToRem(18), - }, - subtitle2: { - fontSize: defaultTheme.typography.pxToRem(14), - fontWeight: 500, - }, - body1: { - fontSize: defaultTheme.typography.pxToRem(14), - }, - body2: { - fontSize: defaultTheme.typography.pxToRem(14), - fontWeight: 400, - }, - caption: { - fontSize: defaultTheme.typography.pxToRem(12), - fontWeight: 400, - }, - }, - shape: { - borderRadius: 8, - }, - shadows: customShadows, - }; -}; - -export const colorSchemes = { - light: { - palette: { - primary: { - light: brand[200], - main: brand[400], - dark: brand[700], - contrastText: brand[50], - }, - info: { - light: brand[100], - main: brand[300], - dark: brand[600], - contrastText: gray[50], - }, - warning: { - light: orange[300], - main: orange[400], - dark: orange[800], - }, - error: { - light: red[300], - main: red[400], - dark: red[800], - }, - success: { - light: green[300], - main: green[400], - dark: green[800], - }, - grey: { - ...gray, - }, - divider: alpha(gray[300], 0.4), - background: { - default: "hsl(0, 0%, 99%)", - paper: "hsl(220, 35%, 97%)", - }, - text: { - primary: gray[800], - secondary: gray[600], - warning: orange[400], - }, - action: { - hover: alpha(gray[200], 0.2), - selected: `${alpha(gray[200], 0.3)}`, - }, - baseShadow: - "hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px", - }, - }, - dark: { - palette: { - primary: { - contrastText: brand[50], - light: brand[300], - main: brand[400], - dark: brand[700], - }, - info: { - contrastText: brand[300], - light: brand[500], - main: brand[700], - dark: brand[900], - }, - warning: { - light: orange[400], - main: orange[500], - dark: orange[700], - }, - error: { - light: red[400], - main: red[500], - dark: red[700], - }, - success: { - light: green[400], - main: green[500], - dark: green[700], - }, - grey: { - ...gray, - }, - divider: alpha(gray[700], 0.6), - background: { - default: gray[900], - paper: "hsl(220, 30%, 7%)", - }, - text: { - primary: "hsl(0, 0%, 100%)", - secondary: gray[400], - }, - action: { - hover: alpha(gray[600], 0.2), - selected: alpha(gray[600], 0.3), - }, - baseShadow: - "hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px", - }, - }, -}; - -export const typography = { - fontFamily: "Gilroy", - h1: { - fontSize: defaultTheme.typography.pxToRem(48), - fontWeight: 600, - lineHeight: 1.2, - letterSpacing: -0.5, - }, - h2: { - fontSize: defaultTheme.typography.pxToRem(36), - fontWeight: 600, - lineHeight: 1.2, - }, - h3: { - fontSize: defaultTheme.typography.pxToRem(30), - lineHeight: 1.2, - }, - h4: { - fontSize: defaultTheme.typography.pxToRem(24), - fontWeight: 600, - lineHeight: 1.5, - }, - h5: { - fontSize: defaultTheme.typography.pxToRem(20), - fontWeight: 600, - }, - h6: { - fontSize: defaultTheme.typography.pxToRem(18), - fontWeight: 600, - }, - subtitle1: { - fontSize: defaultTheme.typography.pxToRem(18), - }, - subtitle2: { - fontSize: defaultTheme.typography.pxToRem(14), - fontWeight: 500, - }, - body1: { - fontSize: defaultTheme.typography.pxToRem(14), - }, - body2: { - fontSize: defaultTheme.typography.pxToRem(14), - fontWeight: 400, - }, - caption: { - fontSize: defaultTheme.typography.pxToRem(12), - fontWeight: 400, - }, -}; - -export const shape = { - borderRadius: 8, -}; - -// @ts-ignore -const defaultShadows: Shadows = [ - "none", - "var(--template-palette-baseShadow)", - ...defaultTheme.shadows.slice(2), -]; -export const shadows = defaultShadows;