Fix: Format entire frontend properly

frontend/src/views/Signup/components/BackupPDFStep/BackupPDFStep.tsx

@@ -1,5 +1,5 @@
 import { useTranslation } from "react-i18next";
-import { useRouter } from "next/router"
+import { useRouter } from "next/router";
 import { faWarning } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
@@ -7,9 +7,9 @@ import issueBackupKey from "@app/components/utilities/cryptography/issueBackupKe
 import { Button } from "@app/components/v2";
 
 interface DownloadBackupPDFStepProps {
-    email: string;
-    password: string;
-    name: string;
+  email: string;
+  password: string;
+  name: string;
 }
 
 /**
@@ -21,46 +21,48 @@ interface DownloadBackupPDFStepProps {
  * @param {string} obj.name - user's name
  * @returns
  */
-export const BackupPDFStep = ({
-    email,
-    password,
-    name
-}: DownloadBackupPDFStepProps) => {
-    const { t } = useTranslation();
-    const router = useRouter();
+export const BackupPDFStep = ({ email, password, name }: DownloadBackupPDFStepProps) => {
+  const { t } = useTranslation();
+  const router = useRouter();
 
   return (
-    <div className="flex flex-col items-center w-full h-full md:px-6 mx-auto mb-36 md:mb-16">
-      <p className="text-xl text-center font-medium flex justify-center text-transparent bg-clip-text bg-gradient-to-b from-white to-bunker-200">
-        <FontAwesomeIcon icon={faWarning} className="ml-2 mr-3 pt-1 text-2xl text-bunker-200" />{t("signup.step4-message")}
+    <div className="mx-auto mb-36 flex h-full w-full flex-col items-center md:mb-16 md:px-6">
+      <p className="flex justify-center bg-gradient-to-b from-white to-bunker-200 bg-clip-text text-center text-xl font-medium text-transparent">
+        <FontAwesomeIcon icon={faWarning} className="ml-2 mr-3 pt-1 text-2xl text-bunker-200" />
+        {t("signup.step4-message")}
       </p>
-      <div className="flex flex-col pb-2 bg-mineshaft-800 border border-mineshaft-600 items-center justify-center text-center lg:w-1/6 w-full md:min-w-[24rem] mt-8 max-w-md text-bunker-300 text-md rounded-md">
-        <div className="w-full mt-4 md:mt-8 flex flex-row text-center items-center m-2 text-bunker-300 rounded-md lg:w-1/6 lg:w-1/6 w-full md:min-w-[23rem] px-3 mx-auto">
-          <span className='mb-2'>{t("signup.step4-description1")} {t("signup.step4-description3")}</span>
+      <div className="text-md mt-8 flex w-full max-w-md flex-col items-center justify-center rounded-md border border-mineshaft-600 bg-mineshaft-800 pb-2 text-center text-bunker-300 md:min-w-[24rem] lg:w-1/6">
+        <div className="m-2 mx-auto mt-4 flex w-full w-full flex-row items-center rounded-md px-3 text-center text-bunker-300 md:mt-8 md:min-w-[23rem] lg:w-1/6 lg:w-1/6">
+          <span className="mb-2">
+            {t("signup.step4-description1")} {t("signup.step4-description3")}
+          </span>
         </div>
-        <div className="flex flex-col items-center px-3 justify-center mt-0 md:mt-4 mb-2 md:mb-4 lg:w-1/6 w-full md:min-w-[20rem] mt-2 md:max-w-md mx-auto text-sm text-center md:text-left">
-          <div className="text-l py-1 text-lg w-full">
+        <div className="mx-auto mt-0 mb-2 mt-2 flex w-full flex-col items-center justify-center px-3 text-center text-sm md:mt-4 md:mb-4 md:min-w-[20rem] md:max-w-md md:text-left lg:w-1/6">
+          <div className="text-l w-full py-1 text-lg">
             <Button
               onClick={async () => {
                 await issueBackupKey({
                   email,
                   password,
                   personalName: name,
-                  setBackupKeyError: () => { },
-                  setBackupKeyIssued: () => { }
+                  setBackupKeyError: () => {},
+                  setBackupKeyIssued: () => {}
                 });
 
                 router.push(`/org/${localStorage.getItem("orgData.id")}/overview`);
               }}
               size="sm"
               isFullWidth
-              className='h-12'
+              className="h-12"
               colorSchema="primary"
               variant="outline_bg"
-            > Download PDF </Button>
+            >
+              {" "}
+              Download PDF{" "}
+            </Button>
           </div>
         </div>
       </div>
     </div>
   );
-}
+};

frontend/src/views/Signup/components/BackupPDFStep/index.tsx

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

frontend/src/views/Signup/components/UserInfoSSOStep/index.tsx

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

frontend/src/views/Signup/components/index.tsx

@@ -1,2 +1,2 @@
 export { BackupPDFStep } from "./BackupPDFStep";
-export { UserInfoSSOStep } from "./UserInfoSSOStep";
+export { UserInfoSSOStep } from "./UserInfoSSOStep";