From 3d164271a85b13486b72e40ead24052514febd5c Mon Sep 17 00:00:00 2001
From: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
Date: Mon, 11 Apr 2022 17:27:28 +0530
Subject: [PATCH] fix: Yellow color shades are inconsistent (#4391)

---
 .../dashboard/assets/scss/_utility-helpers.scss           | 4 ----
 app/javascript/dashboard/components/ui/Banner.vue         | 6 +++---
 app/javascript/dashboard/components/ui/Label.vue          | 2 +-
 app/javascript/dashboard/components/widgets/Thumbnail.vue | 2 +-
 .../widgets/conversation/AvailabilityStatusBadge.vue      | 2 +-
 .../widgets/conversation/ConversationHeader.vue           | 8 ++++++--
 6 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/app/javascript/dashboard/assets/scss/_utility-helpers.scss b/app/javascript/dashboard/assets/scss/_utility-helpers.scss
index 8a85dc6a5..abea0e28c 100644
--- a/app/javascript/dashboard/assets/scss/_utility-helpers.scss
+++ b/app/javascript/dashboard/assets/scss/_utility-helpers.scss
@@ -51,10 +51,6 @@
   background-color: var(--white);
 }
 
-.text-y-800 {
-  color: var(--y-800);
-}
-
 .text-ellipsis {
   overflow: hidden;
   text-overflow: ellipsis;
diff --git a/app/javascript/dashboard/components/ui/Banner.vue b/app/javascript/dashboard/components/ui/Banner.vue
index c9d71bfaf..227b0a37e 100644
--- a/app/javascript/dashboard/components/ui/Banner.vue
+++ b/app/javascript/dashboard/components/ui/Banner.vue
@@ -112,10 +112,10 @@ export default {
   }
 
   &.warning {
-    background: var(--y-800);
-    color: var(--s-600);
+    background: var(--y-600);
+    color: var(--y-500);
     a {
-      color: var(--s-600);
+      color: var(--y-500);
     }
   }
 
diff --git a/app/javascript/dashboard/components/ui/Label.vue b/app/javascript/dashboard/components/ui/Label.vue
index 83e55b040..504f6fc9e 100644
--- a/app/javascript/dashboard/components/ui/Label.vue
+++ b/app/javascript/dashboard/components/ui/Label.vue
@@ -157,7 +157,7 @@ export default {
   &.warning {
     background: var(--y-100);
     color: var(--y-900);
-    border: 1px solid var(--y-300);
+    border: 1px solid var(--y-200);
     a {
       color: var(--y-900);
     }
diff --git a/app/javascript/dashboard/components/widgets/Thumbnail.vue b/app/javascript/dashboard/components/widgets/Thumbnail.vue
index 5a4a69008..d12a927ef 100644
--- a/app/javascript/dashboard/components/widgets/Thumbnail.vue
+++ b/app/javascript/dashboard/components/widgets/Thumbnail.vue
@@ -209,7 +209,7 @@ export default {
   }
 
   .user-online-status--busy {
-    background: var(--y-700);
+    background: var(--y-500);
   }
 
   .user-online-status--offline {
diff --git a/app/javascript/dashboard/components/widgets/conversation/AvailabilityStatusBadge.vue b/app/javascript/dashboard/components/widgets/conversation/AvailabilityStatusBadge.vue
index 766166fd3..50bcab5ab 100644
--- a/app/javascript/dashboard/components/widgets/conversation/AvailabilityStatusBadge.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/AvailabilityStatusBadge.vue
@@ -23,7 +23,7 @@ export default {
     background: var(--s-500);
   }
   &__busy {
-    background: var(--y-400);
+    background: var(--y-500);
   }
 }
 </style>
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
index 89431eca3..c30f23c20 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
@@ -14,8 +14,8 @@
           <fluent-icon
             v-if="!isHMACVerified"
             v-tooltip="$t('CONVERSATION.UNVERIFIED_SESSION')"
-            class="text-y-800"
             size="14"
+            class="hmac-warning__icon"
             icon="warning"
           />
         </h3>
@@ -181,7 +181,11 @@ export default {
 
   .snoozed--display-text {
     font-weight: var(--font-weight-medium);
-    color: var(--y-900);
+    color: var(--y-600);
   }
 }
+
+.hmac-warning__icon {
+  color: var(--y-600);
+}
 </style>