Updated signup, signin, magic link pages designs

no refs.
- added envelope to magic link page
- removed label and divider on signup page
- refined close icon color

ghost/portal/src/App.js

@@ -143,7 +143,7 @@ export default class App extends React.Component {
                 showPopup: true,
                 site: Fixtures.site,
                 member: Fixtures.member.paid,
-                page: 'accountHome'
+                page: 'signup'
             };
         }
         return {};

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

@@ -10,6 +10,7 @@ import {InputFieldStyles} from './common/InputField';
 import {SignupPageStyles} from './pages/SignupPage';
 import {PlanSectionStyles} from './common/PlansSection';
 import {AvatarStyles} from './common/MemberGravatar';
+import {MagicLinkStyles} from './pages/MagicLinkPage';
 
 // Global styles
 export const GlobalStyles = `
@@ -259,11 +260,18 @@ export const GlobalStyles = `
     .gh-portal-closeicon {
         width: 16px;
         height: 16px;
-        color: #dcdcdc;
+        color: #c5c5c5;
         cursor: pointer;
         padding: 12px;
     }
 
+    .gh-portal-header {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        padding-bottom: 24px;
+    }
+
     .gh-portal-section {
         margin-bottom: 32px;
     }
@@ -295,7 +303,8 @@ export const GlobalStyles = `
         min-width: 90px;
     }
 
-    /* Lists */
+    /* Buttons
+    /* ----------------------------------------------------- */
     .gh-portal-list {
         background: #fff;
         box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.07), 0px 1px 1.5px 0px rgba(0, 0, 0, 0.05);
@@ -349,6 +358,12 @@ export const GlobalStyles = `
         box-shadow: none;
         opacity: 0.75;
     }
+
+    /* Icons
+    /* ----------------------------------------------------- */
+    .gh-portal-icon {
+        color: var(--brandcolor);
+    }
 `;
 
 // Append all styles as string which we want to pass to iframe
@@ -360,6 +375,7 @@ const FrameStyle =
     SwitchStyles + 
     ActionButtonStyles +
     AvatarStyles +
+    MagicLinkStyles +
     SignupPageStyles;
 
 export default FrameStyle;

ghost/portal/src/components/PopupModal.js

@@ -45,7 +45,7 @@ const StylesWrapper = ({member}) => {
                 position: 'relative',
                 padding: '0',
                 outline: '0',
-                width: '428px',
+                width: '440px',
                 borderRadius: '5px',
                 boxShadow: '0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12)',
                 opacity: '1',

ghost/portal/src/components/common/PlansSection.js

@@ -183,7 +183,7 @@ function PlanOptions({plans, selectedPlan, onPlanSelect}) {
             planDetails.feature = 'Full access';
             break;
         case 'Yearly':
-            planDetails.feature = (discount ? discount + '% discount' : 'Full access');
+            planDetails.feature = (discount > 0 ? discount + '% discount' : 'Full access');
             break;
     
         default:

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

@@ -1,16 +1,26 @@
 import ActionButton from '../common/ActionButton';
 import AppContext from '../../AppContext';
+import {ReactComponent as EnvelopeIcon} from '../../images/icons/envelope.svg';
+
 const React = require('react');
 
+export const MagicLinkStyles = `
+    .gh-portal-envelope {
+        width: 44px;
+        margin: 12px 0 2px;
+    }
+`;
+
 export default class MagicLinkPage extends React.Component {
     static contextType = AppContext;
 
     renderFormHeader() {
         return (
             <div className='flex flex-column items-center'>
-                <div className='gh-portal-account-header'>
-                    <h2 className='gh-portal-main-title'>Check your inbox!</h2>
-                </div>
+                <header className='gh-portal-header'>
+                    <EnvelopeIcon className='gh-portal-icon gh-portal-envelope' />
+                    <h2>Check your inbox!</h2>
+                </header>
                 <p className='gh-portal-section gh-portal-text-center'>Check your inbox and click on the login link to complete the signin.</p>
             </div>
         );

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

@@ -65,7 +65,7 @@ export default class SigninPage extends React.Component {
         const field = fields[fieldName];
         return (
             <InputField
-                label = {field.label}
+                // label = {field.label}
                 type={field.type}
                 name={field.name}
                 placeholder={field.placeholder}
@@ -115,7 +115,7 @@ export default class SigninPage extends React.Component {
         const siteTitle = this.context.site.title || 'Site Title';
 
         return (
-            <div className='flex flex-column items-center gh-portal-section gh-portal-signup-header'>
+            <div className='flex flex-column items-center gh-portal-section gh-portal-signup-header nodivider'>
                 {this.renderSiteLogo()}
                 <h2 className="gh-portal-main-title">Sign in to {siteTitle}</h2>
             </div>

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

@@ -24,6 +24,11 @@ export const SignupPageStyles = `
         border-bottom: 1px solid #eaeaea;
     }
 
+    .gh-portal-signup-header.nodivider {
+        border: none;
+        margin-bottom: 0;
+    }
+
     .gh-portal-signup-footer {
         font-size: 1.3rem;
         margin-top: 8px;

ghost/portal/src/images/icons/envelope.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><style>.a{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1px;}</style></defs><title>envelope</title><rect class="a" x="0.75" y="4.5" width="22.5" height="15" rx="1.5" ry="1.5"/><line class="a" x1="15.687" y1="9.975" x2="19.5" y2="13.5"/><line class="a" x1="8.313" y1="9.975" x2="4.5" y2="13.5"/><path class="a" d="M22.88,5.014l-9.513,6.56a2.406,2.406,0,0,1-2.734,0L1.12,5.014"/></svg>