From: Tom Hughes <tom@compton.nu>
Date: Wed, 5 Aug 2020 20:50:08 +0000 (+0100)
Subject: Merge remote-tracking branch 'upstream/pull/2667'
X-Git-Tag: live~2524
X-Git-Url: https://git.openstreetmap.org./rails.git/commitdiff_plain/c24c2e481cc6d27e76274ed4e32668a4690a7788?hp=2d73dc22a2c167b9ac1140e68129af97560b6646

Merge remote-tracking branch 'upstream/pull/2667'
---

diff --git a/Gemfile b/Gemfile
index 540f61634..cfe734b94 100644
--- a/Gemfile
+++ b/Gemfile
@@ -44,6 +44,7 @@ gem "actionpack-page_caching", ">= 1.2.0"
 gem "active_record_union"
 gem "activerecord-import"
 gem "bootstrap", "~> 4.5.0"
+gem "bootstrap_form", "~> 4.0"
 gem "cancancan"
 gem "composite_primary_keys", "~> 12.0.0"
 gem "config"
diff --git a/Gemfile.lock b/Gemfile.lock
index 379bab307..3b3ffaf06 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -110,6 +110,9 @@ GEM
       autoprefixer-rails (>= 9.1.0)
       popper_js (>= 1.14.3, < 2)
       sassc-rails (>= 2.0.0)
+    bootstrap_form (4.5.0)
+      actionpack (>= 5.2)
+      activemodel (>= 5.2)
     brakeman (4.9.0)
     browser (4.2.0)
     builder (3.2.4)
@@ -484,6 +487,7 @@ DEPENDENCIES
   binding_of_caller
   bootsnap (>= 1.4.2)
   bootstrap (~> 4.5.0)
+  bootstrap_form (~> 4.0)
   brakeman
   browser
   bzip2-ffi
diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
index 36b560fde..205ad8161 100644
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@@ -16,6 +16,8 @@
 //= require piwik
 //= require richtext
 //= require querystring
+//= require bs-custom-file-input
+//= require bs-custom-file-input-init
 
 /*
  * Called as the user scrolls/zooms around to manipulate hrefs of the
diff --git a/app/assets/javascripts/bs-custom-file-input-init.js b/app/assets/javascripts/bs-custom-file-input-init.js
new file mode 100644
index 000000000..3afdac291
--- /dev/null
+++ b/app/assets/javascripts/bs-custom-file-input-init.js
@@ -0,0 +1,5 @@
+/* global bsCustomFileInput */
+
+$(document).ready(function () {
+  bsCustomFileInput.init();
+});
diff --git a/app/assets/javascripts/leaflet.layers.js b/app/assets/javascripts/leaflet.layers.js
index ddcce195d..f375dc08f 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", "text-muted")
         .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 50bcf9be7..95e0c292a 100644
--- a/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@ -1,5 +1,6 @@
 @import "parameters";
 @import "bootstrap";
+@import "rails_bootstrap_forms";
 
 /* Styles common to large and small screens */
 
@@ -717,6 +718,14 @@ body.compact-nav {
   }
 }
 
+/* Temporary label size override until we remove site-wide font customisation */
+
+form {
+  label {
+    font-size: 16px;
+  }
+}
+
 /* Rules for the search and direction forms */
 
 header .search_forms,
@@ -724,118 +733,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 {
@@ -1257,30 +1154,6 @@ tr.turn:hover {
   }
 }
 
-/* Rules for the new trace form */
-
-#new_trace {
-  input[type=text] {
-    width: 50%;
-    width: calc(100% - 150px);
-    max-width: 500px;
-  }
-}
-
-/* Rules for the edit trace form */
-
-.edit_trace {
-  .standard-form-row p {
-    margin-bottom: 0px;
-  }
-
-  input[type=text] {
-    width: 50%;
-    width: calc(100% - 150px);
-    max-width: 500px;
-  }
-}
-
 /* Rules for the user profile page */
 
 #userinformation {
@@ -1712,44 +1585,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 */
@@ -1829,54 +1863,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/assets/stylesheets/parameters.scss b/app/assets/stylesheets/parameters.scss
index 90fbd74b7..5d0260410 100644
--- a/app/assets/stylesheets/parameters.scss
+++ b/app/assets/stylesheets/parameters.scss
@@ -8,7 +8,6 @@ $lightblue: #B8C5F0;
 $green: #7ebc6f;
 $vibrant-green: #76c551;
 $grey: #CCC;
-$red: red;
 $lightgrey: #EEE;
 $darkgrey: #888;
 $hovercolor: 20%;
diff --git a/app/views/browse/changeset.html.erb b/app/views/browse/changeset.html.erb
index 5a50aa91f..c15e1f8c6 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 51633ffca..4e4f571cc 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="alert alert-info"><%= 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 eefd62b0a..1be7d9041 100644
--- a/app/views/browse/note.html.erb
+++ b/app/views/browse/note.html.erb
@@ -47,7 +47,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? -%>
@@ -59,7 +59,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 2eb23f755..b6d91ca31 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..13829727c 100644
--- a/app/views/traces/edit.html.erb
+++ b/app/views/traces/edit.html.erb
@@ -4,52 +4,16 @@
 
 <img src="<%= url_for :controller => "traces", :action => "picture", :id => @trace.id, :display_name => @trace.user.display_name %>">
 
-<%= form_for @trace do |f| %>
-
-<div id='edit-trace-form' class='standard-form'>
-  <fieldset>
-    <div class='standard-form-row'>
-      <label class='standard-label'><%= t ".filename" %></label>
-      <p class='deemphasize'><%= @trace.name %> (<%= link_to t(".download"), trace_data_path(@trace) %>)</p>
-    </div>
-    <div class='standard-form-row'>
-      <label class='standard-label'><%= t ".uploaded_at" %></label>
-      <p class='deemphasize'><%= l @trace.timestamp, :format => :friendly %></p>
-    </div>
-  <% if @trace.inserted? %>
-    <div class='standard-form-row'>
-      <label class='standard-label'><%= t ".points" %></label>
-      <p class='deemphasize'><%= @trace.size.to_s.gsub(/(\d)(?=(\d{3})+$)/, '\1,') %></p>
-    </div>
-    <div class='standard-form-row'>
-      <label class='standard-label'><%= t ".start_coord" %></label>
-    </div>
-    <div class="geo">
-      <span class="latitude"><%= @trace.latitude %></span>;
-      <span class="longitude"><%= @trace.longitude %></span>
-    </div>
-    (<%= link_to t(".map"), :controller => "site", :action => "index", :anchor => "map=14/#{@trace.latitude}/#{@trace.longitude}" %> / <%= link_to t(".edit"), :controller => "site", :action => "edit", :gpx => @trace.id, :anchor => "map=14/#{@trace.latitude}/#{@trace.longitude}" %>)
-  <% end %>
-    <div class='standard-form-row'>
-      <label class='standard-label'><%= t ".owner" %></label>
-      <p class='deemphasize'><%= link_to @trace.user.display_name, user_path(@trace.user) %></p>
-    </div>
-    <div class='standard-form-row'>
-      <label class='standard-label'><%= t ".description" %></label>
-      <%= f.text_field :description %>
-    </div>
-    <div class='standard-form-row'>
-      <label class='standard-label'><%= t ".tags" %></label>
-      <%= f.text_field :tagstring %> (<%= t ".tags_help" %>)
-    </div>
-    <div class='standard-form-row'>
-      <label class='standard-label'><%= t ".visibility" %></label>
-      <%= 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>
-
-</div>
-
-<%= f.submit %>
-
+<%= bootstrap_form_for @trace do |f| %>
+  <%= f.text_field :name, :disabled => true %>
+  <%= f.text_field :description %>
+  <%= f.text_field :tagstring %>
+  <%= f.select :visibility,
+               [[t("traces.visibility.private"), "private"],
+                [t("traces.visibility.public"), "public"],
+                [t("traces.visibility.trackable"), "trackable"],
+                [t("traces.visibility.identifiable"), "identifiable"]],
+               :help => link_to(t(".visibility_help"), t(".visibility_help_url")) %>
+  <%= f.primary %>
+  <%= link_to t(".cancel"), show_trace_path(@trace.user, @trace), :class => "btn btn-link" %>
 <% end %>
diff --git a/app/views/traces/new.html.erb b/app/views/traces/new.html.erb
index d2ccebb4c..b7951cb32 100644
--- a/app/views/traces/new.html.erb
+++ b/app/views/traces/new.html.erb
@@ -2,32 +2,16 @@
   <h1><%= t ".upload_trace" %></h1>
 <% end %>
 
-<%= error_messages_for "trace" %>
-
-<%= form_for @trace, :url => { :action => "create" }, :html => { :multipart => true } do |f| %>
-  <div class="standard-form">
-    <fieldset>
-      <div class='standard-form-row'>
-        <label for="trace_gpx_file" class="standard-label"><%= t ".upload_gpx" %></label>
-        <%= f.file_field :gpx_file %>
-      </div>
-      <div class='standard-form-row'>
-        <label class="standard-label"><%= t ".description" %></label>
-        <%= f.text_field :description %>
-      </div>
-      <div class='standard-form-row'>
-        <label class="standard-label"><%= t ".tags" %></label>
-        <%= f.text_field :tagstring %>
-        <span class="form-help deemphasize">(<%= t ".tags_help" %>)</span>
-      </div>
-      <div class='standard-form-row'>
-        <label class="standard-label"><%= t ".visibility" %></label>
-        <%= f.select :visibility, [[t("traces.visibility.private"), "private"], [t("traces.visibility.public"), "public"], [t("traces.visibility.trackable"), "trackable"], [t("traces.visibility.identifiable"), "identifiable"]] %>
-        <span class="form-help deemphasize">(<a href="<%= t ".visibility_help_url" %>"><%= t ".visibility_help" %></a>)</span>
-      </div>
-    </fieldset>
-
-    <%= f.submit %>
-    <span class="form-help deemphasize"><a href="<%= t ".help_url" %>"><%= t ".help" %></a></span>
-  </div>
+<%= bootstrap_form_for @trace, :url => { :action => "create" }, :html => { :multipart => true } do |f| %>
+  <%= f.file_field :gpx_file, :placeholder => t("helpers.file.prompt") %>
+  <%= f.text_field :description %>
+  <%= f.text_field :tagstring %>
+  <%= f.select :visibility,
+               [[t("traces.visibility.private"), "private"],
+                [t("traces.visibility.public"), "public"],
+                [t("traces.visibility.trackable"), "trackable"],
+                [t("traces.visibility.identifiable"), "identifiable"]],
+               :help => link_to(t(".visibility_help"), t(".visibility_help_url")) %>
+  <%= f.primary %>
+  <%= link_to t(".help"), t(".help_url"), :class => "btn btn-link" %>
 <% end %>
diff --git a/app/views/traces/show.html.erb b/app/views/traces/show.html.erb
index f7517c802..d82c51881 100644
--- a/app/views/traces/show.html.erb
+++ b/app/views/traces/show.html.erb
@@ -55,10 +55,10 @@
 <br /><br />
 
 <% if current_user && (current_user==@trace.user || current_user.administrator? || current_user.moderator?) %>
-  <div class="buttons">
+  <div>
     <% if current_user == @trace.user %>
-      <%= link_to t(".edit_trace"), edit_trace_path(@trace), :class => "button" %>
+      <%= link_to t(".edit_trace"), edit_trace_path(@trace), :class => "btn btn-outline-primary" %>
     <% end %>
-    <%= button_to t(".delete_trace"), { :controller => "traces", :action => "destroy", :id => @trace.id }, { :method => :delete, :data => { :confirm => t(".confirm_delete") } } %>
+    <%= link_to t(".delete_trace"), { :controller => "traces", :action => "destroy", :id => @trace.id }, { :method => :delete, :class => "btn btn-outline-danger", :data => { :confirm => t(".confirm_delete") } } %>
   </div>
 <% 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 a3902c0a9..4ea5ac5c5 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 %>
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 30e8f6e98..185129e83 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -6,6 +6,8 @@ en:
       friendly: "%e %B %Y at %H:%M"
       blog: "%e %B %Y"
   helpers:
+    file:
+      prompt: Choose file
     submit:
       diary_comment:
         create: Save
@@ -93,6 +95,10 @@ en:
         longitude: "Longitude"
         public: "Public"
         description: "Description"
+        name: Filename
+        gpx_file: Upload GPX File
+        visibility: Visibility
+        tagstring: Tags
       message:
         sender: "Sender"
         title: "Subject"
@@ -105,6 +111,9 @@ en:
         description: "Description"
         languages: "Languages"
         pass_crypt: "Password"
+    help:
+      trace:
+        tagstring: comma delimited
   datetime:
     distance_in_words_ago:
       about_x_hours:
@@ -1823,11 +1832,6 @@ en:
       identifiable: "Identifiable (shown in trace list and as identifiable, ordered points with timestamps)"
     new:
       upload_trace: "Upload GPS Trace"
-      upload_gpx: "Upload GPX File:"
-      description: "Description:"
-      tags: "Tags:"
-      tags_help: "comma delimited"
-      visibility: "Visibility:"
       visibility_help: "what does this mean?"
       visibility_help_url: "https://wiki.openstreetmap.org/wiki/Visibility_of_GPS_traces"
       help: "Help"
@@ -1840,20 +1844,9 @@ en:
         one: "You have %{count} trace waiting for upload. Please consider waiting for these to finish before uploading any more, so as not to block the queue for other users."
         other: "You have %{count} traces waiting for upload. Please consider waiting for these to finish before uploading any more, so as not to block the queue for other users."
     edit:
+      cancel: Cancel
       title: "Editing trace %{name}"
       heading: "Editing trace %{name}"
-      filename: "Filename:"
-      download: "download"
-      uploaded_at: "Uploaded:"
-      points: "Points:"
-      start_coord: "Start coordinate:"
-      map: "map"
-      edit: "edit"
-      owner: "Owner:"
-      description: "Description:"
-      tags: "Tags:"
-      tags_help: "comma delimited"
-      visibility: "Visibility:"
       visibility_help: "what does this mean?"
       visibility_help_url: "https://wiki.openstreetmap.org/wiki/Visibility_of_GPS_traces"
     update:
diff --git a/package.json b/package.json
index 82bc5ead5..b1bf411d9 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,9 @@
 {
   "name": "openstreetmap",
   "private": true,
-  "dependencies": {},
+  "dependencies": {
+    "bs-custom-file-input": "^1.3.4"
+  },
   "devDependencies": {
     "eslint": "^7.3.1"
   }
diff --git a/test/controllers/traces_controller_test.rb b/test/controllers/traces_controller_test.rb
index fd91fa617..364142dd9 100644
--- a/test/controllers/traces_controller_test.rb
+++ b/test/controllers/traces_controller_test.rb
@@ -616,7 +616,7 @@ class TracesControllerTest < ActionDispatch::IntegrationTest
     session_for(user)
     post traces_path, :params => { :trace => { :gpx_file => file, :description => "", :tagstring => "new,trace", :visibility => "trackable" } }
     assert_template :new
-    assert_match "Description is too short (minimum is 1 character)", response.body
+    assert_match "is too short (minimum is 1 character)", response.body
   end
 
   # Test fetching the edit page for a trace using GET
diff --git a/yarn.lock b/yarn.lock
index 86db5ca5b..337eef0ec 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -98,6 +98,11 @@ brace-expansion@^1.1.7:
     balanced-match "^1.0.0"
     concat-map "0.0.1"
 
+bs-custom-file-input@^1.3.4:
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/bs-custom-file-input/-/bs-custom-file-input-1.3.4.tgz#c275cb8d4f1c02ba026324292509fa9a747dbda8"
+  integrity sha512-NBsQzTnef3OW1MvdKBbMHAYHssCd613MSeJV7z2McXznWtVMnJCy7Ckyc+PwxV6Pk16cu6YBcYWh/ZE0XWNKCA==
+
 callsites@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73"