style and perf issues

almeidx · May 19, 2024 · 835f7d2 · 835f7d2
1 parent 0880fd2
commit 835f7d2
Show file tree

Hide file tree

Showing 7 changed files with 18 additions and 17 deletions.
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -17,22 +17,18 @@ export default function RootLayout({ children }: PropsWithChildren) {
 	return (
 		<html lang="en">
 			<body
-				className={`${openSans.variable} scroll-smooth bg-background font-sans text-white antialiased selection:bg-primary selection:text-white`}
+				className={`${openSans.variable} scroll-smooth bg-background font-sans text-white antialiased selection:bg-primary selection:text-white flex min-h-screen flex-col`}
 			>
 				<Providers>
-					<div className="flex flex-col">
-						<div className="flex min-h-screen flex-col">
-							<div className="flex-1">
-								<NavbarContainer />
-								{children}
-							</div>
-
-							<Footer />
-						</div>
+					<div className="flex-1">
+						<NavbarContainer />
+						{children}
 					</div>
+
+					<Footer />
 				</Providers>
 
-				<svg style={{ width: 0, height: 0, position: "absolute" }} aria-hidden="true" focusable="false">
+				<svg className="size-0 absolute" aria-hidden="true" focusable="false">
 					<linearGradient
 						id="icon-gradient-tertiary"
 						x1="-4"
@@ -46,7 +42,7 @@ export default function RootLayout({ children }: PropsWithChildren) {
 					</linearGradient>
 				</svg>
 
-				<svg style={{ width: 0, height: 0, position: "absolute" }} aria-hidden="true" focusable="false">
+				<svg className="size-0 absolute" aria-hidden="true" focusable="false">
 					<linearGradient
 						id="icon-gradient-primary"
 						x1="5.00012"
@@ -60,7 +56,7 @@ export default function RootLayout({ children }: PropsWithChildren) {
 					</linearGradient>
 				</svg>
 
-				<svg style={{ width: 0, height: 0, position: "absolute" }} aria-hidden="true" focusable="false">
+				<svg className="size-0 absolute" aria-hidden="true" focusable="false">
 					<defs>
 						<linearGradient id="percentual-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
 							<stop offset="0%" stopColor="#FFE87C" />

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -151,10 +151,14 @@ export default async function Homepage() {
 function StartLevelingButton() {
 	return (
 		<ExternalLink
-			className="relative bg-gradient-radial w-72 z-[1] text-black text-center px-3 py-2 text-3xl font-bold rounded-lg before:absolute before:inset-0 before:bg-gradient-radial-hover before:z-[-1] before:transition-opacity before:duration-300 before:opacity-0 before:rounded-lg hover:before:opacity-100"
+			className="group bg-gradient-radial w-72 text-center p-0.5 text-3xl font-bold rounded-lg"
 			href={BOT_INVITE}
 		>
-			Start Leveling
+			<div className="group-hover:bg-background rounded-lg transition-colors size-full py-2">
+				<div className="text-black group-hover:bg-gradient-radial group-hover:text-transparent group-hover:bg-clip-text transition-colors h-full text-center flex items-center justify-center">
+					Start Leveling
+				</div>
+			</div>
 		</ExternalLink>
 	);
 }

diff --git a/src/assets/logo-small.png b/src/assets/logo-small.png
diff --git a/src/assets/logo-small.webp b/src/assets/logo-small.webp
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import logoSmallImg from "@/assets/logo-small.png";
+import logoSmallImg from "@/assets/logo-small.webp";
 import { ExternalLink } from "@/components/ExternalLink.tsx";
 import { ProfileButton } from "@/components/Profile.tsx";
 import { SignInButton } from "@/components/SignIn.tsx";

diff --git a/src/components/Profile.tsx b/src/components/Profile.tsx
@@ -32,6 +32,7 @@ export function ProfileButton({ avatar, globalName, id, username }: ReturnType<t
 					height={24}
 					width={24}
 					unoptimized={Boolean(avatar)}
+					priority
 				/>
 
 				<p className="max-w-16 md:max-w-32 xl:max-w-56 truncate">{globalName ?? username}</p>

diff --git a/theme.config.jsx b/theme.config.jsx
@@ -1,7 +1,7 @@
 import "@/app/globals.css";
 
 import faviconImg from "@/app/icon.png";
-import logoSmallImg from "@/assets/logo-small.png";
+import logoSmallImg from "@/assets/logo-small.webp";
 import { Footer } from "@/components/Footer.tsx";
 import { Discord } from "@/components/icons/Discord.tsx";
 import { GitHub } from "@/components/icons/GitHub.tsx";