From: Tom Hughes <tom@compton.nu>
Date: Wed, 10 Apr 2024 17:32:57 +0000 (+0100)
Subject: Merge remote-tracking branch 'upstream/pull/4667'
X-Git-Tag: live~967
X-Git-Url: https://git.openstreetmap.org./rails.git/commitdiff_plain/90089d6c6c0a3971441b6a130ee6036a24d99df1?hp=895efda10f4336e60c0961ee26ee440bd7daf30e

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

diff --git a/Gemfile.lock b/Gemfile.lock
index 00bf5384b..f3e39e829 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -95,7 +95,7 @@ GEM
     autoprefixer-rails (10.4.16.0)
       execjs (~> 2)
     aws-eventstream (1.3.0)
-    aws-partitions (1.909.0)
+    aws-partitions (1.910.0)
     aws-sdk-core (3.191.6)
       aws-eventstream (~> 1, >= 1.3.0)
       aws-partitions (~> 1, >= 1.651.0)
@@ -475,7 +475,7 @@ GEM
     rdoc (6.6.3.1)
       psych (>= 4.0.0)
     regexp_parser (2.9.0)
-    reline (0.5.0)
+    reline (0.5.1)
       io-console (~> 0.5)
     request_store (1.6.0)
       rack (>= 1.4)
@@ -485,7 +485,7 @@ GEM
     rouge (4.2.1)
     rtlcss (0.2.1)
       mini_racer (>= 0.6.3)
-    rubocop (1.62.1)
+    rubocop (1.63.0)
       json (~> 2.3)
       language_server-protocol (>= 3.17.0)
       parallel (~> 1.10)
diff --git a/app/assets/images/avatar.svg b/app/assets/images/avatar.svg
new file mode 100644
index 000000000..46d761b6d
--- /dev/null
+++ b/app/assets/images/avatar.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
+  <path
+    d="m 50,11 c -8,0 -12,5 -14,9 -2,4 -2,13 -1,19 0.98639,5.918364 3.9723,8.164584 5,12 0,0 0,3 0,4 l -14,3 c -9.47814,2.03103 -13.23303,8.02944 -14,18 l -1,13 78,0 -1,-13 c -0.76697,-9.97056 -4.40411,-16.62916 -14,-18 L 60,55 l -0,-4 c 0,-4 4.01361,-6.081636 5,-12 1,-6 1,-15 -1,-19 -2.0728,-4.145608 -6,-9 -14,-9 z"
+    fill="#dadaff" />
+</svg>
diff --git a/app/assets/images/avatars.svg b/app/assets/images/avatars.svg
deleted file mode 100644
index 85288b242..000000000
--- a/app/assets/images/avatars.svg
+++ /dev/null
@@ -1,182 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   id="svg54671"
-   version="1.1"
-   inkscape:version="0.48.2 r9819"
-   width="99.999969"
-   height="155"
-   sodipodi:docname="new-user-icon.svg">
-  <metadata
-     id="metadata54677">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title />
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <defs
-     id="defs54675">
-    <clipPath
-       clipPathUnits="userSpaceOnUse"
-       id="clipPath55579">
-      <rect
-         y="701"
-         x="157"
-         height="23.000002"
-         width="49.999985"
-         id="rect55581"
-         style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
-    </clipPath>
-  </defs>
-  <sodipodi:namedview
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1"
-     objecttolerance="10"
-     gridtolerance="10"
-     guidetolerance="10"
-     inkscape:pageopacity="0"
-     inkscape:pageshadow="2"
-     inkscape:window-width="1280"
-     inkscape:window-height="756"
-     id="namedview54673"
-     showgrid="true"
-     inkscape:zoom="4.3320463"
-     inkscape:cx="28.49301"
-     inkscape:cy="111.46394"
-     inkscape:window-x="11"
-     inkscape:window-y="0"
-     inkscape:window-maximized="0"
-     inkscape:current-layer="svg54671"
-     inkscape:object-nodes="true"
-     inkscape:object-paths="true"
-     showguides="false"
-     inkscape:guide-bbox="true"
-     fit-margin-top="0"
-     fit-margin-left="0"
-     fit-margin-right="0"
-     fit-margin-bottom="0">
-    <inkscape:grid
-       type="xygrid"
-       id="grid54700"
-       empspacing="5"
-       visible="true"
-       enabled="true"
-       snapvisiblegridlinesonly="true" />
-    <sodipodi:guide
-       orientation="1,0"
-       position="1000,117.39694"
-       id="guide54708" />
-    <sodipodi:guide
-       orientation="1,0"
-       position="830,101"
-       id="guide55315" />
-    <sodipodi:guide
-       orientation="1,0"
-       position="815,99.000004"
-       id="guide55317" />
-    <sodipodi:guide
-       orientation="1,0"
-       position="845,99.000004"
-       id="guide55319" />
-    <sodipodi:guide
-       orientation="0,1"
-       position="832,88.000004"
-       id="guide55321" />
-    <sodipodi:guide
-       orientation="1,0"
-       position="805,67.000004"
-       id="guide55323" />
-    <sodipodi:guide
-       orientation="1,0"
-       position="855,73.000004"
-       id="guide55325" />
-    <sodipodi:guide
-       orientation="1,0"
-       position="990,95.000004"
-       id="guide55476" />
-    <sodipodi:guide
-       orientation="1,0"
-       position="1020,73.000004"
-       id="guide55478" />
-    <sodipodi:guide
-       orientation="1,0"
-       position="970,74.000004"
-       id="guide55480" />
-    <sodipodi:guide
-       orientation="1,0"
-       position="1030,76.000004"
-       id="guide55482" />
-    <sodipodi:guide
-       orientation="0,1"
-       position="978,45.000004"
-       id="guide55484" />
-    <sodipodi:guide
-       orientation="1,0"
-       position="960,64.000004"
-       id="guide55486" />
-    <sodipodi:guide
-       orientation="1,0"
-       position="1040,63.000004"
-       id="guide55488" />
-    <sodipodi:guide
-       orientation="1,0"
-       position="980,81.000004"
-       id="guide55490" />
-    <sodipodi:guide
-       orientation="1,0"
-       position="1010,92.518344"
-       id="guide55492" />
-  </sodipodi:namedview>
-  <g
-     id="g55329"
-     transform="translate(-785,-42)">
-    <rect
-       y="42"
-       x="785"
-       height="100.00001"
-       width="99.999969"
-       id="rect54702"
-       style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
-    <path
-       sodipodi:nodetypes="sssscssccsscssss"
-       inkscape:connector-curvature="0"
-       id="path54704"
-       d="m 834.99998,53.000004 c -8,0 -12,5 -14,9 -2,4 -2,13 -1,19 0.98639,5.918364 3.9723,8.164584 5,12 0,0 0,3 0,4 l -14,2.999996 c -9.47814,2.03103 -13.23303,8.02944 -14,18 l -1,13 78,0 -1,-13 c -0.76697,-9.97056 -4.40411,-16.62916 -14,-18 L 845,97 l -2e-5,-3.999996 c -2e-5,-4.000002 4.01361,-6.081636 5,-12 1,-6 1,-15 -1,-19 -2.0728,-4.145608 -6,-9 -14,-9 z"
-       style="color:#000000;fill:#dadaff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
-  </g>
-  <g
-     id="g3048"
-     transform="translate(-157,-258)">
-    <g
-       transform="matrix(0.5,0,0,0.5,-236.5,342)"
-       id="g55329-6">
-      <rect
-         style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
-         id="rect54702-3"
-         width="99.999969"
-         height="100.00001"
-         x="787"
-         y="42" />
-    </g>
-    <path
-       style="color:#000000;fill:#dadaff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
-       d="m 181.99999,368.5 c -4,0 -6.5,2.5 -7.5,4.5 -1,2 -1,7 -0.5,10 0.4932,2.95918 2,3.43845 2,5.5 0,0.5 0,1 0,1.5 0,0.4714 -1,1 -1,1 l -5,1.5 c -4.64225,1.39267 -6.58477,4.01726 -7,9 l -0.5,6 39,0 -0.5,-6 c -0.41523,-4.98274 -2.35775,-7.60733 -7,-9 l -5,-1.5 c 0,0 -1,-0.5286 -1,-1 0,-0.5 0,-1 0,-1.5 0,-2 1.5068,-2.54082 2,-5.5 0.5,-3 0.5,-8 -0.5,-10 -1.0364,-2.07281 -3.5,-4.5 -7.5,-4.5 z"
-       id="path54704-4"
-       inkscape:connector-curvature="0"
-       sodipodi:nodetypes="ssssscssccsscsssss" />
-  </g>
-</svg>
diff --git a/app/assets/javascripts/leaflet.layers.js b/app/assets/javascripts/leaflet.layers.js
index 27311f7c1..b78ac6e07 100644
--- a/app/assets/javascripts/leaflet.layers.js
+++ b/app/assets/javascripts/leaflet.layers.js
@@ -5,26 +5,30 @@ L.OSM.layers = function (options) {
     var layers = options.layers;
 
     var baseSection = $("<div>")
-      .attr("class", "section base-layers")
+      .attr("class", "section base-layers d-grid gap-3")
       .appendTo($ui);
 
-    var baseLayers = $("<ul class='list-unstyled mb-0'>")
-      .appendTo(baseSection);
+    layers.forEach(function (layer, i) {
+      var id = "map-ui-layer-" + i;
 
-    layers.forEach(function (layer) {
-      var item = $("<li>")
-        .attr("class", "rounded-3")
-        .appendTo(baseLayers);
+      var buttonContainer = $("<div class='position-relative'>")
+        .appendTo(baseSection);
 
-      if (map.hasLayer(layer)) {
-        item.addClass("active");
-      }
+      var mapContainer = $("<div class='position-absolute top-0 start-0 bottom-0 end-0 z-0'>")
+        .appendTo(buttonContainer);
 
-      var div = $("<div>")
-        .appendTo(item);
+      var input = $("<input type='radio' class='btn-check' name='layer'>")
+        .prop("id", id)
+        .prop("checked", map.hasLayer(layer))
+        .appendTo(buttonContainer);
+
+      var item = $("<label class='btn btn-outline-primary border-4 rounded-3 bg-transparent position-absolute top-0 start-0 bottom-0 end-0 m-n1 overflow-hidden'>")
+        .prop("for", id)
+        .append($("<span class='badge position-absolute top-0 start-0 rounded-top-0 rounded-start-0 py-1 px-2 bg-body bg-opacity-75 text-body text-wrap text-start fs-6 lh-base'>").append(layer.options.name))
+        .appendTo(buttonContainer);
 
       map.whenReady(function () {
-        var miniMap = L.map(div[0], { attributionControl: false, zoomControl: false, keyboard: false })
+        var miniMap = L.map(mapContainer[0], { attributionControl: false, zoomControl: false, keyboard: false })
           .addLayer(new layer.constructor({ apikey: layer.options.apikey }));
 
         miniMap.dragging.disable();
@@ -55,17 +59,7 @@ L.OSM.layers = function (options) {
         }
       });
 
-      var label = $("<label>")
-        .appendTo(item);
-
-      var input = $("<input>")
-        .attr("type", "radio")
-        .prop("checked", map.hasLayer(layer))
-        .appendTo(label);
-
-      label.append(layer.options.name);
-
-      item.on("click", function () {
+      input.on("click", function () {
         layers.forEach(function (other) {
           if (other === layer) {
             map.addLayer(other);
@@ -79,7 +73,6 @@ L.OSM.layers = function (options) {
       item.on("dblclick", toggle);
 
       map.on("layeradd layerremove", function () {
-        item.toggleClass("active", map.hasLayer(layer));
         input.prop("checked", map.hasLayer(layer));
       });
     });
diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index 1f23a7565..a1cae7a36 100644
--- a/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@ -382,7 +382,6 @@ body.small-nav {
     float: right;
     width: 250px;
     height: 100%;
-    background: white;
     overflow: auto;
 
     .section {
@@ -424,43 +423,14 @@ body.small-nav {
 }
 
 .layers-ui {
-  .base-layers {
-    .leaflet-container {
-      width: 100%;
-      height: 50px;
-      cursor: pointer;
-    }
-
-    li  {
-      overflow: hidden;
-      border-radius: 3px;
-      border: 2px solid #fff;
-      margin-bottom: 8px;
-      position: relative;
-      transition: border-color 0.08s ease-in;
+  .base-layers > * {
+    height: 56px;
 
-      label {
-        position: absolute;
-        top: 0;
-        left: 0;
-        padding: 2px 6px;
-        border-bottom-right-radius: 3px;
-        cursor: pointer;
-        font-weight: 600;
-        font-size: 16px;
-        text-stroke: 2px #fff;
-        background: rgba(255,255,255,.9);
-        z-index: 1000;
-        input[type="radio"] {
-          display: none;
-        }
-      }
-
-      &.active { border-color: darken($green, 10%); }
-      &:hover {
-        border-color: $grey;
-        &.active { border-color: darken($green, 20%); }
-      }
+    > .btn {
+      --bs-btn-border-color: var(--bs-body-bg);
+    }
+    > .btn:hover {
+      --bs-btn-border-color: var(--bs-primary-border-subtle);
     }
   }
 
@@ -575,6 +545,12 @@ div.direction {
 div.direction.i#{$i} { background-position: #{($i)*-20}px 0px; }
 }
 
+@include color-mode(dark) {
+  div.direction {
+    filter: invert(1);
+  }
+}
+
 td.distance {
     font-size: x-small;
 }
@@ -691,8 +667,6 @@ tr.turn:hover {
   }
 
   .export_boxy {
-    background: $lightgrey;
-
     > * {
         margin: -1px;
     }
@@ -906,12 +880,12 @@ div.secondary-actions {
 .richtext,
 .prose {
   code {
-    background: $lightgrey;
+    background: var(--bs-secondary-bg);
     padding: 2px 3px;
   }
 
   pre {
-    background: $lightgrey;
+    background: var(--bs-secondary-bg);
     padding: 2px 3px;
     white-space: pre-wrap;
 
@@ -922,17 +896,17 @@ div.secondary-actions {
 
   img {
     padding: $lineheight;
-    background-color: $offwhite;
+    background-color: var(--bs-tertiary-bg);
     display: block;
     max-width: 100%;
     margin: auto;
   }
 
   blockquote {
-    border-left: $lineheight solid $offwhite;
+    border-left: $lineheight solid var(--bs-tertiary-bg);
     padding-left: $lineheight;
     margin: 0;
-    color: $darkgrey;
+    color: var(--bs-secondary-color);
   }
 }
 
@@ -989,8 +963,6 @@ div.secondary-actions {
 }
 
 .site-about #content {
-  background-color: $lightgrey;
-
   .content-inner {
     max-width: 760px;
   }
diff --git a/app/helpers/user_helper.rb b/app/helpers/user_helper.rb
index cf2d40da5..19bb8e0d6 100644
--- a/app/helpers/user_helper.rb
+++ b/app/helpers/user_helper.rb
@@ -2,7 +2,7 @@ module UserHelper
   # User images
 
   def user_image(user, options = {})
-    options[:class] ||= "user_image border border-secondary-subtle"
+    options[:class] ||= "user_image border border-secondary-subtle bg-body"
     options[:alt] ||= ""
 
     if user.image_use_gravatar
@@ -10,12 +10,12 @@ module UserHelper
     elsif user.avatar.attached?
       user_avatar_variant_tag(user, { :resize_to_limit => [100, 100] }, options)
     else
-      image_tag "avatar_large.png", options.merge(:width => 100, :height => 100)
+      image_tag "avatar.svg", options.merge(:width => 100, :height => 100)
     end
   end
 
   def user_thumbnail(user, options = {})
-    options[:class] ||= "user_thumbnail border border-secondary-subtle"
+    options[:class] ||= "user_thumbnail border border-secondary-subtle bg-body"
     options[:alt] ||= ""
 
     if user.image_use_gravatar
@@ -23,12 +23,12 @@ module UserHelper
     elsif user.avatar.attached?
       user_avatar_variant_tag(user, { :resize_to_limit => [50, 50] }, options)
     else
-      image_tag "avatar_small.png", options.merge(:width => 50, :height => 50)
+      image_tag "avatar.svg", options.merge(:width => 50, :height => 50)
     end
   end
 
   def user_thumbnail_tiny(user, options = {})
-    options[:class] ||= "user_thumbnail_tiny border border-secondary-subtle"
+    options[:class] ||= "user_thumbnail_tiny border border-secondary-subtle bg-body"
     options[:alt] ||= ""
 
     if user.image_use_gravatar
@@ -36,7 +36,7 @@ module UserHelper
     elsif user.avatar.attached?
       user_avatar_variant_tag(user, { :resize_to_limit => [50, 50] }, options)
     else
-      image_tag "avatar_small.png", options.merge(:width => 50, :height => 50)
+      image_tag "avatar.svg", options.merge(:width => 50, :height => 50)
     end
   end
 
@@ -46,7 +46,7 @@ module UserHelper
     elsif user.avatar.attached?
       polymorphic_url(user_avatar_variant(user, :resize_to_limit => [100, 100]), :host => Settings.server_url)
     else
-      image_url("avatar_large.png")
+      image_url("avatar.svg")
     end
   end
 
diff --git a/app/views/layouts/_header.html.erb b/app/views/layouts/_header.html.erb
index f61d0806f..eeed7de42 100644
--- a/app/views/layouts/_header.html.erb
+++ b/app/views/layouts/_header.html.erb
@@ -82,7 +82,7 @@
     <% if current_user && current_user.id %>
       <div class='d-inline-flex dropdown user-menu logged-in'>
         <button class='dropdown-toggle btn btn-outline-secondary border-secondary-subtle bg-body text-secondary px-2 py-1 flex-grow-1' type='button' data-bs-toggle='dropdown'>
-          <%= user_thumbnail_tiny(current_user, :width => 25, :height => 25, :class => "user_thumbnail_tiny rounded-1") %>
+          <%= user_thumbnail_tiny(current_user, :width => 25, :height => 25, :class => "user_thumbnail_tiny rounded-1 bg-body") %>
           <%= render :partial => "layouts/inbox" %>
           <span class="user-button">
             <span class='username'>
diff --git a/app/views/site/about.html.erb b/app/views/site/about.html.erb
index 619094e56..7dbed1514 100644
--- a/app/views/site/about.html.erb
+++ b/app/views/site/about.html.erb
@@ -1,3 +1,4 @@
+<% content_for(:content_class) { "bg-body-secondary" } %>
 <% I18n.with_locale @locale do %>
   <%= tag.div :lang => @locale, :dir => t("html.dir") do %>
     <div class="container-lg attr">
@@ -11,13 +12,13 @@
         </div>
       </div>
       <div class='row'>
-        <div class="px-5 py-4 bg-dark">
+        <div class="px-5 py-4 bg-black bg-opacity-75">
           <h1 class="text-white fw-light"><%= t ".used_by_html", :name => tag.span("OpenStreetMap", :class => "user-name") %></h1>
         </div>
       </div>
     </div>
 
-    <div class='bg-white px-5 py-4'>
+    <div class='bg-body px-5 py-4'>
       <p class="lead"><%= t ".lede_text" %></p>
 
       <%= render :layout => "about_section", :locals => { :icon => "local", :title => "local_knowledge" } do %>
diff --git a/app/views/site/export.html.erb b/app/views/site/export.html.erb
index 3bc62883f..9b9499e65 100644
--- a/app/views/site/export.html.erb
+++ b/app/views/site/export.html.erb
@@ -6,7 +6,7 @@
   <%= hidden_field_tag "format", "osm", :autocomplete => "off" %>
 
   <div class='export_area_inputs'>
-    <div class='export_boxy border border-secondary-subtle rounded'>
+    <div class='export_boxy border border-secondary-subtle rounded bg-body-secondary'>
       <%= text_field_tag("maxlat", nil, :size => 10, :autocomplete => "off", :class => "export_bound form-control mx-auto") %>
       <div class="clearfix">
         <%= text_field_tag("minlon", nil, :size => 10, :autocomplete => "off", :class => "export_bound form-control my-2") %>
diff --git a/test/helpers/user_helper_test.rb b/test/helpers/user_helper_test.rb
index e72887798..f7d2726db 100644
--- a/test/helpers/user_helper_test.rb
+++ b/test/helpers/user_helper_test.rb
@@ -8,12 +8,12 @@ class UserHelperTest < ActionView::TestCase
     gravatar_user = create(:user, :image_use_gravatar => true)
 
     image = user_image(user)
-    assert_match %r{^<img class="user_image border border-secondary-subtle" .* src="/images/avatar_large.png" />$}, image
+    assert_match %r{^<img class="user_image border border-secondary-subtle bg-body" .* src="/images/avatar.svg" />$}, image
 
     image = user_image(user, :class => "foo")
-    assert_match %r{^<img class="foo" .* src="/images/avatar_large.png" />$}, image
+    assert_match %r{^<img class="foo" .* src="/images/avatar.svg" />$}, image
     image = user_image(gravatar_user)
-    assert_match %r{^<img class="user_image border border-secondary-subtle" .* src="http://www.gravatar.com/avatar/.*" />$}, image
+    assert_match %r{^<img class="user_image border border-secondary-subtle bg-body" .* src="http://www.gravatar.com/avatar/.*" />$}, image
 
     image = user_image(gravatar_user, :class => "foo")
     assert_match %r{^<img class="foo" .* src="http://www.gravatar.com/avatar/.*" />$}, image
@@ -24,13 +24,13 @@ class UserHelperTest < ActionView::TestCase
     gravatar_user = create(:user, :image_use_gravatar => true)
 
     image = user_thumbnail(user)
-    assert_match %r{^<img class="user_thumbnail border border-secondary-subtle" .* src="/images/avatar_small.png" />$}, image
+    assert_match %r{^<img class="user_thumbnail border border-secondary-subtle bg-body" .* src="/images/avatar.svg" />$}, image
 
     image = user_thumbnail(user, :class => "foo")
-    assert_match %r{^<img class="foo" .* src="/images/avatar_small.png" />$}, image
+    assert_match %r{^<img class="foo" .* src="/images/avatar.svg" />$}, image
 
     image = user_thumbnail(gravatar_user)
-    assert_match %r{^<img class="user_thumbnail border border-secondary-subtle" .* src="http://www.gravatar.com/avatar/.*" />$}, image
+    assert_match %r{^<img class="user_thumbnail border border-secondary-subtle bg-body" .* src="http://www.gravatar.com/avatar/.*" />$}, image
 
     image = user_thumbnail(gravatar_user, :class => "foo")
     assert_match %r{^<img class="foo" .* src="http://www.gravatar.com/avatar/.*" />$}, image
@@ -41,13 +41,13 @@ class UserHelperTest < ActionView::TestCase
     gravatar_user = create(:user, :image_use_gravatar => true)
 
     image = user_thumbnail_tiny(user)
-    assert_match %r{^<img class="user_thumbnail_tiny border border-secondary-subtle" .* src="/images/avatar_small.png" />$}, image
+    assert_match %r{^<img class="user_thumbnail_tiny border border-secondary-subtle bg-body" .* src="/images/avatar.svg" />$}, image
 
     image = user_thumbnail_tiny(user, :class => "foo")
-    assert_match %r{^<img class="foo" .* src="/images/avatar_small.png" />$}, image
+    assert_match %r{^<img class="foo" .* src="/images/avatar.svg" />$}, image
 
     image = user_thumbnail_tiny(gravatar_user)
-    assert_match %r{^<img class="user_thumbnail_tiny border border-secondary-subtle" .* src="http://www.gravatar.com/avatar/.*" />$}, image
+    assert_match %r{^<img class="user_thumbnail_tiny border border-secondary-subtle bg-body" .* src="http://www.gravatar.com/avatar/.*" />$}, image
 
     image = user_thumbnail_tiny(gravatar_user, :class => "foo")
     assert_match %r{^<img class="foo" .* src="http://www.gravatar.com/avatar/.*" />$}, image