import styled, { css } from 'styled-components'; import { color } from '../../constants/style'; const align: {[index: string]: string} = { left: 'flex-start', center: 'center', right: 'flex-end', }; const staticStyles = css` border-width: 0; border-radius: 4px; box-sizing: border-box; font-size: 16px; font-style: normal; transition: all .3s linear; cursor: pointer; outline: none; padding: 5px 20px; `; const theme: {[index: string]: any} = { default: css` color: black; background-color: transparent; border: 1.5px solid transparent; &:hover { background-color: ${color['soft-blue']}; } &:focus, &:active { background-color: ${color['soft-blue']}; } `, primary: css` color: white; background-color: ${color.primary}; border: 1.5px solid ${color.primary}; &:hover { background-color: ${color['french-blue']}; border: 1.5px solid ${color['french-blue']}; } &:focus, &:active { background-color: ${color['french-blue']}; border: 1.5px solid ${color['french-blue']}; } `, 'primary-hollow': css` color: black; background-color: white; border: 1.5px solid ${color.primary}; &:hover { background-color: ${color['primary-light']}; } &:focus, &:active { background-color: ${color['primary-light']}; } `, 'default-hollow': css` color: black; background-color: white; border: 1.5px solid ${color.black56}; &:hover { background-color: ${color.black38}; } &:focus, &:active { background-color: ${color.black38}; } `, link: css` color: ${color.primary}; background-color: transparent; border: none; text-decoration: underline; padding: 5px 0; &:hover { } &:focus, &:active { } `, 'danger-link': css` color: ${color.error}; background-color: transparent; border: none; text-decoration: underline; padding: 5px 0; &:hover { } &:focus, &:active { } `, }; export const NormalButton = styled('button')<{appearance?: string; shouldFitContainer?: boolean; align?: string}>` ${staticStyles} ${props => theme[props.appearance || 'default']}; ${props => (props.shouldFitContainer ? css` width: 100%; ` : null)} display: inline-flex; justify-content: ${props => align[props.align || 'center']}; align-items: center; `; export const DisableButton = styled.button` ${staticStyles} color: ${color.black38}; background-color: #eeeff3; cursor: not-allowed; `;