From 78c1370fe4e48510c5833101b45c172fee9be4af Mon Sep 17 00:00:00 2001 From: Andrey Bakanovsky Date: Thu, 26 Oct 2023 23:53:15 +0300 Subject: [PATCH] feat(login page): update design --- app/assets/images/arrow-right.svg | 6 + app/assets/images/background_objects.svg | 977 +++++++++++++++++++++++ app/assets/images/coins.svg | 9 + app/assets/images/facebook.svg | 13 + app/assets/images/google.svg | 15 + app/assets/stylesheets/application.scss | 63 +- app/views/devise/sessions/new.html.slim | 83 +- app/views/home/index.html.erb | 16 +- 8 files changed, 1137 insertions(+), 45 deletions(-) create mode 100644 app/assets/images/arrow-right.svg create mode 100644 app/assets/images/background_objects.svg create mode 100644 app/assets/images/coins.svg create mode 100644 app/assets/images/facebook.svg create mode 100644 app/assets/images/google.svg diff --git a/app/assets/images/arrow-right.svg b/app/assets/images/arrow-right.svg new file mode 100644 index 00000000..2b5f7553 --- /dev/null +++ b/app/assets/images/arrow-right.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/app/assets/images/background_objects.svg b/app/assets/images/background_objects.svg new file mode 100644 index 00000000..5e340775 --- /dev/null +++ b/app/assets/images/background_objects.svg @@ -0,0 +1,977 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/app/assets/images/coins.svg b/app/assets/images/coins.svg new file mode 100644 index 00000000..d6faaa41 --- /dev/null +++ b/app/assets/images/coins.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/app/assets/images/facebook.svg b/app/assets/images/facebook.svg new file mode 100644 index 00000000..60b8f85a --- /dev/null +++ b/app/assets/images/facebook.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/app/assets/images/google.svg b/app/assets/images/google.svg new file mode 100644 index 00000000..d5834218 --- /dev/null +++ b/app/assets/images/google.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index c5484612..808cbfa0 100644 --- a/app/assets/stylesheets/application.scss +++ b/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; } diff --git a/app/views/devise/sessions/new.html.slim b/app/views/devise/sessions/new.html.slim index 17e7b5ac..967d0da5 100644 --- a/app/views/devise/sessions/new.html.slim +++ b/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') diff --git a/app/views/home/index.html.erb b/app/views/home/index.html.erb index a24b9603..22e1b599 100644 --- a/app/views/home/index.html.erb +++ b/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"> -

+ is-5-fullhd ml-6-budgeting-kid-fullhd"> +

Foster good financial habits in your children

@@ -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">
<%= image_tag(reason[0]['image'], alt: reason[0]['name']) %>
@@ -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"> -

+

<%= reason[0]['name'] %>

-

<%= reason[0]['explanation'] %>

+

<%= reason[0]['explanation'] %>

<%= link_to 'Go!', my_account_path, class: 'button is-large is-fullwidth has-text-weight-bold is-primary ' %>
@@ -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"> -

+ is-5-fullhd ml-6-budgeting-kid-fullhd"> +

<%= reason[1]['name'] %>

-

<%= reason[1]['explanation'] %>

+

<%= reason[1]['explanation'] %>

<%= link_to 'Go!', my_account_path, class: 'button is-large is-fullwidth has-text-weight-bold is-primary ' %>