Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-26 06:31:26 -05:00
Code Issues Activity

Merge pull request #3907 from penpot/alotor-login-styles

Browse source 
💄 Change login UI
This commit is contained in:
elhombretecla 2023-12-11 14:26:39 +01:00 • committed by GitHub
commit cc66182522
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 720 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

667
frontend/resources/images/icons/login-illustration.svg
View file

File diff suppressed because one or more lines are too long
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.2 KiB

After

Width:  |  Height:  |  Size: 273 KiB

29
frontend/src/app/main/ui/auth.cljs
View file

@ -64,25 +64,28 @@
(when show-illustration?
[:div {:class (stl/css :login-illustration)}
i/login-illustration])
[:section {:class (stl/css :auth-content)}
(case section
:auth-register
[:& register-page {:params params}]
[:*
[:a {:href "#/" :class (stl/css :logo-btn)}i/logo]
(case section
:auth-register
[:& register-page {:params params}]
:auth-register-validate
[:& register-validate-page {:params params}]
:auth-register-validate
[:& register-validate-page {:params params}]
:auth-register-success
[:& register-success-page {:params params}]
:auth-register-success
[:& register-success-page {:params params}]
:auth-login
[:& login-page {:params params}]
:auth-login
[:& login-page {:params params}]
:auth-recovery-request
[:& recovery-request-page]
:auth-recovery-request
[:& recovery-request-page]
:auth-recovery
[:& recovery-page {:params params}])
:auth-recovery
[:& recovery-page {:params params}])]
(when (contains? #{:auth-login :auth-register} section)
[:& terms-login])]]

62
frontend/src/app/main/ui/auth.scss
View file

@ -11,7 +11,7 @@
background: $db-primary;
display: grid;
gap: $s-32;
grid-template-columns: repeat(3, 1fr);
grid-template-columns: repeat(5, 1fr);
height: 100%;
padding: $s-32;
width: 100%;
@ -25,32 +25,48 @@
display: flex;
justify-content: center;
}
}
.login-illustration {
display: flex;
justify-content: center;
grid-column: 1 / 3;
.login-illustration {
display: flex;
justify-content: center;
grid-column: 1 / 4;
width: 40vw;
justify-self: center;
svg {
width: $s-688;
fill: $df-primary;
height: auto;
}
@media (max-width: 992px) {
display: none;
}
svg {
width: 100%;
fill: $df-primary;
height: auto;
}
.auth-content {
align-items: center;
display: flex;
height: fit-content;
justify-content: center;
max-width: $s-412;
padding-bottom: $s-8;
position: relative;
width: 100%;
@media (max-width: 992px) {
display: none;
}
}
.auth-content {
grid-column: 4 / 6;
display: flex;
flex-direction: column;
height: fit-content;
max-width: $s-412;
padding-bottom: $s-8;
position: relative;
width: 100%;
}
.logo-btn {
display: flex;
justify-content: flex-start;
margin-bottom: $s-52;
width: $s-120;
svg {
width: $s-120;
height: $s-40;
fill: $df-primary;
stroke: $df-primary;
}
}