Login style (#24)

* styles login

* styles login

* fixes specs

* fixes specs

Gemfile

@@ -9,7 +9,7 @@ gem "sass-rails", "~> 5"
 gem 'jquery-rails'
 gem "bootsnap", ">= 1.4.2", require: false
 gem "rack-canonical-host"
-gem "webpacker", "~> 4.0"
+gem "webpacker", "~> 4.2.2"
 gem "redis", '~> 4.0'
 gem 'bootstrap', '~> 4.3.1'
 

Gemfile.lock

@@ -217,7 +217,6 @@ GEM
     nio4r (2.5.2)
     nokogiri (1.10.7)
       mini_portile2 (~> 2.4.0)
-    normalize-rails (4.1.1)
     notiffany (0.1.3)
       nenv (~> 0.1)
       shellany (~> 0.0)
@@ -423,7 +422,6 @@ DEPENDENCIES
   letter_opener_web (~> 1.0)
   listen (>= 3.0.5, < 3.2)
   mini_magick
-  normalize-rails
   pg (>= 0.18, < 2.0)
   pry
   puma (~> 3.12)
@@ -450,7 +448,7 @@ DEPENDENCIES
   tzinfo-data
   web-console (>= 3.3.0)
   webdrivers (~> 4.0)
-  webpacker (~> 4.0)
+  webpacker (~> 4.2.2)
 
 RUBY VERSION
    ruby 2.6.3p62

app/controllers/application_controller.rb

@@ -10,9 +10,18 @@ class ApplicationController < ActionController::Base
   before_action :configure_permitted_parameters, if: :devise_controller?
   rescue_from Pundit::NotAuthorizedError, with: :user_not_authorized
   after_action :verify_authorized, except: :index, unless: :devise_controller?
+  layout :layout_by_resource
 
   private
 
+  def layout_by_resource
+    if devise_controller?
+      'devise'
+    else
+      'application'
+    end
+  end
+
   def user_not_authorized
     redirect_to root_path, alert: 'You are not allowed to access this resource'
   end

app/javascript/stylesheets/application.scss

@@ -1,5 +1,6 @@
 @import "normalize.css";
 
+@import "./settings/globals";
 @import "./settings/mixins";
 @import "./settings/placeholders";
 @import "./settings/utilities";
@@ -10,5 +11,10 @@
 
 @import "./components/actiontext";
 @import "./components/buttons";
+@import "./components/main_structure";
 @import "./components/form_labels";
+@import "./components/logo";
 @import "./components/popovers";
+@import "./components/text";
+@import "./components/waves_header";
+@import "./components/waves_footer";

app/javascript/stylesheets/components/buttons.scss

@@ -2,6 +2,10 @@
   font-size: px-to-rems(12);
   text-transform: uppercase;
 
+  &-secondary {
+    color: $white
+  }
+
   &--cta {
     position: relative;
     padding-bottom: px-to-rems(5);

app/javascript/stylesheets/components/logo.scss

@@ -0,0 +1,29 @@
+.logo {
+  height: 4rem;
+  width: 4rem;
+  background-image: url("../images/logo1.svg");
+  background-size: 90% 90%;
+  background-position: center;
+  background-repeat: no-repeat;
+  -svg-mixer-fill: $primary;
+
+  &.logo-large {
+    height: 6rem;
+    width: 6rem;
+    background-image: url("../images/logo1.svg");
+    background-size: 90% 90%;
+    background-position: center;
+    background-repeat: no-repeat;
+    -svg-mixer-fill: $primary;
+  }
+
+  &.logo-white {
+    height: 4rem;
+    width: 4rem;
+    background-image: url("../images/logo1.svg");
+    background-size: 90% 90%;
+    background-position: center;
+    background-repeat: no-repeat;
+    -svg-mixer-fill: white;
+  }
+}

app/javascript/stylesheets/components/main_structure.scss

@@ -0,0 +1,6 @@
+body {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}

app/javascript/stylesheets/components/waves_footer.scss

@@ -0,0 +1,62 @@
+$waves_footer_bg_height: 30vh;
+$waves_footer_height: 15vh;
+$waves_offset: calc(#{$waves_footer_height} - #{$waves_footer_bg_height});
+
+.waves-footer-container {
+  position: relative;
+  min-height: $waves_footer_height;
+  width: 100vw;
+}
+
+.waves-footer-content {
+  position: absolute;
+  bottom: 0;
+  width: 100vw;
+  min-height: $waves_footer_height;
+  display: flex;
+  align-items: flex-end;
+}
+
+.waves-footer-background {
+  overflow: hidden;
+  width: 100vw;
+  height: $waves_footer_bg_height;
+  background-image: url("../images/bottom_waves2.svg");
+  -svg-mixer-fill: $primary;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position-y: top;
+  background-position-x: center;
+  position: absolute;
+  z-index: -1;
+
+  &::before {
+    display: block;
+    content: " ";
+    background-image: url("../images/bottom_waves1.svg");
+    -svg-mixer-fill: $secondary;
+    height: $waves_footer_bg_height;
+    background-size: cover;
+    width: 100vw;
+    position: absolute;
+    background-position-x: center;
+    background-position-y: top;
+    background-repeat: no-repeat;
+    bottom: calc(#{$waves_footer_bg_height}/ -5);
+  }
+
+  &::after {
+    display: block;
+    content: " ";
+    background-image: url("../images/bottom_waves3.svg");
+    -svg-mixer-fill: $tertiary;
+    background-size: cover;
+    height: $waves_footer_bg_height;
+    width: 100vw;
+    position: absolute;
+    background-position-x: center;
+    background-position-y: top;
+    background-repeat: no-repeat;
+    bottom: calc(#{$waves_footer_bg_height}/ -3);
+  }
+}

app/javascript/stylesheets/components/waves_header.scss

@@ -0,0 +1,62 @@
+$waves_header_bg_height: 30vh;
+$waves_header_height: 10vh;
+$waves_offset: calc(#{$waves_header_height} - #{$waves_header_bg_height});
+
+.waves-header-container {
+  position: relative;
+  min-height: $waves_header_height;
+  width: 100vw;
+}
+
+.waves-header-content {
+  position: absolute;
+  top: 0;
+  width: 100vw;
+  min-height: $waves_header_height;
+  display: flex;
+  align-items: flex-end;
+  z-index: 99;
+}
+
+.waves-header-background {
+  overflow: hidden;
+  width: 100vw;
+  height: $waves_header_bg_height;
+  background-image: url("../images/top_waves1.svg");
+  -svg-mixer-fill: $primary;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position-y: bottom;
+  background-position-x: center;
+  position: absolute;
+
+  &::before {
+    display: block;
+    content: " ";
+    background-image: url("../images/top_waves2.svg");
+    -svg-mixer-fill: $secondary;
+    height: $waves_header_bg_height;
+    background-size: cover;
+    width: 100vw;
+    position: absolute;
+    background-position-x: center;
+    background-position-y: bottom;
+    background-repeat: no-repeat;
+    top: calc(#{$waves_header_bg_height}/ -5);
+  }
+
+  &::after {
+    display: block;
+    content: " ";
+    background-image: url("../images/top_waves3.svg");
+    -svg-mixer-fill: $tertiary;
+    background-size: cover;
+    height: $waves_header_bg_height;
+    width: 100vw;
+    position: absolute;
+    background-position-x: center;
+    background-position-y: bottom;
+    background-repeat: no-repeat;
+    top: calc(#{$waves_header_bg_height}/ -3);
+  }
+}

app/javascript/stylesheets/settings/_globals.scss

@@ -0,0 +1,4 @@
+body,
+main {
+  overflow-x: hidden;
+}

app/javascript/stylesheets/settings/_variables.scss

@@ -46,8 +46,17 @@ $green: #00D97E !default;
 $teal: #02a8b5 !default; // NOT USED
 $cyan: #39afd1 !default; // NOT USED
 
-$primary: $indigo !default;
-$secondary: $yellow !default;
+// $primary: #FF175F !default;
+// $secondary: #FF9F16 !default;
+// $tertiary:#2F6690;
+
+$primary: #3A86FF !default;
+$secondary: #FF9F16 !default;
+$tertiary:#5A4AE8;
+
+// $primary: $indigo !default;
+// $secondary: $yellow !default;
+// $tertiary: #3AB795;
 $success: $green !default;
 $info: $cyan !default;
 $warning: $yellow !default;
@@ -151,10 +160,11 @@ $caret-width: .25em !default;
 // Fonts
 //
 // Font, line-height, and color for body text, headings, and more.
-
+@import url(http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700);
+$open-sans: 'Open Sans',
+sans-serif;
 // stylelint-disable value-keyword-case
-$font-family-sans-serif: 'Cerebri Sans',
-sans-serif !default;
+$font-family-sans-serif: $open-sans !default;
 $font-family-base: $font-family-sans-serif !default;
 // stylelint-enable value-keyword-case
 

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

@@ -1,21 +1,31 @@
-<h2 data-toggle="tooltip" data-placement="top" title="Tooltip on top">Log in</h2>
-<%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
-  <div class="field">
-    <%= f.label :email %><br />
-    <%= f.email_field :email, autofocus: true, autocomplete: "email" %>
-  </div>
-  <div class="field">
-    <%= f.label :password %><br />
-    <%= f.password_field :password, autocomplete: "current-password" %>
-  </div>
-  <% if devise_mapping.rememberable? %>
-    <div class="field">
-      <%= f.check_box :remember_me %>
-      <%= f.label :remember_me %>
+<div class="row justify-content-center align-items-center">
+  <div class="col-sm-10 col-md-6 col-lg-4 col-xl-3">
+    <div class="d-flex justify-content-center">
+      <div class="logo logo-large"></div>
     </div>
-  <% end %>
-  <div class="actions">
-    <%= f.submit "Log in" %>
+    <%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
+      <div class="container-fluid">
+        <div class="form-group">
+          <%= f.label :email %><br />
+          <%= f.email_field :email, autofocus: true, autocomplete: "email", class: "form-control" %>
+        </div>
+        <div class="form-group">
+          <%= f.label :password %><br />
+          <%= f.password_field :password, autocomplete: "current-password", class: "form-control" %>
+        </div>
+        <% if devise_mapping.rememberable? %>
+          <div class="form-group text-center">
+            <%= f.check_box :remember_me %>
+            <%= f.label :remember_me %>
+          </div>
+        <% end %>
+        <div class="actions text-center">
+          <%= f.submit t('devise.sessions.sign_in'), class:"btn btn-lg btn-outline-primary btn--cta px-4 py-3 " %>
+          <br>
+          <br>
+          <%= render "devise/shared/links" %>
+        </div>
+      </div>
+    <% end %>
   </div>
-<% end %>
-<%= render "devise/shared/links" %>
+</div>

app/views/layouts/_navbar.html.erb

@@ -1,5 +1,5 @@
-<nav class="navbar navbar-expand-lg navbar-dark bg-primary mb-4 px-5">
-  <a class="navbar-brand font-weight-bold" href="#">Evaluarium</a>
+<nav class="navbar navbar-expand-lg navbar-dark bg-primary mb-4 px-5 py-0">
+  <div class="logo logo-white"></div>
   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
     <span class="navbar-toggler-icon"></span>
   </button>

app/views/layouts/application.html.erb

@@ -15,11 +15,17 @@
     <%= yield :stylesheets %>
   </head>
   <body>
-    <%= render 'layouts/navbar' %>
-    <div class="d-flex">
+    <header>
+      <%= render 'layouts/navbar' %>
+    </header>
+    <main class="d-flex">
       <%= render 'layouts/config_sidebar' if @config_section %>
       <%= yield %>
-    </div>
+    </main>
+    <footer class="waves-footer-container">
+      <div class="waves-footer-content"></div>
+      <div class="waves-footer-background"></div>
+    </footer>
     <%= yield :javascripts %>
     <% if Rails.env.production? %>
       <script type="text/javascript">