3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-06-03 00:31:40 +02:00
Code Issues Projects Releases Packages Wiki 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
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

Before After
Before After

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

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

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

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