resolved comments
This commit is contained in:
jaanvi
parent
554b74a174
commit
407ae41da1
BIN
public/Bell.jpg
BIN
public/Bell.jpg
Binary file not shown.
|
Before Width: | Height: | Size: 1,008 B |
Binary file not shown.
|
Before Width: | Height: | Size: 2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 246 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.9 KiB |
|
|
@ -1,4 +0,0 @@
|
||||||
<svg width="535" height="226" viewBox="0 0 535 226" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M43.561 68.1C55.753 68.1 65.913 72.3757 74.041 80.927C82.2537 89.4783 86.36 100.019 86.36 112.55C86.36 125.081 82.2537 135.622 74.041 144.173C65.913 152.724 55.753 157 43.561 157H8.255V68.1H43.561ZM43.561 140.236C51.2657 140.236 57.531 137.696 62.357 132.616C67.183 127.451 69.596 120.763 69.596 112.55C69.596 104.337 67.183 97.691 62.357 92.611C57.531 87.4463 51.2657 84.864 43.561 84.864H25.781V140.236H43.561ZM98.7921 68.1H116.318V157H98.7921V68.1ZM220.024 109.248V116.106C220.024 128.806 215.96 139.093 207.832 146.967C199.704 154.841 189.205 158.778 176.336 158.778C162.62 158.778 151.232 154.333 142.173 145.443C133.198 136.468 128.711 125.546 128.711 112.677C128.711 99.723 133.156 88.7587 142.046 79.784C151.02 70.8093 162.112 66.322 175.32 66.322C183.617 66.322 191.195 68.227 198.053 72.037C204.911 75.7623 210.245 80.7577 214.055 87.023L199.069 95.659C196.952 92.0183 193.735 89.055 189.417 86.769C185.183 84.483 180.442 83.34 175.193 83.34C166.726 83.34 159.741 86.134 154.238 91.722C148.819 97.2253 146.11 104.21 146.11 112.677C146.11 121.059 148.861 128.002 154.365 133.505C159.953 138.924 167.319 141.633 176.463 141.633C183.236 141.633 188.824 140.151 193.227 137.188C197.714 134.14 200.762 129.991 202.371 124.742H175.447V109.248H220.024ZM232.489 68.1H250.015V157H232.489V68.1ZM410.998 140.236H448.463V157H393.472V68.1H447.828V84.864H410.998V103.787H444.653V120.297H410.998V140.236ZM482.788 157L452.943 68.1H471.993L493.71 136.426L515.3 68.1H534.477L504.505 157H482.788Z" fill="white"/>
|
|
||||||
<path d="M374.268 108.459L324.874 94.3623L347.782 14.0969L264.907 117.311L314.302 131.408L291.394 211.673L374.268 108.459Z" fill="#52ACDF"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 157 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 24 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 14 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.9 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 316 KiB |
BIN
public/bgEV.png
BIN
public/bgEV.png
Binary file not shown.
|
Before Width: | Height: | Size: 316 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 29 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.2 KiB |
BIN
public/hero.png
BIN
public/hero.png
Binary file not shown.
|
Before Width: | Height: | Size: 154 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1 MiB |
BIN
public/home.png
BIN
public/home.png
Binary file not shown.
|
Before Width: | Height: | Size: 120 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 221 KiB |
BIN
public/jobo.png
BIN
public/jobo.png
Binary file not shown.
|
Before Width: | Height: | Size: 975 B |
Binary file not shown.
|
Before Width: | Height: | Size: 3.5 KiB |
BIN
public/logo.png
BIN
public/logo.png
Binary file not shown.
|
Before Width: | Height: | Size: 4.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 566 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 148 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.6 KiB |
|
|
@ -48,3 +48,4 @@ body {
|
||||||
transform: rotate(360deg);
|
transform: rotate(360deg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 138 KiB |
|
|
@ -21,8 +21,8 @@ import ArrowDownwardIcon from "@mui/icons-material/ArrowDownward";
|
||||||
// Styled Components
|
// Styled Components
|
||||||
const StyledTableCell = styled(TableCell)(({ theme }) => ({
|
const StyledTableCell = styled(TableCell)(({ theme }) => ({
|
||||||
[`&.${tableCellClasses.head}`]: {
|
[`&.${tableCellClasses.head}`]: {
|
||||||
backgroundColor: "#000000",
|
backgroundColor: theme.palette.common.black, // instead of "#000000"
|
||||||
color: "#D0E1E9",
|
color: theme.palette.primary.light,
|
||||||
fontWeight: 600,
|
fontWeight: 600,
|
||||||
fontSize: "16px",
|
fontSize: "16px",
|
||||||
padding: "12px 16px",
|
padding: "12px 16px",
|
||||||
|
|
@ -32,7 +32,7 @@ const StyledTableCell = styled(TableCell)(({ theme }) => ({
|
||||||
zIndex: 10,
|
zIndex: 10,
|
||||||
transition: "background-color 0.2s ease",
|
transition: "background-color 0.2s ease",
|
||||||
"&:hover": {
|
"&:hover": {
|
||||||
backgroundColor: "#2A2A2A",
|
backgroundColor: theme.palette.grey[900],
|
||||||
cursor: "pointer",
|
cursor: "pointer",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
@ -40,10 +40,9 @@ const StyledTableCell = styled(TableCell)(({ theme }) => ({
|
||||||
fontSize: "16px",
|
fontSize: "16px",
|
||||||
padding: "12px 16px",
|
padding: "12px 16px",
|
||||||
borderBottom: "none",
|
borderBottom: "none",
|
||||||
color: "#333333",
|
color: theme.palette.text.primary,
|
||||||
transition: "background-color 0.2s ease",
|
transition: "background-color 0.2s ease",
|
||||||
fontWeight: 500,
|
fontWeight: 500,
|
||||||
|
|
||||||
},
|
},
|
||||||
}));
|
}));
|
||||||
|
|
||||||
|
|
|
||||||
8
src/constants/messages.tsx
Normal file
8
src/constants/messages.tsx
Normal file
|
|
@ -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",
|
||||||
|
};
|
||||||
|
|
@ -1,24 +1,20 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { useDispatch, useSelector } from 'react-redux';
|
import { useDispatch, useSelector } from 'react-redux';
|
||||||
|
|
||||||
import { checkUserAuth } from '../redux/slices/authSlice';
|
|
||||||
|
|
||||||
const useAuth = () => {
|
const useAuth = () => {
|
||||||
const dispatch = useDispatch();
|
const dispatch = useDispatch();
|
||||||
const [isAuthorized, setIsAuthorized] = React.useState(false);
|
|
||||||
const { isAuthenticated } = useSelector((state) => ({
|
const { isAuthenticated } = useSelector((state) => ({
|
||||||
isAuthenticated: state.authReducer.isAuthenticated,
|
isAuthenticated: state.auth.isAuthenticated,
|
||||||
}));
|
}));
|
||||||
|
const [loading, setLoading] = React.useState(true);
|
||||||
React.useEffect(() => {
|
React.useEffect(() => {
|
||||||
if (isAuthenticated) {
|
|
||||||
dispatch(checkUserAuth());
|
dispatch(checkUserAuth()).finally(() => setLoading(false));
|
||||||
} else {
|
|
||||||
setIsAuthorized(false);
|
}, [dispatch]);
|
||||||
}
|
|
||||||
}, [dispatch, isAuthenticated]);
|
|
||||||
|
|
||||||
return { isAuthenticated, isAuthorized };
|
return { isAuthenticated, loading };
|
||||||
};
|
};
|
||||||
|
|
||||||
export default useAuth;
|
export default useAuth;
|
||||||
|
|
|
||||||
|
|
@ -29,15 +29,6 @@ export default function EmailPage() {
|
||||||
toast.warning("Subject and Message are required.");
|
toast.warning("Subject and Message are required.");
|
||||||
return;
|
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));
|
dispatch(markStudentAsSent(selectedIds));
|
||||||
toast.success("Emails sent successfully.");
|
toast.success("Emails sent successfully.");
|
||||||
navigate("/");
|
navigate("/");
|
||||||
|
|
|
||||||
|
|
@ -1,20 +1,8 @@
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import { Box, Typography, Button, Card, Grid } from "@mui/material";
|
import { Box, Typography, Button, Card, Grid } from "@mui/material";
|
||||||
import ElectricCarIcon from "@mui/icons-material/ElectricCar";
|
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 = () => {
|
const NotFoundPage = () => {
|
||||||
return (
|
return (
|
||||||
|
|
|
||||||
12
src/pages/NotFoundPage/style.css.tsx
Normal file
12
src/pages/NotFoundPage/style.css.tsx
Normal file
|
|
@ -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);
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
import { createSlice, createAsyncThunk, PayloadAction } from "@reduxjs/toolkit";
|
import { createSlice, createAsyncThunk, PayloadAction } from "@reduxjs/toolkit";
|
||||||
import http from "../../lib/https";
|
import http from "../../lib/https";
|
||||||
import { toast } from "sonner";
|
import { toast } from "sonner";
|
||||||
|
import { MESSAGES } from "../../constants/messages";
|
||||||
export interface Student {
|
export interface Student {
|
||||||
id: string;
|
id: string;
|
||||||
name: string;
|
name: string;
|
||||||
|
|
@ -46,10 +46,10 @@ export const removeStudentFromServer = createAsyncThunk<
|
||||||
>("backlog/removeStudentFromServer", async (studentId, { rejectWithValue }) => {
|
>("backlog/removeStudentFromServer", async (studentId, { rejectWithValue }) => {
|
||||||
try {
|
try {
|
||||||
await http.delete(`/students/${studentId}`);
|
await http.delete(`/students/${studentId}`);
|
||||||
toast.success("Student removed from backlog.");
|
toast.success(MESSAGES.STUDENT_REMOVED_SERVER);
|
||||||
return studentId;
|
return studentId;
|
||||||
} catch (error: any) {
|
} catch (error: any) {
|
||||||
toast.error("Failed to remove student.");
|
toast.error(MESSAGES.FAILED_TO_REMOVE);
|
||||||
return rejectWithValue(
|
return rejectWithValue(
|
||||||
error.response?.data?.message || "Remove operation failed"
|
error.response?.data?.message || "Remove operation failed"
|
||||||
);
|
);
|
||||||
|
|
@ -68,7 +68,7 @@ const backlogSlice = createSlice({
|
||||||
...student,
|
...student,
|
||||||
status: "Pending",
|
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(
|
state.students = state.students.filter(
|
||||||
(student) => student.id !== action.payload
|
(student) => student.id !== action.payload
|
||||||
);
|
);
|
||||||
toast.success("Student removed from local backlog.");
|
toast.success(MESSAGES.STUDENT_REMOVED_LOCAL);
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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 (
|
|
||||||
<Box
|
|
||||||
data-screenshot="toggle-mode"
|
|
||||||
sx={(theme) => ({
|
|
||||||
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: <LightModeIcon />,
|
|
||||||
dark: <DarkModeIcon />,
|
|
||||||
}[resolvedMode];
|
|
||||||
return (
|
|
||||||
<React.Fragment>
|
|
||||||
<IconButton
|
|
||||||
data-screenshot="toggle-mode"
|
|
||||||
onClick={handleClick}
|
|
||||||
disableRipple
|
|
||||||
size="small"
|
|
||||||
aria-controls={open ? 'color-scheme-menu' : undefined}
|
|
||||||
aria-haspopup="true"
|
|
||||||
aria-expanded={open ? 'true' : undefined}
|
|
||||||
{...props}
|
|
||||||
>
|
|
||||||
{icon}
|
|
||||||
</IconButton>
|
|
||||||
<Menu
|
|
||||||
anchorEl={anchorEl}
|
|
||||||
id="account-menu"
|
|
||||||
open={open}
|
|
||||||
onClose={handleClose}
|
|
||||||
onClick={handleClose}
|
|
||||||
slotProps={{
|
|
||||||
paper: {
|
|
||||||
variant: 'outlined',
|
|
||||||
elevation: 0,
|
|
||||||
sx: {
|
|
||||||
my: '4px',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}}
|
|
||||||
transformOrigin={{ horizontal: 'right', vertical: 'top' }}
|
|
||||||
anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
|
|
||||||
>
|
|
||||||
<MenuItem selected={mode === 'system'} onClick={handleMode('system')}>
|
|
||||||
System
|
|
||||||
</MenuItem>
|
|
||||||
<MenuItem selected={mode === 'light'} onClick={handleMode('light')}>
|
|
||||||
Light
|
|
||||||
</MenuItem>
|
|
||||||
<MenuItem selected={mode === 'dark'} onClick={handleMode('dark')}>
|
|
||||||
Dark
|
|
||||||
</MenuItem>
|
|
||||||
</Menu>
|
|
||||||
</React.Fragment>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
@ -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 | HTMLElement>(null);
|
|
||||||
const open = Boolean(anchorEl);
|
|
||||||
const handleClick = (event: React.MouseEvent<HTMLElement>) => {
|
|
||||||
setAnchorEl(event.currentTarget);
|
|
||||||
};
|
|
||||||
const handleClose = () => {
|
|
||||||
setAnchorEl(null);
|
|
||||||
};
|
|
||||||
const handleMode = (targetMode: 'system' | 'light' | 'dark') => () => {
|
|
||||||
setMode(targetMode);
|
|
||||||
handleClose();
|
|
||||||
};
|
|
||||||
if (!mode) {
|
|
||||||
return (
|
|
||||||
<Box
|
|
||||||
data-screenshot="toggle-mode"
|
|
||||||
sx={(theme) => ({
|
|
||||||
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: <LightModeIcon />,
|
|
||||||
dark: <DarkModeIcon />,
|
|
||||||
}[resolvedMode];
|
|
||||||
return (
|
|
||||||
<React.Fragment>
|
|
||||||
<IconButton
|
|
||||||
data-screenshot="toggle-mode"
|
|
||||||
onClick={handleClick}
|
|
||||||
disableRipple
|
|
||||||
size="small"
|
|
||||||
aria-controls={open ? 'color-scheme-menu' : undefined}
|
|
||||||
aria-haspopup="true"
|
|
||||||
aria-expanded={open ? 'true' : undefined}
|
|
||||||
{...props}
|
|
||||||
>
|
|
||||||
{icon}
|
|
||||||
</IconButton>
|
|
||||||
<Menu
|
|
||||||
anchorEl={anchorEl}
|
|
||||||
id="account-menu"
|
|
||||||
open={open}
|
|
||||||
onClose={handleClose}
|
|
||||||
onClick={handleClose}
|
|
||||||
slotProps={{
|
|
||||||
paper: {
|
|
||||||
variant: 'outlined',
|
|
||||||
elevation: 0,
|
|
||||||
sx: {
|
|
||||||
my: '4px',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}}
|
|
||||||
transformOrigin={{ horizontal: 'right', vertical: 'top' }}
|
|
||||||
anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
|
|
||||||
>
|
|
||||||
<MenuItem selected={mode === 'system'} onClick={handleMode('system')}>
|
|
||||||
System
|
|
||||||
</MenuItem>
|
|
||||||
<MenuItem selected={mode === 'light'} onClick={handleMode('light')}>
|
|
||||||
Light
|
|
||||||
</MenuItem>
|
|
||||||
<MenuItem selected={mode === 'dark'} onClick={handleMode('dark')}>
|
|
||||||
Dark
|
|
||||||
</MenuItem>
|
|
||||||
</Menu>
|
|
||||||
</React.Fragment>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
@ -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 (
|
|
||||||
<Select
|
|
||||||
value={mode}
|
|
||||||
onChange={(event) => setMode(event.target.value)}
|
|
||||||
SelectDisplayProps={{
|
|
||||||
'data-screenshot': 'toggle-mode',
|
|
||||||
}}
|
|
||||||
{...props}
|
|
||||||
>
|
|
||||||
<MenuItem value="system">System</MenuItem>
|
|
||||||
<MenuItem value="light">Light</MenuItem>
|
|
||||||
<MenuItem value="dark">Dark</MenuItem>
|
|
||||||
</Select>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
@ -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 (
|
|
||||||
<Select
|
|
||||||
value={mode}
|
|
||||||
onChange={(event) =>
|
|
||||||
setMode(event.target.value as 'system' | 'light' | 'dark')
|
|
||||||
}
|
|
||||||
SelectDisplayProps={{
|
|
||||||
// @ts-ignore
|
|
||||||
'data-screenshot': 'toggle-mode',
|
|
||||||
}}
|
|
||||||
{...props}
|
|
||||||
>
|
|
||||||
<MenuItem value="system">System</MenuItem>
|
|
||||||
<MenuItem value="light">Light</MenuItem>
|
|
||||||
<MenuItem value="dark">Dark</MenuItem>
|
|
||||||
</Select>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
@ -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",
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
@ -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",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
@ -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<Theme> = {
|
|
||||||
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',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
@ -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],
|
|
||||||
}),
|
|
||||||
}),
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
@ -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<Theme> = {
|
|
||||||
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],
|
|
||||||
}),
|
|
||||||
}),
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
@ -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: (
|
|
||||||
<CheckBoxOutlineBlankRoundedIcon
|
|
||||||
sx={{ color: "hsla(210, 0%, 0%, 0.0)" }}
|
|
||||||
/>
|
|
||||||
),
|
|
||||||
checkedIcon: <CheckRoundedIcon sx={{ height: 14, width: 14 }} />,
|
|
||||||
indeterminateIcon: (
|
|
||||||
<RemoveRoundedIcon sx={{ height: 14, width: 14 }} />
|
|
||||||
),
|
|
||||||
},
|
|
||||||
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,
|
|
||||||
}),
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
@ -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<Theme> = {
|
|
||||||
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: (
|
|
||||||
<CheckBoxOutlineBlankRoundedIcon
|
|
||||||
sx={{ color: "hsla(210, 0%, 0%, 0.0)" }}
|
|
||||||
/>
|
|
||||||
),
|
|
||||||
checkedIcon: <CheckRoundedIcon sx={{ height: 14, width: 14 }} />,
|
|
||||||
indeterminateIcon: (
|
|
||||||
<RemoveRoundedIcon sx={{ height: 14, width: 14 }} />
|
|
||||||
),
|
|
||||||
},
|
|
||||||
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,
|
|
||||||
}),
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
@ -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) => (
|
|
||||||
<UnfoldMoreRoundedIcon fontSize="small" {...props} ref={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 }),
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
@ -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<Theme> = {
|
|
||||||
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<SVGSVGElement, SvgIconProps>((props, ref) => (
|
|
||||||
<UnfoldMoreRoundedIcon fontSize="small" {...props} ref={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 }),
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
@ -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,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
@ -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<Theme> = {
|
|
||||||
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,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
@ -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;
|
|
||||||
|
|
@ -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;
|
|
||||||
Loading…
Reference in a new issue