From a8170752fa85f7eec8c314abf368432a2a5ecc7c Mon Sep 17 00:00:00 2001
From: Sanne de Vries <65487235+sanne-san@users.noreply.github.com>
Date: Thu, 30 May 2024 12:01:59 +0200
Subject: [PATCH] Updated newsletter subtitle settings (#20289)

REF MOM-168
- Updated the settings order to reflect the newsletter order
- Hid the subtitle setting if post title section is toggled off
---
 .../newsletters/NewsletterDetailModal.tsx     | 30 ++++++++++---------
 .../newsletters/NewsletterPreviewContent.tsx  |  2 +-
 2 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/apps/admin-x-settings/src/components/settings/email/newsletters/NewsletterDetailModal.tsx b/apps/admin-x-settings/src/components/settings/email/newsletters/NewsletterDetailModal.tsx
index bf4d768cdf..a053d81346 100644
--- a/apps/admin-x-settings/src/components/settings/email/newsletters/NewsletterDetailModal.tsx
+++ b/apps/admin-x-settings/src/components/settings/email/newsletters/NewsletterDetailModal.tsx
@@ -417,6 +417,22 @@ const Sidebar: React.FC<{
                         value={newsletter.title_color}
                         onChange={color => updateNewsletter({title_color: color})}
                     />}
+                    <ToggleGroup gap='lg'>
+                        {(hasNewsletterSubtitle && newsletter.show_post_title_section) &&
+                            <Toggle
+                                checked={newsletter.show_subhead}
+                                direction="rtl"
+                                label='Subtitle'
+                                onChange={e => updateNewsletter({show_subhead: e.target.checked})}
+                            />
+                        }
+                        <Toggle
+                            checked={newsletter.show_feature_image}
+                            direction="rtl"
+                            label='Feature image'
+                            onChange={e => updateNewsletter({show_feature_image: e.target.checked})}
+                        />
+                    </ToggleGroup>
                     <Select
                         options={fontOptions}
                         selectedOption={fontOptions.find(option => option.value === newsletter.body_font_category)}
@@ -424,20 +440,6 @@ const Sidebar: React.FC<{
                         title='Body style'
                         onSelect={option => updateNewsletter({body_font_category: option?.value})}
                     />
-                    {hasNewsletterSubtitle && 
-                        <Toggle
-                            checked={newsletter.show_subhead}
-                            direction="rtl"
-                            label='Subtitle'
-                            onChange={e => updateNewsletter({show_subhead: e.target.checked})}
-                        />
-                    }
-                    <Toggle
-                        checked={newsletter.show_feature_image}
-                        direction="rtl"
-                        label='Feature image'
-                        onChange={e => updateNewsletter({show_feature_image: e.target.checked})}
-                    />
                 </Form>
 
                 <Form className='mt-6' gap='sm' margins='lg' title='Footer'>
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 e5c32a0c87..a190df2c87 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
@@ -135,7 +135,7 @@ const NewsletterPreviewContent: React.FC<{
                                         Your email newsletter
                                     </h2>
                                     {(hasNewsletterSubtitle && showSubhead) && (
-                                        <p className="mb-4 text-[1.6rem] leading-[1.7] text-black">A subtitle that highlights the key points of your newsletter.</p>
+                                        <p className="mb-4 text-pretty text-[1.6rem] leading-[1.7] text-black">A subtitle can help highlight key points and engage your readers.</p>
                                     )}
                                     <div className={clsx(
                                         'flex w-full justify-between text-center text-md leading-none text-grey-700',