aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/components/ui/button.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website/ts/components/ui/button.tsx')
-rw-r--r--packages/website/ts/components/ui/button.tsx105
1 files changed, 0 insertions, 105 deletions
diff --git a/packages/website/ts/components/ui/button.tsx b/packages/website/ts/components/ui/button.tsx
deleted file mode 100644
index 92f927843..000000000
--- a/packages/website/ts/components/ui/button.tsx
+++ /dev/null
@@ -1,105 +0,0 @@
-import { colors } from '@0x/react-shared';
-import { darken, saturate } from 'polished';
-import * as React from 'react';
-import { styled } from 'ts/style/theme';
-
-export interface ButtonProps {
- className?: string;
- fontSize?: string;
- fontColor?: string;
- fontFamily?: string;
- backgroundColor?: string;
- borderColor?: string;
- borderRadius?: string;
- width?: string;
- padding?: string;
- type?: string;
- isDisabled?: boolean;
- onClick?: (event: React.MouseEvent<HTMLElement>) => void;
- textAlign?: string;
-}
-
-const PlainButton: React.StatelessComponent<ButtonProps> = ({ children, isDisabled, onClick, type, className }) => (
- <button type={type} className={className} onClick={isDisabled ? undefined : onClick} disabled={isDisabled}>
- {children}
- </button>
-);
-
-export const Button = styled(PlainButton)`
- cursor: ${props => (props.isDisabled ? 'default' : 'pointer')};
- font-size: ${props => props.fontSize};
- color: ${props => props.fontColor};
- transition: background-color, opacity 0.5s ease;
- padding: ${props => props.padding};
- border-radius: ${props => props.borderRadius};
- font-weight: 500;
- outline: none;
- font-family: ${props => props.fontFamily};
- width: ${props => props.width};
- text-align: ${props => props.textAlign};
- 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) : '')} !important;
- }
- &:active {
- background-color: ${props => (!props.isDisabled ? darken(0.2, props.backgroundColor) : '')};
- }
- &:disabled {
- opacity: 0.5;
- }
- &:focus {
- background-color: ${props => saturate(0.2, props.backgroundColor)};
- }
-`;
-
-Button.defaultProps = {
- fontSize: '12px',
- borderRadius: '6px',
- backgroundColor: colors.white,
- width: 'auto',
- fontFamily: 'Roboto',
- isDisabled: false,
- padding: '0.8em 2.2em',
- textAlign: 'center',
-};
-
-Button.displayName = 'Button';
-
-type CallToActionType = 'light' | 'dark';
-
-export interface CallToActionProps {
- type?: CallToActionType;
- fontSize?: string;
- width?: string;
- padding?: string;
-}
-
-export const CallToAction: React.StatelessComponent<CallToActionProps> = ({
- children,
- type,
- fontSize,
- padding,
- width,
-}) => {
- const isLight = type === 'light';
- const backgroundColor = isLight ? colors.white : colors.mediumBlue;
- const fontColor = isLight ? colors.heroGrey : colors.white;
- return (
- <Button
- fontSize={fontSize}
- padding={padding}
- backgroundColor={backgroundColor}
- fontColor={fontColor}
- width={width}
- >
- {children}
- </Button>
- );
-};
-
-CallToAction.defaultProps = {
- type: 'dark',
- fontSize: '14px',
- padding: '0.9em 1.6em',
-};