fix: theme toggle button

martapanc · Sep 20, 2023 · 7b19189 · 7b19189
1 parent a0d8db4
commit 7b19189
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 19 deletions.
diff --git a/src/components/atoms/ThemeToggle/ThemeToggle.tsx b/src/components/atoms/ThemeToggle/ThemeToggle.tsx
@@ -8,7 +8,11 @@ import './themeToggle.css';
 
 type Mode = 'dark' | 'light';
 
-export default function ThemeToggle() {
+export interface ThemeToggleProps {
+  includeLabels?: boolean;
+}
+
+export const ThemeToggle = ({ includeLabels }: ThemeToggleProps) => {
   const { theme, setTheme } = useTheme();
   const [mode, setMode] = useState<Mode>(theme as Mode);
 
@@ -27,8 +31,8 @@ export default function ThemeToggle() {
     <div className=''>
       <DarkModeToggle
         mode={mode}
-        dark='Dark'
-        light='Light'
+        dark={includeLabels ? 'Dark' : ''}
+        light={includeLabels ? 'Light' : ''}
         size='sm'
         inactiveTrackColor='#e2e8f0'
         inactiveTrackColorOnHover='#f8fafc'
@@ -44,9 +48,11 @@ export default function ThemeToggle() {
         activeLabelColor='#0f172a'
         activeLabelColorOnHover='#0f172a'
         activeLabelColorOnActive='#0f172a'
-        ariaLabel='Toggle color scheme'
+        ariaLabel='Toggle Dark / Light Mode'
         onChange={toggleTheme}
       />
     </div>
   );
-}
+};
+
+export default ThemeToggle;
diff --git a/src/components/atoms/ThemeToggle/themeToggle.css b/src/components/atoms/ThemeToggle/themeToggle.css
@@ -1,15 +1,16 @@
 [type='checkbox'] {
   color: #334155;
+  border-width: 0 !important;
 }
 
 [type='checkbox']:checked {
   background-image: none;
 }
 
-input::before {
+/* input::before {
   height: 19px !important;
 }
 
 input:checked::before {
   left: 23px !important;
-}
+} */
diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
@@ -81,7 +81,7 @@ export default function Header() {
             <div className='hidden md:flex md:flex-row'>
               {i18nEnabled && <LanguageSwitcher languages={languageDefs} />}
 
-              <ThemeToggle />
+              <ThemeToggle includeLabels={true} />
             </div>
           </nav>
 

diff --git a/src/components/molecules/MobileMenu/MobileMenu.tsx b/src/components/molecules/MobileMenu/MobileMenu.tsx
@@ -7,8 +7,8 @@ import { useTranslation } from 'react-i18next';
 
 import languages from '@/data/languages.json';
 
-import ModeToggleButton from '@/components/atoms/buttons/ModeToggleButton';
 import { NavigationItem } from '@/components/atoms/NavigationItem';
+import { ThemeToggle } from '@/components/atoms/ThemeToggle/ThemeToggle';
 import { links } from '@/components/layout/Header';
 import LanguageSwitcherMobile from '@/components/molecules/LanguageSwitcher/LanguageSwitcherMobile';
 
@@ -19,6 +19,8 @@ export interface MobileMenuProps {
 export const MobileMenu = ({ isOpen }: MobileMenuProps) => {
   const { t } = useTranslation();
 
+  const i18nEnabled = false;
+
   const navigationVariants = {
     hidden: { opacity: 0, x: -50 },
     visible: (custom: number) => ({
@@ -62,17 +64,20 @@ export const MobileMenu = ({ isOpen }: MobileMenuProps) => {
                 animate='visible'
                 custom={0.5 + (links.length + 3) * 0.1}
               >
-                <ModeToggleButton />
-              </motion.li>
-              <motion.li
-                className='flex justify-center'
-                variants={navigationVariants}
-                initial='hidden'
-                animate='visible'
-                custom={0.5 + (links.length + 4) * 0.1}
-              >
-                <LanguageSwitcherMobile languages={languages} />
+                <ThemeToggle includeLabels={false} />
               </motion.li>
+
+              {i18nEnabled && (
+                <motion.li
+                  className='flex justify-center'
+                  variants={navigationVariants}
+                  initial='hidden'
+                  animate='visible'
+                  custom={0.5 + (links.length + 4) * 0.1}
+                >
+                  <LanguageSwitcherMobile languages={languages} />
+                </motion.li>
+              )}
             </ul>
           </FocusTrap>
         </motion.div>