Tidy up sign up form

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)

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

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"