0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-17 23:44:39 -05:00

Updated design for newsletter selection step of signup flow

refs https://github.com/TryGhost/Team/issues/1490
This commit is contained in:
Djordje Vlaisavljevic 2022-04-18 17:36:02 +02:00
parent 8b49095214
commit 17414b23a2
2 changed files with 11 additions and 2 deletions

View file

@ -552,6 +552,11 @@ const FrameStyles = `
font-weight: 600; font-weight: 600;
} }
.gh-portal-list-detail.gh-portal-list-big h3 {
font-size: 1.8rem;
font-weight: 600;
}
.gh-portal-list-detail p { .gh-portal-list-detail p {
font-size: 1.45rem; font-size: 1.45rem;
letter-spacing: 0.3px; letter-spacing: 0.3px;
@ -562,6 +567,10 @@ const FrameStyles = `
word-break: break-all; word-break: break-all;
} }
.gh-portal-list-detail.gh-portal-list-big p {
font-size: 1.6rem;
}
.gh-portal-list-detail .old-price { .gh-portal-list-detail .old-price {
text-decoration: line-through; text-decoration: line-through;
} }

View file

@ -15,7 +15,6 @@ function AccountHeader() {
<BackButton brandColor={brandColor} hidden={!lastPage} onClick={(e) => { <BackButton brandColor={brandColor} hidden={!lastPage} onClick={(e) => {
onAction('back'); onAction('back');
}} /> }} />
<h3 className='gh-portal-main-title'>Email preferences</h3>
</header> </header>
); );
} }
@ -26,7 +25,7 @@ function NewsletterPrefSection({newsletter, subscribedNewsletters, setSubscribed
}); });
return ( return (
<section> <section>
<div className='gh-portal-list-detail'> <div className='gh-portal-list-detail gh-portal-list-big'>
<h3>{newsletter.name}</h3> <h3>{newsletter.name}</h3>
<p>{newsletter.description}</p> <p>{newsletter.description}</p>
</div> </div>
@ -89,6 +88,7 @@ export default function NewsletterSelectionPage() {
<div className='gh-portal-content with-footer'> <div className='gh-portal-content with-footer'>
<CloseButton /> <CloseButton />
<AccountHeader /> <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-section'>
<div className='gh-portal-list'> <div className='gh-portal-list'>
<NewsletterPrefs <NewsletterPrefs