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

style: redesign login page and create-username page

Browse source
This commit is contained in:
trafficlunar 2025-04-18 17:04:10 +01:00
parent 63f82c3c18
commit eefb1a0c37
6 changed files with 30 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

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

10
src/app/components/profile-settings/index.tsx
View file

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

2
src/app/components/username-form.tsx
View file

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

15
src/app/create-username/page.tsx
View file

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

2
src/app/layout.tsx
View file

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

16
src/app/login/page.tsx
View file

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