update auth tab styles for better contrast

This commit is contained in:
Nathaniel Tampus
2023-03-20 19:18:30 +08:00
parent 86f4f9d42f
commit 5e2d676450

View File

@@ -190,32 +190,41 @@ export default function AuthModal() {
) : ( ) : (
<> <>
<div className="tabs flex-nowap w-full"> <div className="tabs flex-nowap w-full">
<a <span
onClick={() => { onClick={() => {
setActiveTab("guest"); setActiveTab("guest");
}} }}
className={ 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 Guest
</a> </span>
<a <span
onClick={() => setActiveTab("login")} onClick={() => setActiveTab("login")}
className={ 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 Login
</a> </span>
<a <span
onClick={() => setActiveTab("register")} onClick={() => setActiveTab("register")}
className={ 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 Register
</a> </span>
</div> </div>
<form className="flex flex-col px-2" onSubmit={submitAuth}> <form className="flex flex-col px-2" onSubmit={submitAuth}>