From 980fbd98ac7fdf1cfbab10ac4fd25060baad47d6 Mon Sep 17 00:00:00 2001
From: Djordje Vlaisavljevic <dzvlais@gmail.com>
Date: Wed, 11 May 2022 20:33:31 +0200
Subject: [PATCH] Updated design for newsletter selection page

refs https://github.com/TryGhost/Team/issues/1559
---
 ghost/portal/src/components/Frame.styles.js   | 34 +++++++++++++++++--
 .../pages/NewsletterSelectionPage.js          | 15 +++++++-
 2 files changed, 45 insertions(+), 4 deletions(-)

diff --git a/ghost/portal/src/components/Frame.styles.js b/ghost/portal/src/components/Frame.styles.js
index 3d28ea867e..c03d1e1524 100644
--- a/ghost/portal/src/components/Frame.styles.js
+++ b/ghost/portal/src/components/Frame.styles.js
@@ -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}) {
diff --git a/ghost/portal/src/components/pages/NewsletterSelectionPage.js b/ghost/portal/src/components/pages/NewsletterSelectionPage.js
index 7400e90270..c53eec9e7d 100644
--- a/ghost/portal/src/components/pages/NewsletterSelectionPage.js
+++ b/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>