Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-03-25 02:31:59 -05:00
Code Issues Activity

Updated design for newsletter selection page

Browse source 
refs https://github.com/TryGhost/Team/issues/1559
This commit is contained in:
Djordje Vlaisavljevic 2022-05-11 20:33:31 +02:00
parent 6dfb87fadb
commit 980fbd98ac
2 changed files with 45 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -203,8 +203,14 @@ const FrameStyles = `
z-index: 10000;
}
.gh-portal-btn-site-title-back:hover {
transform: translateX(-6px);
.gh-portal-btn-site-title-back span {
margin-right: 4px;
transition: transform 0.4s cubic-bezier(0.1, 0.7, 0.1, 1);
}
.gh-portal-btn-site-title-back:hover span {
transform: translateX(-3px);
}
@media (max-width: 960px) {
@ -534,7 +540,6 @@ const FrameStyles = `
}
.gh-portal-newsletter-selection {
transition: opacity 1s linear;
max-width: 460px;
margin: 0 auto;
}
@ -1106,6 +1111,29 @@ const MultipleProductsGlobalStyles = `
height: 22px;
color: #30cf43;
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.gh-portal-newsletter-selection {
animation: 0.5s ease-in-out fadeIn;
}
.gh-portal-signup {
animation: 0.5s ease-in-out fadeIn;
}
.gh-portal-btn-different-plan {
margin: 0 auto 24px;
color: var(--grey6);
font-weight: 400;
}
`;
export function getFrameStyles({site}) {

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

@ -99,7 +99,7 @@ export default function NewsletterSelectionPage({pageData}) {
</div>
<footer className='gh-portal-action-footer'>
<div style={{width: '100%'}}>
<div style={{marginBottom: '12px'}}>
<div style={{marginBottom: '20px'}}>
<ActionButton
isRunning={isRunning}
retry={retry}
@ -118,6 +118,19 @@ export default function NewsletterSelectionPage({pageData}) {
style={{width: '100%'}}
/>
</div>
<div>
<button
className='gh-portal-btn gh-portal-btn-link gh-portal-btn-different-plan'
onClick = {() => {
if (this.props.onBack) {
this.props.onBack();
} else {
this.context.onAction('closePopup');
}
}}>
<span>Choose a different plan</span>
</button>
</div>
</div>
</footer>
</div>