Update default accent color (#112)

Updated default accent color to neutral dark grey to make it compatible with more themes.
This commit is contained in:
Peter Zimon 2020-12-14 09:09:32 +01:00 committed by GitHub
parent e2b594528a
commit b749d76138
6 changed files with 17 additions and 9 deletions

View File

@ -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*/

View File

@ -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;
}

View File

@ -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

View File

@ -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>
);
}

View File

@ -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>
);

View File

@ -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,