Updated design for newsletter selection page

refs https://github.com/TryGhost/Team/issues/1559

ghost/portal/src/components/Frame.styles.js

@@ -203,8 +203,14 @@ const FrameStyles = `
     z-index: 10000;
 }
 
-.gh-portal-btn-site-title-back:hover {
+.gh-portal-btn-site-title-back span {
-    transform: translateX(-6px);
+    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}) {

ghost/portal/src/components/pages/NewsletterSelectionPage.js

@@ -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>