From 534386e117947ed0a0f262e0909c5f87b43d73b3 Mon Sep 17 00:00:00 2001
From: Ionut-Cristian Florescu <ionut.florescu@gmail.com>
Date: Sat, 30 Sep 2023 16:15:56 +0300
Subject: [PATCH] Improve nav link colors

---
 components/Header.module.css  |  3 ++-
 components/NavLink.module.css | 29 +++++------------------------
 components/NavLink.tsx        | 10 +++-------
 3 files changed, 10 insertions(+), 32 deletions(-)

diff --git a/components/Header.module.css b/components/Header.module.css
index 5958cf0..d091571 100644
--- a/components/Header.module.css
+++ b/components/Header.module.css
@@ -45,7 +45,8 @@
 
   @media (pointer: fine) {
     &:hover {
-      color: var(--mantine-color-blue-light-color);
+      color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
+      text-decoration: underline;
     }
   }
 }
diff --git a/components/NavLink.module.css b/components/NavLink.module.css
index af49a60..5db8c33 100644
--- a/components/NavLink.module.css
+++ b/components/NavLink.module.css
@@ -1,26 +1,7 @@
-.root {
-  position: relative;
-
-  &::after {
-    content: '';
-    position: absolute;
-    height: rem(4px);
-    left: rem(2px);
-    width: calc(100% - rem(2px));
-    background: light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
-    top: rem(-8px);
-    transform: scaleY(0);
-    transform-origin: top;
-    transition: all 0.2s ease;
-
-    @media (min-width: $mantine-breakpoint-xs) {
-      transform-origin: bottom;
-      top: auto;
-      bottom: rem(-8px);
-    }
+.current {
+  &,
+  &:focus,
+  &:not(:hover) {
+    color: light-dark(var(--mantine-color-blue-8), var(--mantine-color-blue-4));
   }
 }
-
-.current::after {
-  transform: scaleY(1);
-}
diff --git a/components/NavLink.tsx b/components/NavLink.tsx
index 23144e3..6b3ecfe 100644
--- a/components/NavLink.tsx
+++ b/components/NavLink.tsx
@@ -19,13 +19,9 @@ export function NavLink({ className, textClassName, href, icon, text }: NavLinkP
     <Link href={href} passHref legacyBehavior>
       <Box
         component="a"
-        className={clsx(
-          classes.root,
-          {
-            [classes.current]: href === usePathname(),
-          },
-          className
-        )}
+        className={clsx(className, {
+          [classes.current]: href === usePathname(),
+        })}
       >
         {icon}
         <div className={textClassName}>{text}</div>