From 12b1bc28b43919610d8aaead7c1a70af7f266278 Mon Sep 17 00:00:00 2001 From: John Cowen Date: Wed, 27 May 2020 14:24:35 +0100 Subject: [PATCH] ui: SSO Icon cleanup (#7959) 1. Removes all icons not supported by the backend 2. Adds other icons supported by the backend 3. If there is no icon available don't add CSS positioning for one --- .../app/styles/base/icons/base-variables.scss | 2 ++ .../styles/base/icons/icon-placeholders.scss | 20 +++++++++++++++++ .../styles/components/oidc-select/skin.scss | 22 +++++-------------- 3 files changed, 28 insertions(+), 16 deletions(-) diff --git a/ui-v2/app/styles/base/icons/base-variables.scss b/ui-v2/app/styles/base/icons/base-variables.scss index 845c23d98a..8dd1eb6f64 100644 --- a/ui-v2/app/styles/base/icons/base-variables.scss +++ b/ui-v2/app/styles/base/icons/base-variables.scss @@ -99,8 +99,10 @@ $logo-github-color-svg: url('data:image/svg+xml;charset=UTF-8,'); $logo-gitlab-color-svg: url('data:image/svg+xml;charset=UTF-8,'); $logo-gitlab-monochrome-svg: url('data:image/svg+xml;charset=UTF-8,'); +$logo-google-color-svg: url('data:image/svg+xml;charset=UTF-8,'); $logo-kubernetes-color-svg: url('data:image/svg+xml;charset=UTF-8,'); $logo-kubernetes-monochrome-svg: url('data:image/svg+xml;charset=UTF-8,'); +$logo-microsoft-color-svg: url('data:image/svg+xml;charset=UTF-8,'); $logo-okta-color-svg: url('data:image/svg+xml;charset=UTF-8,'); $logo-oracle-color-svg: url('data:image/svg+xml;charset=UTF-8,'); $logo-oracle-monochrome-svg: url('data:image/svg+xml;charset=UTF-8,'); diff --git a/ui-v2/app/styles/base/icons/icon-placeholders.scss b/ui-v2/app/styles/base/icons/icon-placeholders.scss index 9c3fa6f2c2..bde82cc049 100644 --- a/ui-v2/app/styles/base/icons/icon-placeholders.scss +++ b/ui-v2/app/styles/base/icons/icon-placeholders.scss @@ -998,6 +998,16 @@ mask-image: $logo-gitlab-monochrome-svg; } +%with-logo-google-color-icon { + @extend %with-icon; + background-image: $logo-google-color-svg; +} +%with-logo-google-color-mask { + @extend %with-mask; + -webkit-mask-image: $logo-google-color-svg; + mask-image: $logo-google-color-svg; +} + %with-logo-kubernetes-color-icon { @extend %with-icon; background-image: $logo-kubernetes-color-svg; @@ -1018,6 +1028,16 @@ mask-image: $logo-kubernetes-monochrome-svg; } +%with-logo-microsoft-color-icon { + @extend %with-icon; + background-image: $logo-microsoft-color-svg; +} +%with-logo-microsoft-color-mask { + @extend %with-mask; + -webkit-mask-image: $logo-microsoft-color-svg; + mask-image: $logo-microsoft-color-svg; +} + %with-logo-okta-color-icon { @extend %with-icon; background-image: $logo-okta-color-svg; diff --git a/ui-v2/app/styles/components/oidc-select/skin.scss b/ui-v2/app/styles/components/oidc-select/skin.scss index 194cafc449..410527ae2d 100644 --- a/ui-v2/app/styles/components/oidc-select/skin.scss +++ b/ui-v2/app/styles/components/oidc-select/skin.scss @@ -1,5 +1,4 @@ %oidc-select [class$='-oidc-provider']::before { - @extend %as-pseudo; width: 22px; height: 22px; /* this is to prevent resizing in an inline-flex context */ @@ -8,23 +7,14 @@ margin-right: 10px; } %oidc-select .auth0-oidc-provider::before { - @extend %with-logo-auth0-color-icon; + @extend %with-logo-auth0-color-icon, %as-pseudo; } %oidc-select .okta-oidc-provider::before { - @extend %with-logo-okta-color-icon; + @extend %with-logo-okta-color-icon, %as-pseudo; } -%oidc-select .gitlab-oidc-provider::before { - @extend %with-logo-gitlab-color-icon; +%oidc-select .google-oidc-provider::before { + @extend %with-logo-google-color-icon, %as-pseudo; } -%oidc-select .aws-oidc-provider::before { - @extend %with-logo-aws-color-icon; -} -%oidc-select .azure-oidc-provider::before { - @extend %with-logo-azure-color-icon; -} -%oidc-select .bitbucket-oidc-provider::before { - @extend %with-logo-bitbucket-color-icon; -} -%oidc-select .gcp-oidc-provider::before { - @extend %with-logo-gcp-color-icon; +%oidc-select .microsoft-oidc-provider::before { + @extend %with-logo-microsoft-color-icon, %as-pseudo; }