Account page refinements

no refs.
- removed back button from detail screens
- refined layout
- made switch smaller

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: 'signup'
+                page: 'accountHome'
             };
         }
         return {};

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

@@ -158,7 +158,7 @@ export const GlobalStyles = `
         margin-bottom: 2px;
         font-weight: 500;
         color: #333;
-        letter-spacing: 0.5px;
+        letter-spacing: 0.35px;
     }
 
     /* Buttons
@@ -169,16 +169,16 @@ export const GlobalStyles = `
         align-items: center;
         justify-content: center;
         padding: 0 1.8rem;
-        height: 44px;
+        height: 42px;
         border: none;
-        font-size: 1.5rem;
+        font-size: 1.4rem;
         line-height: 1em;
         font-weight: 500;
         letter-spacing: 0.2px;
         text-align: center;
         text-decoration: none;
         white-space: nowrap;
-        border-radius: 5px;
+        border-radius: 4px;
         cursor: pointer;
         transition: .4s ease;
         box-shadow: none;
@@ -265,7 +265,7 @@ export const GlobalStyles = `
         position: relative;
         display: flex;
         align-items: center;
-        justify-content: center;
+        justify-content: flex-start;
         margin: 0 0 20px;
     }
 
@@ -279,6 +279,10 @@ export const GlobalStyles = `
         padding: 0;
         margin: 0;
     }
+
+    .gh-portal-detail-footer .gh-portal-btn {
+        min-width: 90px;
+    }
 `;
 
 // Append all styles as string which we want to pass to iframe

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

@@ -6,8 +6,8 @@ export const SwitchStyles = `
         cursor: pointer;
         position: relative;
         display: inline-block;
-        width: 50px !important;
-        height: 28px !important;
+        width: 36px !important;
+        height: 22px !important;
     }
 
     .gh-portal-for-switch label p,
@@ -33,8 +33,8 @@ export const SwitchStyles = `
         background: #f4f4f4;
         border: 1px solid #e4e4e4;
         transition: .3s;
-        width: 50px !important;
-        height: 28px !important;
+        width: 36px !important;
+        height: 22px !important;
         border-radius: 999px;
         transition: background 0.15s ease-in-out, border-color 0.15s ease-in-out;
     }
@@ -47,8 +47,8 @@ export const SwitchStyles = `
     .gh-portal-for-switch .input-toggle-component:before {
         position: absolute;
         content: "";
-        height: 24px !important;
-        width: 24px !important;
+        height: 18px !important;
+        width: 18px !important;
         left: 2px !important;
         top: 2px !important;
         background-color: white;

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

@@ -59,9 +59,9 @@ export const AccountHomePageStyles = `
     }
 
     .gh-portal-btn-accountdetail {
-        height: 36px;
+        height: 38px;
         font-size: 1.3rem;
-        width: 88px;
+        width: 78px;
         padding: 0 12px;
     }
 
@@ -314,7 +314,7 @@ class PaidAccountHomePage extends React.Component {
         return (
             <div>
                 <UserHeader member={member} brandColor={brandColor} />
-                {this.renderAccountWelcome()}
+                {/* {this.renderAccountWelcome()} */}
                 <Divider />
                 {this.renderAccountDetails()}
                 <Divider />

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

@@ -1,7 +1,6 @@
 import AppContext from '../../AppContext';
 import ActionButton from '../common/ActionButton';
 import PlansSection from '../common/PlansSection';
-import {ReactComponent as ArrowLeftIcon} from '../../images/icons/arrow-left.svg';
 
 const React = require('react');
 
@@ -38,7 +37,6 @@ export default class AccountPlanPage extends React.Component {
     renderHeader() {
         return (
             <div className='gh-portal-detail-header'>
-                <button className='gh-portal-btn gh-portal-btn-icon gh-portal-btn-back' style={{color: this.context.brandColor}} onClick={e => this.onBack(e)}><ArrowLeftIcon /> Back</button>
                 <h3 className='gh-portal-maiin-title'>Choose plan</h3>
             </div>
         );
@@ -93,13 +91,18 @@ export default class AccountPlanPage extends React.Component {
         ];
         return (
             <div>
-                <PlansSection
-                    showLabel={false}
-                    plans={plansData}
-                    selectedPlan={this.state.plan}
-                    onPlanSelect={(e, name) => this.onPlanSelect(e, name)}
-                />
-                {this.renderActionButton()}
+                <div className='gh-portal-section'>
+                    <PlansSection
+                        showLabel={false}
+                        plans={plansData}
+                        selectedPlan={this.state.plan}
+                        onPlanSelect={(e, name) => this.onPlanSelect(e, name)}
+                    />
+                </div>
+                <div className='flex items-center justify-between flex-grow-1'>
+                    <button className='gh-portal-btn' onClick={e => this.onBack(e)}>Cancel</button>
+                    {this.renderActionButton()}
+                </div>
             </div>
         );
     }
@@ -110,7 +113,7 @@ export default class AccountPlanPage extends React.Component {
         const disabled = (isRunning || !this.state.plan) ? true : false;
         return (
             <ActionButton
-                style={{button: {marginTop: '12px'}}}
+                style={{button: {width: 'unset'}}}
                 onClick={e => this.onPlanCheckout(e)}
                 disabled={disabled}
                 brandColor={this.context.brandColor}

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

@@ -3,7 +3,6 @@ import MemberAvatar from '../common/MemberGravatar';
 import ActionButton from '../common/ActionButton';
 import InputField from '../common/InputField';
 import Switch from '../common/Switch';
-import {ReactComponent as ArrowLeftIcon} from '../../images/icons/arrow-left.svg';
 
 const React = require('react');
 
@@ -58,7 +57,7 @@ export default class AccountProfilePage extends React.Component {
         const disabled = isRunning ? true : false;
         return (
             <ActionButton
-                style={{button: {width: '120px'}}}
+                style={{button: {width: 'unset'}}}
                 onClick={e => this.onProfileSave(e)}
                 disabled={disabled}
                 brandColor={this.context.brandColor}
@@ -75,10 +74,9 @@ export default class AccountProfilePage extends React.Component {
 
     renderAccountFooter() {
         return (
-            <div>
-                <div style={{display: 'flex', flexGrow: 1, justifyContent: 'flex-end'}}>
-                    {this.renderSaveButton()}
-                </div>
+            <div className='flex flex-grow-1 justify-between gh-portal-detail-footer'>
+                <button className='gh-portal-btn' onClick={e => this.onBack(e)}>Cancel</button>
+                {this.renderSaveButton()}
             </div>
         );
     }
@@ -86,8 +84,7 @@ export default class AccountProfilePage extends React.Component {
     renderHeader() {
         return (
             <div className='gh-portal-detail-header'>
-                <button className='gh-portal-btn gh-portal-btn-icon gh-portal-btn-back' style={{color: this.context.brandColor}} onClick={e => this.onBack(e)}><ArrowLeftIcon /> Back</button>
-                <h3 className='gh-portal-maiin-title'>Account settings</h3>
+                <h3 className='gh-portal-main-title'>Account settings</h3>
             </div>
         );
     }
@@ -152,7 +149,7 @@ export default class AccountProfilePage extends React.Component {
 
     renderProfileData() {
         return (
-            <div>
+            <div className='gh-portal-section'>
                 {this.renderInputField('name')}
                 {this.renderInputField('email')}
             </div>