From 97c5c2aca4bcdd3aa1320fdb2901a1108fb1518b Mon Sep 17 00:00:00 2001
From: Ray Okamoto <22254748+rayokamoto@users.noreply.github.com>
Date: Tue, 20 Feb 2024 04:05:58 +1030
Subject: [PATCH] chore: Add underline styling to mobile menu links (#98)

---
 src/components/Header/HeaderMobileClient.tsx    | 13 +++++++++++--
 src/components/Header/components/SignInJoin.tsx | 12 +++++++++---
 2 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/src/components/Header/HeaderMobileClient.tsx b/src/components/Header/HeaderMobileClient.tsx
index 49b47d28..02b4fbaa 100644
--- 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
index a35a257a..2a6d5275 100644
--- 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>
         </>