aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/components/ui/button.tsx
blob: cb542a3865d06bce9569f00f4a737ba337577203 (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
import { colors } from '@0xproject/react-shared';
import { darken, grayscale } 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;
    width?: string;
    type?: string;
    isDisabled?: boolean;
    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
}

const PlainButton: React.StatelessComponent<ButtonProps> = ({ children, isDisabled, onClick, type, className }) => (
    <button type={type} className={className} onClick={isDisabled ? undefined : onClick}>
        {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 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;
    font-family: ${props => props.fontFamily};
    width: ${props => props.width};
    background-color: ${props => (props.isDisabled ? grayscale(props.backgroundColor) : props.backgroundColor)};
    border: ${props => (props.borderColor ? `1px solid ${props.borderColor}` : 'none')};
    &:hover {
        background-color: ${props => (!props.isDisabled ? darken(0.1, props.backgroundColor) : '')};
    }
    &:active {
        background-color: ${props => (!props.isDisabled ? darken(0.2, props.backgroundColor) : '')};
    }
`;

Button.defaultProps = {
    fontSize: '12px',
    backgroundColor: colors.white,
    width: 'auto',
    fontFamily: 'Roboto',
    isDisabled: false,
};

Button.displayName = 'Button';

type CallToActionType = 'light' | 'dark';

export interface CallToActionProps {
    type?: CallToActionType;
    fontSize?: string;
    width?: string;
}

export const CallToAction: React.StatelessComponent<CallToActionProps> = ({ children, type, fontSize, width }) => {
    const isLight = type === 'light';
    const backgroundColor = isLight ? colors.white : colors.heroGrey;
    const fontColor = isLight ? colors.heroGrey : colors.white;
    const borderColor = isLight ? undefined : colors.white;
    return (
        <Button
            fontSize={fontSize}
            backgroundColor={backgroundColor}
            fontColor={fontColor}
            width={width}
            borderColor={borderColor}
        >
            {children}
        </Button>
    );
};

CallToAction.defaultProps = {
    type: 'dark',
};