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}