Formatting Fixes

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

@@ -1,13 +1,21 @@
-import { useState } from "react";
 import { gradients } from "../../utils/styleUtils";
 
-
+export default function GradientChooserComponent({ value, onChange }) {
-export default function GradientChooserComponent({value, onChange}){
+  return (
-    return (
+    <div className="flex flex-wrap items-center justify-center gap-4">
-        <div className="flex flex-wrap gap-4 justify-center items-center">
+      {gradients.map((gradient, idx) => (
-            {gradients.map((gradient, 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>
+          onClick={() => {
-            )}
+            onChange(gradient);
-            </div>
+          }}
-    )
+          className={
-}
+            "duration-400 h-12 w-12 cursor-pointer rounded-full transition-all " +
+            gradient +
+            (value === gradient ? " shadow-lg ring-2 ring-primary" : "")
+          }
+          key={idx}
+        ></div>
+      ))}
+    </div>
+  );
+}

src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx

@@ -100,12 +100,10 @@ export default function ExtraSidebar(): JSX.Element {
           <div className="side-bar-button">
             {flow && flow.data && (
               <ApiModal flow={flow}>
-                <button className={"w-full " + (!isBuilt ? "button-disable" : "")}>
+                <button
-                  <div
+                  className={"w-full " + (!isBuilt ? "button-disable" : "")}
-                    className={classNames(
+                >
-                      "extra-side-bar-buttons"
+                  <div className={classNames("extra-side-bar-buttons")}>
-                    )}
-                  >
                     <IconComponent
                       name="Code2"
                       className={

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

@@ -40,8 +40,9 @@ export default function ProfileSettingsPage(): JSX.Element {
       return;
     }
     try {
-      if(password !== "") await resetPassword(userData!.id, { password });
+      if (password !== "") await resetPassword(userData!.id, { password });
-      if(gradient !== "") await updateUser(userData!.id, { profile_image: gradient });
+      if (gradient !== "")
+        await updateUser(userData!.id, { profile_image: gradient });
       if (gradient !== "") {
         let newUserData = cloneDeep(userData);
         newUserData!.profile_image = gradient;
@@ -52,7 +53,10 @@ export default function ProfileSettingsPage(): JSX.Element {
       handleInput({ target: { name: "cnfPassword", value: "" } });
       setSuccessData({ title: "Changes saved successfully!" });
     } catch (error) {
-      setErrorData({ title: "Error saving changes", list: [(error as any).response.data.detail] });
+      setErrorData({
+        title: "Error saving changes",
+        list: [(error as any).response.data.detail],
+      });
     }
   }
 
@@ -92,16 +96,16 @@ export default function ProfileSettingsPage(): JSX.Element {
                   <Form.Label className="data-[invalid]:label-invalid">
                     Password{" "}
                   </Form.Label>
-                    <InputComponent
+                  <InputComponent
-                      onChange={(value) => {
+                    onChange={(value) => {
-                        handleInput({ target: { name: "password", value } });
+                      handleInput({ target: { name: "password", value } });
-                      }}
+                    }}
-                      value={password}
+                    value={password}
-                      isForm
+                    isForm
-                      password={true}
+                    password={true}
-                      placeholder="Password"
+                    placeholder="Password"
-                      className="w-full"
+                    className="w-full"
-                    />
+                  />
                   <Form.Message match="valueMissing" className="field-invalid">
                     Please enter your password
                   </Form.Message>

src/frontend/src/types/api/index.ts

@@ -84,12 +84,12 @@ export type changeUser = {
   is_superuser?: boolean;
   password?: string;
   profile_image?: string;
-}
+};
 
 export type resetPasswordType = {
   password?: string;
   profile_image?: string;
-}
+};
 
 export type Users = {
   id: string;