From 0167c3cefbc8f7e1ba1be0c7473b606504e9480f Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Fri, 29 Jan 2021 13:04:05 +0000
Subject: [PATCH] Iterate SSO auth ux styling
---
res/css/views/auth/_AuthBody.scss | 2 +-
res/css/views/elements/_SSOButtons.scss | 20 +++++++++++++++++---
src/components/views/elements/SSOButtons.tsx | 7 ++++---
3 files changed, 22 insertions(+), 7 deletions(-)
diff --git a/res/css/views/auth/_AuthBody.scss b/res/css/views/auth/_AuthBody.scss
index 8f0c758e7a..90dca32e48 100644
--- a/res/css/views/auth/_AuthBody.scss
+++ b/res/css/views/auth/_AuthBody.scss
@@ -34,7 +34,7 @@ limitations under the License.
h3 {
font-size: $font-14px;
font-weight: 600;
- color: $authpage-primary-color;
+ color: $authpage-secondary-color;
}
h3.mx_AuthBody_centered {
diff --git a/res/css/views/elements/_SSOButtons.scss b/res/css/views/elements/_SSOButtons.scss
index ff6545045a..add048efb0 100644
--- a/res/css/views/elements/_SSOButtons.scss
+++ b/res/css/views/elements/_SSOButtons.scss
@@ -28,9 +28,13 @@ limitations under the License.
.mx_SSOButton {
position: relative;
width: 100%;
- padding-left: 32px;
- padding-right: 32px;
- border-color: $input-border-color;
+ padding: 7px 32px;
+ text-align: center;
+ border-radius: 8px;
+ display: inline-block;
+ font-size: $font-14px;
+ font-weight: $font-semi-bold;
+ border: 1px solid $input-border-color;
color: $primary-fg-color;
> img {
@@ -41,6 +45,16 @@ limitations under the License.
}
}
+ .mx_SSOButton_default {
+ color: $button-primary-bg-color;
+ background-color: $button-secondary-bg-color;
+ border-color: $button-primary-bg-color;
+ }
+ .mx_SSOButton_default.mx_SSOButton_primary {
+ color: $button-primary-fg-color;
+ background-color: $button-primary-bg-color;
+ }
+
.mx_SSOButton_mini {
box-sizing: border-box;
width: 50px; // 48px + 1px border on all sides
diff --git a/src/components/views/elements/SSOButtons.tsx b/src/components/views/elements/SSOButtons.tsx
index 80e8a4956e..3a03252ebd 100644
--- a/src/components/views/elements/SSOButtons.tsx
+++ b/src/components/views/elements/SSOButtons.tsx
@@ -58,7 +58,6 @@ const SSOButton: React.FC<ISSOButtonProps> = ({
mini,
...props
}) => {
- const kind = primary ? "primary" : "primary_outline";
const label = idp ? _t("Continue with %(provider)s", { provider: idp.name }) : _t("Sign in with single sign-on");
const onClick = () => {
@@ -80,19 +79,21 @@ const SSOButton: React.FC<ISSOButtonProps> = ({
const classes = classNames("mx_SSOButton", {
[brandClass]: brandClass,
mx_SSOButton_mini: mini,
+ mx_SSOButton_default: !idp,
+ mx_SSOButton_primary: primary,
});
if (mini) {
// TODO fallback icon
return (
- <AccessibleTooltipButton {...props} title={label} className={classes} kind={kind} onClick={onClick}>
+ <AccessibleTooltipButton {...props} title={label} className={classes} onClick={onClick}>
{ icon }
</AccessibleTooltipButton>
);
}
return (
- <AccessibleButton {...props} className={classes} kind={kind} onClick={onClick}>
+ <AccessibleButton {...props} className={classes} onClick={onClick}>
{ icon }
{ label }
</AccessibleButton>