Fixes a broken link and set margin around links on authentication dialog

res/css/_components.scss

@@ -74,6 +74,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";

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; // TODO: Use a spacing variable
+    }
 }
 
 .mx_SSOButtons + .mx_AuthBody_changeFlow {

res/css/views/auth/_CaptchaForm.scss

@@ -0,0 +1,22 @@
+/*
+Copyright 2022 Suguru Hirahara <[email protected]>
+
+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: $spacing-12 auto;
+    }
+}

src/components/structures/auth/Registration.tsx

@@ -570,7 +570,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>,
             }) }
@@ -579,13 +579,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;

src/components/views/auth/CaptchaForm.tsx

@@ -124,19 +124,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_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 id={DIV_ID} />
-                { error }
+                <div
+                    className="mx_CaptchaForm_recaptchaContainer_recaptcha"
+                    id={DIV_ID}
+                />
+                <div className="mx_CaptchaForm_recaptchaContainer_error">{ error }</div>
             </div>
         );
     }