Differentiate download button.
This commit is contained in:
parent
8bee669a50
commit
23c524c0d6
@ -6,6 +6,15 @@ export default class Button extends PureComponent {
|
|||||||
focus() {
|
focus() {
|
||||||
this.button.focus();
|
this.button.focus();
|
||||||
}
|
}
|
||||||
|
getColorKeys() {
|
||||||
|
if (this.props.disabled) {
|
||||||
|
return ['shade3', 'shade0'];
|
||||||
|
} else if (this.props.small || this.props.special) {
|
||||||
|
return ['shade7'];
|
||||||
|
} else {
|
||||||
|
return ['accent4', 'shade6', 'shade7'];
|
||||||
|
}
|
||||||
|
}
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<ColorState>
|
<ColorState>
|
||||||
@ -14,15 +23,17 @@ export default class Button extends PureComponent {
|
|||||||
className={ [
|
className={ [
|
||||||
styles.button,
|
styles.button,
|
||||||
this.props.small && styles.small,
|
this.props.small && styles.small,
|
||||||
|
this.props.special && styles.special,
|
||||||
this.props.className,
|
this.props.className,
|
||||||
].filter(Boolean).join(' ') }
|
].filter(Boolean).join(' ') }
|
||||||
|
data-text="Download"
|
||||||
style={{
|
style={{
|
||||||
color: this.props.disabled ? getColor('shade3', 'shade0') : (
|
color: getColor(...this.getColorKeys()),
|
||||||
this.props.small ? getColor('shade7') : getColor('accent4', 'shade6', 'shade7')
|
|
||||||
),
|
|
||||||
'--button-resting-background-color': getColor('shade1', 'shade0'),
|
'--button-resting-background-color': getColor('shade1', 'shade0'),
|
||||||
'--button-hover-background-color': getColor('shade2', 'shade0'),
|
'--button-hover-background-color': getColor('shade2', 'shade0'),
|
||||||
'--button-active-background-color': getColor('shade0'),
|
'--button-active-background-color': getColor('shade0'),
|
||||||
|
'--button-special-color-1': getColor('accent1', 'shade7'),
|
||||||
|
'--button-special-color-2': getColor('accent7', 'shade7'),
|
||||||
}}
|
}}
|
||||||
onClick={ this.props.onClick }
|
onClick={ this.props.onClick }
|
||||||
disabled={ this.props.disabled }
|
disabled={ this.props.disabled }
|
||||||
|
@ -18,6 +18,36 @@
|
|||||||
font-size: var(--font-size-small);
|
font-size: var(--font-size-small);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.special {
|
||||||
|
padding: var(--size-small-3) var(--size-large-1);
|
||||||
|
border: none;
|
||||||
|
font-size: var(--size-large-1);
|
||||||
|
background-image: linear-gradient(to right, var(--button-special-color-1), var(--button-special-color-2));
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.special::before {
|
||||||
|
content: attr(data-text);
|
||||||
|
position: absolute;
|
||||||
|
top: var(--large-border-size);
|
||||||
|
right: var(--large-border-size);
|
||||||
|
bottom: var(--large-border-size);
|
||||||
|
left: var(--large-border-size);
|
||||||
|
border-radius: var(--small-border-radius-size);
|
||||||
|
background-color: var(--button-resting-background-color);
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.special:hover::before {
|
||||||
|
background-color: var(--button-hover-background-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.special:active::before {
|
||||||
|
background-color: var(--button-active-background-color);
|
||||||
|
}
|
||||||
|
|
||||||
.button:hover {
|
.button:hover {
|
||||||
background-color: var(--button-hover-background-color);
|
background-color: var(--button-hover-background-color);
|
||||||
}
|
}
|
||||||
|
@ -229,6 +229,7 @@ export default class DownloadOptions extends PureComponent {
|
|||||||
<UrlStateConsumer>
|
<UrlStateConsumer>
|
||||||
{ ({ rawState }) => (
|
{ ({ rawState }) => (
|
||||||
<Button
|
<Button
|
||||||
|
special
|
||||||
onClick={ async () => {
|
onClick={ async () => {
|
||||||
const zip = await generateZip(
|
const zip = await generateZip(
|
||||||
this.state,
|
this.state,
|
||||||
|
@ -37,7 +37,9 @@ body,
|
|||||||
|
|
||||||
--border-size: var(--size-small-6);
|
--border-size: var(--size-small-6);
|
||||||
--small-border-size: var(--size-small-8);
|
--small-border-size: var(--size-small-8);
|
||||||
|
--large-border-size: var(--size-small-5);
|
||||||
--border-radius-size: var(--size-small-3);
|
--border-radius-size: var(--size-small-3);
|
||||||
|
--small-border-radius-size: var(--size-small-4);
|
||||||
|
|
||||||
--font-size-small: var(--size-small-1);
|
--font-size-small: var(--size-small-1);
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user