use theme toggle from thorin

Author: v1rtl

package.json

@@ -51,7 +51,7 @@
     "@ensdomains/ens-contracts": "1.4.0-beta.2",
     "@ensdomains/ens-test-env": "0.6.0",
     "@ensdomains/ensjs": "4.0.3-alpha.12",
-    "@ensdomains/thorin": "1.0.0-beta.24",
+    "@ensdomains/thorin": "1.0.0-beta.25",
     "@metamask/post-message-stream": "^6.1.2",
     "@metamask/providers": "^14.0.2",
     "@noble/hashes": "^1.3.2",

pnpm-lock.yaml

@@ -164,7 +164,7 @@ const LanguageMenu = ({
         <Heading onClick={() => setCurrentView('main')}>
           <LeftArrowSVG width={16} height={16} />
           <InnerHeading>
-            <LanguageSVG />
+            <LanguageSVG height={16} width={16} />
             <Typography weight="bold">{t('navigation.language')}</Typography>
           </InnerHeading>
         </Heading>

src/components/@molecules/Hamburger/LanguageMenu.tsx

@@ -5,9 +5,9 @@ import styled, { css } from 'styled-components'
 import {
   CurrencyToggle,
   LanguageSVG,
-  MoonSVG,
   RightChevronSVG,
   Spinner,
+  ThemeSVG,
   Typography,
   WalletSVG,
 } from '@ensdomains/thorin'
@@ -273,7 +273,7 @@ const MainMenu = ({ setCurrentView }: { setCurrentView: (view: HamburgerView) =>
         </HoverableSettingsItem>
         <HoverableSettingsItem onClick={() => setCurrentView('theme')}>
           <div>
-            <MoonSVG height={16} width={16} />
+            <ThemeSVG height={16} width={16} />
             <Typography weight="bold">{t('navigation.theme')}</Typography>
           </div>
         </HoverableSettingsItem>

src/components/@molecules/Hamburger/MainMenu.tsx

@@ -1,18 +1,7 @@
-import { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled, { css } from 'styled-components'
 
-import {
-  CheckCircleSVG,
-  LanguageSVG,
-  LeftArrowSVG,
-  MoonSVG,
-  SunSVG,
-  Typography,
-  useTheme,
-} from '@ensdomains/thorin'
-
-import { useLocalStorage } from '@app/hooks/useLocalStorage'
+import { LeftArrowSVG, ThemeSVG, ThemeToggle, Typography } from '@ensdomains/thorin'
 
 import type { HamburgerView } from './Hamburger'
 
@@ -92,142 +81,31 @@ const InnerHeading = styled.div(
   `,
 )
 
-const LanguagesContainer = styled.div(
-  ({ theme }) => css`
-    display: flex;
-    flex-direction: column-reverse;
-    align-items: stretch;
-    justify-content: flex-start;
-    gap: ${theme.space['2']};
-    @media (min-width: ${theme.breakpoints.sm}px) {
-      flex-direction: column;
-      padding: ${theme.space['2']};
-      gap: 0;
-    }
-  `,
-)
-
-const LanguageItem = styled.div(
-  ({ theme }) => css`
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-
-    padding: ${theme.space['4']};
-    border-radius: ${theme.radii.large};
-    border: 1px solid ${theme.colors.border};
-
-    transition: all 0.1s ease-in-out;
-    cursor: pointer;
-
-    &:hover {
-      background-color: ${theme.colors.greySurface};
-    }
-
-    & > div {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      justify-content: flex-start;
-      gap: ${theme.space['2']};
-    }
-    @media (min-width: ${theme.breakpoints.sm}px) {
-      border: none;
-    }
-  `,
-)
-
-const CheckIcon = styled.svg(
-  ({ theme }) => css`
-    width: 1rem;
-    height: 1rem;
-
-    display: block;
-    color: ${theme.colors.green};
-  `,
-)
-
 export const ThemeMenu = ({
   setCurrentView,
 }: {
   setCurrentView: (view: HamburgerView) => void
 }) => {
-  const { setMode, mode } = useTheme()
   const { t } = useTranslation()
-  const [usingSystemTheme, setUsingSystemTheme] = useLocalStorage('usingSystemTheme', false)
-
-  useEffect(() => {
-    if (usingSystemTheme) {
-      const darkQuery = window.matchMedia('(prefers-color-scheme: dark)')
-      document.documentElement.setAttribute('data-theme', darkQuery.matches ? 'dark' : 'light')
-      const listener = (event: MediaQueryListEvent) => {
-        document.documentElement.setAttribute('data-theme', event.matches ? 'dark' : 'light')
-      }
-      darkQuery.addEventListener('change', listener)
-      return () => darkQuery.removeEventListener('change', listener)
-    }
-  }, [usingSystemTheme])
 
   return (
     <Container>
       <HeadingWrapper>
         <Heading onClick={() => setCurrentView('main')}>
           <LeftArrowSVG width={16} height={16} />
           <InnerHeading>
-            <LanguageSVG />
+            <ThemeSVG height={16} width={16} />
             <Typography weight="bold">{t('navigation.theme')}</Typography>
           </InnerHeading>
         </Heading>
       </HeadingWrapper>
-      <LanguagesContainer>
-        <LanguageItem
-          onClick={() => {
-            setMode('light')
-
-            setUsingSystemTheme(false)
-          }}
-        >
-          <div>
-            <CheckIcon
-              as={CheckCircleSVG}
-              style={{ display: mode === 'light' && !usingSystemTheme ? 'block' : 'none' }}
-            />
-            <Typography>{t('navigation.mode.light')}</Typography>
-          </div>
-          <SunSVG height={16} width={16} />
-        </LanguageItem>
-        <LanguageItem
-          onClick={() => {
-            setMode('dark')
-
-            setUsingSystemTheme(false)
-          }}
-        >
-          <div>
-            <CheckIcon
-              as={CheckCircleSVG}
-              style={{ display: mode === 'dark' && !usingSystemTheme ? 'block' : 'none' }}
-            />
-            <Typography>{t('navigation.mode.dark')}</Typography>
-          </div>
-          <MoonSVG height={16} width={16} />
-        </LanguageItem>
-        <LanguageItem
-          onClick={() => {
-            setUsingSystemTheme(true)
-          }}
-        >
-          <div>
-            <CheckIcon
-              style={{ display: usingSystemTheme ? 'block' : 'none' }}
-              as={CheckCircleSVG}
-            />
-            <Typography>{t('navigation.mode.system')}</Typography>
-          </div>
-          <MoonSVG height={16} width={16} />
-        </LanguageItem>
-      </LanguagesContainer>
+      <ThemeToggle
+        labels={{
+          light: t('navigation.mode.light'),
+          dark: t('navigation.mode.dark'),
+          system: t('navigation.mode.system'),
+        }}
+      />
     </Container>
   )
 }