trafficlunar/tomodachi-share
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style: split .button class

Browse source
This commit is contained in:
trafficlunar 2025-03-29 20:16:53 +00:00
parent a1cd520042
commit 54fee71491
6 changed files with 14 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/app/components/header.tsx
View file

@ -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>

4
src/app/components/login-buttons.tsx
View file

@ -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>

2
src/app/components/logout-button.tsx
View file

@ -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>

2
src/app/components/profile-overview.tsx
View file

@ -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>

8
src/app/globals.css
View file

@ -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;
}

2
src/app/not-found.tsx
View file

@ -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>