feat(a11y): update icon and titles of toggle-theme component

mateusfg7 · Jul 21, 2023 · 2962fc7 · 2962fc7
1 parent 360a1b1
commit 2962fc7
Showing 1 changed file with 25 additions and 14 deletions.
diff --git a/src/app/components/header/toggle-theme.tsx b/src/app/components/header/toggle-theme.tsx
@@ -1,17 +1,31 @@
 'use client'
 
 import { useEffect, useState } from 'react'
-import { Menu } from '@headlessui/react'
-import { Moon, Sun, Desktop } from '@/shared/wrappers/phosphor-icons'
 import { useTheme } from 'next-themes'
+import { Menu } from '@headlessui/react'
+
+import {
+  Moon,
+  Sun,
+  Desktop,
+  PaintBrushBroad
+} from '@/shared/wrappers/phosphor-icons'
 
 export function ToggleTheme() {
   const [isMounted, setIsMounted] = useState(false)
 
   const { setTheme, theme: currTheme } = useTheme()
 
-  const SelectTheme = ({ theme }: { theme: 'light' | 'dark' | 'system' }) => (
-    <button
+  const SelectTheme = ({
+    theme,
+    title
+  }: {
+    theme: 'light' | 'dark' | 'system'
+    title: string
+  }) => (
+    <Menu.Item
+      as="button"
+      title={title}
       onClick={() => setTheme(theme)}
       className={`flex w-full items-center justify-start gap-4 rounded-xl p-2 text-lg leading-none hover:bg-neutral-100 hover:dark:bg-neutral-1000 ${
         currTheme === theme && 'font-bold'
@@ -35,7 +49,7 @@ export function ToggleTheme() {
           <span>System</span>
         </>
       )}
-    </button>
+    </Menu.Item>
   )
 
   useEffect(() => setIsMounted(true), [])
@@ -44,20 +58,17 @@ export function ToggleTheme() {
 
   return (
     <Menu as="div" className="relative inline-flex items-center">
-      <Menu.Button aria-label="Change color theme">
-        {currTheme === 'light' && <Sun className="text-xl" />}
-        {currTheme === 'dark' && <Moon className="text-xl" />}
-        {currTheme === 'system' && <Desktop className="text-xl" />}
+      <Menu.Button aria-label="Change color theme" title="Change color theme">
+        <PaintBrushBroad className="text-xl" />
       </Menu.Button>
       <Menu.Items
         as="div"
         className="absolute right-0 top-10 origin-top-right animate-fade-down rounded-xl bg-neutral-50 p-1 outline-none animate-duration-300 dark:bg-neutral-900"
       >
-        <Menu.Item as="div">
-          <SelectTheme theme="light" />
-          <SelectTheme theme="dark" />
-          <SelectTheme theme="system" />
-        </Menu.Item>
+        <div className="p-2 text-sm text-neutral-500">Color themes</div>
+        <SelectTheme theme="light" title="Set light colors" />
+        <SelectTheme theme="dark" title="Set dark colors" />
+        <SelectTheme theme="system" title="Set system defined colors " />
       </Menu.Items>
     </Menu>
   )