Completed the Login page and updated the overall colors and font

This commit is contained in:
Tiago Ribeiro
2023-06-12 15:21:30 +01:00
parent 9ce45dfc30
commit 72fc98fccd
5 changed files with 16 additions and 36 deletions

View File

@@ -207,9 +207,7 @@ export default function Page() {
<link rel="icon" href="/favicon.ico" />
</Head>
<ToastContainer />
{user && (
<main className="w-full h-full min-h-[100vh] flex flex-col items-center bg-neutral-100 text-black pb-4 gap-4">{renderScreen()}</main>
)}
{user && <main className="w-full h-full min-h-[100vh] flex flex-col items-center bg-neutral-100 pb-4 gap-4">{renderScreen()}</main>}
</>
);
}

View File

@@ -64,7 +64,7 @@ export default function Home() {
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="/favicon.ico" />
</Head>
<main className="w-full h-full min-h-[100vh] flex flex-col items-center justify-center bg-neutral-100 text-black">
<main className="w-full h-full min-h-[100vh] flex flex-col items-center justify-center bg-neutral-100">
<Diagnostic user={user} onFinish={() => setShowDiagnostics(false)} />
</main>
</>
@@ -84,7 +84,7 @@ export default function Home() {
</Head>
<ToastContainer />
{user && (
<main className="w-full h-[100vh] flex flex-col bg-mti-gray-smoke text-black">
<main className="w-full h-[100vh] flex flex-col bg-mti-gray-smoke">
<Navbar user={user} />
<div className="h-full w-full flex py-4 pb-8 gap-2">
<Sidebar path="/" />
@@ -94,8 +94,8 @@ export default function Home() {
<div className="flex flex-col gap-4 py-4 w-full">
<div className="flex justify-between w-full gap-8">
<div className="flex flex-col gap-2 py-2">
<h2 className="font-bold text-3xl">{user.name}</h2>
<span className="font-normal text-2xl text-mti-gray-taupe">{capitalize(user.type)}</span>
<h1 className="font-bold text-4xl">{user.name}</h1>
<h6 className="font-normal text-base text-mti-gray-taupe">{capitalize(user.type)}</h6>
</div>
<ProgressBar
label={`Level ${calculateAverageLevel().toFixed(1)}`}

View File

@@ -69,7 +69,7 @@ export default function Login() {
name="email"
onChange={(e) => setEmail(e.target.value)}
placeholder="Enter email address"
className="px-8 py-6 text-sm font-normal placeholder:text-mti-gray-cool bg-white rounded-full shadow-xl shadow-mti-gray-anti-flash"
className="px-8 py-6 text-sm font-normal placeholder:text-mti-gray-cool bg-white rounded-full shadow-xl shadow-mti-gray-anti-flash focus:outline-none"
/>
</div>
<div className="flex flex-col gap-3 w-full">
@@ -79,7 +79,7 @@ export default function Login() {
name="password"
onChange={(e) => setPassword(e.target.value)}
placeholder="Password"
className="px-8 py-6 text-sm font-normal placeholder:text-mti-gray-cool bg-white rounded-full shadow-xl shadow-mti-gray-anti-flash"
className="px-8 py-6 text-sm font-normal placeholder:text-mti-gray-cool bg-white rounded-full shadow-xl shadow-mti-gray-anti-flash focus:outline-none"
/>
</div>
<Button className="mt-8 w-full" color="green" disabled={isLoading}>
@@ -91,6 +91,12 @@ export default function Login() {
)}
</Button>
</form>
<span className="text-mti-gray-cool text-sm font-normal mt-8">
Don&apos;t have an account?{" "}
<a className="text-mti-green-light" href="/register">
Sign up
</a>
</span>
</section>
</main>
</>