diff --git a/packages/apps/dashboard/client/src/assets/styles/_const.scss b/packages/apps/dashboard/client/src/assets/styles/_const.scss index 8290739e30..2f3774c914 100644 --- a/packages/apps/dashboard/client/src/assets/styles/_const.scss +++ b/packages/apps/dashboard/client/src/assets/styles/_const.scss @@ -1,18 +1,5 @@ $maWhite: #F6F7FE; $primary: #320A8D; $white: #fff; -$sky: #858EC6; -$skyOpacity: #DADEF0CC; $secondary: #6309FF; -$lilacSachet: #AEB4D9; -$ghostWhite: #F9FAFF; -$whiteSolid: #F6F5FC; -$groundwaterOpacity: #1406B20A; -$medium: #FFB300; -$mediumBorder: #FFD54F; -$low: #ED6C02; -$lowBorder: #ED6C0280; -$high: #0AD397; -$highBorder: #2E7D3280; -$soon: #304FFE; -$soonBorder: #8C9EFF; \ No newline at end of file +$skyOpacity: #DADEF0CC; \ No newline at end of file diff --git a/packages/apps/dashboard/client/src/assets/styles/_search.scss b/packages/apps/dashboard/client/src/assets/styles/_search.scss index 014fe3047c..c687f453c0 100644 --- a/packages/apps/dashboard/client/src/assets/styles/_search.scss +++ b/packages/apps/dashboard/client/src/assets/styles/_search.scss @@ -1,11 +1,11 @@ -.search, .search-white{ +.search { position: relative; width: 920px; max-width: 100%; - border: 1px solid #DADEF0CC; + border: 1px solid; + border-color: $skyOpacity; border-radius: 13px; - #search-bar{ width: 100%; border-radius: 8px; @@ -21,66 +21,4 @@ } } - - .search-close{ - cursor: pointer; - } - - .search-button{ - background-color: $secondary; - border-radius: 8px; - svg{ - font-size: 32px; - } - &:hover{ - background-color: $primary; - } - } -} - -.search-results-bar { - display: block; - -} - -.search-white{ - width: 500px; - max-width: 25%; - - .search-button{ - padding: 4px; - background: #1406B214; - svg{ - font-size: 24px; - } - &:hover{ - background-color: $secondary; - svg{ - color: $white; - } - } - } - - #search-bar{ - padding: 8px 0; - - } - @media (max-width: 1150px) { - max-width: 20%; - } - - @media (max-width: 1280px) { - max-width: 100%; - - #search-bar{ - padding: 12px 0; - } - } -} - -@media (max-width: 1280px) { - - .search-white{ - padding: 8px 0; - } } diff --git a/packages/apps/dashboard/client/src/assets/styles/color-palette.ts b/packages/apps/dashboard/client/src/assets/styles/color-palette.ts deleted file mode 100644 index ed67fcb013..0000000000 --- a/packages/apps/dashboard/client/src/assets/styles/color-palette.ts +++ /dev/null @@ -1,63 +0,0 @@ -export const colorPalette = { - white: '#F9FAFF', - whiteBackground: '#FFF', - whiteSolid: '#F6F5FC', - skyOpacity: '#DADEF0CC', - link: '#0000EE', - linkHover: '#1406B2', - linkVisited: '#551A8B', - primary: { - main: '#320a8d', - light: '#320a8d', - }, - secondary: { - main: '#6309ff', - light: '#1406B280', - dark: '#14062b', - }, - info: { - main: '#eeeeee', - light: '#f5f5f5', - dark: '#bdbdbd', - }, - success: { - main: '#0AD397', - light: '#2E7D3280', - }, - warning: { - main: '#FFB300', - light: '#FFD54F', - }, - error: { - main: '#FFB300', - light: '#F20D5F', - }, - fog: { - main: '#858EC6', - light: '#CBCFE6', - dark: '#E5E7F3', - }, - overlay: { - light: '#1406B20A', - }, - sky: { - main: '#858ec6', - light: '#858ec6', - dark: '#858ec6', - contrastText: '#858ec6', - }, - ocean: { - main: '#304FFE', - light: '#8C9EFF', - dark: '#03A9F4', - }, - orange: { - main: '#ED6C02', - light: '#ED6C0280', - }, - table: { - main: '#FFFFFF01', - selected: '#1406B21F', - secondary: '#1406B20A', - }, -} as const; diff --git a/packages/apps/dashboard/client/src/components/Charts/AreaChart.tsx b/packages/apps/dashboard/client/src/components/Charts/AreaChart.tsx index 456135b49d..36f5fa95b1 100644 --- a/packages/apps/dashboard/client/src/components/Charts/AreaChart.tsx +++ b/packages/apps/dashboard/client/src/components/Charts/AreaChart.tsx @@ -1,6 +1,6 @@ import { useEffect, useRef, useState } from 'react'; -import { Typography } from '@mui/material'; +import { Typography, useTheme } from '@mui/material'; import Card from '@mui/material/Card'; import Stack from '@mui/material/Stack'; import dayjs, { Dayjs } from 'dayjs'; @@ -14,7 +14,6 @@ import { ResponsiveContainer, } from 'recharts'; -import { colorPalette } from '@/assets/styles/color-palette'; import CustomXAxisTick from '@/components/Charts/CustomXAxisTick'; import ToggleCharts from '@/components/Charts/ToggleCharts'; import DatePicker from '@/components/DataEntry/DatePicker'; @@ -83,6 +82,7 @@ export const AreaChart = ({ changeDateOnScroll?: boolean; }) => { const { data } = useGraphPageChartData(); + const theme = useTheme(); const chartData = data || []; const { setFromDate, @@ -302,14 +302,14 @@ export const AreaChart = ({ tick={{ dx: -10 }} tickSize={0} axisLine={false} - stroke={colorPalette.fog.main} + stroke={theme.palette.fog.main} /> } height={50} - stroke={colorPalette.fog.dark} + stroke={theme.palette.fog.dark} tickSize={20} dataKey="date" tickMargin={10} @@ -319,7 +319,7 @@ export const AreaChart = ({ @@ -328,7 +328,7 @@ export const AreaChart = ({ @@ -337,7 +337,7 @@ export const AreaChart = ({ @@ -346,7 +346,7 @@ export const AreaChart = ({ @@ -355,7 +355,7 @@ export const AreaChart = ({ @@ -367,7 +367,7 @@ export const AreaChart = ({ py: 3, mt: 3, ml: { xs: 0, xl: 6 }, - backgroundColor: colorPalette.overlay.light, + backgroundColor: theme.palette.overlay, boxShadow: 'none', borderRadius: '16px', }} @@ -382,31 +382,31 @@ export const AreaChart = ({ isAreaChart: true, name: 'totalTransactionAmount', amount: `${Number(sum.totalTransactionAmount.toFixed())}`, - color: colorPalette.primary.main, + color: theme.palette.primary.main, }, { title: 'Transactions Count', name: 'totalTransactionCount', amount: sum.totalTransactionCount, - color: colorPalette.secondary.main, + color: theme.palette.secondary.main, }, { title: 'Number of Tasks', name: 'solved', amount: sum.solved, - color: colorPalette.ocean.dark, + color: theme.palette.ocean.dark, }, { title: 'Unique Receivers', name: 'dailyUniqueReceivers', amount: sum.dailyUniqueReceivers, - color: colorPalette.error.light, + color: theme.palette.error.light, }, { title: 'Unique Senders', name: 'dailyUniqueSenders', amount: sum.dailyUniqueSenders, - color: colorPalette.success.main, + color: theme.palette.success.main, }, ]} /> diff --git a/packages/apps/dashboard/client/src/components/Charts/CustomChartTooltip.tsx b/packages/apps/dashboard/client/src/components/Charts/CustomChartTooltip.tsx index d27479a7ef..43e186ae67 100644 --- a/packages/apps/dashboard/client/src/components/Charts/CustomChartTooltip.tsx +++ b/packages/apps/dashboard/client/src/components/Charts/CustomChartTooltip.tsx @@ -6,11 +6,9 @@ import Stack from '@mui/material/Stack'; import { NumericFormat } from 'react-number-format'; import { TooltipProps } from 'recharts'; -import { colorPalette } from '@/assets/styles/color-palette'; import { GraphPageChartDataConfigObject } from '@/components/Charts/AreaChart'; import { formatDate } from '@/helpers/formatDate'; - const renderTitle = (title: string) => { const currentTitle: GraphPageChartDataConfigObject = { totalTransactionAmount: 'Transfer Amount', @@ -31,20 +29,13 @@ const CustomChartTooltip = ({ return ( - - + + {formatDate(label, 'MMMM DD, YYYY')} {payload?.map((elem) => ( @@ -64,7 +55,7 @@ const CustomChartTooltip = ({ fontSize: '12px', }} /> - + {renderTitle(elem.name ?? '')} diff --git a/packages/apps/dashboard/client/src/components/Charts/CustomXAxisTick.tsx b/packages/apps/dashboard/client/src/components/Charts/CustomXAxisTick.tsx index 46fc03a3f8..3cdcc81b5b 100644 --- a/packages/apps/dashboard/client/src/components/Charts/CustomXAxisTick.tsx +++ b/packages/apps/dashboard/client/src/components/Charts/CustomXAxisTick.tsx @@ -1,16 +1,18 @@ +import { useTheme } from '@mui/material'; // @ts-expect-error -- import error, but this type work property import { ContentRenderer } from 'recharts'; -import { colorPalette } from '@/assets/styles/color-palette'; import { formatDate } from '@/helpers/formatDate'; const CustomXAxisTick = ({ x, y, payload }: ContentRenderer) => { + const theme = useTheme(); + return ( , BaseSingleInputFieldProps< @@ -43,7 +41,8 @@ const CustomDateField = ({ aria-label={ariaLabel} onClick={() => setOpen((prevState) => !prevState)} sx={{ - borderBottom: `1px solid ${colorPalette.primary.main}`, + borderBottom: '1px solid', + borderColor: 'primary.main', lineHeight: 2.5, '&:hover': { cursor: 'pointer', diff --git a/packages/apps/dashboard/client/src/components/DataEntry/ToggleButtons.tsx b/packages/apps/dashboard/client/src/components/DataEntry/ToggleButtons.tsx index 5383d14c25..29c523d3d9 100644 --- a/packages/apps/dashboard/client/src/components/DataEntry/ToggleButtons.tsx +++ b/packages/apps/dashboard/client/src/components/DataEntry/ToggleButtons.tsx @@ -1,7 +1,7 @@ import { styled } from '@mui/material'; +import Button from '@mui/material/Button'; import ToggleButton from '@mui/material/ToggleButton'; import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'; -import Typography from '@mui/material/Typography'; import dayjs from 'dayjs'; import { @@ -16,6 +16,7 @@ export const StyledToggleButtonGroup = styled(ToggleButtonGroup)( '.MuiToggleButtonGroup-grouped': { border: 'none', borderRadius: 4, + minWidth: 'unset', width: 47, height: 30, color: theme.palette.primary.main, @@ -43,15 +44,14 @@ const ToggleButtons = () => { exclusive > {TIME_PERIOD_OPTIONS.map((elem) => ( - setTimePeriod(elem)} selected={checkIfSelected(elem)} value={elem.name} sx={{ - '.MuiTypography-root': { - wordBreak: 'normal', - }, '&.Mui-selected': { backgroundColor: 'primary.main', color: 'white.main', @@ -61,8 +61,8 @@ const ToggleButtons = () => { }, }} > - {elem.name} - + {elem.name} + ))} ); diff --git a/packages/apps/dashboard/client/src/components/Home/SmallGraph.tsx b/packages/apps/dashboard/client/src/components/Home/SmallGraph.tsx index c5484fcba4..ba5b9cd44e 100644 --- a/packages/apps/dashboard/client/src/components/Home/SmallGraph.tsx +++ b/packages/apps/dashboard/client/src/components/Home/SmallGraph.tsx @@ -1,5 +1,6 @@ import { Fragment } from 'react'; +import { useTheme } from '@mui/material'; import Box from '@mui/material/Box'; import Card from '@mui/material/Card'; import Stack from '@mui/material/Stack'; @@ -15,7 +16,6 @@ import { TooltipProps, } from 'recharts'; -import { colorPalette } from '@/assets/styles/color-palette'; import ToggleButtons from '@/components/DataEntry/ToggleButtons'; import { formatDate } from '@/helpers/formatDate'; import { formatNumber } from '@/helpers/formatNumber'; @@ -30,14 +30,15 @@ const CustomSmallChartTooltip = ({ {payload?.map((elem) => ( - + {formatDate(elem.payload.date, 'MMMM DD, YYYY')} @@ -67,7 +68,6 @@ const GraphSettings = ({ title }: { title: string }) => ( alignItems="center" mt={{ xs: 1.5, md: 0 }} mb={{ xs: 0, md: 2 }} - mr={{ xs: 0, md: 4 }} gap={2} flexWrap="wrap" > @@ -80,6 +80,7 @@ const GraphSettings = ({ title }: { title: string }) => ( const SmallGraph = ({ title, graphData }: SmallGraphProps) => { const isMobile = useIsMobile(); + const theme = useTheme(); return ( <> @@ -107,7 +108,7 @@ const SmallGraph = ({ title, graphData }: SmallGraphProps) => { axisLine={false} interval="preserveStartEnd" dataKey="date" - stroke={colorPalette.fog.main} + stroke={theme.palette.fog.main} tickFormatter={(value) => formatDate(value, 'DD MMMM')} tick={{ dy: 10 }} tickSize={0} @@ -121,11 +122,11 @@ const SmallGraph = ({ title, graphData }: SmallGraphProps) => { dataKey="value" tick={{ dx: -10 }} tickSize={0} - stroke={colorPalette.fog.main} + stroke={theme.palette.fog.main} tickFormatter={formatNumber} /> @@ -133,7 +134,7 @@ const SmallGraph = ({ title, graphData }: SmallGraphProps) => { diff --git a/packages/apps/dashboard/client/src/components/Icons/DarkModeIcon.tsx b/packages/apps/dashboard/client/src/components/Icons/DarkModeIcon.tsx new file mode 100644 index 0000000000..8dcd939273 --- /dev/null +++ b/packages/apps/dashboard/client/src/components/Icons/DarkModeIcon.tsx @@ -0,0 +1,14 @@ +import { FC } from 'react'; + +import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon'; + +export const DarkModeIcon: FC = (props) => { + return ( + + + + ); +}; diff --git a/packages/apps/dashboard/client/src/components/Icons/LightModeIcon.tsx b/packages/apps/dashboard/client/src/components/Icons/LightModeIcon.tsx new file mode 100644 index 0000000000..eae0b2bd2e --- /dev/null +++ b/packages/apps/dashboard/client/src/components/Icons/LightModeIcon.tsx @@ -0,0 +1,14 @@ +import { FC } from 'react'; + +import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon'; + +export const LightModeIcon: FC = (props) => { + return ( + + + + ); +}; diff --git a/packages/apps/dashboard/client/src/components/SearchBar/SearchBar.styles.ts b/packages/apps/dashboard/client/src/components/SearchBar/SearchBar.styles.ts index 3812d346f4..b9555739e1 100644 --- a/packages/apps/dashboard/client/src/components/SearchBar/SearchBar.styles.ts +++ b/packages/apps/dashboard/client/src/components/SearchBar/SearchBar.styles.ts @@ -1,4 +1,4 @@ -import { colorPalette } from '@/assets/styles/color-palette'; +import { Theme } from '@mui/material/styles'; export const endAdornmentInputAdornmentSx = { display: 'flex', @@ -7,11 +7,11 @@ export const endAdornmentInputAdornmentSx = { gap: '0.7rem', }; -export const startAdornmentInputAdornmentSx = { +export const startAdornmentInputAdornmentSx = (theme: Theme) => ({ height: '100%', - backgroundColor: `${colorPalette.white}`, + backgroundColor: theme.palette.white.contrastText, marginLeft: '1rem', -}; +}); export const gridSx = { display: 'flex', @@ -22,8 +22,8 @@ export const gridSx = { overflow: 'hidden', }; -export const muiSelectSx = () => ({ - backgroundColor: `${colorPalette.white}`, +export const muiSelectSx = (theme: Theme) => ({ + backgroundColor: theme.palette.white.contrastText, width: 'unset', fontSize: '16px', boxShadow: 'none', @@ -35,7 +35,7 @@ export const muiSelectSx = () => ({ '& .MuiSelect-select': { padding: 0, paddingRight: '24px', - backgroundColor: `${colorPalette.white}`, + backgroundColor: theme.palette.white.contrastText, border: 0, }, }); @@ -46,15 +46,18 @@ export const menuItemSx = (isSelected: boolean) => ({ backgroundColor: isSelected ? 'rgba(50, 10, 141, 0.08)' : 'inherit', }); -export const muiTextFieldInputPropsSx = (borderColor: string) => ({ +export const muiTextFieldInputPropsSx = ( + theme: Theme, + borderColor: string +) => ({ width: '100%', height: '100%', borderRadius: '10px', border: `1px solid ${borderColor}`, - backgroundColor: `${colorPalette.white}`, + backgroundColor: theme.palette.white.contrastText, fontSize: 'inherit', 'input::placeholder': { - color: `${colorPalette.sky.main}`, + color: theme.palette.sky.main, opacity: 1, }, padding: '0 5px', diff --git a/packages/apps/dashboard/client/src/components/SearchBar/SearchBar.tsx b/packages/apps/dashboard/client/src/components/SearchBar/SearchBar.tsx index b9d0fb2881..c8f5f325e6 100644 --- a/packages/apps/dashboard/client/src/components/SearchBar/SearchBar.tsx +++ b/packages/apps/dashboard/client/src/components/SearchBar/SearchBar.tsx @@ -10,14 +10,14 @@ import { Grid, MenuItem, Box, - Tooltip, CircularProgress, + useTheme, } from '@mui/material'; import IconButton from '@mui/material/IconButton'; import clsx from 'clsx'; import { useNavigate } from 'react-router-dom'; -import { colorPalette } from '@/assets/styles/color-palette'; +import CustomTooltip from '@/components/CustomTooltip'; import { NetworkIcon } from '@/components/NetworkIcon'; import { useIsMobile } from '@/utils/hooks/use-breakpoints'; import { useFilteredNetworks } from '@/utils/hooks/use-filtered-networks'; @@ -51,6 +51,7 @@ const SearchBar: FC = ({ const [inputValue, setInputValue] = useState(initialInputValue); const [error, setError] = useState(null); const [focus, setFocus] = useState(false); + const theme = useTheme(); useEffect(() => { setInputValue(filterParams.address); @@ -142,17 +143,18 @@ const SearchBar: FC = ({ sx={muiTextFieldSx(isMobile)} InputProps={{ sx: muiTextFieldInputPropsSx( - focus ? colorPalette.secondary.main : colorPalette.skyOpacity + theme, + focus ? theme.palette.secondary.main : theme.palette.sky.dark ), startAdornment: ( value={filterParams.chainId} displayEmpty - sx={muiSelectSx()} + sx={muiSelectSx(theme)} onChange={handleSelectChange} renderValue={() => filterParams.chainId === -1 @@ -180,30 +182,31 @@ const SearchBar: FC = ({ - + - + ), }} diff --git a/packages/apps/dashboard/client/src/components/SearchResults/AbbreviateClipboard.tsx b/packages/apps/dashboard/client/src/components/SearchResults/AbbreviateClipboard.tsx index e158a4bd15..599916f2a0 100644 --- a/packages/apps/dashboard/client/src/components/SearchResults/AbbreviateClipboard.tsx +++ b/packages/apps/dashboard/client/src/components/SearchResults/AbbreviateClipboard.tsx @@ -7,7 +7,6 @@ import Stack from '@mui/material/Stack'; import Typography from '@mui/material/Typography'; import { useNavigate } from 'react-router-dom'; -import { colorPalette } from '@/assets/styles/color-palette'; import CustomTooltip from '@/components/CustomTooltip'; import abbreviateValue from '@/helpers/abbreviateValue'; @@ -24,7 +23,7 @@ const AbbreviateClipboard = ({ value, link }: AbbreviateClipboardProps) => { sx={{ whiteSpace: 'nowrap', textDecoration: 'inherit', - color: colorPalette.link, + color: 'link.main', }} > {link ? ( @@ -72,7 +71,7 @@ const AbbreviateClipboard = ({ value, link }: AbbreviateClipboardProps) => { diff --git a/packages/apps/dashboard/client/src/components/ThemeModeSwitch/index.tsx b/packages/apps/dashboard/client/src/components/ThemeModeSwitch/index.tsx new file mode 100644 index 0000000000..ebcaaab1f0 --- /dev/null +++ b/packages/apps/dashboard/client/src/components/ThemeModeSwitch/index.tsx @@ -0,0 +1,18 @@ +import { FC } from 'react'; + +import { IconButton, useTheme } from '@mui/material'; + +import { DarkModeIcon } from '@/components/Icons/DarkModeIcon'; +import { LightModeIcon } from '@/components/Icons/LightModeIcon'; + +const ThemeModeSwitch: FC = () => { + const { isDarkMode, toggleColorMode } = useTheme(); + + return ( + + {isDarkMode ? : } + + ); +}; + +export default ThemeModeSwitch; diff --git a/packages/apps/dashboard/client/src/features/Leaderboard/components/DataGridWrapper.tsx b/packages/apps/dashboard/client/src/features/Leaderboard/components/DataGridWrapper.tsx index 741f506a9b..16ce2f550d 100644 --- a/packages/apps/dashboard/client/src/features/Leaderboard/components/DataGridWrapper.tsx +++ b/packages/apps/dashboard/client/src/features/Leaderboard/components/DataGridWrapper.tsx @@ -1,7 +1,6 @@ import { Box, Typography } from '@mui/material'; import { DataGrid } from '@mui/x-data-grid'; -import { colorPalette } from '@/assets/styles/color-palette'; import Loader from '@/components/Loader'; import { LeaderBoardData } from '@/services/api/use-leaderboard-details'; import { handleErrorMessage } from '@/services/handle-error-message'; @@ -89,7 +88,7 @@ export const DataGridWrapper = ({ p: 2, overflow: 'visible !important', textTransform: 'uppercase', - bgcolor: colorPalette.whiteSolid, + bgcolor: 'white.light', }, '& .MuiDataGrid-row--borderBottom .MuiDataGrid-withBorderColor': { borderColor: 'transparent', diff --git a/packages/apps/dashboard/client/src/features/Leaderboard/index.tsx b/packages/apps/dashboard/client/src/features/Leaderboard/index.tsx index 8ed529d23c..75e42c0460 100644 --- a/packages/apps/dashboard/client/src/features/Leaderboard/index.tsx +++ b/packages/apps/dashboard/client/src/features/Leaderboard/index.tsx @@ -2,10 +2,8 @@ import { FC } from 'react'; import Box from '@mui/material/Box'; import Button from '@mui/material/Button'; -import Typography from '@mui/material/Typography'; import { useNavigate } from 'react-router-dom'; -import { colorPalette } from '@/assets/styles/color-palette'; import { LeaderBoardData } from '@/services/api/use-leaderboard-details'; import { DataGridWrapper } from './components/DataGridWrapper'; @@ -38,29 +36,23 @@ export const Leaderboard: FC = ({ padding="10px" mb={2.5} width="270px" - bgcolor={colorPalette.whiteSolid} + bgcolor="white.light" > {viewAllBanner ? ( ) : null} diff --git a/packages/apps/dashboard/client/src/main.tsx b/packages/apps/dashboard/client/src/main.tsx index f3a7cc1a93..0474e89a76 100644 --- a/packages/apps/dashboard/client/src/main.tsx +++ b/packages/apps/dashboard/client/src/main.tsx @@ -1,13 +1,11 @@ import React from 'react'; -import CssBaseline from '@mui/material/CssBaseline'; -import { ThemeProvider } from '@mui/material/styles'; import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import ReactDOM from 'react-dom/client'; -import App from './App'; -import theme from './theme'; +import ThemeProvider from '@/providers/ThemeProvider'; +import App from './App'; import '@/assets/styles/main.scss'; import 'simplebar-react/dist/simplebar.min.css'; @@ -19,8 +17,7 @@ const queryClient = new QueryClient({ }); ReactDOM.createRoot(document.getElementById('root')!).render( - - + diff --git a/packages/apps/dashboard/client/src/pages/Home/Home.tsx b/packages/apps/dashboard/client/src/pages/Home/Home.tsx index c595560a32..5b60eae7b8 100644 --- a/packages/apps/dashboard/client/src/pages/Home/Home.tsx +++ b/packages/apps/dashboard/client/src/pages/Home/Home.tsx @@ -67,7 +67,7 @@ const Home: FC = () => { return ( - + All HUMAN activity. In one place. diff --git a/packages/apps/dashboard/client/src/pages/SearchResults/EscrowAddress/EscrowAddress.tsx b/packages/apps/dashboard/client/src/pages/SearchResults/EscrowAddress/EscrowAddress.tsx index 922a2c92a5..73c77b5a1f 100644 --- a/packages/apps/dashboard/client/src/pages/SearchResults/EscrowAddress/EscrowAddress.tsx +++ b/packages/apps/dashboard/client/src/pages/SearchResults/EscrowAddress/EscrowAddress.tsx @@ -1,4 +1,4 @@ -import Box from '@mui/material/Box'; +import Chip from '@mui/material/Chip'; import Stack from '@mui/material/Stack'; import Typography from '@mui/material/Typography'; @@ -8,7 +8,6 @@ import { AddressDetailsEscrowSchema } from '@/services/api/use-address-details'; import HmtBalance from '../HmtBalance'; - const EscrowAddress = ({ data: { token, @@ -70,18 +69,7 @@ const EscrowAddress = ({ - - - {status} - - + = { - High: { - title: 'High', - colors: { - title: colorPalette.success.main, - border: colorPalette.success.light, +export const ReputationScore = ({ reputation }: Props) => { + const theme = useTheme(); + + const reputationAttributes: Record = { + High: { + title: 'High', + colors: { + title: theme.palette.success.main, + border: theme.palette.success.light, + }, }, - }, - Medium: { - title: 'Medium', - colors: { - title: colorPalette.warning.main, - border: colorPalette.warning.light, + Medium: { + title: 'Medium', + colors: { + title: theme.palette.warning.main, + border: theme.palette.warning.light, + }, }, - }, - Low: { - title: 'Low', - colors: { - title: colorPalette.orange.main, - border: colorPalette.orange.light, + Low: { + title: 'Low', + colors: { + title: theme.palette.orange.main, + border: theme.palette.orange.light, + }, }, - }, - Unknown: { - title: 'Coming soon', - colors: { - title: colorPalette.ocean.main, - border: colorPalette.ocean.light, + Unknown: { + title: 'Coming soon', + colors: { + title: theme.palette.ocean.main, + border: theme.palette.ocean.light, + }, }, - }, -}; + }; -const ReputationScore: FC = ({ reputation }) => { const colors = reputationAttributes[reputation].colors; + return ( - - - {reputationAttributes[reputation].title} - - + ); }; diff --git a/packages/apps/dashboard/client/src/pages/SearchResults/RoleDetails/RoleDetails.tsx b/packages/apps/dashboard/client/src/pages/SearchResults/RoleDetails/RoleDetails.tsx index 3dc0530a4a..cb2d6edd12 100644 --- a/packages/apps/dashboard/client/src/pages/SearchResults/RoleDetails/RoleDetails.tsx +++ b/packages/apps/dashboard/client/src/pages/SearchResults/RoleDetails/RoleDetails.tsx @@ -11,7 +11,6 @@ import ExchangeOracleIcon from '@/assets/icons/exchange-oracle.svg'; import JobLauncherIcon from '@/assets/icons/job-launcher.svg'; import RecordingOracleIcon from '@/assets/icons/recording-oracle.svg'; import ReputationOracleIcon from '@/assets/icons/reputation-oracle.svg'; -import { colorPalette } from '@/assets/styles/color-palette'; import TitleSectionWrapper from '@/components/SearchResults/TitleSectionWrapper'; import SectionWrapper from '@/components/SectionWrapper'; import { env } from '@/helpers/env'; @@ -24,7 +23,6 @@ import KVStore from '../KVStore'; import ReputationScore from '../ReputationScore'; import StakeInfo from '../StakeInfo'; - interface RoleInfoProps { title: string; points: string[]; @@ -141,26 +139,21 @@ const RoleDetails = ({ data }: { data: AddressDetailsOperator }) => { Overview - {env.VITE_HUMANPROTOCOL_CORE_ARCHITECTURE ? ( - - - HUMAN Protocol core architecture - - - ) : null} + sx={{ + bgcolor: 'overlay', + color: 'ocean.main', + cursor: 'pointer', + width: 'fit-content', + }} + /> + )} diff --git a/packages/apps/dashboard/client/src/pages/SearchResults/SearchResults.tsx b/packages/apps/dashboard/client/src/pages/SearchResults/SearchResults.tsx index 707cdf8870..14ab19de83 100644 --- a/packages/apps/dashboard/client/src/pages/SearchResults/SearchResults.tsx +++ b/packages/apps/dashboard/client/src/pages/SearchResults/SearchResults.tsx @@ -175,7 +175,7 @@ const SearchResults = () => { return ( - + {paramsStatus === ParamsStatus.LOADING && ( )} diff --git a/packages/apps/dashboard/client/src/pages/SearchResults/WalletAddress/WalletAddressTransactions/cells/TransactionTableCellMethod.tsx b/packages/apps/dashboard/client/src/pages/SearchResults/WalletAddress/WalletAddressTransactions/cells/TransactionTableCellMethod.tsx index fa4c0fb96f..e2e39fb818 100644 --- a/packages/apps/dashboard/client/src/pages/SearchResults/WalletAddress/WalletAddressTransactions/cells/TransactionTableCellMethod.tsx +++ b/packages/apps/dashboard/client/src/pages/SearchResults/WalletAddress/WalletAddressTransactions/cells/TransactionTableCellMethod.tsx @@ -1,7 +1,15 @@ import Box from '@mui/material/Box/Box'; +import { useTheme } from '@mui/material/styles'; import Typography from '@mui/material/Typography'; -import { colorPalette } from '@/assets/styles/color-palette'; +type PaletteColorKey = + | 'primary' + | 'secondary' + | 'error' + | 'warning' + | 'info' + | 'success'; +type PaletteShadeKey = 'main' | 'light' | 'dark'; const methodAttributes: Record< string, @@ -9,64 +17,73 @@ const methodAttributes: Record< > = { withdraw: { color: { - text: colorPalette.error.main, - border: colorPalette.error.light, + text: 'error.main', + border: 'error.light', }, }, cancel: { color: { - text: colorPalette.error.main, - border: colorPalette.error.light, + text: 'error.main', + border: 'error.light', }, }, stake: { color: { - text: colorPalette.success.main, - border: colorPalette.success.light, + text: 'success.main', + border: 'success.light', }, }, unstake: { color: { - text: colorPalette.error.main, - border: colorPalette.error.light, + text: 'error.main', + border: 'error.light', }, }, slash: { color: { - text: colorPalette.error.main, - border: colorPalette.error.light, + text: 'error.main', + border: 'error.light', }, }, stakeWithdrawn: { color: { - text: colorPalette.error.main, - border: colorPalette.error.light, + text: 'error.main', + border: 'error.light', }, }, withdrawFees: { color: { - text: colorPalette.error.main, - border: colorPalette.error.light, + text: 'error.main', + border: 'error.light', }, }, approve: { color: { - text: colorPalette.warning.main, - border: colorPalette.warning.light, + text: 'warning.main', + border: 'warning.light', }, }, complete: { color: { - text: colorPalette.success.main, - border: colorPalette.success.light, + text: 'success.main', + border: 'success.light', }, }, }; export const TransactionTableCellMethod = ({ method }: { method: string }) => { + const theme = useTheme(); const currentStatusColors = methodAttributes[method]?.color || { - text: colorPalette.primary.main, - border: colorPalette.primary.light, + text: 'primary.main', + border: 'primary.light', + }; + + const getColorFromTheme = (colorString: string) => { + const [color, shade] = colorString.split('.') as [ + PaletteColorKey, + PaletteShadeKey, + ]; + return theme.palette[color][shade]; }; return ( @@ -75,9 +92,12 @@ export const TransactionTableCellMethod = ({ method }: { method: string }) => { px={1.5} py={1} borderRadius={8} - border={`1px solid ${currentStatusColors.border}`} + border={`1px solid ${getColorFromTheme(currentStatusColors.border)}`} > - + {method} diff --git a/packages/apps/dashboard/client/src/pages/SearchResults/WalletAddress/WalletAddressTransactions/tableComponents/TransactionsTableBody.tsx b/packages/apps/dashboard/client/src/pages/SearchResults/WalletAddress/WalletAddressTransactions/tableComponents/TransactionsTableBody.tsx index d18d563748..cd1c80535a 100644 --- a/packages/apps/dashboard/client/src/pages/SearchResults/WalletAddress/WalletAddressTransactions/tableComponents/TransactionsTableBody.tsx +++ b/packages/apps/dashboard/client/src/pages/SearchResults/WalletAddress/WalletAddressTransactions/tableComponents/TransactionsTableBody.tsx @@ -10,7 +10,6 @@ import MuiTableBody from '@mui/material/TableBody'; import TableCell from '@mui/material/TableCell'; import TableRow from '@mui/material/TableRow'; -import { colorPalette } from '@/assets/styles/color-palette'; import AbbreviateClipboard from '@/components/SearchResults/AbbreviateClipboard'; import { TransactionTableCellMethod } from '@/pages/SearchResults/WalletAddress/WalletAddressTransactions/cells/TransactionTableCellMethod'; import { TransactionTableCellValue } from '@/pages/SearchResults/WalletAddress/WalletAddressTransactions/cells/TransactionTableCellValue'; @@ -81,8 +80,8 @@ export const TransactionsTableBody: React.FC = () => { key={idx} sx={{ backgroundColor: expandedRows[idx] - ? colorPalette.table.selected - : colorPalette.table.main, + ? 'table.selected' + : 'table.main', }} > @@ -128,7 +127,7 @@ export const TransactionsTableBody: React.FC = () => { { - Transaction Hash + Transaction Hash - Method + Method - - From - - - To - + From + To - Block + Block - Value + Value diff --git a/packages/apps/dashboard/client/src/providers/ThemeProvider.tsx b/packages/apps/dashboard/client/src/providers/ThemeProvider.tsx new file mode 100644 index 0000000000..41b3005a65 --- /dev/null +++ b/packages/apps/dashboard/client/src/providers/ThemeProvider.tsx @@ -0,0 +1,74 @@ +import { + FC, + PropsWithChildren, + useCallback, + useEffect, + useMemo, + useState, +} from 'react'; + +import { + CssBaseline, + PaletteMode, + ThemeProvider as MuiThemeProvider, +} from '@mui/material'; + +import { createAppTheme } from '../theme'; + +const THEME_STORAGE_KEY = 'dashboard-app-theme-mode'; +const RELEASE_DARK_MODE = false; // TODO: remove this once we release the dark mode + +const ThemeProvider: FC = ({ children }) => { + const [mode, setMode] = useState(() => { + if (!RELEASE_DARK_MODE) return 'light'; + + const savedMode = localStorage.getItem(THEME_STORAGE_KEY) as PaletteMode; + if (savedMode) return savedMode; + + if ( + window.matchMedia && + window.matchMedia('(prefers-color-scheme: dark)').matches + ) { + return 'dark'; + } + return 'light'; + }); + + useEffect(() => { + const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)'); + const handleChange = (e: MediaQueryListEvent) => { + setMode(e.matches ? 'dark' : 'light'); + }; + + mediaQuery.addEventListener('change', handleChange); + return () => mediaQuery.removeEventListener('change', handleChange); + }, []); + + useEffect(() => { + localStorage.setItem(THEME_STORAGE_KEY, mode); + }, [mode]); + + const toggleColorMode = useCallback(() => { + setMode((prevMode) => (prevMode === 'light' ? 'dark' : 'light')); + }, []); + + const theme = useMemo(() => createAppTheme(mode), [mode]); + + const extendedTheme = useMemo( + () => ({ + ...theme, + isDarkMode: mode === 'dark', + toggleColorMode, + }), + [theme, mode, toggleColorMode] + ); + + return ( + + + {children} + + ); +}; + +export default ThemeProvider; diff --git a/packages/apps/dashboard/client/src/theme.tsx b/packages/apps/dashboard/client/src/theme.tsx index 33447e4e9c..55d021e695 100644 --- a/packages/apps/dashboard/client/src/theme.tsx +++ b/packages/apps/dashboard/client/src/theme.tsx @@ -1,58 +1,71 @@ import { CSSProperties } from 'react'; -import { Shadows, ThemeOptions } from '@mui/material'; +import { Shadows } from '@mui/material'; import { createTheme } from '@mui/material/styles'; import { PaletteColorOptions, PaletteColor, } from '@mui/material/styles/createPalette'; -import { colorPalette } from '@/assets/styles/color-palette'; - - declare module '@mui/material/Typography' { interface TypographyPropsVariantOverrides { - ['Button Small']: true; - ['Button Large']: true; - ['Chip']: true; - ['Table Header']: true; - ['Tooltip']: true; - ['H6-Mobile']: true; + tooltip: true; body3: true; } } declare module '@mui/material/styles' { + interface Theme { + toggleColorMode: () => void; + isDarkMode: boolean; + } + interface ThemeOptions { + toggleColorMode?: () => void; + isDarkMode?: boolean; + } interface TypographyVariants { - ['Button Small']: CSSProperties; - ['Button Large']: CSSProperties; - ['Chip']: CSSProperties; - ['Table Header']: CSSProperties; - ['Tooltip']: CSSProperties; - ['H6-Mobile']: CSSProperties; + tooltip: CSSProperties; body3: CSSProperties; } - - // allow configuration using `createTheme` interface TypographyVariantsOptions { - ['Button Small']?: CSSProperties; - ['Button Large']?: CSSProperties; - ['Chip']?: CSSProperties; - ['Table Header']?: CSSProperties; - ['Tooltip']?: CSSProperties; - ['H6-Mobile']: CSSProperties; + tooltip?: CSSProperties; body3?: CSSProperties; } -} - -declare module '@mui/material/styles' { interface Palette { sky: PaletteColor; white: PaletteColor; + fog: PaletteColor; + ocean: PaletteColor; + orange: PaletteColor; + overlay: string; + link: { + main: string; + hover: string; + visited: string; + }; + table: { + main: string; + selected: string; + secondary: string; + }; } interface PaletteOptions { sky?: PaletteColorOptions; white?: PaletteColorOptions; + fog?: PaletteColorOptions; + ocean?: PaletteColorOptions; + orange?: PaletteColorOptions; + overlay?: string; + link?: { + main: string; + hover: string; + visited: string; + }; + table?: { + main: string; + selected: string; + secondary: string; + }; } } @@ -60,6 +73,7 @@ declare module '@mui/material/Button' { interface ButtonPropsColorOverrides { sky: true; white: true; + fog: true; } } @@ -67,6 +81,7 @@ declare module '@mui/material/IconButton' { interface IconButtonPropsColorOverrides { sky: true; white: true; + fog: true; } } @@ -74,305 +89,430 @@ declare module '@mui/material/SvgIcon' { interface SvgIconPropsColorOverrides { sky: true; white: true; + fog: true; } } -const theme: ThemeOptions = createTheme({ - palette: { - primary: { - main: colorPalette.primary.main, - light: colorPalette.primary.light, - }, - info: { - main: colorPalette.info.main, - light: colorPalette.info.light, - dark: colorPalette.info.dark, - }, - secondary: { - main: colorPalette.secondary.main, - light: colorPalette.secondary.light, - }, - text: { - primary: colorPalette.primary.main, - secondary: colorPalette.fog.main, - }, - sky: { - main: colorPalette.sky.main, - light: colorPalette.sky.light, - dark: colorPalette.sky.dark, - contrastText: colorPalette.sky.contrastText, - }, - white: { - main: '#ffffff', - light: '#ffffff', - dark: '#f6f7fe', - contrastText: '#ffffff', - }, - }, - typography: { - fontFamily: 'Inter, Arial, sans-serif', - h1: { - fontSize: 32, - }, - h2: { - fontSize: 34, - fontWeight: 600, - }, - h3: { - fontSize: 24, - fontWeight: 600, - '@media (max-width:600px)': { - fontSize: 20, +export const createAppTheme = (mode: 'light' | 'dark') => { + return createTheme({ + palette: { + mode, + ...(mode === 'light' + ? { + primary: { + main: '#320a8d', + light: '#320a8d', + }, + secondary: { + main: '#6309ff', + light: '#1406B280', + dark: '#14062b', + }, + text: { + primary: '#320a8d', + secondary: '#858ec6', + }, + info: { + main: '#eeeeee', + light: '#f5f5f5', + dark: '#bdbdbd', + }, + sky: { + main: '#858ec6', + light: '#858ec6', + dark: '#dadef0cc', + contrastText: '#858ec6', + }, + white: { + main: '#ffffff', + light: '#f6f5fc', + dark: '#f6f7fe', + contrastText: '#f9faff', + }, + success: { + main: '#0ad397', + light: '#2e7d3280', + }, + warning: { + main: '#ffb300', + light: '#ffd54f', + }, + error: { + main: '#ffb300', + light: '#f20d5f', + }, + orange: { + main: '#ed6c02', + light: '#ed6c0280', + }, + ocean: { + main: '#304ffe', + light: '#8c9eff', + dark: '#03a9f4', + }, + fog: { + main: '#858ec6', + light: '#cbcfe6', + dark: '#e5e7f3', + }, + link: { + main: '#0000ee', + hover: '#1406b2', + visited: '#551a8b', + }, + table: { + main: '#ffffff01', + selected: '#1406b21f', + secondary: '#1406b20a', + }, + overlay: '#1406b20a', + } + : { + primary: { + main: '#320a8d', + light: '#320a8d', + }, + secondary: { + main: '#6309ff', + light: '#1406B280', + dark: '#14062b', + }, + text: { + primary: '#320a8d', + secondary: '#858ec6', + }, + info: { + main: '#eeeeee', + light: '#f5f5f5', + dark: '#bdbdbd', + }, + sky: { + main: '#858ec6', + light: '#858ec6', + dark: '#dadef0cc', + contrastText: '#858ec6', + }, + white: { + main: '#ffffff', + light: '#f6f5fc', + dark: '#f6f7fe', + contrastText: '#f9faff', + }, + success: { + main: '#0ad397', + light: '#2e7d3280', + }, + warning: { + main: '#ffb300', + light: '#ffd54f', + }, + error: { + main: '#ffb300', + light: '#f20d5f', + }, + orange: { + main: '#ed6c02', + light: '#ed6c0280', + }, + ocean: { + main: '#304ffe', + light: '#8c9eff', + dark: '#03a9f4', + }, + fog: { + main: '#858ec6', + light: '#cbcfe6', + dark: '#e5e7f3', + }, + link: { + main: '#0000ee', + hover: '#1406b2', + visited: '#551a8b', + }, + table: { + main: '#ffffff01', + selected: '#1406b21f', + secondary: '#1406b20a', + }, + overlay: '#1406b20a', + }), + }, + typography: { + fontFamily: 'Inter, Arial, sans-serif', + h1: { + fontSize: 32, }, - }, - h4: { - fontSize: 20, - fontWeight: 500, - }, - h5: { - fontSize: 18, - fontWeight: 600, - }, - h6: { - fontSize: 20, - fontWeight: 500, - }, - 'H6-Mobile': { - fontSize: '20px', - fontWeight: 500, - lineHeight: '32px', - letterSpacing: '0.15px', - textAlign: 'left', - }, - body1: { - fontSize: 16, - fontWeight: 400, - }, - body2: { - fontSize: 14, - fontWeight: 500, - }, - body3: { - fontSize: '12px', - fontWeight: 400, - lineHeight: '19.92px', - letterSpacing: '0.4px', - textAlign: 'left', - }, - 'Button Small': { - fontSize: '13px', - fontWeight: 600, - lineHeight: '22px', - letterSpacing: '0.1px', - textAlign: 'left', - }, - 'Button Large': { - fontSize: '15px', - fontWeight: 600, - lineHeight: '26px', - letterSpacing: '0.1px', - textAlign: 'left', - }, - Chip: { - fontSize: '13px', - fontWeight: 400, - lineHeight: '18px', - letterSpacing: '0.16px', - textAlign: 'left', - }, - 'Table Header': { - fontFamily: 'Roboto', - fontSize: '14px', - fontWeight: 500, - lineHeight: '24px', - letterSpacing: '0.17px', - textAlign: 'left', - }, - Tooltip: { - fontSize: 10, - fontWeight: 500, - lineHeight: '14px', - }, - subtitle1: { - fontSize: 12, - }, - subtitle2: { - fontSize: 14, - fontWeight: 600, - lineHeight: '21.9px', - }, - caption: { - fontSize: 12, - fontWeight: 400, - lineHeight: 5 / 3, - letterSpacing: 0.4, - }, - }, - shadows: [ - ...createTheme({}).shadows.map((shadow, i) => { - if (i === 2) { - return '0px 3px 1px -2px #e9ebfa, 0px 2px 2px 0px rgba(233, 235, 250, 0.50), 0px 1px 5px 0px rgba(233, 235, 250, 0.20)'; - } - return shadow; - }), - ] as Shadows, - components: { - MuiButton: { - styleOverrides: { - root: { - fontWeight: 600, - textTransform: 'none', - }, + h2: { + fontSize: 34, + fontWeight: 600, }, - }, - MuiToolbar: { - styleOverrides: { - root: { - '@media (min-width:1280px)': { - paddingX: 56, - }, + h3: { + fontSize: 24, + fontWeight: 600, + lineHeight: '150%', + '@media (max-width:900px)': { + fontSize: 20, + fontWeight: 500, + lineHeight: '160%', + letterSpacing: '0.15px', }, }, - }, - MuiTooltip: { - styleOverrides: { - tooltip: { - backgroundColor: colorPalette.secondary.main, - color: colorPalette.whiteSolid, - }, - arrow: { - color: colorPalette.secondary.main, - }, + h4: { + fontSize: 20, + fontWeight: 500, }, - }, - MuiIconButton: { - styleOverrides: { - sizeMedium: { - color: colorPalette.primary.main, - }, + h5: { + fontSize: 18, + fontWeight: 600, + lineHeight: '160%', + letterSpacing: '0.15px', + }, + h6: { + fontSize: 20, + fontWeight: 500, + }, + body1: { + fontSize: 16, + fontWeight: 400, + lineHeight: '150%', + letterSpacing: '0.15px', + }, + body2: { + fontSize: 14, + fontWeight: 400, + lineHeight: '20px', + letterSpacing: '0.17px', + }, + body3: { + fontSize: '12px', + fontWeight: 400, + lineHeight: '19.92px', + letterSpacing: '0.4px', + }, + subtitle1: { + fontSize: 16, + fontWeight: 400, + lineHeight: '175%', + letterSpacing: '0.15px', + }, + subtitle2: { + fontSize: 14, + fontWeight: 600, + lineHeight: '21.9px', + letterSpacing: '0.1px', + }, + caption: { + fontSize: 12, + fontWeight: 400, + lineHeight: 5 / 3, + letterSpacing: 0.4, + }, + tooltip: { + fontSize: 10, + fontWeight: 500, + lineHeight: '14px', }, }, - MuiSelect: { - styleOverrides: { - root: { - borderRadius: 4, - borderWidth: 2, - color: colorPalette.primary.main, - '& .MuiOutlinedInput-notchedOutline': { - borderColor: colorPalette.primary.main, - borderWidth: 2, + shadows: [ + ...createTheme({}).shadows.map((shadow, i) => { + if (i === 2) { + return '0px 3px 1px -2px #e9ebfa, 0px 2px 2px 0px rgba(233, 235, 250, 0.50), 0px 1px 5px 0px rgba(233, 235, 250, 0.20)'; + } + return shadow; + }), + ] as Shadows, + components: { + MuiButton: { + styleOverrides: { + root: { + fontWeight: 600, + letterSpacing: '0.1px', + textTransform: 'none', }, - '&:hover .MuiOutlinedInput-notchedOutline': { - borderColor: colorPalette.primary.main, + sizeSmall: { + padding: '4px 10px', + fontSize: '13px', + lineHeight: '22px', }, - '&.Mui-focused .MuiOutlinedInput-notchedOutline': { - borderColor: colorPalette.primary.main, + sizeMedium: { + padding: '6px 16px', + fontSize: '14px', + lineHeight: '24px', }, - '& .MuiSvgIcon-root': { - color: colorPalette.primary.main, + sizeLarge: { + padding: '8px 22px', + fontSize: '15px', + lineHeight: '26px', }, }, }, - }, - MuiTypography: { - styleOverrides: { - root: { - wordBreak: 'break-word', + MuiChip: { + styleOverrides: { + root: { + padding: '4px', + borderRadius: 16, + }, + label: { + fontFamily: 'Roboto', + padding: '3px 6px', + fontSize: '13px', + lineHeight: '18px', + letterSpacing: '0.16px', + fontWeight: 400, + }, }, }, - }, - MuiOutlinedInput: { - styleOverrides: { - root: { - backgroundColor: colorPalette.white, + MuiTooltip: { + styleOverrides: { + tooltip: ({ theme }) => ({ + backgroundColor: theme.palette.secondary.main, + color: theme.palette.white.light, + }), + arrow: ({ theme }) => ({ + color: theme.palette.secondary.main, + }), }, }, - }, - MuiMenuItem: { - styleOverrides: { - root: { - '&:hover': { - backgroundColor: '#1406B207', - }, + MuiIconButton: { + styleOverrides: { + sizeMedium: ({ theme }) => ({ + color: theme.palette.primary.main, + }), }, }, - }, - MuiTablePagination: { - styleOverrides: { - toolbar: { - '@media (max-width: 440px)': { - display: 'grid', - gridTemplateColumns: '1fr 3fr 2fr', - gridTemplateRows: 'auto auto', - gridAutoFlow: 'row', - }, + MuiSelect: { + styleOverrides: { + root: ({ theme }) => ({ + borderRadius: 4, + borderWidth: 2, + color: theme.palette.primary.main, + '& .MuiOutlinedInput-notchedOutline': { + borderColor: theme.palette.primary.main, + borderWidth: 2, + }, + '&:hover .MuiOutlinedInput-notchedOutline': { + borderColor: theme.palette.primary.main, + }, + '&.Mui-focused .MuiOutlinedInput-notchedOutline': { + borderColor: theme.palette.primary.main, + }, + '& .MuiSvgIcon-root': { + color: theme.palette.primary.main, + }, + }), }, - selectLabel: { - '@media (max-width: 440px)': { - gridColumn: '2 / 3', - gridRow: '1', - whiteSpace: 'nowrap', - color: colorPalette.fog.main, - justifySelf: 'end', - marginBottom: '17px', - position: 'relative', - right: '-38px', - }, - '&:focus': { - background: 'inherit', + }, + MuiTypography: { + styleOverrides: { + root: { + wordBreak: 'break-word', }, }, - input: { - '@media (max-width: 440px)': { - gridColumn: '3 / 3', - gridRow: '1', - marginRight: '8px', - width: '48px', - justifySelf: 'flex-end', - }, + }, + MuiOutlinedInput: { + styleOverrides: { + root: ({ theme }) => ({ + backgroundColor: theme.palette.white.contrastText, + }), }, - select: { - '&:focus': { - background: 'inherit', + }, + MuiMenuItem: { + styleOverrides: { + root: { + '&:hover': { + backgroundColor: '#1406B207', + }, }, }, - displayedRows: { - '@media (max-width: 440px)': { - gridColumn: '2 / 3', - gridRow: '2', - justifySelf: 'end', - position: 'relative', - right: '-12px', + }, + MuiTableHead: { + styleOverrides: { + root: { + '& .MuiTableCell-root': { + fontFamily: 'Roboto', + fontSize: '14px', + fontWeight: 500, + lineHeight: '24px', + letterSpacing: '0.17px', + }, }, }, - actions: { - '@media (max-width: 440px)': { - gridColumn: '3 / 3', - gridRow: '2', - justifySelf: 'end', - marginLeft: 0, - minWidth: '90px', + }, + MuiTablePagination: { + styleOverrides: { + toolbar: { + '@media (max-width: 440px)': { + display: 'grid', + gridTemplateColumns: '1fr 3fr 2fr', + gridTemplateRows: 'auto auto', + gridAutoFlow: 'row', + }, }, - button: { - marginLeft: '5px', + selectLabel: ({ theme }) => ({ + '@media (max-width: 440px)': { + gridColumn: '2 / 3', + gridRow: '1', + whiteSpace: 'nowrap', + color: theme.palette.fog.main, + justifySelf: 'end', + marginBottom: '17px', + position: 'relative', + right: '-38px', + }, + '&:focus': { + background: 'inherit', + }, + }), + input: { + '@media (max-width: 440px)': { + gridColumn: '3 / 3', + gridRow: '1', + marginRight: '8px', + width: '48px', + justifySelf: 'flex-end', + }, }, - }, - }, - }, - MuiLink: { - styleOverrides: { - root: { - color: colorPalette.link, - '&:hover': { - color: `${colorPalette.linkHover}!important`, + select: { + '&:focus': { + background: 'inherit', + }, }, - '&:visited': { - color: colorPalette.linkVisited, + displayedRows: { + '@media (max-width: 440px)': { + gridColumn: '2 / 3', + gridRow: '2', + justifySelf: 'end', + position: 'relative', + right: '-12px', + }, }, + actions: { + '@media (max-width: 440px)': { + gridColumn: '3 / 3', + gridRow: '2', + justifySelf: 'end', + marginLeft: 0, + minWidth: '90px', + }, + button: { + marginLeft: '5px', + }, + }, + }, + }, + MuiLink: { + styleOverrides: { + root: ({ theme }) => ({ + color: theme.palette.link.main, + '&:hover': { + color: theme.palette.link.hover, + }, + '&:visited': { + color: theme.palette.link.visited, + }, + }), }, }, }, - }, -}); - -export default theme; + }); +};