feat(login page): update design (#216)

* feat(login page): update design

* feat(login page): some updates

* feat(login page): update for mobile

* feat(login page): hide the Facebook button

app/assets/stylesheets/application.scss

@@ -15,20 +15,22 @@
  */
 
 // bulma variables
-$text: hsl(270, 50%, 29%);
+$text: hsl(0, 0%, 0%);
 $text-light: hsl(270, 50%, 48%);
 $text-strong: hsl(270, 50%, 21%);
 $footer-background-color: white;
 $navbar-item-img-max-height: 40px;
-$navbar-item-hover-color: $text;
+$navbar-item-hover-color: hsl(0, 0%, 0%);
 $file-cta-color: hsl(270, 50%, 48%);
+$family-primary: "Inter", sans-serif;
 
 @import "bulma";
 @import "font-awesome";
-@import url("https://fonts.googleapis.com/css2?family=Reenie+Beanie&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Frank+Ruhl+Libre&family=Inter&family=Reenie+Beanie&display=swap");
 
 // BudgetingKid variables
-$primary-budgeting-kid-color: hsl(270, 50%, 40%);
+$primary-budgeting-kid-color: rgb(102, 51, 153);
+$primary-budgeting-kid-strong-color: hsl(270, 50%, 21%);
 $primary-budgeting-kid-background-color: hsl(270, 95%, 98%);
 
 .budgeting-kid-logo-font {
@@ -37,6 +39,25 @@ $primary-budgeting-kid-background-color: hsl(270, 95%, 98%);
   color: $primary-budgeting-kid-color;
 }
 
+.font-frank-ruhl-libre {
+  font-family: "Frank Ruhl Libre", sans-serif;
+  color: $primary-budgeting-kid-strong-color;
+}
+
+.is-budgeting-kid-hoverable:hover {
+  border-color: $primary-budgeting-kid-color;
+}
+
+.has-background-image {
+  background-image: url("background_objects.svg");
+  background-size: 600px;
+}
+
+.image.is-coins {
+  max-width: 479px;
+  max-height: 417px;
+}
+
 .navbar {
   position: sticky;
   top: 0;
@@ -63,6 +84,12 @@ $primary-budgeting-kid-background-color: hsl(270, 95%, 98%);
   background-color: hsl(0, 0%, 96%);
 }
 
+.text-divider {
+  position: relative;
+  text-align: center;
+}
+
+// mobile
 @media (max-width: 1024px) {
   .normal-columns {
     flex-direction: column;
@@ -75,16 +102,41 @@ $primary-budgeting-kid-background-color: hsl(270, 95%, 98%);
     flex-direction: column-reverse;
     display: flex;
   }
+  .has-fixed-width {
+    width: 130px;
+  }
+  .text-divider::before,
+  .text-divider::after {
+    content: "";
+    display: inline-block;
+    width: 15%;
+    border-top: 1px solid #ccc;
+    margin: 0 1em;
+    vertical-align: middle;
+  }
 }
 
+// desktop
 @media (min-width: 1024px) {
   .for-mobile {
     display: none !important;
   }
+  .has-fixed-width {
+    width: 200px;
+  }
+  .text-divider::before,
+  .text-divider::after {
+    content: "";
+    display: inline-block;
+    width: 27%;
+    border-top: 1px solid #ccc;
+    margin: 0 1em;
+    vertical-align: middle;
+  }
 }
 
 @media (min-width: 1408px) {
-  .ml-6-pmoney-fullhd {
+  .ml-6-budgeting-kid-fullhd {
     margin-left: 3rem !important;
   }
 }
@@ -94,8 +146,8 @@ $primary-budgeting-kid-background-color: hsl(270, 95%, 98%);
   color: $primary-budgeting-kid-color;
 }
 
-.text-has-pmoney-color {
-  color: $primary-budgeting-kid-color;
+.has-text-budgeting-kid-color {
+  color: $primary-budgeting-kid-color !important;
 }
 
 .is-light {

app/views/devise/sessions/new.html.slim

@@ -1,30 +1,55 @@
 .columns.is-centered
-  .column.is-one-third
-    h2.title.is-4.has-text-centered = t('.log_in')
-    - if Devise.omniauth_providers.include?(:google_oauth2)
-      .field.is-fullwidth
-        = link_to user_google_oauth2_omniauth_authorize_path, method: :post, class: 'button is-primary is-fullwidth' do
-          span.icon
-            i.fa.fa-google
-          |   Log in with Google
-      h2.title.is-4.has-text-centered = 'or'
-    = form_for(resource, as: resource_name, url: session_path(resource_name)) do |f|
-      .field
-        = f.email_field :email, autofocus: true, autocomplete: "email", placeholder: "email"
-      .field
-        = f.password_field :password, autocomplete: "current-password", placeholder: "password"
-      - if devise_mapping.rememberable?
-        .field
-          = f.check_box :remember_me
-          |   
-          = f.label :remember_me
-      br
-      .actions
-        div.is-fullwidth
-          = f.submit 'Log in',  class: "button is-light is-fullwidth"
-      br
-      .columns
-        .column.is-one-quarters
-          = link_to t(".sign_up"), new_registration_path(resource_name)
-        .column.is-flex.is-justify-content-flex-end
-          = link_to "Forgot your password?", new_password_path(resource_name)
+  .column
+    .columns.is-centered.is-mobile
+      .column.is-four-fifths
+        h2.title.for-desktop.is-4.has-text-centered.has-text-budgeting-kid-color = t('.login')
+        h2.title.is-3.has-text-centered.font-frank-ruhl-libre Login to your account
+        - if Devise.omniauth_providers.include?(:google_oauth2)
+          .field
+            .buttons.is-centered
+              = link_to user_google_oauth2_omniauth_authorize_path, method: :post, class: 'button has-fixed-width is-outlined is-budgeting-kid-hoverable' do
+                span
+                  figure.image.is-24x24
+                    = image_tag('google.svg', class:'is-rounded',  alt: 'G')
+                |   Google
+              /= link_to "#", method: :post, class: 'button has-fixed-width is-outlined is-budgeting-kid-hoverable' do
+                span
+                  figure.image.is-24x24
+                    = image_tag('facebook.svg', class:'is-rounded',  alt: 'G')
+                |   Facebook
+          br
+          p.text-divider
+            | Or continue with
+          br
+        = form_for(resource, as: resource_name, url: session_path(resource_name)) do |f|
+          .field
+            = f.label :email
+          .field.pb-2
+            = f.email_field :email, autofocus: true, autocomplete: "email"
+          .field
+            = f.label :password
+          .field
+            = f.password_field :password, autocomplete: "current-password"
+          - if devise_mapping.rememberable?
+            .field
+              = f.check_box :remember_me
+              |   
+              = f.label :remember_me
+          br
+          .actions
+            div.is-fullwidth
+              = button_to session_path(resource_name), class: 'button is-primary is-fullwidth' do
+                span
+                | Login  
+                figure.image.is-16x16
+                  = image_tag('arrow-right.svg', alt: '->')
+          br
+          .columns.is-mobile
+            .column.is-three-fifths
+              | Don't have an account?  
+              = link_to t(".sign_up"), new_registration_path(resource_name), class: 'has-text-weight-bold has-text-budgeting-kid-color'
+            .column.is-flex.is-justify-content-flex-end
+                = link_to "Forgot your password?", new_password_path(resource_name), class: 'has-text-weight-bold has-text-budgeting-kid-color'
+  .for-desktop.column.has-background-image.is-flex.is-justify-content-center.is-align-items-center
+    figure.image.is-coins
+      = image_tag('coins.svg')

app/views/home/index.html.erb

@@ -7,8 +7,8 @@
                     is-10-tablet is-offset-1-tablet
                     is-5-desktop is-offset-1-desktop
                     is-5-widescreen is-offset-1-widescreen
-                    is-5-fullhd ml-6-pmoney-fullhd">
-          <h1 class="title titled text-has-pmoney-color is-1 mb-6 is-size-3-mobile">
+                    is-5-fullhd ml-6-budgeting-kid-fullhd">
+          <h1 class="title titled has-text-budgeting-kid-color is-1 mb-6 is-size-3-mobile">
             Foster good financial habits in your children
           </h1>
           <div class="buttons">
@@ -39,7 +39,7 @@
                       is-10-tablet is-offset-1-tablet
                       is-4-desktop is-offset-1-desktop
                       is-4-widescreen is-offset-1-widescreen
-                      is-4-fullhd ml-6-pmoney-fullhd">
+                      is-4-fullhd ml-6-budgeting-kid-fullhd">
             <figure class="image">
               <%= image_tag(reason[0]['image'], alt: reason[0]['name']) %>
             </figure>
@@ -50,10 +50,10 @@
                       is-5-desktop is-offset-1-desktop
                       is-5-widescreen is-offset-1-widescreen
                       is-5-fullhd is-offset-2-fullhd">
-            <h1 class="titled title text-has-pmoney-color is-2 mb-6 is-size-3-mobile">
+            <h1 class="titled title has-text-budgeting-kid-color is-2 mb-6 is-size-3-mobile">
               <%= reason[0]['name'] %>
             </h1>
-            <h2 class="subtitled subtitle text-has-pmoney-color">  <%= reason[0]['explanation'] %></h2>
+            <h2 class="subtitled subtitle has-text-budgeting-kid-color">  <%= reason[0]['explanation'] %></h2>
             <div class="buttons">
               <%= link_to 'Go!', my_account_path, class: 'button is-large is-fullwidth has-text-weight-bold is-primary ' %>
             </div>
@@ -72,11 +72,11 @@
                       is-10-tablet is-offset-1-tablet
                       is-5-desktop is-offset-1-desktop
                       is-5-widescreen is-offset-1-widescreen
-                      is-5-fullhd ml-6-pmoney-fullhd">
-              <h1 class="title titled text-has-pmoney-color is-2 mb-6 is-size-3-mobile">
+                      is-5-fullhd ml-6-budgeting-kid-fullhd">
+              <h1 class="title titled has-text-budgeting-kid-color is-2 mb-6 is-size-3-mobile">
                 <%= reason[1]['name'] %>
               </h1>
-              <h2 class="subtitled subtitle text-has-pmoney-color">  <%= reason[1]['explanation'] %></h2>
+              <h2 class="subtitled subtitle has-text-budgeting-kid-color">  <%= reason[1]['explanation'] %></h2>
               <div class="buttons">
                 <%= link_to 'Go!', my_account_path, class: 'button is-large is-fullwidth has-text-weight-bold is-primary ' %>
               </div>

app/views/layouts/application.html.erb

@@ -113,7 +113,7 @@
         </div>
       </nav>
 
-      <section class="section is-fullheight">
+      <section class="section is-fullheight p-2">
         <%= yield %>
       </section>