feat: New UI for SignUp / Login

apps/web/modules/auth/login-view.tsx

@@ -39,7 +39,7 @@ interface LoginValues {
 }
 
 const GoogleIcon = () => (
-  <img className="text-subtle mr-2 h-4 w-4 dark:invert" src="/google-icon.svg" alt="" />
+  <img className="text-subtle mr-2 h-4 w-4" src="/google-icon-colored.svg" alt="Continue with Google Icon" />
 );
 export type PageProps = inferSSRProps<typeof getServerSideProps>;
 export default function Login({
@@ -195,6 +195,50 @@ PageProps & WithNonceProps<{}>) {
             : null
         }>
         <FormProvider {...methods}>
+          {!twoFactorRequired && (
+            <>
+              <div className="space-y-3">
+                {isGoogleLoginEnabled && (
+                  <Button
+                    color="primary"
+                    className="w-full justify-center"
+                    disabled={formState.isSubmitting}
+                    data-testid="google"
+                    CustomStartIcon={<GoogleIcon />}
+                    onClick={async (e) => {
+                      e.preventDefault();
+                      setLastUsed("google");
+                      await signIn("google", {
+                        callbackUrl,
+                      });
+                    }}>
+                    <span>{t("signin_with_google")}</span>
+                    {lastUsed === "google" && <LastUsed />}
+                  </Button>
+                )}
+                {displaySSOLogin && (
+                  <SAMLLogin
+                    disabled={formState.isSubmitting}
+                    samlTenantID={samlTenantID}
+                    samlProductID={samlProductID}
+                    setErrorMessage={setErrorMessage}
+                  />
+                )}
+              </div>
+              {(isGoogleLoginEnabled || displaySSOLogin) && (
+                <div className="my-8">
+                  <div className="relative flex items-center">
+                    <div className="border-subtle flex-grow border-t" />
+                    <span className="text-subtle mx-2 flex-shrink text-sm font-normal leading-none">
+                      {t("or").toLocaleLowerCase()}
+                    </span>
+                    <div className="border-subtle flex-grow border-t" />
+                  </div>
+                </div>
+              )}
+            </>
+          )}
+
           <form onSubmit={methods.handleSubmit(onSubmit)} noValidate data-testid="login-form">
             <div>
               <input defaultValue={csrfToken || undefined} type="hidden" hidden {...register("csrfToken")} />
@@ -233,7 +277,7 @@ PageProps & WithNonceProps<{}>) {
               {errorMessage && <Alert severity="error" title={errorMessage} />}
               <Button
                 type="submit"
-                color="primary"
+                color="secondary"
                 disabled={formState.isSubmitting}
                 className="w-full justify-center">
                 <span>{twoFactorRequired ? t("submit") : t("sign_in")}</span>
@@ -243,38 +287,6 @@ PageProps & WithNonceProps<{}>) {
               </Button>
             </div>
           </form>
-          {!twoFactorRequired && (
-            <>
-              {(isGoogleLoginEnabled || displaySSOLogin) && <hr className="border-subtle my-8" />}
-              <div className="space-y-3">
-                {isGoogleLoginEnabled && (
-                  <Button
-                    color="secondary"
-                    className="w-full justify-center"
-                    disabled={formState.isSubmitting}
-                    data-testid="google"
-                    CustomStartIcon={<GoogleIcon />}
-                    onClick={async (e) => {
-                      e.preventDefault();
-                      setLastUsed("google");
-                      await signIn("google", {
-                        callbackUrl,
-                      });
-                    }}>
-                    <span>{t("signin_with_google")}</span>
-                    {lastUsed === "google" && <LastUsed />}
-                  </Button>
-                )}
-                {displaySSOLogin && (
-                  <SAMLLogin
-                    samlTenantID={samlTenantID}
-                    samlProductID={samlProductID}
-                    setErrorMessage={setErrorMessage}
-                  />
-                )}
-              </div>
-            </>
-          )}
         </FormProvider>
       </AuthContainer>
       <AddToHomescreen />