feat: update colors for v4 (#10660)

Porting changes from https://github.com/chatwoot/chatwoot/pull/10552

---------

Co-authored-by: Pranav <pranav@chatwoot.com>
Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Co-authored-by: Vishnu Narayanan <vishnu@chatwoot.com>
Co-authored-by: Sojan <sojan@pepalo.com>
Co-authored-by: iamsivin <iamsivin@gmail.com>
Co-authored-by: Pranav <pranavrajs@gmail.com>

app/javascript/dashboard/components-next/NewConversation/ComposeConversation.vue

@@ -189,7 +189,10 @@ useKeyboardEvents(keyboardEvents);
 <template>
   <div
     v-on-click-outside="() => (showComposeNewConversation = false)"
-    class="relative z-40"
+    class="relative"
+    :class="{
+      'z-40': showComposeNewConversation,
+    }"
   >
     <slot
       name="trigger"

app/javascript/dashboard/components-next/avatar/Avatar.vue

@@ -174,7 +174,7 @@ watch(
 </script>
 
 <template>
-  <span class="relative inline-flex group/avatar" :style="containerStyles">
+  <span class="relative inline-flex group/avatar z-0" :style="containerStyles">
     <!-- Status Badge -->
     <slot name="badge" :size="size">
       <div

app/javascript/dashboard/components-next/button/Button.vue

@@ -6,6 +6,7 @@ import Icon from 'dashboard/components-next/icon/Icon.vue';
 import {
   VARIANT_OPTIONS,
   COLOR_OPTIONS,
+  JUSTIFY_OPTIONS,
   SIZE_OPTIONS,
   EXCLUDED_ATTRS,
 } from './constants.js';
@@ -27,6 +28,11 @@ const props = defineProps({
     default: null,
     validator: value => SIZE_OPTIONS.includes(value) || value === null,
   },
+  justify: {
+    type: String,
+    default: null,
+    validator: value => JUSTIFY_OPTIONS.includes(value) || value === null,
+  },
   icon: { type: [String, Object, Function], default: '' },
   trailingIcon: { type: Boolean, default: false },
   isLoading: { type: Boolean, default: false },
@@ -81,6 +87,15 @@ const computedSize = computed(() => {
   return 'md';
 });
 
+const computedJustify = computed(() => {
+  if (props.justify) return props.justify;
+  if (attrs.start || attrs.start === '') return 'start';
+  if (attrs.center || attrs.center === '') return 'center';
+  if (attrs.end || attrs.end === '') return 'end';
+
+  return 'center';
+});
+
 const STYLE_CONFIG = {
   colors: {
     blue: {
@@ -151,7 +166,12 @@ const STYLE_CONFIG = {
     md: 'text-sm font-medium',
     lg: 'text-base',
   },
-  base: 'inline-flex items-center justify-center min-w-0 gap-2 transition-all duration-200 ease-in-out border-0 rounded-lg outline-1 outline disabled:cursor-not-allowed disabled:pointer-events-none disabled:opacity-50',
+  justify: {
+    start: 'justify-start',
+    center: 'justify-center',
+    end: 'justify-end',
+  },
+  base: 'inline-flex items-center min-w-0 gap-2 transition-all duration-200 ease-in-out border-0 rounded-lg outline-1 outline disabled:cursor-not-allowed disabled:pointer-events-none disabled:opacity-50',
 };
 
 const variantClasses = computed(() => {
@@ -197,6 +217,7 @@ const linkButtonClasses = computed(() => {
       [STYLE_CONFIG.base]: true,
       [isLink ? linkButtonClasses : buttonClasses]: true,
       [STYLE_CONFIG.fontSize[computedSize]]: true,
+      [STYLE_CONFIG.justify[computedJustify]]: true,
       'flex-row-reverse': trailingIcon && !isIconOnly,
     }"
   >

app/javascript/dashboard/components-next/button/constants.js

@@ -1,6 +1,7 @@
 export const VARIANT_OPTIONS = ['solid', 'outline', 'faded', 'link', 'ghost'];
 export const COLOR_OPTIONS = ['blue', 'ruby', 'amber', 'slate', 'teal'];
 export const SIZE_OPTIONS = ['xs', 'sm', 'md', 'lg'];
+export const JUSTIFY_OPTIONS = ['start', 'center', 'end'];
 
 export const EXCLUDED_ATTRS = [
   'variant',
@@ -12,4 +13,5 @@ export const EXCLUDED_ATTRS = [
   ...VARIANT_OPTIONS,
   ...COLOR_OPTIONS,
   ...SIZE_OPTIONS,
+  ...JUSTIFY_OPTIONS,
 ];

app/javascript/dashboard/components-next/dialog/Dialog.vue

@@ -150,6 +150,6 @@ defineExpose({ open, close });
 
 <style scoped>
 dialog::backdrop {
-  @apply dark:bg-n-alpha-white bg-n-alpha-black2;
+  @apply bg-n-alpha-black1 backdrop-blur-[4px];
 }
 </style>

app/javascript/dashboard/components-next/message/Message.vue

@@ -431,12 +431,12 @@ provideMessageContext({
   <div
     v-if="shouldRenderMessage"
     :id="`message${props.id}`"
-    class="flex w-full message-bubble-container"
+    class="flex w-full message-bubble-container mb-2"
     :data-message-id="props.id"
     :class="[
       flexOrientationClass,
-      shouldGroupWithNext ? 'group-with-next mb-2' : 'mb-4',
       {
+        'group-with-next': shouldGroupWithNext,
         'bg-n-alpha-1': showBackgroundHighlight,
       },
     ]"
@@ -449,7 +449,7 @@ provideMessageContext({
       :class="[
         gridClass,
         {
-          'gap-y-2': !shouldGroupWithNext,
+          'gap-y-2': contentAttributes.externalError,
           'w-full': variant === MESSAGE_VARIANTS.EMAIL,
         },
       ]"

app/javascript/dashboard/components-next/message/bubbles/BaseAttachment.vue

@@ -28,10 +28,7 @@ const senderName = computed(() => {
 </script>
 
 <template>
-  <BaseBubble
-    class="overflow-hidden p-3 !bg-n-solid-2 shadow-[0px_0px_12px_0px_rgba(0,0,0,0.05)]"
-    data-bubble-name="attachment"
-  >
+  <BaseBubble class="overflow-hidden p-3" data-bubble-name="attachment">
     <div class="grid gap-4 min-w-64">
       <div class="grid gap-3 z-20">
         <div
@@ -57,7 +54,7 @@ const senderName = computed(() => {
           </slot>
         </div>
       </div>
-      <div v-if="action">
+      <div v-if="action" class="mb-2">
         <a
           v-if="action.href"
           :href="action.href"

app/javascript/dashboard/components-next/message/bubbles/Email/Index.vue

@@ -21,7 +21,7 @@ const showQuotedMessage = ref(false);
 const contentContainer = useTemplateRef('contentContainer');
 
 onMounted(() => {
-  isExpandable.value = contentContainer.value.scrollHeight > 400;
+  isExpandable.value = contentContainer.value?.scrollHeight > 400;
 });
 
 const isOutgoing = computed(() => {

app/javascript/dashboard/components-next/message/chips/Audio.vue

@@ -26,7 +26,7 @@ const currentTime = ref(0);
 const duration = ref(0);
 
 const onLoadedMetadata = () => {
-  duration.value = audioPlayer.value.duration;
+  duration.value = audioPlayer.value?.duration;
 };
 
 const formatTime = time => {

app/javascript/dashboard/components-next/sidebar/SidebarProfileMenu.vue

@@ -90,7 +90,8 @@ const allowedMenuItems = computed(() => {
 
 <template>
   <DropdownContainer
-    class="relative z-20 w-full min-w-0"
+    class="relative w-full min-w-0"
+    :class="{ 'z-20': isOpen }"
     @close="emit('close')"
   >
     <template #trigger="{ toggle, isOpen }">