From e70f7a2550b41a7e829401c29d777eb7fa8807e1 Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Fri, 10 Jan 2025 15:40:12 +0530
Subject: [PATCH] fix: Bubble typography (#10653)

![CleanShot 2025-01-08 at 18 22
36@2x](https://github.com/user-attachments/assets/77cc99d2-1bdf-49ff-9016-57bb9c50b149)
---
 .../message/bubbles/Email/Index.vue           |  4 ++--
 .../message/bubbles/Text/FormattedContent.vue |  5 +---
 tailwind.config.js                            | 23 ++++++++++++++-----
 3 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/app/javascript/dashboard/components-next/message/bubbles/Email/Index.vue b/app/javascript/dashboard/components-next/message/bubbles/Email/Index.vue
index 988f81636..f7596c865 100644
--- a/app/javascript/dashboard/components-next/message/bubbles/Email/Index.vue
+++ b/app/javascript/dashboard/components-next/message/bubbles/Email/Index.vue
@@ -77,13 +77,13 @@ const textToShow = computed(() => {
         <template v-else>
           <Letter
             v-if="showQuotedMessage"
-            class-name="prose prose-email !max-w-none"
+            class-name="prose prose-bubble !max-w-none"
             :html="fullHTML"
             :text="textToShow"
           />
           <Letter
             v-else
-            class-name="prose prose-email !max-w-none"
+            class-name="prose prose-bubble !max-w-none"
             :html="unquotedHTML"
             :text="textToShow"
           />
diff --git a/app/javascript/dashboard/components-next/message/bubbles/Text/FormattedContent.vue b/app/javascript/dashboard/components-next/message/bubbles/Text/FormattedContent.vue
index 8fa7f6e3d..34b9a0070 100644
--- a/app/javascript/dashboard/components-next/message/bubbles/Text/FormattedContent.vue
+++ b/app/javascript/dashboard/components-next/message/bubbles/Text/FormattedContent.vue
@@ -24,8 +24,5 @@ const formattedContent = computed(() => {
 </script>
 
 <template>
-  <span
-    v-dompurify-html="formattedContent"
-    class="[&_.link]:text-n-slate-11 [&_.link]:underline [&>p:last-child]:mb-0 [&>ul]:list-inside [&>ol]:list-inside [&>dl]:list-inside [&>ol]:list-decimal [&>ul]:list-disc [&>blockquote]:border-l-4 [&>blockquote]:border-n-alpha-black1 [&>blockquote]:pl-2"
-  />
+  <span v-dompurify-html="formattedContent" class="prose prose-bubble" />
 </template>
diff --git a/tailwind.config.js b/tailwind.config.js
index a74103402..c8960b073 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -43,7 +43,7 @@ const tailwindConfig = {
         interDisplay: ['Inter Display', ...defaultSansFonts],
       },
       typography: {
-        email: {
+        bubble: {
           css: {
             color: 'rgb(var(--slate-12))',
             lineHeight: '1.6',
@@ -100,26 +100,37 @@ const tailwindConfig = {
               color: 'rgb(var(--text-blue))',
               textDecoration: 'underline',
             },
+            ul: {
+              paddingInlineStart: '0.625em',
+            },
+            ol: {
+              paddingInlineStart: '0.625em',
+            },
             'ul li': {
-              margin: '0 0 0.5em 1.5em',
+              margin: '0 0 0.5em 1em',
               listStyleType: 'disc',
             },
             'ol li': {
-              margin: '0 0 0.5em 1.5em',
+              margin: '0 0 0.5em 1em',
               listStyleType: 'decimal',
             },
             blockquote: {
-              fontStyle: 'italic',
               color: 'rgb(var(--slate-11))',
-              borderLeft: `4px solid rgb(var(--border-strong))`,
+              borderLeft: `4px solid rgb(var(--black-alpha-1))`,
               paddingLeft: '1em',
             },
             code: {
               backgroundColor: 'rgb(var(--alpha-3))',
-              color: 'rgb(var(--solid-amber))',
+              color: 'rgb(var(--slate-11))',
               padding: '0.2em 0.4em',
               borderRadius: '4px',
               fontSize: '0.95em',
+              '&::before': {
+                content: `none`,
+              },
+              '&::after': {
+                content: `none`,
+              },
             },
             pre: {
               backgroundColor: 'rgb(var(--alpha-3))',