crowetic/protocol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Buttons look hella disabled now

Browse Source
This commit is contained in:
fragosti 2018-06-21 12:09:38 -07:00
parent d963941be0
commit eb494f78fa
2 changed files with 17 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
packages/website/ts/components/onboarding/onboarding_flow.tsx
View File

@ -37,20 +37,20 @@ export class OnboardingFlow extends React.Component<OnboardingFlowProps> {
if (!this.props.isRunning) {
return null;
}
let onboardingEl = null;
let onboardingElement = null;
if (this.props.isMobile) {
onboardingEl = <Animation type="easeUpFromBottom">{this._renderOnboardignCard()}</Animation>;
onboardingElement = <Animation type="easeUpFromBottom">{this._renderOnboardignCard()}</Animation>;
} else {
onboardingEl = (
onboardingElement = (
<Popper referenceElement={this._getElementForStep()} placement={this._getCurrentStep().placement}>
{this._renderPopperChildren.bind(this)}
</Popper>
);
}
if (this.props.disableOverlay) {
return onboardingEl;
return onboardingElement;
}
return <Overlay>{onboardingEl}</Overlay>;
return <Overlay>{onboardingElement}</Overlay>;
}
private _getElementForStep(): Element {
return document.querySelector(this._getCurrentStep().target);

16
packages/website/ts/components/ui/button.tsx
View File

@ -1,5 +1,5 @@
import { colors } from '@0xproject/react-shared';
import { darken, grayscale } from 'polished';
import { darken, saturate } from 'polished';
import * as React from 'react';
import { styled } from 'ts/style/theme';
@ -17,7 +17,7 @@ export interface ButtonProps {
}
const PlainButton: React.StatelessComponent<ButtonProps> = ({ children, isDisabled, onClick, type, className }) => (
<button type={type} className={className} onClick={isDisabled ? undefined : onClick}>
<button type={type} className={className} onClick={isDisabled ? undefined : onClick} disabled={isDisabled}>
{children}
</button>
);
@ -26,14 +26,15 @@ export const Button = styled(PlainButton)`
cursor: ${props => (props.isDisabled ? 'default' : 'pointer')};
font-size: ${props => props.fontSize};
color: ${props => props.fontColor};
transition: background-color 0.5s ease;
transition: background-color, opacity 0.5s ease;
padding: 0.8em 2.2em;
border-radius: 6px;
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
font-weight: 500;
outline: none;
font-family: ${props => props.fontFamily};
width: ${props => props.width};
background-color: ${props => (props.isDisabled ? grayscale(props.backgroundColor) : props.backgroundColor)};
background-color: ${props => props.backgroundColor};
border: ${props => (props.borderColor ? `1px solid ${props.borderColor}` : 'none')};
&:hover {
background-color: ${props => (!props.isDisabled ? darken(0.1, props.backgroundColor) : '')};
@ -41,6 +42,13 @@ export const Button = styled(PlainButton)`
&:active {
background-color: ${props => (!props.isDisabled ? darken(0.2, props.backgroundColor) : '')};
}
&:disabled {
opacity: 0.5;
box-shadow: none;
}
&:focus {
background-color: ${props => saturate(0.2, props.backgroundColor)};
}
`;
Button.defaultProps = {