From 54fee71491bb2d17506a6a4c802faa4d5a46f081 Mon Sep 17 00:00:00 2001
From: trafficlunar <hello@trafficlunar.net>
Date: Sat, 29 Mar 2025 20:16:53 +0000
Subject: [PATCH] style: split .button class

---
 src/app/components/header.tsx           | 6 +++---
 src/app/components/login-buttons.tsx    | 4 ++--
 src/app/components/logout-button.tsx    | 2 +-
 src/app/components/profile-overview.tsx | 2 +-
 src/app/globals.css                     | 8 ++++++--
 src/app/not-found.tsx                   | 2 +-
 6 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/src/app/components/header.tsx b/src/app/components/header.tsx
index 2cb0daa..67b3e50 100644
--- a/src/app/components/header.tsx
+++ b/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>
diff --git a/src/app/components/login-buttons.tsx b/src/app/components/login-buttons.tsx
index 2c3c4b5..768f1df 100644
--- a/src/app/components/login-buttons.tsx
+++ b/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>
diff --git a/src/app/components/logout-button.tsx b/src/app/components/logout-button.tsx
index b5d26b2..3632119 100644
--- a/src/app/components/logout-button.tsx
+++ b/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>
diff --git a/src/app/components/profile-overview.tsx b/src/app/components/profile-overview.tsx
index df44245..076f093 100644
--- a/src/app/components/profile-overview.tsx
+++ b/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>
diff --git a/src/app/globals.css b/src/app/globals.css
index 8ecb0e5..ab1a57e 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -12,6 +12,10 @@ body {
 	background-size: 20px 20px;
 }
 
-.button {
-	@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;
+.pill {
+	@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;
 }
diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
index 6c6bd67..de82f3d 100644
--- a/src/app/not-found.tsx
+++ b/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>