From 17414b23a21871528c352bc44957b8a3db775091 Mon Sep 17 00:00:00 2001
From: Djordje Vlaisavljevic <dzvlais@gmail.com>
Date: Mon, 18 Apr 2022 17:36:02 +0200
Subject: [PATCH] Updated design for newsletter selection step of signup flow

refs https://github.com/TryGhost/Team/issues/1490
---
 ghost/portal/src/components/Frame.styles.js              | 9 +++++++++
 .../src/components/pages/NewsletterSelectionPage.js      | 4 ++--
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/ghost/portal/src/components/Frame.styles.js b/ghost/portal/src/components/Frame.styles.js
index 9c3673b011..346ccf4cb9 100644
--- a/ghost/portal/src/components/Frame.styles.js
+++ b/ghost/portal/src/components/Frame.styles.js
@@ -552,6 +552,11 @@ const FrameStyles = `
     font-weight: 600;
 }
 
+.gh-portal-list-detail.gh-portal-list-big h3 {
+    font-size: 1.8rem;
+    font-weight: 600;
+}
+
 .gh-portal-list-detail p {
     font-size: 1.45rem;
     letter-spacing: 0.3px;
@@ -562,6 +567,10 @@ const FrameStyles = `
     word-break: break-all;
 }
 
+.gh-portal-list-detail.gh-portal-list-big p {
+    font-size: 1.6rem;
+}
+
 .gh-portal-list-detail .old-price {
     text-decoration: line-through;
 }
diff --git a/ghost/portal/src/components/pages/NewsletterSelectionPage.js b/ghost/portal/src/components/pages/NewsletterSelectionPage.js
index 8cae7a25c9..28277f5d3f 100644
--- a/ghost/portal/src/components/pages/NewsletterSelectionPage.js
+++ b/ghost/portal/src/components/pages/NewsletterSelectionPage.js
@@ -15,7 +15,6 @@ function AccountHeader() {
             <BackButton brandColor={brandColor} hidden={!lastPage} onClick={(e) => {
                 onAction('back');
             }} />
-            <h3 className='gh-portal-main-title'>Email preferences</h3>
         </header>
     );
 }
@@ -26,7 +25,7 @@ function NewsletterPrefSection({newsletter, subscribedNewsletters, setSubscribed
     });
     return (
         <section>
-            <div className='gh-portal-list-detail'>
+            <div className='gh-portal-list-detail gh-portal-list-big'>
                 <h3>{newsletter.name}</h3>
                 <p>{newsletter.description}</p>
             </div>
@@ -89,6 +88,7 @@ export default function NewsletterSelectionPage() {
         <div className='gh-portal-content with-footer'>
             <CloseButton />
             <AccountHeader />
+            <p className="gh-portal-text-center">Pick which emails you want to receive with your <strong>TIER NAME</strong> membership.</p>
             <div className='gh-portal-section'>
                 <div className='gh-portal-list'>
                     <NewsletterPrefs