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/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(() => {