From baf697f064bfdd8c691d1c2ee84fff8f8130a699 Mon Sep 17 00:00:00 2001
From: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
Date: Wed, 30 Mar 2022 18:53:24 +0530
Subject: [PATCH] design: Changes yellow color palette for better contrast
 ratio (#4334)

Co-authored-by: Fayaz Ahmed <15716057+fayazara@users.noreply.github.com>
---
 .../assets/scss/widgets/_buttons.scss         |  6 +++---
 .../components/NetworkNotification.vue        |  4 ++--
 .../widgets/WootWriter/ReplyTopPanel.vue      |  4 ++--
 .../shared/assets/stylesheets/colors.scss     | 20 +++++++++----------
 4 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/app/javascript/dashboard/assets/scss/widgets/_buttons.scss b/app/javascript/dashboard/assets/scss/widgets/_buttons.scss
index 4839aa9f0..a0827b58b 100644
--- a/app/javascript/dashboard/assets/scss/widgets/_buttons.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_buttons.scss
@@ -62,13 +62,13 @@ $default-button-height: 4.0rem;
     }
 
     &.warning {
-      @include button-style(var(--y-100), var(--y-200), var(--y-900));
+      @include button-style(var(--y-100), var(--y-200), var(--y-700));
     }
   }
 
   &.clear {
     &.warning {
-      color: var(--y-800);
+      color: var(--y-600);
     }
 
     &.button--only-icon:hover {
@@ -87,7 +87,7 @@ $default-button-height: 4.0rem;
       }
 
       &.warning {
-        background: var(--y-100);
+        background: var(--y-50);
       }
     }
   }
diff --git a/app/javascript/dashboard/components/NetworkNotification.vue b/app/javascript/dashboard/components/NetworkNotification.vue
index c716731d5..115a674a2 100644
--- a/app/javascript/dashboard/components/NetworkNotification.vue
+++ b/app/javascript/dashboard/components/NetworkNotification.vue
@@ -15,9 +15,9 @@
           {{ $t('NETWORK.BUTTON.REFRESH') }}
         </woot-button>
         <woot-button
-          variant="clear"
+          variant="smooth"
           size="small"
-          color-scheme="secondary"
+          color-scheme="warning"
           icon="dismiss-circle"
           @click="closeNotification"
         >
diff --git a/app/javascript/dashboard/components/widgets/WootWriter/ReplyTopPanel.vue b/app/javascript/dashboard/components/widgets/WootWriter/ReplyTopPanel.vue
index f030e63e9..21e233500 100644
--- a/app/javascript/dashboard/components/widgets/WootWriter/ReplyTopPanel.vue
+++ b/app/javascript/dashboard/components/widgets/WootWriter/ReplyTopPanel.vue
@@ -163,13 +163,13 @@ export default {
 
     &:hover,
     &:active {
-      color: var(--y-800);
+      color: var(--y-700);
     }
   }
 }
 
 .button--note {
-  color: var(--y-900);
+  color: var(--y-600);
 }
 
 .action-wrap {
diff --git a/app/javascript/shared/assets/stylesheets/colors.scss b/app/javascript/shared/assets/stylesheets/colors.scss
index 5784bb6bf..3f64ce58b 100644
--- a/app/javascript/shared/assets/stylesheets/colors.scss
+++ b/app/javascript/shared/assets/stylesheets/colors.scss
@@ -26,16 +26,16 @@
   --g-800: #009000;
   --g-900: #007000;
 
-  --y-50: #FFFCF4;
-  --y-100: #FFFAC5;
-  --y-200: #FFF69E;
-  --y-300: #FEF176;
-  --y-400: #FCEC56;
-  --y-500: #F9E736;
-  --y-600: #FFDD3A;
-  --y-700: #FFC532;
-  --y-800: #FDAD2A;
-  --y-900: #F9841B;
+  --y-50: #fefde8;
+  --y-100: #fdfcc4;
+  --y-200: #fcf68c;
+  --y-300: #f9e736;
+  --y-400: #f6d819;
+  --y-500: #e6c00c;
+  --y-600: #c69608;
+  --y-700: #9e6b0a;
+  --y-800: #835510;
+  --y-900: #6f4514;
 
   --s-25: #F8FAFC;
   --s-50: #F1F5F8;