Recreated most of the login screen with the new designs

src/components/Low/Button.tsx

@@ -5,18 +5,27 @@ interface Props {
 	children: ReactNode;
 	color?: "orange" | "green" | "blue";
 	variant?: "outline" | "solid";
-	onClick: () => void;
+	className?: string;
+	disabled?: boolean;
+	onClick?: () => void;
 }
 
-export default function Button({color = "green", variant = "solid", children, onClick}: Props) {
+export default function Button({color = "green", variant = "solid", disabled = false, className, children, onClick}: Props) {
 	const colorClassNames: {[key in typeof color]: string} = {
-		green: "bg-mti-green hover:bg-mti-green-dark disabled:text-mti-green disabled:bg-mti-green-ultralight",
+		green: "bg-mti-green-light hover:bg-mti-green disabled:text-mti-green disabled:bg-mti-green-ultralight selection:bg-mti-green-dark",
-		blue: "bg-mti-blue hover:bg-mti-blue-dark disabled:text-mti-blue disabled:bg-mti-blue-ultralight",
+		blue: "bg-mti-blue-light hover:bg-mti-blue disabled:text-mti-blue disabled:bg-mti-blue-ultralight selection:bg-mti-blue-dark",
-		orange: "bg-mti-orange hover:bg-mti-orange-dark disabled:text-mti-orange disabled:bg-mti-orange-ultralight",
+		orange: "bg-mti-orange-light hover:bg-mti-orange disabled:text-mti-orange disabled:bg-mti-orange-ultralight selection:bg-mti-orange-dark",
 	};
 
 	return (
-		<button onClick={onClick} className={clsx("py-3 px-6 text-white", colorClassNames[color])}>
+		<button
+			onClick={onClick}
+			className={clsx(
+				"py-4 px-6 text-white rounded-full transition ease-in-out duration-300 disabled:cursor-not-allowed",
+				className,
+				colorClassNames[color],
+			)}
+			disabled={disabled}>
 			{children}
 		</button>
 	);

src/pages/login.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @next/next/no-img-element */
 import {User} from "@/interfaces/user";
 import {toast, ToastContainer} from "react-toastify";
 import axios from "axios";
@@ -5,8 +6,10 @@ import {FormEvent, useState} from "react";
 import Head from "next/head";
 import useUser from "@/hooks/useUser";
 import {InputText} from "primereact/inputtext";
-import {Button} from "primereact/button";
 import {Password} from "primereact/password";
+import {Divider} from "primereact/divider";
+import Button from "@/components/Low/Button";
+import {BsArrowRepeat} from "react-icons/bs";
 
 export default function Login() {
 	const [email, setEmail] = useState("");
@@ -46,38 +49,49 @@ export default function Login() {
 				<meta name="viewport" content="width=device-width, initial-scale=1" />
 				<link rel="icon" href="/favicon.ico" />
 			</Head>
-			<main className="w-full h-screen flex flex-col items-center justify-center bg-neutral-100">
+			<main className="w-full h-[100vh] flex bg-white text-black">
 				<ToastContainer />
-				<form className="p-4 rounded-xl bg-white drop-shadow-xl flex flex-col gap-4" onSubmit={login}>
+				<section className="h-full w-fit min-w-fit relative">
-					<div className="p-inputgroup">
+					<div className="absolute h-full w-full bg-mti-orange-light z-10 bg-opacity-50" />
-						<span className="p-inputgroup-addon">
+					<img src="/people-talking-tablet.png" alt="People smiling looking at a tablet" className="h-full aspect-auto" />
-							<i className="pi pi-inbox"></i>
+				</section>
-						</span>
+				<section className="h-full w-full flex flex-col items-center justify-center gap-2">
-						<InputText
+					<div className="flex flex-col gap-2 items-center">
-							placeholder="E-mail..."
+						<h1 className="font-bold text-4xl">Login to your account</h1>
+						<p className="self-start text-base font-normal text-mti-gray-cool">with your registered Email Address</p>
+					</div>
+					<Divider className="max-w-md" />
+					<form className="flex flex-col items-center gap-6 w-1/2" onSubmit={login}>
+						<div className="flex flex-col gap-3 w-full">
+							<label className="font-normal text-base text-mti-gray-dim">Email address</label>
+							<input
 								type="email"
-							required
+								name="email"
-							disabled={isLoading}
 								onChange={(e) => setEmail(e.target.value)}
-							autoComplete="username"
+								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"
 							/>
 						</div>
-					<div className="p-inputgroup">
+						<div className="flex flex-col gap-3 w-full">
-						<span className="p-inputgroup-addon">
+							<label className="font-normal text-base text-mti-gray-dim">Password</label>
-							<i className="pi pi-star"></i>
+							<input
-						</span>
-						<Password
-							placeholder="Password..."
 								type="password"
-							required
+								name="password"
-							feedback={false}
-							disabled={isLoading}
 								onChange={(e) => setPassword(e.target.value)}
-							autoComplete="current-password"
+								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"
 							/>
 						</div>
-					<Button loading={isLoading} iconPos="right" label="Login" icon="pi pi-check" />
+						<Button className="mt-8 w-full" color="green" disabled={isLoading}>
+							{!isLoading && "Login"}
+							{isLoading && (
+								<div className="flex items-center justify-center">
+									<BsArrowRepeat className="text-white animate-spin" size={25} />
+								</div>
+							)}
+						</Button>
 					</form>
+				</section>
 			</main>
 		</>
 	);

tailwind.config.js

@@ -13,7 +13,7 @@ module.exports = {
 						smoke: "#F5F5F5",
 						taupe: "#898492",
 						dim: "#696F79",
-						cool: "8692A6",
+						cool: "#8692A6",
 						platinum: "#DBDBDB",
 						"anti-flash": "#EAEBEC",
 					},