Added account home CSS styles

no refs.
- added styles for free account home screen

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

@@ -5,6 +5,7 @@
 
 import {ActionButtonStyles} from './common/ActionButton';
 import {SwitchStyles} from './common/Switch';
+import {AccountHomePageStyles} from './pages/AccountHomePage';
 
 // Global styles
 export const GlobalStyles = `
@@ -78,7 +79,30 @@ export const GlobalStyles = `
     .fixed  { position: fixed; }
     .sticky  { position: sticky; }
 
-    /* Global styles
+    /* Typography
+    /* ----------------------------------------------------- */
+    h1, h2, h3, h4, h5, h6 {
+        padding: 0;
+        margin: 0;
+    }
+
+    h1 {
+        font-size: 31px;
+        font-weight: 500;
+        letter-spacing: 0.2px;
+    }
+
+    h2 {
+        font-size: 24px;
+        font-weight: 500;
+        letter-spacing: 0.2px;
+    }
+
+    .ghp-main-title {
+        color: #333;
+    }
+
+    /* Global layout styles
     /* ----------------------------------------------------- */
     .ghp-popup-container {
         width: 100%;
@@ -93,7 +117,7 @@ export const GlobalStyles = `
         left: 0px;
         right: 0px;
         overflow: hidden;
-        padding-top: 32px;
+        padding: 32px;
         padding-bottom: 32px;
         text-align: left;
         box-sizing: border-box;
@@ -113,10 +137,15 @@ export const GlobalStyles = `
         cursor: pointer;
         padding: 12px;
     }
+
+    .ghp-section {
+        margin-bottom: 32px;
+    }
 `;
 
 // Append all styles as string which we want to pass to iframe
 const FrameStyle = 
+    AccountHomePageStyles +
     GlobalStyles +
     SwitchStyles + 
     ActionButtonStyles;

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

@@ -6,6 +6,15 @@ import isPreviewMode from '../../utils/is-preview-mode';
 
 const React = require('react');
 
+export const AccountHomePageStyles = `
+    .ghp-account-header {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        margin-bottom: 20px;
+    }
+`;
+
 const Divider = () => {
     return (
         <div style={{borderBottom: '1px solid grey'}}>  </div>
@@ -35,14 +44,15 @@ const UserAvatar = ({avatar}) => {
 
 const AccountFooter = ({onLogout, onSettings, brandColor}) => {
     return (
-        <div style={{display: 'flex', padding: '0 32px', marginTop: '14px', color: brandColor, fontWeight: '500', fontSize: '14px'}}>
+        // <div style={{display: 'flex', padding: '0 32px', marginTop: '14px', color: brandColor, fontWeight: '500', fontSize: '14px'}}>
+        <div className='flex' style={{marginTop: '-18px'}}>
             <div style={{color: '#484848', opacity: '0.35', fontWeight: 'normal'}} role='button'>Contact support</div>
             <div style={{display: 'flex', flexGrow: 1, justifyContent: 'flex-end'}}>
                 {onSettings
-                    ? <div style={{marginRight: '16px', cursor: 'pointer'}} onClick={onSettings} role='button'>Settings</div>
+                    ? <div style={{marginRight: '16px', cursor: 'pointer', color: brandColor}} onClick={onSettings} role='button'>Settings</div>
                     : null
                 }
-                <div style={{cursor: 'pointer'}} onClick={onLogout} role='button'>Logout</div>
+                <div style={{cursor: 'pointer', color: brandColor}} onClick={onLogout} role='button'>Logout</div>
             </div>
         </div>
     );
@@ -51,9 +61,9 @@ const AccountFooter = ({onLogout, onSettings, brandColor}) => {
 const UserHeader = ({member}) => {
     const avatar = member.avatar_image;
     return (
-        <div style={{display: 'flex', flexDirection: 'column', alignItems: 'center', marginBottom: '20px'}}>
+        <div className='ghp-account-header'>
             <UserAvatar avatar={avatar} />
-            <h2 style={{fontSize: '24px', fontWeight: '500', padding: '0', margin: '0', letterSpacing: '0.2px', color: '#333'}}>Your Account</h2>
+            <h2 className="ghp-main-title">Your Account</h2>
         </div>
     );
 };
@@ -97,7 +107,7 @@ class FreeAccountHomePage extends React.Component {
         const {title: siteTitle} = this.context.site;
 
         return (
-            <div style={{padding: '0 32px'}}>
+            <div className='ghp-section'>
                 <div style={{textAlign: 'center', marginBottom: '24px', fontSize: '15px', lineHeight: '1.6em'}}>
                     Hey <span style={{fontWeight: '600'}}>{firstname || name || email}! </span>
                     You are subscribed to free updates from <span style={{fontWeight: '600'}}>{siteTitle}</span>, but you don't have a paid subscription to unlock full access
@@ -110,7 +120,7 @@ class FreeAccountHomePage extends React.Component {
     render() {
         const {member, brandColor} = this.context;
         return (
-            <div style={{display: 'flex', flexDirection: 'column', color: '#484848'}}>
+            <div>
                 <UserHeader member={member} />
                 {this.renderAccountDetail()}
                 <AccountFooter onLogout={e => this.handleSignout(e)} onSettings={e => this.openSettings(e)} brandColor={brandColor} />
@@ -132,7 +142,7 @@ class PaidAccountHomePage extends React.Component {
         const siteTitle = this.context.site.title;
 
         return (
-            <div style={{padding: '0 32px'}}>
+            <div className='ghp-section'>
                 <div style={{textAlign: 'center', marginBottom: '24px', fontSize: '15px'}}>
                     Hey <span style={{fontWeight: '600'}}>{firstname || name || email}! </span>
                     You have an active <span style={{fontWeight: '600'}}>{siteTitle}</span> 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.