From f442200d3039796fe25458526c3dd07d440f2d60 Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@users.noreply.github.com>
Date: Thu, 31 Mar 2022 13:22:56 +0000
Subject: [PATCH 1/7] Fixes a broken link and set margin around links

Closes https://github.com/vector-im/element-web/issues/21624

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
---
 res/css/views/auth/_AuthBody.scss               | 16 ++++++++++++++++
 src/components/structures/auth/Registration.tsx |  4 ++--
 src/components/views/auth/CaptchaForm.tsx       | 13 ++++++++-----
 3 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/res/css/views/auth/_AuthBody.scss b/res/css/views/auth/_AuthBody.scss
index 8c6b6bdff00..b2f93cc2b78 100644
--- a/res/css/views/auth/_AuthBody.scss
+++ b/res/css/views/auth/_AuthBody.scss
@@ -94,6 +94,22 @@ limitations under the License.
             background-color: $authpage-focus-bg-color;
         }
     }
+
+    .mx_recaptchaContainer {
+        .mx_recaptchaContainer_info,
+        .mx_recaptchaContainer_error {
+            margin: 12px auto;
+        }
+    }
+
+    .mx_AuthBody_link_goBack {
+        margin: 12px auto 6px;
+        max-width: fit-content;
+    }
+
+    .mx_AuthBody_link_signIn {
+        margin-top: 6px;
+    }
 }
 
 .mx_AuthBody_fieldRow {
diff --git a/src/components/structures/auth/Registration.tsx b/src/components/structures/auth/Registration.tsx
index 828ca8d79d7..778dbabc7b3 100644
--- a/src/components/structures/auth/Registration.tsx
+++ b/src/components/structures/auth/Registration.tsx
@@ -614,8 +614,8 @@ export default class Registration extends React.Component<IProps, IState> {
                     onServerConfigChange={this.state.doingUIAuth ? undefined : this.props.onServerConfigChange}
                 />
                 { this.renderRegisterComponent() }
-                { goBack }
-                { signIn }
+                <div className="mx_AuthBody_link_goBack">{ goBack }</div>
+                <div className="mx_AuthBody_link_signIn">{ signIn }</div>
             </div>;
         }
 
diff --git a/src/components/views/auth/CaptchaForm.tsx b/src/components/views/auth/CaptchaForm.tsx
index 887f174c003..402c9adf455 100644
--- a/src/components/views/auth/CaptchaForm.tsx
+++ b/src/components/views/auth/CaptchaForm.tsx
@@ -126,19 +126,22 @@ export default class CaptchaForm extends React.Component<ICaptchaFormProps, ICap
         let error = null;
         if (this.state.errorText) {
             error = (
-                <div className="error">
+                <div className="error" role="alert">
                     { this.state.errorText }
                 </div>
             );
         }
 
         return (
-            <div ref={this.recaptchaContainer}>
-                <p>{ _t(
+            <div className="mx_recaptchaContainer" ref={this.recaptchaContainer}>
+                <p className="mx_recaptchaContainer_info">{ _t(
                     "This homeserver would like to make sure you are not a robot.",
                 ) }</p>
-                <div id={DIV_ID} />
-                { error }
+                <div
+                    className="mx_recaptchaContainer_recaptcha"
+                    id={DIV_ID}
+                />
+                <div className="mx_recaptchaContainer_error">{ error }</div>
             </div>
         );
     }

From dbdf83d3c2dc6ae0f0b7c8decda78542f480569d Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@users.noreply.github.com>
Date: Fri, 1 Apr 2022 15:45:13 +0000
Subject: [PATCH 2/7] Wrap an inlined AccessibleButton with div

As long as mx_AuthBody_changeFlow is specified to the AccessibleButton,
the link may not be inlined as expected because of mx_AuthBody_changeFlow's
styles (display: block & width: 100%). We need a wrapper anyway.

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
---
 res/css/views/auth/_AuthBody.scss               |  5 -----
 src/components/structures/auth/Registration.tsx | 17 +++++++++--------
 2 files changed, 9 insertions(+), 13 deletions(-)

diff --git a/res/css/views/auth/_AuthBody.scss b/res/css/views/auth/_AuthBody.scss
index b2f93cc2b78..c5d13fe2716 100644
--- a/res/css/views/auth/_AuthBody.scss
+++ b/res/css/views/auth/_AuthBody.scss
@@ -102,11 +102,6 @@ limitations under the License.
         }
     }
 
-    .mx_AuthBody_link_goBack {
-        margin: 12px auto 6px;
-        max-width: fit-content;
-    }
-
     .mx_AuthBody_link_signIn {
         margin-top: 6px;
     }
diff --git a/src/components/structures/auth/Registration.tsx b/src/components/structures/auth/Registration.tsx
index 778dbabc7b3..d59d64ca026 100644
--- a/src/components/structures/auth/Registration.tsx
+++ b/src/components/structures/auth/Registration.tsx
@@ -545,13 +545,14 @@ export default class Registration extends React.Component<IProps, IState> {
         // Only show the 'go back' button if you're not looking at the form
         let goBack;
         if (this.state.doingUIAuth) {
-            goBack = <AccessibleButton
-                kind='link_inline'
-                className="mx_AuthBody_changeFlow"
-                onClick={this.onGoToFormClicked}
-            >
-                { _t('Go back') }
-            </AccessibleButton>;
+            goBack = <div className="mx_AuthBody_changeFlow">
+                <AccessibleButton
+                    kind='link_inline'
+                    onClick={this.onGoToFormClicked}
+                >
+                    { _t('Go back') }
+                </AccessibleButton>
+            </div>;
         }
 
         let body;
@@ -614,7 +615,7 @@ export default class Registration extends React.Component<IProps, IState> {
                     onServerConfigChange={this.state.doingUIAuth ? undefined : this.props.onServerConfigChange}
                 />
                 { this.renderRegisterComponent() }
-                <div className="mx_AuthBody_link_goBack">{ goBack }</div>
+                { goBack }
                 <div className="mx_AuthBody_link_signIn">{ signIn }</div>
             </div>;
         }

From 94254772e0b763b2a95aa39801df8f40460a7a36 Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@users.noreply.github.com>
Date: Fri, 1 Apr 2022 16:37:20 +0000
Subject: [PATCH 3/7] Add the prefix first

mx_CaptchaForm_*

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
---
 res/css/views/auth/_AuthBody.scss         | 6 +++---
 src/components/views/auth/CaptchaForm.tsx | 8 ++++----
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/res/css/views/auth/_AuthBody.scss b/res/css/views/auth/_AuthBody.scss
index c5d13fe2716..a958244bd10 100644
--- a/res/css/views/auth/_AuthBody.scss
+++ b/res/css/views/auth/_AuthBody.scss
@@ -95,9 +95,9 @@ limitations under the License.
         }
     }
 
-    .mx_recaptchaContainer {
-        .mx_recaptchaContainer_info,
-        .mx_recaptchaContainer_error {
+    .mx_CaptchaForm_recaptchaContainer {
+        .mx_CaptchaForm_recaptchaContainer_info,
+        .mx_CaptchaForm_recaptchaContainer_error {
             margin: 12px auto;
         }
     }
diff --git a/src/components/views/auth/CaptchaForm.tsx b/src/components/views/auth/CaptchaForm.tsx
index 402c9adf455..2b648da30cb 100644
--- a/src/components/views/auth/CaptchaForm.tsx
+++ b/src/components/views/auth/CaptchaForm.tsx
@@ -133,15 +133,15 @@ export default class CaptchaForm extends React.Component<ICaptchaFormProps, ICap
         }
 
         return (
-            <div className="mx_recaptchaContainer" ref={this.recaptchaContainer}>
-                <p className="mx_recaptchaContainer_info">{ _t(
+            <div className="mx_CaptchaForm_recaptchaContainer" ref={this.recaptchaContainer}>
+                <p className="mx_CaptchaForm_recaptchaContainer_info">{ _t(
                     "This homeserver would like to make sure you are not a robot.",
                 ) }</p>
                 <div
-                    className="mx_recaptchaContainer_recaptcha"
+                    className="mx_CaptchaForm_recaptchaContainer_recaptcha"
                     id={DIV_ID}
                 />
-                <div className="mx_recaptchaContainer_error">{ error }</div>
+                <div className="mx_CaptchaForm_recaptchaContainer_error">{ error }</div>
             </div>
         );
     }

From 42874a97bed6c482589a80f66f4c395ea8b8ce9f Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@users.noreply.github.com>
Date: Fri, 1 Apr 2022 17:22:48 +0000
Subject: [PATCH 4/7] Create _CaptchaForm.scss

Setting "p" tag instead of "mx_CaptchaForm_recaptchaContainer_info"
would be too broad.

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
---
 res/css/_components.scss             |  1 +
 res/css/views/auth/_AuthBody.scss    |  7 -------
 res/css/views/auth/_CaptchaForm.scss | 22 ++++++++++++++++++++++
 3 files changed, 23 insertions(+), 7 deletions(-)
 create mode 100644 res/css/views/auth/_CaptchaForm.scss

diff --git a/res/css/_components.scss b/res/css/_components.scss
index 4c72550c157..13688f94b2f 100644
--- a/res/css/_components.scss
+++ b/res/css/_components.scss
@@ -58,6 +58,7 @@
 @import "./views/auth/_AuthHeader.scss";
 @import "./views/auth/_AuthHeaderLogo.scss";
 @import "./views/auth/_AuthPage.scss";
+@import "./views/auth/_CaptchaForm.scss";
 @import "./views/auth/_CompleteSecurityBody.scss";
 @import "./views/auth/_CountryDropdown.scss";
 @import "./views/auth/_InteractiveAuthEntryComponents.scss";
diff --git a/res/css/views/auth/_AuthBody.scss b/res/css/views/auth/_AuthBody.scss
index a958244bd10..2de44a2f4da 100644
--- a/res/css/views/auth/_AuthBody.scss
+++ b/res/css/views/auth/_AuthBody.scss
@@ -95,13 +95,6 @@ limitations under the License.
         }
     }
 
-    .mx_CaptchaForm_recaptchaContainer {
-        .mx_CaptchaForm_recaptchaContainer_info,
-        .mx_CaptchaForm_recaptchaContainer_error {
-            margin: 12px auto;
-        }
-    }
-
     .mx_AuthBody_link_signIn {
         margin-top: 6px;
     }
diff --git a/res/css/views/auth/_CaptchaForm.scss b/res/css/views/auth/_CaptchaForm.scss
new file mode 100644
index 00000000000..ebb85b24396
--- /dev/null
+++ b/res/css/views/auth/_CaptchaForm.scss
@@ -0,0 +1,22 @@
+/*
+Copyright 2022 Suguru Hirahara <1k9jp7jt4@relay.firefox.com>
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_CaptchaForm_recaptchaContainer {
+    .mx_CaptchaForm_recaptchaContainer_info,
+    .mx_CaptchaForm_recaptchaContainer_error {
+        margin: 12px auto;
+    }
+}

From ca411f7757bbe4c6ddefeac942a9c33d548db621 Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@users.noreply.github.com>
Date: Fri, 1 Apr 2022 18:09:21 +0000
Subject: [PATCH 5/7] mx_AuthBody_changeFlow_signIn

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
---
 res/css/views/auth/_AuthBody.scss               | 4 ++++
 src/components/structures/auth/Registration.tsx | 4 ++--
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/res/css/views/auth/_AuthBody.scss b/res/css/views/auth/_AuthBody.scss
index 2de44a2f4da..b363fa20952 100644
--- a/res/css/views/auth/_AuthBody.scss
+++ b/res/css/views/auth/_AuthBody.scss
@@ -148,6 +148,10 @@ limitations under the License.
     > a {
         font-weight: $font-semi-bold;
     }
+
+    &.mx_AuthBody_changeFlow_signIn {
+        margin: 6px auto 0;
+    }
 }
 
 .mx_SSOButtons + .mx_AuthBody_changeFlow {
diff --git a/src/components/structures/auth/Registration.tsx b/src/components/structures/auth/Registration.tsx
index d59d64ca026..1fbbf0e3584 100644
--- a/src/components/structures/auth/Registration.tsx
+++ b/src/components/structures/auth/Registration.tsx
@@ -536,7 +536,7 @@ export default class Registration extends React.Component<IProps, IState> {
             );
         }
 
-        const signIn = <span className="mx_AuthBody_changeFlow">
+        const signIn = <span className="mx_AuthBody_changeFlow mx_AuthBody_changeFlow_signIn">
             { _t("Already have an account? <a>Sign in here</a>", {}, {
                 a: sub => <AccessibleButton kind='link_inline' onClick={this.onLoginClick}>{ sub }</AccessibleButton>,
             }) }
@@ -616,7 +616,7 @@ export default class Registration extends React.Component<IProps, IState> {
                 />
                 { this.renderRegisterComponent() }
                 { goBack }
-                <div className="mx_AuthBody_link_signIn">{ signIn }</div>
+                { signIn }
             </div>;
         }
 

From 69bfbb7e96da8110fa81c056a607a36e3efc972a Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@users.noreply.github.com>
Date: Fri, 1 Apr 2022 18:13:04 +0000
Subject: [PATCH 6/7] Remove mx_AuthBody_link_signIn

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
---
 res/css/views/auth/_AuthBody.scss | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/res/css/views/auth/_AuthBody.scss b/res/css/views/auth/_AuthBody.scss
index b363fa20952..ab85ad4995c 100644
--- a/res/css/views/auth/_AuthBody.scss
+++ b/res/css/views/auth/_AuthBody.scss
@@ -94,10 +94,6 @@ limitations under the License.
             background-color: $authpage-focus-bg-color;
         }
     }
-
-    .mx_AuthBody_link_signIn {
-        margin-top: 6px;
-    }
 }
 
 .mx_AuthBody_fieldRow {

From b7151e563cca9fc02d7a5d764d6f02350896f25e Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@users.noreply.github.com>
Date: Fri, 13 May 2022 02:48:02 +0900
Subject: [PATCH 7/7] Use a variable

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
---
 res/css/views/auth/_AuthBody.scss    | 2 +-
 res/css/views/auth/_CaptchaForm.scss | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/res/css/views/auth/_AuthBody.scss b/res/css/views/auth/_AuthBody.scss
index ab85ad4995c..14224bee5ee 100644
--- a/res/css/views/auth/_AuthBody.scss
+++ b/res/css/views/auth/_AuthBody.scss
@@ -146,7 +146,7 @@ limitations under the License.
     }
 
     &.mx_AuthBody_changeFlow_signIn {
-        margin: 6px auto 0;
+        margin: 6px auto 0; // TODO: Use a spacing variable
     }
 }
 
diff --git a/res/css/views/auth/_CaptchaForm.scss b/res/css/views/auth/_CaptchaForm.scss
index ebb85b24396..c8ddf355236 100644
--- a/res/css/views/auth/_CaptchaForm.scss
+++ b/res/css/views/auth/_CaptchaForm.scss
@@ -17,6 +17,6 @@ limitations under the License.
 .mx_CaptchaForm_recaptchaContainer {
     .mx_CaptchaForm_recaptchaContainer_info,
     .mx_CaptchaForm_recaptchaContainer_error {
-        margin: 12px auto;
+        margin: $spacing-12 auto;
     }
 }