[Dashboard] - Refactor theme

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;
+$skyOpacity: #DADEF0CC;

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;
-  }
 }

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}
           />
           <CartesianGrid stroke="#ccc" strokeDasharray="5" vertical={false} />
           <XAxis
             axisLine={false}
             tick={<CustomXAxisTick />}
             height={50}
-            stroke={colorPalette.fog.dark}
+            stroke={theme.palette.fog.dark}
             tickSize={20}
             dataKey="date"
             tickMargin={10}
@@ -319,7 +319,7 @@ export const AreaChart = ({
             <Area
               type="monotone"
               dataKey="totalTransactionAmount"
-              stroke={colorPalette.primary.main}
+              stroke={theme.palette.primary.main}
               fillOpacity={1}
               fill="url(#colorTotalTransactionAmount)"
             />
@@ -328,7 +328,7 @@ export const AreaChart = ({
             <Area
               type="monotone"
               dataKey="totalTransactionCount"
-              stroke={colorPalette.secondary.main}
+              stroke={theme.palette.secondary.main}
               fillOpacity={1}
               fill="url(#colorTotalTransactionCount)"
             />
@@ -337,7 +337,7 @@ export const AreaChart = ({
             <Area
               type="monotone"
               dataKey="solved"
-              stroke={colorPalette.ocean.dark}
+              stroke={theme.palette.ocean.dark}
               fillOpacity={1}
               fill="url(#colorSolved)"
             />
@@ -346,7 +346,7 @@ export const AreaChart = ({
             <Area
               type="monotone"
               dataKey="dailyUniqueReceivers"
-              stroke={colorPalette.error.light}
+              stroke={theme.palette.error.light}
               fillOpacity={1}
               fill="url(#colorDailyUniqueReceivers)"
             />
@@ -355,7 +355,7 @@ export const AreaChart = ({
             <Area
               type="monotone"
               dataKey="dailyUniqueSenders"
-              stroke={colorPalette.success.main}
+              stroke={theme.palette.success.main}
               fillOpacity={1}
               fill="url(#colorDailyUniqueSenders)"
             />
@@ -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,
             },
           ]}
         />

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<string> = {
     totalTransactionAmount: 'Transfer Amount',
@@ -31,20 +29,13 @@ const CustomChartTooltip = ({
     return (
       <Card
         sx={{
-          border: `1px solid ${colorPalette.fog.light}`,
+          border: '1px solid',
+          borderColor: 'fog.light',
           borderRadius: '10px',
         }}
       >
-        <Box
-          sx={{
-            padding: '6px 10px',
-          }}
-        >
-          <Typography
-            color={colorPalette.fog.main}
-            variant="subtitle1"
-            fontWeight={500}
-          >
+        <Box p="6px 10px">
+          <Typography variant="tooltip" color="fog.main">
             {formatDate(label, 'MMMM DD, YYYY')}
           </Typography>
           {payload?.map((elem) => (
@@ -64,7 +55,7 @@ const CustomChartTooltip = ({
                       fontSize: '12px',
                     }}
                   />
-                  <Typography fontWeight={500} variant="subtitle1">
+                  <Typography variant="tooltip">
                     {renderTitle(elem.name ?? '')}
                   </Typography>
                 </Grid>

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<string>) => {
+  const theme = useTheme();
+
   return (
     <g transform={`translate(${x},${y})`}>
       <text
         x={-30}
         y={0}
-        fill={colorPalette.fog.main}
+        fill={theme.palette.fog.main}
         transform="rotate(-35)"
         fontSize={10}
         fontWeight={500}

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

@@ -15,8 +15,6 @@ import {
 } from '@mui/x-date-pickers/models';
 import type { Dayjs } from 'dayjs';
 
-import { colorPalette } from '@/assets/styles/color-palette';
-
 interface CustomDateFieldProps
   extends UseDateFieldProps<Dayjs, false>,
     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',