humanprotocol · dnechay · Apr 25, 2025 · Apr 25, 2025
diff --git a/packages/apps/human-app/frontend/src/modules/homepage/views/home.page.tsx b/packages/apps/human-app/frontend/src/modules/homepage/views/home.page.tsx
@@ -27,13 +27,10 @@ export function HomePage() {
 
   const paperBackgroundColor = (() => {
     if (isDarkMode) {
-      if (isMobile) {
-        return colorPalette.backgroundColor;
-      }
       return colorPalette.paper.main;
     }
 
-    return colorPalette.white;
+    return colorPalette.backgroundColor;
   })();
 
   return (

diff --git a/...n-app/frontend/src/modules/worker/jobs-discovery/components/oracles-table-item-mobile.tsx b/...n-app/frontend/src/modules/worker/jobs-discovery/components/oracles-table-item-mobile.tsx
@@ -31,7 +31,7 @@ export function OraclesTableItemMobile({
   const { selectOracle } = useSelectOracleNavigation();
 
   return (
-    <Paper sx={{ ...styles, backgroundColor: colorPalette.white }}>
+    <Paper sx={{ ...styles, backgroundColor: colorPalette.backgroundColor }}>
       <Grid item>
         <ListItem label={t('worker.oraclesTable.oracleAddress')}>
           <EvmAddress address={oracle.address} />

diff --git a/...human-app/frontend/src/modules/worker/jobs/available-jobs/available-jobs-filter-modal.tsx b/...human-app/frontend/src/modules/worker/jobs/available-jobs/available-jobs-filter-modal.tsx
@@ -37,7 +37,7 @@ export function AvailableJobsFilterModal({
             px: '50px',
             width: '100vw',
             zIndex: '9999999',
-            background: colorPalette.white,
+            background: colorPalette.backgroundColor,
           },
         }}
         variant="persistent"
@@ -51,7 +51,7 @@ export function AvailableJobsFilterModal({
             position: 'absolute',
             left: '0',
             top: '0',
-            background: colorPalette.white,
+            background: colorPalette.backgroundColor,
             display: 'flex',
             width: '100%',
             px: '44px',
@@ -68,7 +68,7 @@ export function AvailableJobsFilterModal({
             sx={{
               zIndex: '99999999',
               marginRight: '15px',
-              backgroundColor: colorPalette.white,
+              backgroundColor: colorPalette.backgroundColor,
             }}
           >
             <CloseIcon />

diff --git a/...pps/human-app/frontend/src/modules/worker/jobs/my-jobs/components/desktop/status-chip.tsx b/...pps/human-app/frontend/src/modules/worker/jobs/my-jobs/components/desktop/status-chip.tsx
@@ -1,6 +1,5 @@
 import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
-import { colorPalette as lightModeColorPalette } from '@/shared/styles/color-palette';
 import { useColorMode } from '@/shared/contexts/color-mode';
 import { getChipStatusColor } from '../../utils';
 import { type MyJob } from '../../../schemas';
@@ -15,12 +14,12 @@ export function StatusChip({ status }: Readonly<{ status: MyJob['status'] }>) {
         justifyContent: 'center',
         alignItems: 'center',
         padding: '6px 9px',
-        color: lightModeColorPalette.white,
+        color: colorPalette.white,
         backgroundColor: getChipStatusColor(status, colorPalette),
         borderRadius: '16px',
       }}
     >
-      <Typography color={lightModeColorPalette.white} variant="chip">
+      <Typography color={colorPalette.white} variant="chip">
         {status}
       </Typography>
     </Box>

diff --git a/...n-app/frontend/src/modules/worker/jobs/my-jobs/components/mobile/my-jobs-filter-modal.tsx b/...n-app/frontend/src/modules/worker/jobs/my-jobs/components/mobile/my-jobs-filter-modal.tsx
@@ -37,7 +37,7 @@ export function MyJobsFilterModal({
             px: '50px',
             width: '100vw',
             zIndex: '9999999',
-            background: colorPalette.white,
+            background: colorPalette.backgroundColor,
           },
         }}
         variant="persistent"
@@ -51,7 +51,7 @@ export function MyJobsFilterModal({
             position: 'absolute',
             left: '0',
             top: '0',
-            background: colorPalette.white,
+            background: colorPalette.backgroundColor,
             display: 'flex',
             width: '100%',
             px: '44px',
@@ -73,7 +73,7 @@ export function MyJobsFilterModal({
             sx={{
               zIndex: '99999999',
               marginRight: '15px',
-              backgroundColor: colorPalette.white,
+              backgroundColor: colorPalette.backgroundColor,
             }}
           >
             <CloseIcon />

diff --git a/...an-app/frontend/src/modules/worker/jobs/my-jobs/components/mobile/my-jobs-list-mobile.tsx b/...an-app/frontend/src/modules/worker/jobs/my-jobs/components/mobile/my-jobs-list-mobile.tsx
@@ -13,7 +13,6 @@ import { ListItem } from '@/shared/components/ui/list-item';
 import { useColorMode } from '@/shared/contexts/color-mode';
 import { Chip } from '@/shared/components/ui/chip';
 import type { JobType } from '@/modules/smart-contracts/EthKVStore/config';
-import { colorPalette as lightModeColorPalette } from '@/shared/styles/color-palette';
 import { formatDate } from '@/shared/helpers/date';
 import { useCombinePages } from '@/shared/hooks';
 import {
@@ -166,10 +165,7 @@ export function MyJobsListMobile() {
                           colorPalette
                         )}
                         label={
-                          <Typography
-                            color={lightModeColorPalette.white}
-                            variant="chip"
-                          >
+                          <Typography color={colorPalette.white} variant="chip">
                             {d.status}
                           </Typography>
                         }

diff --git a/packages/apps/human-app/frontend/src/router/components/layout/protected/navbar.tsx b/packages/apps/human-app/frontend/src/router/components/layout/protected/navbar.tsx
@@ -71,7 +71,7 @@ export function Navbar({
       direction="row"
       justifyContent="space-between"
       sx={{
-        backgroundColor: colorPalette.white,
+        backgroundColor: colorPalette.backgroundColor,
         display: { xs: 'flex', md: 'none' },
         width: '100%',
         px: isMobile ? NAVBAR_PADDING : 0,

diff --git a/packages/apps/human-app/frontend/src/shared/components/ui/chip.tsx b/packages/apps/human-app/frontend/src/shared/components/ui/chip.tsx
@@ -6,17 +6,15 @@ interface ChipProps {
   key?: string;
   backgroundColor?: string;
 }
-export function Chip({ label, backgroundColor }: ChipProps) {
+export function Chip({ label, backgroundColor }: Readonly<ChipProps>) {
   const { colorPalette } = useColorMode();
 
   return (
     <Box
       component="span"
       key={crypto.randomUUID()}
       sx={{
-        backgroundColor: backgroundColor
-          ? backgroundColor
-          : colorPalette.chip.main,
+        backgroundColor: backgroundColor ?? colorPalette.chip.main,
         width: 'fit-content',
         px: '10px',
         py: '2px',

diff --git a/packages/apps/human-app/frontend/src/shared/styles/dark-color-palette.ts b/packages/apps/human-app/frontend/src/shared/styles/dark-color-palette.ts
@@ -1,7 +1,7 @@
 import type { colorPalette } from '@/shared/styles/color-palette';
 
 export const darkColorPalette = {
-  white: 'rgba(16, 7, 53, 1)',
+  white: '#FFFFFF',
   black: '#000000',
   backgroundColor: 'rgba(16, 7, 53, 1)',
   text: {

diff --git a/packages/apps/human-app/frontend/src/shared/styles/dark-theme.ts b/packages/apps/human-app/frontend/src/shared/styles/dark-theme.ts
@@ -12,7 +12,7 @@ export const darkTheme: ThemeOptions = {
     MuiCssBaseline: {
       styleOverrides: {
         body: {
-          backgroundColor: darkColorPalette.white,
+          backgroundColor: darkColorPalette.backgroundColor,
         },
       },
     },
@@ -76,7 +76,7 @@ export const darkTheme: ThemeOptions = {
       styleOverrides: {
         tooltip: {
           fontSize: 'inherit',
-          backgroundColor: darkColorPalette.white,
+          backgroundColor: darkColorPalette.backgroundColor,
           boxShadow: 'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px',
           color: darkColorPalette.text.primary,
         },

diff --git a/packages/apps/human-app/frontend/src/shared/styles/theme.ts b/packages/apps/human-app/frontend/src/shared/styles/theme.ts
@@ -62,7 +62,7 @@ export const theme: ThemeOptions = {
       styleOverrides: {
         tooltip: {
           fontSize: 'inherit',
-          backgroundColor: colorPalette.white,
+          backgroundColor: colorPalette.backgroundColor,
           boxShadow: 'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px',
           color: colorPalette.text.primary,
         },