From eefb1a0c37e2b872a2f280f65678a09d83692593 Mon Sep 17 00:00:00 2001
From: trafficlunar <hello@trafficlunar.net>
Date: Fri, 18 Apr 2025 17:04:10 +0100
Subject: [PATCH] style: redesign login page and create-username page

---
 src/app/components/login-buttons.tsx          |  2 +-
 src/app/components/profile-settings/index.tsx | 10 +++++-----
 src/app/components/username-form.tsx          |  2 +-
 src/app/create-username/page.tsx              | 15 +++++++++++----
 src/app/layout.tsx                            |  2 +-
 src/app/login/page.tsx                        | 16 +++++++++++-----
 6 files changed, 30 insertions(+), 17 deletions(-)

diff --git a/src/app/components/login-buttons.tsx b/src/app/components/login-buttons.tsx
index d5baa04..f0ccbfa 100644
--- a/src/app/components/login-buttons.tsx
+++ b/src/app/components/login-buttons.tsx
@@ -5,7 +5,7 @@ import { signIn } from "next-auth/react";
 
 export default function LoginButtons() {
 	return (
-		<div className="flex flex-col items-center gap-2 mt-8">
+		<div className="flex flex-col items-center gap-2">
 			<button
 				onClick={() => signIn("discord", { redirectTo: "/create-username" })}
 				className="pill button gap-2 !px-3 !bg-indigo-400 !border-indigo-500 hover:!bg-indigo-500"
diff --git a/src/app/components/profile-settings/index.tsx b/src/app/components/profile-settings/index.tsx
index 976b3f9..2ea91b9 100644
--- a/src/app/components/profile-settings/index.tsx
+++ b/src/app/components/profile-settings/index.tsx
@@ -1,13 +1,13 @@
 "use client";
 
 import { useRouter } from "next/navigation";
-
 import { useState } from "react";
-import SubmitDialogButton from "./submit-dialog-button";
-import DeleteAccount from "./delete-account";
+import dayjs from "dayjs";
 
 import { displayNameSchema, usernameSchema } from "@/lib/schemas";
-import dayjs from "dayjs";
+
+import SubmitDialogButton from "./submit-dialog-button";
+import DeleteAccount from "./delete-account";
 
 export default function ProfileSettings() {
 	const router = useRouter();
@@ -67,7 +67,7 @@ export default function ProfileSettings() {
 	};
 
 	return (
-		<div className="bg-amber-50 border-2 border-amber-500 rounded-2xl p-4 flex flex-col gap-4">
+		<div className="bg-amber-50 border-2 border-amber-500 rounded-2xl shadow-lg p-4 flex flex-col gap-4">
 			<div>
 				<h2 className="text-2xl font-bold">Profile Settings</h2>
 				<p className="text-sm text-zinc-500">Update your account info, and username.</p>
diff --git a/src/app/components/username-form.tsx b/src/app/components/username-form.tsx
index e860da1..802c5b1 100644
--- a/src/app/components/username-form.tsx
+++ b/src/app/components/username-form.tsx
@@ -37,7 +37,7 @@ export default function UsernameForm() {
 				value={username}
 				onChange={(e) => setUsername(e.target.value)}
 				required
-				className="pill input w-96 mt-8 mb-2"
+				className="pill input w-96 mb-2"
 			/>
 
 			<button type="submit" className="pill button w-min">
diff --git a/src/app/create-username/page.tsx b/src/app/create-username/page.tsx
index 863b559..bd6fbac 100644
--- a/src/app/create-username/page.tsx
+++ b/src/app/create-username/page.tsx
@@ -12,11 +12,18 @@ export default async function CreateUsernamePage() {
 	}
 
 	return (
-		<div>
-			<h1 className="text-3xl font-medium text-center">Welcome to TomodachiShare!</h1>
-			<h2 className="text-lg text-center">Please create a username</h2>
+		<div className="flex-grow flex items-center justify-center">
+			<div className="bg-amber-50 border-2 border-amber-500 rounded-2xl shadow-lg px-10 py-12 max-w-md text-center">
+				<h1 className="text-3xl font-bold mb-4">Welcome to TomodachiShare!</h1>
 
-			<UsernameForm />
+				<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium mb-6">
+					<hr className="flex-grow border-zinc-300" />
+					<span>Please create a username</span>
+					<hr className="flex-grow border-zinc-300" />
+				</div>
+
+				<UsernameForm />
+			</div>
 		</div>
 	);
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 0ed0120..bb585cd 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -30,7 +30,7 @@ export default function RootLayout({
 
 				<Providers>
 					<Header />
-					<div className="px-4 py-8 max-w-7xl w-full">{children}</div>
+					<div className="px-4 py-8 max-w-7xl w-full flex-grow flex flex-col">{children}</div>
 					<Footer />
 				</Providers>
 			</body>
diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
index 534a14a..4efbe31 100644
--- a/src/app/login/page.tsx
+++ b/src/app/login/page.tsx
@@ -1,5 +1,4 @@
 import { redirect } from "next/navigation";
-
 import { auth } from "@/lib/auth";
 import LoginButtons from "../components/login-buttons";
 
@@ -12,11 +11,18 @@ export default async function LoginPage() {
 	}
 
 	return (
-		<div>
-			<h1 className="text-3xl font-medium text-center">Welcome to TomodachiShare!</h1>
-			<h2 className="text-lg text-center">Choose your login method</h2>
+		<div className="flex-grow flex items-center justify-center">
+			<div className="bg-amber-50 border-2 border-amber-500 rounded-2xl shadow-lg px-10 py-12 max-w-md text-center">
+				<h1 className="text-3xl font-bold mb-4">Welcome to TomodachiShare!</h1>
 
-			<LoginButtons />
+				<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium mb-8">
+					<hr className="flex-grow border-zinc-300" />
+					<span>Choose your login method</span>
+					<hr className="flex-grow border-zinc-300" />
+				</div>
+
+				<LoginButtons />
+			</div>
 		</div>
 	);
 }