From cbf4b5030a7e913ec470badd5dcf3d7767df6d69 Mon Sep 17 00:00:00 2001 From: gabriel miranda Date: Wed, 5 Nov 2025 09:27:37 -0300 Subject: [PATCH 01/18] define width for react email logo --- apps/web/components/header-with-social-icons/inline-styles.tsx | 1 + apps/web/components/header-with-social-icons/tailwind.tsx | 1 + 2 files changed, 2 insertions(+) diff --git a/apps/web/components/header-with-social-icons/inline-styles.tsx b/apps/web/components/header-with-social-icons/inline-styles.tsx index e380d36b27..5ee66559bc 100644 --- a/apps/web/components/header-with-social-icons/inline-styles.tsx +++ b/apps/web/components/header-with-social-icons/inline-styles.tsx @@ -14,6 +14,7 @@ export const component = ( React Email logo diff --git a/apps/web/components/header-with-social-icons/tailwind.tsx b/apps/web/components/header-with-social-icons/tailwind.tsx index 312153c3f7..ba3e0be071 100644 --- a/apps/web/components/header-with-social-icons/tailwind.tsx +++ b/apps/web/components/header-with-social-icons/tailwind.tsx @@ -7,6 +7,7 @@ export const component = ( React Email logo From bf897702897cf4a545eea54408f69df27e6b55fb Mon Sep 17 00:00:00 2001 From: gabriel miranda Date: Wed, 5 Nov 2025 09:48:46 -0300 Subject: [PATCH 02/18] add width to logo --- apps/web/components/footer-with-one-column/inline-styles.tsx | 1 + apps/web/components/footer-with-one-column/tailwind.tsx | 1 + 2 files changed, 2 insertions(+) diff --git a/apps/web/components/footer-with-one-column/inline-styles.tsx b/apps/web/components/footer-with-one-column/inline-styles.tsx index 5f55641770..20509651d7 100644 --- a/apps/web/components/footer-with-one-column/inline-styles.tsx +++ b/apps/web/components/footer-with-one-column/inline-styles.tsx @@ -10,6 +10,7 @@ export const component = ( alt="React Email logo" height="42" src="/static/logo-without-background.png" + width="42" /> diff --git a/apps/web/components/footer-with-one-column/tailwind.tsx b/apps/web/components/footer-with-one-column/tailwind.tsx index 2c420d1389..71d907137e 100644 --- a/apps/web/components/footer-with-one-column/tailwind.tsx +++ b/apps/web/components/footer-with-one-column/tailwind.tsx @@ -10,6 +10,7 @@ export const component = ( alt="React Email logo" height="42" src="/static/logo-without-background.png" + width="42" /> From 723f26af0eeaea2c9638e57da226350223eea575 Mon Sep 17 00:00:00 2001 From: gabriel miranda Date: Wed, 5 Nov 2025 10:06:58 -0300 Subject: [PATCH 03/18] add width for buttons --- apps/web/components/download-buttons/inline-styles.tsx | 2 ++ apps/web/components/download-buttons/tailwind.tsx | 2 ++ 2 files changed, 4 insertions(+) diff --git a/apps/web/components/download-buttons/inline-styles.tsx b/apps/web/components/download-buttons/inline-styles.tsx index 1fb655c3d2..0fc81f32e6 100644 --- a/apps/web/components/download-buttons/inline-styles.tsx +++ b/apps/web/components/download-buttons/inline-styles.tsx @@ -31,6 +31,7 @@ export const component = ( From 1948449ffbaaede94819da9298ace97d9e3e8548 Mon Sep 17 00:00:00 2001 From: gabriel miranda Date: Tue, 11 Nov 2025 12:37:30 -0300 Subject: [PATCH 13/18] wip: customer reviews --- .../components/customer-reviews/tailwind.tsx | 73 ++++++++++++------- 1 file changed, 45 insertions(+), 28 deletions(-) diff --git a/apps/web/components/customer-reviews/tailwind.tsx b/apps/web/components/customer-reviews/tailwind.tsx index 897ef565d8..56134e4939 100644 --- a/apps/web/components/customer-reviews/tailwind.tsx +++ b/apps/web/components/customer-reviews/tailwind.tsx @@ -1,12 +1,14 @@ import { Body, Button, + Column, Container, Head, Heading, Hr, Html, Preview, + Row, Section, Text, } from '@react-email/components'; @@ -37,36 +39,51 @@ export const component = ( { rating: 2, count: 199 }, { rating: 1, count: 147 }, ].map((count) => ( -
-
- - {count.rating} - star reviews - -
-
- {Math.round((count.count / 1624) * 100)}% -
-
+ +
+ + + + {count.rating} + star reviews + + + + +
+ {Math.round((count.count / 1624) * 100)}% +
+ + + + + ))} From 9cf112fab6d903eea97a7e96189e77451082e8cb Mon Sep 17 00:00:00 2001 From: gabriel miranda Date: Wed, 12 Nov 2025 14:18:35 -0300 Subject: [PATCH 14/18] fix compatibility of customer reviews it still doesn't work 100% in Gmail's App --- .../components/customer-reviews/tailwind.tsx | 19 ++++++++++++------- 1 file changed, 12 insertions(+), 7 deletions(-) diff --git a/apps/web/components/customer-reviews/tailwind.tsx b/apps/web/components/customer-reviews/tailwind.tsx index 56134e4939..d09c1b7e55 100644 --- a/apps/web/components/customer-reviews/tailwind.tsx +++ b/apps/web/components/customer-reviews/tailwind.tsx @@ -38,9 +38,9 @@ export const component = ( { rating: 3, count: 97 }, { rating: 2, count: 199 }, { rating: 1, count: 147 }, - ].map((count) => ( + ].map(({ count, rating }) => ( @@ -49,7 +49,7 @@ export const component = ( - {count.rating} + {rating} star reviews @@ -67,17 +67,22 @@ export const component = ( + -
- {Math.round((count.count / 1624) * 100)}% + {Math.round((count / 1624) * 100)}%
From c5a965b3b1f30ee47ae9788d842f90a90e22e72d Mon Sep 17 00:00:00 2001 From: gabriel miranda Date: Wed, 12 Nov 2025 14:45:47 -0300 Subject: [PATCH 15/18] update inline styles variant --- .../customer-reviews/inline-styles.tsx | 151 +++++++++--------- 1 file changed, 79 insertions(+), 72 deletions(-) diff --git a/apps/web/components/customer-reviews/inline-styles.tsx b/apps/web/components/customer-reviews/inline-styles.tsx index 12deafff87..c8f50d55fb 100644 --- a/apps/web/components/customer-reviews/inline-styles.tsx +++ b/apps/web/components/customer-reviews/inline-styles.tsx @@ -1,12 +1,14 @@ import { Body, Button, + Column, Container, Head, Heading, Hr, Html, Preview, + Row, Section, Text, } from '@react-email/components'; @@ -54,87 +56,92 @@ export const component = ( { rating: 3, count: 97 }, { rating: 2, count: 199 }, { rating: 1, count: 147 }, - ].map((count) => ( -
( + -
- - {count.rating} - star reviews - -
+ + + + {rating} + + {' '} + star reviews + + + + - {count.count > 0 ? ( -
- ) : null} -
- - -
- {Math.round((count.count / 1624) * 100)}% -
- + > + {Math.round((count / 1624) * 100)}% + + + + + + ))} Date: Wed, 12 Nov 2025 16:31:00 -0300 Subject: [PATCH 16/18] lint --- .../inline-styles.tsx | 2 +- .../tailwind.tsx | 7 ++- .../inline-styles.tsx | 50 +++++++++---------- .../tailwind.tsx | 7 ++- .../list-with-image-on-left/tailwind.tsx | 6 ++- .../simple-rating-survey/inline-styles.tsx | 9 ++-- 6 files changed, 48 insertions(+), 33 deletions(-) diff --git a/apps/web/components/article-with-multiple-authors/inline-styles.tsx b/apps/web/components/article-with-multiple-authors/inline-styles.tsx index 191eebcc17..933b3d4498 100644 --- a/apps/web/components/article-with-multiple-authors/inline-styles.tsx +++ b/apps/web/components/article-with-multiple-authors/inline-styles.tsx @@ -8,8 +8,8 @@ import { Section, Text, } from '@react-email/components'; -import { Layout } from '../_components/layout'; import { Fragment } from 'react/jsx-runtime'; +import { Layout } from '../_components/layout'; export const component = (
diff --git a/apps/web/components/article-with-multiple-authors/tailwind.tsx b/apps/web/components/article-with-multiple-authors/tailwind.tsx index 5335ff9ad4..052b49096f 100644 --- a/apps/web/components/article-with-multiple-authors/tailwind.tsx +++ b/apps/web/components/article-with-multiple-authors/tailwind.tsx @@ -44,7 +44,12 @@ export const component = ( width={48} /> - + @@ -11,8 +11,8 @@ export const component = ( margin: 0, fontWeight: 600, fontSize: 24, - color: "rgb(17,24,39)", - lineHeight: "32px", + color: 'rgb(17,24,39)', + lineHeight: '32px', }} > Functional Style @@ -21,8 +21,8 @@ export const component = ( style={{ marginTop: 8, fontSize: 16, - color: "rgb(107,114,128)", - lineHeight: "24px", + color: 'rgb(107,114,128)', + lineHeight: '24px', }} > Combine practicality and style effortlessly with our furniture, @@ -32,32 +32,32 @@ export const component = (
{[ { - title: "Vesatile Comfort", + title: 'Vesatile Comfort', description: - "Experience ultimate comfort and versatility with our furniture collection, designed to adapt to your ever-changing needs.", + 'Experience ultimate comfort and versatility with our furniture collection, designed to adapt to your ever-changing needs.', }, { - title: "Luxurious Retreat", + title: 'Luxurious Retreat', description: - "Transform your space into a haven of relaxation with our indulgent furniture collection.", + 'Transform your space into a haven of relaxation with our indulgent furniture collection.', }, { - title: "Unleash Creativity", + title: 'Unleash Creativity', description: - "Unleash your inner designer with our customizable furniture options, allowing you to create a space that reflects your unique vision", + 'Unleash your inner designer with our customizable furniture options, allowing you to create a space that reflects your unique vision', }, { - title: "Elevate Outdoor Living", + title: 'Elevate Outdoor Living', description: - "Take your outdoor space to new heights with our premium outdoor furniture, designed to elevate your alfresco experience.", + 'Take your outdoor space to new heights with our premium outdoor furniture, designed to elevate your alfresco experience.', }, ].map((feature, index) => (
- + {feature.title} @@ -115,8 +115,8 @@ export const component = ( fontWeight: 600, paddingTop: 8, fontSize: 16, - lineHeight: "24px", - color: "rgb(107, 114, 128)", + lineHeight: '24px', + color: 'rgb(107, 114, 128)', }} > {feature.description} diff --git a/apps/web/components/header-and-numbered-list-items/tailwind.tsx b/apps/web/components/header-and-numbered-list-items/tailwind.tsx index b2a28d1d92..09a20084b5 100644 --- a/apps/web/components/header-and-numbered-list-items/tailwind.tsx +++ b/apps/web/components/header-and-numbered-list-items/tailwind.tsx @@ -41,7 +41,12 @@ export const component = (
- + - +
-
- +
+ {Array.from({ length: 5 }).map((_, i) => ( Date: Wed, 12 Nov 2025 16:33:13 -0300 Subject: [PATCH 17/18] fix typo Co-authored-by: cubic-dev-ai[bot] <191113872+cubic-dev-ai[bot]@users.noreply.github.com> --- apps/web/components/header-and-numbered-list-items/tailwind.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/web/components/header-and-numbered-list-items/tailwind.tsx b/apps/web/components/header-and-numbered-list-items/tailwind.tsx index 09a20084b5..ecd2ca7f5b 100644 --- a/apps/web/components/header-and-numbered-list-items/tailwind.tsx +++ b/apps/web/components/header-and-numbered-list-items/tailwind.tsx @@ -17,7 +17,7 @@ export const component = (
{[ { - title: 'Vesatile Comfort', + title: 'Versatile Comfort', description: 'Experience ultimate comfort and versatility with our furniture collection, designed to adapt to your ever-changing needs.', }, From e48daa024c89764e013b3b02af784daa680821ef Mon Sep 17 00:00:00 2001 From: Gabriel Miranda Date: Wed, 12 Nov 2025 16:56:13 -0300 Subject: [PATCH 18/18] make dd and dt siblings, kind of --- .../customer-reviews/inline-styles.tsx | 140 +++++++++--------- .../components/customer-reviews/tailwind.tsx | 82 +++++----- 2 files changed, 115 insertions(+), 107 deletions(-) diff --git a/apps/web/components/customer-reviews/inline-styles.tsx b/apps/web/components/customer-reviews/inline-styles.tsx index c8f50d55fb..fa21ee6ed5 100644 --- a/apps/web/components/customer-reviews/inline-styles.tsx +++ b/apps/web/components/customer-reviews/inline-styles.tsx @@ -66,80 +66,84 @@ export const component = ( }} > -
- - - - {rating} - - {' '} - star reviews - - - -
+ + + + {rating} + + {' '} + star reviews + + + - + aria-hidden="true" + valign="middle" + > + + - - -
- {Math.round((count / 1624) * 100)}% -
- - - + + + +
+ {Math.round((count / 1624) * 100)}% +
+ + ))} diff --git a/apps/web/components/customer-reviews/tailwind.tsx b/apps/web/components/customer-reviews/tailwind.tsx index d09c1b7e55..fdbfea35ef 100644 --- a/apps/web/components/customer-reviews/tailwind.tsx +++ b/apps/web/components/customer-reviews/tailwind.tsx @@ -45,48 +45,52 @@ export const component = ( align="center" > -
- - - - {rating} - star reviews - - -
+ + + + {rating} + star reviews + + - + className="w-[264px] h-[12px] pl-[12px]" + aria-hidden="true" + valign="middle" + > + + + + + - - -
- {Math.round((count / 1624) * 100)}% -
- - - + + + +
+ {Math.round((count / 1624) * 100)}% +
+ + ))}