Skip to content

Commit 7e56787

Browse files
KirillKirillKirillKirill
authored
[Dashboard] - Refactor theme (#3382)
* refactor: replace colorPalette with theme.palette * minor fix * refactor: typography, add style overrides for Chip, Button and Table Header, minor fixes, cleanup of theme * feat: placeholder for dark mode and related features * refactor: reputation score uses chip component
1 parent 5728ddf commit 7e56787

File tree

28 files changed

+748
-642
lines changed

28 files changed

+748
-642
lines changed

‎packages/apps/dashboard/client/src/assets/styles/_const.scss‎

Lines changed: 1 addition & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,5 @@
11
$maWhite: #F6F7FE;
22
$primary: #320A8D;
33
$white: #fff;
4-
$sky: #858EC6;
5-
$skyOpacity: #DADEF0CC;
64
$secondary: #6309FF;
7-
$lilacSachet: #AEB4D9;
8-
$ghostWhite: #F9FAFF;
9-
$whiteSolid: #F6F5FC;
10-
$groundwaterOpacity: #1406B20A;
11-
$medium: #FFB300;
12-
$mediumBorder: #FFD54F;
13-
$low: #ED6C02;
14-
$lowBorder: #ED6C0280;
15-
$high: #0AD397;
16-
$highBorder: #2E7D3280;
17-
$soon: #304FFE;
18-
$soonBorder: #8C9EFF;
5+
$skyOpacity: #DADEF0CC;

‎packages/apps/dashboard/client/src/assets/styles/_search.scss‎

Lines changed: 3 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
.search, .search-white{
1+
.search {
22
position: relative;
33
width: 920px;
44
max-width: 100%;
5-
border: 1px solid #DADEF0CC;
5+
border: 1px solid;
6+
border-color: $skyOpacity;
67
border-radius: 13px;
78

8-
99
#search-bar{
1010
width: 100%;
1111
border-radius: 8px;
@@ -21,66 +21,4 @@
2121
}
2222

2323
}
24-
25-
.search-close{
26-
cursor: pointer;
27-
}
28-
29-
.search-button{
30-
background-color: $secondary;
31-
border-radius: 8px;
32-
svg{
33-
font-size: 32px;
34-
}
35-
&:hover{
36-
background-color: $primary;
37-
}
38-
}
39-
}
40-
41-
.search-results-bar {
42-
display: block;
43-
44-
}
45-
46-
.search-white{
47-
width: 500px;
48-
max-width: 25%;
49-
50-
.search-button{
51-
padding: 4px;
52-
background: #1406B214;
53-
svg{
54-
font-size: 24px;
55-
}
56-
&:hover{
57-
background-color: $secondary;
58-
svg{
59-
color: $white;
60-
}
61-
}
62-
}
63-
64-
#search-bar{
65-
padding: 8px 0;
66-
67-
}
68-
@media (max-width: 1150px) {
69-
max-width: 20%;
70-
}
71-
72-
@media (max-width: 1280px) {
73-
max-width: 100%;
74-
75-
#search-bar{
76-
padding: 12px 0;
77-
}
78-
}
79-
}
80-
81-
@media (max-width: 1280px) {
82-
83-
.search-white{
84-
padding: 8px 0;
85-
}
8624
}

‎packages/apps/dashboard/client/src/assets/styles/color-palette.ts‎

Lines changed: 0 additions & 63 deletions
This file was deleted.

‎packages/apps/dashboard/client/src/components/Charts/AreaChart.tsx‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { useEffect, useRef, useState } from 'react';
22

3-
import { Typography } from '@mui/material';
3+
import { Typography, useTheme } from '@mui/material';
44
import Card from '@mui/material/Card';
55
import Stack from '@mui/material/Stack';
66
import dayjs, { Dayjs } from 'dayjs';
@@ -14,7 +14,6 @@ import {
1414
ResponsiveContainer,
1515
} from 'recharts';
1616

17-
import { colorPalette } from '@/assets/styles/color-palette';
1817
import CustomXAxisTick from '@/components/Charts/CustomXAxisTick';
1918
import ToggleCharts from '@/components/Charts/ToggleCharts';
2019
import DatePicker from '@/components/DataEntry/DatePicker';
@@ -83,6 +82,7 @@ export const AreaChart = ({
8382
changeDateOnScroll?: boolean;
8483
}) => {
8584
const { data } = useGraphPageChartData();
85+
const theme = useTheme();
8686
const chartData = data || [];
8787
const {
8888
setFromDate,
@@ -302,14 +302,14 @@ export const AreaChart = ({
302302
tick={{ dx: -10 }}
303303
tickSize={0}
304304
axisLine={false}
305-
stroke={colorPalette.fog.main}
305+
stroke={theme.palette.fog.main}
306306
/>
307307
<CartesianGrid stroke="#ccc" strokeDasharray="5" vertical={false} />
308308
<XAxis
309309
axisLine={false}
310310
tick={<CustomXAxisTick />}
311311
height={50}
312-
stroke={colorPalette.fog.dark}
312+
stroke={theme.palette.fog.dark}
313313
tickSize={20}
314314
dataKey="date"
315315
tickMargin={10}
@@ -319,7 +319,7 @@ export const AreaChart = ({
319319
<Area
320320
type="monotone"
321321
dataKey="totalTransactionAmount"
322-
stroke={colorPalette.primary.main}
322+
stroke={theme.palette.primary.main}
323323
fillOpacity={1}
324324
fill="url(#colorTotalTransactionAmount)"
325325
/>
@@ -328,7 +328,7 @@ export const AreaChart = ({
328328
<Area
329329
type="monotone"
330330
dataKey="totalTransactionCount"
331-
stroke={colorPalette.secondary.main}
331+
stroke={theme.palette.secondary.main}
332332
fillOpacity={1}
333333
fill="url(#colorTotalTransactionCount)"
334334
/>
@@ -337,7 +337,7 @@ export const AreaChart = ({
337337
<Area
338338
type="monotone"
339339
dataKey="solved"
340-
stroke={colorPalette.ocean.dark}
340+
stroke={theme.palette.ocean.dark}
341341
fillOpacity={1}
342342
fill="url(#colorSolved)"
343343
/>
@@ -346,7 +346,7 @@ export const AreaChart = ({
346346
<Area
347347
type="monotone"
348348
dataKey="dailyUniqueReceivers"
349-
stroke={colorPalette.error.light}
349+
stroke={theme.palette.error.light}
350350
fillOpacity={1}
351351
fill="url(#colorDailyUniqueReceivers)"
352352
/>
@@ -355,7 +355,7 @@ export const AreaChart = ({
355355
<Area
356356
type="monotone"
357357
dataKey="dailyUniqueSenders"
358-
stroke={colorPalette.success.main}
358+
stroke={theme.palette.success.main}
359359
fillOpacity={1}
360360
fill="url(#colorDailyUniqueSenders)"
361361
/>
@@ -367,7 +367,7 @@ export const AreaChart = ({
367367
py: 3,
368368
mt: 3,
369369
ml: { xs: 0, xl: 6 },
370-
backgroundColor: colorPalette.overlay.light,
370+
backgroundColor: theme.palette.overlay,
371371
boxShadow: 'none',
372372
borderRadius: '16px',
373373
}}
@@ -382,31 +382,31 @@ export const AreaChart = ({
382382
isAreaChart: true,
383383
name: 'totalTransactionAmount',
384384
amount: `${Number(sum.totalTransactionAmount.toFixed())}`,
385-
color: colorPalette.primary.main,
385+
color: theme.palette.primary.main,
386386
},
387387
{
388388
title: 'Transactions Count',
389389
name: 'totalTransactionCount',
390390
amount: sum.totalTransactionCount,
391-
color: colorPalette.secondary.main,
391+
color: theme.palette.secondary.main,
392392
},
393393
{
394394
title: 'Number of Tasks',
395395
name: 'solved',
396396
amount: sum.solved,
397-
color: colorPalette.ocean.dark,
397+
color: theme.palette.ocean.dark,
398398
},
399399
{
400400
title: 'Unique Receivers',
401401
name: 'dailyUniqueReceivers',
402402
amount: sum.dailyUniqueReceivers,
403-
color: colorPalette.error.light,
403+
color: theme.palette.error.light,
404404
},
405405
{
406406
title: 'Unique Senders',
407407
name: 'dailyUniqueSenders',
408408
amount: sum.dailyUniqueSenders,
409-
color: colorPalette.success.main,
409+
color: theme.palette.success.main,
410410
},
411411
]}
412412
/>

‎packages/apps/dashboard/client/src/components/Charts/CustomChartTooltip.tsx‎

Lines changed: 5 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,9 @@ import Stack from '@mui/material/Stack';
66
import { NumericFormat } from 'react-number-format';
77
import { TooltipProps } from 'recharts';
88

9-
import { colorPalette } from '@/assets/styles/color-palette';
109
import { GraphPageChartDataConfigObject } from '@/components/Charts/AreaChart';
1110
import { formatDate } from '@/helpers/formatDate';
1211

13-
1412
const renderTitle = (title: string) => {
1513
const currentTitle: GraphPageChartDataConfigObject<string> = {
1614
totalTransactionAmount: 'Transfer Amount',
@@ -31,20 +29,13 @@ const CustomChartTooltip = ({
3129
return (
3230
<Card
3331
sx={{
34-
border: `1px solid ${colorPalette.fog.light}`,
32+
border: '1px solid',
33+
borderColor: 'fog.light',
3534
borderRadius: '10px',
3635
}}
3736
>
38-
<Box
39-
sx={{
40-
padding: '6px 10px',
41-
}}
42-
>
43-
<Typography
44-
color={colorPalette.fog.main}
45-
variant="subtitle1"
46-
fontWeight={500}
47-
>
37+
<Box p="6px 10px">
38+
<Typography variant="tooltip" color="fog.main">
4839
{formatDate(label, 'MMMM DD, YYYY')}
4940
</Typography>
5041
{payload?.map((elem) => (
@@ -64,7 +55,7 @@ const CustomChartTooltip = ({
6455
fontSize: '12px',
6556
}}
6657
/>
67-
<Typography fontWeight={500} variant="subtitle1">
58+
<Typography variant="tooltip">
6859
{renderTitle(elem.name ?? '')}
6960
</Typography>
7061
</Grid>

‎packages/apps/dashboard/client/src/components/Charts/CustomXAxisTick.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,18 @@
1+
import { useTheme } from '@mui/material';
12
// @ts-expect-error -- import error, but this type work property
23
import { ContentRenderer } from 'recharts';
34

4-
import { colorPalette } from '@/assets/styles/color-palette';
55
import { formatDate } from '@/helpers/formatDate';
66

77
const CustomXAxisTick = ({ x, y, payload }: ContentRenderer<string>) => {
8+
const theme = useTheme();
9+
810
return (
911
<g transform={`translate(${x},${y})`}>
1012
<text
1113
x={-30}
1214
y={0}
13-
fill={colorPalette.fog.main}
15+
fill={theme.palette.fog.main}
1416
transform="rotate(-35)"
1517
fontSize={10}
1618
fontWeight={500}

‎packages/apps/dashboard/client/src/components/DataEntry/DatePicker.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,6 @@ import {
1515
} from '@mui/x-date-pickers/models';
1616
import type { Dayjs } from 'dayjs';
1717

18-
import { colorPalette } from '@/assets/styles/color-palette';
19-
2018
interface CustomDateFieldProps
2119
extends UseDateFieldProps<Dayjs, false>,
2220
BaseSingleInputFieldProps<
@@ -43,7 +41,8 @@ const CustomDateField = ({
4341
aria-label={ariaLabel}
4442
onClick={() => setOpen((prevState) => !prevState)}
4543
sx={{
46-
borderBottom: `1px solid ${colorPalette.primary.main}`,
44+
borderBottom: '1px solid',
45+
borderColor: 'primary.main',
4746
lineHeight: 2.5,
4847
'&:hover': {
4948
cursor: 'pointer',

0 commit comments

Comments
 (0)