Updated paid account styles

no refs.
- added basic styling to paid account settings styles

ghost/portal/src/App.js

@@ -173,7 +173,7 @@ export default class App extends React.Component {
             }
             return null;
         } else if (process.env.NODE_ENV === 'development') {
-            return member || Fixtures.member.free;
+            return member || Fixtures.member.paid;
         }
         return member;
     }

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

@@ -79,11 +79,28 @@ export const GlobalStyles = `
     .fixed  { position: fixed; }
     .sticky  { position: sticky; }
 
+    .ma0 { margin: 0; }
+    .mt0 { margin-top: 0; }
+    .mr0 { margin-right: 0; }
+    .mb0 { margin-bottom: 0; }
+    .ml0 { margin-left: 0; }
+    .mh0 { margin-left: 0; margin-right: 0; }
+    .mv0 { margin-top: 0; margin-bottom: 0; }
+
+    .pa0 { padding: 0; }
+    .pt0 { padding-top: 0; }
+    .pr0 { padding-right: 0; }
+    .pb0 { padding-bottom: 0; }
+    .pl0 { padding-left: 0; }
+    .ph0 { padding-left: 0; padding-right: 0; }
+    .pv0 { padding-top: 0; padding-bottom: 0; }
+
     /* Typography
     /* ----------------------------------------------------- */
     h1, h2, h3, h4, h5, h6, p {
         padding: 0;
         margin: 0;
+        line-height: 1.15em;
     }
 
     h1 {
@@ -127,6 +144,39 @@ export const GlobalStyles = `
         text-align: center;
     }
 
+    .gh-portal-setting-heading {
+        font-size: 13px;
+    }
+
+    /* Buttons
+    /* ----------------------------------------------------- */
+    .gh-portal-btn {
+        position: relative;
+        display: inline-block;
+        padding: 0 1.8rem;
+        height: 44px;
+        border: none;
+        font-size: 1.5rem;
+        line-height: 1em;
+        font-weight: 500;
+        letter-spacing: 0.2px;
+        text-align: center;
+        text-decoration: none;
+        white-space: nowrap;
+        border-radius: 5px;
+        cursor: pointer;
+        transition: .4s ease;
+        box-shadow: none;
+        user-select: none;
+        background: #fff;
+        box-shadow: 0 0 0 1px rgba(0,0,0,0.08), 0 2px 6px -3px rgba(0,0,0,0.19);
+        color: #212121;
+    }
+
+    .gh-portal-btn:hover {
+        box-shadow: 0 0 0 1px rgba(0,0,0,0.18), 0 2px 6px -3px rgba(0,0,0,0.19);
+    }
+
     /* Global layout styles
     /* ----------------------------------------------------- */
     .gh-portal-popup-container {
@@ -170,8 +220,8 @@ export const GlobalStyles = `
 
 // Append all styles as string which we want to pass to iframe
 const FrameStyle = 
-    AccountHomePageStyles +
     GlobalStyles +
+    AccountHomePageStyles +
     SwitchStyles + 
     ActionButtonStyles;
 

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

@@ -2,28 +2,11 @@ import React from 'react';
 import getContrastColor from '../../utils/contrast-color';
 
 export const ActionButtonStyles = `
-.gh-portal-btn {
+    .gh-portal-btn-main {
-    position: relative;
-    display: inline-block;
-    padding: 0 1.8rem;
-    height: 44px;
-    border: 0;
-    font-size: 1.5rem;
-    line-height: 42px;
-    font-weight: 500;
-    letter-spacing: 0.2px;
-    text-align: center;
-    text-decoration: none;
-    white-space: nowrap;
-    border-radius: 5px;
-    cursor: pointer;
-    transition: .4s ease;
-    box-shadow: none;
-    user-select: none;
         width: 100%;
-}
+        box-shadow: none;
-
+    }
-.gh-portal-btn:hover::before {
+    .gh-portal-btn-primary:hover::before {
         position: absolute;
         content: "";
         top: 0;
@@ -32,7 +15,7 @@ export const ActionButtonStyles = `
         bottom: 0;
         background: rgba(255, 255, 255, 0.08);
         border-radius: 5px;
-}
+    }
 `;
 
 const Styles = ({brandColor, retry, disabled, style = {}}) => {
@@ -57,7 +40,7 @@ const Styles = ({brandColor, retry, disabled, style = {}}) => {
 function ActionButton({label, onClick, disabled, retry, brandColor, style}) {
     let Style = Styles({disabled, retry, brandColor, style});
     return (
-        <button onClick={e => onClick(e)} style={Style.button} className="gh-portal-btn gh-portal-btn-primary" disabled={disabled}>
+        <button onClick={e => onClick(e)} style={Style.button} className="gh-portal-btn gh-portal-btn-main gh-portal-btn-primary" disabled={disabled}>
             {label}
         </button>
     );

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

@@ -19,6 +19,10 @@ export const AccountHomePageStyles = `
         margin-top: -16px;
     }
 
+    .gh-portal-account-footer.paid {
+        margin-top: 12px;
+    }
+
     .gh-portal-account-footermenu {
         display: flex;
         list-style: none;
@@ -34,6 +38,44 @@ export const AccountHomePageStyles = `
         margin-right: 0;
     }
 
+    .gh-portal-accountdetail-section {
+        display: flex;
+        align-items: center;
+        margin-bottom: 32px;
+    }
+
+    .gh-portal-accountdetail-section:first-of-type {
+        margin-top: 24px;
+        margin-bottom: 26px;
+    }
+
+    .gh-portal-account-divider {
+        margin: 12px -32px;
+        border: none;
+        border-bottom: 1px solid #EDEDED;
+    }
+
+    .gh-portal-account-divider:last-of-type {
+        margin-bottom: 40px;
+    }
+
+    .gh-portal-btn-accountdetail {
+        height: 36px;
+        font-size: 1.3rem;
+        width: 88px;
+        padding: 0 12px;
+    }
+
+    .gh-portal-accountdetail-data {
+        color: #656565;
+        line-height: 1em;
+        margin-top: 4px;
+    }
+
+    .gh-portal-accountdetail-data.small {
+        font-size: 1.3rem;
+    }
+
     /* Avatar styles */
     .gh-portal-avatar-container {
         position: relative;
@@ -51,7 +93,7 @@ export const AccountHomePageStyles = `
 
 const Divider = () => {
     return (
-        <div style={{borderBottom: '1px solid grey'}}>  </div>
+        <hr className='gh-portal-account-divider' />
     );
 };
 
@@ -167,7 +209,7 @@ class PaidAccountHomePage extends React.Component {
 
         return (
             <div className='gh-portal-section'>
-                <p className='gh-portal-text-center'>
+                <p className='gh-portal-text-center mb0'>
                     Hey <strong>{firstname || name || email}! </strong>
                     You have an active <strong>{siteTitle}</strong> account with access to all areas. Get in touch if you have any problems or need some help getting things updated, and thanks for subscribing.
                 </p>
@@ -212,10 +254,6 @@ class PaidAccountHomePage extends React.Component {
     }
 
     renderAccountDetails() {
-        const buttonStyle = {
-            padding: '6px 9px', border: '1px solid black', width: '60px', display: 'flex', justifyContent: 'center',
-            borderRadius: '5px', cursor: 'pointer'
-        };
         const {name, email, subscriptions, subscribed} = this.context.member;
 
         const {
@@ -224,46 +262,43 @@ class PaidAccountHomePage extends React.Component {
         } = subscriptions[0];
 
         return (
-            <div style={{padding: '0 24px', marginTop: '24px', marginBottom: '24px'}}>
+            <div>
-                <div style={{display: 'flex', alignItems: 'center'}}>
+                <section className='gh-portal-accountdetail-section'>
-                    <div style={{display: 'flex', flexDirection: 'column', flexGrow: 1}}>
+                    <div className='flex flex-column flex-grow-1'>
-                        <div style={{fontWeight: 'bold', fontSize: '13px'}}> Profile </div>
+                        <h3 className='gh-portal-setting-heading'>Profile</h3>
-                        <div style={{lineHeight: '18px'}}>
+                        <div>
-                            <div style={{color: '#666666'}}> {name} </div>
+                            <div className='gh-portal-accountdetail-data'>{name}</div>
-                            <div style={{color: '#666666', fontSize: '11px'}}> {email} </div>
+                            <div className='gh-portal-accountdetail-data small'>{email}</div>
                         </div>
                     </div>
-                    <div style={buttonStyle} onClick={e => this.openEditProfile(e)}>
+                    <button className='gh-portal-btn gh-portal-btn-accountdetail' onClick={e => this.openEditProfile(e)}>Edit</button>
-                        Edit
+                </section>
+
+                <section className='gh-portal-accountdetail-section'>
+                    <div className='flex flex-column flex-grow-1'>
+                        <h3 className='gh-portal-setting-heading'>Plan</h3>
+                        <div>
+                            <div className='gh-portal-accountdetail-data'>{this.getPlanLabel(plan)}</div>
                         </div>
                     </div>
-                <div style={{display: 'flex', alignItems: 'center', marginTop: '24px'}}>
+                    <button className='gh-portal-btn gh-portal-btn-accountdetail' onClick={e => this.openUpdatePlan(e)}>Change</button>
-                    <div style={{display: 'flex', flexDirection: 'column', flexGrow: 1}}>
+                </section>
-                        <div style={{fontWeight: 'bold', fontSize: '13px'}}> Plan </div>
+                
-                        <div style={{lineHeight: '18px'}}>
+                <section className='gh-portal-accountdetail-section'>
-                            <div style={{color: '#666666'}}> {this.getPlanLabel(plan)} </div>
+                    <div className='flex flex-column flex-grow-1'>
+                        <h3 className='gh-portal-setting-heading'>Billing Info</h3>
+                        <div>
+                            <div className='gh-portal-accountdetail-data'>{this.getCardLabel({defaultCardLast4})}</div>
                         </div>
                     </div>
-                    <div style={buttonStyle} onClick={e => this.openUpdatePlan(e)}>
+                    <button className='gh-portal-btn gh-portal-btn-accountdetail' onClick={e => this.onEditBilling(e)}>Update</button>
-                        Change
+                </section>
-                    </div>
+                
-                </div>
+                <section className='gh-portal-accountdetail-section'>
-                <div style={{display: 'flex', alignItems: 'center', marginTop: '24px'}}>
+                    <div className='flex flex-column flex-grow-1'>
-                    <div style={{display: 'flex', flexDirection: 'column', flexGrow: 1, marginTop: '5px'}}>
+                        <h3 className='gh-portal-setting-heading'>Newsletter</h3>
-                        <div style={{fontWeight: 'bold', fontSize: '13px'}}> Billing Info </div>
+                        <div>
-                        <div style={{lineHeight: '18px'}}>
+                            <div className='gh-portal-accountdetail-data'>You are subscribed to email newsletters</div>
-                            <div style={{color: '#666666'}}> {this.getCardLabel({defaultCardLast4})} </div>
-                        </div>
-                    </div>
-                    <div style={buttonStyle} onClick={e => this.onEditBilling(e)}>
-                        Update
-                    </div>
-                </div>
-                <div style={{display: 'flex', alignItems: 'center', marginTop: '24px'}}>
-                    <div style={{display: 'flex', flexDirection: 'column', flexGrow: 1, marginTop: '5px'}}>
-                        <div style={{fontWeight: 'bold', fontSize: '13px'}}> Newsletter </div>
-                        <div style={{lineHeight: '18px'}}>
-                            <div style={{color: '#666666'}}> You are subscribed to email newsletters </div>
                         </div>
                     </div>
                     <div>
@@ -271,7 +306,7 @@ class PaidAccountHomePage extends React.Component {
                             this.onToggleSubscription(e, subscribed);
                         }} checked={subscribed} />
                     </div>
-                </div>
+                </section>
             </div>
         );
     }
@@ -279,7 +314,7 @@ class PaidAccountHomePage extends React.Component {
     render() {
         const {member, brandColor} = this.context;
         return (
-            <div style={{display: 'flex', flexDirection: 'column', color: '#313131'}}>
+            <div>
                 <UserHeader member={member} />
                 {this.renderAccountWelcome()}
                 <Divider />