Minor style changes

- applied blur on modal cover background
- adjusted positioning of modal
- refined sign in / sign up link style
- adjusted magic link envelope icon position and size

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

@@ -211,6 +211,8 @@ const FrameStyles = `
         background: rgba(0,0,0,0.25);
         padding-top: 100px;
         animation: fadein 0.2s;
+        background: linear-gradient(315deg , rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.3) 100%);
+        backdrop-filter: blur(2px);
     }
 
     .gh-portal-popup-background.preview {
@@ -225,7 +227,7 @@ const FrameStyles = `
 
     .gh-portal-popup-wrapper {
         position: relative;
-        padding: 6vw 0 0;
+        padding: 15vmin 0 0;
         height: 100%;
     }
 
@@ -779,7 +781,6 @@ const MobileStyles = `
 @media (min-width: 768px) and (max-height: 768px) {
     .gh-portal-signup-header,
     .gh-portal-signin-header {
-        margin-top: -12px;
         padding-bottom: 16px;
     }
 }

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

@@ -42,6 +42,11 @@ export const GlobalStyles = `
         box-sizing: border-box;
     }
 
+    button,
+    button span {
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+    }
+
     *, ::after, ::before {
         box-sizing: border-box;
     }

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

@@ -8,7 +8,7 @@ const React = require('react');
 export const MagicLinkStyles = `
     .gh-portal-icon-envelope {
         width: 44px;
-        margin: 0 0 2px;
+        margin: 12px 0 10px;
     }
 
     .gh-portal-inbox-notification {

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

@@ -95,11 +95,10 @@ export default class SigninPage extends React.Component {
 
     renderSignupMessage() {
         const brandColor = this.context.brandColor;
-        const underline = (brandColor === '#1d1d1d') ? '0 1px 0 0 rgba(29, 29, 29, 0.35)' : '';
         return (
             <div className='gh-portal-signup-message'>
                 <div>Don't have an account?</div>
-                <button className='gh-portal-btn gh-portal-btn-link' style={{color: brandColor}} onClick={() => this.context.onAction('switchPage', {page: 'signup'})}><span style={{boxShadow: underline}}>Sign up</span></button>
+                <button className='gh-portal-btn gh-portal-btn-link' style={{color: brandColor}} onClick={() => this.context.onAction('switchPage', {page: 'signup'})}><span>Sign up</span></button>
             </div>
         );
     }

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

@@ -386,7 +386,6 @@ class SignupPage extends React.Component {
 
     renderLoginMessage() {
         const {brandColor, onAction} = this.context;
-        const underline = (brandColor === '#1d1d1d') ? '0 1px 0 0 rgba(29, 29, 29, 0.35)' : '';
         return (
             <div className='gh-portal-signup-message'>
                 <div>Already a member?</div>
@@ -395,7 +394,7 @@ class SignupPage extends React.Component {
                     style={{color: brandColor}}
                     onClick={() => onAction('switchPage', {page: 'signin'})}
                 >
-                    <span style={{boxShadow: underline}}>Sign in</span>
+                    <span>Sign in</span>
                 </button>
             </div>
         );