3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-08-03 14:58:28 +02:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #1656 from penpot/social-logins-redesign

Browse source 
Authentication page and OIDC flows improvements
This commit is contained in:
Andrey Antukh 2022-03-11 17:22:03 +01:00 • committed by GitHub
commit 1e580638d2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
42 changed files with 418 additions and 264 deletions
Download patch file Download diff file Expand all files Collapse all files

11
frontend/resources/images/icons/brand-gitlab.svg
View file

@ -1,10 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 13.1072 13.10542" preserveAspectRatio="xMinYMin meet">
<path d="M6.5534 13.1502l2.41333-7.42742H4.14l2.41334 7.42743z" fill="#e24329"/>
<path d="M6.5534 13.15016L4.14 5.72273H.75783l5.79556 7.42743z" fill="#fc6d26"/>
<path d="M.75783 5.72273L.02446 7.97991a.49964.49964 0 00.18147.5586l6.34746 4.6117L.75777 5.72278z" fill="#fca326"/>
<path d="M.75783 5.72278H4.14L2.68654 1.24927c-.0748-.2302-.40045-.23015-.4752 0L.75783 5.72278z" fill="#e24329"/>
<path d="M6.5534 13.15016l2.41333-7.42743h3.38223l-5.79562 7.42743z" fill="#fc6d26"/>
<path d="M12.34896 5.72273l.73336 2.25718" fill="#fca326"/>
<path d="M12.34896 5.72278H8.96673l1.45351-4.47351c.0748-.2302.40045-.23015.4752 0l1.45352 4.47351z" fill="#e24329"/>
<path d="M12.34937 5.72273l.73337 2.25718a.49964.49964 0 01-.18147.5586l-6.34746 4.6117 5.79561-7.42742z" fill="#fca326"/>
</svg>
<svg viewBox="3658.551 302.026 20 17.949" width="20" height="17.949" xmlns="http://www.w3.org/2000/svg" style="-webkit-print-color-adjust:exact"><path d="m3668.55 319.974 3.685-11.043h-7.364l3.68 11.043ZM3659.71 308.932l-1.122 3.355a.733.733 0 0 0 .277.83l9.685 6.857-8.84-11.042ZM3659.71 308.931h5.16l-2.22-6.65c-.114-.34-.61-.34-.727 0l-2.213 6.65Z" style="fill:#fff"/><path d="m3677.396 308.932 1.118 3.355a.733.733 0 0 1-.276.83l-9.688 6.857 8.846-11.042ZM3677.396 308.931h-5.16l2.216-6.65c.114-.34.61-.34.727 0l2.217 6.65ZM3668.55 319.974l3.685-11.042h5.16l-8.845 11.042ZM3668.55 319.974l-8.84-11.042h5.16l3.68 11.042Z" style="fill:#fff"/></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 954 B

After

Width:  |  Height:  |  Size: 650 B

Before After
Before After

1
frontend/resources/images/icons/brand-google.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="5345 -1143 500 500"><path fill="#fff" fill-rule="evenodd" d="M5845-887c0-18-1-35-4-51h-240v96h137c-6 32-24 58-51 76v63h82c49-44 76-108 76-184z" clip-rule="evenodd"/><path fill="#fff" fill-rule="evenodd" d="M5601-643c68 0 126-22 168-60l-82-63a156 156 0 0 1-229-79h-85v64c42 82 128 138 228 138z" clip-rule="evenodd"/><path fill="#fff" fill-rule="evenodd" d="M5458-845a148 148 0 0 1 0-95v-65h-85a246 246 0 0 0 0 224z" clip-rule="evenodd"/><path fill="#fff" fill-rule="evenodd" d="M5601-1043c37 0 71 12 97 37l73-72a256 256 0 0 0-399 73l86 65c20-59 76-103 143-103z" clip-rule="evenodd"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 638 B

1
frontend/resources/images/icons/brand-openid.svg Normal file
View file

@ -0,0 +1 @@
<svg viewBox="7437 302 20.011 18.182" width="20.011" height="18.182" xmlns="http://www.w3.org/2000/svg" style="-webkit-print-color-adjust:exact"><path d="M7455.039 309.1c-1.9-1.183-4.555-1.918-7.46-1.918-5.845 0-10.579 2.922-10.579 6.526 0 3.3 3.945 6.007 9.055 6.473v-1.9c-3.442-.43-6.024-2.313-6.024-4.573 0-2.564 3.37-4.662 7.549-4.662 2.08 0 3.962.52 5.325 1.363l-1.937 1.202h6.043v-3.73l-1.972 1.22Zm-8.984-5.146v16.227l3.03-1.9V302l-3.03 1.954Z" style="fill:#fff;fill-opacity:1"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 492 B

56
frontend/resources/styles/main/layouts/login.scss
View file

@ -72,20 +72,44 @@
width: 412px;
.auth-buttons {
margin-top: $size-6;
margin: $size-6 0 $size-4 0;
display: flex;
justify-content: center;
column-gap: 17px;
}
form {
margin: 2rem 0;
margin: 2rem 0 0.5rem 0;
}
}
.btn-large {
flex-grow: 1;
font-size: 14px;
font-family: sourcesanspro;
font-style: normal;
font-weight: normal;
}
.btn-google-auth {
background-color: #4285f4;
color: $color-white;
margin-bottom: $size-4;
text-decoration: none;
.logo {
width: 20px;
height: 20px;
margin-right: 1rem;
}
&:hover {
background-color: #2065d7;
color: $color-white;
}
}
.btn-gitlab-auth {
background-color: #fc6d26;
color: $color-white;
margin-bottom: $size-4;
text-decoration: none;
@ -94,9 +118,16 @@
height: 20px;
margin-right: 1rem;
}
&:hover {
background-color: #ee5f18;
color: $color-white;
}
}
.btn-github-auth {
background-color: #4c4c4c;
color: $color-white;
margin-bottom: $size-4;
text-decoration: none;
@ -105,6 +136,15 @@
height: 20px;
margin-right: 1rem;
}
&:hover {
background-color: #2f2f2f;
color: $color-white;
}
}
.link-oidc {
text-align: center;
}
.separator {
@ -112,6 +152,18 @@
justify-content: center;
width: 100%;
text-transform: uppercase;
text-align: center;
.text {
margin: 0 10px;
color: $color-gray-40;
}
.line {
border: 1px solid $color-gray-10;
flex-grow: 10;
margin: auto;
}
}
.links {