design: Changes yellow color palette for better contrast ratio (#4334)

Co-authored-by: Fayaz Ahmed <15716057+fayazara@users.noreply.github.com>

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);
       }
     }
   }

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"
         >

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 {

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;