From ee03b57d8919fff26e6539a96cdc476d5445f9b0 Mon Sep 17 00:00:00 2001
From: Brenda Wallace <brenda@wallace.net.nz>
Date: Sun, 21 Apr 2019 15:02:04 +1200
Subject: [PATCH] Tidy up sign up form

---
 app/assets/stylesheets/overrides.sass        |  1 +
 app/views/devise/passwords/new.html.haml     |  2 +-
 app/views/devise/registrations/new.html.haml | 64 ++++++++------------
 3 files changed, 27 insertions(+), 40 deletions(-)

diff --git a/app/assets/stylesheets/overrides.sass b/app/assets/stylesheets/overrides.sass
index 061c56335..e7e72a2b9 100644
--- a/app/assets/stylesheets/overrides.sass
+++ b/app/assets/stylesheets/overrides.sass
@@ -352,6 +352,7 @@ ul.thumbnail-buttons
     max-width: 500px
     text-align: center
     display: inline-block
+    padding: 1em
 
 // Overrides applying only to mobile view. This must be at the end of the overrides file.
 @media only screen and (max-width: 767px)
diff --git a/app/views/devise/passwords/new.html.haml b/app/views/devise/passwords/new.html.haml
index fe8df5ba0..1ff9114ff 100644
--- a/app/views/devise/passwords/new.html.haml
+++ b/app/views/devise/passwords/new.html.haml
@@ -9,7 +9,7 @@
       = devise_error_messages!
 
       = f.text_field :login, class: "form-control mb-4", placeholder: "E-mail", type: "email"
-      = f.submit "Send me reset password instructions", class: 'btn btn-primary'
+      = f.submit "Send me reset password instructions", class: 'btn btn-block my-4 btn-primary'
 
       .form-group
         .col-md-offset-2.col-md-8
diff --git a/app/views/devise/registrations/new.html.haml b/app/views/devise/registrations/new.html.haml
index b9e61347c..bf0329f4f 100644
--- a/app/views/devise/registrations/new.html.haml
+++ b/app/views/devise/registrations/new.html.haml
@@ -1,51 +1,37 @@
-- content_for :title, "Join Growstuff"
+.form-page
+  %section.card.form-card
+    %h2 Join Growstuff
+    .card-body
+      %p Sign up for a Growstuff account to track your veggie garden and connect with other local growers.
 
-%p Sign up for a Growstuff account to track your veggie garden and connect with other local growers.
+    = form_for(resource, as: resource_name,
+        url: registration_path(resource_name),
+        html: { class: "text-center border border-light p-5" }) do |f|
+      = devise_error_messages!
 
-= form_for(resource, as: resource_name,
-    url: registration_path(resource_name),
-    html: { class: "form-horizontal" }) do |f|
-  = devise_error_messages!
+      = f.text_field :login_name, class: 'form-control form-control-lg{', placeholder: 'login name'
+      %span This is the name that will show on the website.
 
-  .form-group
-    = f.label :login_name, class: "control-label col-md-2"
-    .col-md-8
-      = f.text_field :login_name, class: 'form-control'
-      %span.help-inline This is the name that will show on the website.
+      = icon 'fas', 'email'
+      = f.email_field :email, class: 'form-control', placeholder: 'email', type: :email
+      %span We'll use this address to contact you (we never spam!)
 
-  .form-group
-    = f.label :email, class: "control-label col-md-2"
-    .col-md-8
-      = f.email_field :email, class: 'form-control'
-      %span.help-inline We'll use this address to contact you (we never spam!)
+      %hr/
+      = f.password_field :password, class: "form-control", placeholder: 'password', type: :password
+      = f.password_field :password_confirmation, class: 'form-control', placeholder: 'confirm password'
 
-  .form-group
-    = f.label :password, class: "control-label col-md-2"
-    .col-md-8= f.password_field :password, class: 'form-control'
+      %hr/
 
-  .form-group
-    = f.label :password_confirmation, class: "control-label col-md-2"
-    .col-md-8= f.password_field :password_confirmation, class: 'form-control'
-
-  .form-group
-    .col-md-offset-2.col-md-8.checkbox
-      %label
+      %p
         = f.check_box :tos_agreement
         I agree to the
-        = succeed "." do
-          = link_to 'Terms of Service', "#{root_url}/policy/tos"
-  .form-group
-    .col-md-offset-2.col-md-8.checkbox
-      %label
+        = link_to 'Terms of Service', "#{root_url}/policy/tos"
+
+      %p
         = f.check_box :newsletter, checked: true
         Subscribe to the #{ENV['GROWSTUFF_SITE_NAME']} newsletter
-      .help-inline
-        = render partial: 'newsletter_blurb'
+      %p= render partial: 'newsletter_blurb'
 
-  .form-group
-    .form-actions.col-md-offset-2.col-md-8
-      = f.submit "Sign up", class: 'btn btn-primary'
+      = f.submit "Sign up", class: 'btn btn-block my-4 btn-primary'
 
-  .form-group
-    .col-md-offset-2.col-md-8
-      = render "devise/shared/links"
+    = render "devise/shared/links"