diff --git a/packages/apps/human-app/frontend/src/main.tsx b/packages/apps/human-app/frontend/src/main.tsx index 5a45f59c3c..855bc34e58 100644 --- a/packages/apps/human-app/frontend/src/main.tsx +++ b/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'; diff --git a/packages/apps/human-app/frontend/src/modules/homepage/components/choose-sign-up-account-type.tsx b/packages/apps/human-app/frontend/src/modules/homepage/components/choose-sign-up-account-type.tsx index d3768ced6f..c694ab548e 100644 --- a/packages/apps/human-app/frontend/src/modules/homepage/components/choose-sign-up-account-type.tsx +++ b/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'; diff --git a/packages/apps/human-app/frontend/src/modules/homepage/components/welcome.tsx b/packages/apps/human-app/frontend/src/modules/homepage/components/welcome.tsx index 2ab371fed6..4662475f3f 100644 --- a/packages/apps/human-app/frontend/src/modules/homepage/components/welcome.tsx +++ b/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'; 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 index dd6d805e80..83821bd2ab 100644 --- 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 @@ -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'; diff --git a/packages/apps/human-app/frontend/src/modules/operator/components/sign-up/add-keys/edit-existing-keys-form.tsx b/packages/apps/human-app/frontend/src/modules/operator/components/sign-up/add-keys/edit-existing-keys-form.tsx index d70a64ef25..654bccfed8 100644 --- a/packages/apps/human-app/frontend/src/modules/operator/components/sign-up/add-keys/edit-existing-keys-form.tsx +++ b/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, diff --git a/packages/apps/human-app/frontend/src/modules/operator/components/sign-up/add-keys/existing-keys.tsx b/packages/apps/human-app/frontend/src/modules/operator/components/sign-up/add-keys/existing-keys.tsx index 8eb715e501..d617ab6d0a 100644 --- a/packages/apps/human-app/frontend/src/modules/operator/components/sign-up/add-keys/existing-keys.tsx +++ b/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, diff --git a/packages/apps/human-app/frontend/src/modules/operator/views/profile/profile.page.tsx b/packages/apps/human-app/frontend/src/modules/operator/views/profile/profile.page.tsx index 413e16b9c4..c128bd16dc 100644 --- a/packages/apps/human-app/frontend/src/modules/operator/views/profile/profile.page.tsx +++ b/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(); diff --git a/packages/apps/human-app/frontend/src/modules/operator/views/sign-up/add-stake.page.tsx b/packages/apps/human-app/frontend/src/modules/operator/views/sign-up/add-stake.page.tsx index eaba0eab1e..76fc5e9fc7 100644 --- a/packages/apps/human-app/frontend/src/modules/operator/views/sign-up/add-stake.page.tsx +++ b/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() { diff --git a/packages/apps/human-app/frontend/src/modules/playground/components/table-example/table-search-form.tsx b/packages/apps/human-app/frontend/src/modules/playground/components/table-example/table-search-form.tsx index 551216976b..454fc88446 100644 --- a/packages/apps/human-app/frontend/src/modules/playground/components/table-example/table-search-form.tsx +++ b/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; diff --git a/packages/apps/human-app/frontend/src/modules/worker/components/hcaptcha-labeling/user-stats-accordion.tsx b/packages/apps/human-app/frontend/src/modules/worker/components/hcaptcha-labeling/user-stats-accordion.tsx index f6aca97d8d..df817e5d34 100644 --- a/packages/apps/human-app/frontend/src/modules/worker/components/hcaptcha-labeling/user-stats-accordion.tsx +++ b/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' }; diff --git a/packages/apps/human-app/frontend/src/modules/worker/components/hcaptcha-labeling/user-stats-details.tsx b/packages/apps/human-app/frontend/src/modules/worker/components/hcaptcha-labeling/user-stats-details.tsx index 4fc84228e4..205d7ede42 100644 --- a/packages/apps/human-app/frontend/src/modules/worker/components/hcaptcha-labeling/user-stats-details.tsx +++ b/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({ diff --git a/packages/apps/human-app/frontend/src/modules/worker/components/jobs-discovery/oracles-table-mobile.tsx b/packages/apps/human-app/frontend/src/modules/worker/components/jobs-discovery/oracles-table-mobile.tsx index ac26e08950..99324e5807 100644 --- a/packages/apps/human-app/frontend/src/modules/worker/components/jobs-discovery/oracles-table-mobile.tsx +++ b/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'; diff --git a/packages/apps/human-app/frontend/src/modules/worker/components/jobs-discovery/oracles-table.tsx b/packages/apps/human-app/frontend/src/modules/worker/components/jobs-discovery/oracles-table.tsx index 216e8c8fb1..7e5ef2528d 100644 --- a/packages/apps/human-app/frontend/src/modules/worker/components/jobs-discovery/oracles-table.tsx +++ b/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'; diff --git a/packages/apps/human-app/frontend/src/modules/worker/components/jobs/available-jobs/desktop/available-jobs-table.tsx b/packages/apps/human-app/frontend/src/modules/worker/components/jobs/available-jobs/desktop/available-jobs-table.tsx index a49014f658..3c11391ce7 100644 --- a/packages/apps/human-app/frontend/src/modules/worker/components/jobs/available-jobs/desktop/available-jobs-table.tsx +++ b/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'; diff --git a/packages/apps/human-app/frontend/src/modules/worker/components/jobs/available-jobs/mobile/available-jobs-drawer-mobile.tsx b/packages/apps/human-app/frontend/src/modules/worker/components/jobs/available-jobs/mobile/available-jobs-drawer-mobile.tsx index 3225cbe5bb..8fc33beddc 100644 --- a/packages/apps/human-app/frontend/src/modules/worker/components/jobs/available-jobs/mobile/available-jobs-drawer-mobile.tsx +++ b/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>; diff --git a/packages/apps/human-app/frontend/src/modules/worker/components/jobs/available-jobs/mobile/available-jobs-reward-amount-sort-mobile.tsx b/packages/apps/human-app/frontend/src/modules/worker/components/jobs/available-jobs/mobile/available-jobs-reward-amount-sort-mobile.tsx index 41a74c8e8d..ce6704f8e3 100644 --- a/packages/apps/human-app/frontend/src/modules/worker/components/jobs/available-jobs/mobile/available-jobs-reward-amount-sort-mobile.tsx +++ b/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'; diff --git a/packages/apps/human-app/frontend/src/modules/worker/components/jobs/available-jobs/mobile/available-jobs-table-mobile.tsx b/packages/apps/human-app/frontend/src/modules/worker/components/jobs/available-jobs/mobile/available-jobs-table-mobile.tsx index 361afe7e89..f41a2b2511 100644 --- a/packages/apps/human-app/frontend/src/modules/worker/components/jobs/available-jobs/mobile/available-jobs-table-mobile.tsx +++ b/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'; diff --git a/packages/apps/human-app/frontend/src/modules/worker/components/jobs/escrow-address-search-form.tsx b/packages/apps/human-app/frontend/src/modules/worker/components/jobs/escrow-address-search-form.tsx index 0c02b6a14b..a1443e3ec0 100644 --- a/packages/apps/human-app/frontend/src/modules/worker/components/jobs/escrow-address-search-form.tsx +++ b/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'; diff --git a/packages/apps/human-app/frontend/src/modules/worker/components/jobs/evm-address.tsx b/packages/apps/human-app/frontend/src/modules/worker/components/jobs/evm-address.tsx index 2956b14e25..1370dd854a 100644 --- a/packages/apps/human-app/frontend/src/modules/worker/components/jobs/evm-address.tsx +++ b/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(); diff --git a/packages/apps/human-app/frontend/src/modules/worker/components/jobs/my-jobs/desktop/my-jobs-table.tsx b/packages/apps/human-app/frontend/src/modules/worker/components/jobs/my-jobs/desktop/my-jobs-table.tsx index 16c124d5ec..9b66f0c267 100644 --- a/packages/apps/human-app/frontend/src/modules/worker/components/jobs/my-jobs/desktop/my-jobs-table.tsx +++ b/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'; diff --git a/packages/apps/human-app/frontend/src/modules/worker/components/jobs/my-jobs/mobile/my-jobs-drawer-mobile.tsx b/packages/apps/human-app/frontend/src/modules/worker/components/jobs/my-jobs/mobile/my-jobs-drawer-mobile.tsx index 1dbb9c965e..9355052137 100644 --- a/packages/apps/human-app/frontend/src/modules/worker/components/jobs/my-jobs/mobile/my-jobs-drawer-mobile.tsx +++ b/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'; diff --git a/packages/apps/human-app/frontend/src/modules/worker/components/jobs/my-jobs/mobile/my-jobs-expires-at-sort-mobile.tsx b/packages/apps/human-app/frontend/src/modules/worker/components/jobs/my-jobs/mobile/my-jobs-expires-at-sort-mobile.tsx index 82e97beba4..4dd1281177 100644 --- a/packages/apps/human-app/frontend/src/modules/worker/components/jobs/my-jobs/mobile/my-jobs-expires-at-sort-mobile.tsx +++ b/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'; diff --git a/packages/apps/human-app/frontend/src/modules/worker/components/jobs/my-jobs/mobile/my-jobs-reward-amount-sort-mobile.tsx b/packages/apps/human-app/frontend/src/modules/worker/components/jobs/my-jobs/mobile/my-jobs-reward-amount-sort-mobile.tsx index 675c789c87..818276a65a 100644 --- a/packages/apps/human-app/frontend/src/modules/worker/components/jobs/my-jobs/mobile/my-jobs-reward-amount-sort-mobile.tsx +++ b/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'; diff --git a/packages/apps/human-app/frontend/src/modules/worker/components/jobs/my-jobs/mobile/my-jobs-table-mobile.tsx b/packages/apps/human-app/frontend/src/modules/worker/components/jobs/my-jobs/mobile/my-jobs-table-mobile.tsx index da0ca20c95..02cb08a5e9 100644 --- a/packages/apps/human-app/frontend/src/modules/worker/components/jobs/my-jobs/mobile/my-jobs-table-mobile.tsx +++ b/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'; diff --git a/packages/apps/human-app/frontend/src/modules/worker/components/jobs/sorting.tsx b/packages/apps/human-app/frontend/src/modules/worker/components/jobs/sorting.tsx index 88ff53ad28..037d5d0042 100644 --- a/packages/apps/human-app/frontend/src/modules/worker/components/jobs/sorting.tsx +++ b/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 { diff --git a/packages/apps/human-app/frontend/src/modules/worker/components/jobs/status-chip.tsx b/packages/apps/human-app/frontend/src/modules/worker/components/jobs/status-chip.tsx index f83de025b1..5d33c3ecc0 100644 --- a/packages/apps/human-app/frontend/src/modules/worker/components/jobs/status-chip.tsx +++ b/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(); diff --git a/packages/apps/human-app/frontend/src/modules/worker/components/profile/profile-data.tsx b/packages/apps/human-app/frontend/src/modules/worker/components/profile/profile-data.tsx index 4f8c73a2ab..b3222fe956 100644 --- a/packages/apps/human-app/frontend/src/modules/worker/components/profile/profile-data.tsx +++ b/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() { diff --git a/packages/apps/human-app/frontend/src/modules/worker/components/profile/wallet-connect-done.tsx b/packages/apps/human-app/frontend/src/modules/worker/components/profile/wallet-connect-done.tsx index b7b2425b04..0bf83e501e 100644 --- a/packages/apps/human-app/frontend/src/modules/worker/components/profile/wallet-connect-done.tsx +++ b/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': { diff --git a/packages/apps/human-app/frontend/src/modules/worker/views/email-verification/verify-email.page.tsx b/packages/apps/human-app/frontend/src/modules/worker/views/email-verification/verify-email.page.tsx index e2813a309a..073a8a2bd2 100644 --- a/packages/apps/human-app/frontend/src/modules/worker/views/email-verification/verify-email.page.tsx +++ b/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() { diff --git a/packages/apps/human-app/frontend/src/modules/worker/views/hcaptcha-labeling/hcaptcha-labeling.page.tsx b/packages/apps/human-app/frontend/src/modules/worker/views/hcaptcha-labeling/hcaptcha-labeling.page.tsx index e2607b1c8d..495b7cbfda 100644 --- a/packages/apps/human-app/frontend/src/modules/worker/views/hcaptcha-labeling/hcaptcha-labeling.page.tsx +++ b/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'; diff --git a/packages/apps/human-app/frontend/src/modules/worker/views/jobs/jobs.page.tsx b/packages/apps/human-app/frontend/src/modules/worker/views/jobs/jobs.page.tsx index 64e929b617..6a91be4441 100644 --- a/packages/apps/human-app/frontend/src/modules/worker/views/jobs/jobs.page.tsx +++ b/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 { diff --git a/packages/apps/human-app/frontend/src/modules/worker/views/reset-password/reset-password-success.page.tsx b/packages/apps/human-app/frontend/src/modules/worker/views/reset-password/reset-password-success.page.tsx index d4a525286e..b499e83aeb 100644 --- a/packages/apps/human-app/frontend/src/modules/worker/views/reset-password/reset-password-success.page.tsx +++ b/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(); diff --git a/packages/apps/human-app/frontend/src/modules/worker/views/send-reset-link/send-reset-link-success.page.tsx b/packages/apps/human-app/frontend/src/modules/worker/views/send-reset-link/send-reset-link-success.page.tsx index 8f3ca93ef2..572cf86346 100644 --- a/packages/apps/human-app/frontend/src/modules/worker/views/send-reset-link/send-reset-link-success.page.tsx +++ b/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() { diff --git a/packages/apps/human-app/frontend/src/shared/components/data-entry/checkbox.tsx b/packages/apps/human-app/frontend/src/shared/components/data-entry/checkbox.tsx index 27029d4539..47c02ce7e8 100644 --- a/packages/apps/human-app/frontend/src/shared/components/data-entry/checkbox.tsx +++ b/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 { name: string; diff --git a/packages/apps/human-app/frontend/src/shared/components/data-entry/input.tsx b/packages/apps/human-app/frontend/src/shared/components/data-entry/input.tsx index cedd7cced0..09155d903e 100644 --- a/packages/apps/human-app/frontend/src/shared/components/data-entry/input.tsx +++ b/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 { diff --git a/packages/apps/human-app/frontend/src/shared/components/data-entry/multi-select.tsx b/packages/apps/human-app/frontend/src/shared/components/data-entry/multi-select.tsx index b490116839..b3c64d370b 100644 --- a/packages/apps/human-app/frontend/src/shared/components/data-entry/multi-select.tsx +++ b/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 { options: { label: string; value: string }[]; diff --git a/packages/apps/human-app/frontend/src/shared/components/data-entry/password/password.tsx b/packages/apps/human-app/frontend/src/shared/components/data-entry/password/password.tsx index 6ac372bd38..fe1a11443c 100644 --- a/packages/apps/human-app/frontend/src/shared/components/data-entry/password/password.tsx +++ b/packages/apps/human-app/frontend/src/shared/components/data-entry/password/password.tsx @@ -4,7 +4,7 @@ import React, { useState } from 'react'; import InputAdornment from '@mui/material/InputAdornment'; import IconButton from '@mui/material/IconButton'; import { Input, type InputProps } from '@/shared/components/data-entry/input'; -import { useColorMode } from '@/shared/hooks/use-color-mode'; +import { useColorMode } from '@/shared/contexts/color-mode'; type PasswordProps = InputProps & { type?: never }; diff --git a/packages/apps/human-app/frontend/src/shared/components/data-entry/select.tsx b/packages/apps/human-app/frontend/src/shared/components/data-entry/select.tsx index 25ac162d62..e1c4ec5a3b 100644 --- a/packages/apps/human-app/frontend/src/shared/components/data-entry/select.tsx +++ b/packages/apps/human-app/frontend/src/shared/components/data-entry/select.tsx @@ -6,7 +6,7 @@ import { Controller } from 'react-hook-form'; import InputLabel from '@mui/material/InputLabel'; import FormHelperText from '@mui/material/FormHelperText'; import { Chip } from '@/shared/components/ui/chip'; -import { useColorMode } from '@/shared/hooks/use-color-mode'; +import { useColorMode } from '@/shared/contexts/color-mode'; export interface OptionsProps { id: number; diff --git a/packages/apps/human-app/frontend/src/shared/components/hcaptcha/h-captcha-form.tsx b/packages/apps/human-app/frontend/src/shared/components/hcaptcha/h-captcha-form.tsx index d6c8e1172c..d185792184 100644 --- a/packages/apps/human-app/frontend/src/shared/components/hcaptcha/h-captcha-form.tsx +++ b/packages/apps/human-app/frontend/src/shared/components/hcaptcha/h-captcha-form.tsx @@ -2,7 +2,7 @@ import { useEffect, useRef } from 'react'; import { useFormContext } from 'react-hook-form'; import { Typography } from '@mui/material'; import { FetchError } from '@/api/fetcher'; -import { useColorMode } from '@/shared/hooks/use-color-mode'; +import { useColorMode } from '@/shared/contexts/color-mode'; import { CustomHCaptcha } from './h-captcha'; import { type CustomHCaptchaRef } from './types'; diff --git a/packages/apps/human-app/frontend/src/shared/components/hcaptcha/h-captcha.tsx b/packages/apps/human-app/frontend/src/shared/components/hcaptcha/h-captcha.tsx index 23ea2b03e0..2c65686351 100644 --- a/packages/apps/human-app/frontend/src/shared/components/hcaptcha/h-captcha.tsx +++ b/packages/apps/human-app/frontend/src/shared/components/hcaptcha/h-captcha.tsx @@ -1,7 +1,7 @@ import { forwardRef, useImperativeHandle, useRef } from 'react'; import HCaptcha from '@hcaptcha/react-hcaptcha'; import { env } from '@/shared/env'; -import { useColorMode } from '@/shared/hooks/use-color-mode'; +import { useColorMode } from '@/shared/contexts/color-mode'; import { type CustomHCaptchaRef } from './types'; interface CustomHCaptchaProps { diff --git a/packages/apps/human-app/frontend/src/shared/components/layout/footer.tsx b/packages/apps/human-app/frontend/src/shared/components/layout/footer.tsx index 6face23c34..436d1bc401 100644 --- a/packages/apps/human-app/frontend/src/shared/components/layout/footer.tsx +++ b/packages/apps/human-app/frontend/src/shared/components/layout/footer.tsx @@ -4,7 +4,7 @@ import { useIsMobile } from '@/shared/hooks/use-is-mobile'; import { env } from '@/shared/env'; import { Chat } from '@/modules/homepage/components/chat'; import { breakpoints } from '@/shared/styles/breakpoints'; -import { useColorMode } from '@/shared/hooks/use-color-mode'; +import { useColorMode } from '@/shared/contexts/color-mode'; interface FooterProps { displayChatIcon?: boolean; diff --git a/packages/apps/human-app/frontend/src/shared/components/layout/protected/drawer-navigation.tsx b/packages/apps/human-app/frontend/src/shared/components/layout/protected/drawer-navigation.tsx index 42146e832d..2bc1732f39 100644 --- a/packages/apps/human-app/frontend/src/shared/components/layout/protected/drawer-navigation.tsx +++ b/packages/apps/human-app/frontend/src/shared/components/layout/protected/drawer-navigation.tsx @@ -14,7 +14,7 @@ import { Button } from '@/shared/components/ui/button'; import { useIsMobile } from '@/shared/hooks/use-is-mobile'; import { NAVBAR_PADDING } from '@/shared/components/layout/protected/navbar'; import { colorPalette } from '@/shared/styles/color-palette'; -import { useColorMode } from '@/shared/hooks/use-color-mode'; +import { useColorMode } from '@/shared/contexts/color-mode'; import { onlyDarkModeColor } from '@/shared/styles/dark-color-palette'; import { useHandleMainNavIconClick } from '@/shared/hooks/use-handle-main-nav-icon-click'; diff --git a/packages/apps/human-app/frontend/src/shared/components/layout/protected/navbar.tsx b/packages/apps/human-app/frontend/src/shared/components/layout/protected/navbar.tsx index 2ca37f27f7..4b71b17bc4 100644 --- a/packages/apps/human-app/frontend/src/shared/components/layout/protected/navbar.tsx +++ b/packages/apps/human-app/frontend/src/shared/components/layout/protected/navbar.tsx @@ -6,7 +6,7 @@ import { HumanLogoIcon } from '@/shared/components/ui/icons'; import { useIsMobile } from '@/shared/hooks/use-is-mobile'; import { Button } from '@/shared/components/ui/button'; import { useIsHCaptchaLabelingPage } from '@/shared/hooks/use-is-hcaptcha-labeling-page'; -import { useColorMode } from '@/shared/hooks/use-color-mode'; +import { useColorMode } from '@/shared/contexts/color-mode'; import { useHandleMainNavIconClick } from '@/shared/hooks/use-handle-main-nav-icon-click'; export const NAVBAR_PADDING = '16px'; diff --git a/packages/apps/human-app/frontend/src/shared/components/layout/unprotected/layout.tsx b/packages/apps/human-app/frontend/src/shared/components/layout/unprotected/layout.tsx index 926efddfea..8ec16ae147 100644 --- a/packages/apps/human-app/frontend/src/shared/components/layout/unprotected/layout.tsx +++ b/packages/apps/human-app/frontend/src/shared/components/layout/unprotected/layout.tsx @@ -3,7 +3,7 @@ import { Outlet } from 'react-router-dom'; import { useBackgroundColorStore } from '@/shared/hooks/use-background-store'; import { useIsMobile } from '@/shared/hooks/use-is-mobile'; import { breakpoints } from '@/shared/styles/breakpoints'; -import { useColorMode } from '@/shared/hooks/use-color-mode'; +import { useColorMode } from '@/shared/contexts/color-mode'; import { Footer } from '../footer'; import { Navbar } from './navbar'; diff --git a/packages/apps/human-app/frontend/src/shared/components/ui/alert.tsx b/packages/apps/human-app/frontend/src/shared/components/ui/alert.tsx index 7fdb16b2da..12d26491a1 100644 --- a/packages/apps/human-app/frontend/src/shared/components/ui/alert.tsx +++ b/packages/apps/human-app/frontend/src/shared/components/ui/alert.tsx @@ -4,7 +4,7 @@ import ErrorIcon from '@mui/icons-material/Error'; import MuiAlert from '@mui/material/Alert'; import type { AlertProps as MuiAlertProps } from '@mui/material/Alert'; import { Typography } from '@mui/material'; -import { useColorMode } from '@/shared/hooks/use-color-mode'; +import { useColorMode } from '@/shared/contexts/color-mode'; import { darkColorPalette } from '@/shared/styles/dark-color-palette'; const getIcon = (severity: MuiAlertProps['severity'], isDarkMode: boolean) => { 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 index 83ae568c80..c4a469a4c7 100644 --- a/packages/apps/human-app/frontend/src/shared/components/ui/chip.tsx +++ b/packages/apps/human-app/frontend/src/shared/components/ui/chip.tsx @@ -1,5 +1,5 @@ import { Box, Typography } from '@mui/material'; -import { useColorMode } from '@/shared/hooks/use-color-mode'; +import { useColorMode } from '@/shared/contexts/color-mode'; interface ChipProps { label: string | React.ReactElement; diff --git a/packages/apps/human-app/frontend/src/shared/components/ui/dark-mode-switch.tsx b/packages/apps/human-app/frontend/src/shared/components/ui/dark-mode-switch.tsx index cda8a7cab6..6e41830d90 100644 --- a/packages/apps/human-app/frontend/src/shared/components/ui/dark-mode-switch.tsx +++ b/packages/apps/human-app/frontend/src/shared/components/ui/dark-mode-switch.tsx @@ -1,6 +1,6 @@ import { Grid, Switch } from '@mui/material'; import { MoonIcon, SunIcon } from '@/shared/components/ui/icons'; -import { useColorMode } from '@/shared/hooks/use-color-mode'; +import { useColorMode } from '@/shared/contexts/color-mode'; export function DarkModeSwitch() { const { switchMode, isDarkMode } = useColorMode(); diff --git a/packages/apps/human-app/frontend/src/shared/components/ui/empty-placeholder.tsx b/packages/apps/human-app/frontend/src/shared/components/ui/empty-placeholder.tsx index 4cb8e19a0e..fa2eadfade 100644 --- a/packages/apps/human-app/frontend/src/shared/components/ui/empty-placeholder.tsx +++ b/packages/apps/human-app/frontend/src/shared/components/ui/empty-placeholder.tsx @@ -1,6 +1,6 @@ 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'; export function EmptyPlaceholder() { const { colorPalette } = useColorMode(); diff --git a/packages/apps/human-app/frontend/src/shared/components/ui/icons.tsx b/packages/apps/human-app/frontend/src/shared/components/ui/icons.tsx index 14d306e695..25681beef6 100644 --- a/packages/apps/human-app/frontend/src/shared/components/ui/icons.tsx +++ b/packages/apps/human-app/frontend/src/shared/components/ui/icons.tsx @@ -36,7 +36,7 @@ import SunIconDark from '@/assets/icons-dark-mode/sun.svg'; import SunIconLight from '@/assets/icons/sun.svg'; import MoonIconDark from '@/assets/icons-dark-mode/moon.svg'; import MoonIconLight from '@/assets/icons/moon.svg'; -import { useColorMode } from '@/shared/hooks/use-color-mode'; +import { useColorMode } from '@/shared/contexts/color-mode'; import WorkHeaderDark from '@/assets/icons-dark-mode/work-header.svg'; import WorkHeaderLight from '@/assets/icons/work-header.svg'; diff --git a/packages/apps/human-app/frontend/src/shared/components/ui/loader.tsx b/packages/apps/human-app/frontend/src/shared/components/ui/loader.tsx index 2f83b76aa2..1c32b0f261 100644 --- a/packages/apps/human-app/frontend/src/shared/components/ui/loader.tsx +++ b/packages/apps/human-app/frontend/src/shared/components/ui/loader.tsx @@ -1,6 +1,6 @@ import type { CircularProgressProps } from '@mui/material/CircularProgress'; import CircularProgress from '@mui/material/CircularProgress'; -import { useColorMode } from '@/shared/hooks/use-color-mode'; +import { useColorMode } from '@/shared/contexts/color-mode'; export function Loader({ ...props }: CircularProgressProps) { const { colorPalette } = useColorMode(); diff --git a/packages/apps/human-app/frontend/src/shared/components/ui/no-records.tsx b/packages/apps/human-app/frontend/src/shared/components/ui/no-records.tsx index fb49dc542e..190638947e 100644 --- a/packages/apps/human-app/frontend/src/shared/components/ui/no-records.tsx +++ b/packages/apps/human-app/frontend/src/shared/components/ui/no-records.tsx @@ -1,5 +1,5 @@ import { Grid } from '@mui/material'; -import { useColorMode } from '@/shared/hooks/use-color-mode'; +import { useColorMode } from '@/shared/contexts/color-mode'; export function NoRecords() { const { colorPalette } = useColorMode(); diff --git a/packages/apps/human-app/frontend/src/shared/components/ui/page-card/page-card-error.tsx b/packages/apps/human-app/frontend/src/shared/components/ui/page-card/page-card-error.tsx index 91830fb2af..c86e5e6d71 100644 --- a/packages/apps/human-app/frontend/src/shared/components/ui/page-card/page-card-error.tsx +++ b/packages/apps/human-app/frontend/src/shared/components/ui/page-card/page-card-error.tsx @@ -4,7 +4,7 @@ import { t } from 'i18next'; import { Button } from '@/shared/components/ui/button'; import { routerPaths } from '@/router/router-paths'; import { Alert } from '@/shared/components/ui/alert'; -import { useColorMode } from '@/shared/hooks/use-color-mode'; +import { useColorMode } from '@/shared/contexts/color-mode'; import { commonDarkPageCardStyles, commonPageCardStyles } from './styles'; import { type ErrorMessageProps } from './types'; diff --git a/packages/apps/human-app/frontend/src/shared/components/ui/page-card/page-card-loader.tsx b/packages/apps/human-app/frontend/src/shared/components/ui/page-card/page-card-loader.tsx index fc33fcd7f0..fc13e4a9f0 100644 --- a/packages/apps/human-app/frontend/src/shared/components/ui/page-card/page-card-loader.tsx +++ b/packages/apps/human-app/frontend/src/shared/components/ui/page-card/page-card-loader.tsx @@ -1,6 +1,6 @@ import { Grid } from '@mui/material'; import { Loader } from '@/shared/components/ui/loader'; -import { useColorMode } from '@/shared/hooks/use-color-mode'; +import { useColorMode } from '@/shared/contexts/color-mode'; import { commonDarkPageCardStyles, commonPageCardStyles } from './styles'; import { type CommonProps } from './types'; diff --git a/packages/apps/human-app/frontend/src/shared/components/ui/page-card/page-card.tsx b/packages/apps/human-app/frontend/src/shared/components/ui/page-card/page-card.tsx index 6d1ed25f48..ee4ad585a4 100644 --- a/packages/apps/human-app/frontend/src/shared/components/ui/page-card/page-card.tsx +++ b/packages/apps/human-app/frontend/src/shared/components/ui/page-card/page-card.tsx @@ -6,7 +6,7 @@ import { Button } from '@/shared/components/ui/button'; import { breakpoints } from '@/shared/styles/breakpoints'; import { routerPaths } from '@/router/router-paths'; import { onlyDarkModeColor } from '@/shared/styles/dark-color-palette'; -import { useColorMode } from '@/shared/hooks/use-color-mode'; +import { useColorMode } from '@/shared/contexts/color-mode'; import { useIsMobile } from '@/shared/hooks/use-is-mobile'; import { commonDarkPageCardStyles, commonPageCardStyles } from './styles'; diff --git a/packages/apps/human-app/frontend/src/shared/components/ui/profile-list-item.tsx b/packages/apps/human-app/frontend/src/shared/components/ui/profile-list-item.tsx index 5cbf39b480..645c02e693 100644 --- a/packages/apps/human-app/frontend/src/shared/components/ui/profile-list-item.tsx +++ b/packages/apps/human-app/frontend/src/shared/components/ui/profile-list-item.tsx @@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next'; import { Button } from '@/shared/components/ui/button'; import { CheckmarkIcon, LockerIcon } from '@/shared/components/ui/icons'; import { Chips } from '@/shared/components/ui/chips'; -import { useColorMode } from '@/shared/hooks/use-color-mode'; +import { useColorMode } from '@/shared/contexts/color-mode'; interface ProfileListItemProps { header: string; diff --git a/packages/apps/human-app/frontend/src/shared/components/ui/success-label.tsx b/packages/apps/human-app/frontend/src/shared/components/ui/success-label.tsx index 8ef8a4acef..e6f8c96501 100644 --- a/packages/apps/human-app/frontend/src/shared/components/ui/success-label.tsx +++ b/packages/apps/human-app/frontend/src/shared/components/ui/success-label.tsx @@ -1,6 +1,6 @@ import Grid from '@mui/material/Grid'; import CheckCircleIcon from '@mui/icons-material/CheckCircle'; -import { useColorMode } from '@/shared/hooks/use-color-mode'; +import { useColorMode } from '@/shared/contexts/color-mode'; export function SuccessLabel({ children }: { children: string }) { const { colorPalette } = useColorMode(); diff --git a/packages/apps/human-app/frontend/src/shared/components/ui/table/table-header-menu.tsx/filtering.tsx b/packages/apps/human-app/frontend/src/shared/components/ui/table/table-header-menu.tsx/filtering.tsx index 9c963c14f2..1dd92c9ecd 100644 --- a/packages/apps/human-app/frontend/src/shared/components/ui/table/table-header-menu.tsx/filtering.tsx +++ b/packages/apps/human-app/frontend/src/shared/components/ui/table/table-header-menu.tsx/filtering.tsx @@ -4,7 +4,7 @@ import List from '@mui/material/List'; import Divider from '@mui/material/Divider'; import ListItem from '@mui/material/ListItem'; import { t } from 'i18next'; -import { useColorMode } from '@/shared/hooks/use-color-mode'; +import { useColorMode } from '@/shared/contexts/color-mode'; interface FilteringOption { name: string; diff --git a/packages/apps/human-app/frontend/src/shared/components/ui/table/table-header-menu.tsx/sorting.tsx b/packages/apps/human-app/frontend/src/shared/components/ui/table/table-header-menu.tsx/sorting.tsx index eda812848a..5d5749b639 100644 --- a/packages/apps/human-app/frontend/src/shared/components/ui/table/table-header-menu.tsx/sorting.tsx +++ b/packages/apps/human-app/frontend/src/shared/components/ui/table/table-header-menu.tsx/sorting.tsx @@ -2,7 +2,7 @@ import { Divider, Typography } from '@mui/material'; import List from '@mui/material/List'; import ListItemText from '@mui/material/ListItemText'; import { t } from 'i18next'; -import { useColorMode } from '@/shared/hooks/use-color-mode'; +import { useColorMode } from '@/shared/contexts/color-mode'; interface SortingMenuProps { sortingOptions: { label: string; sortCallback: () => void }[]; diff --git a/packages/apps/human-app/frontend/src/shared/components/ui/ui-example.tsx b/packages/apps/human-app/frontend/src/shared/components/ui/ui-example.tsx index 231cb7451e..f3eb5d962e 100644 --- a/packages/apps/human-app/frontend/src/shared/components/ui/ui-example.tsx +++ b/packages/apps/human-app/frontend/src/shared/components/ui/ui-example.tsx @@ -28,7 +28,7 @@ import { import { TableExample } from '@/modules/playground/components/table-example/table-example'; import { Alert } from '@/shared/components/ui/alert'; import { ConnectWalletBtn } from '@/shared/components/ui/connect-wallet-btn'; -import { useColorMode } from '@/shared/hooks/use-color-mode'; +import { useColorMode } from '@/shared/contexts/color-mode'; export function UiExample() { const { colorPalette } = useColorMode(); diff --git a/packages/apps/human-app/frontend/src/shared/contexts/color-mode-context.tsx b/packages/apps/human-app/frontend/src/shared/contexts/color-mode-context.tsx deleted file mode 100644 index 6856a418d8..0000000000 --- a/packages/apps/human-app/frontend/src/shared/contexts/color-mode-context.tsx +++ /dev/null @@ -1,109 +0,0 @@ -import type { ReactNode } from 'react'; -import { createContext, useEffect, useMemo, useState } from 'react'; -import { ThemeProvider, createTheme } from '@mui/material'; -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'; - -export interface ColorModeContextProps { - isDarkMode: boolean; - colorPalette: typeof defaultColorPalette; - switchMode: () => void; -} - -const MODE_LOCAL_STORAGE_KEY = 'mode'; - -const setModeInLocalStorage = (mode: 'dark' | 'light') => { - localStorage.setItem(MODE_LOCAL_STORAGE_KEY, mode); -}; - -const isDarkInModeLocalStorage = () => { - const mode = localStorage.getItem(MODE_LOCAL_STORAGE_KEY); - if (mode === 'dark') { - return true; - } - return false; -}; - -const isModeSetILocalStorage = () => { - return Boolean(localStorage.getItem(MODE_LOCAL_STORAGE_KEY)); -}; - -export const ColorModeContext = createContext< - ColorModeContextProps | undefined ->(undefined); - -interface ColorModeProviderProps { - children: ReactNode; -} - -export function ColorModeProvider({ children }: ColorModeProviderProps) { - const [isDarkMode, setIsDarkMode] = useState( - isDarkInModeLocalStorage() - ); - - const switchMode = () => { - setIsDarkMode((current) => { - const newMode = !current; - setModeInLocalStorage(newMode ? 'dark' : 'light'); - return newMode; - }); - }; - - const runColorMode = ( - fn: (matches: boolean) => void - ): (() => void) | undefined => { - const query = window.matchMedia('(prefers-color-scheme: dark)'); - fn(query.matches); - - const listener = (event: MediaQueryListEvent) => { - fn(event.matches); - }; - query.addEventListener('change', listener); - - return () => { - query.removeEventListener('change', listener); - }; - }; - - useEffect(() => { - const handleColorModeChange = (matches: boolean) => { - if (isModeSetILocalStorage()) { - return; - } - setIsDarkMode(matches); - if (matches) { - document.body.classList.add('dark-mode'); - } else { - document.body.classList.remove('dark-mode'); - } - }; - - const unsubscribe = runColorMode(handleColorModeChange); - - return () => { - if (unsubscribe) unsubscribe(); - }; - }, []); - const themes = useMemo( - () => (isDarkMode ? createTheme(darkTheme) : createTheme(theme)), - [isDarkMode] - ); - const colorPalette = useMemo( - () => (isDarkMode ? darkColorPalette : defaultColorPalette), - [isDarkMode] - ); - return ( - - - - {children} - - - - ); -} diff --git a/packages/apps/human-app/frontend/src/shared/contexts/color-mode/color-mode-handlers.ts b/packages/apps/human-app/frontend/src/shared/contexts/color-mode/color-mode-handlers.ts new file mode 100644 index 0000000000..6154e23f8c --- /dev/null +++ b/packages/apps/human-app/frontend/src/shared/contexts/color-mode/color-mode-handlers.ts @@ -0,0 +1,15 @@ +export const addColorSchemePrefsListener = ( + fn: (matches: boolean) => void +): (() => void) => { + const query = window.matchMedia('(prefers-color-scheme: dark)'); + fn(query.matches); + + const listener = (event: MediaQueryListEvent) => { + fn(event.matches); + }; + query.addEventListener('change', listener); + + return () => { + query.removeEventListener('change', listener); + }; +}; diff --git a/packages/apps/human-app/frontend/src/shared/contexts/color-mode/color-mode-settings.ts b/packages/apps/human-app/frontend/src/shared/contexts/color-mode/color-mode-settings.ts new file mode 100644 index 0000000000..2e8b2c9134 --- /dev/null +++ b/packages/apps/human-app/frontend/src/shared/contexts/color-mode/color-mode-settings.ts @@ -0,0 +1,22 @@ +const MODE_LOCAL_STORAGE_KEY = 'mode'; + +export enum ColorMode { + DARK = 'dark', + LIGHT = 'light', +} + +export const saveColorMode = (mode: ColorMode) => { + localStorage.setItem(MODE_LOCAL_STORAGE_KEY, mode); +}; + +export const isDarkColorMode = () => { + const mode = localStorage.getItem(MODE_LOCAL_STORAGE_KEY); + if (mode === ColorMode.DARK) { + return true; + } + return false; +}; + +export const hasColorMode = () => { + return Boolean(localStorage.getItem(MODE_LOCAL_STORAGE_KEY)); +}; diff --git a/packages/apps/human-app/frontend/src/shared/contexts/color-mode/color-mode.tsx b/packages/apps/human-app/frontend/src/shared/contexts/color-mode/color-mode.tsx new file mode 100644 index 0000000000..d8b14ca8f9 --- /dev/null +++ b/packages/apps/human-app/frontend/src/shared/contexts/color-mode/color-mode.tsx @@ -0,0 +1,94 @@ +import type { ReactNode } from 'react'; +import { + createContext, + useEffect, + useMemo, + useState, + useCallback, +} from 'react'; +import { ThemeProvider, createTheme } from '@mui/material'; +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 { + ColorMode, + hasColorMode, + isDarkColorMode, + saveColorMode, +} from './color-mode-settings'; +import { addColorSchemePrefsListener } from './color-mode-handlers'; + +export interface ColorModeContextProps { + isDarkMode: boolean; + colorPalette: typeof defaultColorPalette; + switchMode: () => void; +} + +export const ColorModeContext = createContext< + ColorModeContextProps | undefined +>(undefined); + +interface ColorModeProviderProps { + children: ReactNode; +} + +export function ColorModeProvider({ + children, +}: Readonly) { + const [isDarkMode, setIsDarkMode] = useState(isDarkColorMode()); + + const handleColorSchemePrefsChange = (prefersDarkScheme: boolean) => { + if (hasColorMode()) { + return; + } + setIsDarkMode(prefersDarkScheme); + if (prefersDarkScheme) { + document.body.classList.add('dark-mode'); + } else { + document.body.classList.remove('dark-mode'); + } + }; + + useEffect(() => { + const unsubscribe = addColorSchemePrefsListener( + handleColorSchemePrefsChange + ); + + return () => { + unsubscribe(); + }; + }, []); + + const switchMode = useCallback(() => { + setIsDarkMode((current) => { + const newMode = !current; + saveColorMode(newMode ? ColorMode.DARK : ColorMode.LIGHT); + return newMode; + }); + }, []); + + const themes = useMemo( + () => (isDarkMode ? createTheme(darkTheme) : createTheme(theme)), + [isDarkMode] + ); + const colorPalette = useMemo( + () => (isDarkMode ? darkColorPalette : defaultColorPalette), + [isDarkMode] + ); + const contextValue = useMemo( + () => ({ isDarkMode, colorPalette, switchMode }), + [isDarkMode, colorPalette, switchMode] + ); + + return ( + + + + {children} + + + + ); +} diff --git a/packages/apps/human-app/frontend/src/shared/contexts/color-mode/index.ts b/packages/apps/human-app/frontend/src/shared/contexts/color-mode/index.ts new file mode 100644 index 0000000000..a5d9ebc2d8 --- /dev/null +++ b/packages/apps/human-app/frontend/src/shared/contexts/color-mode/index.ts @@ -0,0 +1,2 @@ +export * from './use-color-mode'; +export * from './color-mode'; diff --git a/packages/apps/human-app/frontend/src/shared/hooks/use-color-mode.tsx b/packages/apps/human-app/frontend/src/shared/contexts/color-mode/use-color-mode.tsx similarity index 62% rename from packages/apps/human-app/frontend/src/shared/hooks/use-color-mode.tsx rename to packages/apps/human-app/frontend/src/shared/contexts/color-mode/use-color-mode.tsx index 74ba1d86f5..2e8848e973 100644 --- a/packages/apps/human-app/frontend/src/shared/hooks/use-color-mode.tsx +++ b/packages/apps/human-app/frontend/src/shared/contexts/color-mode/use-color-mode.tsx @@ -1,6 +1,5 @@ import { useContext } from 'react'; -import type { ColorModeContextProps } from '@/shared/contexts/color-mode-context'; -import { ColorModeContext } from '@/shared/contexts/color-mode-context'; +import { type ColorModeContextProps, ColorModeContext } from './color-mode'; export const useColorMode = (): ColorModeContextProps => { const context = useContext(ColorModeContext); diff --git a/packages/apps/human-app/frontend/src/shared/hooks/use-notification.tsx b/packages/apps/human-app/frontend/src/shared/hooks/use-notification.tsx index 8a22eb3aee..fbf3153f35 100644 --- a/packages/apps/human-app/frontend/src/shared/hooks/use-notification.tsx +++ b/packages/apps/human-app/frontend/src/shared/hooks/use-notification.tsx @@ -1,7 +1,7 @@ import { useCallback } from 'react'; import { type SnackbarKey, useSnackbar } from 'notistack'; import CloseIcon from '@mui/icons-material/Close'; -import { useColorMode } from '@/shared/hooks/use-color-mode'; +import { useColorMode } from '@/shared/contexts/color-mode'; import { colorPalette as lightColorPalette } from '@/shared/styles/color-palette'; import { breakpoints } from '@/shared/styles/breakpoints';