0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-17 23:44:39 -05:00

Removed auto-invert color from primary buttons

no refs.
This commit is contained in:
Peter Zimon 2020-10-13 14:43:22 +02:00
parent b8a57d6ddf
commit b037d98fb8
4 changed files with 6 additions and 11 deletions

View file

@ -16,7 +16,7 @@ const DEV_MODE_DATA = {
showPopup: true, showPopup: true,
site: Fixtures.site, site: Fixtures.site,
member: Fixtures.member.paid, member: Fixtures.member.paid,
page: 'accountHome' page: 'signup'
}; };
export default class App extends React.Component { export default class App extends React.Component {
constructor(props) { constructor(props) {

View file

@ -8,7 +8,6 @@ import {ReactComponent as ButtonIcon2} from '../images/icons/button-icon-2.svg';
import {ReactComponent as ButtonIcon3} from '../images/icons/button-icon-3.svg'; import {ReactComponent as ButtonIcon3} from '../images/icons/button-icon-3.svg';
import {ReactComponent as ButtonIcon4} from '../images/icons/button-icon-4.svg'; import {ReactComponent as ButtonIcon4} from '../images/icons/button-icon-4.svg';
import {ReactComponent as ButtonIcon5} from '../images/icons/button-icon-5.svg'; import {ReactComponent as ButtonIcon5} from '../images/icons/button-icon-5.svg';
import getContrastColor from '../utils/contrast-color';
import TriggerButtonStyle from './TriggerButton.styles'; import TriggerButtonStyle from './TriggerButton.styles';
const React = require('react'); const React = require('react');
@ -25,7 +24,6 @@ const Styles = ({brandColor, hasText}) => {
const frame = { const frame = {
...(!hasText ? {width: '60px'} : {}) ...(!hasText ? {width: '60px'} : {})
}; };
const invertColor = getContrastColor(brandColor);
return { return {
frame: { frame: {
zIndex: '3999998', zIndex: '3999998',
@ -45,12 +43,12 @@ const Styles = ({brandColor, hasText}) => {
userIcon: { userIcon: {
width: '34px', width: '34px',
height: '34px', height: '34px',
color: invertColor color: '#fff'
}, },
buttonIcon: { buttonIcon: {
width: '24px', width: '24px',
height: '24px', height: '24px',
color: invertColor color: '#fff'
}, },
closeIcon: { closeIcon: {
width: '20px', width: '20px',
@ -157,11 +155,9 @@ class TriggerButtonContent extends React.Component {
const { const {
portal_button_signup_text: buttonText portal_button_signup_text: buttonText
} = this.context.site; } = this.context.site;
const {brandColor} = this.context;
const textColor = getContrastColor(brandColor);
if (this.hasText()) { if (this.hasText()) {
return ( return (
<span style={{padding: '0 8px', color: textColor}}> {buttonText} </span> <span style={{padding: '0 8px', color: '#fff'}}> {buttonText} </span>
); );
} }
return null; return null;

View file

@ -1,5 +1,4 @@
import React from 'react'; import React from 'react';
import getContrastColor from '../../utils/contrast-color';
import {ReactComponent as LoaderIcon} from '../../images/icons/loader.svg'; import {ReactComponent as LoaderIcon} from '../../images/icons/loader.svg';
import {isCookiesDisabled} from '../../utils/helpers'; import {isCookiesDisabled} from '../../utils/helpers';
@ -65,7 +64,7 @@ const Styles = ({brandColor, retry, disabled, style = {}, isPrimary}) => {
opacity = '0.5'; opacity = '0.5';
pointerEvents = 'none'; pointerEvents = 'none';
} }
const textColor = getContrastColor(backgroundColor); const textColor = '#fff';
return { return {
button: { button: {

View file

@ -3,7 +3,7 @@ export const site = {
description: 'Thoughts, stories and ideas.', description: 'Thoughts, stories and ideas.',
logo: 'https://pbs.twimg.com/profile_images/1111773508231667713/mf2N0uqc_400x400.png', logo: 'https://pbs.twimg.com/profile_images/1111773508231667713/mf2N0uqc_400x400.png',
icon: 'https://pbs.twimg.com/profile_images/1111773508231667713/mf2N0uqc_400x400.png', icon: 'https://pbs.twimg.com/profile_images/1111773508231667713/mf2N0uqc_400x400.png',
accent_color: '#AB19E4', accent_color: '#3388aa',
url: 'http://localhost:2368/', url: 'http://localhost:2368/',
plans: { plans: {
monthly: 5, monthly: 5,