From b749d761389e65ce7025fe623574cd2021e365ae Mon Sep 17 00:00:00 2001
From: Peter Zimon <zimo@ghost.org>
Date: Mon, 14 Dec 2020 09:09:32 +0100
Subject: [PATCH] Update default accent color (#112)

Updated default accent color to neutral dark grey to make it compatible with more themes.
---
 ghost/portal/src/App.js                            |  6 +++---
 ghost/portal/src/components/Frame.styles.js        |  2 +-
 ghost/portal/src/components/pages/MagicLinkPage.js |  2 +-
 ghost/portal/src/components/pages/SigninPage.js    |  3 ++-
 ghost/portal/src/components/pages/SignupPage.js    | 11 +++++++++--
 ghost/portal/src/utils/fixtures.js                 |  2 +-
 6 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/ghost/portal/src/App.js b/ghost/portal/src/App.js
index bc620287d2..3740a8ecf8 100644
--- a/ghost/portal/src/App.js
+++ b/ghost/portal/src/App.js
@@ -16,7 +16,7 @@ const DEV_MODE_DATA = {
     showPopup: true,
     site: Fixtures.site,
     member: Fixtures.member.paid,
-    page: 'accountPlan'
+    page: 'signup'
 };
 export default class App extends React.Component {
     constructor(props) {
@@ -399,8 +399,8 @@ export default class App extends React.Component {
 
     /**Get Accent color from site data, fallback to default*/
     getAccentColor() {
-        const {accent_color: accentColor = '#3db0ef'} = this.state.site || {};
-        return accentColor || '#3db0ef';
+        const {accent_color: accentColor = '#1d1d1d'} = this.state.site || {};
+        return accentColor || '#1d1d1d';
     }
 
     /**Get final page set in App context from state data*/
diff --git a/ghost/portal/src/components/Frame.styles.js b/ghost/portal/src/components/Frame.styles.js
index 91d5025b23..f0d9f88e15 100644
--- a/ghost/portal/src/components/Frame.styles.js
+++ b/ghost/portal/src/components/Frame.styles.js
@@ -21,7 +21,7 @@ import {PopupNotificationStyles} from './common/PopupNotification';
 const FrameStyles = `
     .gh-portal-main-title {
         text-align: center;
-        color: var(--grey1);
+        color: var(--grey0);
         line-height: 1.35em;
     }
 
diff --git a/ghost/portal/src/components/pages/MagicLinkPage.js b/ghost/portal/src/components/pages/MagicLinkPage.js
index 448030c0d0..78774b24d7 100644
--- a/ghost/portal/src/components/pages/MagicLinkPage.js
+++ b/ghost/portal/src/components/pages/MagicLinkPage.js
@@ -42,7 +42,7 @@ export default class MagicLinkPage extends React.Component {
         return (
             <>
                 <div
-                    style={{color: '#3db0ef', fontWeight: 'bold', cursor: 'pointer'}}
+                    style={{color: '#1d1d1d', fontWeight: 'bold', cursor: 'pointer'}}
                     onClick={() => this.context.onAction('switchPage', {page: 'signin'})}
                 >
                     Back to Log in
diff --git a/ghost/portal/src/components/pages/SigninPage.js b/ghost/portal/src/components/pages/SigninPage.js
index 1b14aafae3..cf7820c7df 100644
--- a/ghost/portal/src/components/pages/SigninPage.js
+++ b/ghost/portal/src/components/pages/SigninPage.js
@@ -95,10 +95,11 @@ 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'})}>Sign up</button>
+                <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>
             </div>
         );
     }
diff --git a/ghost/portal/src/components/pages/SignupPage.js b/ghost/portal/src/components/pages/SignupPage.js
index c9cebb39b8..168b37113c 100644
--- a/ghost/portal/src/components/pages/SignupPage.js
+++ b/ghost/portal/src/components/pages/SignupPage.js
@@ -55,10 +55,16 @@ export const SignupPageStyles = `
 
     .gh-portal-signup-message button {
         font-size: 1.3rem;
-        font-weight: 400;
+        font-weight: 600;
         margin-left: 4px;
     }
 
+    .gh-portal-signup-message button span {
+        display: inline-block;
+        padding-bottom: 2px;
+        margin-bottom: -2px;
+    }
+
     .gh-portal-content.signup {
         background: linear-gradient(#fff 30%,hsla(0,0%,100%,0)),
                     linear-gradient(hsla(0,0%,100%,0),#fff 70%) 0 100%,
@@ -380,6 +386,7 @@ 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>
@@ -388,7 +395,7 @@ class SignupPage extends React.Component {
                     style={{color: brandColor}}
                     onClick={() => onAction('switchPage', {page: 'signin'})}
                 >
-                    Sign in
+                    <span style={{boxShadow: underline}}>Sign in</span>
                 </button>
             </div>
         );
diff --git a/ghost/portal/src/utils/fixtures.js b/ghost/portal/src/utils/fixtures.js
index c46a9d2eb0..1746a3998f 100644
--- a/ghost/portal/src/utils/fixtures.js
+++ b/ghost/portal/src/utils/fixtures.js
@@ -3,7 +3,7 @@ export const site = {
     description: 'Thoughts, stories and ideas.',
     logo: 'https://pbs.twimg.com/profile_images/1111773508231667713/mf2N0uqc_400x400.png',
     icon: 'https://pbs.twimg.com/profile_images/1111773508231667713/mf2N0uqc_400x400.png',
-    accent_color: '#3388aa',
+    accent_color: '',
     url: 'http://localhost:2368/',
     plans: {
         monthly: 5,