style: split .button class

src/app/components/header.tsx

@@ -21,18 +21,18 @@ export default async function Header() {
 
 			<ul className="flex justify-end gap-3 items-center h-11 *:h-full max-lg:col-span-2 max-sm:justify-center">
 				<li title="Random Mii">
-					<Link href={"/random"} className="button !p-0 h-full aspect-square">
+					<Link href={"/random"} className="pill button !p-0 h-full aspect-square">
 						<Icon icon="mdi:dice-3" fontSize={28} />
 					</Link>
 				</li>
 				<li>
-					<Link href={"/submit"} className="button h-full">
+					<Link href={"/submit"} className="pill button h-full">
 						Submit
 					</Link>
 				</li>
 				{!session?.user ? (
 					<li>
-						<Link href={"/login"} className="button h-full">
+						<Link href={"/login"} className="pill button h-full">
 							Login
 						</Link>
 					</li>

src/app/components/login-buttons.tsx

@@ -6,11 +6,11 @@ import { signIn } from "next-auth/react";
 export default function LoginButtons() {
 	return (
 		<div className="flex flex-col items-center gap-2 mt-8">
-			<button onClick={() => signIn("discord")} className="button gap-2 !px-3 !bg-indigo-400 !border-indigo-500 hover:!bg-indigo-500">
+			<button onClick={() => signIn("discord")} className="pill button gap-2 !px-3 !bg-indigo-400 !border-indigo-500 hover:!bg-indigo-500">
 				<Icon icon="ic:baseline-discord" fontSize={32} />
 				Login with Discord
 			</button>
-			<button onClick={() => signIn("github")} className="button gap-2 !px-3 !bg-zinc-700 !border-zinc-800  hover:!bg-zinc-800 text-white">
+			<button onClick={() => signIn("github")} className="pill button gap-2 !px-3 !bg-zinc-700 !border-zinc-800  hover:!bg-zinc-800 text-white">
 				<Icon icon="mdi:github" fontSize={32} />
 				Login with GitHub
 			</button>

src/app/components/logout-button.tsx

@@ -6,7 +6,7 @@ import { signOut } from "next-auth/react";
 export default function LogoutButton() {
 	return (
 		<li title="Logout">
-			<button onClick={() => signOut()} className="button !p-0 aspect-square h-full">
+			<button onClick={() => signOut()} className="pill button !p-0 aspect-square h-full">
 				<Icon icon="ic:round-logout" fontSize={24} />
 			</button>
 		</li>

src/app/components/profile-overview.tsx

@@ -5,7 +5,7 @@ export default async function ProfileOverview() {
 
 	return (
 		<li title="Your profile">
-			<button className="button !gap-2 !p-0 h-full max-w-64">
+			<button className="pill button !gap-2 !p-0 h-full max-w-64">
 				<img src={session?.user?.image ?? "/missing.webp"} alt="profile picture" className="rounded-full h-full outline-2 outline-orange-400" />
 				<span className="pr-4 overflow-hidden whitespace-nowrap text-ellipsis w-full">{session?.user?.name}</span>
 			</button>

src/app/globals.css

@@ -12,6 +12,10 @@ body {
 	background-size: 20px 20px;
 }
 
-.button {
+.pill {
-	@apply flex justify-center items-center px-5 py-2 bg-orange-300 border-2 border-orange-400 rounded-full shadow-md hover:bg-orange-400 transition cursor-pointer;
+	@apply flex justify-center items-center px-5 py-2 bg-orange-300 border-2 border-orange-400 rounded-full shadow-md;
+}
+
+.button {
+	@apply hover:bg-orange-400 transition cursor-pointer;
 }

src/app/not-found.tsx

@@ -5,7 +5,7 @@ export default function NotFound() {
 		<div className="flex flex-col items-center">
 			<h2 className="text-7xl font-black">404</h2>
 			<p className="text-xl">Page not found</p>
-			<Link href="/" className="button mt-8">
+			<Link href="/" className="pill button mt-8">
 				Return Home
 			</Link>
 		</div>