Make the 'Accept' button for consent a little more friendly

Part of https://github.com/vector-im/riot-web/issues/7700
This commit is contained in:
Travis Ralston 2018-11-15 20:26:37 -07:00
parent c8b38606cc
commit 8916c90fed
4 changed files with 17 additions and 5 deletions

View file

@ -30,19 +30,29 @@ limitations under the License.
border: 1px solid $accent-color; border: 1px solid $accent-color;
} }
.mx_InteractiveAuthEntryComponents_msisdnSubmit, .mx_InteractiveAuthEntryComponents_msisdnSubmit {
.mx_InteractiveAuthEntryComponents_termsSubmit {
margin-top: 4px; margin-top: 4px;
margin-bottom: 5px; margin-bottom: 5px;
} }
.mx_InteractiveAuthEntryComponents_termsSubmit {
margin-top: 20px;
margin-bottom: 5px;
display: block;
width: 100%;
}
// XXX: This should be a common button class // XXX: This should be a common button class
.mx_InteractiveAuthEntryComponents_msisdnSubmit:disabled, .mx_InteractiveAuthEntryComponents_msisdnSubmit:disabled {
.mx_InteractiveAuthEntryComponents_termsSubmit:disabled {
background-color: $light-fg-color; background-color: $light-fg-color;
cursor: default; cursor: default;
} }
.mx_InteractiveAuthEntryComponents_termsSubmit:disabled {
background-color: $accent-color-50pct;
cursor: default;
}
.mx_InteractiveAuthEntryComponents_termsPolicy { .mx_InteractiveAuthEntryComponents_termsPolicy {
display: block; display: block;
} }

View file

@ -12,6 +12,7 @@ $light-fg-color: #747474;
// button UI (white-on-green in light skin) // button UI (white-on-green in light skin)
$accent-fg-color: $primary-bg-color; $accent-fg-color: $primary-bg-color;
$accent-color: #76CFA6; $accent-color: #76CFA6;
$accent-color-50pct: #76CFA67F;
$selection-fg-color: $primary-fg-color; $selection-fg-color: $primary-fg-color;

View file

@ -18,6 +18,7 @@ $focus-bg-color: #dddddd;
// button UI (white-on-green in light skin) // button UI (white-on-green in light skin)
$accent-fg-color: #ffffff; $accent-fg-color: #ffffff;
$accent-color: #76CFA6; $accent-color: #76CFA6;
$accent-color-50pct: #76CFA67F;
$selection-fg-color: $primary-bg-color; $selection-fg-color: $primary-bg-color;

View file

@ -335,7 +335,7 @@ export const TermsAuthEntry = React.createClass({
if (!this.props.hideContinue) { if (!this.props.hideContinue) {
// XXX: button classes // XXX: button classes
submitButton = <button className="mx_InteractiveAuthEntryComponents_termsSubmit mx_UserSettings_button" submitButton = <button className="mx_InteractiveAuthEntryComponents_termsSubmit mx_UserSettings_button"
onClick={this._trySubmit}>{_t("Continue")}</button>; onClick={this._trySubmit} disabled={!allChecked}>{_t("Accept")}</button>;
} }
return ( return (