diff options
| -rw-r--r-- | packages/instant/package.json | 1 | ||||
| -rw-r--r-- | packages/instant/src/components/ui/button.tsx | 68 | ||||
| -rw-r--r-- | packages/instant/src/components/ui/text.tsx | 75 | ||||
| -rw-r--r-- | packages/instant/src/components/zero_ex_instant.tsx | 3 | ||||
| -rw-r--r-- | packages/instant/src/style/fonts.ts | 10 | ||||
| -rw-r--r-- | packages/instant/src/style/theme.ts | 23 | ||||
| -rw-r--r-- | yarn.lock | 6 |
7 files changed, 172 insertions, 14 deletions
diff --git a/packages/instant/package.json b/packages/instant/package.json index 2a1c05f2a..57b094626 100644 --- a/packages/instant/package.json +++ b/packages/instant/package.json @@ -50,6 +50,7 @@ "@0xproject/web3-wrapper": "^3.0.1", "ethereum-types": "^1.0.8", "lodash": "^4.17.10", + "polished": "^2.2.0", "react": "^16.5.2", "react-dom": "^16.5.2", "react-redux": "^5.0.7", diff --git a/packages/instant/src/components/ui/button.tsx b/packages/instant/src/components/ui/button.tsx new file mode 100644 index 000000000..ec0a87345 --- /dev/null +++ b/packages/instant/src/components/ui/button.tsx @@ -0,0 +1,68 @@ +import { darken, saturate } from 'polished'; +import * as React from 'react'; + +import { ColorOption, styled } from '../../style/theme'; + +export interface ButtonProps { + fontColor: ColorOption; + backgroundColor: ColorOption; + borderColor?: ColorOption; + fontSize?: string; + fontFamily?: string; + width?: string; + padding?: string; + type?: string; + isDisabled?: boolean; + onClick?: (event: React.MouseEvent<HTMLElement>) => void; + className?: string; +} + +const PlainButton: React.StatelessComponent<ButtonProps> = ({ children, isDisabled, onClick, type, className }) => ( + <button type={type} className={className} onClick={isDisabled ? undefined : onClick} disabled={isDisabled}> + {children} + </button> +); + +const darkenOnHoverAmount = 0.1; +const darkenOnActiveAmount = 0.2; +const saturateOnFocusAmount = 0.2; +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: 6px; + font-weight: 500; + outline: none; + font-family: ${props => props.fontFamily}; + width: ${props => props.width}; + background-color: ${props => props.backgroundColor}; + border: ${props => (props.borderColor ? `1px solid ${props.theme[props.borderColor]}` : 'none')}; + &:hover { + background-color: ${props => + !props.isDisabled ? darken(darkenOnHoverAmount, props.theme[props.backgroundColor]) : ''} !important; + } + &:active { + background-color: ${props => + !props.isDisabled ? darken(darkenOnActiveAmount, props.theme[props.backgroundColor]) : ''}; + } + &:disabled { + opacity: 0.5; + } + &:focus { + background-color: ${props => saturate(saturateOnFocusAmount, props.theme[props.backgroundColor])}; + } +`; + +Button.defaultProps = { + fontSize: '12px', + fontColor: ColorOption.white, + backgroundColor: ColorOption.primaryColor, + width: 'auto', + fontFamily: 'Inter UI', + isDisabled: false, + padding: '0.8em 2.2em', +}; + +Button.displayName = 'Button'; diff --git a/packages/instant/src/components/ui/text.tsx b/packages/instant/src/components/ui/text.tsx new file mode 100644 index 000000000..a4b9d60d7 --- /dev/null +++ b/packages/instant/src/components/ui/text.tsx @@ -0,0 +1,75 @@ +import { darken } from 'polished'; +import * as React from 'react'; + +import { ColorOption, styled } from '../../style/theme'; + +export type TextTag = 'p' | 'div' | 'span' | 'label' | 'h1' | 'h2' | 'h3' | 'h4' | 'i'; + +export interface TextProps { + fontColor: ColorOption; + fontFamily: string; + fontStyle: string; + fontSize: string; + lineHeight: string; + className?: string; + Tag?: TextTag; + minHeight?: string; + center?: boolean; + fontWeight?: number | string; + textDecorationLine?: string; + onClick?: (event: React.MouseEvent<HTMLElement>) => void; + hoverColor?: string; + noWrap?: boolean; + display?: string; +} + +const PlainText: React.StatelessComponent<TextProps> = ({ children, className, onClick, Tag }) => ( + <Tag className={className} onClick={onClick}> + {children} + </Tag> +); + +const darkenOnHoverAmount = 0.3; +export const Text = styled(PlainText)` + font-family: ${props => props.fontFamily}; + font-style: ${props => props.fontStyle}; + font-weight: ${props => props.fontWeight}; + font-size: ${props => props.fontSize}; + text-decoration-line: ${props => props.textDecorationLine}; + ${props => (props.lineHeight ? `line-height: ${props.lineHeight}` : '')}; + ${props => (props.center ? 'text-align: center' : '')}; + color: ${props => props.theme[props.fontColor]}; + ${props => (props.minHeight ? `min-height: ${props.minHeight}` : '')}; + ${props => (props.onClick ? 'cursor: pointer' : '')}; + transition: color 0.5s ease; + ${props => (props.noWrap ? 'white-space: nowrap' : '')}; + ${props => (props.display ? `display: ${props.display}` : '')}; + &:hover { + ${props => (props.onClick ? `color: ${props.hoverColor || darken(darkenOnHoverAmount, props.fontColor)}` : '')}; + } +`; + +Text.defaultProps = { + fontFamily: 'Inter UI', + fontStyle: 'normal', + fontWeight: 400, + fontColor: ColorOption.black, + fontSize: '15px', + lineHeight: '1.5em', + textDecorationLine: 'none', + Tag: 'div', + noWrap: false, +}; + +Text.displayName = 'Text'; + +export const Title: React.StatelessComponent<TextProps> = props => <Text {...props} />; + +Title.defaultProps = { + Tag: 'h2', + fontSize: '20px', + fontWeight: 600, + fontColor: ColorOption.primaryColor, +}; + +Title.displayName = 'Title'; diff --git a/packages/instant/src/components/zero_ex_instant.tsx b/packages/instant/src/components/zero_ex_instant.tsx index 9ba390be9..99f9bb3ba 100644 --- a/packages/instant/src/components/zero_ex_instant.tsx +++ b/packages/instant/src/components/zero_ex_instant.tsx @@ -2,8 +2,11 @@ import * as React from 'react'; import { Provider } from 'react-redux'; import { store } from '../redux/store'; +import { fonts } from '../style/fonts'; import { theme, ThemeProvider } from '../style/theme'; +fonts.include(); + export interface ZeroExInstantProps {} export const ZeroExInstant: React.StatelessComponent<ZeroExInstantProps> = () => ( diff --git a/packages/instant/src/style/fonts.ts b/packages/instant/src/style/fonts.ts new file mode 100644 index 000000000..975a30a61 --- /dev/null +++ b/packages/instant/src/style/fonts.ts @@ -0,0 +1,10 @@ +import { injectGlobal } from './theme'; + +export const fonts = { + include: () => { + // Inject the inter-ui font into the page + return injectGlobal` + @import url('https://rsms.me/inter/inter-ui.css'); + `; + }, +}; diff --git a/packages/instant/src/style/theme.ts b/packages/instant/src/style/theme.ts index 0af233db2..3bced9071 100644 --- a/packages/instant/src/style/theme.ts +++ b/packages/instant/src/style/theme.ts @@ -6,29 +6,24 @@ const { injectGlobal, keyframes, ThemeProvider, -} = styledComponents as styledComponents.ThemedStyledComponentsModule<IThemeInterface>; +} = styledComponents as styledComponents.ThemedStyledComponentsModule<Theme>; -// Inject the inter-ui font into the page -styledComponents.injectGlobal` - @import url('https://rsms.me/inter/inter-ui.css'); -`; +export type Theme = { [key in ColorOption]: string }; -export interface IThemeInterface { - primaryColor: string; - black: string; - white: string; - darkGrey: string; - lightGrey: string; - fontFamily: string; +export enum ColorOption { + primaryColor = 'primaryColor', + black = 'black', + lightGrey = 'lightGrey', + darkGrey = 'darkGrey', + white = 'white', } -export const theme: IThemeInterface = { +export const theme: Theme = { primaryColor: '#512D80', black: 'black', lightGrey: '#999999', darkGrey: '#333333', white: 'white', - fontFamily: 'Inter UI, sans-serif', }; export { styled, css, injectGlobal, keyframes, ThemeProvider }; @@ -11785,6 +11785,12 @@ polished@^1.9.3: version "1.9.3" resolved "https://registry.npmjs.org/polished/-/polished-1.9.3.tgz#d61b8a0c4624efe31e2583ff24a358932b6b75e1" +polished@^2.2.0: + version "2.2.0" + resolved "http://localhost:4873/polished/-/polished-2.2.0.tgz#5ca7e178cc5352bd7fd1efc45342f7c6d59cc982" + dependencies: + "@babel/runtime" "^7.0.0" + popper.js@1.14.3, popper.js@^1.14.1: version "1.14.3" resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.14.3.tgz#1438f98d046acf7b4d78cd502bf418ac64d4f095" |