chore: Update sidebar colors

app/javascript/dashboard/components/layout/sidebarComponents/NotificationBell.vue

@@ -34,9 +34,9 @@ export default {
 <template>
   <div class="mb-4">
     <button
-      class="relative flex items-center justify-center w-10 h-10 p-0 my-2 rounded-lg text-slate-600 dark:text-slate-100 hover:bg-slate-25 dark:hover:bg-slate-700 dark:hover:text-slate-100 hover:text-slate-600"
+      class="relative flex items-center justify-center w-10 h-10 p-0 my-2 rounded-lg text-slate-600 dark:text-slate-100 hover:bg-slate-25 dark:hover:bg-n-solid-3 dark:hover:text-slate-100 hover:text-slate-600"
       :class="{
-        'bg-woot-50 dark:bg-slate-800 text-woot-500 hover:bg-woot-50':
+        'dark:bg-n-solid-3 bg-n-brand/10 text-n-blue-text hover:!bg-n-brand/15 hover:dark:!bg-n-brand/10':
           isNotificationPanelActive,
       }"
       @click="openNotificationPanel"

app/javascript/dashboard/components/layout/sidebarComponents/Primary.vue

@@ -95,7 +95,7 @@ export default {
         v-if="!isACustomBrandedInstance"
         v-tooltip.right="$t(`SIDEBAR.DOCS`)"
         :href="helpDocsURL"
-        class="relative flex items-center justify-center w-10 h-10 my-2 rounded-lg text-slate-700 dark:text-slate-100 hover:bg-slate-25 dark:hover:bg-slate-700 dark:hover:text-slate-100 hover:text-slate-600"
+        class="relative flex items-center justify-center w-10 h-10 my-2 rounded-lg text-slate-700 dark:text-slate-100 hover:bg-slate-25 dark:hover:bg-n-solid-3 dark:hover:text-slate-100 hover:text-slate-600"
         rel="noopener noreferrer nofollow"
         target="_blank"
       >

app/javascript/dashboard/components/layout/sidebarComponents/PrimaryNavItem.vue

@@ -95,9 +95,9 @@ export default {
   <OnClickOutside v-if="isHelpCenter" @trigger="showHelpCenterMenu = false">
     <button
       v-tooltip.top="$t(`SIDEBAR.${name}`)"
-      class="relative flex items-center justify-center w-10 h-10 my-2 rounded-lg text-slate-700 dark:text-slate-100 hover:!bg-slate-25 dark:hover:!bg-slate-700 dark:hover:text-slate-100 hover:text-slate-600"
+      class="relative flex items-center justify-center w-10 h-10 my-2 rounded-lg text-slate-700 dark:text-slate-100 hover:!bg-slate-25 dark:hover:!bg-n-solid-3 dark:hover:text-slate-100 hover:text-slate-600"
       :class="{
-        'bg-woot-50 dark:bg-slate-800 text-woot-500 hover:bg-woot-50':
+        'bg-n-brand/10 dark:bg-slate-800 text-n-blue-text hover:!bg-n-brand/20 hover:dark:!bg-n-brand/10':
           isHelpCenterSelected,
       }"
       @click="toggleHelpCenterMenu"
@@ -121,9 +121,9 @@ export default {
     <a
       v-tooltip.right="$t(`SIDEBAR.${name}`)"
       :href="href"
-      class="relative flex items-center justify-center w-10 h-10 my-2 rounded-lg text-slate-700 dark:text-slate-100 hover:bg-slate-25 dark:hover:bg-slate-700 dark:hover:text-slate-100 hover:text-slate-600"
+      class="relative flex items-center justify-center w-10 h-10 my-2 rounded-lg text-slate-700 dark:text-slate-100 hover:bg-slate-25 dark:hover:bg-n-solid-3 dark:hover:text-slate-100 hover:text-slate-600"
       :class="{
-        'bg-woot-50 dark:bg-slate-800 text-woot-500 hover:bg-woot-50':
+        'dark:bg-n-solid-3 bg-n-brand/10 text-n-blue-text hover:!bg-n-brand/15 hover:dark:!bg-n-brand/10':
           isActive || isChildMenuActive,
       }"
       :rel="openInNewPage ? 'noopener noreferrer nofollow' : undefined"

app/javascript/dashboard/components/layout/sidebarComponents/SecondaryChildNavItem.vue

@@ -58,9 +58,9 @@ export default {
     active-class="active"
   >
     <li
-      class="h-7 my-1 hover:bg-slate-25 hover:text-bg-50 flex items-center px-2 rounded-md dark:hover:bg-slate-800"
+      class="flex items-center px-2 my-1 rounded-md h-7 hover:bg-slate-25 hover:text-bg-50 dark:hover:bg-n-solid-3"
       :class="{
-        'bg-woot-25 dark:bg-slate-800': isActive,
+        'bg-n-brand/5 dark:bg-n-brand/10': isActive,
         'text-ellipsis overflow-hidden whitespace-nowrap max-w-full':
           shouldTruncate,
       }"
@@ -68,7 +68,7 @@ export default {
     >
       <a
         :href="href"
-        class="inline-flex text-left max-w-full w-full items-center"
+        class="inline-flex items-center w-full max-w-full text-left"
       >
         <span
           v-if="icon"
@@ -77,7 +77,7 @@ export default {
           <fluent-icon
             class="text-xxs text-slate-700 dark:text-slate-200"
             :class="{
-              'text-woot-500 dark:text-woot-500': isActive,
+              '!text-n-blue-text dark:!text-n-blue-text': isActive,
             }"
             :icon="icon"
             size="12"
@@ -90,13 +90,13 @@ export default {
           :style="{ backgroundColor: labelColor }"
         />
         <div
-          class="items-center flex overflow-hidden whitespace-nowrap text-ellipsis w-full justify-between"
+          class="flex items-center justify-between w-full overflow-hidden whitespace-nowrap text-ellipsis"
         >
           <span
             :title="menuTitle"
             class="text-sm text-slate-700 dark:text-slate-100"
             :class="{
-              'text-woot-500 dark:text-woot-500': isActive,
+              '!text-n-blue-text dark:!text-n-blue-text': isActive,
               'text-ellipsis overflow-hidden whitespace-nowrap max-w-full':
                 shouldTruncate,
             }"
@@ -121,7 +121,7 @@ export default {
         >
           <fluent-icon
             v-tooltip.top-end="$t('SIDEBAR.REAUTHORIZE')"
-            class="text-xxs text-red-500 dark:text-red-300"
+            class="text-red-500 text-xxs dark:text-red-300"
             :icon="warningIcon"
             size="12"
           />

app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue

@@ -140,7 +140,7 @@ export default {
         this.isContactsDefaultRoute ||
         this.isCurrentRoute
       ) {
-        return 'bg-woot-25 dark:bg-slate-800 text-woot-500 dark:text-woot-500 hover:text-woot-500 dark:hover:text-woot-500 active-view';
+        return 'bg-n-brand/5 dark:bg-n-brand/10 !text-n-blue-text dark:!text-n-blue-text hover:text-n-blue-text dark:hover:text-n-blue-text active-view';
       }
       if (this.hasSubMenu) {
         if (
@@ -149,7 +149,7 @@ export default {
           this.isIntegrationsSettings ||
           this.isApplicationsSettings
         ) {
-          return 'bg-woot-25 dark:bg-slate-800 text-woot-500 dark:text-woot-500 hover:text-woot-500 dark:hover:text-woot-500 active-view';
+          return 'bg-n-brand/5 dark:bg-n-brand/10 !text-n-blue-text dark:!text-n-blue-text hover:text-n-blue-text dark:hover:text-n-blue-text active-view';
         }
         return 'hover:text-slate-700 dark:hover:text-slate-100';
       }
@@ -217,7 +217,7 @@ export default {
     </div>
     <router-link
       v-else
-      class="flex items-center p-2 m-0 text-sm leading-4 rounded-lg text-slate-700 dark:text-slate-100 hover:bg-slate-25 dark:hover:bg-slate-800"
+      class="flex items-center p-2 m-0 text-sm leading-4 rounded-lg text-slate-700 dark:text-slate-100 hover:bg-slate-25 dark:hover:bg-n-solid-3"
       :class="computedClass"
       :to="menuItem && menuItem.toState"
     >
@@ -233,7 +233,7 @@ export default {
         :class="{
           'text-slate-300 dark:text-slate-600': isCountZero && !isActiveView,
           'text-slate-600 dark:text-slate-50': !isCountZero && !isActiveView,
-          'bg-woot-75 dark:bg-woot-200 text-woot-600 dark:text-woot-600':
+          'bg-n-brand/5 dark:bg-n-brand/10 text-n-brand dark:text-n-brand':
             isActiveView,
           'bg-slate-50 dark:bg-slate-700': !isActiveView,
         }"