[Human App] refactor: color mode context (#3006)

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

@@ -16,7 +16,7 @@ import '@fontsource/inter/800.css';
 import { WalletConnectProvider } from '@/shared/contexts/wallet-connect';
 import { Web3AuthProvider } from '@/modules/auth-web3/context/web3-auth-context';
 import { JWTExpirationCheck } from '@/shared/contexts/jwt-expiration-check';
-import { ColorModeProvider } from '@/shared/contexts/color-mode-context';
+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';

packages/apps/human-app/frontend/src/modules/homepage/components/choose-sign-up-account-type.tsx

@@ -6,7 +6,7 @@ import { useIsMobile } from '@/shared/hooks/use-is-mobile';
 import { routerPaths } from '@/router/router-paths';
 import { PageCard } from '@/shared/components/ui/page-card';
 import type { HomePageStageType } from '@/modules/homepage/views/home.page';
-import { useColorMode } from '@/shared/hooks/use-color-mode';
+import { useColorMode } from '@/shared/contexts/color-mode';
 import { onlyDarkModeColor } from '@/shared/styles/dark-color-palette';
 import { useHomePageState } from '@/shared/contexts/homepage-state';
 

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

@@ -11,7 +11,7 @@ import { Button } from '@/shared/components/ui/button';
 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/hooks/use-color-mode';
+import { useColorMode } from '@/shared/contexts/color-mode';
 import { useBackgroundColorStore } from '@/shared/hooks/use-background-store';
 import { useHomePageState } from '@/shared/contexts/homepage-state';
 

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

@@ -7,7 +7,7 @@ import { useWeb3Auth } from '@/modules/auth-web3/hooks/use-web3-auth';
 import { useAuth } from '@/modules/auth/hooks/use-auth';
 import { routerPaths } from '@/router/router-paths';
 import { Button } from '@/shared/components/ui/button';
-import { useColorMode } from '@/shared/hooks/use-color-mode';
+import { useColorMode } from '@/shared/contexts/color-mode';
 import { HomeContainer } from '@/modules/homepage/components/home-container';
 import { useHomePageState } from '@/shared/contexts/homepage-state';
 

packages/apps/human-app/frontend/src/modules/operator/components/sign-up/add-keys/edit-existing-keys-form.tsx

@@ -13,7 +13,7 @@ import { Select } from '@/shared/components/data-entry/select';
 import { MultiSelect } from '@/shared/components/data-entry/multi-select';
 import { JOB_TYPES } from '@/shared/consts';
 import type { GetEthKVStoreValuesSuccessResponse } from '@/modules/operator/hooks/use-get-keys';
-import { useColorMode } from '@/shared/hooks/use-color-mode';
+import { useColorMode } from '@/shared/contexts/color-mode';
 import {
   order,
   sortFormKeys,

packages/apps/human-app/frontend/src/modules/operator/components/sign-up/add-keys/existing-keys.tsx

@@ -15,7 +15,7 @@ import {
   order,
   sortFormKeys,
 } from '@/modules/operator/components/sign-up/add-keys/sort-form';
-import { useColorMode } from '@/shared/hooks/use-color-mode';
+import { useColorMode } from '@/shared/contexts/color-mode';
 
 const existingKeysConfig: Record<
   EthKVStoreKeyValues,

packages/apps/human-app/frontend/src/modules/operator/views/profile/profile.page.tsx

@@ -14,7 +14,7 @@ import { ProfileListItem } from '@/shared/components/ui/profile-list-item';
 import { useGetOperatorStats } from '@/modules/operator/hooks/use-get-stats';
 import { ProfileEnableButton } from '@/modules/operator/components/profile/profile-enable-button';
 import { CheckmarkIcon, LockerIcon } from '@/shared/components/ui/icons';
-import { useColorMode } from '@/shared/hooks/use-color-mode';
+import { useColorMode } from '@/shared/contexts/color-mode';
 
 export function OperatorProfilePage() {
   const { colorPalette } = useColorMode();

packages/apps/human-app/frontend/src/modules/operator/views/sign-up/add-stake.page.tsx

@@ -17,7 +17,7 @@ import {
 } from '@/modules/operator/hooks/use-get-stacked-amount';
 import { useAddStakeMutationState } from '@/modules/operator/hooks/use-add-stake-mutation-state';
 import { useHMTokenDecimals } from '@/modules/operator/hooks/use-human-token-decimals';
-import { useColorMode } from '@/shared/hooks/use-color-mode';
+import { useColorMode } from '@/shared/contexts/color-mode';
 import { onlyDarkModeColor } from '@/shared/styles/dark-color-palette';
 
 export function AddStakeOperatorPage() {

packages/apps/human-app/frontend/src/modules/playground/components/table-example/table-search-form.tsx

@@ -2,7 +2,7 @@ import Search from '@mui/icons-material/Search';
 import InputAdornment from '@mui/material/InputAdornment';
 import { FormProvider, useForm } from 'react-hook-form';
 import { Input } from '@/shared/components/data-entry/input';
-import { useColorMode } from '@/shared/hooks/use-color-mode';
+import { useColorMode } from '@/shared/contexts/color-mode';
 
 interface SearchFormProps {
   label: string;

packages/apps/human-app/frontend/src/modules/worker/components/hcaptcha-labeling/user-stats-accordion.tsx

@@ -13,7 +13,7 @@ import {
   useNotification,
 } from '@/shared/hooks/use-notification';
 import { getErrorMessageForError } from '@/shared/errors';
-import { useColorMode } from '@/shared/hooks/use-color-mode';
+import { useColorMode } from '@/shared/contexts/color-mode';
 
 const accordionWidth = { width: '284px' };
 

packages/apps/human-app/frontend/src/modules/worker/components/hcaptcha-labeling/user-stats-details.tsx

@@ -2,7 +2,7 @@ import { Divider, Grid, Typography } from '@mui/material';
 import { t } from 'i18next';
 import { RefreshIcon } from '@/shared/components/ui/icons';
 import type { HCaptchaUserStatsSuccess } from '@/modules/worker/services/hcaptcha-user-stats';
-import { useColorMode } from '@/shared/hooks/use-color-mode';
+import { useColorMode } from '@/shared/contexts/color-mode';
 import { onlyDarkModeColor } from '@/shared/styles/dark-color-palette';
 
 export function UserStatsDetails({

packages/apps/human-app/frontend/src/modules/worker/components/jobs-discovery/oracles-table-mobile.tsx

@@ -6,7 +6,7 @@ import { Loader } from '@/shared/components/ui/loader';
 import type { OraclesDataQueryResult } from '@/modules/worker/views/jobs-discovery/jobs-discovery.page';
 import { EvmAddress } from '@/modules/worker/components/jobs/evm-address';
 import { ListItem } from '@/shared/components/ui/list-item';
-import { useColorMode } from '@/shared/hooks/use-color-mode';
+import { useColorMode } from '@/shared/contexts/color-mode';
 import type { JobType } from '@/modules/smart-contracts/EthKVStore/config';
 import type { Oracle } from '@/modules/worker/services/oracles';
 import { NoRecords } from '@/shared/components/ui/no-records';

packages/apps/human-app/frontend/src/modules/worker/components/jobs-discovery/oracles-table.tsx

@@ -14,7 +14,7 @@ import { routerPaths } from '@/router/router-paths';
 import type { OraclesDataQueryResult } from '@/modules/worker/views/jobs-discovery/jobs-discovery.page';
 import { env } from '@/shared/env';
 import { useGetRegistrationInExchangeOracles } from '@/modules/worker/services/get-registration-in-exchange-oracles';
-import { useColorMode } from '@/shared/hooks/use-color-mode';
+import { useColorMode } from '@/shared/contexts/color-mode';
 import { useIsMobile } from '@/shared/hooks/use-is-mobile';
 import { type JobType } from '@/modules/smart-contracts/EthKVStore/config';
 import { createTableDarkMode } from '@/shared/styles/create-table-dark-mode';

packages/apps/human-app/frontend/src/modules/worker/components/jobs/available-jobs/desktop/available-jobs-table.tsx

@@ -23,7 +23,7 @@ import { TableHeaderCell } from '@/shared/components/ui/table/table-header-cell'
 import { AvailableJobsNetworkFilter } from '@/modules/worker/components/jobs/available-jobs/desktop/available-jobs-network-filter';
 import { AvailableJobsRewardAmountSort } from '@/modules/worker/components/jobs/available-jobs/desktop/available-jobs-reward-amount-sort';
 import { AvailableJobsJobTypeFilter } from '@/modules/worker/components/jobs/available-jobs/desktop/available-jobs-job-type-filter';
-import { useColorMode } from '@/shared/hooks/use-color-mode';
+import { useColorMode } from '@/shared/contexts/color-mode';
 import { createTableDarkMode } from '@/shared/styles/create-table-dark-mode';
 import type { JobType } from '@/modules/smart-contracts/EthKVStore/config';
 import { EscrowAddressSearchForm } from '@/modules/worker/components/jobs/escrow-address-search-form';

packages/apps/human-app/frontend/src/modules/worker/components/jobs/available-jobs/mobile/available-jobs-drawer-mobile.tsx

@@ -10,7 +10,7 @@ import { AvailableJobsNetworkFilterMobile } from '@/modules/worker/components/jo
 import { useHandleMainNavIconClick } from '@/shared/hooks/use-handle-main-nav-icon-click';
 import { AvailableJobsJobTypeFilterMobile } from '@/modules/worker/components/jobs/available-jobs/mobile/available-jobs-job-type-filter-mobile';
 import { AvailableJobsRewardAmountSortMobile } from '@/modules/worker/components/jobs/available-jobs/mobile/available-jobs-reward-amount-sort-mobile';
-import { useColorMode } from '@/shared/hooks/use-color-mode';
+import { useColorMode } from '@/shared/contexts/color-mode';
 
 interface DrawerMobileProps {
   setIsMobileFilterDrawerOpen: Dispatch<SetStateAction<boolean>>;

packages/apps/human-app/frontend/src/modules/worker/components/jobs/available-jobs/mobile/available-jobs-reward-amount-sort-mobile.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable camelcase */
 import { t } from 'i18next';
 import Typography from '@mui/material/Typography';
-import { useColorMode } from '@/shared/hooks/use-color-mode';
+import { useColorMode } from '@/shared/contexts/color-mode';
 import { useJobsFilterStore } from '@/modules/worker/hooks/use-jobs-filter-store';
 import { Sorting } from '@/modules/worker/components/jobs/sorting';
 

packages/apps/human-app/frontend/src/modules/worker/components/jobs/available-jobs/mobile/available-jobs-table-mobile.tsx

@@ -15,7 +15,7 @@ import { EvmAddress } from '@/modules/worker/components/jobs/evm-address';
 import { Chip } from '@/shared/components/ui/chip';
 import { RewardAmount } from '@/modules/worker/components/jobs/reward-amount';
 import { ListItem } from '@/shared/components/ui/list-item';
-import { useColorMode } from '@/shared/hooks/use-color-mode';
+import { useColorMode } from '@/shared/contexts/color-mode';
 import type { JobType } from '@/modules/smart-contracts/EthKVStore/config';
 import { EscrowAddressSearchForm } from '@/modules/worker/components/jobs/escrow-address-search-form';
 import { AvailableJobsAssignJobButton } from '@/modules/worker/components/jobs/available-jobs/mobile/available-jobs-assign-job-button';

packages/apps/human-app/frontend/src/modules/worker/components/jobs/escrow-address-search-form.tsx

@@ -6,7 +6,7 @@ import { z } from 'zod';
 import { useEffect } from 'react';
 import Grid from '@mui/material/Grid';
 import debounce from 'lodash/debounce';
-import { useColorMode } from '@/shared/hooks/use-color-mode';
+import { useColorMode } from '@/shared/contexts/color-mode';
 import { Input } from '@/shared/components/data-entry/input';
 import { addressSchemaOrEmptyString } from '@/shared/schemas';
 import { useIsMobile } from '@/shared/hooks/use-is-mobile';

packages/apps/human-app/frontend/src/modules/worker/components/jobs/evm-address.tsx

@@ -3,7 +3,7 @@ import Typography from '@mui/material/Typography';
 import { shortenEscrowAddress } from '@/shared/helpers/evm';
 import { breakpoints } from '@/shared/styles/breakpoints';
 import { useIsMobile } from '@/shared/hooks/use-is-mobile';
-import { useColorMode } from '@/shared/hooks/use-color-mode';
+import { useColorMode } from '@/shared/contexts/color-mode';
 
 export function EvmAddress({ address }: { address: string }) {
   const { colorPalette } = useColorMode();

packages/apps/human-app/frontend/src/modules/worker/components/jobs/my-jobs/desktop/my-jobs-table.tsx

@@ -25,7 +25,7 @@ import { MyJobsRewardAmountSort } from '@/modules/worker/components/jobs/my-jobs
 import { MyJobsStatusFilter } from '@/modules/worker/components/jobs/my-jobs/desktop/my-jobs-status-filter';
 import { MyJobsExpiresAtSort } from '@/modules/worker/components/jobs/my-jobs/desktop/my-jobs-expires-at-sort';
 import { MyJobsNetworkFilter } from '@/modules/worker/components/jobs/my-jobs/desktop/my-jobs-network-filter';
-import { useColorMode } from '@/shared/hooks/use-color-mode';
+import { useColorMode } from '@/shared/contexts/color-mode';
 import { createTableDarkMode } from '@/shared/styles/create-table-dark-mode';
 import type { JobType } from '@/modules/smart-contracts/EthKVStore/config';
 import { EscrowAddressSearchForm } from '@/modules/worker/components/jobs/escrow-address-search-form';

packages/apps/human-app/frontend/src/modules/worker/components/jobs/my-jobs/mobile/my-jobs-drawer-mobile.tsx

@@ -6,7 +6,7 @@ import { useTranslation } from 'react-i18next';
 import CloseIcon from '@mui/icons-material/Close';
 import type { Dispatch, SetStateAction } from 'react';
 import { HumanLogoIcon } from '@/shared/components/ui/icons';
-import { useColorMode } from '@/shared/hooks/use-color-mode';
+import { useColorMode } from '@/shared/contexts/color-mode';
 import { MyJobsRewardAmountSortMobile } from '@/modules/worker/components/jobs/my-jobs/mobile/my-jobs-reward-amount-sort-mobile';
 import { MyJobsExpiresAtSortMobile } from '@/modules/worker/components/jobs/my-jobs/mobile/my-jobs-expires-at-sort-mobile';
 import { useHandleMainNavIconClick } from '@/shared/hooks/use-handle-main-nav-icon-click';

packages/apps/human-app/frontend/src/modules/worker/components/jobs/my-jobs/mobile/my-jobs-expires-at-sort-mobile.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable camelcase */
 import Typography from '@mui/material/Typography';
 import { t } from 'i18next';
-import { useColorMode } from '@/shared/hooks/use-color-mode';
+import { useColorMode } from '@/shared/contexts/color-mode';
 import { useMyJobsFilterStore } from '@/modules/worker/hooks/use-my-jobs-filter-store';
 import { Sorting } from '@/modules/worker/components/jobs/sorting';
 

packages/apps/human-app/frontend/src/modules/worker/components/jobs/my-jobs/mobile/my-jobs-reward-amount-sort-mobile.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable camelcase */
 import Typography from '@mui/material/Typography';
 import { t } from 'i18next';
-import { useColorMode } from '@/shared/hooks/use-color-mode';
+import { useColorMode } from '@/shared/contexts/color-mode';
 import { useMyJobsFilterStore } from '@/modules/worker/hooks/use-my-jobs-filter-store';
 import { Sorting } from '@/modules/worker/components/jobs/sorting';
 

packages/apps/human-app/frontend/src/modules/worker/components/jobs/my-jobs/mobile/my-jobs-table-mobile.tsx

@@ -16,7 +16,7 @@ import { useMyJobsFilterStore } from '@/modules/worker/hooks/use-my-jobs-filter-
 import { ListItem } from '@/shared/components/ui/list-item';
 import { EvmAddress } from '@/modules/worker/components/jobs/evm-address';
 import { RewardAmount } from '@/modules/worker/components/jobs/reward-amount';
-import { useColorMode } from '@/shared/hooks/use-color-mode';
+import { useColorMode } from '@/shared/contexts/color-mode';
 import { Chip } from '@/shared/components/ui/chip';
 import type { JobType } from '@/modules/smart-contracts/EthKVStore/config';
 import { EscrowAddressSearchForm } from '@/modules/worker/components/jobs/escrow-address-search-form';

packages/apps/human-app/frontend/src/modules/worker/components/jobs/sorting.tsx

@@ -5,7 +5,7 @@ import ListItemButton from '@mui/material/ListItemButton';
 import List from '@mui/material/List';
 import { Grid } from '@mui/material';
 import { SortArrow } from '@/shared/components/ui/icons';
-import { useColorMode } from '@/shared/hooks/use-color-mode';
+import { useColorMode } from '@/shared/contexts/color-mode';
 import { Button } from '@/shared/components/ui/button';
 
 interface SortingProps {

packages/apps/human-app/frontend/src/modules/worker/components/jobs/status-chip.tsx

@@ -3,7 +3,7 @@ import Typography from '@mui/material/Typography';
 import { type MyJob } from '@/modules/worker/services/my-jobs-data';
 import { colorPalette as lightModeColorPalette } from '@/shared/styles/color-palette';
 import { getChipStatusColor } from '@/modules/worker/utils/get-chip-status-color';
-import { useColorMode } from '@/shared/hooks/use-color-mode';
+import { useColorMode } from '@/shared/contexts/color-mode';
 
 export function StatusChip({ status }: { status: MyJob['status'] }) {
   const { colorPalette } = useColorMode();

packages/apps/human-app/frontend/src/modules/worker/components/profile/profile-data.tsx

@@ -5,7 +5,7 @@ import { Link } from 'react-router-dom';
 import { useAuthenticatedUser } from '@/modules/auth/hooks/use-authenticated-user';
 import { Button } from '@/shared/components/ui/button';
 import { routerPaths } from '@/router/router-paths';
-import { useColorMode } from '@/shared/hooks/use-color-mode';
+import { useColorMode } from '@/shared/contexts/color-mode';
 import { onlyDarkModeColor } from '@/shared/styles/dark-color-palette';
 
 export function ProfileData() {

packages/apps/human-app/frontend/src/modules/worker/components/profile/wallet-connect-done.tsx

@@ -6,12 +6,12 @@ import styled from '@mui/material/styles/styled';
 import { CheckmarkIcon } from '@/shared/components/ui/icons';
 import { colorPalette } from '@/shared/styles/color-palette';
 import { useAuthenticatedUser } from '@/modules/auth/hooks/use-authenticated-user';
-import { useWalletConnect } from '@/shared/contexts/wallet-connect';
-import { useColorMode } from '@/shared/hooks/use-color-mode';
+import { useColorMode } from '@/shared/contexts/color-mode';
 import {
   darkColorPalette,
   onlyDarkModeColor,
 } from '@/shared/styles/dark-color-palette';
+import { useWalletConnect } from '@/shared/contexts/wallet-connect';
 
 const CustomTextField = styled(TextField)(() => ({
   '& .Mui-disabled': {

packages/apps/human-app/frontend/src/modules/worker/views/email-verification/verify-email.page.tsx

@@ -22,7 +22,7 @@ import { useAuth } from '@/modules/auth/hooks/use-auth';
 import { routerPaths } from '@/router/router-paths';
 import { MailTo } from '@/shared/components/ui/mail-to';
 import { useResetMutationErrors } from '@/shared/hooks/use-reset-mutation-errors';
-import { useColorMode } from '@/shared/hooks/use-color-mode';
+import { useColorMode } from '@/shared/contexts/color-mode';
 import { onlyDarkModeColor } from '@/shared/styles/dark-color-palette';
 
 export function VerifyEmailWorkerPage() {

packages/apps/human-app/frontend/src/modules/worker/views/hcaptcha-labeling/hcaptcha-labeling.page.tsx

@@ -19,7 +19,7 @@ import { getTomorrowDate } from '@/shared/helpers/date';
 import { useSolveHCaptchaMutation } from '@/modules/worker/services/solve-hcaptcha';
 import { useAuthenticatedUser } from '@/modules/auth/hooks/use-authenticated-user';
 import { useHCaptchaLabelingNotifications } from '@/modules/worker/hooks/use-hcaptcha-labeling-notifications';
-import { useColorMode } from '@/shared/hooks/use-color-mode';
+import { useColorMode } from '@/shared/contexts/color-mode';
 import { onlyDarkModeColor } from '@/shared/styles/dark-color-palette';
 import { routerPaths } from '@/router/router-paths';
 

packages/apps/human-app/frontend/src/modules/worker/views/jobs/jobs.page.tsx

@@ -12,13 +12,13 @@ import { MyJobsDrawerMobile } from '@/modules/worker/components/jobs/my-jobs/mob
 import { AvailableJobsDrawerMobile } from '@/modules/worker/components/jobs/available-jobs/mobile/available-jobs-drawer-mobile';
 import { useGetOracles } from '@/modules/worker/services/oracles';
 import { useGetUiConfig } from '@/modules/worker/services/get-ui-config';
-import { PageCardLoader } from '@/shared/components/ui/page-card';
-import { useColorMode } from '@/shared/hooks/use-color-mode';
+import { useColorMode } from '@/shared/contexts/color-mode';
 import { useGetOraclesNotifications } from '@/modules/worker/hooks/use-get-oracles-notifications';
 import { NoRecords } from '@/shared/components/ui/no-records';
 import { AvailableJobsTableMobile } from '@/modules/worker/components/jobs/available-jobs/mobile/available-jobs-table-mobile';
 import { TabPanel } from '@/modules/worker/components/jobs/jobs-tab-panel';
 import { MyJobsTable } from '@/modules/worker/components/jobs/my-jobs/desktop/my-jobs-table';
+import { PageCardLoader } from '@/shared/components/ui/page-card';
 
 function generateTabA11yProps(index: number) {
   return {

packages/apps/human-app/frontend/src/modules/worker/views/reset-password/reset-password-success.page.tsx

@@ -8,7 +8,7 @@ import { Button } from '@/shared/components/ui/button';
 import { routerPaths } from '@/router/router-paths';
 import { PageCard } from '@/shared/components/ui/page-card';
 import { useAuth } from '@/modules/auth/hooks/use-auth';
-import { useColorMode } from '@/shared/hooks/use-color-mode';
+import { useColorMode } from '@/shared/contexts/color-mode';
 
 export function ResetPasswordWorkerSuccessPage() {
   const { colorPalette } = useColorMode();

packages/apps/human-app/frontend/src/modules/worker/views/send-reset-link/send-reset-link-success.page.tsx

@@ -18,7 +18,7 @@ import { getErrorMessageForError } from '@/shared/errors';
 import { HCaptchaForm } from '@/shared/components/hcaptcha/h-captcha-form';
 import { MailTo } from '@/shared/components/ui/mail-to';
 import { useResetMutationErrors } from '@/shared/hooks/use-reset-mutation-errors';
-import { useColorMode } from '@/shared/hooks/use-color-mode';
+import { useColorMode } from '@/shared/contexts/color-mode';
 import { onlyDarkModeColor } from '@/shared/styles/dark-color-palette';
 
 export function SendResetLinkWorkerSuccessPage() {

packages/apps/human-app/frontend/src/shared/components/data-entry/checkbox.tsx

@@ -4,7 +4,7 @@ import CheckboxMui from '@mui/material/Checkbox';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
-import { useColorMode } from '@/shared/hooks/use-color-mode';
+import { useColorMode } from '@/shared/contexts/color-mode';
 
 interface InputProps extends Omit<CheckboxProps, 'name' | 'error'> {
   name: string;

packages/apps/human-app/frontend/src/shared/components/data-entry/input.tsx

@@ -3,7 +3,7 @@ import type { TextFieldProps } from '@mui/material/TextField';
 import TextField from '@mui/material/TextField';
 import { Typography } from '@mui/material';
 import { type InputMask } from '@/shared/components/data-entry/input-masks';
-import { useColorMode } from '@/shared/hooks/use-color-mode';
+import { useColorMode } from '@/shared/contexts/color-mode';
 
 export interface InputProps
   extends Omit<TextFieldProps, 'name' | 'error' | 'helperText'> {

packages/apps/human-app/frontend/src/shared/components/data-entry/multi-select.tsx

@@ -18,7 +18,7 @@ import {
   Typography,
 } from '@mui/material';
 import CancelIcon from '@mui/icons-material/Cancel';
-import { useColorMode } from '@/shared/hooks/use-color-mode';
+import { useColorMode } from '@/shared/contexts/color-mode';
 
 interface MultiSelectProps extends Omit<SelectProps, 'name'> {
   options: { label: string; value: string }[];