fix: bubble colors for email and text (#10701)

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

@@ -55,7 +55,7 @@ const showMeta = computed(() => {
 <template>
   <section
     v-show="showMeta"
-    class="space-y-1 rtl:pl-9 ltr:pr-9 border-b border-n-strong text-sm break-words"
+    class="space-y-1 rtl:pl-9 ltr:pr-9 text-sm break-words"
     :class="hasError ? 'text-n-ruby-11' : 'text-n-slate-11'"
   >
     <template v-if="showMeta">

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

@@ -27,6 +27,7 @@ onMounted(() => {
 const isOutgoing = computed(() => {
   return messageType.value === MESSAGE_TYPES.OUTGOING;
 });
+const isIncoming = computed(() => !isOutgoing.value);
 
 const fullHTML = computed(() => {
   return contentAttributes?.value?.email?.htmlContent?.full ?? content.value;
@@ -48,8 +49,21 @@ const textToShow = computed(() => {
 </script>
 
 <template>
-  <BaseBubble class="w-full" data-bubble-name="email">
-    <EmailMeta class="p-3" />
+  <BaseBubble
+    class="w-full"
+    :class="{
+      'bg-n-slate-4': isIncoming,
+      'bg-n-solid-blue': isOutgoing,
+    }"
+    data-bubble-name="email"
+  >
+    <EmailMeta
+      class="p-3"
+      :class="{
+        'border-b border-n-strong': isIncoming,
+        'border-b border-n-slate-8/20': isOutgoing,
+      }"
+    />
     <section ref="contentContainer" class="p-3">
       <div
         :class="{