Refactor out underline hover effect as utility class

alianza · May 20, 2024 · a350c7d · a350c7d
1 parent 06255eb
commit a350c7d
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 29 deletions.
diff --git a/components/common/IconLink.jsx b/components/common/IconLink.jsx
@@ -4,8 +4,14 @@ import utilStyles from '../../styles/utils.module.scss';
 
 const IconLink = ({ href = '', onClick, Icon, title, label, ...props }) => {
   return (
-    <Link className={`${utilStyles.link} group flex`} href={href} onClick={onClick} title={title ? title : 'New'} {...props}>
-      {label && <span>{label}</span>}
+    <Link
+      className="underline-hover group flex items-center"
+      href={href}
+      onClick={onClick}
+      title={title ? title : 'New'}
+      {...props}
+    >
+      {label && <span className="text-nowrap">{label}</span>}
       <Icon className="h-6 w-6 transition-transform duration-300 active:scale-95 group-hover:scale-[120%] group-hover:duration-75" />
     </Link>
   );

diff --git a/components/common/LinkWithArrow.jsx b/components/common/LinkWithArrow.jsx
@@ -1,13 +1,12 @@
 import React from 'react';
 import Link from 'next/link';
-import utilStyles from '../../styles/utils.module.scss';
 
 const LinkWithArrow = ({ label, href = '', onClick }) => {
   return (
     <Link
       href={href}
       onClick={onClick}
-      className={`${utilStyles.link} group relative mx-auto mb-6 flex items-center text-4xl`}
+      className="underline-hover group relative mx-auto mb-6 flex items-center text-4xl"
     >
       <h1 className="text-4xl">{label}</h1>
       <span className="absolute w-[calc(100%+2rem)] text-right text-3xl transition-[width] group-hover:w-[calc(100%+2.5rem)]">

diff --git a/components/layout/Header.jsx b/components/layout/Header.jsx
@@ -42,16 +42,14 @@ export default function Header() {
           title="Skateboard Trick Tracker Logo"
           className="h-12 w-12 drop-shadow-lg transition-transform hover:scale-110 active:scale-100 sm:h-16 sm:w-16"
         />
-        <span className={`${utilStyles.link} hidden whitespace-nowrap text-4xl font-semibold sm:block`}>
-          Trick Tracker
-        </span>
+        <span className="underline-hover hidden whitespace-nowrap text-4xl font-semibold sm:block">Trick Tracker</span>
       </Link>
 
       <div className="ml-auto">
         {session ? (
           <>
             <span className="hidden md:inline">Signed in as: </span>
-            <Link className={`${utilStyles.link} inline items-center gap-2 xsm:inline-flex`} href="/profile">
+            <Link className="underline-hover inline items-center gap-2 xsm:inline-flex" href="/profile">
               <b className="hidden xsm:inline">{session.user?.name}</b>
               <Image
                 src={session.user?.image}
@@ -64,7 +62,7 @@ export default function Header() {
             </Link>
           </>
         ) : (
-          <a className={`${utilStyles.link} font-bold`} href="#" onClick={() => signIn()}>
+          <a className="underline-hover font-bold" href="#" onClick={() => signIn()}>
             Sign in
           </a>
         )}
@@ -116,12 +114,12 @@ export default function Header() {
       {open ? (
         <XMarkIcon
           onClick={() => setOpen(false)}
-          className="hoverStrong z-10 -m-2 ml-2 h-12 w-12 shrink-0 cursor-pointer p-2 xl:hidden"
+          className="scale-hover-xl z-10 -m-2 ml-2 h-12 w-12 shrink-0 cursor-pointer p-2 xl:hidden"
         />
       ) : (
         <Bars3Icon
           onClick={() => setOpen(true)}
-          className="hoverStrong z-10 -m-2 ml-2 h-12 w-12 shrink-0 cursor-pointer p-2 xl:hidden"
+          className="scale-hover-xl z-10 -m-2 ml-2 h-12 w-12 shrink-0 cursor-pointer p-2 xl:hidden"
         />
       )}
     </header>

diff --git a/styles/globals.scss b/styles/globals.scss
@@ -19,13 +19,25 @@
     text-shadow: none;
   }
 
-  .hoverSlight {
+  .scale-hover {
     @apply transition-transform hover:scale-[1.02] active:scale-[.98] #{!important};
   }
 
-  .hoverStrong {
+  .scale-hover-xl {
     @apply transition-transform hover:scale-110 active:scale-95 #{!important};
   }
+
+  .underline-hover {
+      @apply underline decoration-transparent transition-colors duration-300 ease-in-out;
+
+      &:hover {
+        @apply duration-100 decoration-inherit;
+      }
+
+      @media (hover: none) {
+        @apply decoration-inherit;
+      }
+  }
 }
 
 .no-scroll {

diff --git a/styles/utils.module.scss b/styles/utils.module.scss
@@ -17,19 +17,3 @@
         @apply text-neutral-100 bg-red-700 hover:bg-red-800 focus:ring-red-700/50; // For accessibility reasons, the red button is darker than the others
     }
 }
-
-.link {
-    @apply underline decoration-transparent transition-colors duration-300 ease-in-out;
-
-    &:hover {
-        @apply duration-100 decoration-inherit;
-    }
-
-    @media (hover: none) {
-        @apply decoration-inherit;
-    }
-}
-
-.responsiveContainer {
-    @apply sm:px-12 md:px-32 lg:px-48;
-}