[HUM-129]: chore: redistribute background context files

packages/apps/human-app/frontend/src/main.tsx

@@ -19,7 +19,7 @@ import { JWTExpirationCheck } from '@/shared/contexts/jwt-expiration-check';
 import { ColorModeProvider } from '@/shared/contexts/color-mode';
 import { HomePageStateProvider } from '@/shared/contexts/homepage-state';
 import { RegisteredOraclesProvider } from '@/shared/contexts/registered-oracles';
-import { NotificationProvider } from '@/shared/providers/notifications-provider';
+import { NotificationProvider } from './shared/providers/notifications-provider';
 
 const root = document.getElementById('root');
 if (!root) throw Error('root element is undefined');

packages/apps/human-app/frontend/src/modules/homepage/components/home-container.tsx

@@ -1,13 +1,13 @@
 import { Container } from '@mui/material';
 import { useEffect } from 'react';
-import { useBackgroundColorStore } from '@/shared/hooks/use-background-store';
+import { useBackgroundContext } from '@/shared/contexts/background';
 import { useHomePageState } from '@/shared/contexts/homepage-state';
 import { Welcome } from './welcome';
 import { ChooseSignUpAccountType } from './choose-sign-up-account-type';
 
 export function HomeContainer() {
   const { pageView } = useHomePageState();
-  const { setWhiteBackground, setGrayBackground } = useBackgroundColorStore();
+  const { setWhiteBackground, setGrayBackground } = useBackgroundContext();
 
   useEffect(() => {
     if (pageView === 'chooseSignUpAccountType') {

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

@@ -12,12 +12,12 @@ import { useIsMobile } from '@/shared/hooks/use-is-mobile';
 import { OperatorSignIn } from '@/modules/homepage/hooks/use-operator-signin';
 import { WorkerSignIn } from '@/modules/homepage/components/worker-signin';
 import { useColorMode } from '@/shared/contexts/color-mode';
-import { useBackgroundColorStore } from '@/shared/hooks/use-background-store';
 import { useHomePageState } from '@/shared/contexts/homepage-state';
+import { useBackgroundContext } from '@/shared/contexts/background';
 
 export function Welcome() {
   const { colorPalette, isDarkMode } = useColorMode();
-  const { setWhiteBackground } = useBackgroundColorStore();
+  const { setWhiteBackground } = useBackgroundContext();
   const { setPageView } = useHomePageState();
   const { t } = useTranslation();
   const logoText: string = t('homepage.humanApp');

packages/apps/human-app/frontend/src/shared/components/layout/protected/layout.tsx

@@ -3,7 +3,7 @@ import type { Dispatch, SetStateAction } from 'react';
 import { useEffect, useRef, useState } from 'react';
 import { Outlet } from 'react-router-dom';
 import { useIsMobile } from '@/shared/hooks/use-is-mobile';
-import { useBackgroundColorStore } from '@/shared/hooks/use-background-store';
+import { useBackgroundContext } from '@/shared/contexts/background';
 import type { PageHeaderProps } from '@/shared/components/layout/protected/page-header';
 import { PageHeader } from '@/shared/components/layout/protected/page-header';
 import { breakpoints } from '@/shared/styles/breakpoints';
@@ -50,7 +50,7 @@ export function Layout({
   const isMobile = useIsMobile();
   const [drawerOpen, setDrawerOpen] = useState(!isMobile);
   const [hcaptchaDrawerOpen, setHcaptchaDrawerOpen] = useState(false);
-  const { backgroundColor, setGrayBackground } = useBackgroundColorStore();
+  const { backgroundColor, setGrayBackground } = useBackgroundContext();
   const toggleUserStatsDrawer = isHCaptchaLabelingPage
     ? () => {
         setHcaptchaDrawerOpen((state) => !state);

packages/apps/human-app/frontend/src/shared/components/layout/unprotected/layout.tsx

@@ -1,6 +1,6 @@
 import { Container, Grid } from '@mui/material';
 import { Outlet } from 'react-router-dom';
-import { useBackgroundColorStore } from '@/shared/hooks/use-background-store';
+import { useBackgroundContext } from '@/shared/contexts/background';
 import { useIsMobile } from '@/shared/hooks/use-is-mobile';
 import { breakpoints } from '@/shared/styles/breakpoints';
 import { useColorMode } from '@/shared/contexts/color-mode';
@@ -13,7 +13,7 @@ interface LayoutProps {
 
 export function Layout({ withNavigation = true }: LayoutProps) {
   const { colorPalette, isDarkMode } = useColorMode();
-  const { backgroundColor } = useBackgroundColorStore();
+  const { backgroundColor } = useBackgroundContext();
   const isMobile = useIsMobile();
   const layoutBackgroundColor = (() => {
     if (isDarkMode) {

packages/apps/human-app/frontend/src/shared/contexts/background-color-store.tsx → packages/apps/human-app/frontend/src/shared/contexts/background/background.tsx

@@ -1,5 +1,11 @@
 import type { ReactNode } from 'react';
-import { createContext, useCallback, useEffect, useState } from 'react';
+import {
+  createContext,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
 import type { ColorPalette } from '@/shared/styles/color-palette';
 
 export interface BackgroundContextProps {
@@ -22,7 +28,7 @@ export function BackgroundProvider({
   children,
   colorPalette,
   isDarkMode,
-}: BackgroundProviderProps) {
+}: Readonly<BackgroundProviderProps>) {
   const [backgroundColor, setBackgroundColor] = useState<string>(
     colorPalette.white
   );
@@ -39,13 +45,13 @@ export function BackgroundProvider({
     setBackgroundColor(colorPalette.white);
   }, [colorPalette.white]);
 
-  const setGrayBackground = () => {
+  const setGrayBackground = useCallback(() => {
     if (isDarkMode) {
       setBackgroundColor(colorPalette.backgroundColor);
     } else {
       setBackgroundColor(colorPalette.paper.main);
     }
-  };
+  }, [isDarkMode, colorPalette.backgroundColor, colorPalette.paper.main]);
 
   const setGrayBackgroundInternal = useCallback(
     (_isDarkMode: boolean) => {
@@ -69,10 +75,13 @@ export function BackgroundProvider({
     setGrayBackgroundInternal,
   ]);
 
+  const contextValue = useMemo(
+    () => ({ backgroundColor, setWhiteBackground, setGrayBackground }),
+    [backgroundColor, setWhiteBackground, setGrayBackground]
+  );
+
   return (
-    <BackgroundContext.Provider
-      value={{ backgroundColor, setWhiteBackground, setGrayBackground }}
-    >
+    <BackgroundContext.Provider value={contextValue}>
       {children}
     </BackgroundContext.Provider>
   );

packages/apps/human-app/frontend/src/shared/contexts/background/index.ts

@@ -0,0 +1,2 @@
+export * from './background';
+export * from './use-background-context';

packages/apps/human-app/frontend/src/shared/contexts/background/use-background-context.tsx

@@ -0,0 +1,12 @@
+import { useContext } from 'react';
+import { BackgroundContext, type BackgroundContextProps } from './background';
+
+export const useBackgroundContext = (): BackgroundContextProps => {
+  const context = useContext(BackgroundContext);
+  if (!context) {
+    throw new Error(
+      'useBackgroundContext must be used within a BackgroundProvider'
+    );
+  }
+  return context;
+};

packages/apps/human-app/frontend/src/shared/contexts/color-mode/color-mode.tsx

@@ -11,7 +11,7 @@ import { theme } from '@/shared/styles/theme';
 import { colorPalette as defaultColorPalette } from '@/shared/styles/color-palette';
 import { darkTheme } from '@/shared/styles/dark-theme';
 import { darkColorPalette } from '@/shared/styles/dark-color-palette';
-import { BackgroundProvider } from '@/shared/contexts/background-color-store';
+import { BackgroundProvider } from '../background';
 import {
   ColorMode,
   hasColorMode,