TheArchive/zitadel
1
0
Fork 0
mirror of https://github.com/zitadel/zitadel.git synced 2024-12-12 02:54:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(login): improve and streamline identity provider styles (#5456)

Browse Source 
* fix: login idp styles

* rem dead code
This commit is contained in:
Max Peintner 2023-07-07 13:17:08 +02:00 committed by GitHub
parent 9fed1a7a5b
commit 699fc86d1b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 118 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
internal/api/ui/login/static/resources/images/idp/ms.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 21 21"><title>MS-SymbolLockup</title><rect x="1" y="1" width="9" height="9" fill="#f25022"/><rect x="1" y="11" width="9" height="9" fill="#00a4ef"/><rect x="11" y="1" width="9" height="9" fill="#7fba00"/><rect x="11" y="11" width="9" height="9" fill="#ffb900"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 343 B

120
internal/api/ui/login/static/resources/themes/scss/styles/identity_provider/identity_provider_base.scss
View File

@ -1,68 +1,78 @@
$lgn-idp-margin: .5rem 0;
$lgn-idp-margin: 0.5rem 0;
$lgn-idp-padding: 0 1px;
$lgn-idp-provider-name-line-height: 36px;
$lgn-idp-border-radius: .5rem;
$googlelogosource: '../../../images/idp/google';
$githublogosource: '../../../images/idp/github';
$gitlablogosource: '../../../images/idp/gitlab';
$lgn-idp-border-radius: 0.5rem;
@mixin lgn-idp-base {
display: block;
margin: $lgn-idp-margin;
box-sizing: border-box;
display: flex;
align-items: center;
position: relative;
padding: $lgn-idp-padding;
border-radius: $lgn-idp-border-radius;
border-width: 1px;
border-style: solid;
display: block;
margin: $lgn-idp-margin;
box-sizing: border-box;
display: flex;
align-items: center;
position: relative;
padding: $lgn-idp-padding;
border-radius: $lgn-idp-border-radius;
border-width: 1px;
border-style: solid;
transition: border-color 0.2s ease-in-out;
span.logo {
height: 46px;
width: 46px;
}
span.provider-name {
line-height: $lgn-idp-provider-name-line-height;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
&.google {
span.logo {
height: 46px;
width: 46px;
height: 46px;
width: 46px;
background-image: var(--google-image-src);
background-size: 25px;
background-position: center;
background-repeat: no-repeat;
border-radius: 5px;
}
}
span.provider-name {
line-height: $lgn-idp-provider-name-line-height;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
&.google {
span.logo {
height: 46px;
width: 46px;
background-image: url($googlelogosource + '.png');
background-size: 25px;
background-position: center;
background-repeat: no-repeat;
border-radius: 5px;
}
&.github {
span.logo {
height: 46px;
width: 46px;
background-image: var(--github-image-src);
background-size: 25px;
background-position: center;
background-repeat: no-repeat;
border-radius: 5px;
}
}
&.github {
span.logo {
height: 46px;
width: 46px;
background-image: url($githublogosource + '.png');
background-size: 25px;
background-position: center;
background-repeat: no-repeat;
border-radius: 5px;
}
&.gitlab {
span.logo {
height: 46px;
width: 46px;
background-image: var(--gitlab-image-src);
background-size: 100%;
background-position: center;
background-repeat: no-repeat;
border-radius: 5px;
}
}
&.gitlab {
span.logo {
height: 46px;
width: 46px;
background-image: url($gitlablogosource + '.png');
background-size: 100%;
background-position: center;
background-repeat: no-repeat;
border-radius: 5px;
}
&.azure {
span.logo {
height: 46px;
width: 46px;
background-image: var(--azure-image-src);
background-size: 25px;
background-position: center;
background-repeat: no-repeat;
border-radius: 5px;
}
}
}

19
internal/api/ui/login/static/resources/themes/scss/styles/identity_provider/identity_provider_theme.scss
View File

@ -10,26 +10,11 @@
color: var(--zitadel-color-text-500);
&:hover {
@include lgn-idp-elevation(1);
border-color: var(--zitadel-color-input-border-hover);
}
&:not([disabled]):active {
@include lgn-idp-elevation(2);
}
&.google {
color: var(--zitadel-color-google-text);
background-color: var(--zitadel-color-google-background);
}
&.github {
color: var(--zitadel-color-github-text);
background-color: var(--zitadel-color-github-background);
}
&.gitlab {
color: var(--zitadel-color-gitlab-text);
background-color: var(--zitadel-color-gitlab-background);
border-color: var(--zitadel-color-input-border-active);
}
}

10
internal/api/ui/login/static/resources/themes/scss/styles/vars.scss
View File

@ -120,6 +120,11 @@
--zitadel-color-qr: var(--zitadel-color-black);
--zitadel-color-qr-background: var(--zitadel-color-white);
--google-image-src: url(../../../images/idp/google.png);
--github-image-src: url(../../../images/idp/github.png);
--gitlab-image-src: url(../../../images/idp/gitlab.png);
--azure-image-src: url(../../../images/idp/ms.svg);
}
.lgn-dark-theme {
@ -222,4 +227,9 @@
--zitadel-color-github-background: #ffffff;
--zitadel-color-gitlab-text: #8b8d8d;
--zitadel-color-gitlab-background: #ffffff;
--google-image-src: url(../../../images/idp/google.png);
--github-image-src: url(../../../images/idp/github-white.png);
--gitlab-image-src: url(../../../images/idp/gitlab.png);
--azure-image-src: url(../../../images/idp/ms.svg);
}

56
internal/api/ui/login/static/resources/themes/zitadel/css/zitadel.css
View File

@ -104,6 +104,10 @@
--zitadel-color-gitlab-background: #ffffff;
--zitadel-color-qr: var(--zitadel-color-black);
--zitadel-color-qr-background: var(--zitadel-color-white);
--google-image-src: url(../../../images/idp/google.png);
--github-image-src: url(../../../images/idp/github.png);
--gitlab-image-src: url(../../../images/idp/gitlab.png);
--azure-image-src: url(../../../images/idp/ms.svg);
}
.lgn-dark-theme {
@ -192,6 +196,10 @@
--zitadel-color-github-background: #ffffff;
--zitadel-color-gitlab-text: #8b8d8d;
--zitadel-color-gitlab-background: #ffffff;
--google-image-src: url(../../../images/idp/google.png);
--github-image-src: url(../../../images/idp/github-white.png);
--gitlab-image-src: url(../../../images/idp/gitlab.png);
--azure-image-src: url(../../../images/idp/ms.svg);
}
body {
@ -547,6 +555,7 @@ a.sub-formfield-link {
border-radius: 0.5rem;
border-width: 1px;
border-style: solid;
transition: border-color 0.2s ease-in-out;
}
.lgn-idp span.logo {
height: 46px;
@ -561,7 +570,7 @@ a.sub-formfield-link {
.lgn-idp.google span.logo {
height: 46px;
width: 46px;
background-image: url("../../../images/idp/google.png");
background-image: var(--google-image-src);
background-size: 25px;
background-position: center;
background-repeat: no-repeat;
@ -570,7 +579,7 @@ a.sub-formfield-link {
.lgn-idp.github span.logo {
height: 46px;
width: 46px;
background-image: url("../../../images/idp/github.png");
background-image: var(--github-image-src);
background-size: 25px;
background-position: center;
background-repeat: no-repeat;
@ -579,12 +588,21 @@ a.sub-formfield-link {
.lgn-idp.gitlab span.logo {
height: 46px;
width: 46px;
background-image: url("../../../images/idp/gitlab.png");
background-image: var(--gitlab-image-src);
background-size: 100%;
background-position: center;
background-repeat: no-repeat;
border-radius: 5px;
}
.lgn-idp.azure span.logo {
height: 46px;
width: 46px;
background-image: var(--azure-image-src);
background-size: 25px;
background-position: center;
background-repeat: no-repeat;
border-radius: 5px;
}
.lgn-error {
display: flex;
@ -1540,6 +1558,7 @@ a.sub-formfield-link {
border-radius: 0.5rem;
border-width: 1px;
border-style: solid;
transition: border-color 0.2s ease-in-out;
}
.lgn-idp span.logo {
height: 46px;
@ -1554,7 +1573,7 @@ a.sub-formfield-link {
.lgn-idp.google span.logo {
height: 46px;
width: 46px;
background-image: url("../../../images/idp/google.png");
background-image: var(--google-image-src);
background-size: 25px;
background-position: center;
background-repeat: no-repeat;
@ -1563,7 +1582,7 @@ a.sub-formfield-link {
.lgn-idp.github span.logo {
height: 46px;
width: 46px;
background-image: url("../../../images/idp/github.png");
background-image: var(--github-image-src);
background-size: 25px;
background-position: center;
background-repeat: no-repeat;
@ -1572,12 +1591,21 @@ a.sub-formfield-link {
.lgn-idp.gitlab span.logo {
height: 46px;
width: 46px;
background-image: url("../../../images/idp/gitlab.png");
background-image: var(--gitlab-image-src);
background-size: 100%;
background-position: center;
background-repeat: no-repeat;
border-radius: 5px;
}
.lgn-idp.azure span.logo {
height: 46px;
width: 46px;
background-image: var(--azure-image-src);
background-size: 25px;
background-position: center;
background-repeat: no-repeat;
border-radius: 5px;
}
.lgn-error {
display: flex;
@ -3082,22 +3110,10 @@ ul li i.lgn-valid {
color: var(--zitadel-color-text-500);
}
.lgn-idp:hover {
box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
border-color: var(--zitadel-color-input-border-hover);
}
.lgn-idp:not([disabled]):active {
box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
}
.lgn-idp.google {
color: var(--zitadel-color-google-text);
background-color: var(--zitadel-color-google-background);
}
.lgn-idp.github {
color: var(--zitadel-color-github-text);
background-color: var(--zitadel-color-github-background);
}
.lgn-idp.gitlab {
color: var(--zitadel-color-gitlab-text);
background-color: var(--zitadel-color-gitlab-background);
border-color: var(--zitadel-color-input-border-active);
}
.lgn-idp-providers .lgn-idp-desc {

2
internal/api/ui/login/static/resources/themes/zitadel/css/zitadel.css.map
View File

File diff suppressed because one or more lines are too long

5
internal/domain/idp.go
View File

@ -48,12 +48,13 @@ func (t IDPType) GetCSSClass() string {
case IDPTypeGitLab,
IDPTypeGitLabSelfHosted:
return "gitlab"
case IDPTypeAzureAD:
return "azure"
case IDPTypeUnspecified,
IDPTypeOIDC,
IDPTypeJWT,
IDPTypeOAuth,
IDPTypeLDAP,
IDPTypeAzureAD:
IDPTypeLDAP:
fallthrough
default:
return ""