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) { if (!this.props.isRunning) {
return null; return null;
} }
let onboardingEl = null; let onboardingElement = null;
if (this.props.isMobile) { if (this.props.isMobile) {
onboardingEl = <Animation type="easeUpFromBottom">{this._renderOnboardignCard()}</Animation>; onboardingElement = <Animation type="easeUpFromBottom">{this._renderOnboardignCard()}</Animation>;
} else { } else {
onboardingEl = ( onboardingElement = (
<Popper referenceElement={this._getElementForStep()} placement={this._getCurrentStep().placement}> <Popper referenceElement={this._getElementForStep()} placement={this._getCurrentStep().placement}>
{this._renderPopperChildren.bind(this)} {this._renderPopperChildren.bind(this)}
</Popper> </Popper>
); );
} }
if (this.props.disableOverlay) { if (this.props.disableOverlay) {
return onboardingEl; return onboardingElement;
} }
return <Overlay>{onboardingEl}</Overlay>; return <Overlay>{onboardingElement}</Overlay>;
} }
private _getElementForStep(): Element { private _getElementForStep(): Element {
return document.querySelector(this._getCurrentStep().target); 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 { colors } from '@0xproject/react-shared';
import { darken, grayscale } from 'polished'; import { darken, saturate } from 'polished';
import * as React from 'react'; import * as React from 'react';
import { styled } from 'ts/style/theme'; import { styled } from 'ts/style/theme';
@ -17,7 +17,7 @@ export interface ButtonProps {
} }
const PlainButton: React.StatelessComponent<ButtonProps> = ({ children, isDisabled, onClick, type, className }) => ( 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} {children}
</button> </button>
); );
@ -26,14 +26,15 @@ export const Button = styled(PlainButton)`
cursor: ${props => (props.isDisabled ? 'default' : 'pointer')}; cursor: ${props => (props.isDisabled ? 'default' : 'pointer')};
font-size: ${props => props.fontSize}; font-size: ${props => props.fontSize};
color: ${props => props.fontColor}; color: ${props => props.fontColor};
transition: background-color 0.5s ease; transition: background-color, opacity 0.5s ease;
padding: 0.8em 2.2em; padding: 0.8em 2.2em;
border-radius: 6px; border-radius: 6px;
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25); box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
font-weight: 500; font-weight: 500;
outline: none;
font-family: ${props => props.fontFamily}; font-family: ${props => props.fontFamily};
width: ${props => props.width}; 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')}; border: ${props => (props.borderColor ? `1px solid ${props.borderColor}` : 'none')};
&:hover { &:hover {
background-color: ${props => (!props.isDisabled ? darken(0.1, props.backgroundColor) : '')}; background-color: ${props => (!props.isDisabled ? darken(0.1, props.backgroundColor) : '')};
@ -41,6 +42,13 @@ export const Button = styled(PlainButton)`
&:active { &:active {
background-color: ${props => (!props.isDisabled ? darken(0.2, props.backgroundColor) : '')}; 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 = { Button.defaultProps = {