From 2094a0950ad4899455f2e9f3f57bab87d5ebb9cf Mon Sep 17 00:00:00 2001
From: Peter Zimon <zimo@ghost.org>
Date: Tue, 21 Jul 2020 15:58:47 +0200
Subject: [PATCH] Basic styling for signin page

no refs.
---
 ghost/portal/src/App.js                       |  2 +-
 ghost/portal/src/components/Frame.styles.js   |  2 +-
 .../portal/src/components/pages/SigninPage.js | 48 +++++++------------
 .../portal/src/components/pages/SignupPage.js | 16 ++++---
 4 files changed, 28 insertions(+), 40 deletions(-)

diff --git a/ghost/portal/src/App.js b/ghost/portal/src/App.js
index 8e63a19fca..61f1ff24e2 100644
--- a/ghost/portal/src/App.js
+++ b/ghost/portal/src/App.js
@@ -143,7 +143,7 @@ export default class App extends React.Component {
                 showPopup: true,
                 site: Fixtures.site,
                 member: Fixtures.member.free,
-                page: 'signup'
+                page: 'magiclink'
             };
         }
         return {};
diff --git a/ghost/portal/src/components/Frame.styles.js b/ghost/portal/src/components/Frame.styles.js
index 1584139da5..2a668ffb31 100644
--- a/ghost/portal/src/components/Frame.styles.js
+++ b/ghost/portal/src/components/Frame.styles.js
@@ -139,7 +139,7 @@ export const GlobalStyles = `
     }
 
     .gh-portal-main-title {
-        color: #333;
+        color: #212121;
     }
 
     .gh-portal-text-disabled {
diff --git a/ghost/portal/src/components/pages/SigninPage.js b/ghost/portal/src/components/pages/SigninPage.js
index 9ef31f0f94..6d01e20403 100644
--- a/ghost/portal/src/components/pages/SigninPage.js
+++ b/ghost/portal/src/components/pages/SigninPage.js
@@ -78,25 +78,21 @@ export default class SigninPage extends React.Component {
     renderSignupMessage() {
         const brandColor = this.context.brandColor;
         return (
-            <div style={{display: 'flex', justifyContent: 'center', marginTop: '12px'}}>
-                <div style={{marginRight: '6px', color: '#929292'}}> Don't have an account ? </div>
-                <div
-                    style={{color: brandColor, fontWeight: 'bold', cursor: 'pointer'}}
-                    role="button"
-                    onClick={() => this.context.onAction('switchPage', {page: 'signup'})}
-                >
-                    Subscribe
-                </div>
+            <div className='flex justify-center gh-portal-signup-footer'>
+                <div>Don't have an account?</div>
+                <button className='gh-portal-btn gh-portal-btn-link' style={{color: brandColor}} onClick={() => this.context.onAction('switchPage', {page: 'signup'})}>Subscribe</button>
             </div>
         );
     }
 
     renderForm() {
         return (
-            <div style={{display: 'flex', flexDirection: 'column', marginBottom: '12px', padding: '0 18px'}}>
-                {this.renderInputField('email')}
-                {this.renderSubmitButton()}
-                {this.renderSignupMessage()}
+            <div>
+                <div className='gh-portal-section form'>{this.renderInputField('email')}</div>
+                <div> 
+                    {this.renderSubmitButton()}
+                    {this.renderSignupMessage()}
+                </div>
             </div>
         );
     }
@@ -104,22 +100,12 @@ export default class SigninPage extends React.Component {
     renderSiteLogo() {
         const siteLogo = this.context.site.logo;
 
-        const logoStyle = {
-            position: 'relative',
-            display: 'block',
-            width: '48px',
-            height: '48px',
-            marginBottom: '12px',
-            backgroundPosition: '50%',
-            backgroundSize: 'cover',
-            borderRadius: '100%',
-            boxShadow: '0 0 0 3px #fff'
-        };
+        const logoStyle = {};
 
         if (siteLogo) {
             logoStyle.backgroundImage = `url(${siteLogo})`;
             return (
-                <span style={logoStyle}> </span>
+                <span className='gh-portal-signup-logo' style={logoStyle}></span>
             );
         }
         return null;
@@ -129,20 +115,18 @@ export default class SigninPage extends React.Component {
         const siteTitle = this.context.site.title || 'Site Title';
 
         return (
-            <div style={{display: 'flex', flexDirection: 'column', alignItems: 'center', marginBottom: '18px'}}>
+            <div className='flex flex-column items-center gh-portal-section gh-portal-signup-header'>
                 {this.renderSiteLogo()}
-                <div style={{fontSize: '21px', fontWeight: '400'}}> Sign in to {siteTitle}</div>
+                <h2 className="gh-portal-main-title">Sign in to {siteTitle}</h2>
             </div>
         );
     }
 
     render() {
         return (
-            <div style={{display: 'flex', flexDirection: 'column', color: '#313131'}}>
-                <div style={{paddingLeft: '16px', paddingRight: '16px'}}>
-                    {this.renderFormHeader()}
-                    {this.renderForm()}
-                </div>
+            <div className='flex flex-column'>
+                {this.renderFormHeader()}
+                {this.renderForm()}
             </div>
         );
     }
diff --git a/ghost/portal/src/components/pages/SignupPage.js b/ghost/portal/src/components/pages/SignupPage.js
index 4acdb08294..f799ae25aa 100644
--- a/ghost/portal/src/components/pages/SignupPage.js
+++ b/ghost/portal/src/components/pages/SignupPage.js
@@ -229,12 +229,16 @@ class SignupPage extends React.Component {
 
     renderForm() {
         return (
-            <div className='flex flex-column'>
-                {this.renderNameField()}
-                {this.renderInputField('email')}
-                {this.renderPlans()}
-                {this.renderSubmitButton()}
-                {this.renderLoginMessage()}
+            <div>
+                <div className='gh-portal-section form'>
+                    {this.renderNameField()}
+                    {this.renderInputField('email')}
+                    {this.renderPlans()}
+                </div>
+                <div>
+                    {this.renderSubmitButton()}
+                    {this.renderLoginMessage()}
+                </div>
             </div>
         );
     }