Fixed gradient not saving correctly

src/frontend/src/components/gradientChooserComponent/index.tsx

@@ -6,7 +6,7 @@ export default function GradientChooserComponent({value, onChange}){
     return (
         <div className="flex flex-wrap gap-4 justify-center items-center">
             {gradients.map((gradient, idx) => 
-            <div onClick={() => {onChange(gradient)}} className={"w-12 h-12 rounded-full transition-all duration-400 " + gradient + (value === gradient ?  " shadow-lg ring-2 ring-primary" : "")} key={idx}></div>
+            <div onClick={() => {onChange(gradient)}} className={"cursor-pointer w-12 h-12 rounded-full transition-all duration-400 " + gradient + (value === gradient ?  " shadow-lg ring-2 ring-primary" : "")} key={idx}></div>
             )}
             </div>
     )

src/frontend/src/components/headerComponent/index.tsx

@@ -139,7 +139,7 @@ export default function Header(): JSX.Element {
                   <button
                     className={
                       "h-7 w-7 rounded-full focus-visible:outline-0 " +
-                      (userData!.profile_image ?? gradients[parseInt(userData!.id ?? "", 30) % gradients.length])
+                      (userData?.profile_image ?? gradients[parseInt(userData?.id ?? "", 30) % gradients.length])
                     }
                   />
                 </DropdownMenuTrigger>

src/frontend/src/pages/ProfileSettingsPage/index.tsx

@@ -1,4 +1,5 @@
 import * as Form from "@radix-ui/react-form";
+import { cloneDeep } from "lodash";
 import { useContext, useEffect, useState } from "react";
 import IconComponent from "../../components/genericIconComponent";
 import GradientChooserComponent from "../../components/gradientChooserComponent";
@@ -27,7 +28,7 @@ export default function ProfileSettingsPage(): JSX.Element {
     setTabId("");
   }, []);
   const { setErrorData, setSuccessData } = useContext(alertContext);
-  const { userData } = useContext(AuthContext);
+  const { userData, setUserData } = useContext(AuthContext);
   const { password, cnfPassword, gradient } = inputState;
 
   function handlePatchUser() {
@@ -38,12 +39,21 @@ export default function ProfileSettingsPage(): JSX.Element {
       });
       return;
     }
-    try{
+    try {
-      updateUser(userData!.id, { password, profile_image: gradient }).then(() => {setSuccessData({title: "Changes saved successfully!"})});
+      updateUser(userData!.id, { password, profile_image: gradient }).then(
-    } catch (error) {
+        () => {
-      setErrorData({title: "Error saving changes", list: [error as string]});
+          setSuccessData({ title: "Changes saved successfully!" });
-    }
+          if (gradient !== "") {
+            let newUserData = cloneDeep(userData);
+            newUserData!.profile_image = gradient;
 
+            setUserData(newUserData);
+          }
+        }
+      );
+    } catch (error) {
+      setErrorData({ title: "Error saving changes", list: [error as string] });
+    }
   }
 
   function handleInput({
@@ -131,7 +141,14 @@ export default function ProfileSettingsPage(): JSX.Element {
 
               <div className="mt-4 w-[1010px]">
                 <GradientChooserComponent
-                value={gradient == "" ? (userData!.profile_image ?? gradients[parseInt(userData!.id ?? "", 30) % gradients.length]) : gradient}
+                  value={
+                    gradient == ""
+                      ? userData!.profile_image ??
+                        gradients[
+                          parseInt(userData!.id ?? "", 30) % gradients.length
+                        ]
+                      : gradient
+                  }
                   onChange={(value) => {
                     handleInput({ target: { name: "gradient", value } });
                   }}