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>