chore: Add underline styling to mobile menu links (#98)

compsci-adl · Feb 24, 2024 · 97c5c2a · 97c5c2a
1 parent e48fc50
commit 97c5c2a
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 5 deletions.
diff --git a/src/components/Header/HeaderMobileClient.tsx b/src/components/Header/HeaderMobileClient.tsx
@@ -95,9 +95,18 @@ export default function HeaderMobileClient({
                             <MenuLinks data={data} onClick={closeMenu} />
 
                             {/* Links for sign up, sign in, sign out */}
-                            {!data.isSignedIn && <SignInJoinMobile onClick={closeMenu} />}
+                            {!data.isSignedIn && (
+                                <SignInJoinMobile
+                                    className="block hover:underline"
+                                    onClick={closeMenu}
+                                />
+                            )}
                             {data.isSignedIn && (
-                                <Link href="/" onClick={handleSignOut}>
+                                <Link
+                                    href="/"
+                                    className="block hover:underline"
+                                    onClick={handleSignOut}
+                                >
                                     Sign Out
                                 </Link>
                             )}

diff --git a/src/components/Header/components/SignInJoin.tsx b/src/components/Header/components/SignInJoin.tsx
@@ -14,13 +14,19 @@ export function SignInJoin() {
     );
 }
 
-export function SignInJoinMobile({ onClick }: { onClick?: () => void }) {
+export function SignInJoinMobile({
+    className,
+    onClick,
+}: {
+    className: string;
+    onClick?: () => void;
+}) {
     return (
         <>
-            <Link onClick={onClick} href="/signin">
+            <Link onClick={onClick} className={className} href="/signin">
                 Sign In
             </Link>
-            <Link onClick={onClick} href="/join">
+            <Link onClick={onClick} className={className} href="/join">
                 Join Us
             </Link>
         </>