fix for #77 that flash message icons aren't shown correctly (#79)

Signed-off-by: Kai Wagner <kai.wagner@percona.com>

Author: ImTheKai

app/assets/stylesheets/components/form.css

@@ -29,50 +29,28 @@ input[type=submit], input[type=button] {
   display: flex;
   align-items: center;
   gap: var(--spacing-2);
-
-  &::before {
-    font-family: "Font Awesome 6 Free";
-    font-weight: 900;
-    font-size: var(--font-size-md);
-  }
 }
 
 .flash.alert {
   background-color: var(--color-danger-soft);
   color: var(--color-danger);
   border: var(--border-width) solid var(--color-danger);
-
-  &::before {
-    content: "\f071"; /* fa-triangle-exclamation */
-  }
 }
 
 .flash.notice {
   background-color: var(--color-success-soft);
   color: var(--color-success);
   border: var(--border-width) solid var(--color-success);
-
-  &::before {
-    content: "\f00c"; /* fa-check */
-  }
 }
 
 .flash.warning {
   background-color: var(--color-warning-bg);
   color: var(--color-warning-text);
   border: var(--border-width) solid var(--color-warning);
-
-  &::before {
-    content: "\f06a"; /* fa-circle-exclamation */
-  }
 }
 
 .flash.info {
   background-color: var(--color-info-soft);
   color: var(--color-info);
   border: var(--border-width) solid var(--color-info);
-
-  &::before {
-    content: "\f05a"; /* fa-circle-info */
-  }
 }

app/helpers/application_helper.rb

@@ -116,4 +116,16 @@ def can_remove_note_mention?(mention, user)
       false
     end
   end
+
+  def flash_icon(type)
+    icon_class = case type.to_s
+    when "alert"   then "fa-solid fa-triangle-exclamation"
+    when "notice"  then "fa-solid fa-check"
+    when "warning" then "fa-solid fa-circle-exclamation"
+    when "info"    then "fa-solid fa-circle-info"
+    end
+    return unless icon_class
+
+    content_tag(:i, "", class: icon_class, aria: { hidden: "true" })
+  end
 end

app/views/layouts/application.html.slim

@@ -134,11 +134,13 @@ html data-theme="light"
         main.container
           - flash.each do |type, message|
             .flash class=type
+              = flash_icon(type)
               = message
           = yield
     - else
       main.container
         - flash.each do |type, message|
           .flash class=type
+            = flash_icon(type)
             = message
         = yield