Continued implementing the new design;

Added an average level calculator;

src/components/Navbar.tsx

@@ -11,9 +11,9 @@ export default function Navbar({user}: Props) {
 		<header className="w-full bg-transparent py-4 gap-2 flex items-center">
 			<h1 className="font-bold text-2xl w-1/6 px-8">eCrop</h1>
 			<div className="flex justify-between w-5/6 mr-8">
-				<input type="text" placeholder="Search..." className="rounded-full py-3 px-6 shadow-md outline-none" />
+				<input type="text" placeholder="Search..." className="rounded-full py-4 px-6 shadow-lg shadow-neutral-200 outline-none" />
 				<div className="flex gap-3 items-center justify-end">
-					<Avatar size="normal" label={user.name.slice(0, 1)} shape="circle" />
+					<img src={user.profilePicture} alt={user.name} className="w-10 h-10 rounded-full" />
 					<span className="text-right">{user.name}</span>
 				</div>
 			</div>

src/components/Sidebar.tsx

@@ -28,7 +28,7 @@ const Nav = ({Icon, label, path, keyPath}: NavProps) => (
 			path === keyPath && "bg-mti-green text-white",
 		)}>
 		<Icon size={20} />
-		<span>{label}</span>
+		<span className="text-lg font-medium">{label}</span>
 	</Link>
 );
 
@@ -59,7 +59,7 @@ export default function Sidebar({path}: Props) {
 					"p-4 px-8 rounded-full flex gap-4 items-center cursor-pointer text-black hover:text-mti-orange transition duration-300 ease-in-out",
 				)}>
 				<RiLogoutBoxFill size={20} />
-				<span>Log Out</span>
+				<span className="text-lg font-medium">Log Out</span>
 			</div>
 		</section>
 	);

src/pages/index.tsx

@@ -14,6 +14,9 @@ import useUser from "@/hooks/useUser";
 import Sidebar from "@/components/Sidebar";
 import Diagnostic from "@/components/Diagnostic";
 import {ToastContainer} from "react-toastify";
+import {capitalize} from "lodash";
+import {Module} from "@/interfaces";
+import clsx from "clsx";
 
 export const getServerSideProps = withIronSessionSsr(({req, res}) => {
 	const user = req.session.user;
@@ -35,19 +38,17 @@ export const getServerSideProps = withIronSessionSsr(({req, res}) => {
 }, sessionOptions);
 
 export default function Home() {
-	const [showEndExam, setShowEndExam] = useState(false);
-	const [windowWidth, setWindowWidth] = useState(0);
 	const [showDiagnostics, setShowDiagnostics] = useState(false);
-
-	const {stats, isLoading} = useStats();
 	const {user} = useUser({redirectTo: "/login"});
 
-	useEffect(() => setShowEndExam(window.innerWidth <= 960), []);
-	useEffect(() => setWindowWidth(window.innerWidth), []);
 	useEffect(() => {
 		if (user) setShowDiagnostics(user.isFirstLogin);
 	}, [user]);
 
+	const calculateAverageLevel = () => {
+		return Object.keys(user!.levels).reduce((accumulator, current) => user!.levels[current as Module] + accumulator, 0) / 4;
+	};
+
 	if (user && showDiagnostics) {
 		return (
 			<>
@@ -80,11 +81,32 @@ export default function Home() {
 			</Head>
 			<ToastContainer />
 			{user && (
-				<main className="w-full h-full min-h-[100vh] flex flex-col bg-mti-gray text-black">
+				<main className="w-full h-[100vh] flex flex-col bg-mti-gray-light text-black">
 					<Navbar user={user} />
-					<div className="h-full w-full flex py-4 gap-2">
+					<div className="h-full w-full flex py-4 pb-8 gap-2">
 						<Sidebar path="/" />
-						<div className="w-5/6 mr-8 bg-white shadow-md rounded-2xl"></div>
+						<div className="w-5/6 h-full mr-8 bg-white shadow-md rounded-2xl p-12">
+							<section className="w-full flex gap-8">
+								<img src={user.profilePicture} alt={user.name} className="w-44 aspect-square rounded-3xl" />
+								<div className="flex flex-col gap-8 py-4 w-full">
+									<div className="flex justify-between w-full gap-8">
+										<div className="flex flex-col gap-2">
+											<h2 className="font-bold text-3xl">{user.name}</h2>
+											<span className="font-thin text-2xl text-neutral-500">{capitalize(user.type)}</span>
+										</div>
+										<div className="relative w-32 max-w-xs self-end h-10 rounded-full bg-gray-200 overflow-hidden flex items-center justify-center">
+											<div
+												style={{width: `${Math.round((calculateAverageLevel() * 100) / 9)}%`}}
+												className="absolute top-0 left-0 h-full overflow-hidden bg-mti-orange"
+											/>
+											<span className="z-10 justify-self-center text-white text-sm font-bold">
+												Level {calculateAverageLevel().toFixed(1)}
+											</span>
+										</div>
+									</div>
+								</div>
+							</section>
+						</div>
 					</div>
 				</main>
 			)}

src/styles/globals.css

@@ -53,6 +53,8 @@
 
 html,
 body {
+	min-height: 100vh !important;
+	height: 100%;
 	max-width: 100vw;
 	overflow-x: hidden;
 }

tailwind.config.js

@@ -8,7 +8,7 @@ module.exports = {
 					orange: "#FF6000",
 					green: "#51C21A",
 					blue: "#007FF8",
-					gray: "#F9F9F9",
+					gray: {light: "#F9F9F9", dark: "#E0E0E0"},
 				},
 				ielts: {
 					reading: {DEFAULT: "#FF6384", transparent: "rgba(255, 99, 132, 0.5)"},