From 5e2d676450eec8b7cf0eaeb1a4b0432990135172 Mon Sep 17 00:00:00 2001
From: Nathaniel Tampus <contact@nize.ph>
Date: Mon, 20 Mar 2023 19:18:30 +0800
Subject: [PATCH] update auth tab styles for better contrast

---
 client/src/components/auth/AuthModal.tsx | 27 ++++++++++++++++--------
 1 file changed, 18 insertions(+), 9 deletions(-)

diff --git a/client/src/components/auth/AuthModal.tsx b/client/src/components/auth/AuthModal.tsx
index f92c3a6..41289bc 100644
--- a/client/src/components/auth/AuthModal.tsx
+++ b/client/src/components/auth/AuthModal.tsx
@@ -190,32 +190,41 @@ export default function AuthModal() {
           ) : (
             <>
               <div className="tabs flex-nowap w-full">
-                <a
+                <span
                   onClick={() => {
                     setActiveTab("guest");
                   }}
                   className={
-                    "tab tab-bordered flex-grow" + (activeTab === "guest" ? " tab-active" : "")
+                    "tab tab-bordered flex-grow rounded-tl-lg" +
+                    (activeTab === "guest"
+                      ? " tab-active bg-base-200"
+                      : " text-base-content hover:bg-base-200")
                   }
                 >
                   Guest
-                </a>
-                <a
+                </span>
+                <span
                   onClick={() => setActiveTab("login")}
                   className={
-                    "tab tab-bordered flex-grow" + (activeTab === "login" ? " tab-active" : "")
+                    "tab tab-bordered flex-grow" +
+                    (activeTab === "login"
+                      ? " tab-active bg-base-200"
+                      : " text-base-content hover:bg-base-200")
                   }
                 >
                   Login
-                </a>
-                <a
+                </span>
+                <span
                   onClick={() => setActiveTab("register")}
                   className={
-                    "tab tab-bordered flex-grow" + (activeTab === "register" ? " tab-active" : "")
+                    "tab tab-bordered flex-grow rounded-tr-lg" +
+                    (activeTab === "register"
+                      ? " tab-active bg-base-200"
+                      : " text-base-content hover:bg-base-200")
                   }
                 >
                   Register
-                </a>
+                </span>
               </div>
 
               <form className="flex flex-col px-2" onSubmit={submitAuth}>