Use inline svg for notice icons

Allows to set fill to currentColor which adapts to dark mode.

diff --git a/app/assets/images/notice.png b/app/assets/images/notice.png
deleted file mode 100644 (file)
index f9285e4..0000000
Binary files a/app/assets/images/notice.png and /dev/null differ

diff --git a/app/assets/images/notice.svg b/app/assets/images/notice.svg
deleted file mode 100644 (file)
index cb779ce..0000000
--- a/app/assets/images/notice.svg
+++ /dev/null
@@ -1,73 +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="svg3864"
-   version="1.1"
-   inkscape:version="0.48.2 r9819"
-   width="16"
-   height="16"
-   sodipodi:docname="notice.svg"
-   inkscape:export-filename="/Users/saman/work_repos/openstreetmap-website/app/assets/images/notice.png"
-   inkscape:export-xdpi="90"
-   inkscape:export-ydpi="90">
-  <metadata
-     id="metadata3870">
-    <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="defs3868" />
-  <sodipodi:namedview
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1"
-     objecttolerance="10"
-     gridtolerance="10"
-     guidetolerance="10"
-     inkscape:pageopacity="0"
-     inkscape:pageshadow="2"
-     inkscape:window-width="1405"
-     inkscape:window-height="1009"
-     id="namedview3866"
-     showgrid="false"
-     inkscape:zoom="21.536424"
-     inkscape:cx="15.375"
-     inkscape:cy="1.125"
-     inkscape:window-x="326"
-     inkscape:window-y="43"
-     inkscape:window-maximized="0"
-     inkscape:current-layer="svg3864"
-     fit-margin-top="0"
-     fit-margin-left="0"
-     fit-margin-right="0"
-     fit-margin-bottom="0"
-     inkscape:snap-bbox="true"
-     inkscape:snap-nodes="true">
-    <inkscape:grid
-       type="xygrid"
-       id="grid3920"
-       empspacing="5"
-       visible="true"
-       enabled="true"
-       snapvisiblegridlinesonly="true" />
-  </sodipodi:namedview>
-  <path
-     style="color:#000000;fill:#333333;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:6;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
-     d="M 2 0 C 0.892 0 0 0.892 0 2 L 0 14 C 0 15.108 0.892 16 2 16 L 14 16 C 15.108 16 16 15.108 16 14 L 16 2 C 16 0.892 15.108 0 14 0 L 2 0 z M 7 3 L 9 3 L 9 8 L 7 8 L 7 3 z M 7 10 L 9 10 L 9 12 L 7 12 L 7 10 z "
-     id="rect7131" />
-</svg>

diff --git a/app/helpers/svg_helper.rb b/app/helpers/svg_helper.rb
index 62b39bf6792fb515e5890715bf5768848f86a9d8..b04ab1b0d56439a7b921c341bc2a4e731c365e12 100644 (file)
--- a/app/helpers/svg_helper.rb
+++ b/app/helpers/svg_helper.rb
@@ -1,4 +1,10 @@
 module SvgHelper
+  def notice_svg_tag
+    path_data = "M 2 0 C 0.892 0 0 0.892 0 2 L 0 14 C 0 15.108 0.892 16 2 16 L 14 16 C 15.108 16 16 15.108 16 14 L 16 2 C 16 0.892 15.108 0 14 0 L 2 0 z M 7 3 L 9 3 L 9 8 L 7 8 L 7 3 z M 7 10 L 9 10 L 9 12 L 7 12 L 7 10 z"
+    path_tag = tag.path :d => path_data, :fill => "currentColor"
+    tag.svg path_tag, :width => 16, :height => 16
+  end
+
   def previous_page_svg_tag(**options)
     adjacent_page_svg_tag(dir == "rtl" ? 1 : -1, **options)
   end

diff --git a/app/views/account/deletions/show.html.erb b/app/views/account/deletions/show.html.erb
index 0ed4d663f03315944f9f7d5b1df1e82a81042f7e..9b9b0f182ccd88caae6844096ce887594294c257 100644 (file)
--- a/app/views/account/deletions/show.html.erb
+++ b/app/views/account/deletions/show.html.erb
@@ -6,7 +6,7 @@
 
 <div class="alert alert-danger row mx-0 p-3 align-items-center">
   <div class="col-auto">
-    <%= image_tag("notice.png", :srcset => image_path("notice.svg")) %>
+    <%= notice_svg_tag %>
   </div>
   <div class="col">
     <p class="mb-0"><%= t ".warning" %></p>

diff --git a/app/views/layouts/_flash.html.erb b/app/views/layouts/_flash.html.erb
index 1d3bc34219bf6316ce8b16666b6587384d20451a..d8adbd0fdc286d437efd2afcc68f442a0f433c2f 100644 (file)
--- a/app/views/layouts/_flash.html.erb
+++ b/app/views/layouts/_flash.html.erb
@@ -1,7 +1,7 @@
 <% if flash[:error] %>
   <div class="alert alert-danger row mx-0 mb-0 p-3 rounded-0 align-items-center">
     <div class="col-auto">
-      <%= image_tag("notice.png", :srcset => image_path("notice.svg")) %>
+      <%= notice_svg_tag %>
     </div>
     <div class="col"><%= render_flash(flash[:error]) %></div>
   </div>
@@ -10,7 +10,7 @@
 <% if flash[:warning] %>
   <div class="alert alert-warning row mx-0 mb-0 p-3 rounded-0 align-items-center">
     <div class="col-auto">
-      <%= image_tag("notice.png", :srcset => image_path("notice.svg")) %>
+      <%= notice_svg_tag %>
     </div>
     <div class="col"><%= render_flash(flash[:warning]) %></div>
   </div>
@@ -19,7 +19,7 @@
 <% if flash[:notice] %>
   <div class="alert alert-success row mx-0 mb-0 p-3 rounded-0 align-items-center">
     <div class="col-auto">
-      <%= image_tag("notice.png", :srcset => image_path("notice.svg")) %>
+      <%= notice_svg_tag %>
     </div>
     <div class="col"><%= render_flash(flash[:notice]) %></div>
   </div>