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

Updated design for unsubscribe page

Browse source 
refs https://github.com/TryGhost/Team/issues/1495
This commit is contained in:
Djordje Vlaisavljevic 2022-04-27 20:27:19 +02:00
parent 82bd498ce9
commit 92811915dd
1 changed files with 30 additions and 17 deletions

47
ghost/portal/src/components/pages/UnsubscribePage.js
View file

@ -7,19 +7,20 @@ import NewsletterManagement from '../common/NewsletterManagement';
const React = require('react');
function AccountHeader() {
return (
<header className='gh-portal-detail-header'>
<h3 className='gh-portal-main-title'>Email preferences</h3>
</header>
);
}
// function AccountHeader() {
// return (
// <header className='gh-portal-detail-header'>
// <h3 className='gh-portal-main-title'>Publication title</h3>
// </header>
// );
// }
export default function UnsubscribePage() {
const {site, pageData, onAction} = useContext(AppContext);
const {site, pageData, brandColor, onAction} = useContext(AppContext);
const api = setupGhostApi({siteUrl: site.url});
const [member, setMember] = useState();
const siteNewsletters = getSiteNewsletters({site});
const siteTitle = site.title || '';
const defaultNewsletters = siteNewsletters.filter((d) => {
return d.subscribe_on_signup;
});
@ -39,12 +40,18 @@ export default function UnsubscribePage() {
if (member === null) {
return (
<div className='gh-portal-content with-footer'>
<AccountHeader />
<p className="gh-portal-text-center">
<h4>Unsubscribe Failed</h4>
</p>
{/* <AccountHeader /> */}
{/* The header below should be in AccountHeader */}
<header className='gh-portal-signup-header'>
<img className='gh-portal-signup-logo' src="https://static.ghost.org/v4.0.0/images/ghost-orb-1.png" alt="fdfkld" />
<h1 className="gh-portal-main-title">{siteTitle}</h1>
</header>
<h4 className="gh-portal-text-center gh-portal-text-large" style={{marginBottom: '8px', fontSize: '2rem'}}>Unsubscribe failed</h4>
<div className='gh-portal-section'>
<p>Email address not found.</p>
<p className="gh-portal-text-center">Email address not found.</p>
</div>
<div className='gh-portal-action-footer'>
<button className='gh-portal-btn gh-portal-btn-link' style={{color: brandColor, margin: '0 auto'}}><span>← Back to {siteTitle}</span></button>
</div>
</div>
);
@ -54,12 +61,18 @@ export default function UnsubscribePage() {
if (siteNewsletters?.length === 1) {
return (
<div className='gh-portal-content with-footer'>
<AccountHeader />
<p className="gh-portal-text-center">
<h4>Successfully unsubscribed</h4>
</p>
{/* <AccountHeader /> */}
<header className='gh-portal-signup-header'>
<img className='gh-portal-signup-logo' src="https://static.ghost.org/v4.0.0/images/ghost-orb-1.png" alt="fdfkld" />
<h1 className="gh-portal-main-title">{siteTitle}</h1>
</header>
<h4 className="gh-portal-text-center gh-portal-text-large">Successfully unsubscribed</h4>
<div className='gh-portal-section'>
<p><strong>{member?.email}</strong> will no longer receive this newsletter.</p>
<p>Didn't mean to do this? Manage your account here.</p>
</div>
<div className='gh-portal-action-footer'>
<button className='gh-portal-btn gh-portal-btn-link' style={{color: brandColor, margin: '0 auto'}}><span>← Back to {siteTitle}</span></button>
</div>
</div>
);