fix(components-DesktopNav): add hover style to ThemeSwitch icons (#928

)
sabertazimi · Jun 21, 2022 · 78f3c87 · 78f3c87 · vercel · Jun 21, 2022
1 parent 6d30ca0
commit 78f3c87
Show file tree

Hide file tree

Showing 6 changed files with 11 additions and 11 deletions.
diff --git a/components/Header/DesktopNav.module.css b/components/Header/DesktopNav.module.css
@@ -1,12 +1,12 @@
-a.light[href],
-a.dark[href] {
+.light.light[class],
+.dark.dark[class] {
   @apply hover:text-primary focus:text-primary;
 }
 
-a.light[href] {
+.light.light[class] {
   @apply text-light;
 }
 
-a.dark[href] {
+.dark.dark[class] {
   @apply text-dark;
 }
diff --git a/components/Header/DesktopNav.tsx b/components/Header/DesktopNav.tsx
@@ -66,9 +66,9 @@ const DesktopNav = ({ fixed, posts }: Props): JSX.Element => (
         key: 'theme',
         label: (
           <ThemeSwitch
-            className={cx('dark:text-light', {
-              'text-light': !fixed,
-              'text-dark': fixed,
+            className={cx('dark-menu-link', {
+              [styles.light]: !fixed,
+              [styles.dark]: fixed,
             })}
           />
         ),

diff --git a/components/Header/__snapshots__/Header.test.tsx.snap b/components/Header/__snapshots__/Header.test.tsx.snap
@@ -330,7 +330,7 @@ exports[`Header should render correctly (snapshot) 1`] = `
             >
               <span
                 aria-label="sun"
-                class="anticon dark:text-light text-light"
+                class="anticon dark-menu-link light"
                 role="img"
               >
                 <svg

diff --git a/layouts/__snapshots__/Layout.test.tsx.snap b/layouts/__snapshots__/Layout.test.tsx.snap
@@ -333,7 +333,7 @@ exports[`Layout should render correctly (snapshot) 1`] = `
               >
                 <span
                   aria-label="sun"
-                  class="anticon dark:text-light text-light"
+                  class="anticon dark-menu-link light"
                   role="img"
                 >
                   <svg

diff --git a/layouts/__snapshots__/PostLayout.test.tsx.snap b/layouts/__snapshots__/PostLayout.test.tsx.snap
@@ -333,7 +333,7 @@ exports[`PostLayout should render correctly (snapshot) 1`] = `
               >
                 <span
                   aria-label="sun"
-                  class="anticon dark:text-light text-light"
+                  class="anticon dark-menu-link light"
                   role="img"
                 >
                   <svg

diff --git a/styles/globals.css b/styles/globals.css
@@ -105,7 +105,7 @@
     @apply focus-visible:outline-dashed focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-secondary;
   }
 
-  a.dark-menu-link[href] {
+  .dark-menu-link.dark-menu-link[class] {
     @apply dark:text-light dark:hover:text-primary dark:focus:text-primary;
   }
 }