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

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);
-  border-radius: $space-smaller;
-  cursor: pointer;
-  height: $space-large;
-  margin-bottom: $space-normal;
-  width: $space-large;
+  @apply border border-solid border-slate-50 dark:border-slate-600 rounded cursor-pointer h-8 w-8 mb-4;
 }
 
 .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;
-  border-radius: $space-smaller;
-  margin-top: -$space-one;
-  position: absolute;
-  z-index: 9999;
+  ::v-deep {
+    input {
+      @apply bg-white dark:bg-white;
+    }
+  }
 }
 </style>

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

@@ -114,10 +114,7 @@
           @click="removeFilter"
         />
       </div>
-      <p
-        v-if="v.values.$dirty && v.values.$error"
-        class="text-red-500 dark:text-red-600 block my-1 mx-0"
-      >
+      <p v-if="v.values.$dirty && v.values.$error" class="filter-error">
         {{ $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-slate-50 dark:bg-slate-800 border-slate-75 dark:border-slate-600 ';
+        ? '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-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">