Making ThemeSwitcher it's own component and styling

Sitecore · Feb 12, 2024 · c029457 · c029457
1 parent 12d49dc
commit c029457
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 67 deletions.
diff --git a/src/chakra/theme/fantasy/select.ts b/src/chakra/theme/fantasy/select.ts
@@ -0,0 +1,25 @@
+import { selectAnatomy } from '@chakra-ui/anatomy'
+import { createMultiStyleConfigHelpers } from '@chakra-ui/react'
+
+const { definePartsStyle, defineMultiStyleConfig } =
+  createMultiStyleConfigHelpers(selectAnatomy.keys)
+
+const variants = {
+  themeSelect: definePartsStyle({
+    field: {
+      background: '#545859',
+      color: 'white',
+      '& > option': {
+        background: '#545859',
+        color: 'white',
+      },
+      fontFamily: 'var(--font-fondamento)',
+    },
+    icon: {
+      color: 'white',
+    },
+
+  }),
+}
+
+export const selectTheme = defineMultiStyleConfig({ variants })
diff --git a/src/chakra/theme/fantasy/theme.ts b/src/chakra/theme/fantasy/theme.ts
@@ -6,6 +6,7 @@ import { headingTheme } from './headings';
 import { progressTheme } from './progress';
 import { textTheme } from './text';
 import { tooltipTheme } from './tooltip';
+import { selectTheme } from './select';
 
 const fantasyTheme = extendTheme(
   withDefaultColorScheme({
@@ -27,6 +28,8 @@ const fantasyTheme = extendTheme(
       Tooltip: tooltipTheme,
       Card: cardTheme,
       Button: buttonTheme,
+      Select: selectTheme,
+      Option: selectTheme
     },
   });
 

diff --git a/src/components/ui/Navigation/Navigation.tsx b/src/components/ui/Navigation/Navigation.tsx
@@ -1,12 +1,12 @@
-import { Box, Button, HStack, IconButton, Link, Show, Tooltip, Select } from '@chakra-ui/react';
-import { useGameInfoContext } from 'components/Contexts';
+import { Box, Button, HStack, IconButton, Link, Show, Tooltip } from '@chakra-ui/react';
 import Image from 'next/image';
 import Router from 'next/router';
 import { FC } from 'react';
 import { MdCached, MdOutlineMarkChatRead, MdSave } from 'react-icons/md';
+
 import { InfoModal } from '../InfoModal/InfoModal';
 import { ProgressTracker } from '../ProgressTracker/ProgressTracker';
-import { useThemeSwitcher } from '../ThemeSwitcher/ThemeSwitcher';
+import ThemeSwitcher from '../ThemeSwitcher/ThemeSwitcher';
 
 interface NavigationProps {
   showProgressBar?: boolean;
@@ -22,8 +22,6 @@ export const Navigation: FC<NavigationProps> = ({
   showSaveButton = true,
   showFeedbackButton = true,
 }) => {
-  const gameInfoContext = useGameInfoContext();
-  const themeSwitcher = useThemeSwitcher();
 
   return (
     <>
@@ -45,9 +43,9 @@ export const Navigation: FC<NavigationProps> = ({
                 {showFeedbackButton && (
                   <Show
                     above={
-                        showProgressBar && showResetButton
-                          ? 'md'
-                          : 'sm'
+                      showProgressBar && showResetButton
+                        ? 'md'
+                        : 'sm'
                     }
                   >
                     <Tooltip label="Leave Feedback" aria-label="Leave Feedback">
@@ -92,11 +90,7 @@ export const Navigation: FC<NavigationProps> = ({
 
                 <InfoModal />
               </HStack>
-              <Select onChange={(event) => themeSwitcher.changeTheme(event.target.selectedOptions[0].value)}>
-                <option selected hidden disabled value="">Change Theme</option>
-                <option value='fantasy'>Fantasy</option>
-                <option value='corporate'>Corporate</option>
-              </Select>
+                <ThemeSwitcher />
             </Box>
           </HStack>
         </Box>

diff --git a/src/components/ui/ThemeSwitcher/ThemeSwitcher.tsx b/src/components/ui/ThemeSwitcher/ThemeSwitcher.tsx
@@ -1,58 +1,18 @@
-import { ChakraProvider } from '@chakra-ui/react';
-import { corporateTheme } from 'chakra/theme/corporate/theme';
-import fantasyTheme from 'chakra/theme/fantasy/theme';
-import { useEngageTracker } from 'components/Contexts';
-import React, { FC, useState, createContext } from 'react';
-import * as GTag from 'lib/GTag';
+import React from 'react'
+import { Select, Text, Show } from '@chakra-ui/react';
+import { useThemeContext } from 'components/Contexts/ThemeContext/ThemeContext';
 
-interface ThemeSwitcherProps {
-  children: React.ReactNode;
-}
-
-export const ThemeSwitcher = createContext<ThemeSwitcherType>({} as ThemeSwitcherType);
-
-export interface ThemeSwitcherType {
-  changeTheme: (themeChoice: string) => void;
-  currentTheme: string;
-}
-
-export const useThemeSwitcher = () => React.useContext(ThemeSwitcher);
-
-export const ThemeSwitcherProvider: FC<ThemeSwitcherProps> = ({ children }) => {
-  const tracker = useEngageTracker();
-
-  const themes = {
-    "corporate": corporateTheme,
-    "fantasy": fantasyTheme
-  };
+export default function () {
 
-  const [themeName, setThemeName] = useState<string>("corporate");
-
-  const changeTheme = async (themeChoice: string) => {
-    await tracker.TrackEvent('THEME_CHANGE', { theme: themeChoice });
-    GTag.event('theme_change', 'Theme', themeChoice);
-
-    setThemeName(themeChoice);
-  }
-
-  const currentTheme = () => {
-    return themeName;
-  }
-
-  const theme = themes[themeName as keyof typeof themes];
+  const themeContext = useThemeContext();
 
   return (
-    <ThemeSwitcher.Provider
-      value={{
-        changeTheme: (themeChoice: string) => {
-          changeTheme(themeChoice);
-        },
-        currentTheme: currentTheme()
-      }}
-    >
-      <ChakraProvider theme={theme}>
-        {children}
-      </ChakraProvider>
-    </ThemeSwitcher.Provider>
-  );
-};
+    <>
+      <Select variant={'themeSelect'} mt={2} size={{base: 'sm', lg: "md"}} onChange={(event) => themeContext.changeTheme(event.target.selectedOptions[0].value)}>
+        <option selected hidden disabled value="">Theme</option>
+        <option value='corporate'>Corporate</option>
+        <option value='fantasy'>👑 Fantasy</option>
+      </Select>
+    </>
+  )
+}