From 2773cbbe6e33d039bf7ee74b7445345d71c60228 Mon Sep 17 00:00:00 2001
From: Byron Eric Perez <89370060+ByronEricPerez@users.noreply.github.com>
Date: Thu, 21 Jul 2022 17:58:12 -0300
Subject: [PATCH] changed the color of the editor-toolbar_hover class (#7642)

* changed the color of the editor-toolbar_hover class

* Fixed hover, colors and spacing of editor-toolbar_hover class

* active editor-toolbar class modified

* var --color-editor-button-hover-bg and --color-editor-button-active-bg created

* --color-editor-button-hover-bg and --color-editor-button-active-bg
color corrected in light
---
 ui/scss/component/_markdown-editor.scss | 7 ++++++-
 ui/scss/init/_base-theme.scss           | 2 ++
 ui/scss/themes/dark.scss                | 2 ++
 ui/scss/themes/light.scss               | 2 ++
 4 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/ui/scss/component/_markdown-editor.scss b/ui/scss/component/_markdown-editor.scss
index 5c9df7af0..221d66e61 100644
--- a/ui/scss/component/_markdown-editor.scss
+++ b/ui/scss/component/_markdown-editor.scss
@@ -114,10 +114,15 @@
       padding-right: 0;
       padding-left: 0;
       border: transparent;
+      margin-right: var(--spacing-xxs);
 
       &:hover {
-        color: var(--color-header-link-active);
+        color: var(--color-header-link);
+        background-color: var(--color-editor-button-hover-bg);
       }
     }
+    button.active {
+      background: var(--color-editor-button-active-bg);
+    }
   }
 }
diff --git a/ui/scss/init/_base-theme.scss b/ui/scss/init/_base-theme.scss
index 3018f4863..686458f4c 100644
--- a/ui/scss/init/_base-theme.scss
+++ b/ui/scss/init/_base-theme.scss
@@ -170,6 +170,8 @@
   --color-editor-url: var(--color-editor-string);
   --color-editor-hr: var(--color-editor-tag);
   --color-editor-hr-preview: #cccccc;
+  --color-editor-button-hover-bg: #333338;
+  --color-editor-button-active-bg: #333338;
 
   // Other
   --color-focus: #bfdbfe;
diff --git a/ui/scss/themes/dark.scss b/ui/scss/themes/dark.scss
index 20fe82b5f..9899eb8cf 100644
--- a/ui/scss/themes/dark.scss
+++ b/ui/scss/themes/dark.scss
@@ -186,6 +186,8 @@
   --color-editor-url: var(--color-editor-string);
   --color-editor-hr: var(--color-editor-tag);
   --color-editor-hr-preview: #a0a0a0;
+  --color-editor-button-hover-bg: #333338;
+  --color-editor-button-active-bg: #333338;
 
   // Ads
   --color-ads-background: #475057;
diff --git a/ui/scss/themes/light.scss b/ui/scss/themes/light.scss
index 67b79ac6c..cba3dcaa1 100644
--- a/ui/scss/themes/light.scss
+++ b/ui/scss/themes/light.scss
@@ -171,6 +171,8 @@
   --color-editor-url: var(--color-editor-string);
   --color-editor-hr: var(--color-editor-tag);
   --color-editor-hr-preview: #cccccc;
+  --color-editor-button-hover-bg: #e5e7eb;
+  --color-editor-button-active-bg: #e5e7eb;
 
   // Ads
   --color-ads-background: #fae5ff;