Fix: Format entire frontend properly

frontend/src/views/Settings/PersonalSettingsPage/SecuritySection/MFASection.tsx

@@ -1,8 +1,6 @@
 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
 import { Checkbox, EmailServiceSetupModal } from "@app/components/v2";
-import {
-  useGetUser,
-  useUpdateMfaEnabled} from "@app/hooks/api";
+import { useGetUser, useUpdateMfaEnabled } from "@app/hooks/api";
 import { useFetchServerStatus } from "@app/hooks/api/serverDetails";
 import { AuthMethod } from "@app/hooks/api/users/types";
 import { usePopUp } from "@app/hooks/usePopUp";
@@ -11,12 +9,10 @@ export const MFASection = () => {
   const { data: user } = useGetUser();
   const { mutateAsync } = useUpdateMfaEnabled();
   const { createNotification } = useNotificationContext();
-  const { handlePopUpToggle, popUp, handlePopUpOpen } = usePopUp([
-    "setUpEmail"
-  ] as const);
-  
-  const {data: serverDetails } = useFetchServerStatus()
-  
+  const { handlePopUpToggle, popUp, handlePopUpOpen } = usePopUp(["setUpEmail"] as const);
+
+  const { data: serverDetails } = useFetchServerStatus();
+
   const toggleMfa = async (state: boolean) => {
     try {
       if (!user) return;
@@ -27,13 +23,17 @@ export const MFASection = () => {
         });
         return;
       }
-      
+
       const newUser = await mutateAsync({
         isMfaEnabled: state
       });
 
       createNotification({
-        text: `${newUser.isMfaEnabled ? "Successfully turned on two-factor authentication." : "Successfully turned off two-factor authentication."}`,
+        text: `${
+          newUser.isMfaEnabled
+            ? "Successfully turned on two-factor authentication."
+            : "Successfully turned off two-factor authentication."
+        }`,
         type: "success"
       });
     } catch (err) {
@@ -43,34 +43,32 @@ export const MFASection = () => {
       });
       console.error(err);
     }
-  }
-  
+  };
+
   return (
     <>
-    <form>
-      <div className="p-4 mb-6 bg-mineshaft-900 max-w-6xl rounded-lg border border-mineshaft-600">
-        <p className="text-xl font-semibold text-mineshaft-100 mb-8">
-          Two-factor Authentication
-        </p>
-        {user && (
-          <Checkbox
-            className="data-[state=checked]:bg-primary"
-            id="isTwoFAEnabled"
-            isChecked={user?.isMfaEnabled}
-            onCheckedChange={(state) => {
-              if (serverDetails?.emailConfigured){
-                toggleMfa(state as boolean);
-              } else {
-                handlePopUpOpen("setUpEmail");
-              }
-            }}
-          >
-            Enable 2-factor authentication via your personal email.
-          </Checkbox>
-        )}
-      </div>
-    </form>
-    <EmailServiceSetupModal
+      <form>
+        <div className="mb-6 max-w-6xl rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+          <p className="mb-8 text-xl font-semibold text-mineshaft-100">Two-factor Authentication</p>
+          {user && (
+            <Checkbox
+              className="data-[state=checked]:bg-primary"
+              id="isTwoFAEnabled"
+              isChecked={user?.isMfaEnabled}
+              onCheckedChange={(state) => {
+                if (serverDetails?.emailConfigured) {
+                  toggleMfa(state as boolean);
+                } else {
+                  handlePopUpOpen("setUpEmail");
+                }
+              }}
+            >
+              Enable 2-factor authentication via your personal email.
+            </Checkbox>
+          )}
+        </div>
+      </form>
+      <EmailServiceSetupModal
         isOpen={popUp.setUpEmail?.isOpen}
         onOpenChange={(isOpen) => handlePopUpToggle("setUpEmail", isOpen)}
       />