fix(components-DesktopNav): remove !important tailwind styles

sabertazimi · Jun 12, 2022 · 6c00e03 · 6c00e03
1 parent ddb31f3
commit 6c00e03
Show file tree

Hide file tree

Showing 6 changed files with 32 additions and 15 deletions.
diff --git a/components/Header/DesktopNav.module.css b/components/Header/DesktopNav.module.css
@@ -0,0 +1,12 @@
+a.light[href],
+a.dark[href] {
+  @apply hover:text-primary focus:text-primary;
+}
+
+a.light[href] {
+  @apply text-light;
+}
+
+a.dark[href] {
+  @apply text-dark;
+}
diff --git a/components/Header/DesktopNav.tsx b/components/Header/DesktopNav.tsx
@@ -7,6 +7,7 @@ import { cx } from '@components/utils';
 import { routes } from '@config';
 import logo from '@images/logo-full.png';
 import type { PostMeta } from '@types';
+import styles from './DesktopNav.module.css';
 
 interface Props {
   fixed: boolean;
@@ -42,10 +43,10 @@ const DesktopNav = ({ fixed, posts }: Props): JSX.Element => (
           <Link
             href={route.path}
             className={cx(
-              'flex-container h-full transform-gpu transition hover:!text-primary dark:!text-light dark:hover:!text-primary',
+              'flex-container dark-menu-link h-full transform-gpu transition',
               {
-                '!text-light': !fixed,
-                '!text-dark': fixed,
+                [styles.light]: !fixed,
+                [styles.dark]: fixed,
               }
             )}
           >

diff --git a/components/Header/__snapshots__/Header.test.tsx.snap b/components/Header/__snapshots__/Header.test.tsx.snap
@@ -154,7 +154,7 @@ exports[`Header should render correctly (snapshot) 1`] = `
           class="ant-menu-title-content"
         >
           <a
-            class="flex-container h-full transform-gpu transition hover:!text-primary dark:!text-light dark:hover:!text-primary !text-light"
+            class="flex-container dark-menu-link h-full transform-gpu transition light"
             href="/posts"
           >
             Posts
@@ -171,7 +171,7 @@ exports[`Header should render correctly (snapshot) 1`] = `
           class="ant-menu-title-content"
         >
           <a
-            class="flex-container h-full transform-gpu transition hover:!text-primary dark:!text-light dark:hover:!text-primary !text-light"
+            class="flex-container dark-menu-link h-full transform-gpu transition light"
             href="/tags"
           >
             Tags
@@ -188,7 +188,7 @@ exports[`Header should render correctly (snapshot) 1`] = `
           class="ant-menu-title-content"
         >
           <a
-            class="flex-container h-full transform-gpu transition hover:!text-primary dark:!text-light dark:hover:!text-primary !text-light"
+            class="flex-container dark-menu-link h-full transform-gpu transition light"
             href="/books"
           >
             Books
@@ -205,7 +205,7 @@ exports[`Header should render correctly (snapshot) 1`] = `
           class="ant-menu-title-content"
         >
           <a
-            class="flex-container h-full transform-gpu transition hover:!text-primary dark:!text-light dark:hover:!text-primary !text-light"
+            class="flex-container dark-menu-link h-full transform-gpu transition light"
             href="/about"
           >
             About

diff --git a/layouts/__snapshots__/Layout.test.tsx.snap b/layouts/__snapshots__/Layout.test.tsx.snap
@@ -157,7 +157,7 @@ exports[`Layout should render correctly (snapshot) 1`] = `
             class="ant-menu-title-content"
           >
             <a
-              class="flex-container h-full transform-gpu transition hover:!text-primary dark:!text-light dark:hover:!text-primary !text-light"
+              class="flex-container dark-menu-link h-full transform-gpu transition light"
               href="/posts"
             >
               Posts
@@ -174,7 +174,7 @@ exports[`Layout should render correctly (snapshot) 1`] = `
             class="ant-menu-title-content"
           >
             <a
-              class="flex-container h-full transform-gpu transition hover:!text-primary dark:!text-light dark:hover:!text-primary !text-light"
+              class="flex-container dark-menu-link h-full transform-gpu transition light"
               href="/tags"
             >
               Tags
@@ -191,7 +191,7 @@ exports[`Layout should render correctly (snapshot) 1`] = `
             class="ant-menu-title-content"
           >
             <a
-              class="flex-container h-full transform-gpu transition hover:!text-primary dark:!text-light dark:hover:!text-primary !text-light"
+              class="flex-container dark-menu-link h-full transform-gpu transition light"
               href="/books"
             >
               Books
@@ -208,7 +208,7 @@ exports[`Layout should render correctly (snapshot) 1`] = `
             class="ant-menu-title-content"
           >
             <a
-              class="flex-container h-full transform-gpu transition hover:!text-primary dark:!text-light dark:hover:!text-primary !text-light"
+              class="flex-container dark-menu-link h-full transform-gpu transition light"
               href="/about"
             >
               About

diff --git a/layouts/__snapshots__/PostLayout.test.tsx.snap b/layouts/__snapshots__/PostLayout.test.tsx.snap
@@ -157,7 +157,7 @@ exports[`PostLayout should render correctly (snapshot) 1`] = `
             class="ant-menu-title-content"
           >
             <a
-              class="flex-container h-full transform-gpu transition hover:!text-primary dark:!text-light dark:hover:!text-primary !text-light"
+              class="flex-container dark-menu-link h-full transform-gpu transition light"
               href="/posts"
             >
               Posts
@@ -174,7 +174,7 @@ exports[`PostLayout should render correctly (snapshot) 1`] = `
             class="ant-menu-title-content"
           >
             <a
-              class="flex-container h-full transform-gpu transition hover:!text-primary dark:!text-light dark:hover:!text-primary !text-light"
+              class="flex-container dark-menu-link h-full transform-gpu transition light"
               href="/tags"
             >
               Tags
@@ -191,7 +191,7 @@ exports[`PostLayout should render correctly (snapshot) 1`] = `
             class="ant-menu-title-content"
           >
             <a
-              class="flex-container h-full transform-gpu transition hover:!text-primary dark:!text-light dark:hover:!text-primary !text-light"
+              class="flex-container dark-menu-link h-full transform-gpu transition light"
               href="/books"
             >
               Books
@@ -208,7 +208,7 @@ exports[`PostLayout should render correctly (snapshot) 1`] = `
             class="ant-menu-title-content"
           >
             <a
-              class="flex-container h-full transform-gpu transition hover:!text-primary dark:!text-light dark:hover:!text-primary !text-light"
+              class="flex-container dark-menu-link h-full transform-gpu transition light"
               href="/about"
             >
               About

diff --git a/styles/globals.css b/styles/globals.css
@@ -62,4 +62,8 @@
     @apply dark:border dark:border-solid dark:border-light;
     @apply dark:bg-black dark:shadow-dark dark:hover:shadow-primary;
   }
+
+  a.dark-menu-link[href] {
+    @apply dark:text-light dark:hover:text-primary dark:focus:text-primary;
+  }
 }