Improve style, in particular forms

app/javascript/stylesheets/application.scss

@@ -1 +1,7 @@
-@import './bootstrap_custom.scss'
+@import './bootstrap_custom.scss';
+@import './navbar.scss';
+@import './forms.scss';
+
+.container {
+  max-width: 920px;
+}

app/javascript/stylesheets/forms.scss

@@ -0,0 +1,11 @@
+@import "node_modules/bootstrap/scss/variables";
+
+.field_with_errors {
+  label {
+    color: $danger;
+  }
+
+  input {
+    border-color: $danger;
+  }
+}

app/javascript/stylesheets/navbar.scss

@@ -0,0 +1,12 @@
+.navbar {
+  border-bottom-width: 1px;
+  border-bottom-style: solid;
+  border-bottom-color: black;
+
+  margin-bottom: 1.5em;
+
+  .navbar-brand {
+    font-size: 18pt;
+    font-weight: 700;
+  }
+}

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

@@ -3,13 +3,13 @@
 <%= form_for(resource, as: resource_name, url: confirmation_path(resource_name), html: { method: :post }) do |f| %>
   <%= render "devise/shared/error_messages", resource: resource %>
 
-  <div class="field">
+  <div class="form-group">
-    <%= f.label :email %><br />
+    <%= f.label :email %>
-    <%= f.email_field :email, autofocus: true, autocomplete: "email", value: (resource.pending_reconfirmation? ? resource.unconfirmed_email : resource.email) %>
+    <%= f.email_field :email, autofocus: true, autocomplete: "email", value: (resource.pending_reconfirmation? ? resource.unconfirmed_email : resource.email), class: "form-control" %>
   </div>
 
   <div class="actions">
-    <%= f.submit "Resend confirmation instructions" %>
+    <%= f.submit "Resend confirmation instructions", class: "btn btn-primary" %>
   </div>
 <% end %>
 

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

@@ -4,21 +4,23 @@
   <%= render "devise/shared/error_messages", resource: resource %>
   <%= f.hidden_field :reset_password_token %>
 
-  <div class="field">
+  <div class="form-group">
-    <%= f.label :password, "New password" %><br />
+    <%= f.label :password, "New password" %>
+    <%= f.password_field :password, autofocus: true, autocomplete: "new-password", class: "form-control" %>
     <% if @minimum_password_length %>
-      <em>(<%= @minimum_password_length %> characters minimum)</em><br />
+      <small id="passwordHelp" class="form-text text-muted">
+        (<%= @minimum_password_length %> characters minimum)
+      </small>
     <% end %>
-    <%= f.password_field :password, autofocus: true, autocomplete: "new-password" %>
   </div>
 
-  <div class="field">
+  <div class="form-group">
-    <%= f.label :password_confirmation, "Confirm new password" %><br />
+    <%= f.label :password_confirmation, "Confirm new password" %>
-    <%= f.password_field :password_confirmation, autocomplete: "new-password" %>
+    <%= f.password_field :password_confirmation, autocomplete: "new-password", class: "form-control" %>
   </div>
 
   <div class="actions">
-    <%= f.submit "Change my password" %>
+    <%= f.submit "Change my password", class: "btn btn-primary" %>
   </div>
 <% end %>
 

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

@@ -3,13 +3,13 @@
 <%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :post }) do |f| %>
   <%= render "devise/shared/error_messages", resource: resource %>
 
-  <div class="field">
+  <div class="form-group">
-    <%= f.label :email %><br />
+    <%= f.label :email %>
-    <%= f.email_field :email, autofocus: true, autocomplete: "email" %>
+    <%= f.email_field :email, autofocus: true, autocomplete: "email", class: "form-control" %>
   </div>
 
   <div class="actions">
-    <%= f.submit "Send me reset password instructions" %>
+    <%= f.submit "Send me reset password instructions", class: "btn btn-primary" %>
   </div>
 <% end %>
 

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

@@ -4,12 +4,12 @@
   <%= render "devise/shared/error_messages", resource: resource %>
 
   <div class="form-group">
-    <%= f.label :full_name %><br />
+    <%= f.label :full_name %>
     <%= f.text_field :full_name, autofocus: true, autocomplete: "full-name", class: "form-control" %>
   </div>
 
   <div class="form-group">
-    <%= f.label :email %><br />
+    <%= f.label :email %>
     <%= f.email_field :email, autocomplete: "email", class: "form-control" %>
   </div>
 
@@ -18,22 +18,29 @@
   <% end %>
 
   <div class="form-group">
-    <%= f.label :password %> <i>(leave blank if you don't want to change it)</i><br />
+    <%= f.label :password %>
     <%= f.password_field :password, autocomplete: "new-password", class: "form-control" %>
     <% if @minimum_password_length %>
-      <br />
+      <small id="passwordEditHelp" class="form-text text-muted">
-      <em><%= @minimum_password_length %> characters minimum</em>
+        leave blank if you don't want to change it
+      </small>
+      <small id="passwordHelp" class="form-text text-muted">
+        <%= @minimum_password_length %> characters minimum
+      </small>
     <% end %>
   </div>
 
   <div class="form-group">
-    <%= f.label :password_confirmation %><br />
+    <%= f.label :password_confirmation %>
     <%= f.password_field :password_confirmation, autocomplete: "new-password", class: "form-control" %>
   </div>
 
   <div class="form-group">
-    <%= f.label :current_password %> <i>(we need your current password to confirm your changes)</i><br />
+    <%= f.label :current_password %>
     <%= f.password_field :current_password, autocomplete: "current-password", class: "form-control" %>
+    <small id="currentPasswordHelp" class="form-text text-muted">
+      we need your current password to confirm your changes
+    </small>
   </div>
 
   <div class="actions">
@@ -41,6 +48,8 @@
   </div>
 <% end %>
 
+<br />
+
 <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>

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

@@ -4,25 +4,27 @@
   <%= render "devise/shared/error_messages", resource: resource %>
 
   <div class="form-group">
-    <%= f.label :full_name %><br />
+    <%= f.label :full_name %>
     <%= f.text_field :full_name, autofocus: true, autocomplete: "full-name", class: "form-control" %>
   </div>
   
   <div class="form-group">
-    <%= f.label :email %><br />
+    <%= f.label :email %>
     <%= f.email_field :email, autocomplete: "email", class: "form-control" %>
   </div>
 
   <div class="form-group">
     <%= f.label :password %>
-    <% if @minimum_password_length %>
-    <em>(<%= @minimum_password_length %> characters minimum)</em>
-    <% end %><br />
     <%= f.password_field :password, autocomplete: "new-password", 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 %><br />
+    <%= f.label :password_confirmation %>
     <%= f.password_field :password_confirmation, autocomplete: "new-password", class: "form-control" %>
   </div>
 

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

@@ -2,12 +2,12 @@
 
 <%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
   <div class="form-group">
-    <%= f.label :email %><br />
+    <%= f.label :email %>
     <%= f.email_field :email, autofocus: true, autocomplete: "email", class: "form-control" %>
   </div>
 
   <div class="form-group">
-    <%= f.label :password %><br />
+    <%= f.label :password %>
     <%= f.password_field :password, autocomplete: "current-password", class: "form-control" %>
   </div>
 

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

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

app/views/layouts/_alerts.html.erb

@@ -1,7 +1,7 @@
 <% if notice %>
-  <p class="notice alert alert-primary"><%= notice %></p>
+  <p class="notice container alert alert-primary"><%= notice %></p>
 <% end %>
 
 <% if alert %>
-  <p class="alert alert-danger"><%= alert %></p>
+  <p class="alert container alert-danger"><%= alert %></p>
 <% end %>

app/views/layouts/_header.html.erb

@@ -1,4 +1,5 @@
-<nav class="navbar navbar-expand-lg navbar-light bg-light">
+<nav class="navbar navbar-expand-lg navbar-light">
+  <div class="container">
     <%= link_to "Astuto", "#", class: "navbar-brand" %>
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>
@@ -9,10 +10,10 @@
         <% if user_signed_in? %>
           <li class="nav-item dropdown">
             <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-            <%= current_user.email %>
+              <%= current_user.full_name %>
             </a>
             <div class="dropdown-menu" aria-labelledby="navbarDropdown">
-            <%= link_to "Profile", edit_user_registration_path, class: "dropdown-item" %>
+              <%= link_to "Profile settings", edit_user_registration_path, class: "dropdown-item" %>
               <div class="dropdown-divider"></div>
               <%= link_to "Sign out", destroy_user_session_path, method: :delete, class: "dropdown-item" %>
             </div>
@@ -24,4 +25,5 @@
         <% end %>
       </ul>
     </div>
+  </div>
 </nav>

app/views/layouts/application.html.erb

@@ -13,6 +13,8 @@
     <%= render "layouts/header" %>
     <%= render "layouts/alerts" %>
     
+    <div class="container">
       <%= yield %>
+    </div>
   </body>
 </html>