From 3ad77bd2c2883a05a62d414528364ca22852a4db Mon Sep 17 00:00:00 2001
From: Sanne de Vries <65487235+sanne-san@users.noreply.github.com>
Date: Tue, 28 May 2024 16:29:49 +0200
Subject: [PATCH] Updated email newsletter spacing and font sizes (#20273)

REF MOM-146

- These styling changes are a general newsletter template improvement,
and are also laying the groundwork for including a subhead in the
newsletter header. Both the newsletter template as well as the
newsletter preview in settings have been updated.
---
 .../admin-x-design-system/tailwind.config.cjs |  2 +-
 .../newsletters/NewsletterPreviewContent.tsx  | 28 +++++-----
 .../email-templates/partials/styles-old.hbs   | 53 ++++++++++---------
 .../lib/email-templates/template-old.hbs      |  2 +-
 4 files changed, 43 insertions(+), 42 deletions(-)

diff --git a/apps/admin-x-design-system/tailwind.config.cjs b/apps/admin-x-design-system/tailwind.config.cjs
index d554015aa4..7a614ce4f6 100644
--- a/apps/admin-x-design-system/tailwind.config.cjs
+++ b/apps/admin-x-design-system/tailwind.config.cjs
@@ -270,7 +270,7 @@ module.exports = {
                 base: '1.4rem',
                 xs: '1.2rem',
                 sm: '1.3rem',
-                md: '1.40rem',
+                md: '1.4rem',
                 lg: '1.65rem',
                 xl: '2rem',
                 '2xl': '2.4rem',
diff --git a/apps/admin-x-settings/src/components/settings/email/newsletters/NewsletterPreviewContent.tsx b/apps/admin-x-settings/src/components/settings/email/newsletters/NewsletterPreviewContent.tsx
index a7c36862e0..fe7d9f4b01 100644
--- a/apps/admin-x-settings/src/components/settings/email/newsletters/NewsletterPreviewContent.tsx
+++ b/apps/admin-x-settings/src/components/settings/email/newsletters/NewsletterPreviewContent.tsx
@@ -116,30 +116,30 @@ const NewsletterPreviewContent: React.FC<{
                                 </div>
                             )}
                             {showHeader && (
-                                <div className="border-b border-grey-200 py-12" style={{borderColor: secondaryBorderColor}}>
+                                <div className="border-b border-grey-200 py-8" style={{borderColor: secondaryBorderColor}}>
                                     {headerIcon && <img alt="" className="mx-auto mb-2 h-10 w-10" role="presentation" src={headerIcon} />}
                                     {headerTitle && <h4 className="mb-1 text-center text-[1.6rem] font-bold uppercase leading-tight tracking-tight text-grey-900" style={{color: textColor}}>{headerTitle}</h4>}
-                                    {headerSubtitle && <h5 className="mb-1 text-center text-[1.4rem] font-normal leading-tight text-grey-600" style={{color: secondaryTextColor}}>{headerSubtitle}</h5>}
+                                    {headerSubtitle && <h5 className="mb-1 text-center text-md font-normal text-grey-700" style={{color: secondaryTextColor}}>{headerSubtitle}</h5>}
                                 </div>
                             )}
                             {showPostTitleSection && (
-                                <div className={clsx('flex flex-col pb-10 pt-12', titleAlignment === 'center' ? 'items-center' : 'items-start')}>
+                                <div className={clsx('flex flex-col py-8', titleAlignment === 'center' ? 'items-center' : 'items-start')}>
                                     <h2 className={clsx(
-                                        'pb-4 text-5xl font-bold leading-supertight text-black',
+                                        'pb-4 text-4xl font-bold leading-supertight text-black',
                                         titleFontCategory === 'serif' && 'font-serif',
                                         titleAlignment === 'center' ? 'text-center' : 'text-left'
                                     )} style={{color: titleColor}}>
                                         Your email newsletter
                                     </h2>
                                     <div className={clsx(
-                                        'flex w-full justify-between text-center text-sm leading-none tracking-[0.1px] text-grey-600',
+                                        'flex w-full justify-between text-center text-md leading-none text-grey-700',
                                         titleAlignment === 'center' ? 'flex-col' : 'flex-row'
                                     )}>
-                                        <p className="pb-2" style={{color: secondaryTextColor}}>
+                                        <p className="pb-1" style={{color: secondaryTextColor}}>
                                             By {authorPlaceholder}
                                             <span className="before:pl-0.5 before:pr-1 before:content-['•']">{currentDate}</span>
                                         </p>
-                                        <p className="pb-2 underline" style={{color: secondaryTextColor}}><span>View in browser</span></p>
+                                        <p className="pb-1 underline" style={{color: secondaryTextColor}}><span>View in browser</span></p>
                                     </div>
                                 </div>
                             )}
@@ -150,11 +150,11 @@ const NewsletterPreviewContent: React.FC<{
                                     <div className="h-[300px] w-full max-w-[600px] bg-grey-200 bg-cover bg-no-repeat">
                                         <img alt="Feature" className='min-h-full min-w-full shrink-0' src={CoverImage} />
                                     </div>
-                                    <div className="mt-1 w-full max-w-[600px] pb-[30px] text-center text-[1.3rem] text-grey-600" style={{color: secondaryTextColor}}>Feature image caption</div>
+                                    <div className="mt-1 w-full max-w-[600px] pb-8 text-center text-[1.3rem] text-grey-700" style={{color: secondaryTextColor}}>Feature image caption</div>
                                 </>
                             )}
 
-                            <div className={clsx('max-w-[600px] border-b border-grey-200 py-5 text-[1.6rem] leading-[1.7] text-black', bodyFontCategory === 'serif' && 'font-serif')} style={{borderColor: secondaryBorderColor}}>
+                            <div className={clsx('max-w-[600px] border-b border-grey-200 pb-5 text-[1.6rem] leading-[1.7] text-black', bodyFontCategory === 'serif' && 'font-serif')} style={{borderColor: secondaryBorderColor}}>
                                 <p className="mb-5" style={{color: textColor}}>This is what your content will look like when you send one of your posts as an email newsletter to your subscribers.</p>
                                 <p className="mb-5" style={{color: textColor}}>Over there on the right you&apos;ll see some settings that allow you to customize the look and feel of this template to make it perfectly suited to your brand. Email templates are exceptionally finnicky to make, but we&apos;ve spent a long time optimising this one to make it work beautifully across devices, email clients and content types.</p>
                                 <p className="mb-5" style={{color: textColor}}>So, you can trust that every email you send with Ghost will look great and work well. Just like the rest of your site.</p>
@@ -199,7 +199,7 @@ const NewsletterPreviewContent: React.FC<{
                                     <div className="flex justify-between gap-4 py-2">
                                         <div>
                                             <h4 className="mb-1 mt-0.5 text-[1.9rem]" style={{color: textColor}}>The three latest posts published on your site</h4>
-                                            <p className="m-0 text-base text-grey-600" style={{color: secondaryTextColor}}>Posts sent as an email only will never be shown here.</p>
+                                            <p className="m-0 text-base text-grey-700" style={{color: secondaryTextColor}}>Posts sent as an email only will never be shown here.</p>
                                         </div>
                                         <div className="aspect-square h-auto w-full max-w-[100px] bg-grey-200 bg-cover bg-no-repeat">
                                             <img alt="Latest post" src={LatestPosts1} />
@@ -208,7 +208,7 @@ const NewsletterPreviewContent: React.FC<{
                                     <div className="flex justify-between gap-4 py-2">
                                         <div>
                                             <h4 className="mb-1 mt-0.5 text-[1.9rem]" style={{color: textColor}}>Displayed at the bottom of each newsletter</h4>
-                                            <p className="m-0 text-base text-grey-600" style={{color: secondaryTextColor}}>Giving your readers one more place to discover your stories.</p>
+                                            <p className="m-0 text-base text-grey-700" style={{color: secondaryTextColor}}>Giving your readers one more place to discover your stories.</p>
                                         </div>
                                         <div className="aspect-square h-auto w-full max-w-[100px] bg-grey-200 bg-cover bg-no-repeat">
                                             <img alt="Latest post" src={LatestPosts2} />
@@ -217,7 +217,7 @@ const NewsletterPreviewContent: React.FC<{
                                     <div className="flex justify-between gap-4 py-2">
                                         <div>
                                             <h4 className="mb-1 mt-0.5 text-[1.9rem]" style={{color: textColor}}>To keep your work front and center</h4>
-                                            <p className="m-0 text-base text-grey-600" style={{color: secondaryTextColor}}>Making sure that your audience stays engaged.</p>
+                                            <p className="m-0 text-base text-grey-700" style={{color: secondaryTextColor}}>Making sure that your audience stays engaged.</p>
                                         </div>
                                         <div className="aspect-square h-auto w-full max-w-[100px] bg-grey-200 bg-cover bg-no-repeat">
                                             <img alt="Latest post" src={LatestPosts3} />
@@ -246,9 +246,9 @@ const NewsletterPreviewContent: React.FC<{
 
                             {/* Footer */}
                             <div className="flex flex-col items-center pt-10">
-                                <div dangerouslySetInnerHTML={{__html: footerContent || ''}} className="text break-words px-8 py-3 text-center text-[1.3rem] leading-base text-grey-600" style={{color: secondaryTextColor}} />
+                                <div dangerouslySetInnerHTML={{__html: footerContent || ''}} className="text break-words px-8 py-3 text-center text-[1.3rem] leading-base text-grey-700" style={{color: secondaryTextColor}} />
 
-                                <div className="px-8 pb-14 pt-3 text-center text-[1.3rem] text-grey-600">
+                                <div className="px-8 pb-14 pt-3 text-center text-[1.3rem] text-grey-700">
                                     <span style={{color: secondaryTextColor}}>{siteTitle} © {currentYear} &mdash; </span>
                                     <span className="pointer-events-none cursor-auto underline" style={{color: secondaryTextColor}}>Unsubscribe</span>
                                 </div>
diff --git a/ghost/email-service/lib/email-templates/partials/styles-old.hbs b/ghost/email-service/lib/email-templates/partials/styles-old.hbs
index 2bc6a2dbdb..53dd113540 100644
--- a/ghost/email-service/lib/email-templates/partials/styles-old.hbs
+++ b/ghost/email-service/lib/email-templates/partials/styles-old.hbs
@@ -311,24 +311,24 @@ figure blockquote p {
 }
 
 .site-icon {
-    padding-bottom: 10px;
-    padding-top: 20px;
+    padding-bottom: 8px;
+    padding-top: 8px;
     text-align: center;
     border-radius: 3px;
 }
 
 .site-icon img {
-    width: 48px;
-    height: 48px;
+    width: 44px;
+    height: 44px;
     border-radius: 3px;
 }
 
 .site-info {
-    padding-top: 50px;
+    padding-top: 32px;
 }
 
 .site-info-bordered {
-    padding-top: 50px;
+    padding-top: 32px;
     border-bottom: 1px solid #e5eff5;
 }
 
@@ -342,7 +342,7 @@ figure blockquote p {
 }
 
 .site-url-bottom-padding {
-    padding-bottom: 50px;
+    padding-bottom: 32px;
 }
 
 .site-title {
@@ -350,7 +350,7 @@ figure blockquote p {
 }
 
 .site-subtitle {
-    color: #8695a4;
+    color: #738a94;
     font-size: 14px;
     font-weight: 400;
     text-transform: none;
@@ -358,7 +358,7 @@ figure blockquote p {
 
 .post-title {
     padding-bottom: 16px;
-    font-size: 42px;
+    font-size: 36px;
     line-height: 1.1em;
     font-weight: 700;
     text-align: center;
@@ -375,7 +375,7 @@ figure blockquote p {
     color: #15212A;
     display: block;
     text-align: center;
-    margin-top: 50px;
+    margin-top: 32px;
 }
 .post-title-link-left {
     text-align: left;
@@ -384,8 +384,8 @@ figure blockquote p {
 .post-meta,
 .view-online {
     color: #738a94;
-    font-size: 13px;
-    letter-spacing: 0.1px;
+    font-size: 14px;
+    font-weight: 400;
     text-align: center;
 }
 
@@ -418,6 +418,7 @@ figure blockquote p {
     word-wrap: none;
     white-space: nowrap;
     color: #738a94;
+    text-decoration: underline !important;
 }
 
 .feature-image-row:first-child > td {
@@ -438,9 +439,9 @@ figure blockquote p {
 .feature-image-caption {
     width: 100%;
     padding-top: 5px;
-    padding-bottom: 30px;
+    padding-bottom: 32px;
     text-align: center;
-    font-size: 13px!important;
+    font-size: 13px !important;
     color: {{secondaryTextColor}};
     line-height: 1.5em;
 }
@@ -1327,36 +1328,36 @@ a[data-flickr-embed] img {
 
     table.body .site-info,
     table.body .site-info-bordered {
-        padding-top: 30px !important;
+        padding-top: 24px !important;
     }
 
     table.body .site-url-bottom-padding {
-        padding-bottom: 30px !important;
+        padding-bottom: 24px !important;
     }
 
     table.body .post-title-link {
-        margin-top: 30px !important;
+        margin-top: 24px !important;
     }
 
     table.body .post-meta-wrapper {
-        padding-bottom: 30px !important;
+        padding-bottom: 24px !important;
     }
 
     table.body .site-icon img {
-        width: 40px !important;
-        height: 40px !important;
+        width: 36px !important;
+        height: 36px !important;
     }
 
     table.body .site-url a {
-        font-size: 14px !important;
-        padding-bottom: 15px !important;
+        font-size: 13px !important;
+        padding-bottom: 16px !important;
     }
 
     table.body .post-meta,
     table.body .post-meta-date {
         white-space: normal !important;
-        font-size: 12px !important;
-        line-height: 1.5em;
+        font-size: 13px !important;
+        line-height: 1.2em;
     }
 
     table.body .post-meta,
@@ -1399,8 +1400,8 @@ a[data-flickr-embed] img {
     }
 
     table.body .post-title a {
-        font-size: 32px !important;
-        line-height: 1.15em !important;
+        font-size: 26px !important;
+        line-height: 1.1em !important;
     }
 
     table.feedback-buttons {
diff --git a/ghost/email-service/lib/email-templates/template-old.hbs b/ghost/email-service/lib/email-templates/template-old.hbs
index 03921065d8..50317ef07f 100644
--- a/ghost/email-service/lib/email-templates/template-old.hbs
+++ b/ghost/email-service/lib/email-templates/template-old.hbs
@@ -81,7 +81,7 @@
                                             </tr>
                                             <tr>
                                                 <td style="width: 100%">
-                                                    <table class="post-meta-wrapper" role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" style="padding-bottom: 48px;">
+                                                    <table class="post-meta-wrapper" role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" style="padding-bottom: 32px;">
                                                         <tr>
                                                             <td height="20" class="{{classes.meta}}" style="padding: 0;">
                                                                 By {{post.authors}} • <span class="post-meta-date">{{post.publishedAt}} </span>