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 {