Improve style pt. 2 (devise forms)

app/javascript/stylesheets/general/_form.scss

@@ -12,3 +12,26 @@
   border-color: $astuto-grey;
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 4px rgba(0, 0, 0, 0.6);
 }
+
+.new_user, .edit_user {
+  @extend .card;
+
+  width: 100%;
+  max-width: 360px;
+
+  text-align: center;
+
+  padding: 15px;
+  margin: 0 auto;
+}
+
+.deviseLinks {
+  @extend .new_user;
+
+  display: flex;
+  flex-direction: column;
+
+  margin-top: 24px;
+
+  a { color: #333; }
+}

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

@@ -1,15 +1,15 @@
-<h2>Resend confirmation instructions</h2>
-
 <%= form_for(resource, as: resource_name, url: confirmation_path(resource_name), html: { method: :post }) do |f| %>
+  <h2>Resend confirmation instructions</h2>
+  
   <%= render "devise/shared/error_messages", resource: resource %>
 
   <div class="form-group">
-    <%= f.label :email %>
+    <%= f.label :email, class: "sr-only" %>
-    <%= f.email_field :email, autofocus: true, autocomplete: "email", value: (resource.pending_reconfirmation? ? resource.unconfirmed_email : resource.email), class: "form-control" %>
+    <%= f.email_field :email, autofocus: true, autocomplete: "email", placeholder: "Email address", required: true, value: (resource.pending_reconfirmation? ? resource.unconfirmed_email : resource.email), class: "form-control" %>
   </div>
 
   <div class="actions">
-    <%= f.submit "Resend confirmation instructions", class: "btn btn-primary" %>
+    <%= f.submit "Resend confirmation instructions", class: "btn btn-dark btn-block" %>
   </div>
 <% end %>
 

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

@@ -1,15 +1,15 @@
-<h2>Forgot your password?</h2>
-
 <%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :post }) do |f| %>
+  <h2>Forgot your password?</h2>
+
   <%= render "devise/shared/error_messages", resource: resource %>
 
   <div class="form-group">
-    <%= f.label :email %>
+    <%= f.label :email, class: "sr-only" %>
-    <%= f.email_field :email, autofocus: true, autocomplete: "email", class: "form-control" %>
+    <%= f.email_field :email, autofocus: true, autocomplete: "email", placeholder: "Email address", required: true, class: "form-control" %>
   </div>
 
   <div class="actions">
-    <%= f.submit "Send me reset password instructions", class: "btn btn-primary" %>
+    <%= f.submit "Send me reset password instructions", class: "btn btn-dark btn-block" %>
   </div>
 <% end %>
 

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

@@ -1,6 +1,6 @@
-<h2>Profile settings</h2>
-
 <%= form_for(resource, as: resource_name, url: registration_path(resource_name), html: { method: :put }) do |f| %>
+  <h2>Profile settings</h2>
+
   <%= render "devise/shared/error_messages", resource: resource %>
 
   <div class="form-group">
@@ -12,7 +12,7 @@
     <%= f.label :email %>
     <%= f.email_field :email, autocomplete: "email", class: "form-control" %>
     <small id="emailGravatarHelp" class="form-text text-muted">
-      the email is <a href="https://gravatar.com">gravatar</a>ized
+      the email is <a href="https://gravatar.com" target="_blank">gravatar</a>ized
     </small>
   </div>
 
@@ -47,12 +47,15 @@
   </div>
 
   <div class="actions">
-    <%= f.submit "Update profile", class: "btn btn-primary" %>
+    <%= f.submit "Update profile", class: "btn btn-dark btn-block" %>
   </div>
 <% end %>
 
 <br />
 
-<h3>Cancel my account</h3>
+<div class="edit_user">
-
+  <h3>Cancel my account</h3>
-<p>Unhappy? <%= button_to "Cancel my account", registration_path(resource_name), data: { confirm: "Are you sure?" }, method: :delete, class: "btn btn-danger" %></p>
+  <p>Unhappy?
+    <%= button_to "Cancel my account", registration_path(resource_name), data: { confirm: "Are you sure?" }, method: :delete, class: "btn btn-danger btn-block" %>
+  </p>
+</div>

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

@@ -1,35 +1,30 @@
-<h2>Sign up</h2>
-
 <%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
+  <h2>Sign up</h2>
+
   <%= render "devise/shared/error_messages", resource: resource %>
 
   <div class="form-group">
-    <%= f.label :full_name %>
+    <%= f.label :full_name, class: "sr-only" %>
-    <%= f.text_field :full_name, autofocus: true, autocomplete: "full-name", class: "form-control" %>
+    <%= f.text_field :full_name, autofocus: true, placeholder: "Full name", required: true, class: "form-control" %>
   </div>
   
   <div class="form-group">
-    <%= f.label :email %>
+    <%= f.label :email, class: "sr-only" %>
-    <%= f.email_field :email, autocomplete: "email", class: "form-control" %>
+    <%= f.email_field :email, autocomplete: "email", placeholder: "Email address", required: true, class: "form-control" %>
   </div>
 
   <div class="form-group">
-    <%= f.label :password %>
+    <%= f.label :password, class: "sr-only" %>
-    <%= f.password_field :password, autocomplete: "new-password", class: "form-control" %>
+    <%= f.password_field :password, placeholder: "Password", required: true, class: "form-control" %>
-    <% if @minimum_password_length %>
-      <small id="passwordHelp" class="form-text text-muted">
-        <%= @minimum_password_length %> characters minimum
-      </small>
-    <% end %>
   </div>
 
   <div class="form-group">
-    <%= f.label :password_confirmation %>
+    <%= f.label :password_confirmation, class: "sr-only" %>
-    <%= f.password_field :password_confirmation, autocomplete: "new-password", class: "form-control" %>
+    <%= f.password_field :password_confirmation, placeholder: "Password confirmation", required: true, class: "form-control" %>
   </div>
 
   <div class="actions">
-    <%= f.submit "Sign up", class: "btn btn-primary" %>
+    <%= f.submit "Sign up", class: "btn btn-dark btn-block" %>
   </div>
 <% end %>
 

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

@@ -1,14 +1,14 @@
-<h2>Log in</h2>
-
 <%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
+  <h2>Log in</h2>
+
   <div class="form-group">
-    <%= f.label :email %>
+    <%= f.label :email, class: "sr-only" %>
-    <%= f.email_field :email, autofocus: true, autocomplete: "email", class: "form-control" %>
+    <%= f.email_field :email, autofocus: true, autocomplete: "email", placeholder: "Email address", required: true, class: "form-control" %>
   </div>
 
   <div class="form-group">
-    <%= f.label :password %>
+    <%= f.label :password, class: "sr-only" %>
-    <%= f.password_field :password, autocomplete: "current-password", class: "form-control" %>
+    <%= f.password_field :password, autocomplete: "current-password", placeholder: "Password", required: true, class: "form-control" %>
   </div>
 
   <% if devise_mapping.rememberable? %>
@@ -19,7 +19,7 @@
   <% end %>
 
   <div class="actions">
-    <%= f.submit "Log in", class: "btn btn-primary" %>
+    <%= f.submit "Log in", class: "btn btn-dark btn-block" %>
   </div>
 <% end %>
 

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

@@ -1,15 +1,7 @@
 <% if resource.errors.any? %>
-  <div id="error_explanation" class="alert alert-danger">
+  <div id="error_explanation" class="alert container alert-danger">
-    <h4>
-      <%= I18n.t("errors.messages.not_saved",
-                 count: resource.errors.count,
-                 resource: resource.class.model_name.human.downcase)
-       %>
-    </h4>
-    <ul>
     <% resource.errors.full_messages.each do |message| %>
-        <li><%= message %></li>
+      <span><%= message %></span><br />
     <% end %>
-    </ul>
   </div>
 <% end %>

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

@@ -1,25 +1,27 @@
+<div class="deviseLinks">
 <%- 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' %>
-  <%= link_to "Sign up", new_registration_path(resource_name) %><br />
+  <%= link_to "Sign up", new_registration_path(resource_name) %>
 <% end %>
 
 <%- if devise_mapping.recoverable? && controller_name != 'passwords' && controller_name != 'registrations' %>
-  <%= link_to "Forgot your password?", new_password_path(resource_name) %><br />
+  <%= link_to "Forgot your password?", new_password_path(resource_name) %>
 <% end %>
 
 <%- if devise_mapping.confirmable? && controller_name != 'confirmations' %>
-  <%= link_to "Didn't receive confirmation instructions?", new_confirmation_path(resource_name) %><br />
+  <%= link_to "Didn't receive confirmation instructions?", new_confirmation_path(resource_name) %>
 <% end %>
 
 <%- if devise_mapping.lockable? && resource_class.unlock_strategy_enabled?(:email) && controller_name != 'unlocks' %>
-  <%= link_to "Didn't receive unlock instructions?", new_unlock_path(resource_name) %><br />
+  <%= link_to "Didn't receive unlock instructions?", new_unlock_path(resource_name) %>
 <% end %>
 
 <%- if devise_mapping.omniauthable? %>
   <%- resource_class.omniauth_providers.each do |provider| %>
-    <%= link_to "Sign in with #{OmniAuth::Utils.camelize(provider)}", omniauth_authorize_path(resource_name, provider) %><br />
+    <%= link_to "Sign in with #{OmniAuth::Utils.camelize(provider)}", omniauth_authorize_path(resource_name, provider) %>
   <% end %>
 <% end %>
+</div>