[Human App] HUM-66 (#2686): fix color mode switch on tasks page

humanprotocol · Oct 24, 2024 · 87c0493 · 87c0493
1 parent fc60052
commit 87c0493
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 21 deletions.
diff --git a/packages/apps/human-app/frontend/src/components/layout/protected/layout.tsx b/packages/apps/human-app/frontend/src/components/layout/protected/layout.tsx
@@ -58,7 +58,7 @@ export function Layout({
   const isMobile = useIsMobile();
   const [drawerOpen, setDrawerOpen] = useState(!isMobile);
   const [hcaptchaDrawerOpen, setHcaptchaDrawerOpen] = useState(false);
-  const { backgroundColor } = useBackgroundColorStore();
+  const { backgroundColor, setGrayBackground } = useBackgroundColorStore();
   const toggleUserStatsDrawer = isHCaptchaLabelingPage
     ? () => {
         setHcaptchaDrawerOpen((state) => !state);
@@ -94,6 +94,10 @@ export function Layout({
     setNotificationWidth();
   }, [notification]);
 
+  useEffect(() => {
+    setGrayBackground();
+  }, [setGrayBackground]);
+
   return (
     <ProtectedLayoutContext.Provider
       value={{
@@ -205,7 +209,7 @@ export function Layout({
             </Grid>
             <Grid
               component="div"
-              // @ts-expect-error -- ...
+              // @ts-expect-error -- MUI accepts this prop even if it's not typed
               ref={layoutElementRef}
               sx={{ height: '100%' }}
             >

diff --git a/packages/apps/human-app/frontend/src/pages/operator/profile/profile.page.tsx b/packages/apps/human-app/frontend/src/pages/operator/profile/profile.page.tsx
@@ -1,7 +1,6 @@
 import { useEffect } from 'react';
 import { Grid, List, Paper, Stack, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
-import { useBackgroundColorStore } from '@/hooks/use-background-store';
 import { useIsMobile } from '@/hooks/use-is-mobile';
 import { useGetKeys } from '@/api/services/operator/get-keys';
 import { useWeb3AuthenticatedUser } from '@/auth-web3/use-web3-authenticated-user';
@@ -16,7 +15,6 @@ import { useColorMode } from '@/hooks/use-color-mode';
 
 export function OperatorProfilePage() {
   const { colorPalette } = useColorMode();
-  const { setGrayBackground } = useBackgroundColorStore();
   const { t } = useTranslation();
   const isMobile = useIsMobile('lg');
   const { user } = useWeb3AuthenticatedUser();
@@ -37,10 +35,6 @@ export function OperatorProfilePage() {
 
   const isOperatorActive = user.status === 'ACTIVE';
 
-  useEffect(() => {
-    setGrayBackground();
-  }, [setGrayBackground]);
-
   useEffect(() => {
     if (keysData?.url) {
       void refetchStats();

diff --git a/packages/apps/human-app/frontend/src/pages/worker/jobs/jobs.page.tsx b/packages/apps/human-app/frontend/src/pages/worker/jobs/jobs.page.tsx
@@ -1,10 +1,9 @@
 /* eslint-disable camelcase */
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
 import { Box, Grid, Paper, Stack, Tab, Tabs, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { useParams } from 'react-router-dom';
 import { TableQueryContextProvider } from '@/components/ui/table/table-query-context';
-import { useBackgroundColorStore } from '@/hooks/use-background-store';
 import { Modal } from '@/components/ui/modal/modal';
 import { useIsMobile } from '@/hooks/use-is-mobile';
 import { MyJobsTableMobile } from '@/pages/worker/jobs/components/my-jobs/mobile/my-jobs-table-mobile';
@@ -30,7 +29,6 @@ export function JobsPage() {
   const { isDarkMode } = useColorMode();
   const { data, isError, isPending, error } = useGetOracles();
   const { address: oracle_address } = useParams<{ address: string }>();
-  const { setGrayBackground } = useBackgroundColorStore();
   const { t } = useTranslation();
   const [activeTab, setActiveTab] = useState(0);
   const isMobile = useIsMobile();
@@ -50,10 +48,6 @@ export function JobsPage() {
     }
   };
 
-  useEffect(() => {
-    setGrayBackground();
-  }, [setGrayBackground]);
-
   const oracleName = data?.find(
     ({ address }) => address === oracle_address
   )?.role;

diff --git a/packages/apps/human-app/frontend/src/pages/worker/profile/profile.page.tsx b/packages/apps/human-app/frontend/src/pages/worker/profile/profile.page.tsx
@@ -5,15 +5,13 @@ import { ProfileData } from '@/pages/worker/profile/profile-data';
 import { ProfileActions } from '@/pages/worker/profile/profile-actions';
 import { useProtectedLayoutNotification } from '@/hooks/use-protected-layout-notifications';
 import { useWalletConnect } from '@/hooks/use-wallet-connect';
-import { useBackgroundColorStore } from '@/hooks/use-background-store';
 import { useIsMobile } from '@/hooks/use-is-mobile';
 import { useAuthenticatedUser } from '@/auth/use-authenticated-user';
 
 export function WorkerProfilePage() {
   const { user } = useAuthenticatedUser();
   const isMobile = useIsMobile();
   const { isConnected } = useWalletConnect();
-  const { setGrayBackground } = useBackgroundColorStore();
   const { setTopNotification: setTopNotificationInLayout } =
     useProtectedLayoutNotification();
 
@@ -32,10 +30,6 @@ export function WorkerProfilePage() {
     // eslint-disable-next-line react-hooks/exhaustive-deps -- call this once
   }, [isConnected]);
 
-  useEffect(() => {
-    setGrayBackground();
-  }, [setGrayBackground]);
-
   return (
     <Paper
       sx={{