From 6ae06f2c7a1d9d8a612c49f42f3c025158ce74b3 Mon Sep 17 00:00:00 2001
From: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
Date: Tue, 14 Dec 2021 20:09:52 +0530
Subject: [PATCH] fix: Fixes wrong color for note tab in reply box (#3566)

* fix: Fixes wrong color for note tab in reply box

* Changes color for warning button

* Fixes spacing
---
 .../assets/scss/widgets/_buttons.scss         | 39 +++++++++++--------
 .../widgets/WootWriter/ReplyTopPanel.vue      |  4 +-
 2 files changed, 25 insertions(+), 18 deletions(-)

diff --git a/app/javascript/dashboard/assets/scss/widgets/_buttons.scss b/app/javascript/dashboard/assets/scss/widgets/_buttons.scss
index 6f5f191b5..4839aa9f0 100644
--- a/app/javascript/dashboard/assets/scss/widgets/_buttons.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_buttons.scss
@@ -66,24 +66,29 @@ $default-button-height: 4.0rem;
     }
   }
 
-  &.clear.button--only-icon:hover {
-    background: var(--w-50);
-
-
-    &.secondary {
-      background: var(--s-50);
-    }
-
-    &.success {
-      background: var(--g-50);
-    }
-
-    &.alert {
-      background: var(--r-50);
-    }
-
+  &.clear {
     &.warning {
-      background: var(--y-100);
+      color: var(--y-800);
+    }
+
+    &.button--only-icon:hover {
+      background: var(--w-50);
+
+      &.secondary {
+        background: var(--s-50);
+      }
+
+      &.success {
+        background: var(--g-50);
+      }
+
+      &.alert {
+        background: var(--r-50);
+      }
+
+      &.warning {
+        background: var(--y-100);
+      }
     }
   }
 
diff --git a/app/javascript/dashboard/components/widgets/WootWriter/ReplyTopPanel.vue b/app/javascript/dashboard/components/widgets/WootWriter/ReplyTopPanel.vue
index 8ae6224ed..f030e63e9 100644
--- a/app/javascript/dashboard/components/widgets/WootWriter/ReplyTopPanel.vue
+++ b/app/javascript/dashboard/components/widgets/WootWriter/ReplyTopPanel.vue
@@ -13,6 +13,7 @@
       <woot-button
         class="button--note"
         variant="clear"
+        color-scheme="warning"
         :class="noteButtonClass"
         @click="handleNoteClick"
       >
@@ -146,7 +147,8 @@ export default {
     border-radius: 0;
     border-right: 1px solid var(--color-border);
 
-    &:hover {
+    &:hover,
+    &:focus {
       border-right: 1px solid var(--color-border);
     }
   }