From 747afec27eaed1d9980e1ae09121a372190b58c0 Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@users.noreply.github.com>
Date: Thu, 13 Apr 2023 01:29:09 +0000
Subject: [PATCH] Use `AccessibleButton` for "Accept" on AuthPage (#10508)

* Use AccessibleButton for "Accept" on AuthPage

- Use AccessibleButton
- Remove mx_InteractiveAuthEntryComponents_termsSubmit:disabled as disabled state is handled by AccessibleButton

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Empty commit

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

---------

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
---
 .../auth/_InteractiveAuthEntryComponents.pcss | 22 +++++++++----------
 .../auth/InteractiveAuthEntryComponents.tsx   | 10 ++++-----
 2 files changed, 15 insertions(+), 17 deletions(-)

diff --git a/res/css/views/auth/_InteractiveAuthEntryComponents.pcss b/res/css/views/auth/_InteractiveAuthEntryComponents.pcss
index dfa27ee120..81bc958e19 100644
--- a/res/css/views/auth/_InteractiveAuthEntryComponents.pcss
+++ b/res/css/views/auth/_InteractiveAuthEntryComponents.pcss
@@ -1,5 +1,6 @@
 /*
 Copyright 2017 Vector Creations Ltd
+Copyright 2023 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -14,6 +15,15 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+.mx_InteractiveAuthEntryComponents {
+    .mx_InteractiveAuthEntryComponents_termsSubmit {
+        margin-top: 20px;
+        margin-bottom: 5px;
+        width: 100%;
+        box-sizing: border-box; /* prevent overflowing */
+    }
+}
+
 .mx_InteractiveAuthEntryComponents_msisdnWrapper {
     text-align: center;
 }
@@ -35,24 +45,12 @@ limitations under the License.
     margin-bottom: 5px;
 }
 
-.mx_InteractiveAuthEntryComponents_termsSubmit {
-    margin-top: 20px;
-    margin-bottom: 5px;
-    display: block;
-    width: 100%;
-}
-
 /* XXX: This should be a common button class */
 .mx_InteractiveAuthEntryComponents_msisdnSubmit:disabled {
     background-color: $light-fg-color;
     cursor: default;
 }
 
-.mx_InteractiveAuthEntryComponents_termsSubmit:disabled {
-    background-color: #92caad; /* Only used here */
-    cursor: default;
-}
-
 .mx_InteractiveAuthEntryComponents_termsPolicy {
     display: flex;
     flex-direction: row;
diff --git a/src/components/views/auth/InteractiveAuthEntryComponents.tsx b/src/components/views/auth/InteractiveAuthEntryComponents.tsx
index 8910b91945..58923c63e4 100644
--- a/src/components/views/auth/InteractiveAuthEntryComponents.tsx
+++ b/src/components/views/auth/InteractiveAuthEntryComponents.tsx
@@ -386,20 +386,20 @@ export class TermsAuthEntry extends React.Component<ITermsAuthEntryProps, ITerms
 
         let submitButton: JSX.Element | undefined;
         if (this.props.showContinue !== false) {
-            // XXX: button classes
             submitButton = (
-                <button
-                    className="mx_InteractiveAuthEntryComponents_termsSubmit mx_GeneralButton"
+                <AccessibleButton
+                    kind="primary"
+                    className="mx_InteractiveAuthEntryComponents_termsSubmit"
                     onClick={this.trySubmit}
                     disabled={!allChecked}
                 >
                     {_t("Accept")}
-                </button>
+                </AccessibleButton>
             );
         }
 
         return (
-            <div>
+            <div className="mx_InteractiveAuthEntryComponents">
                 <p>{_t("Please review and accept the policies of this homeserver:")}</p>
                 {checkboxes}
                 {errorSection}