From 2a9498819a2ad741c8d26ed4d89041652e2a807c Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Mon, 2 Dec 2024 14:45:46 +0530
Subject: [PATCH] feat: email typography

---
 .../components-next/message/bubbles/Email.vue | 13 ++-
 tailwind.config.js                            | 85 +++++++++++++++++++
 2 files changed, 97 insertions(+), 1 deletion(-)

diff --git a/app/javascript/dashboard/components-next/message/bubbles/Email.vue b/app/javascript/dashboard/components-next/message/bubbles/Email.vue
index b50117021..d06c61e9d 100644
--- a/app/javascript/dashboard/components-next/message/bubbles/Email.vue
+++ b/app/javascript/dashboard/components-next/message/bubbles/Email.vue
@@ -1,5 +1,6 @@
 <script setup>
 import { computed } from 'vue';
+import { Letter } from 'vue-letter';
 import BaseBubble from 'next/message/bubbles/Base.vue';
 
 const props = defineProps({
@@ -16,10 +17,20 @@ const props = defineProps({
 const contentToShow = computed(() => {
   return props.contentAttributes?.email?.htmlContent?.full ?? props.content;
 });
+
+const textToShow = computed(() => {
+  return props.contentAttributes?.email?.textContent?.full ?? props.content;
+});
 </script>
 
 <template>
   <BaseBubble class="w-full">
-    <div class="p-4 prose prose-sm max-w-none" v-html="contentToShow" />
+    <div class="p-3">
+      <Letter
+        class-name="prose prose-email"
+        :html="contentToShow"
+        :text="textToShow"
+      />
+    </div>
   </BaseBubble>
 </template>
diff --git a/tailwind.config.js b/tailwind.config.js
index b092c699b..c87e92d02 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -40,6 +40,91 @@ const tailwindConfig = {
         inter: ['Inter', ...defaultSansFonts],
         interDisplay: ['Inter Display', ...defaultSansFonts],
       },
+      typography: theme => ({
+        email: {
+          css: {
+            color: theme('colors.n.slate.12'),
+            lineHeight: '1.6',
+            fontSize: '14px',
+
+            h1: {
+              color: theme('colors.n.slate.12'),
+              fontWeight: '700',
+              fontSize: '2em',
+            },
+            h2: {
+              color: theme('colors.n.slate.12'),
+              fontWeight: '600',
+              fontSize: '1.5em',
+            },
+            h3: {
+              color: theme('colors.n.slate.12'),
+              fontWeight: '500',
+              fontSize: '1.25em',
+            },
+            a: {
+              color: theme('colors.n.solid.blue'),
+              textDecoration: 'underline',
+              '&:hover': {
+                color: theme('colors.blue.800'),
+              },
+            },
+
+            // Lists
+            'ul li': {
+              margin: '0 0 0.5em 1.5em',
+              listStyleType: 'disc',
+            },
+            'ol li': {
+              margin: '0 0 0.5em 1.5em',
+              listStyleType: 'decimal',
+            },
+
+            // Blockquotes
+            blockquote: {
+              fontStyle: 'italic',
+              color: theme('colors.n.slate.11'),
+              borderLeft: `4px solid ${theme('colors.n.strong')}`,
+              paddingLeft: '1em',
+            },
+
+            // Code Blocks
+            code: {
+              backgroundColor: theme('colors.n.alpha.3'),
+              color: theme('colors.n.solid.amber'),
+              padding: '0.2em 0.4em',
+              borderRadius: '4px',
+              fontSize: '0.95em',
+            },
+            pre: {
+              backgroundColor: theme('colors.n.alpha.3'),
+              padding: '1em',
+              borderRadius: '6px',
+              overflowX: 'auto',
+            },
+
+            table: {
+              width: '100%',
+              borderCollapse: 'collapse',
+            },
+            th: {
+              padding: '0.75em',
+              borderBottom: `1px solid ${theme('colors.n.strong')}`,
+              textAlign: 'left',
+              fontWeight: '600',
+            },
+            td: {
+              padding: '0.75em',
+              borderBottom: `1px solid ${theme('colors.n.strong')}`,
+            },
+
+            img: {
+              maxWidth: '100%',
+              height: 'auto',
+            },
+          },
+        },
+      }),
     },
     screens: {
       xs: '480px',