Refined primary button

no refs.
- increased the default height of primary button
- added loading spinner to sign in and sign up button loading state

ghost/portal/src/App.js

@@ -142,8 +142,8 @@ export default class App extends React.Component {
             return {
                 showPopup: true,
                 site: Fixtures.site,
-                member: Fixtures.member.paid,
-                page: 'signup'
+                member: Fixtures.member.free,
+                page: 'accountProfile'
             };
         }
         return {};

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

@@ -1,9 +1,12 @@
 import React from 'react';
 import getContrastColor from '../../utils/contrast-color';
+import {ReactComponent as LoaderIcon} from '../../images/icons/loader.svg';
 
 export const ActionButtonStyles = `
     .gh-portal-btn-main {
         box-shadow: none;
+        position: relative;
+        height: 46px;
     }
 
     .gh-portal-btn-main:hover {
@@ -20,6 +23,19 @@ export const ActionButtonStyles = `
         background: rgba(255, 255, 255, 0.08);
         border-radius: 5px;
     }
+
+    .gh-portal-loadingicon {
+        position: absolute;
+        left: 50%;
+        display: inline-block;
+        margin-left: -19px;
+        height: 31px;
+    }
+
+    .gh-portal-loadingicon path,
+    .gh-portal-loadingicon rect {
+        fill: #fff;
+    }
 `;
 
 const Styles = ({brandColor, retry, disabled, style = {}}) => {
@@ -48,11 +64,11 @@ const Styles = ({brandColor, retry, disabled, style = {}}) => {
     };
 };
 
-function ActionButton({label, onClick, disabled, retry, brandColor, style}) {
+function ActionButton({label, onClick, disabled, retry, brandColor, isRunning, style}) {
     let Style = Styles({disabled, retry, brandColor, style});
     return (
         <button className="gh-portal-btn gh-portal-btn-main gh-portal-btn-primary" style={Style.button} onClick={e => onClick(e)} disabled={disabled}>
-            {label}
+            {isRunning ? <LoaderIcon className='gh-portal-loadingicon' /> : label}
         </button>
     );
 }

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

@@ -135,7 +135,7 @@ class FreeAccountHomePage extends React.Component {
 
         if (isStripeConfigured) {
             return (
-                <ActionButton label="Subscribe now" onClick={() => this.openSubscribe()} brandColor={this.context.brandColor} style={{width: '100%', height: '44px'}} />
+                <ActionButton label="Subscribe now" onClick={() => this.openSubscribe()} brandColor={this.context.brandColor} style={{width: '100%'}} />
             );
         }
 

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

@@ -180,6 +180,7 @@ export default class AccountPlanPage extends React.Component {
                 disabled={disabled}
                 brandColor={this.context.brandColor}
                 label={label}
+                style={{height: '40px'}}
             />
         );
     }

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

@@ -71,6 +71,7 @@ export default class AccountProfilePage extends React.Component {
                 disabled={disabled}
                 brandColor={this.context.brandColor}
                 label={label}
+                style={{height: '40px'}}
             />
         );
     }

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

@@ -72,15 +72,16 @@ export default class SigninPage extends React.Component {
 
     renderSubmitButton() {
         const isRunning = (this.context.action === 'signin:running');
-        const label = isRunning ? 'Sending' : 'Send Login Link';
+        const label = isRunning ? 'Sending login link...' : 'Send login link';
         const disabled = isRunning ? true : false;
         return (
             <ActionButton
-                style={{width: '100%', height: '46px'}}
+                style={{width: '100%'}}
                 onClick={e => this.handleSignin(e)}
                 disabled={disabled}
                 brandColor={this.context.brandColor}
                 label={label}
+                isRunning={isRunning}
             />
         );
     }

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

@@ -248,7 +248,12 @@ class SignupPage extends React.Component {
     renderSubmitButton() {
         const {action, brandColor} = this.context;
 
-        let label = (action === 'signup:running') ? 'Sending...' : 'Continue';
+        let label = 'Continue';
+        let isRunning = false;
+        if (action === 'signup:running') {
+            label = 'Sending...';
+            isRunning = true;
+        }
         let retry = false;
         if (action === 'signup:failed') {
             label = 'Retry';
@@ -258,12 +263,13 @@ class SignupPage extends React.Component {
         const disabled = (action === 'signup:running') ? true : false;
         return (
             <ActionButton
-                style={{width: '100%', height: '46px'}}
+                style={{width: '100%'}}
                 retry={retry}
                 onClick={e => this.handleSignup(e)}
                 disabled={disabled}
                 brandColor={brandColor}
                 label={label}
+                isRunning={isRunning}
             />
         );
     }

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

@@ -0,0 +1,11 @@
+<svg version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
+    y="0px" width="40px" height="40px" viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve">
+    <path opacity="0.2" fill="#000" d="M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,14.946,14.946
+s14.946-6.691,14.946-14.946C35.146,11.861,28.455,5.169,20.201,5.169z M20.201,31.749c-6.425,0-11.634-5.208-11.634-11.634
+c0-6.425,5.209-11.634,11.634-11.634c6.425,0,11.633,5.209,11.633,11.634C31.834,26.541,26.626,31.749,20.201,31.749z" />
+    <path fill="#000" d="M26.013,10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0
+C22.32,8.481,24.301,9.057,26.013,10.047z">
+        <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 20 20" to="360 20 20"
+            dur="0.5s" repeatCount="indefinite" />
+    </path>
+</svg>