Fix: Format entire frontend properly

frontend/src/views/Settings/PersonalSettingsPage/EmergencyKitSection/EmergencyKitSection.tsx

@@ -1,91 +1,81 @@
-import { Controller, useForm } from "react-hook-form"; 
+import { Controller, useForm } from "react-hook-form";
 import { yupResolver } from "@hookform/resolvers/yup";
 import * as yup from "yup";
 
 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
 import issueBackupKey from "@app/components/utilities/cryptography/issueBackupKey";
-import { 
-    Button,
-    FormControl,
-    Input
-} from "@app/components/v2";
+import { Button, FormControl, Input } from "@app/components/v2";
 import { useUser } from "@app/context";
 
-const schema = yup.object({
+const schema = yup
+  .object({
     password: yup.string().required("Password is required")
-}).required();
+  })
+  .required();
 
 export type FormData = yup.InferType<typeof schema>;
 
 export const EmergencyKitSection = () => {
-    const { createNotification } = useNotificationContext();
-    const { user } = useUser();
-    const { reset, control, handleSubmit } = useForm({
-        defaultValues: {
-            password: "",
-        },
-        resolver: yupResolver(schema)
-    });
-    
-    const onFormSubmit = ({
-        password
-    }: FormData) => {
-        try {
-            if (!user?.email) return;
+  const { createNotification } = useNotificationContext();
+  const { user } = useUser();
+  const { reset, control, handleSubmit } = useForm({
+    defaultValues: {
+      password: ""
+    },
+    resolver: yupResolver(schema)
+  });
 
-            issueBackupKey({
-                email: user.email,
-                password,
-                personalName: `${user.firstName} ${user.lastName}`,
-                setBackupKeyError: () => {},
-                setBackupKeyIssued: () => {}
-            });
-            
-            reset();
-        } catch (err) {
-            console.error(err);
-            createNotification({
-                text: "Failed to download emergency kit",
-                type: "error"
-            });
-        }
+  const onFormSubmit = ({ password }: FormData) => {
+    try {
+      if (!user?.email) return;
+
+      issueBackupKey({
+        email: user.email,
+        password,
+        personalName: `${user.firstName} ${user.lastName}`,
+        setBackupKeyError: () => {},
+        setBackupKeyIssued: () => {}
+      });
+
+      reset();
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: "Failed to download emergency kit",
+        type: "error"
+      });
     }
-    
-    return (
-        <form 
-            onSubmit={handleSubmit(onFormSubmit)}
-            className="p-4 bg-mineshaft-900 mb-6 rounded-lg border border-mineshaft-600"
-        >
-            <h2 className="text-xl font-semibold flex-1 text-mineshaft-100">
-                Emergency Kit
-            </h2>
-            <p className="text-gray-400 mb-8">
-                The kit contains information you can use to recover your account.
-            </p>
-            <div className="max-w-md">
-                <Controller
-                    defaultValue=""
-                    render={({ field, fieldState: { error } }) => (
-                        <FormControl isError={Boolean(error)} errorText={error?.message}>
-                            <Input 
-                                placeholder="Password" 
-                                type="password"
-                                {...field} 
-                                className="bg-mineshaft-800" 
-                            />
-                        </FormControl>
-                    )}
-                    control={control}
-                    name="password"
-                />
-            </div>
-            <Button
-                type="submit"
-                colorSchema="secondary"
-                isLoading={false}
-            >
-                Save
-            </Button>
-        </form>
-    );
-}
+  };
+
+  return (
+    <form
+      onSubmit={handleSubmit(onFormSubmit)}
+      className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4"
+    >
+      <h2 className="flex-1 text-xl font-semibold text-mineshaft-100">Emergency Kit</h2>
+      <p className="mb-8 text-gray-400">
+        The kit contains information you can use to recover your account.
+      </p>
+      <div className="max-w-md">
+        <Controller
+          defaultValue=""
+          render={({ field, fieldState: { error } }) => (
+            <FormControl isError={Boolean(error)} errorText={error?.message}>
+              <Input
+                placeholder="Password"
+                type="password"
+                {...field}
+                className="bg-mineshaft-800"
+              />
+            </FormControl>
+          )}
+          control={control}
+          name="password"
+        />
+      </div>
+      <Button type="submit" colorSchema="secondary" isLoading={false}>
+        Save
+      </Button>
+    </form>
+  );
+};

frontend/src/views/Settings/PersonalSettingsPage/EmergencyKitSection/index.tsx

@@ -1 +1 @@
-export { EmergencyKitSection } from "./EmergencyKitSection";
+export { EmergencyKitSection } from "./EmergencyKitSection";