Iterate SSO auth ux styling

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 {

res/css/views/elements/_SSOButtons.scss

@@ -28,9 +28,13 @@ limitations under the License.
     .mx_SSOButton {
         position: relative;
         width: 100%;
-        padding-left: 32px;
+        padding: 7px 32px;
-        padding-right: 32px;
+        text-align: center;
-        border-color: $input-border-color;
+        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

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>