feat: rework color palette and tokens, merge into one source of truth

Author: KirillKirill

packages/apps/human-app/frontend/src/modules/governance-banner/components/governance-banner.tsx

@@ -1,9 +1,9 @@
-import AccessTimeIcon from '@mui/icons-material/AccessTime';
-import { Box, Grid, Link as MuiLink, Typography } from '@mui/material';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import AccessTimeIcon from '@mui/icons-material/AccessTime';
+import { Box, Grid, Link as MuiLink, Typography } from '@mui/material';
+
 import { env } from '@/shared/env';
-import { useColorMode } from '@/shared/contexts/color-mode';
 import { useProposalQuery } from '../hooks/use-proposal-query';
 import { formatCountdown } from '../../../shared/utils/time';
 import { type ProposalResponse } from '../services/governance.service';
@@ -20,8 +20,6 @@ function getProposalStatus(proposal: ProposalResponse): ProposalStatus {
 export function GovernanceBanner() {
   const { t } = useTranslation();
   const { data: proposal, isLoading, isError } = useProposalQuery();
-  const { colorPalette } = useColorMode();
-  const { text, background } = colorPalette.banner;
   const [timeRemaining, setTimeRemaining] = useState('00:00:00');
 
   useEffect(() => {
@@ -55,8 +53,8 @@ export function GovernanceBanner() {
       sx={{
         alignItems: { xs: 'flex-start', sm: 'center' },
         justifyContent: { xs: 'flex-start', sm: 'space-between' },
-        bgcolor: background.primary,
-        color: text.secondary,
+        bgcolor: 'primary.main',
+        color: 'common.white',
         borderRadius: '8px',
         p: 2,
         gap: 2,
@@ -75,13 +73,13 @@ export function GovernanceBanner() {
       >
         <Box sx={{ display: 'flex', alignItems: 'center' }}>
           <AccessTimeIcon sx={{ mr: 1 }} />
-          <Typography variant="body2" sx={{ color: text.secondary }}>
+          <Typography variant="body2" sx={{ color: 'common.white' }}>
             {status === 'pending'
               ? t('governance.timeToStart', 'Voting starts in')
               : t('governance.timeToReveal', 'Time to reveal vote')}
             :
           </Typography>
-          <Typography variant="body1" sx={{ ml: 1, color: text.primary }}>
+          <Typography variant="body1" sx={{ ml: 1, color: 'text.primary' }}>
             {timeRemaining}
           </Typography>
         </Box>
@@ -90,8 +88,8 @@ export function GovernanceBanner() {
             variant="body1"
             sx={{
               ml: { xs: 0, md: 8 },
-              color: text.primary,
-              bgcolor: background.secondary,
+              color: 'text.primary',
+              bgcolor: 'background.paper',
               borderRadius: '8px',
               p: '4px 8px',
             }}
@@ -114,7 +112,7 @@ export function GovernanceBanner() {
           target="_blank"
           rel="noopener noreferrer"
           sx={{
-            color: text.secondary,
+            color: 'common.white',
             fontWeight: 500,
             textDecoration: 'none',
             '&:hover': {

packages/apps/human-app/frontend/src/modules/homepage/components/logo-section.tsx

@@ -1,43 +1,34 @@
-import { Grid, Stack, Typography } from '@mui/material';
+import { Stack, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 
 export function LogoSection() {
   const { t } = useTranslation();
-  const logoText: string = t('homepage.humanApp');
-  const logoTextSplit: string[] = logoText.split(' ');
+
+  const logoText = t('homepage.humanApp');
+  const logoTextSplit = logoText.split(' ');
 
   return (
-    <Grid
-      container
+    <Stack
       sx={{
-        flexDirection: 'column',
         justifyContent: 'center',
         alignItems: { xs: 'center', lg: 'flex-start' },
+        gap: 4,
       }}
     >
       <Stack
         direction="row"
         sx={{
           justifyContent: { xs: 'center', md: 'flex-start' },
-          mt: 0,
         }}
       >
         <Typography variant="h1">{logoTextSplit[0]}</Typography>
         <Typography variant="h1" sx={{ fontWeight: '400', ml: 2.5 }}>
           {logoTextSplit[1]}
         </Typography>
       </Stack>
-      <Typography
-        variant="h6"
-        sx={{
-          mt: 4,
-          mb: 8,
-          typography: { md: 'h5' },
-          textAlign: { xs: 'center', md: 'left' },
-        }}
-      >
+      <Typography variant="h5" sx={{ textAlign: { xs: 'center', md: 'left' } }}>
         {t('homepage.completeJobs')}
       </Typography>
-    </Grid>
+    </Stack>
   );
 }

packages/apps/human-app/frontend/src/modules/homepage/components/sign-in-section.tsx

@@ -1,21 +1,21 @@
-import { Paper, Button } from '@mui/material';
 import { Link } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-import { useColorMode } from '@/shared/contexts/color-mode';
+import { Paper, Button } from '@mui/material';
+
 import { routerPaths } from '@/router/router-paths';
 
 export function SignInSection() {
-  const { colorPalette } = useColorMode();
   const { t } = useTranslation();
 
   return (
     <Paper
+      elevation={0}
       sx={{
         display: 'flex',
         flexDirection: 'column',
         px: { xs: 2, lg: 8 },
         py: { xs: 4, lg: 10 },
-        backgroundColor: colorPalette.paper.light,
+        bgcolor: 'background.light',
         boxShadow: 'none',
         borderRadius: '20px',
         gap: 2,

packages/apps/human-app/frontend/src/modules/homepage/views/home.page.tsx

@@ -1,14 +1,14 @@
 import { Box, Container, Grid, Paper } from '@mui/material';
 import { Navigate } from 'react-router-dom';
 
-import { routerPaths } from '@/router/router-paths';
-import { useColorMode } from '@/shared/contexts/color-mode';
 import { LogoSection } from '../components/logo-section';
 import { SignInSection } from '../components/sign-in-section';
+import { routerPaths } from '@/router/router-paths';
+import { useColorMode } from '@/shared/contexts/color-mode';
 import { useIsUserVerified } from '@/shared/hooks';
 
 export function HomePage() {
-  const { colorPalette } = useColorMode();
+  const { isDarkMode } = useColorMode();
   const isUserVerified = useIsUserVerified();
 
   if (isUserVerified) {
@@ -22,7 +22,7 @@ export function HomePage() {
         sx={{
           position: 'relative',
           mx: { xs: 0, md: 4 },
-          bgcolor: colorPalette.backgroundColor,
+          bgcolor: isDarkMode ? 'background.default' : 'common.white',
         }}
       >
         <Container>
@@ -31,7 +31,10 @@ export function HomePage() {
             spacing={{ xs: 0, lg: 10 }}
             sx={{ width: '100%', alignItems: 'center', pb: { xs: 5, lg: 0 } }}
           >
-            <Grid size={{ xs: 12, lg: 6 }} sx={{ justifyContent: 'center' }}>
+            <Grid
+              size={{ xs: 12, lg: 6 }}
+              sx={{ justifyContent: 'center', mb: { xs: 4, sm: 8, lg: 0 } }}
+            >
               <LogoSection />
             </Grid>
             <Grid size={{ xs: 12, lg: 6 }} sx={{ justifyContent: 'flex-end' }}>

packages/apps/human-app/frontend/src/modules/signin/worker/sign-in-form.tsx

@@ -8,7 +8,6 @@ import { Link } from 'react-router-dom';
 import { Input } from '@/shared/components/data-entry/input';
 import { Button } from '@/shared/components/ui/button';
 import { Password } from '@/shared/components/data-entry/password';
-import { useColorMode } from '@/shared/contexts/color-mode/use-color-mode';
 import { useResetMutationErrors } from '@/shared/hooks/use-reset-mutation-errors';
 import { HCaptchaForm } from '@/shared/components/hcaptcha';
 import { routerPaths } from '@/router/router-paths';
@@ -29,7 +28,6 @@ export function SignInForm({
   resetMutation,
 }: SignInFormProps) {
   const { t } = useTranslation();
-  const { colorPalette } = useColorMode();
 
   const methods = useForm({
     defaultValues: {
@@ -64,11 +62,9 @@ export function SignInForm({
             <MuiLink
               component={Link}
               to={routerPaths.sendResetLink}
-              variant="body1"
+              variant="body2"
               sx={{
-                color: colorPalette.text.primary,
-                fontSize: '14px',
-                lineHeight: '150%',
+                color: 'text.primary',
                 fontWeight: 600,
                 textDecoration: 'underline',
               }}
@@ -94,12 +90,12 @@ export function SignInForm({
                 fontWeight: 700,
                 lineHeight: '125%',
                 letterSpacing: '0.25px',
-                color: colorPalette.text.primary,
+                color: 'text.primary',
                 position: 'absolute',
                 top: '50%',
                 left: '50%',
                 transform: 'translate(-50%, -50%)',
-                bgcolor: colorPalette.background.paper,
+                bgcolor: 'background.paper',
               }}
             >
               {t('worker.signInForm.or')}
@@ -117,25 +113,21 @@ export function SignInForm({
             }}
           >
             <Typography
+              variant="body2"
               sx={{
-                fontSize: '14px',
                 fontWeight: 500,
-                lineHeight: '26px',
-                letterSpacing: '0.1px',
-                color: colorPalette.text.auxiliary200,
+                color: 'text.auxiliary200',
               }}
             >
               {t('worker.signInForm.dontHaveAccount')}
             </Typography>{' '}
             <MuiLink
               component={Link}
               to={routerPaths.signUp}
+              variant="body2"
               sx={{
-                color: colorPalette.accent.main,
-                fontSize: '14px',
+                color: 'accent.main',
                 fontWeight: 600,
-                lineHeight: '26px',
-                letterSpacing: '0.1px',
                 textDecoration: 'underline',
               }}
             >

packages/apps/human-app/frontend/src/modules/signin/worker/sign-in.page.tsx

@@ -13,7 +13,6 @@ import {
   useNotification,
 } from '@/shared/hooks/use-notification';
 import { BackButton } from '@/shared/components/ui/page-card/back-button';
-import { useColorMode } from '@/shared/contexts/color-mode';
 import { useAuth } from '@/modules/auth/hooks/use-auth';
 import { routerPaths } from '@/router/router-paths';
 import { useIsUserVerified } from '@/shared/hooks';
@@ -31,7 +30,6 @@ export function SignInPage() {
   const { showNotification } = useNotification();
   const navigate = useNavigate();
   const { user, status, signOut } = useAuth();
-  const { colorPalette } = useColorMode();
   const isUserVerified = useIsUserVerified();
 
   const { signIn, error, isError, isLoading, reset } = useSignIn();
@@ -88,15 +86,14 @@ export function SignInPage() {
         alignItems: 'center',
         justifyContent: 'center',
         my: { xs: 0, md: 4 },
-        bgcolor: colorPalette.background.paper,
         borderRadius: '30px',
         borderBottomLeftRadius: { xs: 0, md: '30px' },
         borderBottomRightRadius: { xs: 0, md: '30px' },
         border: { xs: 'none', md: '1px solid' },
-        borderColor: {
+        borderColor: (theme) => ({
           xs: 'none',
-          md: colorPalette.border.main,
-        },
+          md: theme.palette.border.main,
+        }),
         overflow: 'hidden',
       }}
     >
@@ -148,7 +145,7 @@ export function SignInPage() {
             <Typography
               component="h1"
               variant="h4"
-              sx={{ color: colorPalette.text.auxiliary100 }}
+              sx={{ color: 'text.auxiliary100' }}
             >
               {t('worker.signInForm.title')}
             </Typography>

packages/apps/human-app/frontend/src/modules/signin/worker/verification-flow.tsx

@@ -1,9 +1,7 @@
 import { useCallback, useState } from 'react';
-import { Box, Stack, Typography } from '@mui/material';
+import { Box, Chip, Stack, Typography } from '@mui/material';
 import { t } from 'i18next';
 
-import { Chip } from '@/shared/components/ui/chip';
-import { useColorMode } from '@/shared/contexts/color-mode/use-color-mode';
 import {
   IdentityVerificationControl,
   WalletConnectionControl,
@@ -35,7 +33,6 @@ export function VerificationFlow({
   );
 
   const { user } = useAuth();
-  const { colorPalette } = useColorMode();
   const isMobile = useIsMobile();
 
   const kycStatus = user?.kyc_status as KycStatus;
@@ -54,7 +51,7 @@ export function VerificationFlow({
     <Stack sx={{ mt: { xs: 3, md: 0 }, px: 2, width: 400 }}>
       <Typography
         variant="h4"
-        sx={{ color: colorPalette.text.auxiliary100, mb: { xs: 2.5, md: 5 } }}
+        sx={{ color: 'text.auxiliary100', mb: { xs: 2.5, md: 5 } }}
       >
         {t('worker.profile.beforeWeGetStarted')}
       </Typography>
@@ -67,18 +64,15 @@ export function VerificationFlow({
             width: 90,
             height: 10,
             borderRadius: '7px',
-            bgcolor: colorPalette.primary.main,
+            bgcolor: 'primary.main',
           }}
         />
         <Box
           sx={{
             width: 90,
             height: 10,
             borderRadius: '7px',
-            bgcolor:
-              step === 'wallet'
-                ? colorPalette.primary.main
-                : colorPalette.background.default,
+            bgcolor: step === 'wallet' ? 'primary.main' : 'background.default',
           }}
         />
       </Stack>
@@ -91,14 +85,21 @@ export function VerificationFlow({
               display: 'flex',
               alignItems: 'center',
               gap: 1,
-              color: colorPalette.text.auxiliary100,
+              color: 'text.auxiliary100',
               fontWeight: 600,
               mb: { xs: 3, md: 2 },
             }}
           >
             {t('worker.profile.identityVerification')}
             {isKycStarted && label && (
-              <Chip label={label} backgroundColor={getChipColor(kycStatus)} />
+              <Chip
+                label={label}
+                sx={{
+                  bgcolor: getChipColor(kycStatus),
+                  border: 'none',
+                  color: 'common.white',
+                }}
+              />
             )}
           </Typography>
           <IdentityVerificationControl
@@ -113,7 +114,7 @@ export function VerificationFlow({
             component="h6"
             variant={isMobile ? 'body1' : 'h6'}
             sx={{
-              color: colorPalette.text.auxiliary100,
+              color: 'text.auxiliary100',
               fontWeight: 600,
               mb: { xs: 3, md: 5 },
             }}