Added basic styles

no refs.
- added icon for trigger button open/close state to indicate account menu
- updated style of trigger button for better contrast
- updated base font style and size for html and body to access global typographic styles

ghost/portal/src/App.css

@@ -1,38 +1,38 @@
 .App {
-  text-align: center;
+    text-align: center;
 }
 
 .App-logo {
-  height: 40vmin;
-  pointer-events: none;
+    height: 40vmin;
+    pointer-events: none;
 }
 
 @media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
+    .App-logo {
+        animation: App-logo-spin infinite 20s linear;
+    }
 }
 
 .App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
+    background-color: #282c34;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    font-size: calc(10px + 2vmin);
+    color: white;
 }
 
 .App-link {
-  color: #61dafb;
+    color: #61dafb;
 }
 
 @keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+    }
+}

ghost/portal/src/components/FrameComponent.js

@@ -3,9 +3,18 @@ import { createPortal } from 'react-dom'
 
 export default class Frame extends Component {
     componentDidMount() {
+
+      this.iframeHtml = this.node.contentDocument.documentElement;
+      this.iframeHtml.style.fontSize = "62.5%";
+
       this.iframeHead = this.node.contentDocument.head;
       this.iframeRoot = this.node.contentDocument.body;
       this.iframeRoot.style.margin = '0px';
+      this.iframeRoot.style.fontFamily = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif';
+      this.iframeRoot.style.fontSize = '1.6rem';
+      this.iframeRoot.style.lineHeight = '1.6em';
+      this.iframeRoot.style.fontWeight = '400';
+      this.iframeRoot.style.fontStyle = 'normal';
       this.forceUpdate()
     }
 

ghost/portal/src/components/PopupMenuComponent.js

@@ -15,7 +15,7 @@ export default class PopupMenuComponent extends React.Component {
             right: '20px',
             width: '250px',
             minHeight: '50px',
-            maxHeight: '100px',
+            maxHeight: '116px',
             boxShadow: 'rgba(0, 0, 0, 0.16) 0px 5px 40px',
             opacity: '1',
             height: 'calc(100% - 120px)',
@@ -23,11 +23,14 @@ export default class PopupMenuComponent extends React.Component {
             overflow: 'hidden',
             backgroundColor: 'white'
         };
-
+        
         const launcherStyle = {
             width: '100%',
             height: '100%',
             position: 'absolute',
+            letterSpacing: '0',
+            textRendering: 'optimizeLegibility',
+            fontSize: '1.5rem'
         };
 
         const buttonStyle = {
@@ -40,23 +43,23 @@ export default class PopupMenuComponent extends React.Component {
             left: '0px',
             right: '0px',
             overflow: 'hidden',
-            paddingTop: '15px',
-            paddingBottom: '15px',
+            paddingTop: '18px',
+            paddingBottom: '18px',
             textAlign: 'left'
         };
-        const memberEmail = (this.props.data && this.props.data.email) || "";
+        const memberEmail = (this.props.data && this.props.data.email) || "test@test.com";
         return (
             <FrameComponent style={hoverStyle}>
                 <div style={launcherStyle}>
                     <div style={buttonStyle}>
-                        <div style={{display: 'flex', flexDirection: 'column'}}>
-                            <div style={{paddingLeft: '12px',paddingRight: '12px', color: 'grey', fontSize: '12px'}}>
-                                SIGNED IN AS
+                        <div style={{display: 'flex', flexDirection: 'column', color: '#313131'}}>
+                            <div style={{paddingLeft: '16px', paddingRight: '16px', color: '#A6A6A6', fontSize: '1.2rem', lineHeight: '1.0em'}}>
+                                Signed in as
                             </div>
-                            <div style={{paddingLeft: '12px',paddingRight: '12px', paddingBottom: '9px'}}>
+                            <div style={{paddingLeft: '16px', paddingRight: '16px', paddingBottom: '9px'}}>
                                 {memberEmail}
                             </div>
-                            <div style={{paddingLeft: '12px',paddingRight: '12px', paddingTop: '12px', borderTop: '1px solid black', cursor: 'pointer'}}>
+                            <div style={{paddingLeft: '16px', paddingRight: '16px', paddingTop: '12px', borderTop: '1px solid #EFEFEF', cursor: 'pointer'}}>
                                 <div data-members-signout> Logout </div>
                             </div>
                         </div>

ghost/portal/src/components/TriggerComponent.js

@@ -1,5 +1,6 @@
 import FrameComponent from './FrameComponent';
-import closeIcon from '../images/close.png';
+import {ReactComponent as UserIcon} from '../images/icons/user.svg'
+import {ReactComponent as CloseIcon} from '../images/icons/close.svg'
 const React = require("react");
 const PropTypes = require("prop-types");
 
@@ -14,21 +15,33 @@ export default class TriggerComponent extends React.Component {
     }
 
     renderTriggerIcon() {
+        const userIconStyle = {
+            width: '24px',
+            height: '24px',
+            color: '#fff'
+        }
+
+        const closeIconStyle = {
+            width: '20px',
+            height: '20px',
+            color: '#fff'
+        }
+
         if (this.props.isPopupOpen) {
             return (
-                <img src={closeIcon} alt="logo" style={{ height: '30px', userSelect: 'none' }} />
+                <CloseIcon style={closeIconStyle} />
+                // <img src={closeIcon} className="trigger-icon" alt="Close" style={{ height: '30px', userSelect: 'none' }} />
             )
         }
 
-        const siteLogo = (this.props.data && this.props.data.logo) || "https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/1280px-React-icon.svg.png";
-
         return (
-            <img src={siteLogo} className="App-logo" alt="logo" style={{ height: '30px', userSelect: 'none' }} />
+            <UserIcon style={userIconStyle} />
+            // <img src={userIcon} className="trigger-icon" alt="Account" style={{ height: '20px', userSelect: 'none' }} />
         )
     }
 
     render() {
-        const backgroundColor = this.props.isPopupOpen ? "#ada1a1" : "rgb(245, 228, 228)";
+        const backgroundColor = this.props.isPopupOpen ? "#3EB0EF" : "#3EB0EF";
         const hoverStyle = {
             zIndex: '2147483000',
             position: 'fixed',

ghost/portal/src/images/icons/close.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><style>.a{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.2px}</style></defs><title>close</title><path class="a" d="M.75 23.249l22.5-22.5M23.25 23.249L.75.749"/></svg>

ghost/portal/src/images/icons/user.svg

@@ -0,0 +1 @@
+<svg id="Regular" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><style>.cls-1{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1px}</style></defs><title>single-neutral</title><circle class="cls-1" cx="12" cy="6" r="5.25"/><path class="cls-1" d="M2.25 23.25a9.75 9.75 0 0 1 19.5 0"/></svg>