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:
parent
b8a57d6ddf
commit
b037d98fb8
4 changed files with 6 additions and 11 deletions
|
@ -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) {
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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: {
|
||||||
|
|
|
@ -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,
|
||||||
|
|
Loading…
Add table
Reference in a new issue