Fix: Format entire frontend properly

frontend/src/views/Signup/SignupSSO.tsx

@@ -1,57 +1,40 @@
 import { useState } from "react";
 import jwt_decode from "jwt-decode";
 
-import {
-    BackupPDFStep,
-    UserInfoSSOStep} from "./components";
+import { BackupPDFStep, UserInfoSSOStep } from "./components";
 
-type Props = { 
-    providerAuthToken: string;
-}
+type Props = {
+  providerAuthToken: string;
+};
 
-export const SignupSSO = ({
-    providerAuthToken
-}: Props) => {
-    const [step, setStep] = useState(0);
-    const [password, setPassword] = useState("");
+export const SignupSSO = ({ providerAuthToken }: Props) => {
+  const [step, setStep] = useState(0);
+  const [password, setPassword] = useState("");
 
-    const {
-        username,
-        organizationName,
-        firstName,
-        lastName,
-    } = jwt_decode(providerAuthToken) as any;
+  const { username, organizationName, firstName, lastName } = jwt_decode(providerAuthToken) as any;
 
-    const renderView = () => {
-        switch (step) {
-            case 0:
-                return (
-                    <UserInfoSSOStep 
-                        username={username}
-                        name={`${firstName} ${lastName}`}
-                        providerOrganizationName={organizationName}
-                        password={password}
-                        setPassword={setPassword}
-                        setStep={setStep}
-                        providerAuthToken={providerAuthToken}
-                    />
-                );
-            case 1:
-                return (
-                    <BackupPDFStep 
-                        email={username}
-                        password={password}
-                        name={`${firstName} ${lastName}`}
-                    />
-                );
-            default:
-                return <div />
-        }
+  const renderView = () => {
+    switch (step) {
+      case 0:
+        return (
+          <UserInfoSSOStep
+            username={username}
+            name={`${firstName} ${lastName}`}
+            providerOrganizationName={organizationName}
+            password={password}
+            setPassword={setPassword}
+            setStep={setStep}
+            providerAuthToken={providerAuthToken}
+          />
+        );
+      case 1:
+        return (
+          <BackupPDFStep email={username} password={password} name={`${firstName} ${lastName}`} />
+        );
+      default:
+        return <div />;
     }
-    
-    return (
-        <div>
-            {renderView()}
-        </div>
-    );
-}
+  };
+
+  return <div>{renderView()}</div>;
+};

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";

frontend/src/views/Signup/index.tsx

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