From 6d6969f4b09484f84087eb52629d3bd69b4ea0dc Mon Sep 17 00:00:00 2001
From: Peter Zimon <zimo@ghost.org>
Date: Mon, 4 Mar 2024 16:27:30 +0100
Subject: [PATCH] Portal signup page spacing fixes (#19791)

refs.
https://linear.app/tryghost/issue/DES-161/portal-signup-window-spacing-problem

The products section is returned even if there's only a free product in
the publication. This results in an extra, unnecessary space between the
signup form inputs and the signup button.
---
 .../src/components/common/ProductsSection.js    |  8 +++++++-
 apps/portal/src/components/pages/SignupPage.js  | 17 +++++++++++++----
 2 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/apps/portal/src/components/common/ProductsSection.js b/apps/portal/src/components/common/ProductsSection.js
index 4c7e43ea00..4c352631ec 100644
--- a/apps/portal/src/components/common/ProductsSection.js
+++ b/apps/portal/src/components/common/ProductsSection.js
@@ -947,6 +947,7 @@ function ProductsSection({onPlanSelect, products, type = null, handleChooseSignu
     const activeInterval = getActiveInterval({portalPlans, portalDefaultPlan, selectedInterval});
 
     const isComplimentary = isComplimentaryMember({member});
+    const hasOnlyFree = hasOnlyFreeProduct({site});
 
     useEffect(() => {
         setSelectedProduct(defaultProductId);
@@ -978,6 +979,11 @@ function ProductsSection({onPlanSelect, products, type = null, handleChooseSignu
         className += ' gh-portal-upgrade-product';
     }
 
+    // If site doesn't have paid products then don't return an empty container
+    if (hasOnlyFree) {
+        return null;
+    }
+
     let finalProduct = products.find(p => p.id === selectedProduct)?.id || products.find(p => p.type === 'paid')?.id;
     return (
         <ProductsContext.Provider value={{
@@ -987,7 +993,7 @@ function ProductsSection({onPlanSelect, products, type = null, handleChooseSignu
         }}>
             <section className={className}>
 
-                {(!(hasOnlyFreeProduct({site})) ?
+                {(!(hasOnlyFree) ?
                     <ProductPriceSwitch
                         products={products}
                         selectedInterval={activeInterval}
diff --git a/apps/portal/src/components/pages/SignupPage.js b/apps/portal/src/components/pages/SignupPage.js
index cb806b44db..4c08b1eafb 100644
--- a/apps/portal/src/components/pages/SignupPage.js
+++ b/apps/portal/src/components/pages/SignupPage.js
@@ -153,7 +153,7 @@ footer.gh-portal-signin-footer {
 
 .gh-portal-content.signup.single-field .gh-portal-input,
 .gh-portal-content.signin .gh-portal-input {
-    margin-bottom: 8px;
+    margin-bottom: 12px;
 }
 
 .gh-portal-content.signup.single-field + .gh-portal-signup-footer,
@@ -204,11 +204,19 @@ footer.gh-portal-signup-footer.invite-only .gh-portal-signup-message {
 .gh-portal-signup-terms-wrapper {
     width: 100%;
     max-width: 420px;
-    margin: -16px auto 36px;
+    margin: 0 auto;
 }
 
-.gh-portal-signup-terms-wrapper.free-only {
-    margin: 0 auto;
+.signup.single-field .gh-portal-signup-terms-wrapper {
+    margin-top: -16px;
+}
+
+.gh-portal-signup-terms {
+    margin: -16px 0 36px;
+}
+
+.gh-portal-signup-terms-wrapper.free-only .gh-portal-signup-terms {
+    margin: -16px 0 0;
 }
 
 .gh-portal-products + .gh-portal-signup-terms-wrapper.free-only {
@@ -499,6 +507,7 @@ class SignupPage extends React.Component {
 
     renderSignupTerms() {
         const {site} = this.context;
+
         if (site.portal_signup_terms_html === null || site.portal_signup_terms_html === '') {
             return null;
         }