aboutsummaryrefslogtreecommitdiffstats
path: root/packages
diff options
context:
space:
mode:
Diffstat (limited to 'packages')
-rw-r--r--packages/website/ts/components/onboarding/onboarding_flow.tsx10
-rw-r--r--packages/website/ts/components/ui/button.tsx16
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 = {