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>

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;

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
+                <AccessibleButton
-                    className="mx_InteractiveAuthEntryComponents_termsSubmit mx_GeneralButton"
+                    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}