Solved some more bugs and styling

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>