From: Andy Allan <git@gravitystorm.co.uk>
Date: Wed, 10 Jun 2020 18:33:18 +0000 (+0200)
Subject: Refactor away from global form control styling
X-Git-Tag: live~3089^2~3
X-Git-Url: https://git.openstreetmap.org/rails.git/commitdiff_plain/627f2493faa77336e7dcb13abb92dc547ee4db9f?hp=5c3f549492d5ef9b6eed6ebb7a8e32a19103b616

Refactor away from global form control styling

This enables forms to be converted one-by-one to bootstrap. Without this
refactoring, these global styles interfere with form control styling from
bootstrap.

The rearrangement of the search and directions styling is to solve CSS selector specitivity issues.
---

diff --git a/app/assets/javascripts/leaflet.layers.js b/app/assets/javascripts/leaflet.layers.js
index 87ff87370..102b02460 100644
--- a/app/assets/javascripts/leaflet.layers.js
+++ b/app/assets/javascripts/leaflet.layers.js
@@ -119,7 +119,7 @@ L.OSM.layers = function (options) {
         .attr("class", "deemphasize")
         .appendTo(overlaySection);
 
-      var overlays = $("<ul class='list-unstyled'>")
+      var overlays = $("<ul class='list-unstyled standard-form'>")
         .appendTo(overlaySection);
 
       var addOverlay = function (layer, name, maxArea) {
diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index a13f73d7a..54ecb30e2 100644
--- a/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@ -734,118 +734,6 @@ header .search_forms,
   display: none;
 }
 
-.search_form,
-.directions_form {
-  position: relative;
-  padding: $lineheight/2;
-  background-color: $lightgrey;
-
-  .query_wrapper {
-    position: relative;
-    overflow: hidden;
-    border-radius: 2px 0 0 2px;
-  }
-
-  input[type=text] {
-    width: 100%;
-    height: 30px;
-    transition: 300ms linear;
-  }
-
-  input[type=text].overflow {
-    border-right: none;
-    border-radius: 3px 0px 0px 3px;
-  }
-
-  input:focus {
-    outline: none;
-    box-shadow: 0px 0px 7px $vibrant-green;
-  }
-
-  input[type=submit].float {
-    float: right;
-    width: auto;
-    min-width: 0;
-    border-radius: 0 2px 2px 0;
-  }
-
-  input.error {
-    background-color: rgba($red, 0.4);
-  }
-
-  select {
-    /* this next line is to polyfill the vertical alignment of text within a select element,
-     * which is different between firefox and chrome. */
-    padding: 0.3em 0;
-  }
-
-  .query_options {
-    text-align: right;
-    font-size: 10px;
-    color: $blue;
-  }
-
-  .describe_location {
-    position: absolute;
-    top: 6px;
-    right: 6px;
-    font-size: 10px;
-    color: $blue;
-  }
-
-  .switch_link {
-    float: right;
-    width: auto;
-    min-width: 0;
-    margin-left: 6px;
-  }
-
-  img.button {
-    display: block;
-    width: 20px;
-    height: 20px;
-  }
-
-  span.force_width {
-    width: 100%;
-    padding-right: 25px;
-    display: block;
-  }
-
-  select.routing_engines {
-    min-height: 30px;
-    margin: 0px 0px 5px 25px;
-  }
-
-  input.routing_go {
-    min-width: 100px;
-    float: right;
-  }
-
-  div.header {
-    width: 100%;
-    height: 30px;
-  }
-
-  div.line {
-    width: 100%;
-    margin: 0px 0px 5px 0px;
-  }
-
-  div.loader_copy {
-    display: none;
-
-    img {
-      vertical-align: middle;
-    }
-  }
-
-  a.reverse_directions {
-    cursor: pointer;
-    margin: 0px 0px 5px 25px;
-  }
-}
-
 /* Rules for the map key which appears in the popout sidebar */
 
 #mapkey {
@@ -1774,44 +1662,205 @@ tr.turn:hover {
     float: left;
     margin-top: 5px;
   }
-}
 
-#remember_me_openid {
-  display: block;
-}
+  #remember_me_openid {
+    display: block;
+  }
 
-select {
-  padding: 2px;
-}
+  select {
+    padding: 2px;
+  }
 
-input[type="checkbox"],
-input[type="radio"] {
-    margin-right: 5px;
-}
+  input[type="checkbox"],
+  input[type="radio"] {
+      margin-right: 5px;
+  }
 
-input[type="text"],
-input[type="email"],
-input[type="url"],
-input[type="password"],
-textarea {
-  color: #222;
-  background-color: #fff;
-  border: 1px solid $grey;
-  border-radius: 3px;
-  padding: 2px 5px;
-  margin: 0;
-  width: 200px;
+  input[type="text"],
+  input[type="email"],
+  input[type="url"],
+  input[type="password"],
+  textarea {
+    color: #222;
+    background-color: #fff;
+    border: 1px solid $grey;
+    border-radius: 3px;
+    padding: 2px 5px;
+    margin: 0;
+    width: 200px;
 
-  &.field_with_errors {
-    border: 2px solid #ff7070;
+    &.field_with_errors {
+      border: 2px solid #ff7070;
+    }
   }
-}
 
-textarea {
-  padding: 5px;
-  width: 100%;
-  min-height: 50px;
-  resize: vertical;
+  textarea {
+    padding: 5px;
+    width: 100%;
+    min-height: 50px;
+    resize: vertical;
+  }
+
+
+  /* Utility for general button styles */
+
+  input[type="button"],
+  input[type="submit"],
+  input[type="reset"],
+  a.button {
+    cursor: pointer;
+    border: 0;
+    display: inline-block;
+    padding: $lineheight/4 $lineheight/2;
+    min-height: 20px + $lineheight/2;
+    min-width: 120px;
+    margin: 0 0 $lineheight/2 0;
+    color: white;
+    background: $blue;
+    text-align: center;
+    border-radius: 2px;
+    &:hover {
+      background: darken($blue, $hovercolor);
+      text-decoration: none;
+    }
+    &.deemphasize {
+      background: $lightblue;
+      &:hover {
+        background: darken($lightblue, $hovercolor);
+      }
+    }
+    &:disabled {
+      background: $lightgrey;
+      &:hover {
+        background: $lightgrey;
+      }
+    }
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  input[type="button"],
+  input[type="submit"],
+  input[type="reset"] {
+    line-height: normal;
+  }
+
+  a.button {
+    line-height: 20px;
+  }
+
+  .search_form,
+  .directions_form {
+    position: relative;
+    padding: $lineheight/2;
+    background-color: $lightgrey;
+
+    .query_wrapper {
+      position: relative;
+      overflow: hidden;
+      border-radius: 2px 0 0 2px;
+    }
+
+    input[type=text] {
+      width: 100%;
+      height: 30px;
+      transition: 300ms linear;
+    }
+
+    input[type=text].overflow {
+      border-right: none;
+      border-radius: 3px 0px 0px 3px;
+    }
+
+    input:focus {
+      outline: none;
+      box-shadow: 0px 0px 7px $vibrant-green;
+    }
+
+    input[type=submit].float {
+      float: right;
+      width: auto;
+      min-width: 0;
+      border-radius: 0 2px 2px 0;
+    }
+
+    input.error {
+      background-color: rgba($red, 0.4);
+    }
+
+    select {
+      /* this next line is to polyfill the vertical alignment of text within a select element,
+       * which is different between firefox and chrome. */
+      padding: 0.3em 0;
+    }
+
+    .query_options {
+      text-align: right;
+      font-size: 10px;
+      color: $blue;
+    }
+
+    .describe_location {
+      position: absolute;
+      top: 6px;
+      right: 6px;
+      font-size: 10px;
+      color: $blue;
+    }
+
+    .switch_link {
+      float: right;
+      width: auto;
+      min-width: 0;
+      margin-left: 6px;
+    }
+
+    img.button {
+      display: block;
+      width: 20px;
+      height: 20px;
+    }
+
+    span.force_width {
+      width: 100%;
+      padding-right: 25px;
+      display: block;
+    }
+
+    select.routing_engines {
+      min-height: 30px;
+      margin: 0px 0px 5px 25px;
+    }
+
+    input.routing_go {
+      min-width: 100px;
+      float: right;
+    }
+
+    div.header {
+      width: 100%;
+      height: 30px;
+    }
+
+    div.line {
+      width: 100%;
+      margin: 0px 0px 5px 0px;
+    }
+
+    div.loader_copy {
+      display: none;
+
+      img {
+        vertical-align: middle;
+      }
+    }
+
+    a.reverse_directions {
+      cursor: pointer;
+      margin: 0px 0px 5px 25px;
+    }
+  }
 }
 
 /* Rules for user images */
@@ -1891,54 +1940,6 @@ div.secondary-actions {
 
 .inner02 { padding: 0 $lineheight;}
 
-/* Utility for general button styles */
-
-input[type="button"],
-input[type="submit"],
-input[type="reset"],
-a.button {
-  cursor: pointer;
-  border: 0;
-  display: inline-block;
-  padding: $lineheight/4 $lineheight/2;
-  min-height: 20px + $lineheight/2;
-  min-width: 120px;
-  margin: 0 0 $lineheight/2 0;
-  color: white;
-  background: $blue;
-  text-align: center;
-  border-radius: 2px;
-  &:hover {
-    background: darken($blue, $hovercolor);
-    text-decoration: none;
-  }
-  &.deemphasize {
-    background: $lightblue;
-    &:hover {
-      background: darken($lightblue, $hovercolor);
-    }
-  }
-  &:disabled {
-    background: $lightgrey;
-    &:hover {
-      background: $lightgrey;
-    }
-  }
-  &:last-child {
-    margin-bottom: 0;
-  }
-}
-
-input[type="button"],
-input[type="submit"],
-input[type="reset"] {
-  line-height: normal;
-}
-
-a.button {
-  line-height: 20px;
-}
-
 .buttons {
   min-width: 200px;
   input[type="submit"],
diff --git a/app/views/browse/changeset.html.erb b/app/views/browse/changeset.html.erb
index 3c41dd83f..89ecdd50e 100644
--- a/app/views/browse/changeset.html.erb
+++ b/app/views/browse/changeset.html.erb
@@ -15,7 +15,7 @@
 
   <% if current_user %>
     <div class="buttons clearfix subscribe-buttons">
-      <form action="#">
+      <form action="#" class="standard-form">
         <% if @changeset.subscribers.exists?(current_user.id) %>
           <input class="action-button" type="submit" name="unsubscribe" value="<%= t("javascripts.changesets.show.unsubscribe") %>" data-method="POST" data-url="<%= changeset_unsubscribe_url(@changeset) %>" />
         <% else %>
@@ -29,7 +29,7 @@
 
   <% if @comments.length > 0 %>
     <div class='changeset-comments'>
-      <form action="#">
+      <form action="#" class="standard-form">
         <ul class="list-unstyled">
           <% @comments.each do |comment| %>
             <% if comment.visible %>
@@ -71,7 +71,7 @@
 
   <% if current_user %>
     <% unless @changeset.is_open? %>
-      <form action="#">
+      <form action="#" class="standard-form">
         <textarea class="comment" name="text" cols="40" rows="5"></textarea>
         <div class="buttons clearfix">
           <input type="submit" name="comment" value="<%= t("javascripts.changesets.show.comment") %>" data-changeset-id="<%= @changeset.id %>" data-method="POST" data-url="<%= changeset_comment_url(@changeset) %>" disabled="1" />
diff --git a/app/views/browse/new_note.html.erb b/app/views/browse/new_note.html.erb
index 2929e610e..fbc2da3cd 100644
--- a/app/views/browse/new_note.html.erb
+++ b/app/views/browse/new_note.html.erb
@@ -7,7 +7,7 @@
 
 <div class="note browse-section">
   <p class="warning"><%= t("javascripts.notes.new.intro") %></p>
-  <form action="#">
+  <form action="#" class="standard-form">
     <input type="hidden" name="lon">
     <input type="hidden" name="lat">
     <textarea class="comment" name="text" cols="40" rows="10" maxlength="2000" placeholder="<%= t("javascripts.notes.new.advice") %>"></textarea>
diff --git a/app/views/browse/note.html.erb b/app/views/browse/note.html.erb
index ffc198b0a..ce8c19c89 100644
--- a/app/views/browse/note.html.erb
+++ b/app/views/browse/note.html.erb
@@ -42,7 +42,7 @@
 
   <% if @note.status == "open" %>
     <% if current_user -%>
-      <form action="#">
+      <form action="#" class="standard-form">
         <textarea class="comment" name="text" cols="40" rows="5" maxlength="2000"></textarea>
         <div class="buttons clearfix">
           <% if current_user.moderator? -%>
@@ -54,7 +54,7 @@
       </form>
     <% end -%>
   <% else %>
-    <form action="#">
+    <form action="#" class="standard-form">
       <input type="hidden" name="text" value="">
       <div class="buttons clearfix">
         <% if current_user and current_user.moderator? -%>
diff --git a/app/views/diary_entries/show.html.erb b/app/views/diary_entries/show.html.erb
index d3a0f70b2..4468fc53e 100644
--- a/app/views/diary_entries/show.html.erb
+++ b/app/views/diary_entries/show.html.erb
@@ -13,7 +13,7 @@
 <%= render :partial => "diary_comment", :collection => @comments %>
 </div>
 
-<div>
+<div class="standard-form">
   <% if current_user %>
     <h3 id="newcomment"><%= t ".leave_a_comment" %></h3>
 
diff --git a/app/views/friendships/make_friend.html.erb b/app/views/friendships/make_friend.html.erb
index c02de91f0..e781f7b25 100644
--- a/app/views/friendships/make_friend.html.erb
+++ b/app/views/friendships/make_friend.html.erb
@@ -2,7 +2,7 @@
   <h1><%= t ".heading", :user => @new_friend.display_name %></h1>
 <% end %>
 
-<%= form_tag do %>
+<%= form_tag(nil, :class => "standard-form") do %>
   <% if params[:referer] -%>
   <%= hidden_field_tag("referer", params[:referer]) %>
   <% end -%>
diff --git a/app/views/friendships/remove_friend.html.erb b/app/views/friendships/remove_friend.html.erb
index f87c78223..caaec120b 100644
--- a/app/views/friendships/remove_friend.html.erb
+++ b/app/views/friendships/remove_friend.html.erb
@@ -2,7 +2,7 @@
   <h1><%= t ".heading", :user => @friend.display_name %></h1>
 <% end %>
 
-<%= form_tag do %>
+<%= form_tag(nil, :class => "standard-form") do %>
   <% if params[:referer] -%>
   <%= hidden_field_tag("referer", params[:referer]) %>
   <% end -%>
diff --git a/app/views/issues/_comments.html.erb b/app/views/issues/_comments.html.erb
index 54932cc56..a04022304 100644
--- a/app/views/issues/_comments.html.erb
+++ b/app/views/issues/_comments.html.erb
@@ -14,7 +14,7 @@
   <% end %>
 </div>
 <br />
-<div class="comment">
+<div class="comment standard-form">
   <%= form_for @new_comment, :url => issue_comments_path(@issue) do |f| %>
   <%= richtext_area :issue_comment, :body, :cols => 10, :rows => 8, :required => true %>
   <%= label_tag :reassign, t(".reassign_param") %> <%= check_box_tag :reassign, true %>
diff --git a/app/views/issues/index.html.erb b/app/views/issues/index.html.erb
index 1f3ca3118..1500a3647 100644
--- a/app/views/issues/index.html.erb
+++ b/app/views/issues/index.html.erb
@@ -2,7 +2,7 @@
   <h1><%= t ".title" %></h1>
 <% end %>
 
-<%= form_tag(issues_path, :method => :get) do %>
+<%= form_tag(issues_path, :method => :get, :class => "standard-form") do %>
 <p><%= t ".search_guidance" %></p>
 <%= select_tag :status, options_for_select(Issue.aasm.states.map(&:name).map { |state| [t(".states.#{state}"), state] }, params[:status]), :include_blank => t(".select_status"), :data => { :behavior => "category_dropdown" } %>
 <%= select_tag :issue_type, options_for_select(@issue_types, params[:issue_type]), :include_blank => t(".select_type"), :data => { :behavior => "category_dropdown" } %>
diff --git a/app/views/layouts/_search.html.erb b/app/views/layouts/_search.html.erb
index bb9aa05b9..0ffa4ef50 100644
--- a/app/views/layouts/_search.html.erb
+++ b/app/views/layouts/_search.html.erb
@@ -1,4 +1,4 @@
-<div class="search_forms">
+<div class="search_forms standard-form">
   <form method="GET" action="<%= search_path %>" class="search_form">
     <%= link_to image_tag("directions.png", :class => "button"), directions_path, :class => "button switch_link", :title => t("site.search.get_directions_title") %>
     <%= submit_tag t("site.search.submit_text"), :class => "float", :data => { :disable_with => false } %>
diff --git a/app/views/messages/_message_summary.html.erb b/app/views/messages/_message_summary.html.erb
index 3b732f7be..1d9630f71 100644
--- a/app/views/messages/_message_summary.html.erb
+++ b/app/views/messages/_message_summary.html.erb
@@ -1,4 +1,4 @@
-<tr id="inbox-<%= message_summary.id %>" class="inbox-row<%= "-unread" unless message_summary.message_read? %>">
+<tr id="inbox-<%= message_summary.id %>" class="standard-form inbox-row<%= "-unread" unless message_summary.message_read? %>">
   <td class="inbox-sender"><%= link_to message_summary.sender.display_name, user_path(message_summary.sender) %></td>
   <td class="inbox-subject"><%= link_to message_summary.title, message_path(message_summary) %></td>
   <td class="inbox-sent"><%= l message_summary.sent_on, :format => :friendly %></td>
diff --git a/app/views/oauth_clients/edit.html.erb b/app/views/oauth_clients/edit.html.erb
index d696baae3..551bb68fc 100644
--- a/app/views/oauth_clients/edit.html.erb
+++ b/app/views/oauth_clients/edit.html.erb
@@ -2,7 +2,7 @@
   <h1><%= t ".title" %></h1>
 <% end %>
 
-<%= form_for @client_application, :url => oauth_client_path(@client_application.user.display_name, @client_application), :html => { :method => :put } do |f| %>
+<%= form_for @client_application, :url => oauth_client_path(@client_application.user.display_name, @client_application), :html => { :method => :put, :class => "standard-form" } do |f| %>
   <%= render :partial => "form", :locals => { :f => f } %>
   <%= f.submit %>
 <% end %>
diff --git a/app/views/oauth_clients/index.html.erb b/app/views/oauth_clients/index.html.erb
index 113374e3f..f35537953 100644
--- a/app/views/oauth_clients/index.html.erb
+++ b/app/views/oauth_clients/index.html.erb
@@ -18,7 +18,7 @@
       <td><%= link_to token.client_application.name, token.client_application.url %></td>
       <td><%= token.authorized_at %></td>
       <td>
-        <%= form_tag :controller => "oauth", :action => "revoke" do %>
+        <%= form_tag({ :controller => "oauth", :action => "revoke" }, { :class => "standard-form" }) do %>
           <%= hidden_field_tag "token", token.token %>
           <%= submit_tag t(".revoke") %>
         <% end %>
diff --git a/app/views/oauth_clients/show.html.erb b/app/views/oauth_clients/show.html.erb
index 623b30e16..19c1d9f6e 100644
--- a/app/views/oauth_clients/show.html.erb
+++ b/app/views/oauth_clients/show.html.erb
@@ -27,7 +27,7 @@
 
   <p><%= t ".support_notice" %></p>
 </div>
-<div class="buttons">
+<div class="buttons standard-form">
   <%= button_to t(".edit"), edit_oauth_client_path(@client_application.user.display_name, @client_application), :method => :get, :class => "oauth-edit" %>
   <%= button_to t(".delete"), oauth_client_path(@client_application.user.display_name, @client_application), :method => :delete, :data => { :confirm => t(".confirm") }, :class => "oauth-delete deemphasize" %>
 </div>
diff --git a/app/views/redactions/edit.html.erb b/app/views/redactions/edit.html.erb
index cef618859..aff2af919 100644
--- a/app/views/redactions/edit.html.erb
+++ b/app/views/redactions/edit.html.erb
@@ -4,7 +4,7 @@
   <h1><%= t ".heading" %></h1>
 <% end %>
 
-<%= form_for(@redaction) do |f| %>
+<%= form_for(@redaction, :html => { :class => "standard-form" }) do |f| %>
   <%= f.error_messages %>
 
   <p>
diff --git a/app/views/redactions/new.html.erb b/app/views/redactions/new.html.erb
index a76d8ec48..02e729b35 100644
--- a/app/views/redactions/new.html.erb
+++ b/app/views/redactions/new.html.erb
@@ -3,7 +3,7 @@
   <h1><%= t ".heading" %></h1>
 <% end %>
 
-<%= form_for(@redaction) do |f| %>
+<%= form_for(@redaction, :html => { :class => "standard-form" }) do |f| %>
   <%= f.error_messages %>
 
   <p>
diff --git a/app/views/site/export.html.erb b/app/views/site/export.html.erb
index f1eed33cf..817992fa5 100644
--- a/app/views/site/export.html.erb
+++ b/app/views/site/export.html.erb
@@ -5,7 +5,7 @@
   <%= t ".title" %>
 </h2>
 
-<%= form_tag({ :controller => "export", :action => "finish" }, { :class => "export_form" }) do %>
+<%= form_tag({ :controller => "export", :action => "finish" }, { :class => "export_form standard-form" }) do %>
   <%= hidden_field_tag "format", "osm" %>
 
   <div class='export_area_inputs'>
diff --git a/app/views/traces/edit.html.erb b/app/views/traces/edit.html.erb
index e3771bac0..b5600d059 100644
--- a/app/views/traces/edit.html.erb
+++ b/app/views/traces/edit.html.erb
@@ -47,9 +47,6 @@
       <%= f.select :visibility, [[t("traces.visibility.private"), "private"], [t("traces.visibility.public"), "public"], [t("traces.visibility.trackable"), "trackable"], [t("traces.visibility.identifiable"), "identifiable"]] %> (<a href="<%= t ".visibility_help_url" %>"><%= t ".visibility_help" %></a>)
     </div>
   </fieldset>
-
+  <%= f.submit %>
 </div>
-
-<%= f.submit %>
-
 <% end %>
diff --git a/app/views/traces/show.html.erb b/app/views/traces/show.html.erb
index f7517c802..fe1d670c3 100644
--- a/app/views/traces/show.html.erb
+++ b/app/views/traces/show.html.erb
@@ -55,7 +55,7 @@
 <br /><br />
 
 <% if current_user && (current_user==@trace.user || current_user.administrator? || current_user.moderator?) %>
-  <div class="buttons">
+  <div class="buttons standard-form">
     <% if current_user == @trace.user %>
       <%= link_to t(".edit_trace"), edit_trace_path(@trace), :class => "button" %>
     <% end %>
diff --git a/app/views/user_blocks/edit.html.erb b/app/views/user_blocks/edit.html.erb
index 7b2471eab..6d06eeb87 100644
--- a/app/views/user_blocks/edit.html.erb
+++ b/app/views/user_blocks/edit.html.erb
@@ -9,7 +9,7 @@
   </ul>
 <% end %>
 
-<%= form_for(@user_block) do |f| %>
+<%= form_for(@user_block, :html => { :class => "standard-form" }) do |f| %>
   <%= f.error_messages %>
 
   <p>
diff --git a/app/views/user_blocks/new.html.erb b/app/views/user_blocks/new.html.erb
index c2832e348..1ebba0f04 100644
--- a/app/views/user_blocks/new.html.erb
+++ b/app/views/user_blocks/new.html.erb
@@ -4,7 +4,7 @@
             :name => link_to(@user.display_name,
                              user_path(@user))) %></h1>
 <% end %>
-<%= form_for(@user_block) do |f| %>
+<%= form_for(@user_block, :html => { :class => "standard-form" }) do |f| %>
   <%= f.error_messages %>
 
   <p>
diff --git a/app/views/user_blocks/revoke.html.erb b/app/views/user_blocks/revoke.html.erb
index ce14bf0d2..0b6e21788 100644
--- a/app/views/user_blocks/revoke.html.erb
+++ b/app/views/user_blocks/revoke.html.erb
@@ -15,7 +15,7 @@
   <%= t(".time_future", :time => distance_of_time_in_words_to_now(@user_block.ends_at)) %>
 </b></p>
 
-<%= form_for :revoke, :url => { :action => "revoke" } do |f| %>
+<%= form_for :revoke, :url => { :action => "revoke" }, :html => { :class => "standard-form" } do |f| %>
   <%= f.error_messages %>
 <p>
   <%= check_box_tag "confirm", "yes" %>
diff --git a/app/views/users/confirm.html.erb b/app/views/users/confirm.html.erb
index 3a2e12578..cae713888 100644
--- a/app/views/users/confirm.html.erb
+++ b/app/views/users/confirm.html.erb
@@ -12,7 +12,7 @@
 
   <p><%= t ".press confirm button" %></p>
 
-  <%= form_tag({}, { :id => "confirm" }) do %>
+  <%= form_tag({}, { :id => "confirm", :class => "standard-form" }) do %>
     <input type="display_name" name="confirm_string" value="<%= params[:display_name] %>">
     <input type="hidden" name="confirm_string" value="<%= params[:confirm_string] %>">
     <input type="submit" name="confirm_action" value="<%= t ".button" %>">
diff --git a/app/views/users/confirm_email.html.erb b/app/views/users/confirm_email.html.erb
index 65dca50aa..ba2726d42 100644
--- a/app/views/users/confirm_email.html.erb
+++ b/app/views/users/confirm_email.html.erb
@@ -10,7 +10,7 @@
 
 <p><%= t ".press confirm button" %></p>
 
-<%= form_tag({}, { :id => "confirm" }) do %>
+<%= form_tag({}, { :id => "confirm", :class => "standard-form" }) do %>
   <input type="hidden" name="confirm_string" value="<%= params[:confirm_string] %>">
   <input type="submit" name="confirm_action" value="<%= t ".button" %>">
 <% end %>
diff --git a/app/views/users/logout.html.erb b/app/views/users/logout.html.erb
index 5d8e2de49..41493e824 100644
--- a/app/views/users/logout.html.erb
+++ b/app/views/users/logout.html.erb
@@ -2,7 +2,7 @@
   <h1><%= t ".heading" %></h1>
 <% end %>
 
-<%= form_tag :action => "logout" do %>
+<%= form_tag({ :action => "logout" }, { :class => "standard-form" }) do %>
   <%= hidden_field_tag("referer", h(params[:referer])) %>
   <%= submit_tag t(".logout_button") %>
 <% end %>