Completed the Login page and updated the overall colors and font

src/pages/exam/index.tsx

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

src/pages/index.tsx

@@ -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>
+											<h1 className="font-bold text-4xl">{user.name}</h1>
-											<span className="font-normal text-2xl text-mti-gray-taupe">{capitalize(user.type)}</span>
+											<h6 className="font-normal text-base text-mti-gray-taupe">{capitalize(user.type)}</h6>
 										</div>
 										<ProgressBar
 											label={`Level ${calculateAverageLevel().toFixed(1)}`}

src/pages/login.tsx

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

src/styles/globals.css

@@ -8,7 +8,7 @@
 	--font-mono: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro",
 		"Fira Mono", "Droid Sans Mono", "Courier New", monospace;
 
-	--foreground-rgb: 0, 0, 0;
+	--foreground-rgb: 53, 51, 56;
 	--background-start-rgb: 214, 219, 220;
 	--background-end-rgb: 255, 255, 255;
 
@@ -25,26 +25,6 @@
 	--card-border-rgb: 131, 134, 135;
 }
 
-@media (prefers-color-scheme: dark) {
-	:root {
-		--foreground-rgb: 255, 255, 255;
-		--background-start-rgb: 0, 0, 0;
-		--background-end-rgb: 0, 0, 0;
-
-		--primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0));
-		--secondary-glow: linear-gradient(to bottom right, rgba(1, 65, 255, 0), rgba(1, 65, 255, 0), rgba(1, 65, 255, 0.3));
-
-		--tile-start-rgb: 2, 13, 46;
-		--tile-end-rgb: 2, 5, 19;
-		--tile-border: conic-gradient(#ffffff80, #ffffff40, #ffffff30, #ffffff20, #ffffff10, #ffffff10, #ffffff80);
-
-		--callout-rgb: 20, 20, 20;
-		--callout-border-rgb: 108, 108, 108;
-		--card-rgb: 100, 100, 100;
-		--card-border-rgb: 200, 200, 200;
-	}
-}
-
 * {
 	box-sizing: border-box;
 	padding: 0;
@@ -57,6 +37,7 @@ body {
 	height: 100%;
 	max-width: 100vw;
 	overflow-x: hidden;
+	font-family: "Open Sans", system-ui, -apple-system, "Helvetica Neue", sans-serif;
 }
 
 body {
@@ -68,9 +49,3 @@ a {
 	color: inherit;
 	text-decoration: none;
 }
-
-@media (prefers-color-scheme: dark) {
-	html {
-		color-scheme: dark;
-	}
-}

tailwind.config.js

@@ -17,6 +17,7 @@ module.exports = {
 						platinum: "#DBDBDB",
 						"anti-flash": "#EAEBEC",
 					},
+					black: "#353338",
 				},
 				ielts: {
 					reading: {DEFAULT: "#1EB3FF", transparent: "rgba(255, 99, 132, 0.5)"},