fix(login): finished new login screen

src/components/ui/Preloader.tsx

@@ -24,8 +24,9 @@ const PreloaderBase = styled.div`
     width: 100%;
     height: 100%;
 
-    display: grid;
-    place-items: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 
     .spinner {
         width: 58px;

src/pages/login/Login.module.scss

@@ -55,7 +55,7 @@
         background-color: rgba(36, 36, 36, 0.75);
         border: 2px solid rgba(128, 128, 128, 0.15);
         backdrop-filter: blur(20px);
-        max-width: 330px;
+        max-width: 360px;
         max-height: 600px;
         padding: 30px 25px;
         border-radius: 8px;
@@ -64,6 +64,29 @@
         margin-bottom: 20px;
         box-shadow: 0 2px 10px 0 rgb(0 0 0 / 20%);
 
+        .captcha {
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            font-size: 13px;
+
+            .title {
+                font-size: 20px;
+                font-weight: 600;
+                margin-bottom: 10px;
+            }
+
+            .checkbox {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+            }
+
+            a {
+                cursor: pointer;
+            }
+        }
+
         .formModal {
             display: flex;
             flex-direction: column;
@@ -71,10 +94,15 @@
 
             > span {
                 font-size: 13px;
+                word-break: keep-all;
 
                 b {
                     font-weight: 600;
                 }
+
+                a {
+                    white-space: nowrap;
+                }
             }
 
             .welcome {
@@ -84,8 +112,17 @@
             }
 
             .subtitle {
+                display: flex;
+                align-items: center;
+                gap: 6px;
                 font-weight: 400;
                 font-size: 14px;
+
+                > div {
+                    margin-top: 1px;
+                    font-size: 11px;
+                    color: var(--secondary-foreground);
+                }
             }
 
             form {
@@ -169,27 +206,28 @@
 
 .success {
     display: flex;
-    align-items: center;
     flex-direction: column;
+    gap: 10px;
 
-    .note {
-        color: var(--tertiary-foreground);
+    .title {
+        font-size: 20px;
+        font-weight: 600;
     }
 
-    .mailProvider {
-        padding: 24px 0;
-    }
-
-    * {
-        margin: 0;
-    }
-
-    h1 {
+    .subtitle {
         font-weight: 400;
+        font-size: 14px;
+        margin-bottom: 10px;
     }
 
-    h2 {
-        font-weight: 300;
+    button {
+        width: 100%;
+        background: var(--secondary-background);
+        margin-bottom: 8px;
+    }
+
+    a {
+        font-size: 13px;
     }
 }
 

src/pages/login/forms/CaptchaBlock.tsx

@@ -27,16 +27,18 @@ export const CaptchaBlock = observer((props: CaptchaProps) => {
         return <Preloader type="spinner" />;
 
     return (
-        <div>
-            <HCaptcha
-                sitekey={configuration.features.captcha.key}
-                onVerify={(token) => props.onSuccess(token)}
-            />
-            <div className={styles.footer}>
-                <a onClick={props.onCancel}>
-                    <Text id="login.cancel" />
-                </a>
+        <div className={styles.captcha}>
+            <div className={styles.title}>Are you human?</div>
+            <div className={styles.checkbox}>
+                <HCaptcha
+                    theme="dark"
+                    sitekey={configuration.features.captcha.key}
+                    onVerify={(token) => props.onSuccess(token)}
+                />
             </div>
+            <a onClick={props.onCancel}>
+                <Text id="login.cancel" />
+            </a>
         </div>
     );
 });

src/pages/login/forms/Form.tsx

@@ -111,30 +111,28 @@ export function Form({ page, callback }: Props) {
             <div className={styles.success}>
                 {configuration?.features.email ? (
                     <>
-                        <Envelope size={72} />
-                        <h2>
-                            <Text id="login.check_mail" />
-                        </h2>
-                        <p className={styles.note}>
-                            <Text id="login.email_delay" />
-                        </p>
+                        <div>
+                            <div className={styles.title}>
+                                <Text id="login.check_mail" />
+                            </div>
+                            <div className={styles.subtitle}>
+                                <Text id="login.email_delay" />
+                            </div>
+                        </div>
                         <MailProvider email={success} />
                     </>
                 ) : (
                     <>
-                        <CheckCircle size={72} />
-                        <h1>
+                        <div className={styles.title}>
                             <Text id="login.successful_registration" />
-                        </h1>
+                        </div>
                     </>
                 )}
-                <span className={styles.footer}>
-                    <Link to="/login">
-                        <a>
-                            <Text id="login.remembered" />
-                        </a>
-                    </Link>
-                </span>
+                <Link to="/login">
+                    <a>
+                        <Text id="login.remembered" />
+                    </a>
+                </Link>
             </div>
         );
     }
@@ -150,6 +148,7 @@ export function Form({ page, callback }: Props) {
                 </div>
                 <div className={styles.subtitle}>
                     <Text id="login.subtitle" />
+                    <div>(app.revolt.chat)</div>
                 </div>
             </div>