fix: email style

novuhq · scopsy · Dec 4, 2024 · Dec 4, 2024 · Dec 4, 2024 · Dec 4, 2024
commit 8fb84e3539ad3d83275c2b2a4928d8ba8e1cffdd
diff --git a/libs/notifications/src/workflows/usage-insights/email.tsx b/libs/notifications/src/workflows/usage-insights/email.tsx
@@ -1,5 +1,18 @@
 import React from 'react';
-import { Body, Container, Head, Heading, Html, Preview, Section, Tailwind, Text, Img } from '@react-email/components';
+import {
+  Body,
+  Container,
+  Head,
+  Heading,
+  Html,
+  Preview,
+  Section,
+  Tailwind,
+  Text,
+  Img,
+  Row,
+  Column,
+} from '@react-email/components';
 import { IUsageEmailData } from './types';
 
 function MetricCard({
@@ -19,17 +32,23 @@ function MetricCard({
   const formatNumber = (num: number) => Math.floor(num).toLocaleString('en-US', { maximumFractionDigits: 0 });
 
   return (
-    <div className="flex h-[88px] flex-col rounded-lg border border-gray-100 bg-gray-50/50 p-2">
-      <div className="flex items-start justify-between gap-2">
-        <Text className="mb-0 mt-0 min-h-[28px] text-xs font-medium leading-tight text-gray-600">{title}</Text>
-        <Text className={`whitespace-nowrap text-xs font-medium ${changeColor} mb-0 mt-0`}>
-          {isPositive ? '↑' : '↓'} {Math.abs(Math.floor(change))}%
-        </Text>
-      </div>
-      <div className="mt-auto">
-        <Text className="mb-0 mt-0 text-lg font-bold leading-none text-gray-900">{formatNumber(current)}</Text>
-        <Text className="mb-0 mt-0.5 text-[10px] leading-none text-gray-500">Previous: {formatNumber(previous)}</Text>
-      </div>
+    <div className="h-[88px] rounded-lg border border-gray-100 bg-gray-50/50 p-1">
+      <Row className="flex items-start justify-between gap-2">
+        <Column align="left" className="w-full">
+          <Text className="mb-0 mt-0 min-h-[28px] text-xs font-medium leading-tight text-gray-600">{title}</Text>
+        </Column>
+        <Column align="right" className="w-full">
+          <Text className={`whitespace-nowrap text-xs font-medium ${changeColor} mb-0 mt-0`}>
+            {isPositive ? '↑' : '↓'} {Math.abs(Math.floor(change))}%
+          </Text>
+        </Column>
+      </Row>
+      <Row className="mt-[10px]">
+        <Column align="left">
+          <Text className="mb-0 mt-0 text-lg font-bold leading-none text-gray-900">{formatNumber(current)}</Text>
+          <Text className="mb-0 mt-0.5 text-[10px] leading-none text-gray-500">Previous: {formatNumber(previous)}</Text>
+        </Column>
+      </Row>
     </div>
   );
 }
@@ -46,17 +65,13 @@ function ChannelBreakdown({ channels }: { channels: IUsageEmailData['channelBrea
   return (
     <Section className="mt-6">
       <SectionHeader title="Channel Breakdown" />
-      <div className="grid grid-cols-3 gap-3">
+      <Row>
         {Object.entries(channels).map(([channel, metrics]) => (
-          <MetricCard
-            key={channel}
-            title={channel}
-            current={metrics.current}
-            previous={metrics.previous}
-            change={metrics.change}
-          />
+          <Column key={channel} className="p-2">
+            <MetricCard title={channel} current={metrics.current} previous={metrics.previous} change={metrics.change} />
+          </Column>
         ))}
-      </div>
+      </Row>
     </Section>
   );
 }
@@ -65,32 +80,32 @@ function InboxMetrics({ metrics }: { metrics: IUsageEmailData['inboxMetrics'] })
   return (
     <Section className="mt-6">
       <SectionHeader title="Inbox Activity" />
-      <div className="grid grid-cols-3 gap-3">
-        <MetricCard
-          title="Sessions"
-          current={metrics.sessionInitialized.current}
-          previous={metrics.sessionInitialized.previous}
-          change={metrics.sessionInitialized.change}
-        />
-        <MetricCard
-          title="Preference Updates"
-          current={metrics.updatePreferences.current}
-          previous={metrics.updatePreferences.previous}
-          change={metrics.updatePreferences.change}
-        />
-        <MetricCard
-          title="Notifications Marked"
-          current={metrics.markNotification.current}
-          previous={metrics.markNotification.previous}
-          change={metrics.markNotification.change}
-        />
-        <MetricCard
-          title="Actions Taken"
-          current={metrics.updateAction.current}
-          previous={metrics.updateAction.previous}
-          change={metrics.updateAction.change}
-        />
-      </div>
+      <Row>
+        <Column className="p-2">
+          <MetricCard
+            title="Sessions"
+            current={metrics.sessionInitialized.current}
+            previous={metrics.sessionInitialized.previous}
+            change={metrics.sessionInitialized.change}
+          />
+        </Column>
+        <Column className="p-2">
+          <MetricCard
+            title="Preference Updates"
+            current={metrics.updatePreferences.current}
+            previous={metrics.updatePreferences.previous}
+            change={metrics.updatePreferences.change}
+          />
+        </Column>
+        <Column className="p-2">
+          <MetricCard
+            title="Notifications Marked"
+            current={metrics.markNotification.current}
+            previous={metrics.markNotification.previous}
+            change={metrics.markNotification.change}
+          />
+        </Column>
+      </Row>
     </Section>
   );
 }
@@ -99,17 +114,13 @@ function WorkflowStats({ workflows }: { workflows: IUsageEmailData['workflowStat
   return (
     <Section className="mt-6">
       <SectionHeader title="Workflow Performance" />
-      <div className="grid grid-cols-3 gap-3">
+      <Row>
         {Object.entries(workflows).map(([name, metrics]) => (
-          <MetricCard
-            key={name}
-            title={name}
-            current={metrics.current}
-            previous={metrics.previous}
-            change={metrics.change}
-          />
+          <Column key={name} className="p-2">
+            <MetricCard title={name} current={metrics.current} previous={metrics.previous} change={metrics.change} />
+          </Column>
         ))}
-      </div>
+      </Row>
     </Section>
   );
 }
@@ -124,12 +135,22 @@ export default function UsageInsightsEmail(props: IUsageEmailData) {
       <Tailwind>
         <Body className="bg-gray-50 font-sans">
           <Container className="mx-auto w-full">
-            <Section className="rounded-t-lg bg-indigo-600 px-6 py-8">
+            <Section>
+              <Img
+                src={`https://dashboard.novu.co/static/images/novu-colored-text.png`}
+                width="119"
+                height="37"
+                alt="Novu"
+                className="mx-auto my-[32px]"
+              />
+            </Section>
+
+            <Section className="rounded-t-lg bg-[#000000] px-6 py-8">
               <Heading className="text-center text-2xl font-bold text-white">Novu Insights Report</Heading>
               <Text className="text-center text-sm text-indigo-100">{props.organizationName}</Text>
             </Section>
 
-            <Container className="rounded-b-lg bg-white px-6 py-6 shadow-sm">
+            <Container className="rounded-b-lg bg-white px-3 py-3 shadow-sm">
               <div className="mb-6 rounded-md border border-indigo-100/50 bg-indigo-50/50 p-3 text-center">
                 <Text className="text-xs font-medium text-indigo-900">
                   Reporting Period: {props.period.current}