Updated basic styles for Account home page

no refs.
- applied layout, typography, color basics

ghost/portal/src/components/PopupModal.js

@@ -16,20 +16,20 @@ const React = require('react');
 const StylesWrapper = ({member}) => {
     const isPaidMember = (member && member.paid);
     const accountHome = isPaidMember ? {
-        width: '500px',
+        width: '532px',
         minHeight: '650px',
         maxHeight: '700px'
     } : {
-        width: '500px',
+        width: '532px',
         minHeight: '330px',
         maxHeight: '330px'
     };
     const accountProfile = isPaidMember ? {
-        width: '500px',
+        width: '532px',
         minHeight: '320px',
         maxHeight: '320px'
     } : {
-        width: '500px',
+        width: '532px',
         minHeight: '380px',
         maxHeight: '380px'
     };
@@ -44,7 +44,7 @@ const StylesWrapper = ({member}) => {
             height: '100%',
             overflow: 'auto',
             textAlign: 'center',
-            backgroundColor: 'rgba(128,128,128,0.5)'
+            backgroundColor: 'rgba(0,0,0,0.65)'
         },
         frame: {
             common: {
@@ -52,9 +52,9 @@ const StylesWrapper = ({member}) => {
                 position: 'relative',
                 padding: '0',
                 outline: '0',
-                width: '500px',
+                width: '532px',
                 borderRadius: '8px',
-                boxShadow: 'rgba(0, 0, 0, 0.16) 0px 5px 40px',
+                boxShadow: '0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12)',
                 opacity: '1',
                 overflow: 'hidden',
                 height: '60%',
@@ -77,7 +77,7 @@ const StylesWrapper = ({member}) => {
                 minHeight: '130px'
             },
             accountPlan: {
-                width: '500px',
+                width: '532px',
                 minHeight: '290px',
                 maxHeight: '290px'
             },
@@ -100,16 +100,18 @@ const StylesWrapper = ({member}) => {
                 left: '0px',
                 right: '0px',
                 overflow: 'hidden',
-                paddingTop: '18px',
-                paddingBottom: '18px',
+                paddingTop: '32px',
+                paddingBottom: '32px',
                 textAlign: 'left',
-                boxSizing: 'border-box'
+                boxSizing: 'border-box',
+                position: 'relative'
             },
             closeIcon: {
                 width: '16px',
                 height: '16px',
-                color: 'grey',
-                cursor: 'pointer'
+                color: '#999',
+                cursor: 'pointer',
+                padding: '12px'
             }
         }
     };
@@ -173,7 +175,7 @@ class PopupContent extends React.Component {
     renderPopupClose() {
         const Styles = StylesWrapper({});
         return (
-            <div style={{display: 'flex', justifyContent: 'flex-end', padding: '0 20px'}}>
+            <div style={{position: 'absolute', top: '8px', right: '8px'}}>
                 <CloseIcon style={Styles.popup.closeIcon} onClick = {() => this.context.onAction('closePopup')} />
             </div>
         );
@@ -216,7 +218,7 @@ export default class PopupModal extends React.Component {
     renderPopupClose() {
         const Styles = StylesWrapper({});
         return (
-            <div style={{display: 'flex', justifyContent: 'flex-end', padding: '0 20px'}}>
+            <div style={{position: 'absolute', top: '8px', right: '8px'}}>
                 <CloseIcon style={Styles.popup.closeIcon} onClick = {() => this.context.onAction('closePopup')} />
             </div>
         );

ghost/portal/src/components/TriggerButton.js

@@ -8,7 +8,6 @@ const React = require('react');
 
 const Styles = ({brandColor, hasText}) => {
     const frame = {
-        ...(hasText ? {borderRadius: '12px'} : {}),
         ...(!hasText ? {width: '60px'} : {})
     };
     return {
@@ -21,7 +20,7 @@ const Styles = ({brandColor, hasText}) => {
             maxWidth: '500px',
             height: '60px',
             boxShadow: 'rgba(0, 0, 0, 0.06) 0px 1px 6px 0px, rgba(0, 0, 0, 0.16) 0px 2px 32px 0px',
-            borderRadius: '50%',
+            borderRadius: '999px',
             backgroundColor: brandColor,
             animation: '250ms ease 0s 1 normal none running animation-bhegco',
             transition: 'opacity 0.3s ease 0s',
@@ -38,7 +37,7 @@ const Styles = ({brandColor, hasText}) => {
             transformOrigin: 'center center',
             backfaceVisibility: 'hidden',
             WebkitFontSmoothing: 'antialiased',
-            borderRadius: '50%',
+            borderRadius: '999px',
             overflow: 'hidden'
         },
         button: {

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

@@ -19,7 +19,8 @@ const Styles = ({brandColor, retry, disabled, style = {}}) => {
             border: '0',
             fontSize: '1.5rem',
             lineHeight: '42px',
-            fontWeight: '600',
+            fontWeight: '500',
+            letterSpacing: '0.2px',
             textAlign: 'center',
             textDecoration: 'none',
             whiteSpace: 'nowrap',

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

@@ -18,10 +18,9 @@ const UserAvatar = ({avatar}) => {
         display: 'flex',
         width: '64px',
         height: '64px',
-        marginBottom: '6px',
-        borderRadius: '100%',
+        marginBottom: '8px',
+        borderRadius: '999px',
         boxShadow: '0 0 0 3px #fff',
-        border: '1px solid gray',
         overflow: 'hidden',
         justifyContent: 'center',
         alignItems: 'center'
@@ -29,21 +28,21 @@ const UserAvatar = ({avatar}) => {
 
     return (
         <div style={avatarContainerStyle}>
-            <MemberAvatar gravatar={avatar} style={{userIcon: {color: 'black', width: '45px', height: '45px'}}} />
+            <MemberAvatar gravatar={avatar} style={{userIcon: {color: '#525252', width: '45px', height: '45px'}}} />
         </div>
     );
 };
 
 const AccountFooter = ({onLogout, onSettings, brandColor}) => {
     return (
-        <div style={{display: 'flex', padding: '0 24px', marginTop: '18px', color: brandColor, fontWeight: 'bold', fontSize: '13px'}}>
-            <div style={{color: 'grey'}} role='button'> Contact support </div>
+        <div style={{display: 'flex', padding: '0 32px', marginTop: '14px', color: brandColor, fontWeight: '500', fontSize: '14px'}}>
+            <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'}} onClick={onSettings} role='button'>Settings</div>
                     : null
                 }
-                <div style={{cursor: 'pointer'}} onClick={onLogout} role='button'> Logout </div>
+                <div style={{cursor: 'pointer'}} onClick={onLogout} role='button'>Logout</div>
             </div>
         </div>
     );
@@ -52,9 +51,9 @@ const AccountFooter = ({onLogout, onSettings, brandColor}) => {
 const UserHeader = ({member}) => {
     const avatar = member.avatar_image;
     return (
-        <div style={{display: 'flex', flexDirection: 'column', alignItems: 'center', marginBottom: '12px'}}>
+        <div style={{display: 'flex', flexDirection: 'column', alignItems: 'center', marginBottom: '20px'}}>
             <UserAvatar avatar={avatar} />
-            <div style={{fontSize: '21px', fontWeight: '500', marginTop: '6px'}}> Your Account </div>
+            <h2 style={{fontSize: '24px', fontWeight: '500', padding: '0', margin: '0', letterSpacing: '0.2px', color: '#333'}}>Your Account</h2>
         </div>
     );
 };
@@ -98,10 +97,10 @@ class FreeAccountHomePage extends React.Component {
         const {title: siteTitle} = this.context.site;
 
         return (
-            <div style={{padding: '0 24px'}}>
-                <div style={{textAlign: 'center', marginBottom: '12px', fontSize: '14px'}}>
-                    <span style={{fontWeight: 'bold'}}>Hey {firstname || name || email}! </span>
-                    You are subscribed to free updates from <span style={{fontWeight: 'bold'}}>{siteTitle}</span>, but you don't have a paid subscription to unlock full access
+            <div style={{padding: '0 32px'}}>
+                <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
                 </div>
                 {this.renderSubscribeButton()}
             </div>
@@ -111,7 +110,7 @@ class FreeAccountHomePage extends React.Component {
     render() {
         const {member, brandColor} = this.context;
         return (
-            <div style={{display: 'flex', flexDirection: 'column', color: '#313131'}}>
+            <div style={{display: 'flex', flexDirection: 'column', color: '#484848'}}>
                 <UserHeader member={member} />
                 {this.renderAccountDetail()}
                 <AccountFooter onLogout={e => this.handleSignout(e)} onSettings={e => this.openSettings(e)} brandColor={brandColor} />
@@ -133,10 +132,10 @@ class PaidAccountHomePage extends React.Component {
         const siteTitle = this.context.site.title;
 
         return (
-            <div style={{padding: '0 24px'}}>
-                <div style={{textAlign: 'center', marginBottom: '12px', fontSize: '14px'}}>
-                    <span style={{fontWeight: 'bold'}}>Hey {firstname || name || email}! </span>
-                    You have an active <span style={{fontWeight: 'bold'}}>{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.
+            <div style={{padding: '0 32px'}}>
+                <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.
                 </div>
             </div>
         );