Fix login UI

frontend/resources/styles/common/dependencies/colors.scss

@@ -19,6 +19,7 @@ $color-complete : #a599c6;
 $color-warning: #FC8802;
 $color-danger: #E65244;
 $color-info: #59b9e2;
+$color-ocean: #4285f4;
 
 // Gray scale
 $color-gray-10: #E3E3E3;

frontend/resources/styles/common/framework.scss

@@ -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 {
   display: flex;
   a {

frontend/resources/styles/main/layouts/login.scss

@@ -23,6 +23,8 @@
   align-items: center;
   justify-content: flex-start;
   background-color:#2C233E;
+  background-image: url("/images/penpot-login.jpg");
+  background-size: cover;
 
   .tagline {
     text-align: center;
@@ -35,7 +37,7 @@
   .logo {
     svg {
       fill: white;
-      width: 280px;
+      width: 200px;
       height: 80px;
     }
   }
@@ -51,6 +53,10 @@
 
   .form-container {
     width: 368px;
+
+    .btn-ocean {
+      margin-top: $x-big;
+    }
   }
 
   .btn-google-auth {

frontend/resources/styles/main/partials/forms.scss

@@ -82,7 +82,15 @@ textarea {
   }
 
   .links {
+    display: flex;
     font-size: $fs11;
+    justify-content: space-between;
+    margin-bottom: $medium;
+
+    &.demo {
+      justify-content: center;
+      margin-top: $big;
+    }
   }
 
   .link-entry {

frontend/src/uxbox/main/ui/auth/login.cljs

@@ -90,11 +90,6 @@
 
     [:& 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.link-entry
       [:a {:on-click #(st/emit! (rt/nav :auth-recovery-request))
@@ -105,8 +100,14 @@
       [:span (t locale "auth.register-label") " "]
       [:a {:on-click #(st/emit! (rt/nav :auth-register))
            :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
       [:span (t locale "auth.create-demo-profile-label") " "]
       [:a {:on-click #(st/emit! da/create-demo-profile)