feat: update color palette [CW-2293] (#7617)

app/javascript/dashboard/assets/scss/_foundation-custom.scss

@@ -26,6 +26,7 @@ code {
     background: $color-background;
     border-radius: var(--border-radius-large);
     padding: $space-two;
+    @apply bg-slate-50 dark:bg-slate-600 text-slate-800 dark:text-slate-100;
   }
 }
 

app/javascript/dashboard/assets/scss/_woot.scss

@@ -72,7 +72,6 @@
 @import '~shared/assets/stylesheets/ionicons';
 @import 'utility-helpers';
 
-
 .tooltip {
   @apply bg-slate-900 text-white py-1 px-2 z-40 text-xs rounded-md dark:bg-slate-200 dark:text-slate-900;
 }

app/javascript/dashboard/assets/scss/app.scss

@@ -1 +1,6 @@
+// scss-lint:disable PropertySpelling
+:root {
+  color-scheme: light dark;
+}
+
 @import 'woot';

app/javascript/dashboard/assets/scss/plugins/_multiselect.scss

@@ -18,7 +18,15 @@
   }
 
   &.multiselect--disabled {
-    @apply opacity-80;
+    @apply opacity-50 border border-slate-200 dark:border-slate-600 rounded-md cursor-not-allowed;
+
+    .multiselect__select {
+      @apply cursor-not-allowed bg-white dark:bg-slate-900 rounded-md;
+    }
+
+    .multiselect__tags {
+      @apply border-0;
+    }
   }
 
   .multiselect--active {
@@ -36,7 +44,7 @@
   }
 
   .multiselect__content-wrapper {
-    @apply bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-600 text-slate-800 dark:text-slate-100;
+    @apply bg-white dark:bg-slate-900 border border-solid border-slate-200 dark:border-slate-600 text-slate-800 dark:text-slate-100;
   }
 
   .multiselect__content {

app/javascript/dashboard/assets/scss/widgets/_buttons.scss

@@ -49,7 +49,7 @@
     }
 
     &.success {
-      @apply text-green-700 dark:text-green-100 hover:bg-green-50 dark:hover:bg-green-800;
+      @apply text-green-700 dark:text-green-100 hover:bg-green-50 dark:hover:bg-green-800 ;
     }
 
     &.alert {
@@ -64,19 +64,19 @@
       @apply bg-slate-75 dark:bg-slate-900 border-slate-100 dark:border-slate-700;
 
       &.secondary {
-        @apply border-slate-100 dark:border-slate-700;
+        @apply border-slate-100 dark:border-slate-700 text-slate-800 dark:text-slate-100;
       }
 
       &.success {
-        @apply border-slate-100 dark:border-slate-700;
+        @apply border-slate-100 dark:border-slate-700 text-green-800 dark:text-green-100;
       }
 
       &.alert {
-        @apply border-slate-100 dark:border-slate-700;
+        @apply border-slate-100 dark:border-slate-700 text-red-700 dark:text-red-100;
       }
 
       &.warning {
-        @apply border-slate-100 dark:border-slate-700;
+        @apply border-slate-100 dark:border-slate-700 text-yellow-700 dark:text-yellow-700;
       }
     }
   }
@@ -90,7 +90,7 @@
     }
 
     &.success {
-      @apply bg-green-50 dark:bg-green-700 text-green-700 dark:text-green-100 hover:bg-green-100 dark:hover:bg-green-800;
+      @apply bg-green-50 dark:bg-green-700 text-green-700 dark:text-green-100 hover:bg-green-100 dark:hover:bg-green-800 hover:text-green-800 dark:hover:text-green-100;
     }
 
     &.alert {
@@ -110,7 +110,7 @@
     }
 
     &.success {
-      @apply text-green-700 dark:text-green-100;
+      @apply text-green-700 dark:text-green-100 ;
     }
 
     &.alert {
@@ -125,19 +125,19 @@
       @apply hover:bg-woot-50 dark:hover:bg-woot-900/50 hover:text-woot-500 dark:hover:text-woot-100;
 
       &.secondary {
-        @apply hover:bg-slate-50 dark:hover:bg-slate-700;
+        @apply hover:bg-slate-50 dark:hover:bg-slate-700 text-slate-800 dark:text-slate-100;
       }
 
       &.success {
-        @apply hover:bg-green-50 dark:hover:bg-green-800;
+        @apply hover:bg-green-50 dark:hover:bg-green-800 text-green-800 dark:text-green-100;
       }
 
       &.alert {
-        @apply hover:bg-red-50 dark:hover:bg-red-800;
+        @apply hover:bg-red-50 dark:hover:bg-red-800 text-red-700 dark:text-red-100;
       }
 
       &.warning {
-        @apply hover:bg-yellow-50 dark:hover:bg-yellow-100;
+        @apply hover:bg-yellow-50 dark:hover:bg-yellow-100 text-yellow-700 dark:text-yellow-700;
       }
     }
 

app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss

@@ -129,7 +129,7 @@
       @apply ml-auto break-words rounded-l-lg rounded-r;
 
       &.is-private {
-        @apply text-black-900 dark:text-black-900 relative border border-solid bg-[#fff3d5] border-[#ffd97a] dark:bg-[#fff3d5] dark:border-[#ffd97a];
+        @apply text-black-900 dark:text-black-900 relative border border-solid bg-yellow-100 border-yellow-200 dark:bg-yellow-300/70 dark:border-0;
       }
 
       &.is-image {

app/javascript/dashboard/assets/scss/widgets/_tabs.scss

@@ -31,7 +31,7 @@
 }
 
 .tabs-title {
-  @apply flex-shrink-0 my-0 mx-2;
+  @apply flex-shrink-0 my-0 mx-2 ;
 
   .badge {
     @apply bg-slate-50 dark:bg-slate-800 rounded-md text-slate-600 dark:text-slate-100 h-5 flex items-center justify-center text-xxs font-semibold my-0 mx-1 px-1 py-0;
@@ -53,7 +53,7 @@
   }
 
   a {
-    @apply flex items-center flex-row border-b border-transparent text-slate-600 dark:text-slate-200 text-sm top-[1px] relative;
+    @apply flex items-center flex-row border-b border-transparent text-slate-500 dark:text-slate-200 text-sm top-[1px] relative;
     transition: border-color 0.15s $swift-ease-out-function;
   }
 

app/javascript/dashboard/components/ChatList.vue

@@ -15,7 +15,7 @@
     >
       <div class="flex max-w-[85%] justify-center items-center">
         <h1
-          class="text-xl break-words overflow-hidden whitespace-nowrap text-ellipsis text-black-800 dark:text-slate-100 overflow-hidden whitespace-nowrap text-ellipsis mb-0"
+          class="text-xl break-words overflow-hidden whitespace-nowrap text-ellipsis text-black-900 dark:text-slate-100 mb-0"
           :title="pageTitle"
         >
           {{ pageTitle }}

app/javascript/dashboard/components/SettingsSection.vue

@@ -2,7 +2,7 @@
   <div
     class="ml-0 mr-0 flex pt-0 pr-4 pb-4 pl-0"
     :class="{
-      'pt-4 border-b border-solid border-slate-50 dark:border-slate-600': showBorder,
+      'pt-4 border-b border-solid border-slate-50 dark:border-slate-700/30': showBorder,
     }"
   >
     <div class="w-[30%] min-w-0 max-w-[30%] pr-12">

app/javascript/dashboard/components/buttons/FormSubmitButton.vue

@@ -51,7 +51,7 @@ export default {
   },
   computed: {
     computedClass() {
-      return `button nice ${this.buttonClass || ' '}`;
+      return `button nice gap-2 ${this.buttonClass || ' '}`;
     },
   },
   methods: {
@@ -63,11 +63,9 @@ export default {
 </script>
 <style lang="scss" scoped>
 button:disabled {
-  opacity: 1;
+  @apply bg-woot-100 dark:bg-woot-500/25 dark:text-slate-500 opacity-100;
-  background-color: var(--w-100);
-
   &:hover {
-    background-color: var(--w-100);
+    @apply bg-woot-100 dark:bg-woot-500/25;
   }
 }
 </style>

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

@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="showShowCurrentAccountContext"
-    class="text-slate-700 dark:text-slate-200 rounded-md text-xs py-2 px-2 mt-2 relative border border-slate-50 dark:border-slate-800/50 hover:bg-slate-50 dark:hover:bg-slate-700 cursor-pointer"
+    class="text-slate-700 dark:text-slate-200 rounded-md text-xs py-2 px-2 mt-2 relative border border-slate-50 dark:border-slate-800/50 hover:bg-slate-50 dark:hover:bg-slate-800 cursor-pointer"
     @mouseover="setShowSwitch"
     @mouseleave="resetShowSwitch"
   >
@@ -14,7 +14,7 @@
     <transition name="fade">
       <div
         v-if="showSwitchButton"
-        class="ltr:overlay-shadow ltr:dark:overlay-shadow-dark rtl:rtl-overlay-shadow rtl:dark:rtl-overlay-shadow-dark flex items-center h-full justify-end absolute top-0 right-0 w-full"
+        class="ltr:overlay-shadow ltr:dark:overlay-shadow-dark rtl:rtl-overlay-shadow rtl:dark:rtl-overlay-shadow-dark flex items-center h-full rounded-md justify-end absolute top-0 right-0 w-full"
       >
         <div class="my-0 mx-2">
           <woot-button
@@ -71,7 +71,7 @@ export default {
     background-image: linear-gradient(
       to right,
       rgba(0, 0, 0, 0) 0%,
-      rgb(55, 84, 109) 50%
+      rgb(21, 23, 24) 50%
     );
   }
 
@@ -87,7 +87,7 @@ export default {
     background-image: linear-gradient(
       to left,
       rgba(0, 0, 0, 0) 0%,
-      rgb(55, 84, 109) 50%
+      rgb(21, 23, 24) 50%
     );
   }
 }

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

@@ -1,7 +1,7 @@
 <template>
   <div class="mb-4">
     <button
-      class="text-slate-600 dark:text-slate-100 w-10 h-10 my-2 flex items-center justify-center rounded-lg hover:bg-slate-25 dark:hover:bg-slate-800 dark:hover:text-slate-100 hover:text-slate-600 relative"
+      class="text-slate-600 dark:text-slate-100 w-10 h-10 my-2 flex items-center justify-center rounded-lg hover:bg-slate-25 dark:hover:bg-slate-700 dark:hover:text-slate-100 hover:text-slate-600 relative"
       :class="{
         'bg-woot-50 dark:bg-slate-800 text-woot-500 hover:bg-woot-50': isNotificationPanelActive,
       }"

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

@@ -3,7 +3,7 @@
     <a
       v-tooltip.right="$t(`SIDEBAR.${name}`)"
       :href="href"
-      class="text-slate-600 dark:text-slate-100 w-10 h-10 my-2 flex items-center justify-center rounded-lg hover:bg-slate-25 dark:hover:bg-slate-700 dark:hover:text-slate-100 hover:text-slate-600 relative"
+      class="text-slate-700 dark:text-slate-100 w-10 h-10 my-2 flex items-center justify-center rounded-lg hover:bg-slate-25 dark:hover:bg-slate-700 dark:hover:text-slate-100 hover:text-slate-600 relative"
       :class="{
         'bg-woot-50 dark:bg-slate-800 text-woot-500 hover:bg-woot-50':
           isActive || isChildMenuActive,

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

@@ -22,7 +22,7 @@
           class="inline-flex items-center justify-center w-4 rounded-sm bg-slate-100 dark:bg-slate-700 p-0.5 mr-1.5 rtl:mr-0 rtl:ml-1.5"
         >
           <fluent-icon
-            class="text-xxs text-slate-600 dark:text-slate-200"
+            class="text-xxs text-slate-700 dark:text-slate-200"
             :class="{
               'text-woot-500 dark:text-woot-500': isActive,
             }"
@@ -41,7 +41,7 @@
         >
           <span
             :title="menuTitle"
-            class="text-sm text-slate-600 dark:text-slate-100"
+            class="text-sm text-slate-700 dark:text-slate-100"
             :class="{
               'text-woot-500 dark:text-woot-500': isActive,
               'text-ellipsis overflow-hidden whitespace-nowrap max-w-full': shouldTruncate,
@@ -54,8 +54,8 @@
             class="bg-slate-50 dark:bg-slate-700 rounded text-xxs font-medium mx-1 py-0 px-1"
             :class="
               isCountZero
-                ? `text-slate-300 dark:text-slate-600`
+                ? `text-slate-300 dark:text-slate-700`
-                : `text-slate-600 dark:text-slate-50`
+                : `text-slate-700 dark:text-slate-50`
             "
           >
             {{ childItemCount }}

app/javascript/dashboard/components/widgets/AutomationActionInput.vue

@@ -213,7 +213,7 @@ export default {
 }
 
 .filter.has-error {
-  @apply bg-red-50 dark:bg-red-100;
+  @apply bg-red-50 dark:bg-red-800/50 border-red-100 dark:border-red-700/50;
 }
 
 .filter-inputs {
@@ -221,7 +221,7 @@ export default {
 }
 
 .filter-error {
-  @apply text-red-500 dark:text-red-600 block my-1 mx-0;
+  @apply text-red-500 dark:text-red-200 block my-1 mx-0;
 }
 
 .action__question,

app/javascript/dashboard/components/widgets/ColorPicker.vue

@@ -61,21 +61,16 @@ export default {
 }
 
 .colorpicker--selected {
-  border: 1px solid var(--color-border-light);
+  @apply border border-solid border-slate-50 dark:border-slate-600 rounded cursor-pointer h-8 w-8 mb-4;
-  border-radius: $space-smaller;
-  cursor: pointer;
-  height: $space-large;
-  margin-bottom: $space-normal;
-  width: $space-large;
 }
 
 .colorpicker--chrome.vc-chrome {
-  @include elegant-card;
+  @apply shadow-lg -mt-2.5 absolute z-[9999] border border-solid border-slate-75 dark:border-slate-600 rounded;
 
-  border: 1px solid $color-border;
+  ::v-deep {
-  border-radius: $space-smaller;
+    input {
-  margin-top: -$space-one;
+      @apply bg-white dark:bg-white;
-  position: absolute;
+    }
-  z-index: 9999;
+  }
 }
 </style>

app/javascript/dashboard/components/widgets/FilterInput/Index.vue

@@ -114,10 +114,7 @@
           @click="removeFilter"
         />
       </div>
-      <p
+      <p v-if="v.values.$dirty && v.values.$error" class="filter-error">
-        v-if="v.values.$dirty && v.values.$error"
-        class="text-red-500 dark:text-red-600 block my-1 mx-0"
-      >
         {{ $t('FILTER.EMPTY_VALUE_ERROR') }}
       </p>
     </div>
@@ -127,7 +124,7 @@
       class="flex items-center justify-center relative my-2.5 mx-0"
     >
       <hr
-        class="w-full absolute border-b border-solid border-slate-75 dark:border-slate-600"
+        class="w-full absolute border-b border-solid border-slate-75 dark:border-slate-800"
       />
       <select
         v-model="query_operator"
@@ -273,8 +270,8 @@ export default {
     },
     getInputErrorClass(isDirty, hasError) {
       return isDirty && hasError
-        ? 'bg-red-50 dark:bg-red-200 border-red-100 dark:border-red-300 '
+        ? 'bg-red-50 dark:bg-red-800/50 border-red-100 dark:border-red-700/50'
-        : 'bg-slate-50 dark:bg-slate-800 border-slate-75 dark:border-slate-600 ';
+        : 'bg-slate-50 dark:bg-slate-800 border-slate-75 dark:border-slate-700/50';
     },
   },
 };
@@ -286,6 +283,10 @@ export default {
   }
 }
 
+.filter-error {
+  @apply text-red-500 dark:text-red-200 block my-1 mx-0;
+}
+
 .multiselect {
   @apply mb-0;
 }

app/javascript/dashboard/components/widgets/WootWriter/Editor.vue

@@ -456,6 +456,31 @@ export default {
   }
   > .ProseMirror {
     @apply p-0 break-words text-slate-800 dark:text-slate-100;
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      @apply text-slate-800 dark:text-slate-100;
+    }
+
+    p {
+      @apply text-slate-800 dark:text-slate-100;
+    }
+
+    blockquote {
+      @apply border-slate-400 dark:border-slate-500;
+
+      p {
+        @apply text-slate-600 dark:text-slate-400;
+      }
+    }
+
+    ol li {
+      @apply list-item list-decimal;
+    }
   }
 }
 

app/javascript/dashboard/components/widgets/conversation/ConversationAdvancedFilter.vue

@@ -23,7 +23,7 @@
         </label>
       </div>
       <div
-        class="p-4 rounded-lg bg-slate-25 dark:bg-slate-700 border border-solid border-slate-50 dark:border-slate-700 mb-4"
+        class="p-4 rounded-lg bg-slate-25 dark:bg-slate-900 border border-solid border-slate-50 dark:border-slate-700/50 mb-4"
       >
         <filter-input-box
           v-for="(filter, i) in appliedFilters"

app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue

@@ -1,8 +1,8 @@
 <template>
   <div
-    class="conversation flex flex-shrink-0 flex-grow-0 w-auto max-w-full cursor-pointer relative py-0 px-4 border-transparent border-l-2 border-t-0 border-b-0 border-r-0 border-solid items-start hover:bg-slate-50 dark:hover:bg-slate-800 group"
+    class="conversation flex flex-shrink-0 flex-grow-0 w-auto max-w-full cursor-pointer relative py-0 px-4 border-transparent border-l-2 border-t-0 border-b-0 border-r-0 border-solid items-start hover:bg-slate-25 dark:hover:bg-slate-800 group"
     :class="{
-      'active bg-slate-50 dark:bg-slate-800 border-woot-500': isActiveChat,
+      'active bg-slate-25 dark:bg-slate-800 border-woot-500': isActiveChat,
       'unread-chat': hasUnread,
       'has-inbox-name': showInboxName,
       'conversation-selected': selected,

app/javascript/dashboard/components/widgets/forms/PhoneInput.vue

@@ -2,7 +2,7 @@
   <div class="phone-input--wrap relative">
     <div class="phone-input" :class="{ 'has-error': error }">
       <div
-        class="cursor-pointer py-2 pr-1 pl-2 rounded-tl-md rounded-bl-md flex items-center justify-center gap-2 bg-slate-25 dark:bg-slate-700 h-10 w-[3.25rem]"
+        class="cursor-pointer py-2 pr-1.5 pl-2 rounded-tl-md rounded-bl-md flex items-center justify-center gap-1.5 bg-slate-25 dark:bg-slate-700 h-10 w-14"
         @click="toggleCountryDropdown"
       >
         <h5 v-if="activeCountry.emoji" class="mb-0">

app/javascript/dashboard/modules/search/components/SearchResultContactItem.vue

@@ -2,11 +2,17 @@
   <router-link :to="navigateTo" class="contact-item">
     <woot-thumbnail :src="thumbnail" :username="name" size="24px" />
     <div class="contact-details">
-      <h5 class="text-block-title name">{{ name }}</h5>
+      <h5 class="text-block-title name text-slate-800 dark:text-slate-200">
+        {{ name }}
+      </h5>
       <p class="details-meta">
-        <span v-if="email" class="email">{{ email }}</span>
+        <span v-if="email" class="email text-slate-800 dark:text-slate-200">{{
-        <span v-if="phone" class="separator">•</span>
+          email
-        <span v-if="phone" class="phone">
+        }}</span>
+        <span v-if="phone" class="separator text-slate-700 dark:text-slate-200">
+          •
+        </span>
+        <span v-if="phone" class="phone text-slate-800 dark:text-slate-200">
           {{ phone }}
         </span>
       </p>

app/javascript/dashboard/modules/search/components/SearchResultConversationItem.vue

@@ -21,13 +21,16 @@
         </div>
       </div>
       <div class="user-details">
-        <h5 v-if="name" class="text-block-title name">
+        <h5
+          v-if="name"
+          class="text-block-title name text-slate-800 dark:text-slate-100"
+        >
           <span class="pre-text"> {{ $t('SEARCH.FROM') }}: </span>
           {{ name }}
         </h5>
         <h5
           v-if="email"
-          class="text-block-title email overflow-hidden whitespace-nowrap text-ellipsis"
+          class="text-block-title email text-slate-700 dark:text-slate-200 overflow-hidden whitespace-nowrap text-ellipsis"
         >
           <span class="pre-text">{{ $t('SEARCH.EMAIL') }}:</span>
           {{ email }}

app/javascript/dashboard/routes/dashboard/commands/commandbar.vue

@@ -60,10 +60,21 @@ export default {
 };
 </script>
 
-<style>
+<style lang="scss">
 ninja-keys {
   --ninja-accent-color: var(--w-500);
   --ninja-font-family: 'PlusJakarta';
   z-index: 9999;
+
+  @media (prefers-color-scheme: dark) {
+    --ninja-overflow-background: rgba(26, 29, 30, 0.5);
+    --ninja-modal-background: #151718;
+    --ninja-secondary-background-color: #26292b;
+    --ninja-selected-background: #26292b;
+    --ninja-footer-background: #2b2f31;
+    --ninja-text-color: #f8faf9;
+    --ninja-icon-color: #f8faf9;
+    --ninja-secondary-text-color: #c2c9c6;
+  }
 }
 </style>

app/javascript/dashboard/routes/dashboard/contacts/components/ContactsAdvancedFilters.vue

@@ -23,7 +23,7 @@
         </label>
       </div>
       <div
-        class="p-4 rounded-lg bg-slate-25 dark:bg-slate-700 border border-solid border-slate-50 dark:border-slate-700 mb-4"
+        class="p-4 rounded-lg bg-slate-25 dark:bg-slate-900 border border-solid border-slate-50 dark:border-slate-700/50 mb-4"
       >
         <filter-input-box
           v-for="(filter, i) in appliedFilters"

app/javascript/dashboard/routes/dashboard/contacts/components/Header.vue

@@ -6,7 +6,7 @@
       <div class="flex items-center justify-center max-w-full min-w-[6.25rem]">
         <woot-sidemenu-icon />
         <h1
-          class="m-0 text-2xl text-slate-900 dark:text-slate-100 overflow-hidden whitespace-nowrap text-ellipsis my-0 mx-2"
+          class="m-0 text-xl text-slate-900 dark:text-slate-100 overflow-hidden whitespace-nowrap text-ellipsis my-0 mx-2"
         >
           {{ headerTitle }}
         </h1>

app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/DefaultPortalArticles.vue

@@ -1,5 +1,9 @@
 <template>
-  <div>Loading...</div>
+  <div
+    class="text-slate-600 dark:text-slate-200 flex items-center justify-center w-full"
+  >
+    Loading...
+  </div>
 </template>
 <script>
 import uiSettingsMixin from 'dashboard/mixins/uiSettings';

app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ListAllArticles.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="container overflow-auto">
+  <div class="py-0 px-4 w-full max-w-full overflow-auto">
     <article-header
       :header-title="headerTitle"
       :count="meta.count"
@@ -13,9 +13,14 @@
       @page-change="onPageChange"
       @reorder="onReorder"
     />
-    <div v-if="shouldShowLoader" class="articles--loader">
+    <div
+      v-if="shouldShowLoader"
+      class="items-center flex text-base justify-center py-6 px-4 text-slate-600 dark:text-slate-200"
+    >
       <spinner />
-      <span>{{ $t('HELP_CENTER.TABLE.LOADING_MESSAGE') }}</span>
+      <span class="text-slate-600 dark:text-slate-200">{{
+        $t('HELP_CENTER.TABLE.LOADING_MESSAGE')
+      }}</span>
     </div>
     <empty-state
       v-else-if="shouldShowEmptyState"
@@ -148,18 +153,3 @@ export default {
   },
 };
 </script>
-
-<style lang="scss" scoped>
-.container {
-  padding: 0 var(--space-normal);
-  width: 100%;
-  overflow: auto;
-  .articles--loader {
-    align-items: center;
-    display: flex;
-    font-size: var(--font-size-default);
-    justify-content: center;
-    padding: var(--space-big);
-  }
-}
-</style>

app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/ListAllPortals.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="container py-2 px-4 w-full">
+  <div class="py-2 px-4 w-full max-w-full">
     <div class="flex justify-between items-center mt-0 mb-2 mx-0 h-12">
       <div class="flex items-center">
         <woot-sidemenu-icon />

app/javascript/dashboard/routes/dashboard/settings/Wrapper.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="flex flex-1 h-full justify-between flex-col m-0 bg-light dark:bg-slate-900"
+    class="flex flex-1 h-full justify-between flex-col m-0 bg-slate-25 dark:bg-slate-900"
   >
     <settings-header
       button-route="new"

app/javascript/dashboard/routes/dashboard/settings/account/Index.vue

@@ -2,7 +2,7 @@
   <div class="flex-grow flex-shrink min-w-0 p-6 overflow-auto">
     <form v-if="!uiFlags.isFetchingItem" @submit.prevent="updateAccount">
       <div
-        class="flex flex-row p-4 border-b border-slate-25 dark:border-slate-700"
+        class="flex flex-row p-4 border-b border-slate-25 dark:border-slate-800"
       >
         <div
           class="flex-grow-0 flex-shrink-0 flex-[25%] min-w-0 py-4 pr-6 pl-0"

app/javascript/dashboard/routes/dashboard/settings/attributes/CustomAttribute.vue

@@ -11,7 +11,10 @@
       </woot-tabs>
 
       <div class="w-full">
-        <p v-if="!uiFlags.isFetching && !attributes.length" class="mt-12">
+        <p
+          v-if="!uiFlags.isFetching && !attributes.length"
+          class="mt-12 flex items-center justify-center"
+        >
           {{ $t('ATTRIBUTES_MGMT.LIST.EMPTY_RESULT.404') }}
         </p>
         <woot-loading-state

app/javascript/dashboard/routes/dashboard/settings/macros/Index.vue

@@ -2,7 +2,7 @@
   <div class="flex-1 overflow-auto p-4">
     <router-link
       :to="addAccountScoping('settings/macros/new')"
-      class="button success button--fixed-top"
+      class="button success button--fixed-top flex gap-1"
     >
       <fluent-icon icon="add-circle" />
       <span class="button__content">

app/javascript/dashboard/routes/dashboard/settings/macros/MacroNode.vue

@@ -116,7 +116,7 @@ export default {
 
     &.has-error {
       animation: shake 0.3s ease-in-out 0s 2;
-      @apply bg-red-50 dark:bg-red-100;
+      @apply bg-red-50 dark:bg-red-800;
     }
   }
 }

app/javascript/shared/components/emoji/EmojiInput.vue

@@ -173,7 +173,7 @@ export default {
   }
 
   .box-shadow-blue-dark {
-    box-shadow: 0 0 0 1px #1f93ff, 0 0 2px 3px #37546d;
+    box-shadow: 0 0 0 1px #1f93ff, 0 0 2px 3px #4c5155;
   }
 }
 </style>
@@ -185,7 +185,7 @@ export default {
     $space-slab: 12px;
 
     @media (prefers-color-scheme: dark) {
-      $color-bg-dark: #293f51;
+      $color-bg-dark: #26292b;
       @include arrow(bottom, $color-bg-dark, $space-slab);
     }
     @media (prefers-color-scheme: light) {

package.json

@@ -18,7 +18,8 @@
     "prepare": "husky install",
     "size": "size-limit"
   },
-  "size-limit": [{
+  "size-limit": [
+    {
       "path": "public/packs/js/widget-*.js",
       "limit": "270 KB"
     },
@@ -33,6 +34,7 @@
     "@chatwoot/utils": "^0.0.16",
     "@hcaptcha/vue-hcaptcha": "^0.3.2",
     "@june-so/analytics-next": "^1.36.5",
+    "@radix-ui/colors": "^1.0.1",
     "@rails/actioncable": "6.1.3",
     "@rails/ujs": "^7.0.3-1",
     "@rails/webpacker": "5.4.4",

tailwind.config.js

@@ -1,3 +1,17 @@
+const {
+  blue,
+  blueDark,
+  green,
+  greenDark,
+  yellow,
+  yellowDark,
+  slate,
+  slateDark,
+  red,
+  redDark,
+  violet,
+  violetDark,
+} = require('@radix-ui/colors');
 const defaultTheme = require('tailwindcss/defaultTheme');
 module.exports = {
   darkMode: 'class',
@@ -23,94 +37,94 @@ module.exports = {
       modal: 'rgba(0, 0, 0, 0.4)',
       current: 'currentColor',
       woot: {
-        25: '#F5FAFF',
+        25: blue.blue2,
-        50: '#EBF5FF',
+        50: blue.blue3,
-        75: '#D6EBFF',
+        75: blue.blue4,
-        100: '#C2E1FF',
+        100: blue.blue5,
-        200: '#99CEFF',
+        200: blue.blue7,
-        300: '#70BAFF',
+        300: blue.blue8,
-        400: '#47A6FF',
+        400: blueDark.blue11,
-        500: '#1F93FF',
+        500: blueDark.blue10,
-        600: '#1976CC',
+        600: blueDark.blue9,
-        700: '#135899',
+        700: blueDark.blue8,
-        800: '#0C3B66',
+        800: blueDark.blue6,
-        900: '#061D33',
+        900: blueDark.blue2,
       },
       green: {
-        50: '#E6F8E6',
+        50: greenDark.green12,
-        100: '#C4EEC2',
+        100: green.green6,
-        200: '#9DE29A',
+        200: green.green7,
-        300: '#6FD86F',
+        300: green.green8,
-        400: '#44CE4B',
+        400: greenDark.green10,
-        500: '#00C41D',
+        500: greenDark.green9,
-        600: '#00B412',
+        600: green.green10,
-        700: '#00A200',
+        700: green.green11,
-        800: '#009000',
+        800: greenDark.green7,
-        900: '#007000',
+        900: greenDark.green6,
       },
       yellow: {
-        50: '#FEFDE8',
+        50: yellow.yellow2,
-        100: '#FDFCC4',
+        100: yellow.yellow4,
-        200: '#FCF68C',
+        200: yellow.yellow5,
-        300: '#F9E736',
+        300: yellowDark.yellow10,
-        400: '#F6D819',
+        400: yellowDark.yellow9,
-        500: '#E6C00C',
+        500: yellowDark.yellow11,
-        600: '#C69608',
+        600: yellow.yellow8,
-        700: '#9E6b0A',
+        700: yellow.yellow11,
-        800: '#835510',
+        800: yellowDark.yellow8,
-        900: '#6F4514',
+        900: yellowDark.yellow7,
       },
       slate: {
-        25: '#F8FAFC',
+        25: slate.slate2,
-        50: '#F1F5F8',
+        50: slate.slate3,
-        75: '#EBF0F5',
+        75: slate.slate4,
-        100: ' #E4EBF1',
+        100: slate.slate5,
-        200: ' #C9D7E3',
+        200: slate.slate7,
-        300: ' #AEC3D5',
+        300: slate.slate8,
-        400: ' #93AFC8',
+        400: slateDark.slate11,
-        500: ' #779BBB',
+        500: slateDark.slate10,
-        600: ' #446888',
+        600: slate.slate11,
-        700: ' #37546D',
+        700: slateDark.slate8,
-        800: ' #293F51',
+        800: slateDark.slate4,
-        900: ' #1B2836',
+        900: slateDark.slate1,
       },
       black: {
-        50: '#F7F7F7',
+        50: slate.slate2,
-        100: '#ECECED',
+        100: slateDark.slate12,
-        200: '#DDDDE0',
+        200: slate.slate7,
-        300: '#C6C7CA',
+        300: slate.slate8,
-        400: '#ABACAF',
+        400: slateDark.slate11,
-        500: '#96979C',
+        500: slate.slate9,
-        600: '#6E6F73',
+        600: slateDark.slate9,
-        700: '#5A5B5F',
+        700: slateDark.slate8,
-        800: '#3C3D40',
+        800: slateDark.slate7,
-        900: '#1B1C1F',
+        900: slateDark.slate2,
       },
       red: {
-        50: '#FFEBEE',
+        50: redDark.red12,
-        100: '#FFCCD1',
+        100: red.red6,
-        200: '#F69898',
+        200: red.red8,
-        300: '#EF6F6F',
+        300: redDark.red11,
-        400: '#F94B4A',
+        400: redDark.red10,
-        500: '#FF382D',
+        500: red.red9,
-        600: '#F02B2D',
+        600: red.red10,
-        700: '#DE1E27',
+        700: red.red11,
-        800: '#D11320',
+        800: redDark.red8,
-        900: '#C30011',
+        900: red.red12,
       },
       violet: {
-        50: '#FFFFFF',
+        50: violet.violet1,
-        100: '#F5EBFF',
+        100: violetDark.violet12,
-        200: '#DDB8FF',
+        200: violet.violet6,
-        300: '#C585FF',
+        300: violet.violet8,
-        400: '#AC52FF',
+        400: violet.violet11,
-        500: '#941FFF',
+        500: violet.violet9,
-        600: '#7B00EB',
+        600: violetDark.violet8,
-        700: '#6000B8',
+        700: violetDark.violet7,
-        800: '#450085',
+        800: violetDark.violet6,
-        900: '#2B0052',
+        900: violet.violet12,
       },
-      body: '#2f3b49',
+      body: slateDark.slate7,
     },
     keyframes: {
       ...defaultTheme.keyframes,

yarn.lock

@@ -3780,6 +3780,11 @@
     mkdirp "^1.0.4"
     rimraf "^3.0.2"
 
+"@radix-ui/colors@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/colors/-/colors-1.0.1.tgz#e9703d6e1b6f3ace1855e5d784353327a548042c"
+  integrity sha512-xySw8f0ZVsAEP+e7iLl3EvcBXX7gsIlC1Zso/sPBW9gIWerBTgz6axrjU+MZ39wD+WFi5h5zdWpsg3+hwt2Qsg==
+
 "@rails/actioncable@6.1.3":
   version "6.1.3"
   resolved "https://registry.yarnpkg.com/@rails/actioncable/-/actioncable-6.1.3.tgz#c8a67ec4d22ecd6931f7ebd98143fddbc815419a"