From f5e0171dce5ea68973d4be8ca5001b2fd48600ae Mon Sep 17 00:00:00 2001
From: Mateus Abelli <mateusabelli@gmail.com>
Date: Sun, 8 Oct 2023 23:00:58 -0300
Subject: [PATCH] Fix icons colors on the mod menu (#20218)

* Fix SVG properties

* Fix SVG selectors and typos

* Normalize crayons_icon_tag usage
---
 app/assets/images/admin.svg                   | 3 +--
 app/assets/stylesheets/views/mod-actions.scss | 9 ++++-----
 app/views/moderations/actions_panel.html.erb  | 6 +++---
 3 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/app/assets/images/admin.svg b/app/assets/images/admin.svg
index acd37bb08..91ac6f9ed 100644
--- a/app/assets/images/admin.svg
+++ b/app/assets/images/admin.svg
@@ -1,4 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
-    <path fill="none" d="M0 0h24v24H0z"/>
+<svg viewBox="0 0 24 24" width="24" height="24" xmlns="http://www.w3.org/2000/svg">
     <path d="M2.8 5.2 7 8l4.186-5.86a1 1 0 0 1 1.628 0L17 8l4.2-2.8a1 1 0 0 1 1.547.95l-1.643 13.967a1 1 0 0 1-.993.883H3.889a1 1 0 0 1-.993-.883L1.253 6.149A1 1 0 0 1 2.8 5.2zM12 15a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"/>
 </svg>
diff --git a/app/assets/stylesheets/views/mod-actions.scss b/app/assets/stylesheets/views/mod-actions.scss
index 79b1e85c7..97f6445fc 100644
--- a/app/assets/stylesheets/views/mod-actions.scss
+++ b/app/assets/stylesheets/views/mod-actions.scss
@@ -372,8 +372,8 @@
         background-color: var(--base-inverted);
         .label-wrapper > .icon {
           background-color: var(--accent-brand);
-          svg {
-            fill: var(--base-inverted);
+          svg path {
+            fill: rgba(var(--white), 1);
           }
         }
         header h2 {
@@ -396,7 +396,7 @@
         }
         .icon {
           background-color: var(--base-20);
-          svg {
+          svg path {
             fill: var(--base-50);
           }
         }
@@ -717,7 +717,6 @@
     padding: 5px;
     font-size: 17px;
     height: 100px;
-    box-sizing: boder-box;
     border-radius: 3px;
     border: 1px solid var(--card-color-tertiary);
   }
@@ -733,7 +732,7 @@
     display: inline-block;
     margin: 30px auto 10px;
     min-width: 205px;
-    box-sizing: boder-box;
+    box-sizing: border-box;
     position: relative;
   }
 
diff --git a/app/views/moderations/actions_panel.html.erb b/app/views/moderations/actions_panel.html.erb
index 916a21f12..acae1e6f8 100644
--- a/app/views/moderations/actions_panel.html.erb
+++ b/app/views/moderations/actions_panel.html.erb
@@ -264,7 +264,7 @@
     <button aria-haspopup="true" aria-expanded="false" aria-controls="set-experience-options" class="other-things-btn set-experience" type="button" data-other-things-type="set-experience" aria-label="<%= t("views.moderations.actions.experience.aria_label") %>">
       <div class="label-wrapper">
         <div class="icon circle centered-icon">
-          <%= crayons_icon_tag(:book, title: t("views.moderations.actions.experience.icon")) %>
+          <%= crayons_icon_tag("book", title: t("views.moderations.actions.experience.icon")) %>
         </div>
         <header>
           <h2><%= t("views.moderations.actions.experience.heading") %></h2>
@@ -312,7 +312,7 @@
       aria-label="<%= t("views.moderations.actions.admin.aria_label") %>">
       <div class="label-wrapper">
         <div class="icon circle centered-icon">
-          <%= inline_svg_tag("admin.svg", aria_hidden: true, title: t("views.moderations.actions.admin.icon")) %>
+          <%= crayons_icon_tag("admin", title: t("views.moderations.actions.admin.icon")) %>
         </div>
         <header>
           <h2><%= t("views.moderations.actions.admin.heading") %></h2>
@@ -320,7 +320,7 @@
         </header>
       </div>
       <div class="toggle-chevron-container">
-        <%= inline_svg_tag("arrow-down-fill.svg", aria: true, title: t("views.moderations.actions.toggle")) %>
+        <%= crayons_icon_tag("arrow-down-fill", title: t("views.moderations.actions.toggle")) %>
       </div>
     </button>