From 5c60211d7678ac51438d326b7b386b644ffe38a2 Mon Sep 17 00:00:00 2001
From: Michael Weimann <michaelw@matrix.org>
Date: Fri, 25 Nov 2022 08:49:11 +0100
Subject: [PATCH] Fix login screen style (#9611)

---
 res/css/views/auth/_AuthBody.pcss             | 29 ++++++++++++++-----
 res/css/views/dialogs/_VerifyEMailDialog.pcss |  3 ++
 .../structures/auth/ForgotPassword.tsx        |  2 +-
 src/components/views/auth/AuthBody.tsx        |  5 ++--
 4 files changed, 29 insertions(+), 10 deletions(-)

diff --git a/res/css/views/auth/_AuthBody.pcss b/res/css/views/auth/_AuthBody.pcss
index f5e63b6661..824f6411df 100644
--- a/res/css/views/auth/_AuthBody.pcss
+++ b/res/css/views/auth/_AuthBody.pcss
@@ -17,13 +17,12 @@ limitations under the License.
 
 .mx_AuthBody {
     width: 500px;
-    font-size: $font-14px;
-    color: $primary-content;
+    font-size: $font-12px;
+    color: $authpage-secondary-color;
     background-color: $background;
     border-radius: 0 4px 4px 0;
-    padding: 50px 32px;
+    padding: 25px 60px;
     box-sizing: border-box;
-    min-height: 600px;
 
     b {
         font-weight: 600;
@@ -37,8 +36,7 @@ limitations under the License.
     h1 {
         font-size: $font-24px;
         font-weight: $font-semi-bold;
-        margin-bottom: $spacing-20;
-        margin-top: $spacing-24;
+        margin-top: $spacing-8;
         color: $authpage-primary-color;
     }
 
@@ -80,6 +78,10 @@ limitations under the License.
         color: $authpage-primary-color;
     }
 
+    .mx_Field label {
+        color: $authpage-secondary-color;
+    }
+
     .mx_Field input,
     .mx_Field select {
         color: $authpage-primary-color;
@@ -100,7 +102,7 @@ limitations under the License.
     }
 
     .mx_Login_submit {
-        height: 33px;
+        height: 32px;
         margin-top: $spacing-16;
     }
 
@@ -134,6 +136,19 @@ limitations under the License.
     }
 }
 
+/* specialisation for password reset views */
+.mx_AuthBody_forgot-password {
+    font-size: $font-14px;
+    color: $primary-content;
+    padding: 50px 32px;
+    min-height: 600px;
+
+    h1 {
+        margin-bottom: $spacing-20;
+        margin-top: $spacing-24;
+    }
+}
+
 .mx_AuthBody_did-not-receive {
     align-items: center;
     color: $secondary-content;
diff --git a/res/css/views/dialogs/_VerifyEMailDialog.pcss b/res/css/views/dialogs/_VerifyEMailDialog.pcss
index 78cc190022..fa36f0e114 100644
--- a/res/css/views/dialogs/_VerifyEMailDialog.pcss
+++ b/res/css/views/dialogs/_VerifyEMailDialog.pcss
@@ -15,6 +15,9 @@ limitations under the License.
 */
 
 .mx_VerifyEMailDialog {
+    height: auto;
+    top: 300px;
+
     .mx_Dialog {
         color: $primary-content;
         font-size: 14px;
diff --git a/src/components/structures/auth/ForgotPassword.tsx b/src/components/structures/auth/ForgotPassword.tsx
index 8171825fab..fe246aabf7 100644
--- a/src/components/structures/auth/ForgotPassword.tsx
+++ b/src/components/structures/auth/ForgotPassword.tsx
@@ -481,7 +481,7 @@ export default class ForgotPassword extends React.Component<Props, State> {
         return (
             <AuthPage>
                 <AuthHeader />
-                <AuthBody>
+                <AuthBody className="mx_AuthBody_forgot-password">
                     { resetPasswordJsx }
                 </AuthBody>
             </AuthPage>
diff --git a/src/components/views/auth/AuthBody.tsx b/src/components/views/auth/AuthBody.tsx
index 654f48dacb..04c2dfcdb1 100644
--- a/src/components/views/auth/AuthBody.tsx
+++ b/src/components/views/auth/AuthBody.tsx
@@ -18,11 +18,12 @@ import classNames from "classnames";
 import React, { PropsWithChildren } from 'react';
 
 interface Props {
+    className?: string;
     flex?: boolean;
 }
 
-export default function AuthBody({ flex, children }: PropsWithChildren<Props>) {
-    return <main className={classNames("mx_AuthBody", { "mx_AuthBody_flex": flex })}>
+export default function AuthBody({ flex, className, children }: PropsWithChildren<Props>) {
+    return <main className={classNames("mx_AuthBody", className, { "mx_AuthBody_flex": flex })}>
         { children }
     </main>;
 }