Solved some more bugs and styling

src/components/Exercises/FillBlanks.tsx

@@ -151,7 +151,7 @@ export default function FillBlanks({
 
 			<div className="self-end flex justify-between w-full gap-8 absolute bottom-8 left-0 px-8">
 				<Button
-					color="green"
+					color="purple"
 					variant="outline"
 					onClick={() => onBack({exercise: id, solutions: answers, score: calculateScore(), type})}
 					className="max-w-[200px] w-full">
@@ -159,7 +159,7 @@ export default function FillBlanks({
 				</Button>
 
 				<Button
-					color="green"
+					color="purple"
 					onClick={() => onNext({exercise: id, solutions: answers, score: calculateScore(), type})}
 					className="max-w-[200px] self-end w-full">
 					Next

src/components/Exercises/MatchSentences.tsx

@@ -86,7 +86,7 @@ export default function MatchSentences({id, options, type, prompt, sentences, us
 
 			<div className="self-end flex justify-between w-full gap-8 absolute bottom-8 left-0 px-8">
 				<Button
-					color="green"
+					color="purple"
 					variant="outline"
 					onClick={() => onBack({exercise: id, solutions: answers, score: calculateScore(), type})}
 					className="max-w-[200px] w-full">
@@ -94,7 +94,7 @@ export default function MatchSentences({id, options, type, prompt, sentences, us
 				</Button>
 
 				<Button
-					color="green"
+					color="purple"
 					onClick={() => onNext({exercise: id, solutions: answers, score: calculateScore(), type})}
 					className="max-w-[200px] self-end w-full">
 					Next

src/components/Exercises/Speaking.tsx

@@ -173,7 +173,7 @@ export default function Speaking({id, title, text, type, prompts, onNext, onBack
 
 			<div className="self-end flex justify-between w-full  gap-8">
 				<Button
-					color="green"
+					color="purple"
 					variant="outline"
 					onClick={() =>
 						onBack({
@@ -187,7 +187,7 @@ export default function Speaking({id, title, text, type, prompts, onNext, onBack
 					Back
 				</Button>
 				<Button
-					color="green"
+					color="purple"
 					disabled={!mediaBlob}
 					onClick={() =>
 						onNext({

src/components/Exercises/WriteBlanks.tsx

@@ -101,7 +101,7 @@ export default function WriteBlanks({id, prompt, type, maxWords, solutions, user
 
 			<div className="self-end flex justify-between w-full gap-8 absolute bottom-8 left-0 px-8">
 				<Button
-					color="green"
+					color="purple"
 					variant="outline"
 					onClick={() => onBack({exercise: id, solutions: answers, score: calculateScore(), type})}
 					className="max-w-[200px] w-full">
@@ -109,7 +109,7 @@ export default function WriteBlanks({id, prompt, type, maxWords, solutions, user
 				</Button>
 
 				<Button
-					color="green"
+					color="purple"
 					onClick={() => onNext({exercise: id, solutions: answers, score: calculateScore(), type})}
 					className="max-w-[200px] self-end w-full">
 					Next

src/components/Exercises/Writing.tsx

@@ -98,14 +98,14 @@ export default function Writing({id, prompt, info, type, wordCounter, attachment
 
 			<div className="self-end flex justify-between w-full gap-8 absolute bottom-8 left-0 px-8">
 				<Button
-					color="green"
+					color="purple"
 					variant="outline"
 					onClick={() => onBack({exercise: id, solutions: [{id, solution: inputText}], score: {correct: 1, total: 1, missing: 0}, type})}
 					className="max-w-[200px] self-end w-full">
 					Back
 				</Button>
 				<Button
-					color="green"
+					color="purple"
 					disabled={!isSubmitEnabled}
 					onClick={() => onNext({exercise: id, solutions: [{id, solution: inputText}], score: {correct: 1, total: 1, missing: 0}, type})}
 					className="max-w-[200px] self-end w-full">

src/components/Navbar.tsx

@@ -14,7 +14,7 @@ export default function Navbar({user}: Props) {
 			<div className="flex justify-between w-5/6 mr-8">
 				<input type="text" placeholder="Search..." className="rounded-full py-4 px-6 border border-mti-gray-platinum outline-none" />
 				<Link href="/profile" className="flex gap-3 items-center justify-end">
-					<img src={user.profilePicture} alt={user.name} className="w-10 h-10 rounded-full" />
+					<img src={user.profilePicture} alt={user.name} className="w-10 h-10 rounded-full object-cover" />
 					<span className="text-right">{user.name}</span>
 				</Link>
 			</div>

src/components/ProfileCard.tsx

@@ -15,7 +15,7 @@ export default function ProfileCard({user, className}: Props) {
 		<div className={clsx("bg-white drop-shadow-xl p-4 md:p-8 rounded-xl w-full flex flex-col gap-6", className)}>
 			<div className="flex w-full items-center gap-8">
 				<div className="w-16 md:w-24 h-16 md:h-24 rounded-full border-2 md:border-4 border-white drop-shadow-md md:drop-shadow-xl">
-					{user.profilePicture.length > 0 && <img src={user.profilePicture} alt="Profile picture" className="rounded-full" />}
+					{user.profilePicture.length > 0 && <img src={user.profilePicture} alt="Profile picture" className="rounded-full object-cover" />}
 					{user.profilePicture.length === 0 && (
 						<Avatar size="xlarge" style={{width: "100%", height: "100%"}} label={user.name.slice(0, 1)} shape="circle" />
 					)}

src/components/ProfileLevel.tsx

@@ -17,7 +17,7 @@ export default function ProfileLevel({user, className}: Props) {
 	return (
 		<div className={clsx("flex flex-col items-center justify-center gap-4", className)}>
 			<div className="w-16 md:w-24 h-16 md:h-24 rounded-full">
-				{user.profilePicture.length > 0 && <img src={user.profilePicture} alt="Profile picture" className="rounded-full" />}
+				{user.profilePicture.length > 0 && <img src={user.profilePicture} alt="Profile picture" className="rounded-full object-cover" />}
 				{user.profilePicture.length === 0 && (
 					<Avatar size="xlarge" style={{width: "100%", height: "100%"}} label={user.name.slice(0, 1)} shape="circle" />
 				)}

src/components/Sidebar.tsx

@@ -37,7 +37,7 @@ export default function Sidebar({path}: Props) {
 
 	const logout = async () => {
 		axios.post("/api/logout").finally(() => {
-			router.push("/login");
+			setTimeout(() => router.reload(), 500);
 		});
 	};
 

src/exams/Reading.tsx

@@ -176,7 +176,7 @@ export default function Reading({exam, showSolutions = false, onFinish}: Props)
 					renderSolution(exam.exercises[exerciseIndex], nextExercise, previousExercise)}
 				{exerciseIndex > -1 && exerciseIndex < exam.exercises.length && (
 					<Button
-						color="green"
+						color="purple"
 						variant="outline"
 						onClick={() => setShowTextModal(true)}
 						className="max-w-[200px] self-end w-full absolute bottom-[31px] right-64">

src/exams/Selection.tsx

@@ -30,7 +30,7 @@ export default function Selection({user, onStart, disableSelection = false}: Pro
 		<>
 			<div className="w-full h-full relative flex flex-col gap-16">
 				<section className="w-full flex gap-8">
-					<img src={user.profilePicture} alt={user.name} className="aspect-square h-64 rounded-3xl drop-shadow-xl" />
+					<img src={user.profilePicture} alt={user.name} className="aspect-square h-64 rounded-3xl drop-shadow-xl object-cover" />
 					<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">
@@ -185,7 +185,7 @@ export default function Selection({user, onStart, disableSelection = false}: Pro
 					onClick={() =>
 						onStart(!disableSelection ? selectedModules.sort(sortByModuleName) : ["reading", "listening", "writing", "speaking"])
 					}
-					color="green"
+					color="purple"
 					className="px-12 w-full max-w-xs self-end"
 					disabled={selectedModules.length === 0 && !disableSelection}>
 					Start Exam

src/pages/api/users/update.ts

@@ -28,7 +28,7 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
 		const profilePictureFiletype = updatedUser.profilePicture.split(";")[0].split("/")[1];
 		const profilePictureRef = ref(storage, `profile_pictures/${req.session.user.id}.${profilePictureFiletype}`);
 
-		const pictureBytes = Buffer.from(updatedUser.profilePicture, "base64url");
+		const pictureBytes = Buffer.from(updatedUser.profilePicture.split(";base64,")[1], "base64url");
 		const pictureSnapshot = await uploadBytes(profilePictureRef, pictureBytes);
 
 		const pictureReference = ref(storage, pictureSnapshot.metadata.fullPath);
@@ -64,3 +64,11 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
 
 	res.status(200).json({ok: true});
 }
+
+export const config = {
+	api: {
+		bodyParser: {
+			sizeLimit: "20mb",
+		},
+	},
+};

src/pages/index.tsx

@@ -80,7 +80,7 @@ export default function Home() {
 			{user && (
 				<Layout user={user}>
 					<section className="w-full flex gap-8">
-						<img src={user.profilePicture} alt={user.name} className="aspect-square h-64 rounded-3xl drop-shadow-xl" />
+						<img src={user.profilePicture} alt={user.name} className="aspect-square h-64 rounded-3xl drop-shadow-xl object-cover" />
 						<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">

src/pages/profile.tsx

@@ -100,7 +100,7 @@ export default function Home() {
 			return;
 		}
 
-		const request = await axios.post("/api/users/update", {bio, name, email, password, newPassword});
+		const request = await axios.post("/api/users/update", {bio, name, email, password, newPassword, profilePicture});
 		if (request.status === 200) {
 			toast.success("Your profile has been updated!");
 			setTimeout(() => router.reload(), 800);
@@ -166,7 +166,11 @@ export default function Home() {
 								</form>
 							</div>
 							<div className="flex flex-col gap-3 items-center w-48">
-								<img src={profilePicture} alt={user.name} className="aspect-square h-48 w-48 rounded-full drop-shadow-xl self-end" />
+								<img
+									src={profilePicture}
+									alt={user.name}
+									className="aspect-square h-48 w-48 rounded-full drop-shadow-xl self-end object-cover"
+								/>
 								<input type="file" className="hidden" onChange={uploadProfilePicture} accept="image/*" ref={profilePictureInput} />
 								<span
 									onClick={() => (profilePictureInput.current as any)?.click()}

src/pages/register.tsx

@@ -47,7 +47,7 @@ export default function Register() {
 							placeholder="Confirm your password"
 							required
 						/>
-						<Button className="mt-8 w-full" color="green" disabled={isLoading}>
+						<Button className="mt-8 w-full" color="purple" disabled={isLoading}>
 							{!isLoading && "Create account"}
 							{isLoading && (
 								<div className="flex items-center justify-center">

src/pages/stats.tsx

@@ -69,7 +69,7 @@ export default function Stats() {
 			{user && (
 				<Layout user={user}>
 					<section className="w-full flex gap-8">
-						<img src={user.profilePicture} alt={user.name} className="aspect-square h-64 rounded-3xl drop-shadow-xl" />
+						<img src={user.profilePicture} alt={user.name} className="aspect-square h-64 rounded-3xl drop-shadow-xl object-cover" />
 						<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">
@@ -79,7 +79,7 @@ export default function Stats() {
 								<ProgressBar
 									label={`Level ${calculateAverageLevel(user.levels).toFixed(1)}`}
 									percentage={100}
-									color="red"
+									color="purple"
 									className="max-w-xs w-32 self-end h-10"
 								/>
 							</div>