feat(login page): update design

app/assets/stylesheets/application.scss

@@ -15,20 +15,32 @@
  */
 
 // bulma variables
-$text: hsl(270, 50%, 29%);
-$text-light: hsl(270, 50%, 48%);
-$text-strong: hsl(270, 50%, 21%);
+
+// $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;
+
+// $text: hsl(270, 50%, 29%);
+// $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;
+// $file-cta-color: hsl(270, 50%, 48%);
 
 @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 +49,41 @@ $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;
+}
+
+.text-divider {
+  position: relative;
+  text-align: center;
+}
+
+.text-divider::before,
+.text-divider::after {
+  content: "";
+  display: inline-block;
+  width: 20%;
+  border-top: 1px solid #ccc;
+  margin: 0 1em;
+  vertical-align: middle;
+}
+
+.has-background-image {
+  background-image: url("background_objects.svg");
+  background-size: cover;
+  background-position: center;
+}
+
+.image.is-coins {
+  max-width: 479px;
+  max-height: 417px;
+}
+
 .navbar {
   position: sticky;
   top: 0;
@@ -84,7 +131,7 @@ $primary-budgeting-kid-background-color: hsl(270, 95%, 98%);
 }
 
 @media (min-width: 1408px) {
-  .ml-6-pmoney-fullhd {
+  .ml-6-budgeting-kid-fullhd {
     margin-left: 3rem !important;
   }
 }
@@ -94,7 +141,7 @@ $primary-budgeting-kid-background-color: hsl(270, 95%, 98%);
   color: $primary-budgeting-kid-color;
 }
 
-.text-has-pmoney-color {
+.text-has-budgeting-kid-color {
   color: $primary-budgeting-kid-color;
 }
 

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
+      .column.is-four-fifths
+        h2.title.is-4.has-text-centered.text-has-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 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 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
+            .column.is-three-fifths
+              | Don't have an account?  
+              = 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.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 text-has-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 text-has-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 text-has-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 text-has-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 text-has-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>