Update styling of sign up (registration) page

app/assets/stylesheets/accounts.scss

@@ -1,22 +1,36 @@
 .account-form {
   margin: 0 10px 30px;
 
-  h1 {
+  h1,
+  h2 {
     font-size: 2em;
     margin-bottom: 30px;
   }
 
   label,
-  .actions {
+  .actions,
+  .form-actions {
     text-align: right;
   }
 
-  .actions .btn {
+  .actions .btn,
+  .form-actions .btn {
     margin-left: 10px;
   }
 
   .help-block {
-    margin-bottom: 20px;
+    margin-bottom: 0;
     margin-top: 5px;
   }
 }
+
+.registration {
+  .required-tag {
+    display: none;
+  }
+}
+
+.field_with_errors {
+  border-radius: $border-radius-base;
+  margin-top: 5px;
+}

app/views/accounts/_new_form.html.erb

@@ -1,4 +1,4 @@
-<%= form_for(@account, class: 'form') do |f| %>
+<%= form_for(@account, :html => { class: 'form form-horizontal' }) do |f| %>
   <% if @account.errors.any? %>
     <div id="error_explanation" class="alert alert-danger">
       <%= pluralize(@account.errors.count, "error") %> prohibited this repository from being saved:

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

@@ -1,17 +1,18 @@
-<h2>TEST</h2>
+<div class="row col-md-9 account-form registration">
+  <h2>Create a new account</h2>
 
-<%= simple_form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
-  <%= f.error_notification %>
+  <%= simple_form_for(resource, as: resource_name, url: registration_path(resource_name), html: { class: "form-horizontal" }) do |f| %>
+    <%= f.error_notification %>
 
-  <div class="form-inputs">
-    <%= f.input :email, required: true, autofocus: true %>
-    <%= f.input :password, required: true, hint: ("#{@minimum_password_length} characters minimum" if @minimum_password_length) %>
-    <%= f.input :password_confirmation, required: true %>
-  </div>
+    <div class="form-inputs">
+      <%= f.input :email, :label => 'Email address', required: true, autofocus: true, wrapper: :inline %>
+      <%= f.input :password, required: true, hint: ("#{@minimum_password_length} characters minimum" if @minimum_password_length), wrapper: :inline %>
+      <%= f.input :password_confirmation, required: true, wrapper: :inline %>
+    </div>
 
-  <div class="form-actions">
-    <%= f.button :submit, "Sign up" %>
-  </div>
-<% end %>
-
-<%= render "devise/shared/links" %>
+    <div class="form-actions">
+      <%= render "devise/shared/links" %>
+      <%= f.button :submit, "Create account", class: 'btn btn-primary' %>
+    </div>
+  <% end %>
+</div>

app/views/devise/shared/_links.html.erb

@@ -1,5 +1,5 @@
 <%- if controller_name != 'sessions' %>
-  <%= link_to "Log in", new_session_path(resource_name) %><br />
+  <%= link_to "Log in", new_session_path(resource_name) %>
 <% end -%>
 
 <%- if devise_mapping.registerable? && controller_name != 'registrations' %>

config/initializers/simple_form.rb

@@ -167,4 +167,23 @@
 
   # Defines which i18n scope will be used in Simple Form.
   # config.i18n_scope = 'simple_form'
+
+  config.wrappers :inline,
+    class: :input,
+    hint_class: 'hint', error_class: 'field_with_errors' do |b|
+
+    # mix in special behavior using `use :component`
+    b.use :html5
+    # b.use :placeholder
+
+    # define custom HTML output using `wrapper`
+    b.wrapper tag: :div, class: 'form-group' do |c|
+      c.use :label, class: 'control-label col-md-2'
+      c.wrapper tag: :div, class: 'col-md-10' do |d|
+        d.use :input, class: 'form-control'
+        d.use :hint,  wrap_with: { tag: :span, class: 'help-block' }
+        d.use :error, wrap_with: { tag: :div, class: 'field_with_errors alert-danger' }
+      end
+    end
+  end
 end