feature/Format sign in and up modals

LewisYoul · LewisYoul · commit 2cc24bdff7ee · 2020-11-26T19:02:32.000Z
diff --git a/app/assets/stylesheets/buttons.scss b/app/assets/stylesheets/buttons.scss
@@ -1,6 +1,32 @@
 @import './variables.scss';
 
 .button {
+  &--sign-in {
+    color: $color-white;
+    border: 1px solid $color-dark-blue;
+    background-color: $color-dark-blue;
+    width: 100%;
+    padding-top: 8px;
+    padding-bottom: 8px;
+    cursor: pointer;
+
+    &:hover { background-color: $color-light-blue; }
+  }
+
+  &--sign-up {
+    color: $color-white;
+    width: 100%;
+    padding-top: 8px;
+    padding-bottom: 8px;
+    cursor: pointer;
+    border: 1px solid $color-primary;
+    background-color: $color-primary;
+
+    &:hover {
+      background-color: $color-primary-hover;
+    }
+  }
+
   &--cta {
     color: $color-primary;
     border-radius: 2px;
diff --git a/app/assets/stylesheets/form.scss b/app/assets/stylesheets/form.scss
@@ -14,7 +14,7 @@
     input {
       width: 100%;
       box-sizing: border-box;
-      padding: 6px;
+      padding: 8px 12px;
       border-radius: 2px;
       border: 1px solid lightgrey;
       font-size: 14px;
@@ -42,9 +42,18 @@
   }
 
   &--registration {
-    width: 300px;
+    width: 400px;
     margin: 0 auto;
 
+    input[type="checkbox"] {
+      margin: 0;
+    }
+
+    a {
+      font-weight: 500;
+      color: $color-primary;
+    }
+
     h1 {
       margin-bottom: 0;
       font-weight: normal;
@@ -58,11 +67,15 @@
       background-color: $color-light;
       padding: 20px;
       margin-top: 40px;
-      margin-bottom: 90px;
+      margin-bottom: 80px;
+    }
 
-      &--button {
-        width: 100%;
-      }
+    &-remember-me {
+      display: flex;
+      justify-content: space-between;
+      font-size: 14px;
+      font-weight: 100;
+      margin-bottom: 20px;
     }
   }
 }
diff --git a/app/assets/stylesheets/helpers.scss b/app/assets/stylesheets/helpers.scss
@@ -34,7 +34,7 @@
 .no-margin-bottom { margin-bottom: 0px; }
 .no-margin-top { margin-top: 0px; }
 .margin-top { margin-top: 16px }
-.margin-top { margin-top: 16px }
+.margin-bottom { margin-bottom: 16px }
 .margin-left {
   margin-left: 16px;
 
diff --git a/app/assets/stylesheets/variables.scss b/app/assets/stylesheets/variables.scss
@@ -1,4 +1,5 @@
 $color-primary: #3AAFA9;
+$color-primary-hover: #51b9b4;
 $color-secondary: #2B7A78;
 $color-purple: #b853ba;
 $color-light: #DEF2F1;
@@ -9,3 +10,6 @@ $color-grey: #808080;
 $color-grey-light: #E6ECF0;
 $color-hover: #F2F2F2;
 $color-pink: #FFD8DE;
+
+$color-dark-blue: #003F63;
+$color-light-blue: #27658a;
diff --git a/app/javascript/controllers/registrations_controller.js b/app/javascript/controllers/registrations_controller.js
@@ -12,7 +12,15 @@ export default class extends Controller {
     this.toast.display(data.message)
   }
 
+  presentModal(event) {
+    this.modal.present(event.target.dataset.modalUrl)
+  }
+
   get toast() {
     return document.getElementById('toast').toast
   }
+
+  get modal() {
+    return document.getElementById('modal').modal
+  }
 }
diff --git a/app/javascript/controllers/sessions_controller.js b/app/javascript/controllers/sessions_controller.js
@@ -13,7 +13,15 @@ export default class extends Controller {
     this.toast.display(data.message)
   }
 
+  presentModal(event) {
+    this.modal.present(event.target.dataset.modalUrl)
+  }
+
   get toast() {
     return document.getElementById('toast').toast
   }
+
+  get modal() {
+    return document.getElementById('modal').modal
+  }
 }
diff --git a/app/views/users/modals/sign_in.html.erb b/app/views/users/modals/sign_in.html.erb
@@ -1,10 +1,10 @@
 <div class="form--registration" data-controller="sessions">
   <h1 class="text-center">Sign in to your account</h1>
-  <p class="text-center">Don't have an account yet? Sign up</p>
+  <p class="text-center">Don't have an account yet? <a data-modal-url="<%= users_modals_sign_up_path %>" data-action="click->sessions#presentModal">Sign up</a></p>
 
   <%= form_for @user, url: user_session_path, remote: true, html: { data: { type: "json", action: "ajax:success->sessions#onSignInSuccess ajax:error->sessions#onSignInError" }, class: "form--registration-form" } do |f| %>
     <div class="form--field">
-      <%= f.label :email, 'Email Address' %>
+      <%= f.label :email, 'Email address' %>
       <%= f.email_field :email, autofocus: true, autocomplete: "email" %>
     </div>
 
@@ -13,13 +13,16 @@
       <%= f.password_field :password, autocomplete: "current-password" %>
     </div>
 
-    <%# <div class="form--field"> %>
-      <%# <%= f.check_box :remember_me %>
-      <%# <%= f.label :remember_me %>
-    <%# </div> %>
+    <div class="form--registration-remember-me">
+      <div class="flex v-center" >
+        <%= f.check_box :remember_me, checked: true %>
+        <%= f.label :remember_me, class: "margin-left--tiny" %>
+      </div>
+      <a data-modal-url="<%= users_modals_sign_up_path %>" data-action="click->sessions#presentModal">Forgot your password?</a>
+    </div>
 
     <div class="actions">
-      <%= f.submit "SIGN IN", class: "form--registration-form--button button--cta-blue" %>
+      <%= f.submit "SIGN IN", class: "button--sign-in" %>
     </div>
   <% end %>
 </div>
diff --git a/app/views/users/modals/sign_in_sign_up.html.erb b/app/views/users/modals/sign_in_sign_up.html.erb
@@ -1,11 +1,9 @@
-<div >
-  <h2 class="text-center">You need to sign in to do that</h2>
+<div class="form--registration">
+  <h1 class="text-center">Sign in to continue</h1>
   <p class="text-center">Create an account to stay in the loop!</p>
 
-  <div class="flex h-center">
-    <div style="width: 50%;" data-controller="users">
-      <button data-modal-url="<%= users_modals_sign_in_path %>" data-action="click->users#presentModal" style="width: 100%;" class="button--cta-blue">Log In</button>
-      <button data-modal-url="<%= users_modals_sign_up_path %>" data-action="click->users#presentModal" style="width: 100%;" class="button--cta-transparent margin-top">Sign Up</button>
-    </div>
+  <div class="form--registration-form" data-controller="users">
+    <button data-modal-url="<%= users_modals_sign_in_path %>" data-action="click->users#presentModal" class="button--sign-in">SIGN IN</button>
+    <button data-modal-url="<%= users_modals_sign_up_path %>" data-action="click->users#presentModal" class="margin-top button--sign-up">SIGN UP</button>
   </div>
 </div>
diff --git a/app/views/users/modals/sign_up.html.erb b/app/views/users/modals/sign_up.html.erb
@@ -1,34 +1,35 @@
-<div data-controller="registrations">
-  <h2 class="text-center">Create an Account</h2>
+<div class="form--registration" data-controller="registrations">
+  <h1 class="text-center">Sign up for an account</h1>
+  <p class="text-center">Already have an account? <a data-modal-url="<%= users_modals_sign_in_path %>" data-action="click->registrations#presentModal">Sign in</a></p>
 
-  <%= form_for @user, url: user_registration_path, remote: true, html: { data: { type: "json", action: "ajax:success->registrations#onSignUpSuccess ajax:error->registrations#onSignUpError" } } do |f| %>
+  <%= form_for @user, url: user_registration_path, remote: true, html: { data: { type: "json", action: "ajax:success->registrations#onSignUpSuccess ajax:error->registrations#onSignUpError" }, class: "form--registration-form" } do |f| %>
     <%# <%= render "devise/shared/error_messages", resource: @user %>
 
-    <div class="field">
-      <%= f.label :name %><br />
+    <div class="form--field">
+      <%= f.label :name %>
       <%= f.text_field :name, autofocus: true, autocomplete: "name" %>
     </div>
 
-    <div class="field">
-      <%= f.label :email %><br />
+    <div class="form--field">
+      <%= f.label :email %>
       <%= f.email_field :email, autocomplete: "email" %>
     </div>
 
-    <div class="field">
+    <div class="form--field">
       <%= f.label :password %>
       <% if @minimum_password_length %>
       <em>(<%= @minimum_password_length %> characters minimum)</em>
-      <% end %><br />
+      <% end %>
       <%= f.password_field :password, autocomplete: "new-password" %>
     </div>
 
-    <div class="field">
-      <%= f.label :password_confirmation %><br />
+    <div class="form--field">
+      <%= f.label :password_confirmation %>
       <%= f.password_field :password_confirmation, autocomplete: "new-password" %>
     </div>
 
     <div class="actions">
-      <%= f.submit "Sign up" %>
+      <%= f.submit "SIGN UP", class: "button--sign-in" %>
     </div>
   <% end %>
 </div>

Original file line number	Diff line number	Diff line change
`@@ -12,7 +12,15 @@ export default class extends Controller {`
`12`	`12`	`this.toast.display(data.message)`
`13`	`13`	`}`
`14`	`14`
	`15`	`+ presentModal(event) {`
	`16`	`+ this.modal.present(event.target.dataset.modalUrl)`
	`17`	`+ }`
	`18`	`+`
`15`	`19`	`get toast() {`
`16`	`20`	`return document.getElementById('toast').toast`
`17`	`21`	`}`
	`22`	`+`
	`23`	`+ get modal() {`
	`24`	`+ return document.getElementById('modal').modal`
	`25`	`+ }`
`18`	`26`	`}`
Original file line number	Diff line number	Diff line change
`@@ -13,7 +13,15 @@ export default class extends Controller {`
`13`	`13`	`this.toast.display(data.message)`
`14`	`14`	`}`
`15`	`15`
	`16`	`+ presentModal(event) {`
	`17`	`+ this.modal.present(event.target.dataset.modalUrl)`
	`18`	`+ }`
	`19`	`+`
`16`	`20`	`get toast() {`
`17`	`21`	`return document.getElementById('toast').toast`
`18`	`22`	`}`
	`23`	`+`
	`24`	`+ get modal() {`
	`25`	`+ return document.getElementById('modal').modal`
	`26`	`+ }`
`19`	`27`	`}`