Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-04-01 02:41:39 -05:00
Code Issues Activity

Refined design for newsletter selection step of signup

Browse source 
refs https://github.com/TryGhost/Team/issues/1490
This commit is contained in:
Djordje Vlaisavljevic 2022-04-21 22:03:38 +02:00
parent a95b1c002f
commit 74e5d629ba
2 changed files with 51 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
ghost/portal/src/components/Frame.styles.js
View file

@ -316,7 +316,7 @@ const FrameStyles = `
.gh-portal-popup-container.full-size {
width: 100vw;
min-height: 100vh;
justify-content: center;
justify-content: flex-start;
animation: popup-full-size 0.25s ease-in-out;
margin: 0;
border-radius: 0;
@ -522,6 +522,10 @@ const FrameStyles = `
margin-top: 28px;
}
.gh-portal-list + .gh-portal-action-footer {
margin-top: 40px;
}
.gh-portal-list {
background: var(--white);
padding: 20px;
@ -529,6 +533,36 @@ const FrameStyles = `
border: 1px solid var(--grey12);
}
.gh-portal-newsletter-selection {
transition: opacity 1s linear;
max-width: 460px;
margin: 0 auto;
}
.gh-portal-newsletter-selection .gh-portal-list {
margin-bottom: 40px;
}
.gh-portal-lock-icon-container {
display: flex;
justify-content: center;
width: 44px;
}
.gh-portal-lock-icon {
width: 14px;
height: 14px;
overflow: visible;
}
.gh-portal-lock-icon path {
color: var(--grey2);
}
.gh-portal-text-large {
font-size: 1.6rem;
}
.gh-portal-list section {
display: flex;
align-items: center;

18
ghost/portal/src/components/pages/NewsletterSelectionPage.js
View file

@ -3,6 +3,7 @@ import {useContext, useState} from 'react';
import Switch from '../common/Switch';
import {getProductFromPrice, getSiteNewsletters} from '../../utils/helpers';
import ActionButton from '../common/ActionButton';
import {ReactComponent as LockIcon} from '../../images/icons/lock.svg';
const React = require('react');
@ -10,6 +11,19 @@ function NewsletterPrefSection({newsletter, subscribedNewsletters, setSubscribed
const isChecked = subscribedNewsletters.some((d) => {
return d.id === newsletter?.id;
});
if (newsletter.paid) {
return (
<section>
<div className='gh-portal-list-detail gh-portal-list-big'>
<h3>{newsletter.name}</h3>
<p>{newsletter.description}</p>
</div>
<div class="gh-portal-lock-icon-container">
<LockIcon className='gh-portal-lock-icon' alt='' title="Unlock access to all newsletters by becoming a paid subscriber." />
</div>
</section>
);
}
return (
<section>
<div className='gh-portal-list-detail gh-portal-list-big'>
@ -73,8 +87,8 @@ export default function NewsletterSelectionPage({pageData}) {
const [subscribedNewsletters, setSubscribedNewsletters] = useState(defaultNewsletters);
return (
<div className='gh-portal-content with-footer'>
<p className="gh-portal-text-center">Pick which emails you want to receive with your <strong>{tierName}</strong> membership.</p>
<div className='gh-portal-content with-footer gh-portal-newsletter-selection'>
<p className="gh-portal-text-center gh-portal-text-large">Pick which emails you want to receive with your <strong>{tierName}</strong> membership.</p>
<div className='gh-portal-section'>
<div className='gh-portal-list'>
<NewsletterPrefs