fix: custom theme cannot be set properly

GZTimeWalker · May 10, 2024 · 725b3a1 · 725b3a1
1 parent fc3e8b9
commit 725b3a1
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 19 deletions.
diff --git a/src/GZCTF/ClientApp/src/components/AppHeader.tsx b/src/GZCTF/ClientApp/src/components/AppHeader.tsx
@@ -14,8 +14,8 @@ import { Icon } from '@mdi/react'
 import { FC, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Link, useLocation, useNavigate } from 'react-router-dom'
-import CustomColorModal from '@Components/CustomColorModal'
 import LogoHeader from '@Components/LogoHeader'
+import { AppControlProps } from '@Components/WithNavbar'
 import { LanguageMap, SupportedLanguages, useLanguage } from '@Utils/I18n'
 import { useIsMobile } from '@Utils/ThemeOverride'
 import { clearLocalCache } from '@Utils/useConfig'
@@ -47,14 +47,13 @@ const useHeaderStyles = createStyles((theme, _, u) => ({
   },
 }))
 
-const AppHeader: FC = () => {
+const AppHeader: FC<AppControlProps> = ({ openColorModal }) => {
   const [opened, setOpened] = useState(false)
   const { classes: headerClasses } = useHeaderStyles()
 
   const location = useLocation()
   const navigate = useNavigate()
 
-  const [colorModalOpened, setColorModalOpened] = useState(false)
   const { colorScheme, toggleColorScheme } = useMantineColorScheme()
   const { user, error } = useUser()
 
@@ -150,17 +149,13 @@ const AppHeader: FC = () => {
               <Menu.Item onClick={clearLocalCache} leftSection={<Icon path={mdiCached} size={1} />}>
                 {t('common.tab.account.clean_cache')}
               </Menu.Item>
-              <Menu.Item
-                onClick={() => setColorModalOpened(true)}
-                leftSection={<Icon path={mdiPalette} size={1} />}
-              >
+              <Menu.Item onClick={openColorModal} leftSection={<Icon path={mdiPalette} size={1} />}>
                 {t('common.content.color.title')}
               </Menu.Item>
             </Menu.Dropdown>
           </Menu>
         </Group>
       </Group>
-      <CustomColorModal opened={colorModalOpened} onClose={() => setColorModalOpened(false)} />
     </AppShell.Header>
   )
 }

diff --git a/src/GZCTF/ClientApp/src/components/AppNavbar.tsx b/src/GZCTF/ClientApp/src/components/AppNavbar.tsx
@@ -32,7 +32,7 @@ import { Icon } from '@mdi/react'
 import React, { FC, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Link, useLocation, useNavigate } from 'react-router-dom'
-import CustomColorModal from '@Components/CustomColorModal'
+import { AppControlProps } from '@Components/WithNavbar'
 import MainIcon from '@Components/icon/MainIcon'
 import { LanguageMap, SupportedLanguages, useLanguage } from '@Utils/I18n'
 import { clearLocalCache } from '@Utils/useConfig'
@@ -124,7 +124,7 @@ const NavbarLink: FC<NavbarLinkProps> = (props: NavbarLinkProps) => {
   )
 }
 
-const AppNavbar: FC = () => {
+const AppNavbar: FC<AppControlProps> = ({ openColorModal }) => {
   const location = useLocation()
   const navigate = useNavigate()
   const { classes, theme } = useStyles()
@@ -134,7 +134,6 @@ const AppNavbar: FC = () => {
   const { user, error } = useUser()
   const { t } = useTranslation()
   const { setLanguage, supportedLanguages } = useLanguage()
-  const [colorModalOpened, setColorModalOpened] = useState(false)
 
   const items: NavbarItem[] = [
     { icon: mdiHomeVariantOutline, label: 'common.tab.home', link: '/' },
@@ -267,10 +266,7 @@ const AppNavbar: FC = () => {
               <Menu.Item onClick={clearLocalCache} leftSection={<Icon path={mdiCached} size={1} />}>
                 {t('common.tab.account.clean_cache')}
               </Menu.Item>
-              <Menu.Item
-                onClick={() => setColorModalOpened(true)}
-                leftSection={<Icon path={mdiPalette} size={1} />}
-              >
+              <Menu.Item onClick={openColorModal} leftSection={<Icon path={mdiPalette} size={1} />}>
                 {t('common.content.color.title')}
               </Menu.Item>
               <MenuDivider />
@@ -293,7 +289,6 @@ const AppNavbar: FC = () => {
               )}
             </Menu.Dropdown>
           </Menu>
-          <CustomColorModal opened={colorModalOpened} onClose={() => setColorModalOpened(false)} />
         </Stack>
       </AppShell.Section>
     </AppShell.Navbar>

diff --git a/src/GZCTF/ClientApp/src/components/WithNavbar.tsx b/src/GZCTF/ClientApp/src/components/WithNavbar.tsx
@@ -6,10 +6,11 @@ import {
   useMantineColorScheme,
   useMantineTheme,
 } from '@mantine/core'
-import React, { FC } from 'react'
+import React, { FC, useState } from 'react'
 import AppFooter from '@Components/AppFooter'
 import AppHeader from '@Components/AppHeader'
 import AppNavbar from '@Components/AppNavbar'
+import CustomColorModal from '@Components/CustomColorModal'
 import IconHeader from '@Components/IconHeader'
 import Watermark from '@Components/Watermark'
 import WithWiderScreen from '@Components/WithWiderScreen'
@@ -25,6 +26,10 @@ interface WithNavBarProps extends React.PropsWithChildren {
   stickyHeader?: boolean
 }
 
+export interface AppControlProps {
+  openColorModal: () => void
+}
+
 const WithNavBar: FC<WithNavBarProps> = ({
   children,
   width,
@@ -38,6 +43,9 @@ const WithNavBar: FC<WithNavBarProps> = ({
   const { colorScheme } = useMantineColorScheme()
   const { user } = useUser()
   const isMobile = useIsMobile()
+  const [colorModalOpened, setColorModalOpened] = useState(false)
+
+  const openColorModal = () => setColorModalOpened(true)
 
   return (
     <WithWiderScreen minWidth={minWidth}>
@@ -65,8 +73,8 @@ const WithNavBar: FC<WithNavBarProps> = ({
             },
           }}
         >
-          <AppHeader />
-          <AppNavbar />
+          <AppHeader openColorModal={openColorModal} />
+          <AppNavbar openColorModal={openColorModal} />
           <AppShell.Main w="100%">
             <Stack
               w="100%"
@@ -95,6 +103,10 @@ const WithNavBar: FC<WithNavBarProps> = ({
               >
                 {children}
               </Box>
+              <CustomColorModal
+                opened={colorModalOpened}
+                onClose={() => setColorModalOpened(false)}
+              />
             </Stack>
             {withFooter && <AppFooter />}
           </AppShell.Main>