Merge pull request #1489 from nymtech/332-fix-vesting-ui

Wallet: Fixing dark mode colours in vesting shedule

nym-wallet/src/pages/balance/components/vesting-timeline.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable react/no-array-index-key */
 import React, { useContext } from 'react';
+import { useTheme } from '@mui/material/styles';
 import { Box, Tooltip, Typography } from '@mui/material';
 import { format } from 'date-fns';
 import { AppContext } from '../../../context/main';
@@ -21,6 +22,9 @@ export const VestingTimeline: React.FC<{ percentageComplete: number }> = ({ perc
     userBalance: { currentVestingPeriod, vestingAccountInfo },
   } = useContext(AppContext);
 
+  const theme = useTheme();
+  const { mode } = theme.palette;
+
   const nextPeriod =
     typeof currentVestingPeriod === 'object' && !!vestingAccountInfo?.periods
       ? Number(vestingAccountInfo?.periods[currentVestingPeriod.In + 1]?.start_time)
@@ -29,19 +33,31 @@ export const VestingTimeline: React.FC<{ percentageComplete: number }> = ({ perc
   return (
     <Box display="flex" flexDirection="column" gap={1} position="relative" width="100%">
       <svg width="100%" height="12">
-        <rect y="2" width="100%" height="6" rx="0" fill="#E6E6E6" />
-        <rect y="2" width={`${percentageComplete}%`} height="6" rx="0" fill="#121726" />
+        <rect y="2" width="100%" height="6" rx="0" fill="text.dark" />
+        <rect
+          y="2"
+          width={`${percentageComplete}%`}
+          height="6"
+          rx="0"
+          fill={mode === 'light' ? 'text.dark' : theme.palette.success.main}
+        />
         {vestingAccountInfo?.periods.map((period, i, arr) => (
           <Marker
             position={`${calculateMarkerPosition(arr.length, i)}%`}
-            color={+percentageComplete.toFixed(2) >= calculateMarkerPosition(arr.length, i) ? '#121726' : '#B9B9B9'}
+            color={
+              +percentageComplete.toFixed(2) >= calculateMarkerPosition(arr.length, i)
+                ? mode === 'light'
+                  ? 'text.dark'
+                  : theme.palette.success.main
+                : '#B9B9B9'
+            }
             tooltipText={format(new Date(Number(period.start_time) * 1000), 'HH:mm do MMM yyyy')}
             key={i}
           />
         ))}
         <Marker
           position="calc(100% - 4px)"
-          color={percentageComplete === 100 ? '#121726' : '#B9B9B9'}
+          color={percentageComplete === 100 ? (mode === 'light' ? 'text.dark' : theme.palette.success.main) : '#B9B9B9'}
           tooltipText="End of vesting schedule"
         />
       </svg>

nym-wallet/src/pages/balance/vesting.tsx

@@ -65,20 +65,44 @@ const VestingSchedule = () => {
             ))}
           </TableRow>
           <TableRow>
-            <TableCell sx={{ borderBottom: 'none', textTransform: 'uppercase' }}>
+            <TableCell
+              sx={{
+                color: (t) => (t.palette.mode === 'light' ? t.palette.nym.text.muted : 'text.primary'),
+                borderBottom: 'none',
+                textTransform: 'uppercase',
+              }}
+            >
               {userBalance.tokenAllocation?.vesting || 'n/a'} / {userBalance.originalVesting?.amount.amount}{' '}
               {clientDetails?.display_mix_denom.toUpperCase()}
             </TableCell>
-            <TableCell align="left" sx={{ borderBottom: 'none' }}>
+            <TableCell
+              align="left"
+              sx={{
+                color: (t) => (t.palette.mode === 'light' ? t.palette.nym.text.muted : 'text.primary'),
+                borderBottom: 'none',
+              }}
+            >
               {vestingPeriod(userBalance.currentVestingPeriod, userBalance.originalVesting?.number_of_periods)}
             </TableCell>
-            <TableCell sx={{ borderBottom: 'none' }}>
+            <TableCell
+              sx={{
+                color: (t) => (t.palette.mode === 'light' ? t.palette.nym.text.muted : 'text.primary'),
+                borderBottom: 'none',
+              }}
+            >
               <Box display="flex" alignItems="center" gap={1}>
                 <Typography variant="body2">{`${vestedPercentage}%`}</Typography>
                 <VestingTimeline percentageComplete={vestedPercentage} />
               </Box>
             </TableCell>
-            <TableCell sx={{ borderBottom: 'none', textTransform: 'uppercase' }} align="right">
+            <TableCell
+              sx={{
+                color: (t) => (t.palette.mode === 'light' ? t.palette.nym.text.muted : 'text.primary'),
+                borderBottom: 'none',
+                textTransform: 'uppercase',
+              }}
+              align="right"
+            >
               {userBalance.tokenAllocation?.vested || 'n/a'} / {userBalance.originalVesting?.amount.amount}{' '}
               {clientDetails?.display_mix_denom.toUpperCase()}
             </TableCell>