From: Tom Hughes <tom@compton.nu>
Date: Thu, 21 Jul 2022 18:20:26 +0000 (+0100)
Subject: Merge remote-tracking branch 'upstream/pull/3612'
X-Git-Tag: live~1197
X-Git-Url: https://git.openstreetmap.org/rails.git/commitdiff_plain/3871d61be43857436d1eaefe9e84841e8a7d0f4f?hp=2dd7a5edb2572bcd952b4d1ebd9baac32db9dfa5

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

diff --git a/Gemfile b/Gemfile
index eee7dc69d..9f4f745ff 100644
--- a/Gemfile
+++ b/Gemfile
@@ -40,8 +40,8 @@ gem "argon2"
 gem "actionpack-page_caching", ">= 1.2.0"
 gem "activerecord-import"
 gem "active_record_union"
-gem "bootstrap", "~> 4.5.0"
-gem "bootstrap_form", "~> 4.0"
+gem "bootstrap", "~> 5.1.0"
+gem "bootstrap_form", "~> 5.0"
 gem "cancancan"
 gem "composite_primary_keys", "~> 14.0.0"
 gem "config"
diff --git a/Gemfile.lock b/Gemfile.lock
index b167a4053..8de786156 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -117,11 +117,11 @@ GEM
       debug_inspector (>= 0.0.1)
     bootsnap (1.12.0)
       msgpack (~> 1.2)
-    bootstrap (4.5.3)
+    bootstrap (5.1.3)
       autoprefixer-rails (>= 9.1.0)
-      popper_js (>= 1.14.3, < 2)
+      popper_js (>= 2.9.3, < 3)
       sassc-rails (>= 2.0.0)
-    bootstrap_form (4.5.0)
+    bootstrap_form (5.1.0)
       actionpack (>= 5.2)
       activemodel (>= 5.2)
     brakeman (5.2.3)
@@ -356,7 +356,7 @@ GEM
     parser (3.1.2.0)
       ast (~> 2.4.1)
     pg (1.4.1)
-    popper_js (1.16.0)
+    popper_js (2.9.3)
     progress (3.6.0)
     public_suffix (4.0.7)
     puma (5.6.4)
@@ -521,8 +521,8 @@ DEPENDENCIES
   better_errors
   binding_of_caller
   bootsnap (>= 1.4.2)
-  bootstrap (~> 4.5.0)
-  bootstrap_form (~> 4.0)
+  bootstrap (~> 5.1.0)
+  bootstrap_form (~> 5.0)
   brakeman
   browser
   bzip2-ffi
diff --git a/app/assets/javascripts/leaflet.share.js b/app/assets/javascripts/leaflet.share.js
index 79cb95973..db9839390 100644
--- a/app/assets/javascripts/leaflet.share.js
+++ b/app/assets/javascripts/leaflet.share.js
@@ -47,7 +47,7 @@ L.OSM.share = function (options) {
       .appendTo($linkSection);
 
     $("<div>")
-      .attr("class", "form-check form-group")
+      .attr("class", "form-check mb-3")
       .appendTo($form)
       .append(
         $("<label>")
@@ -159,7 +159,7 @@ L.OSM.share = function (options) {
       .appendTo($imageSection);
 
     $("<div>")
-      .attr("class", "form-group form-check")
+      .attr("class", "mb-3 form-check")
       .appendTo($form)
       .append(
         $("<label>")
diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index d63317812..8ab10773b 100644
--- a/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@ -62,17 +62,6 @@ small, aside {
 .icon.note.grey   { /* no-r2 */ background-position: -240px -20px; }
 .icon.query       { /* no-r2 */ background-position: -260px 0; }
 
-/* Rules for links */
-
-a {
-  color: #24d;
-  text-decoration: none;
-  outline: 0;
-  &:hover {
-    text-decoration: underline;
-  }
-}
-
 /* Utility for de-emphasizing content */
 
 .text-muted a {
@@ -202,7 +191,7 @@ nav.secondary {
 
   .login-menu {
     .btn-outline-secondary {
-      @include button-outline-variant($darkgrey);
+      @include button-outline-variant($darkgrey, $white, null, null, $white);
     }
   }
 
@@ -686,6 +675,28 @@ form {
   }
 }
 
+/* Stop bootstrap 5 from floating legends when they don't need to be */
+legend {
+  float: none;
+}
+
+/* Override the text colour for primary and secondary buttons, to match our
+   bootstrap 4 colours. Note this has accessibility issues, which is why
+   bootstrap 5 calculates black as the appropriate colour, and we should
+   reconsider our colours at some point with that in mind. */
+
+.btn-primary {
+  @include button-variant($primary, $primary, $white, null, null, $white, null, null, $white, null, null, $white);
+}
+
+.btn-secondary {
+  @include button-variant($secondary, $secondary, $white, null, null, $white, null, null, $white, null, null, $white);
+}
+
+.btn-outline-secondary {
+  @include button-outline-variant($secondary, $white, null, null, $white);
+}
+
 /* Rules for the search and direction forms */
 
 header .search_forms,
@@ -1436,13 +1447,6 @@ dl.dl-inline {
   }
 }
 
-/* Customise the background colour of striped tables */
-
-.table-striped > tbody > tr:nth-child(2n+1) > td,
-.table-striped > tbody > tr:nth-child(2n+1) > th {
-   background-color: $offwhite;
-}
-
 /* Rules for OpenID logo */
 
 .openid_logo {
diff --git a/app/assets/stylesheets/parameters.scss b/app/assets/stylesheets/parameters.scss
index 6cbbf1a27..4b5daf4d0 100644
--- a/app/assets/stylesheets/parameters.scss
+++ b/app/assets/stylesheets/parameters.scss
@@ -17,3 +17,12 @@ $sidebarWidth: 350px;
 $keyline: 1px solid $lightgrey;
 $list-highlight: #FFFFC0;
 $border: 1px solid $grey;
+
+$link-color: #24d;
+$link-hover-color: #24d;
+$link-decoration: none;
+$link-hover-decoration: underline;
+
+$table-striped-bg: $offwhite;
+
+$enable-negative-margins: true;
diff --git a/app/views/accounts/edit.html.erb b/app/views/accounts/edit.html.erb
index 2017bee0a..7aad944d3 100644
--- a/app/views/accounts/edit.html.erb
+++ b/app/views/accounts/edit.html.erb
@@ -16,17 +16,17 @@
   <%= f.password_field :pass_crypt, :value => "", :autocomplete => "new-password" %>
   <%= f.password_field :pass_crypt_confirmation, :value => "", :autocomplete => "new-password" %>
 
-  <fieldset class="form-group">
-    <label for="user_auth_provider"><%= t(".external auth") %></label>
-    <div class="form-row">
+  <fieldset class="mb-3">
+    <label for="user_auth_provider" class="form-label"><%= t(".external auth") %></label>
+    <div class="row">
       <%= f.select(:auth_provider, Auth.providers, :hide_label => true, :wrapper => { :class => "col-auto mb-0" }) %>
       <%= f.text_field(:auth_uid, :hide_label => true, :wrapper => { :class => "col mb-0" }) %>
     </div>
     <small class="form-text text-muted">(<a href="<%= t ".openid.link" %>" target="_new"><%= t ".openid.link text" %></a>)</small>
   </fieldset>
 
-  <div class="form-group">
-    <label><%= t ".public editing.heading" %></label>
+  <div class="mb-3">
+    <label class="form-label"><%= t ".public editing.heading" %></label>
     <span class="form-text text-muted">
       <% if current_user.data_public? %>
         <%= t ".public editing.enabled" %>
@@ -38,8 +38,8 @@
     </span>
   </div>
 
-  <div class="form-group">
-    <label><%= t ".contributor terms.heading" %></label>
+  <div class="mb-3">
+    <label class="form-label"><%= t ".contributor terms.heading" %></label>
     <span class="form-text text-muted">
       <% if current_user.terms_agreed? %>
         <%= t ".contributor terms.agreed" %>
diff --git a/app/views/browse/changeset.html.erb b/app/views/browse/changeset.html.erb
index ca27862c8..0861ed30f 100644
--- a/app/views/browse/changeset.html.erb
+++ b/app/views/browse/changeset.html.erb
@@ -75,7 +75,7 @@
   <% if current_user %>
     <% unless @changeset.open? %>
       <form action="#" class="mb-3">
-        <div class="form-group">
+        <div class="mb-3">
           <textarea class="form-control" name="text" cols="40" rows="5"></textarea>
         </div>
         <div>
diff --git a/app/views/browse/new_note.html.erb b/app/views/browse/new_note.html.erb
index 1db7609b3..657ad9039 100644
--- a/app/views/browse/new_note.html.erb
+++ b/app/views/browse/new_note.html.erb
@@ -7,7 +7,7 @@
   <form action="#">
     <input type="hidden" name="lon" autocomplete="off">
     <input type="hidden" name="lat" autocomplete="off">
-    <div class="form-group">
+    <div class="mb-3">
       <textarea class="form-control" name="text" cols="40" rows="10" maxlength="2000" placeholder="<%= t("javascripts.notes.new.advice") %>"></textarea>
     </div>
     <div class="buttons clearfix">
diff --git a/app/views/browse/note.html.erb b/app/views/browse/note.html.erb
index 97787b178..af859651e 100644
--- a/app/views/browse/note.html.erb
+++ b/app/views/browse/note.html.erb
@@ -48,7 +48,7 @@
   <% if @note.status == "open" %>
     <% if current_user -%>
       <form action="#">
-        <div class="form-group">
+        <div class="mb-3">
           <textarea class="form-control" name="text" cols="40" rows="5" maxlength="2000"></textarea>
         </div>
         <div class="btn-wrapper">
diff --git a/app/views/dashboards/_popup.html.erb b/app/views/dashboards/_popup.html.erb
index ef86f042d..c4f8b627a 100644
--- a/app/views/dashboards/_popup.html.erb
+++ b/app/views/dashboards/_popup.html.erb
@@ -1,4 +1,4 @@
-<div class="user_popup row no-gutters mx-1">
+<div class="user_popup row g-0 mx-1">
   <div class="col-auto mx-1">
     <%= user_thumbnail popup %>
   </div>
diff --git a/app/views/diary_entries/_form.html.erb b/app/views/diary_entries/_form.html.erb
index f72abc19e..7c6c12e6a 100644
--- a/app/views/diary_entries/_form.html.erb
+++ b/app/views/diary_entries/_form.html.erb
@@ -7,7 +7,7 @@
 
   <%= tag.div "", :id => "map", :class => "border border-grey rounded", :data => { :lat => @lat, :lon => @lon, :zoom => @zoom } %>
 
-  <div class="form-row">
+  <div class="row">
     <%= f.text_field :latitude, :wrapper_class => "col-sm-4", :id => "latitude" %>
     <%= f.text_field :longitude, :wrapper_class => "col-sm-4", :id => "longitude" %>
     <div class="col-sm-4">
diff --git a/app/views/issues/index.html.erb b/app/views/issues/index.html.erb
index 4f9d3dbd6..0b9336538 100644
--- a/app/views/issues/index.html.erb
+++ b/app/views/issues/index.html.erb
@@ -5,36 +5,36 @@
 <p><%= t ".search_guidance" %></p>
 
 <%= form_tag(issues_path, :method => :get) do %>
-  <div class="form-row">
-    <div class="form-group col-md-auto">
+  <div class="row gx-1">
+    <div class="mb-3 col-md-auto">
       <%= 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" },
-                     :class => "form-control custom-select" %>
+                     :class => "form-select" %>
     </div>
-    <div class="form-group col-md-auto">
+    <div class="mb-3 col-md-auto">
       <%= select_tag :issue_type,
                      options_for_select(@issue_types, params[:issue_type]),
                      :include_blank => t(".select_type"),
                      :data => { :behavior => "category_dropdown" },
-                     :class => "form-control custom-select" %>
+                     :class => "form-select" %>
     </div>
-    <div class="form-group col-md">
+    <div class="mb-3 col-md">
       <%= text_field_tag :search_by_user,
                          params[:search_by_user],
                          :placeholder => t(".reported_user"),
                          :autocomplete => "on",
                          :class => "form-control" %>
     </div>
-    <div class="form-group col-md-auto">
+    <div class="mb-3 col-md-auto">
       <%= select_tag :last_updated_by,
                      options_for_select(@users.all.collect { |f| [f.display_name, f.id] } << [t(".not_updated"), "nil"], params[:last_updated_by]),
                      :include_blank => t(".select_last_updated_by"),
                      :data => { :behavior => "category_dropdown" },
-                     :class => "form-control custom-select" %>
+                     :class => "form-select" %>
     </div>
-    <div class="form-group col-md-auto">
+    <div class="mb-3 col-md-auto">
       <%= submit_tag t(".search"), :name => nil, :class => "btn btn-primary" %>
     </div>
   </div>
diff --git a/app/views/layouts/_header.html.erb b/app/views/layouts/_header.html.erb
index 1c1ae0ebe..27314cfc7 100644
--- a/app/views/layouts/_header.html.erb
+++ b/app/views/layouts/_header.html.erb
@@ -18,7 +18,7 @@
                     :class => "btn btn-outline-primary geolink editlink",
                     :id => "editanchor",
                     :data => { :editor => preferred_editor } %>
-        <a class='btn btn-outline-primary dropdown-toggle dropdown-toggle-split' data-toggle='dropdown' href='#'></a>
+        <a class='btn btn-outline-primary dropdown-toggle dropdown-toggle-split' data-bs-toggle='dropdown' href='#'></a>
         <ul class='dropdown-menu'>
           <% Editors::RECOMMENDED_EDITORS.each do |editor| %>
             <li>
@@ -60,7 +60,7 @@
         <%= link_to t("layouts.about"), about_path, :class => "nav-link" %>
       </li>
       <li id="compact-secondary-nav" class="dropdown nav-item">
-        <a class="dropdown-toggle nav-link" data-toggle="dropdown" href="#"><%= t "layouts.more" %></a>
+        <a class="dropdown-toggle nav-link" data-bs-toggle="dropdown" href="#"><%= t "layouts.more" %></a>
         <ul class="dropdown-menu">
           <% if Settings.status != "database_offline" && can?(:index, Issue) %>
             <li class="<%= current_page_class(issues_path) %>">
@@ -80,8 +80,8 @@
     </ul>
     <% if current_user && current_user.id %>
       <div class='d-inline-flex dropdown user-menu logged-in clearfix'>
-        <a class='dropdown-toggle btn btn-outline-secondary pl-2 py-1 flex-grow-1' data-toggle='dropdown' href="#">
-          <%= user_thumbnail_tiny(current_user, :width => 25, :height => 25, :class => "user_thumbnail_tiny rounded-sm") %>
+        <a class='dropdown-toggle btn btn-outline-secondary px-2 py-1 flex-grow-1' data-bs-toggle='dropdown' href="#">
+          <%= user_thumbnail_tiny(current_user, :width => 25, :height => 25, :class => "user_thumbnail_tiny rounded-1") %>
           <%= render :partial => "layouts/inbox" %>
           <span class="user-button">
             <span class='username'>
@@ -89,7 +89,7 @@
             </span>
           </span>
         </a>
-        <div class='dropdown-menu dropdown-menu-right'>
+        <div class='dropdown-menu dropdown-menu-end'>
           <%= link_to t("users.show.my_dashboard"), dashboard_path, :class => "dropdown-item" %>
           <%= link_to inbox_messages_path, :class => "dropdown-item" do %>
             <%= t("users.show.my messages") %>
diff --git a/app/views/layouts/_search.html.erb b/app/views/layouts/_search.html.erb
index 57b7b7638..c2501b95b 100644
--- a/app/views/layouts/_search.html.erb
+++ b/app/views/layouts/_search.html.erb
@@ -1,6 +1,6 @@
 <div class="search_forms">
   <form method="GET" action="<%= search_path %>" class="search_form px-1 py-2">
-    <div class="form-row mx-0">
+    <div class="row gx-2 mx-0">
       <div class="col">
         <div class="input-group flex-nowrap">
           <div class='query_wrapper position-relative flex-grow-1'>
@@ -21,7 +21,7 @@
   <form method="GET" action="<%= directions_path %>" class="directions_form pb-3">
     <div class="clearfix px-3 py-3"><span class="icon close"></span></div>
 
-    <div class="form-row m-1">
+    <div class="row gx-2 m-1">
       <div class="col-1">
         <%= image_tag "marker-green.png", :class => "routing_marker mx-auto d-block", :data => { :type => "from" }, :draggable => "true" %>
       </div>
@@ -29,7 +29,7 @@
         <%= text_field_tag "route_from", params[:from], :placeholder => t("site.search.from"), :autocomplete => "on", :class => "form-control form-control-sm", :dir => "auto" %>
       </div>
     </div>
-    <div class="form-row m-1">
+    <div class="row gx-2 m-1">
       <div class="col-1">
         <%= image_tag "marker-red.png", :class => "routing_marker mx-auto d-block", :data => { :type => "to" }, :draggable => "true" %>
       </div>
@@ -37,15 +37,15 @@
         <%= text_field_tag "route_to", params[:to], :placeholder => t("site.search.to"), :autocomplete => "on", :class => "form-control form-control-sm", :dir => "auto" %>
       </div>
     </div>
-    <div class="form-row m-1">
+    <div class="row gx-2 m-1">
       <div class="col offset-1">
-        <select class="routing_engines form-control form-control-sm" name="routing_engines"></select>
+        <select class="routing_engines form-select form-select-sm" name="routing_engines"></select>
       </div>
       <div class="col-auto">
         <%= submit_tag t("site.search.submit_text"), :class => "routing_go btn btn-sm btn-primary", :data => { :disable_with => false } %>
       </div>
     </div>
-    <div class="form-row m-1">
+    <div class="row gx-2 m-1">
       <div class="col offset-1">
         <a class="reverse_directions"><%= t("site.search.reverse_directions_text") %></a>
       </div>
diff --git a/app/views/oauth2_authorizations/new.html.erb b/app/views/oauth2_authorizations/new.html.erb
index 3b943a043..971e0e20a 100644
--- a/app/views/oauth2_authorizations/new.html.erb
+++ b/app/views/oauth2_authorizations/new.html.erb
@@ -10,7 +10,7 @@
   <% end -%>
 </ul>
 
-<div class="row justify-content-start no-gutters mx-n1">
+<div class="row justify-content-start g-0 mx-n1">
   <div class="col-auto mx-1">
     <%= bootstrap_form_tag :action => :create do |f| %>
       <%= f.hidden_field :client_id, :value => @pre_auth.client.uid %>
diff --git a/app/views/oauth2_authorized_applications/_application.html.erb b/app/views/oauth2_authorized_applications/_application.html.erb
index 3781c1df3..f27a6f82e 100644
--- a/app/views/oauth2_authorized_applications/_application.html.erb
+++ b/app/views/oauth2_authorized_applications/_application.html.erb
@@ -9,7 +9,7 @@
       <% end -%>
     </ul>
   </td>
-  <td class="align-middle text-right">
+  <td class="align-middle text-end">
     <%= link_to t(".revoke"), oauth_authorized_application_path(application), { :method => :delete, :class => "btn btn-outline-danger", :data => { :confirm => t(".confirm_revoke") } } %>
   </td>
 </tr>
diff --git a/app/views/oauth_clients/_form.html.erb b/app/views/oauth_clients/_form.html.erb
index 455450412..e13f4110f 100644
--- a/app/views/oauth_clients/_form.html.erb
+++ b/app/views/oauth_clients/_form.html.erb
@@ -2,7 +2,7 @@
 <%= f.text_field :url %>
 <%= f.text_field :callback_url %>
 <%= f.text_field :support_url %>
-<div class='form-group'>
+<div class='mb-3'>
   <p><%= t ".requests" %></p>
   <% ClientApplication.all_permissions.each do |perm| %>
     <%= f.check_box perm %>
diff --git a/app/views/profiles/edit.html.erb b/app/views/profiles/edit.html.erb
index c57f98a04..2af64b84f 100644
--- a/app/views/profiles/edit.html.erb
+++ b/app/views/profiles/edit.html.erb
@@ -9,9 +9,9 @@
 <%= bootstrap_form_for current_user, :url => { :action => :update }, :html => { :multipart => true, :autocomplete => :off } do |f| %>
   <%= f.richtext_field :description, :cols => 80, :rows => 20 %>
 
-  <fieldset class="form-group">
+  <fieldset class="mb-3">
     <%= f.label t(".image") %>
-    <div class="form-row">
+    <div class="row">
       <div class="col-sm-2">
         <%= user_image current_user %>
       </div>
@@ -44,7 +44,7 @@
     <legend><%= t ".home location" -%></legend>
     <div id="homerow" <% unless current_user.home_lat and current_user.home_lon %> class="nohome"<% end %>>
       <p class="message text-muted"><%= t ".no home location" %></p>
-      <div class="form-row">
+      <div class="row">
         <%= f.text_field :home_lat, :wrapper_class => "col-sm-4", :id => "home_lat" %>
         <%= f.text_field :home_lon, :wrapper_class => "col-sm-4", :id => "home_lon" %>
       </div>
diff --git a/app/views/sessions/new.html.erb b/app/views/sessions/new.html.erb
index 18f536206..bb43aefd5 100644
--- a/app/views/sessions/new.html.erb
+++ b/app/views/sessions/new.html.erb
@@ -24,8 +24,8 @@
   <hr>
 
   <div id="loginForm">
-    <div class="form-group">
-      <label><%= t ".with external" %></label>
+    <div class="mb-3">
+      <label class="form-label"><%= t ".with external" %></label>
 
       <ul class='list-unstyled' id="login_auth_buttons">
         <li><%= link_to image_tag("openid.png", :alt => t(".auth_providers.openid.title")), "#", :id => "openid_open_url", :title => t(".auth_providers.openid.title") %></li>
@@ -47,8 +47,8 @@
       </ul>
 
       <%= form_tag(auth_path(:provider => "openid"), :id => "openid_login_form") do %>
-        <div id='login_openid_url' class="form-group">
-          <label for='openid_url'><%= t ".openid_html", :logo => openid_logo %></label>
+        <div id='login_openid_url' class="mb-3">
+          <label for='openid_url' class="form-label"><%= t ".openid_html", :logo => openid_logo %></label>
           <%= hidden_field_tag("referer", params[:referer], :autocomplete => "off") %>
           <%= text_field_tag("openid_url", "", :tabindex => 3, :autocomplete => "on", :class => "openid_url form-control") %>
           <span class="form-text text-muted">(<a href="<%= t "accounts.edit.openid.link" %>" target="_new"><%= t "accounts.edit.openid.link text" %></a>)</span>
diff --git a/app/views/shared/_richtext_field.html.erb b/app/views/shared/_richtext_field.html.erb
index cfe6f9827..22b3db542 100644
--- a/app/views/shared/_richtext_field.html.erb
+++ b/app/views/shared/_richtext_field.html.erb
@@ -1,4 +1,4 @@
-<div id="<%= id %>_container" class="form-row richtext_container">
+<div id="<%= id %>_container" class="row richtext_container">
   <div id="<%= id %>_content" class="col-sm-8 mb-3 mb-sm-0 richtext_content">
     <%= builder.text_area(attribute, options.merge(:wrapper => false, "data-preview-url" => preview_url(:type => type))) %>
     <div id="<%= id %>_preview" class="richtext_preview richtext text-break"></div>
diff --git a/app/views/site/export.html.erb b/app/views/site/export.html.erb
index b3a3bd0e9..6dd54f315 100644
--- a/app/views/site/export.html.erb
+++ b/app/views/site/export.html.erb
@@ -27,7 +27,7 @@
   </div>
 
   <div id="export_commit">
-    <div class="form-group d-flex">
+    <div class="mb-3 d-flex">
       <%= submit_tag t(".export_button"), :class => "btn btn-primary mx-auto" %>
     </div>
   </div>
diff --git a/app/views/site/help.html.erb b/app/views/site/help.html.erb
index c82893e9d..640c59773 100644
--- a/app/views/site/help.html.erb
+++ b/app/views/site/help.html.erb
@@ -7,10 +7,10 @@
 <% sites = %w[beginners_guide help mailing_lists forums irc switch2osm welcomemat wiki] %>
 <% sites.prepend("welcome") if current_user %>
 
-<% sites.in_groups_of(3, false) do |group| %>
-  <div class="card-deck mb-4">
-    <% group.each do |site| %>
-      <div class='<%= site %> help-item card'>
+<div class="row row-cols-sm-3 g-4 mb-3">
+  <% sites.each do |site| %>
+    <div class="col">
+      <div class='<%= site %> help-item card h-100'>
         <div class='card-body'>
           <h6 class='card-title'>
             <a href='<%= t ".#{site}.url" %>'>
@@ -27,6 +27,6 @@
           </small>
         </div>
       </div>
-    <% end %>
-  </div>
-<% end %>
+    </div>
+  <% end %>
+</div>
diff --git a/app/views/traces/index.html.erb b/app/views/traces/index.html.erb
index 693de7e1a..b930491c6 100644
--- a/app/views/traces/index.html.erb
+++ b/app/views/traces/index.html.erb
@@ -1,12 +1,18 @@
 <% content_for :heading_class, "pb-0" %>
 <% content_for :heading do %>
   <h1><%= @title %></h1>
-  <p>
-    <%= t(".description") %>
-    <% if params[:tag] %>
-      <%= link_to t(".remove_tag_filter", :tag => params[:tag]), { :controller => "traces", :action => "index", :display_name => nil, :tag => nil, :page => nil }, { :class => "border-left ml-2 pl-2" } %>
-    <% end %>
-  </p>
+  <nav class="secondary-actions mb-3">
+    <ul>
+      <li>
+        <%= t(".description") %>
+      </li>
+      <% if params[:tag] %>
+        <li>
+          <%= link_to t(".remove_tag_filter", :tag => params[:tag]), { :controller => "traces", :action => "index", :display_name => nil, :tag => nil, :page => nil } %>
+        </li>
+      <% end %>
+    </ul>
+  </nav>
   <ul class="nav nav-tabs flex-column flex-sm-row">
     <% if @target_user.blank? %>
       <!-- public traces -->
@@ -43,7 +49,7 @@
 
     <li class="nav-item flex-sm-grow-1"></li>
     <li class="nav-item">
-      <div class="px-3 py-1">
+      <div class="px-3 py-2 py-sm-0">
         <%= link_to({ :action => :georss, :display_name => @target_user&.display_name, :tag => params[:tag] }, { :class => "btn btn-secondary btn-sm" }) do %>
           <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="white" viewBox="0 0 16 16">
             <path d="M5.5 12a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm-3-8.5a1 1 0 0 1 1-1c5.523 0 10 4.477 10 10a1 1 0 1 1-2 0 8 8 0 0 0-8-8 1 1 0 0 1-1-1zm0 4a1 1 0 0 1 1-1 6 6 0 0 1 6 6 1 1 0 1 1-2 0 4 4 0 0 0-4-4 1 1 0 0 1-1-1z" />
diff --git a/app/views/user_blocks/edit.html.erb b/app/views/user_blocks/edit.html.erb
index 8c89c80f3..db7c5e057 100644
--- a/app/views/user_blocks/edit.html.erb
+++ b/app/views/user_blocks/edit.html.erb
@@ -15,8 +15,10 @@
   <%= f.richtext_field :reason, :cols => 80, :rows => 20, :format => @user_block.reason_format %>
 
   <%= f.form_group do %>
-    <%= label_tag "user_block_period", t(".period") %><br />
-    <%= select_tag("user_block_period", options_for_select(UserBlock::PERIODS.collect { |h| [block_duration_in_words(h.hours), h.to_s] }, params[:user_block_period])) %>
+    <%= label_tag "user_block_period", t(".period"), :class => "form-label" %>
+    <%= select_tag("user_block_period",
+                   options_for_select(UserBlock::PERIODS.collect { |h| [block_duration_in_words(h.hours), h.to_s] }, params[:user_block_period]),
+                   :class => "form-select") %>
   <% end %>
 
   <%= f.form_group :needs_view do %>
diff --git a/app/views/user_blocks/new.html.erb b/app/views/user_blocks/new.html.erb
index 4dc7fd63c..c390134ba 100644
--- a/app/views/user_blocks/new.html.erb
+++ b/app/views/user_blocks/new.html.erb
@@ -9,8 +9,10 @@
   <%= f.richtext_field :reason, :cols => 80, :rows => 20 %>
 
   <%= f.form_group do %>
-    <%= label_tag "user_block_period", t(".period") %><br />
-    <%= select_tag("user_block_period", options_for_select(UserBlock::PERIODS.collect { |h| [block_duration_in_words(h.hours), h.to_s] }, params[:user_block_period])) %>
+    <%= label_tag "user_block_period", t(".period"), :class => "form-label" %>
+    <%= select_tag("user_block_period",
+                   options_for_select(UserBlock::PERIODS.collect { |h| [block_duration_in_words(h.hours), h.to_s] }, params[:user_block_period]),
+                   :class => "form-select") %>
   <% end %>
 
   <%= f.form_group :needs_view do %>
diff --git a/app/views/user_blocks/revoke.html.erb b/app/views/user_blocks/revoke.html.erb
index 9ece75bb5..9a86177fc 100644
--- a/app/views/user_blocks/revoke.html.erb
+++ b/app/views/user_blocks/revoke.html.erb
@@ -16,7 +16,7 @@
   </p>
 
   <%= bootstrap_form_for :revoke, :url => { :action => "revoke" } do |f| %>
-    <div class="form-group">
+    <div class="mb-3">
       <div class="form-check">
         <%= check_box_tag "confirm", "yes", false, { :class => "form-check-input" } %>
         <%= label_tag "confirm", t(".confirm"), { :class => "form-check-label" } %>
diff --git a/app/views/users/new.html.erb b/app/views/users/new.html.erb
index a94d4a812..081c4a99f 100644
--- a/app/views/users/new.html.erb
+++ b/app/views/users/new.html.erb
@@ -25,9 +25,9 @@
 
       <%= f.text_field :display_name, :help => t(".display name description"), :tabindex => 3 %>
 
-      <fieldset class="form-group" id="auth_field">
-        <label for="user_auth_provider"><%= t(".external auth") %></label>
-        <div class="form-row">
+      <fieldset class="mb-3" id="auth_field">
+        <label for="user_auth_provider" class="form-label"><%= t(".external auth") %></label>
+        <div class="row">
           <%= f.select(:auth_provider, Auth.providers, :default => "", :hide_label => true, :wrapper => { :class => "col-auto mb-0" }, :tabindex => 4) %>
           <%= f.text_field(:auth_uid, :hide_label => true, :wrapper => { :class => "col mb-0" }, :tabindex => 5) %>
         </div>
diff --git a/app/views/users/terms.html.erb b/app/views/users/terms.html.erb
index 58bddaca5..f16166702 100644
--- a/app/views/users/terms.html.erb
+++ b/app/views/users/terms.html.erb
@@ -16,10 +16,10 @@
     <%= t ".heading_ct" %>
   </h4>
   <p class="text-muted"><%= t ".contributor_terms_explain" %></p>
-  <label>
+  <label class="form-label">
     <%= t ".legale_select" %>
   </label>
-  <div class="form-group">
+  <div class="mb-3">
     <% [%w[france FR], %w[italy IT], %w[rest_of_world GB]].each do |name, legale| %>
       <div class="form-check form-check-inline">
         <%= radio_button_tag "legale", legale, @legale == legale, :data => { :url => url_for(:legale => legale) }, :class => "form-check-input" %>
@@ -41,7 +41,7 @@
             :translations => "https://www.osmfoundation.org/wiki/License/Contributor_Terms/Informal_Translations" %>
     </p>
   </div>
-  <div class="form-group">
+  <div class="mb-3">
     <div class="form-check">
       <%= check_box_tag "read_ct", "1", false, :class => "form-check-input" %>
       <label for="read_ct" class="form-check-label">
@@ -55,7 +55,7 @@
   </h4>
   <p class="text-muted"><%= t ".tou_explain_html", :tou_link => link_to(t("layouts.tou"), "https://wiki.osmfoundation.org/wiki/Terms_of_Use", :target => :new) %></p>
 
-  <div class="form-group">
+  <div class="mb-3">
     <div class="form-check">
       <%= check_box_tag "read_tou", "1", false, :class => "form-check-input" %>
       <label for="read_tou" class="form-check-label">
@@ -66,12 +66,12 @@
 
   <%= hidden_field_tag("referer", h(params[:referer])) unless params[:referer].nil? %>
 
-  <div class="form-group">
+  <div class="mb-3">
     <%= submit_tag("Continue", :name => "continue", :id => "continue", :disabled => true, :class => "btn btn-primary") %>
     <%= submit_tag("Cancel", :name => "decline", :id => "decline", :class => "btn btn-outline-secondary") %>
   </div>
 
-  <div class="form-group">
+  <div class="mb-3">
     <div class="form-check">
       <%= check_box("user", "consider_pd", :class => "form-check-input") %>
     <label for="user_consider_pd" class="form-check-label">
diff --git a/test/controllers/accounts_controller_test.rb b/test/controllers/accounts_controller_test.rb
index 173bcf22c..1e39a7329 100644
--- a/test/controllers/accounts_controller_test.rb
+++ b/test/controllers/accounts_controller_test.rb
@@ -61,7 +61,7 @@ class AccountsControllerTest < ActionDispatch::IntegrationTest
     assert_response :success
     assert_template :edit
     assert_select ".notice", false
-    assert_select "form#accountForm > div.form-group > input.is-invalid#user_display_name"
+    assert_select "form#accountForm > div > input.is-invalid#user_display_name"
 
     # Changing name to one that exists should fail, regardless of case
     new_attributes = user.attributes.dup.merge(:display_name => create(:user).display_name.upcase)
@@ -69,7 +69,7 @@ class AccountsControllerTest < ActionDispatch::IntegrationTest
     assert_response :success
     assert_template :edit
     assert_select ".notice", false
-    assert_select "form#accountForm > div.form-group > input.is-invalid#user_display_name"
+    assert_select "form#accountForm > div > input.is-invalid#user_display_name"
 
     # Changing name to one that doesn't exist should work
     new_attributes = user.attributes.dup.merge(:display_name => "new tester")
@@ -80,7 +80,7 @@ class AccountsControllerTest < ActionDispatch::IntegrationTest
     assert_response :success
     assert_template :edit
     assert_select ".notice", /^User information updated successfully/
-    assert_select "form#accountForm > div.form-group > input#user_display_name[value=?]", "new tester"
+    assert_select "form#accountForm > div > input#user_display_name[value=?]", "new tester"
 
     # Record the change of name
     user.display_name = "new tester"
@@ -95,7 +95,7 @@ class AccountsControllerTest < ActionDispatch::IntegrationTest
     assert_response :success
     assert_template :edit
     assert_select ".notice", false
-    assert_select "form#accountForm > div.form-group > input.is-invalid#user_new_email"
+    assert_select "form#accountForm > div > input.is-invalid#user_new_email"
 
     # Changing email to one that exists should fail, regardless of case
     user.new_email = create(:user).email.upcase
@@ -107,7 +107,7 @@ class AccountsControllerTest < ActionDispatch::IntegrationTest
     assert_response :success
     assert_template :edit
     assert_select ".notice", false
-    assert_select "form#accountForm > div.form-group > input.is-invalid#user_new_email"
+    assert_select "form#accountForm > div > input.is-invalid#user_new_email"
 
     # Changing email to one that doesn't exist should work
     user.new_email = "new_tester@example.com"
@@ -122,7 +122,7 @@ class AccountsControllerTest < ActionDispatch::IntegrationTest
     assert_response :success
     assert_template :edit
     assert_select ".notice", /^User information updated successfully/
-    assert_select "form#accountForm > div.form-group > input#user_new_email[value=?]", user.new_email
+    assert_select "form#accountForm > div > input#user_new_email[value=?]", user.new_email
     email = ActionMailer::Base.deliveries.first
     assert_equal 1, email.to.count
     assert_equal user.new_email, email.to.first
diff --git a/test/controllers/preferences_controller_test.rb b/test/controllers/preferences_controller_test.rb
index 8c529e62a..6bc609e6a 100644
--- a/test/controllers/preferences_controller_test.rb
+++ b/test/controllers/preferences_controller_test.rb
@@ -31,7 +31,7 @@ class PreferencesControllerTest < ActionDispatch::IntegrationTest
     assert_template :edit
     assert_select ".notice", false
     assert_select ".error", true
-    assert_select "form > div.form-group > select#user_preferred_editor > option[selected]", false
+    assert_select "form > div > select#user_preferred_editor > option[selected]", false
 
     # Changing to a valid editor should work
     user.preferred_editor = "id"
diff --git a/test/controllers/profiles_controller_test.rb b/test/controllers/profiles_controller_test.rb
index 38e73a03f..824ecb5e3 100644
--- a/test/controllers/profiles_controller_test.rb
+++ b/test/controllers/profiles_controller_test.rb
@@ -39,7 +39,7 @@ class ProfilesControllerTest < ActionDispatch::IntegrationTest
     assert_template :show
     assert_select ".notice", /^Profile updated./
     get edit_profile_path
-    assert_select "form > fieldset.form-group > div.form-row > div.col-sm-10 > div.form-check > input[name=avatar_action][checked][value=?]", "keep"
+    assert_select "form > fieldset > div > div.col-sm-10 > div.form-check > input[name=avatar_action][checked][value=?]", "keep"
 
     # Changing to a gravatar image should work
     put profile_path, :params => { :avatar_action => "gravatar", :user => { :description => user.description } }
@@ -50,7 +50,7 @@ class ProfilesControllerTest < ActionDispatch::IntegrationTest
     assert_template :show
     assert_select ".notice", /^Profile updated./
     get edit_profile_path
-    assert_select "form > fieldset.form-group > div.form-row > div.col-sm-10 > div.form-group > div.form-check > input[name=avatar_action][checked][value=?]", "gravatar"
+    assert_select "form > fieldset > div > div.col-sm-10 > div > div.form-check > input[name=avatar_action][checked][value=?]", "gravatar"
 
     # Removing the image should work
     put profile_path, :params => { :avatar_action => "delete", :user => { :description => user.description } }
@@ -61,7 +61,7 @@ class ProfilesControllerTest < ActionDispatch::IntegrationTest
     assert_template :show
     assert_select ".notice", /^Profile updated./
     get edit_profile_path
-    assert_select "form > fieldset.form-group > div.form-row > div.col-sm-10 > div.form-check > input[name=avatar_action][checked]", false
-    assert_select "form > fieldset.form-group > div.form-row > div.col-sm-10 > div.form-group > div.form-check > input[name=avatar_action][checked]", false
+    assert_select "form > fieldset > div > div.col-sm-10 > div > input[name=avatar_action][checked]", false
+    assert_select "form > fieldset > div > div.col-sm-10 > div > div.form-check > input[name=avatar_action][checked]", false
   end
 end
diff --git a/test/controllers/users_controller_test.rb b/test/controllers/users_controller_test.rb
index 7a487780d..634b279a5 100644
--- a/test/controllers/users_controller_test.rb
+++ b/test/controllers/users_controller_test.rb
@@ -151,7 +151,7 @@ class UsersControllerTest < ActionDispatch::IntegrationTest
 
     assert_response :success
     assert_template "new"
-    assert_select "form > div.form-group > input.is-invalid#user_email"
+    assert_select "form > div > input.is-invalid#user_email"
   end
 
   def test_save_duplicate_email
@@ -180,7 +180,7 @@ class UsersControllerTest < ActionDispatch::IntegrationTest
 
     assert_response :success
     assert_template "new"
-    assert_select "form > div.form-group > input.is-invalid#user_email"
+    assert_select "form > div > input.is-invalid#user_email"
   end
 
   def test_save_duplicate_email_uppercase
@@ -209,7 +209,7 @@ class UsersControllerTest < ActionDispatch::IntegrationTest
 
     assert_response :success
     assert_template "new"
-    assert_select "form > div.form-group > input.is-invalid#user_email"
+    assert_select "form > div > input.is-invalid#user_email"
   end
 
   def test_save_duplicate_name
@@ -238,7 +238,7 @@ class UsersControllerTest < ActionDispatch::IntegrationTest
 
     assert_response :success
     assert_template "new"
-    assert_select "form > div.form-group > input.is-invalid#user_display_name"
+    assert_select "form > div > input.is-invalid#user_display_name"
   end
 
   def test_save_duplicate_name_uppercase
@@ -267,7 +267,7 @@ class UsersControllerTest < ActionDispatch::IntegrationTest
 
     assert_response :success
     assert_template "new"
-    assert_select "form > div.form-group > input.is-invalid#user_display_name"
+    assert_select "form > div > input.is-invalid#user_display_name"
   end
 
   def test_save_blocked_domain
diff --git a/test/integration/user_creation_test.rb b/test/integration/user_creation_test.rb
index 9343487f6..7163e1b72 100644
--- a/test/integration/user_creation_test.rb
+++ b/test/integration/user_creation_test.rb
@@ -51,7 +51,7 @@ class UserCreationTest < ActionDispatch::IntegrationTest
         assert_template "users/new"
         assert_equal locale.to_s, response.headers["Content-Language"]
         assert_select "form"
-        assert_select "form > div.form-group > input.is-invalid#user_email"
+        assert_select "form > div > input.is-invalid#user_email"
         assert_no_missing_translations
       end
     end
@@ -77,7 +77,7 @@ class UserCreationTest < ActionDispatch::IntegrationTest
         end
         assert_response :success
         assert_template "users/new"
-        assert_select "form > div.form-group > input.is-invalid#user_display_name"
+        assert_select "form > div > input.is-invalid#user_display_name"
         assert_no_missing_translations
       end
     end