Merge branch 'main' of https://github.com/john-david3/cs3305-team11 into dev

frontend/src/components/Auth/PasswordResetForm.tsx

@@ -48,7 +48,9 @@ const PasswordResetForm: React.FC<SubmitProps> = ({ onSubmit, token }) => {
                 newErrors[key as keyof ResetPasswordErrors] = "Confirm your password";
             }
         });
-
+        if (resetData.newPassword.length < 8) {
+            newErrors.newPasswordError = "Password must be at least 8 characters long";
+        }
         if (resetData.newPassword !== resetData.confirmNewPassword) {
             newErrors.confirmNewPasswordError = "Passwords do not match";
         }
@@ -76,6 +78,8 @@ const PasswordResetForm: React.FC<SubmitProps> = ({ onSubmit, token }) => {
                 if (!response.ok) {
                     const data = await response.json();
                     throw new Error(data.message || "An error has occurred while resetting");
+                } else {
+                    confirmPasswordReset();
                 }
             } catch (error: any) {
                 console.error("Password reset error:", error.message);
@@ -84,7 +88,6 @@ const PasswordResetForm: React.FC<SubmitProps> = ({ onSubmit, token }) => {
                     general: error.message || "An unexpected error occurred.",
                     
                 }));
-            confirmPasswordReset();
         }
     }
 };

frontend/src/components/Layout/ListRow.tsx

@@ -15,6 +15,7 @@ interface ListRowProps {
   title: string;
   description: string;
   items: ListItemProps[];
+  extraClasses?: string;
   onClick: (itemId: number, itemName: string) => void;
 }
 
@@ -43,10 +44,10 @@ const ListItem: React.FC<ListItemProps> = ({
           <div className="absolute top-0 left-0 w-full h-full bg-gray-600" />
         )}
       </div>
-      <div className="p-3">
+      <div className="p-3 bg-white">
         <h3 className="font-semibold text-lg">{title}</h3>
-        {type === "stream" && <p className="text-gray-400">{streamer}</p>}
-        <p className="text-sm text-gray-500">{viewers} viewers</p>
+        {type === "stream" && <p className="text-red-600">{streamer}</p>}
+        <p className="text-sm text-white">{viewers} viewers</p>
       </div>
     </div>
   );
@@ -58,12 +59,13 @@ const ListRow: React.FC<ListRowProps> = ({
   description,
   items,
   onClick,
+  extraClasses="",
 }) => {
   return (
-    <div className="flex flex-col space-y-4 py-6">
+    <div className={`flex flex-col space-y-4 py-6 px-5 mx-2 mt-5 rounded-md ${extraClasses}`}>
       <div className="space-y-1">
-        <h2 className="text-2xl font-bold">{title}</h2>
-        <p className="text-gray-400">{description}</p>
+        <h2 className="text-2xl font-bold text-white">{title}</h2>
+        <p className="text-white">{description}</p>
       </div>
       <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
         {items.map((item) => (

frontend/src/pages/HomePage.tsx

@@ -43,6 +43,7 @@ const HomePage: React.FC<HomePageProps> = ({ variant = "default" }) => {
         }
         items={featuredStreams}
         onClick={handleStreamClick}
+        extraClasses="border border-gray-700 bg-[#FF7F50]/80"
       />
 
       {/* If Personalised_HomePage, display Categories the logged-in user follows. Else, trending categories. */}
@@ -60,6 +61,8 @@ const HomePage: React.FC<HomePageProps> = ({ variant = "default" }) => {
         }
         items={featuredCategories}
         onClick={handleCategoryClick}
+        extraClasses="border border-gray-700 bg-[#5AFF75]/80"
+
       />
     </div>
   );