From d4d7d8f409a6c4a8aa05168d4ddd3ffbc0020089 Mon Sep 17 00:00:00 2001
From: Rajat Talesra <rajat@forem.com>
Date: Thu, 26 Jan 2023 15:31:46 +0530
Subject: [PATCH] CSS: Dark mode minor fixes (#19014)

* Dark mode fixes

* Bookmark fix
---
 app/assets/javascripts/utilities/buildArticleHTML.js | 4 ++--
 app/assets/stylesheets/views/mod-actions.scss        | 6 ++++--
 app/views/articles/_single_story.html.erb            | 4 ++--
 3 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/app/assets/javascripts/utilities/buildArticleHTML.js b/app/assets/javascripts/utilities/buildArticleHTML.js
index 587dc9526..380196090 100644
--- a/app/assets/javascripts/utilities/buildArticleHTML.js
+++ b/app/assets/javascripts/utilities/buildArticleHTML.js
@@ -286,8 +286,8 @@ function buildArticleHTML(article, currentUserId = null) {
           data-reactable-id="${article.id}"
           data-article-author-id="${article.user_id}"
           aria-label="Save post ${article.title} to reading list">
-          <span class="bm-initial">${saveSVG}</span>
-          <span class="bm-success">${saveFilledSVG}</span>
+          <span class="bm-initial crayons-icon c-btn__icon">${saveSVG}</span>
+          <span class="bm-success crayons-icon c-btn__icon">${saveFilledSVG}</span>
         </button>
       `;
     } else if (article.class_name === 'User') {
diff --git a/app/assets/stylesheets/views/mod-actions.scss b/app/assets/stylesheets/views/mod-actions.scss
index aa702e129..8e9a64b10 100644
--- a/app/assets/stylesheets/views/mod-actions.scss
+++ b/app/assets/stylesheets/views/mod-actions.scss
@@ -430,7 +430,8 @@
         justify-content: space-between;
 
         &:hover {
-          background: rgba(59, 73, 223, 0.05);
+          background: rgba(var(--accent-brand-lighter-rgb), 0.2);
+          border-radius: 8px;
         }
 
         .level-rating-content {
@@ -466,7 +467,8 @@
       }
 
       .level-rating-button.selected {
-        background: rgba(59, 73, 223, 0.05);
+        background: rgba(var(--accent-brand-lighter-rgb), 0.2);
+        border-radius: 8px;
         svg {
           display: inline;
         }
diff --git a/app/views/articles/_single_story.html.erb b/app/views/articles/_single_story.html.erb
index 7213343e2..d64f6c4c1 100644
--- a/app/views/articles/_single_story.html.erb
+++ b/app/views/articles/_single_story.html.erb
@@ -170,10 +170,10 @@
             data-article-author-id="<%= story.user_id %>"
             aria-label="<%= t("views.articles.save.aria_label", title: story.title) %>"
             title="<%= t("views.articles.save.title", title: story.title) %>">
-            <span class="bm-initial">
+            <span class="bm-initial crayons-icon c-btn__icon">
               <%= inline_svg_tag("small-save.svg", alt: "", aria_hidden: true) %>
             </span>
-            <span class="bm-success">
+            <span class="bm-success crayons-icon c-btn__icon">
               <%= inline_svg_tag("small-save-filled.svg", alt: "", aria_hidden: true) %>
             </span>
           </button>