Fix login screen style (#9611)

matrix-org · Nov 25, 2022 · 5c60211 · 5c60211
1 parent 55921e4
commit 5c60211
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>;
 }