From 30703842b518937de28ddc4276c9a9ec6558a602 Mon Sep 17 00:00:00 2001 From: Peter Zimon Date: Mon, 7 Mar 2022 16:55:12 +0100 Subject: [PATCH] Update multiple tiers signup (#230) * Made signin screen normal size for multiple tiers * Powered by updates * Removed innser scrolling of portal modal --- ghost/portal/src/components/Frame.styles.js | 85 +++++++++++++------ ghost/portal/src/components/PopupModal.js | 6 +- .../src/components/pages/AccountHomePage.js | 1 - .../portal/src/components/pages/SignupPage.js | 33 ++++--- ghost/portal/src/images/ghost-logo-small.svg | 3 + 5 files changed, 83 insertions(+), 45 deletions(-) create mode 100644 ghost/portal/src/images/ghost-logo-small.svg diff --git a/ghost/portal/src/components/Frame.styles.js b/ghost/portal/src/components/Frame.styles.js index 73d3e3a5fc..84b897cc74 100644 --- a/ghost/portal/src/components/Frame.styles.js +++ b/ghost/portal/src/components/Frame.styles.js @@ -251,7 +251,8 @@ const FrameStyles = ` text-rendering: optimizeLegibility; background: var(--white); width: 420px; - margin: 0 auto; + margin: 0 auto 40px; + transform: translateY(20px); border-radius: 5px; box-shadow: 0 3.8px 2.2px rgba(0, 0, 0, 0.028), 0 9.2px 5.3px rgba(0, 0, 0, 0.04), 0 17.3px 10px rgba(0, 0, 0, 0.05), 0 30.8px 17.9px rgba(0, 0, 0, 0.06), 0 57.7px 33.4px rgba(0, 0, 0, 0.072), 0 138px 80px rgba(0, 0, 0, 0.1); animation: popup 0.25s ease-in-out; @@ -260,14 +261,20 @@ const FrameStyles = ` @keyframes popup { 0% { - transform: scale(0.9) translateY(20px); + transform: scale(0.9) translateY(0px); opacity: 0; } 75% { opacity: 1.0; } 100%{ - transform: scale(1) translateY(0); + transform: scale(1) translateY(20px); + } + } + + @media (max-height: 670px) { + .gh-portal-popup-container { + transform-origin: top; } } @@ -279,13 +286,25 @@ const FrameStyles = ` .gh-portal-powered a { border: none; - display: block; + display: flex; + align-items: center; line-height: 0; border-radius: 4px; + background: #ffffff; + padding: 6px 8px 6px 7px; + color: #303336; + font-size: 1.25rem; + letter-spacing: -0.2px; + font-weight: 500; + text-decoration: none; + transition: color 0.5s ease-in-out; + width: 146px; + height: 28px; + line-height: 28px; } - .gh-portal-powered img { - box-shadow: 0 1px 3px rgba(0,0,0,.08); + .gh-portal-powered a:hover { + color: #15171A; } @keyframes powered-fade-in { @@ -334,13 +353,11 @@ const FrameStyles = ` position: relative; overflow-y: scroll; padding: 24px 32px 32px; - max-height: calc(100vh - 20vmin); } .gh-portal-content.with-footer { overflow-y: scroll; padding-bottom: 0; - max-height: calc(100vh - 20vmin - 132px); } /* Hide scrollbar for Chrome, Safari and Opera */ @@ -635,6 +652,7 @@ const MobileStyles = ` overflow: unset; animation: popup-mobile 0.25s ease-in-out; box-shadow: none !important; + transform: translateY(0); } .gh-portal-popup-wrapper.account-home, @@ -665,8 +683,8 @@ const MobileStyles = ` padding-top: 32px; } - .gh-portal-popup-container.preview .gh-portal-powered { - display: none; + .gh-portal-popup-wrapper.preview .gh-portal-powered a { + display: none !important; } .gh-portal-popup-wrapper.account-home .gh-portal-powered { @@ -794,7 +812,7 @@ const MobileStyles = ` @media (min-width: 480px) and (max-height: 880px) { .gh-portal-popup-wrapper { - padding: 4vmin 0; + padding: 4vmin 0 72px; } } @@ -814,15 +832,26 @@ const MultipleProductsGlobalStyles = ` margin: 0 auto; } +/* Multiple product signup/signin-only modifications! */ .gh-portal-popup-wrapper.multiple-products { - margin: 32px; - height: calc(100vh - 64px) !important; - overflow-y: scroll; - overflow-x: clip; background: #fff; box-shadow: 0 3.8px 2.2px rgba(0, 0, 0, 0.028), 0 9.2px 5.3px rgba(0, 0, 0, 0.04), 0 17.3px 10px rgba(0, 0, 0, 0.05), 0 30.8px 17.9px rgba(0, 0, 0, 0.06), 0 57.7px 33.4px rgba(0, 0, 0, 0.072), 0 138px 80px rgba(0, 0, 0, 0.1); padding: 0; border-radius: 5px; + height: calc(100vh - 64px); + max-width: calc(100vw - 64px); +} + +.gh-portal-popup-wrapper.multiple-products.signup { + overflow-y: scroll; + overflow-x: clip; + margin: 32px auto; +} + +.gh-portal-popup-wrapper.multiple-products.signin { + margin: 10vmin auto; + max-width: 480px; + height: unset; } .gh-portal-popup-wrapper.multiple-products.preview { @@ -830,19 +859,23 @@ const MultipleProductsGlobalStyles = ` } .gh-portal-popup-wrapper.multiple-products .gh-portal-popup-container { - position: unset; align-items: center; width: 100% !important; box-shadow: none !important; - border-radius: 0px; animation: fadein 0.35s ease-in-out; - padding: 3vmin 0; + padding: 1vmin 0; + transform: translateY(0px); + margin-bottom: 0; +} + +.gh-portal-popup-wrapper.multiple-products.signup .gh-portal-popup-container { + position: unset; } .gh-portal-popup-wrapper.multiple-products .gh-portal-powered { position: relative; display: flex; - justify-content: center; + justify-content: flex-start; bottom: unset; left: unset; width: 100%; @@ -857,16 +890,20 @@ const MultipleProductsGlobalStyles = ` } @media (max-width: 960px) { - .gh-portal-popup-wrapper.multiple-products { - margin: 20px; - height: calc(100vh - 40px) !important; + .gh-portal-popup-wrapper.multiple-products.signup:not(.preview) { + margin: 20px !important; + height: 100%; + max-height: calc(100vh - 40px) !important; + max-width: calc(100vw - 40px) !important; } } @media (max-width: 480px) { .gh-portal-popup-wrapper.multiple-products { - margin: 0; - height: 100vh !important; + margin: 0 !important; + max-width: unset !important; + max-height: 100% !important; + height: 100% !important; border-radius: 0px; box-shadow: none; } diff --git a/ghost/portal/src/components/PopupModal.js b/ghost/portal/src/components/PopupModal.js index e88af67eaa..cc3933cb18 100644 --- a/ghost/portal/src/components/PopupModal.js +++ b/ghost/portal/src/components/PopupModal.js @@ -5,6 +5,7 @@ import {getFrameStyles} from './Frame.styles'; import Pages, {getActivePage} from '../pages'; import PopupNotification from './common/PopupNotification'; import {hasMultipleProducts, isCookiesDisabled, getSitePrices, isInviteOnlySite} from '../utils/helpers'; +import {ReactComponent as GhostLogo} from '../images/ghost-logo-small.svg'; const React = require('react'); @@ -200,11 +201,12 @@ class PopupContent extends React.Component { {this.renderActivePage()} -
+
{ window.open('https://ghost.org', '_blank'); }}> - Publish with Ghost + + Powered by Ghost
diff --git a/ghost/portal/src/components/pages/AccountHomePage.js b/ghost/portal/src/components/pages/AccountHomePage.js index 7ca61ac46a..a1bcf9b1a0 100644 --- a/ghost/portal/src/components/pages/AccountHomePage.js +++ b/ghost/portal/src/components/pages/AccountHomePage.js @@ -15,7 +15,6 @@ export const AccountHomePageStyles = ` .gh-portal-account-main { background: var(--grey13); padding: 32px 32px 0; - max-height: calc(100vh - 12vw - 104px); } .gh-portal-account-header { diff --git a/ghost/portal/src/components/pages/SignupPage.js b/ghost/portal/src/components/pages/SignupPage.js index 2693cb4c89..69df35fda7 100644 --- a/ghost/portal/src/components/pages/SignupPage.js +++ b/ghost/portal/src/components/pages/SignupPage.js @@ -7,6 +7,7 @@ import InputForm from '../common/InputForm'; import {ValidateInputForm} from '../../utils/form'; import {getSiteProducts, getSitePrices, hasMultipleProducts, hasOnlyFreePlan, isInviteOnlySite, getAvailableProducts, hasMultipleProductsFeature, freeHasBenefitsOrDescription} from '../../utils/helpers'; import {ReactComponent as InvitationIcon} from '../../images/icons/invitation.svg'; +import {ReactComponent as GhostLogo} from '../../images/ghost-logo-small.svg'; const React = require('react'); @@ -138,9 +139,9 @@ export const SignupPageStyles = ` .gh-portal-popup-wrapper.multiple-products .gh-portal-powered { display: flex; - margin-top: 24px; + margin-top: 48px; margin-bottom: 0; - padding-bottom: 0; + padding-bottom: 0 !important; } .gh-portal-invite-only-notification { @@ -166,33 +167,32 @@ export const SignupPageStyles = ` background: #fff; } - .gh-portal-popup-wrapper.multiple-products .gh-portal-signin-header { - padding-top: 18vmin; - } - - .gh-portal-popup-wrapper.signin.multiple-products .gh-portal-popup-container { - padding-bottom: 3vmin; - } - .gh-portal-popup-wrapper.multiple-products footer.gh-portal-signup-footer, .gh-portal-popup-wrapper.multiple-products footer.gh-portal-signin-footer { width: 100%; - max-width: 420px; height: unset; - padding: 0 !important; + padding: 0 32px !important; margin: 24px 32px; } + .gh-portal-popup-wrapper.multiple-products footer .gh-portal-btn { + max-width: 420px; + } .gh-portal-popup-wrapper.multiple-products footer.gh-portal-signin-footer { padding-top: 24px; } - .gh-portal-powered.multiple-products { + .gh-portal-powered.multiple-products.signup { display: none; } @media (max-width: 480px) { + .gh-portal-popup-wrapper.multiple-products .gh-portal-powered { + margin-top: 0; + margin-bottom: -32px; + } + .gh-portal-popup-wrapper.multiple-products footer.gh-portal-signup-footer, .gh-portal-popup-wrapper.multiple-products footer.gh-portal-signin-footer { max-width: unset; @@ -222,10 +222,6 @@ export const SignupPageStyles = ` left: 50%; transform: translateX(-50%); } - - .gh-portal-popup-wrapper.signup { - padding-bottom: 20vmin; - } } @media (min-width: 480px) { @@ -620,7 +616,8 @@ class SignupPage extends React.Component { { window.open('https://ghost.org', '_blank'); }}> - Publish with Ghost + + Powered by Ghost
diff --git a/ghost/portal/src/images/ghost-logo-small.svg b/ghost/portal/src/images/ghost-logo-small.svg new file mode 100644 index 0000000000..2e92592a49 --- /dev/null +++ b/ghost/portal/src/images/ghost-logo-small.svg @@ -0,0 +1,3 @@ + + +