mirror of
https://github.com/penpot/penpot.git
synced 2025-06-15 18:01:37 +02:00
Fix login UI
This commit is contained in:
parent
117744f3f7
commit
b7f6c72981
6 changed files with 33 additions and 7 deletions
BIN
frontend/resources/images/penpot-login.jpg
Normal file
BIN
frontend/resources/images/penpot-login.jpg
Normal file
Binary file not shown.
After Width: | Height: | Size: 191 KiB |
|
@ -19,6 +19,7 @@ $color-complete : #a599c6;
|
||||||
$color-warning: #FC8802;
|
$color-warning: #FC8802;
|
||||||
$color-danger: #E65244;
|
$color-danger: #E65244;
|
||||||
$color-info: #59b9e2;
|
$color-info: #59b9e2;
|
||||||
|
$color-ocean: #4285f4;
|
||||||
|
|
||||||
// Gray scale
|
// Gray scale
|
||||||
$color-gray-10: #E3E3E3;
|
$color-gray-10: #E3E3E3;
|
||||||
|
|
|
@ -135,6 +135,16 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.btn-ocean {
|
||||||
|
@extend %btn;
|
||||||
|
background: $color-ocean;
|
||||||
|
color: $color-white;
|
||||||
|
&:hover {
|
||||||
|
background: darken($color-ocean, 16%);
|
||||||
|
color: $color-white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.btn-option {
|
.btn-option {
|
||||||
display: flex;
|
display: flex;
|
||||||
a {
|
a {
|
||||||
|
|
|
@ -23,6 +23,8 @@
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
background-color:#2C233E;
|
background-color:#2C233E;
|
||||||
|
background-image: url("/images/penpot-login.jpg");
|
||||||
|
background-size: cover;
|
||||||
|
|
||||||
.tagline {
|
.tagline {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
@ -35,7 +37,7 @@
|
||||||
.logo {
|
.logo {
|
||||||
svg {
|
svg {
|
||||||
fill: white;
|
fill: white;
|
||||||
width: 280px;
|
width: 200px;
|
||||||
height: 80px;
|
height: 80px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -51,6 +53,10 @@
|
||||||
|
|
||||||
.form-container {
|
.form-container {
|
||||||
width: 368px;
|
width: 368px;
|
||||||
|
|
||||||
|
.btn-ocean {
|
||||||
|
margin-top: $x-big;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-google-auth {
|
.btn-google-auth {
|
||||||
|
|
|
@ -82,7 +82,15 @@ textarea {
|
||||||
}
|
}
|
||||||
|
|
||||||
.links {
|
.links {
|
||||||
|
display: flex;
|
||||||
font-size: $fs11;
|
font-size: $fs11;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: $medium;
|
||||||
|
|
||||||
|
&.demo {
|
||||||
|
justify-content: center;
|
||||||
|
margin-top: $big;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.link-entry {
|
.link-entry {
|
||||||
|
|
|
@ -90,11 +90,6 @@
|
||||||
|
|
||||||
[:& login-form {:locale locale}]
|
[:& login-form {:locale locale}]
|
||||||
|
|
||||||
(when cfg/google-client-id
|
|
||||||
[:a.btn-secondary.btn-large.btn-google-auth
|
|
||||||
{:on-click login-with-google}
|
|
||||||
"Login with google"])
|
|
||||||
|
|
||||||
[:div.links
|
[:div.links
|
||||||
[:div.link-entry
|
[:div.link-entry
|
||||||
[:a {:on-click #(st/emit! (rt/nav :auth-recovery-request))
|
[:a {:on-click #(st/emit! (rt/nav :auth-recovery-request))
|
||||||
|
@ -105,8 +100,14 @@
|
||||||
[:span (t locale "auth.register-label") " "]
|
[:span (t locale "auth.register-label") " "]
|
||||||
[:a {:on-click #(st/emit! (rt/nav :auth-register))
|
[:a {:on-click #(st/emit! (rt/nav :auth-register))
|
||||||
:tab-index "6"}
|
:tab-index "6"}
|
||||||
(t locale "auth.register")]]
|
(t locale "auth.register")]]]
|
||||||
|
|
||||||
|
(when cfg/google-client-id
|
||||||
|
[:a.btn-ocean.btn-large.btn-google-auth
|
||||||
|
{:on-click login-with-google}
|
||||||
|
"Login with Google"])
|
||||||
|
|
||||||
|
[:div.links.demo
|
||||||
[:div.link-entry
|
[:div.link-entry
|
||||||
[:span (t locale "auth.create-demo-profile-label") " "]
|
[:span (t locale "auth.create-demo-profile-label") " "]
|
||||||
[:a {:on-click #(st/emit! da/create-demo-profile)
|
[:a {:on-click #(st/emit! da/create-demo-profile)
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue