diff --git a/ui-v2/app/styles/base/icons/base-variables.scss b/ui-v2/app/styles/base/icons/base-variables.scss
index 845c23d98..8dd1eb6f6 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 9c3fa6f2c..bde82cc04 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 194cafc44..410527ae2 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;
}