diff options
Diffstat (limited to 'packages/website')
| -rw-r--r-- | packages/website/ts/components/onboarding/onboarding_flow.tsx | 10 | ||||
| -rw-r--r-- | packages/website/ts/components/ui/button.tsx | 16 |
2 files changed, 17 insertions, 9 deletions
diff --git a/packages/website/ts/components/onboarding/onboarding_flow.tsx b/packages/website/ts/components/onboarding/onboarding_flow.tsx index cfce70b84..331899469 100644 --- a/packages/website/ts/components/onboarding/onboarding_flow.tsx +++ b/packages/website/ts/components/onboarding/onboarding_flow.tsx @@ -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); diff --git a/packages/website/ts/components/ui/button.tsx b/packages/website/ts/components/ui/button.tsx index cb542a386..02fa47480 100644 --- a/packages/website/ts/components/ui/button.tsx +++ b/packages/website/ts/components/ui/button.tsx @@ -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 = { |