Applied custom preview style + fixed account

no refs.
- applied custom style for popup container and background for Admin preview to make the UX more focused
- fixed dummy paid member as the preview content of the account home page

ghost/portal/src/App.js

@@ -306,7 +306,11 @@ export default class App extends React.Component {
         if (hasMode(['dev', 'preview'])) {
             /** Use dummy member(free or paid) for account pages in dev/preview mode*/
             if (isAccountPage({page})) {
-                return member || Fixtures.member.free;
+                if (hasMode(['dev'])) {
+                    return member || Fixtures.member.free;
+                } else {
+                    return Fixtures.member.paid;
+                }
             }
 
             /** Ignore member for non-account pages in dev/preview mode*/

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

@@ -181,6 +181,11 @@ const GlobalStyles = `
         animation: fadein 0.2s;
     }
 
+    .gh-portal-popup-background.preview {
+        background: #F8FAFC;
+        animation: none;
+    }
+
     @keyframes fadein {
         0% { opacity: 0; }
         100%{ opacity: 1.0; }
@@ -207,6 +212,18 @@ const GlobalStyles = `
         animation: popup 0.25s;
     }
 
+    .gh-portal-popup-container.preview {
+        box-shadow:
+            0 0 0 1px rgba(0,0,0,0.02),
+            0 2.8px 2.2px rgba(0, 0, 0, 0.02),
+            0 6.7px 5.3px rgba(0, 0, 0, 0.028),
+            0 12.5px 10px rgba(0, 0, 0, 0.035),
+            0 22.3px 17.9px rgba(0, 0, 0, 0.042),
+            0 41.8px 33.4px rgba(0, 0, 0, 0.05),
+            0 100px 80px rgba(0, 0, 0, 0.07);
+        animation: none;
+    }
+
     @keyframes popup {
         0% { 
             transform: scale(0.9) translateY(20px); 

ghost/portal/src/components/PopupModal.js

@@ -1,5 +1,6 @@
 import Frame from './Frame';
 import {ReactComponent as CloseIcon} from '../images/icons/close.svg';
+import {hasMode} from '../utils/check-mode';
 import AppContext from '../AppContext';
 import FrameStyle from './Frame.styles';
 import Pages, {getActivePage} from '../pages';
@@ -72,7 +73,7 @@ class PopupContent extends React.Component {
             ...Styles.page[page]
         };
         return (
-            <div className='gh-portal-popup-container' style={pageStyle} ref={this.container}>
+            <div className={hasMode(['preview']) ? 'gh-portal-popup-container preview' : 'gh-portal-popup-container'} style={pageStyle} ref={this.container}>
                 {this.renderPopupClose()}
                 {this.renderActivePage()}
             </div>
@@ -137,7 +138,7 @@ export default class PopupModal extends React.Component {
         return (
             <div style={Styles.modalContainer}>
                 <Frame style={frameStyle} title="membersjs-popup" head={this.renderFrameStyles()}>
-                    <div className='gh-portal-popup-background' onClick = {e => this.handlePopupClose(e)}></div>
+                    <div className={hasMode(['preview']) ? 'gh-portal-popup-background preview' : 'gh-portal-popup-background'} onClick = {e => this.handlePopupClose(e)}></div>
                     <PopupContent />
                 </Frame>
             </div>

ghost/portal/src/utils/fixtures.js

@@ -34,9 +34,9 @@ export const member = {
     },
     paid: {
         uuid: '7dcc8939-3be0-4ac8-a363-96d19f909de6',
-        email: 'paidmember+@example.com',
-        name: 'Paid Member',
-        firstname: 'Member',
+        email: 'jamie@example.com',
+        name: 'Jamie Larson',
+        firstname: 'Jamie',
         // avatar_image: 'https://gravatar.com/avatar/eb0ef27b5faa9528c900170cba4c11dc?s=250&',
         avatar_image: '',
         subscriptions: [{
@@ -44,13 +44,13 @@ export const member = {
             customer: {
                 id: 'cus_HCLy4Y3eLt50YJ',
                 name: null,
-                email: 'paidmember+@example.com'
+                email: 'jamie@example.com'
             },
             plan: {
                 id: 'fd43b943666b97640188afb382cca39479de30f799985679dd7a71ad2925ac6c',
                 nickname: 'Monthly',
                 interval: 'month',
-                amount: 1200,
+                amount: 500,
                 currency: 'USD',
                 currency_symbol: '$'
             },