mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-04-01 02:41:39 -05:00
Updated unsubscribe design and cleaned up code
refs https://github.com/TryGhost/Team/issues/1495
This commit is contained in:
Djordje Vlaisavljevic
parent
692911185c
commit
90e505d469
2 changed files with 71 additions and 40 deletions
|
|
@ -650,6 +650,16 @@ const FrameStyles = `
|
|||
padding: 8px;
|
||||
}
|
||||
|
||||
.gh-portal-publication-title {
|
||||
text-align: center;
|
||||
font-size: 1.6rem;
|
||||
letter-spacing: -.1px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
color: #15212a;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
/* Icons
|
||||
/* ----------------------------------------------------- */
|
||||
.gh-portal-icon {
|
||||
|
|
@ -764,8 +774,7 @@ const MobileStyles = `
|
|||
|
||||
button[class="gh-portal-btn"],
|
||||
.gh-portal-btn-main,
|
||||
.gh-portal-btn-primary,
|
||||
.gh-portal-btn-branded {
|
||||
.gh-portal-btn-primary {
|
||||
height: 42px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1040,6 +1049,32 @@ const MultipleProductsGlobalStyles = `
|
|||
.gh-portal-popup-container.preview * {
|
||||
pointer-events: none !important;
|
||||
}
|
||||
|
||||
.gh-portal-unsubscribe-logo {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 2px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.gh-portal-unsubscribe-logo {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
.gh-portal-unsubscribe .gh-portal-main-title {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.gh-portal-btn-inline {
|
||||
display: inline-block;
|
||||
margin-left: 4px;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
`;
|
||||
|
||||
export function getFrameStyles({site}) {
|
||||
|
|
|
|||
|
|
@ -8,20 +8,34 @@ import CloseButton from '../common/CloseButton';
|
|||
|
||||
const React = require('react');
|
||||
|
||||
// function AccountHeader() {
|
||||
// return (
|
||||
// <header className='gh-portal-detail-header'>
|
||||
// <h3 className='gh-portal-main-title'>Publication title</h3>
|
||||
// </header>
|
||||
// );
|
||||
// }
|
||||
function SiteLogo() {
|
||||
const {site} = useContext(AppContext);
|
||||
const siteLogo = site.icon;
|
||||
|
||||
if (siteLogo) {
|
||||
return (
|
||||
<img className='gh-portal-unsubscribe-logo' src={siteLogo} alt={site.title} />
|
||||
);
|
||||
}
|
||||
return (null);
|
||||
}
|
||||
|
||||
function AccountHeader() {
|
||||
const {site} = useContext(AppContext);
|
||||
const siteTitle = site.title || '';
|
||||
return (
|
||||
<header className='gh-portal-header'>
|
||||
<SiteLogo />
|
||||
<h2 className="gh-portal-publication-title">{siteTitle}</h2>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
|
||||
export default function UnsubscribePage() {
|
||||
const {site, pageData, 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;
|
||||
});
|
||||
|
|
@ -48,16 +62,11 @@ export default function UnsubscribePage() {
|
|||
// Case: Email not found
|
||||
if (member === null) {
|
||||
return (
|
||||
<div className='gh-portal-content with-footer'>
|
||||
<div className='gh-portal-content gh-portal-unsubscribe with-footer'>
|
||||
<CloseButton />
|
||||
{/* <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'>
|
||||
<AccountHeader />
|
||||
<h1 className="gh-portal-main-title">Unsubscribe failed</h1>
|
||||
<div>
|
||||
<p className="gh-portal-text-center">Email address not found.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -67,33 +76,20 @@ export default function UnsubscribePage() {
|
|||
// Case: Single active newsletter
|
||||
if (siteNewsletters?.length === 1 && !showPrefs) {
|
||||
return (
|
||||
<div className='gh-portal-content with-footer'>
|
||||
<div className='gh-portal-content gh-portal-unsubscribe with-footer'>
|
||||
<CloseButton />
|
||||
{/* <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'}}>Successfully unsubscribed</h4>
|
||||
<div className='gh-portal-section'>
|
||||
<p className='gh-portal-text-center'><strong>{member?.email}</strong> will no longer receive this newsletter.</p>
|
||||
<p className='gh-portal-text-center'>
|
||||
Didn't mean to do this? Manage your preferences
|
||||
<AccountHeader />
|
||||
<h1 className="gh-portal-main-title">Successfully unsubscribed</h1>
|
||||
<div>
|
||||
<p className='gh-portal-text-center'><strong>{member?.email}</strong> will no longer receive this newsletter. Didn't mean to do this? Manage your preferences
|
||||
<button
|
||||
className="gh-portal-btn-link"
|
||||
style={{
|
||||
display: 'inlineBlock',
|
||||
marginLeft: '4px',
|
||||
fontSize: '1.5rem',
|
||||
fontWeight: '600',
|
||||
cursor: 'pointer'
|
||||
}}
|
||||
className="gh-portal-btn-link gh-portal-btn-branded gh-portal-btn-inline"
|
||||
onClick={() => {
|
||||
setShowPrefs(true);
|
||||
}}
|
||||
>
|
||||
here
|
||||
</button>
|
||||
here
|
||||
</button>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue