From 1cc06dd9e6cf39edf20ca6b4f151664f9eb79a86 Mon Sep 17 00:00:00 2001 From: Fred Carlsen Date: Wed, 28 Nov 2018 15:18:14 +0100 Subject: Fix type error in Text component --- packages/website/ts/components/ui/text.tsx | 1 + 1 file changed, 1 insertion(+) (limited to 'packages/website/ts/components') diff --git a/packages/website/ts/components/ui/text.tsx b/packages/website/ts/components/ui/text.tsx index c13e21913..2fe2a8c79 100644 --- a/packages/website/ts/components/ui/text.tsx +++ b/packages/website/ts/components/ui/text.tsx @@ -7,6 +7,7 @@ export type TextTag = 'p' | 'div' | 'span' | 'label' | 'h1' | 'h2' | 'h3' | 'h4' export interface TextProps { className?: string; + children?: any; Tag?: TextTag; fontSize?: string; fontFamily?: string; -- cgit From 9ebb0960254f1dcfb9513cbc6203840a87ee60e4 Mon Sep 17 00:00:00 2001 From: fragosti Date: Thu, 29 Nov 2018 15:57:35 -0800 Subject: feat: add Select component and use for configurator --- packages/website/ts/components/ui/container.tsx | 33 ++++- packages/website/ts/components/ui/select.tsx | 168 ++++++++++++++++++++++++ 2 files changed, 199 insertions(+), 2 deletions(-) create mode 100644 packages/website/ts/components/ui/select.tsx (limited to 'packages/website/ts/components') diff --git a/packages/website/ts/components/ui/container.tsx b/packages/website/ts/components/ui/container.tsx index 7eab2a50f..cd0ed9986 100644 --- a/packages/website/ts/components/ui/container.tsx +++ b/packages/website/ts/components/ui/container.tsx @@ -1,6 +1,9 @@ import { TextAlignProperty } from 'csstype'; +import { darken } from 'polished'; import * as React from 'react'; +import { styled } from 'ts/style/theme'; + type StringOrNum = string | number; export type ContainerTag = 'div' | 'span'; @@ -17,10 +20,13 @@ export interface ContainerProps { paddingLeft?: StringOrNum; backgroundColor?: string; background?: string; + border?: string; + borderTop?: string; borderRadius?: StringOrNum; borderBottomLeftRadius?: StringOrNum; borderBottomRightRadius?: StringOrNum; borderBottom?: StringOrNum; + borderColor?: string; maxWidth?: StringOrNum; maxHeight?: StringOrNum; width?: StringOrNum; @@ -42,10 +48,23 @@ export interface ContainerProps { id?: string; onClick?: (event: React.MouseEvent) => void; overflowX?: 'scroll' | 'hidden' | 'auto' | 'visible'; + shouldDarkenOnHover?: boolean; + shouldAddBoxShadowOnHover?: boolean; } -export const Container: React.StatelessComponent = props => { - const { children, className, Tag, isHidden, id, onClick, ...style } = props; +export const PlainContainer: React.StatelessComponent = props => { + const { + children, + className, + Tag, + isHidden, + id, + onClick, + shouldDarkenOnHover, + shouldAddBoxShadowOnHover, + // tslint:disable-next-line:trailing-comma + ...style + } = props; const visibility = isHidden ? 'hidden' : undefined; return ( @@ -54,6 +73,16 @@ export const Container: React.StatelessComponent = props => { ); }; +export const Container = styled(PlainContainer)` + &:hover { + ${props => + props.shouldDarkenOnHover + ? `background-color: ${props.backgroundColor ? darken(0.05, props.backgroundColor) : 'none'} !important` + : ''}; + ${props => (props.shouldAddBoxShadowOnHover ? 'box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1)' : '')}; + } +`; + Container.defaultProps = { Tag: 'div', }; diff --git a/packages/website/ts/components/ui/select.tsx b/packages/website/ts/components/ui/select.tsx new file mode 100644 index 000000000..abf202c67 --- /dev/null +++ b/packages/website/ts/components/ui/select.tsx @@ -0,0 +1,168 @@ +import { colors } from '@0x/react-shared'; +import * as _ from 'lodash'; +import * as React from 'react'; + +import { zIndex } from 'ts/style/z_index'; + +import { Container } from './container'; +import { Overlay } from './overlay'; +import { Text } from './text'; + +export interface SelectItemConfig { + text: string; + onClick?: () => void; +} + +export interface SelectProps { + value: string; + label?: string; + items: SelectItemConfig[]; + onOpen?: () => void; + border?: string; + fontSize?: string; + iconSize?: number; + textColor?: string; + labelColor?: string; + backgroundColor?: string; +} + +export interface SelectState { + isOpen: boolean; +} + +export class Select extends React.Component { + public static defaultProps = { + items: [] as SelectItemConfig[], + textColor: colors.black, + backgroundColor: colors.white, + fontSize: '16px', + iconSize: 25, + }; + public state: SelectState = { + isOpen: false, + }; + public render(): React.ReactNode { + const { value, label, items, border, textColor, labelColor, backgroundColor, fontSize, iconSize } = this.props; + const { isOpen } = this.state; + const hasItems = !_.isEmpty(items); + const borderRadius = isOpen ? '4px 4px 0px 0px' : '4px'; + return ( + + {isOpen && ( + + )} + + + + + {value} + + + {label && ( + + {label} + + )} + {hasItems && ( + + + + )} + + + + {isOpen && ( + + {_.map(items, (item, index) => ( + + ))} + + )} + + + ); + } + private readonly _handleDropdownClick = (): void => { + if (_.isEmpty(this.props.items)) { + return; + } + const isOpen = !this.state.isOpen; + this.setState({ + isOpen, + }); + + if (isOpen && this.props.onOpen) { + this.props.onOpen(); + } + }; + private readonly _closeDropdown = (): void => { + this.setState({ + isOpen: false, + }); + }; +} + +export interface SelectItemProps extends SelectItemConfig { + text: string; + onClick?: () => void; + isLast: boolean; + backgroundColor?: string; + border?: string; + textColor?: string; + fontSize?: string; +} + +export const SelectItem: React.StatelessComponent = ({ + text, + onClick, + isLast, + border, + backgroundColor, + textColor, + fontSize, +}) => ( + + + {text} + + +); -- cgit From ec24bf84019ef16c32149040d096e436442828b8 Mon Sep 17 00:00:00 2001 From: fragosti Date: Thu, 29 Nov 2018 17:21:53 -0800 Subject: feat: add MultiSelect component skeleton --- packages/website/ts/components/ui/multi_select.tsx | 57 ++++++++++++++++++++++ 1 file changed, 57 insertions(+) create mode 100644 packages/website/ts/components/ui/multi_select.tsx (limited to 'packages/website/ts/components') diff --git a/packages/website/ts/components/ui/multi_select.tsx b/packages/website/ts/components/ui/multi_select.tsx new file mode 100644 index 000000000..329e76bd5 --- /dev/null +++ b/packages/website/ts/components/ui/multi_select.tsx @@ -0,0 +1,57 @@ +import { colors } from '@0x/react-shared'; +import * as _ from 'lodash'; +import * as React from 'react'; + +import { zIndex } from 'ts/style/z_index'; + +import { Container } from './container'; +import { Overlay } from './overlay'; +import { Text } from './text'; + +export interface MultiSelectItemConfig { + value: string; + displayText: string; + onClick?: () => void; +} + +export interface MultiSelectProps { + selectedValues: string[]; + items: MultiSelectItemConfig[]; + backgroundColor?: string; + textColor?: string; +} + +export class MultiSelect extends React.Component { + public static defaultProps = { + backgroundColor: colors.white, + textColor: colors.darkGrey, + }; + public render(): React.ReactNode { + const { items, backgroundColor } = this.props; + return ( + + {_.map(items, item => ( + + ))} + + ); + } +} + +export interface MultiSelectItemProps { + displayText: string; + isSelected?: boolean; + onClick?: () => void; +} + +export const MultiSelectItem: React.StatelessComponent = ({ + displayText, + isSelected, + onClick, +}) => ( + + + {displayText} + + +); -- cgit From cc235aac3866c44a7b27bb0343390224a02b8c55 Mon Sep 17 00:00:00 2001 From: fragosti Date: Thu, 29 Nov 2018 18:42:25 -0800 Subject: feat: implement available token fetching --- packages/website/ts/components/ui/multi_select.tsx | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) (limited to 'packages/website/ts/components') diff --git a/packages/website/ts/components/ui/multi_select.tsx b/packages/website/ts/components/ui/multi_select.tsx index 329e76bd5..bf80443af 100644 --- a/packages/website/ts/components/ui/multi_select.tsx +++ b/packages/website/ts/components/ui/multi_select.tsx @@ -10,7 +10,7 @@ import { Text } from './text'; export interface MultiSelectItemConfig { value: string; - displayText: string; + displayText: React.ReactNode; onClick?: () => void; } @@ -27,11 +27,16 @@ export class MultiSelect extends React.Component { textColor: colors.darkGrey, }; public render(): React.ReactNode { - const { items, backgroundColor } = this.props; + const { items, backgroundColor, selectedValues } = this.props; return ( {_.map(items, item => ( - + ))} ); @@ -39,7 +44,7 @@ export class MultiSelect extends React.Component { } export interface MultiSelectItemProps { - displayText: string; + displayText: React.ReactNode; isSelected?: boolean; onClick?: () => void; } -- cgit From a849af8a48ac9346ff0da92b4c643cd66dfd855b Mon Sep 17 00:00:00 2001 From: fragosti Date: Fri, 30 Nov 2018 10:25:36 -0800 Subject: feat: implement multi token select component --- packages/website/ts/components/ui/check_mark.tsx | 31 ++++++++++++++++++ packages/website/ts/components/ui/container.tsx | 6 ++++ packages/website/ts/components/ui/multi_select.tsx | 38 ++++++++++++---------- packages/website/ts/components/ui/select.tsx | 2 ++ 4 files changed, 60 insertions(+), 17 deletions(-) create mode 100644 packages/website/ts/components/ui/check_mark.tsx (limited to 'packages/website/ts/components') diff --git a/packages/website/ts/components/ui/check_mark.tsx b/packages/website/ts/components/ui/check_mark.tsx new file mode 100644 index 000000000..86e427c8b --- /dev/null +++ b/packages/website/ts/components/ui/check_mark.tsx @@ -0,0 +1,31 @@ +import * as React from 'react'; + +import { colors } from '@0x/react-shared'; + +export interface CheckMarkProps { + color?: string; + isChecked?: boolean; +} + +export const CheckMark: React.StatelessComponent = ({ color, isChecked }) => ( + + + + +); + +CheckMark.displayName = 'Check'; + +CheckMark.defaultProps = { + color: colors.mediumBlue, +}; diff --git a/packages/website/ts/components/ui/container.tsx b/packages/website/ts/components/ui/container.tsx index cd0ed9986..4b76ce8be 100644 --- a/packages/website/ts/components/ui/container.tsx +++ b/packages/website/ts/components/ui/container.tsx @@ -9,6 +9,7 @@ type StringOrNum = string | number; export type ContainerTag = 'div' | 'span'; export interface ContainerProps { + margin?: string; marginTop?: StringOrNum; marginBottom?: StringOrNum; marginRight?: StringOrNum; @@ -48,7 +49,9 @@ export interface ContainerProps { id?: string; onClick?: (event: React.MouseEvent) => void; overflowX?: 'scroll' | 'hidden' | 'auto' | 'visible'; + overflowY?: 'scroll' | 'hidden' | 'auto' | 'visible'; shouldDarkenOnHover?: boolean; + hasBoxShadow?: boolean; shouldAddBoxShadowOnHover?: boolean; } @@ -62,6 +65,7 @@ export const PlainContainer: React.StatelessComponent = props => onClick, shouldDarkenOnHover, shouldAddBoxShadowOnHover, + hasBoxShadow, // tslint:disable-next-line:trailing-comma ...style } = props; @@ -74,6 +78,8 @@ export const PlainContainer: React.StatelessComponent = props => }; export const Container = styled(PlainContainer)` + box-sizing: border-box; + ${props => (props.hasBoxShadow ? `box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1)` : '')}; &:hover { ${props => props.shouldDarkenOnHover diff --git a/packages/website/ts/components/ui/multi_select.tsx b/packages/website/ts/components/ui/multi_select.tsx index bf80443af..2cf44cae1 100644 --- a/packages/website/ts/components/ui/multi_select.tsx +++ b/packages/website/ts/components/ui/multi_select.tsx @@ -2,40 +2,42 @@ import { colors } from '@0x/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; -import { zIndex } from 'ts/style/z_index'; - import { Container } from './container'; -import { Overlay } from './overlay'; -import { Text } from './text'; export interface MultiSelectItemConfig { value: string; - displayText: React.ReactNode; + renderItemContent: (isSelected: boolean) => React.ReactNode; onClick?: () => void; } export interface MultiSelectProps { - selectedValues: string[]; + selectedValues?: string[]; items: MultiSelectItemConfig[]; backgroundColor?: string; - textColor?: string; + height?: string; } export class MultiSelect extends React.Component { public static defaultProps = { backgroundColor: colors.white, - textColor: colors.darkGrey, }; public render(): React.ReactNode { - const { items, backgroundColor, selectedValues } = this.props; + const { items, backgroundColor, selectedValues, height } = this.props; return ( - + {_.map(items, item => ( ))} @@ -44,19 +46,21 @@ export class MultiSelect extends React.Component { } export interface MultiSelectItemProps { - displayText: React.ReactNode; + renderItemContent: (isSelected: boolean) => React.ReactNode; isSelected?: boolean; onClick?: () => void; + backgroundColor?: string; } export const MultiSelectItem: React.StatelessComponent = ({ - displayText, + renderItemContent, isSelected, onClick, + backgroundColor, }) => ( - - - {displayText} + + + {renderItemContent(isSelected)} ); diff --git a/packages/website/ts/components/ui/select.tsx b/packages/website/ts/components/ui/select.tsx index abf202c67..743b082b0 100644 --- a/packages/website/ts/components/ui/select.tsx +++ b/packages/website/ts/components/ui/select.tsx @@ -62,6 +62,7 @@ export class Select extends React.Component { cursor={hasItems ? 'pointer' : undefined} onClick={this._handleDropdownClick} borderRadius={borderRadius} + hasBoxShadow={isOpen} border={border} backgroundColor={backgroundColor} padding="0.8em" @@ -94,6 +95,7 @@ export class Select extends React.Component { position="absolute" onClick={this._closeDropdown} zIndex={zIndex.aboveOverlay} + hasBoxShadow={true} > {_.map(items, (item, index) => ( Date: Mon, 3 Dec 2018 12:24:37 -0800 Subject: feat: implement basic feeRecipient address in config generator --- packages/website/ts/components/ui/input.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) (limited to 'packages/website/ts/components') diff --git a/packages/website/ts/components/ui/input.tsx b/packages/website/ts/components/ui/input.tsx index e5f4f6c70..1f56c814f 100644 --- a/packages/website/ts/components/ui/input.tsx +++ b/packages/website/ts/components/ui/input.tsx @@ -8,6 +8,7 @@ export interface InputProps { width?: string; fontSize?: string; fontColor?: string; + border?: string; placeholderColor?: string; placeholder?: string; backgroundColor?: string; @@ -23,9 +24,11 @@ export const Input = styled(PlainInput)` width: ${props => props.width}; padding: 0.8em 1.2em; border-radius: 3px; + box-sizing: border-box; font-family: 'Roboto Mono'; color: ${props => props.fontColor}; - border: none; + border: ${props => props.border}; + outline: none; background-color: ${props => props.backgroundColor}; &::placeholder { color: ${props => props.placeholderColor}; @@ -38,6 +41,7 @@ Input.defaultProps = { fontColor: colors.darkestGrey, placeholderColor: colors.darkGrey, fontSize: '12px', + border: 'none', }; Input.displayName = 'Input'; -- cgit From 7a6339ae38d424508a9f41c818b20dd8b8f09dce Mon Sep 17 00:00:00 2001 From: fragosti Date: Mon, 3 Dec 2018 17:37:32 -0800 Subject: polish: make configurator inputs look more like mocks --- packages/website/ts/components/ui/input.tsx | 4 +++- packages/website/ts/components/ui/select.tsx | 4 ++-- 2 files changed, 5 insertions(+), 3 deletions(-) (limited to 'packages/website/ts/components') diff --git a/packages/website/ts/components/ui/input.tsx b/packages/website/ts/components/ui/input.tsx index 1f56c814f..d21b9fd0e 100644 --- a/packages/website/ts/components/ui/input.tsx +++ b/packages/website/ts/components/ui/input.tsx @@ -9,6 +9,7 @@ export interface InputProps { fontSize?: string; fontColor?: string; border?: string; + padding?: string; placeholderColor?: string; placeholder?: string; backgroundColor?: string; @@ -22,7 +23,7 @@ const PlainInput: React.StatelessComponent = ({ value, className, pl export const Input = styled(PlainInput)` font-size: ${props => props.fontSize}; width: ${props => props.width}; - padding: 0.8em 1.2em; + padding: ${props => props.padding}; border-radius: 3px; box-sizing: border-box; font-family: 'Roboto Mono'; @@ -42,6 +43,7 @@ Input.defaultProps = { placeholderColor: colors.darkGrey, fontSize: '12px', border: 'none', + padding: '0.8em 1.2em', }; Input.displayName = 'Input'; diff --git a/packages/website/ts/components/ui/select.tsx b/packages/website/ts/components/ui/select.tsx index 743b082b0..e4fb50f59 100644 --- a/packages/website/ts/components/ui/select.tsx +++ b/packages/website/ts/components/ui/select.tsx @@ -65,7 +65,7 @@ export class Select extends React.Component { hasBoxShadow={isOpen} border={border} backgroundColor={backgroundColor} - padding="0.8em" + padding="0.5em 0.8em" width="100%" > @@ -79,7 +79,7 @@ export class Select extends React.Component { )} {hasItems && ( - + Date: Tue, 4 Dec 2018 11:26:51 -0800 Subject: fix: make select box-shadow darker --- packages/website/ts/components/ui/container.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) (limited to 'packages/website/ts/components') diff --git a/packages/website/ts/components/ui/container.tsx b/packages/website/ts/components/ui/container.tsx index 4b76ce8be..c2ae9ad9c 100644 --- a/packages/website/ts/components/ui/container.tsx +++ b/packages/website/ts/components/ui/container.tsx @@ -77,15 +77,17 @@ export const PlainContainer: React.StatelessComponent = props => ); }; +const BOX_SHADOW = '0px 3px 10px rgba(0, 0, 0, 0.3)'; + export const Container = styled(PlainContainer)` box-sizing: border-box; - ${props => (props.hasBoxShadow ? `box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1)` : '')}; + ${props => (props.hasBoxShadow ? `box-shadow: ${BOX_SHADOW}` : '')}; &:hover { ${props => props.shouldDarkenOnHover ? `background-color: ${props.backgroundColor ? darken(0.05, props.backgroundColor) : 'none'} !important` : ''}; - ${props => (props.shouldAddBoxShadowOnHover ? 'box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1)' : '')}; + ${props => (props.shouldAddBoxShadowOnHover ? `box-shadow: ${BOX_SHADOW}` : '')}; } `; -- cgit From 2d6c46b83c67401fcae01e2e98e9755463a3c71a Mon Sep 17 00:00:00 2001 From: fragosti Date: Tue, 4 Dec 2018 14:30:31 -0800 Subject: feat: add copy code feature --- packages/website/ts/components/ui/container.tsx | 1 + 1 file changed, 1 insertion(+) (limited to 'packages/website/ts/components') diff --git a/packages/website/ts/components/ui/container.tsx b/packages/website/ts/components/ui/container.tsx index c2ae9ad9c..ae00851e5 100644 --- a/packages/website/ts/components/ui/container.tsx +++ b/packages/website/ts/components/ui/container.tsx @@ -44,6 +44,7 @@ export interface ContainerProps { right?: string; bottom?: string; zIndex?: number; + float?: 'right' | 'left'; Tag?: ContainerTag; cursor?: string; id?: string; -- cgit From b3038787ea0bf82514d165b49cef81c2a0c7a5fa Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Wed, 5 Dec 2018 11:46:28 +0000 Subject: Replace Rocket.chat with Discord --- packages/website/ts/components/footer.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'packages/website/ts/components') diff --git a/packages/website/ts/components/footer.tsx b/packages/website/ts/components/footer.tsx index e10005a0a..57071ee29 100644 --- a/packages/website/ts/components/footer.tsx +++ b/packages/website/ts/components/footer.tsx @@ -71,7 +71,7 @@ export class Footer extends React.Component { ], [Key.Community]: [ { - title: this.props.translate.get(Key.RocketChat, Deco.Cap), + title: this.props.translate.get(Key.Discord, Deco.Cap), to: constants.URL_ZEROEX_CHAT, shouldOpenInNewTab: true, }, @@ -177,7 +177,7 @@ export class Footer extends React.Component { } private _renderMenuItem(link: ALink): React.ReactNode { const titleToIcon: { [title: string]: string } = { - [this.props.translate.get(Key.RocketChat, Deco.Cap)]: 'rocketchat.png', + [this.props.translate.get(Key.Discord, Deco.Cap)]: 'rocketchat.png', [this.props.translate.get(Key.Blog, Deco.Cap)]: 'medium.png', Twitter: 'twitter.png', Reddit: 'reddit.png', -- cgit From fc5f0c9863859283cca02ae06df1dea6fb2867e4 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Thu, 6 Dec 2018 13:28:03 +0000 Subject: Switch out RocketChat icon with Discord icon --- packages/website/ts/components/footer.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages/website/ts/components') diff --git a/packages/website/ts/components/footer.tsx b/packages/website/ts/components/footer.tsx index 57071ee29..1098d6d0b 100644 --- a/packages/website/ts/components/footer.tsx +++ b/packages/website/ts/components/footer.tsx @@ -177,7 +177,7 @@ export class Footer extends React.Component { } private _renderMenuItem(link: ALink): React.ReactNode { const titleToIcon: { [title: string]: string } = { - [this.props.translate.get(Key.Discord, Deco.Cap)]: 'rocketchat.png', + [this.props.translate.get(Key.Discord, Deco.Cap)]: 'discord.png', [this.props.translate.get(Key.Blog, Deco.Cap)]: 'medium.png', Twitter: 'twitter.png', Reddit: 'reddit.png', -- cgit From 075fa315e7c409ea33f2e9435d8ba25d61c2f41e Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Thu, 6 Dec 2018 14:10:35 +0000 Subject: Switch out whitepaper with 0x protocol specification --- packages/website/ts/components/dropdowns/developers_drop_down.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'packages/website/ts/components') diff --git a/packages/website/ts/components/dropdowns/developers_drop_down.tsx b/packages/website/ts/components/dropdowns/developers_drop_down.tsx index b8a35fab0..079132f2b 100644 --- a/packages/website/ts/components/dropdowns/developers_drop_down.tsx +++ b/packages/website/ts/components/dropdowns/developers_drop_down.tsx @@ -53,8 +53,8 @@ const usefulLinksToLinkInfo: ALink[] = [ shouldOpenInNewTab: true, }, { - title: Key.Whitepaper, - to: WebsitePaths.Whitepaper, + title: Key.ProtocolSpecification, + to: constants.URL_PROTOCOL_SPECIFICATION, shouldOpenInNewTab: true, }, ]; -- cgit From 51b1cab72a80b8ef05038ecf392d9c72b8d4294e Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Fri, 14 Dec 2018 14:46:05 -0800 Subject: fix(website) replace 0xproject.com with 0x.org --- packages/website/ts/components/eth_wrappers.tsx | 2 +- packages/website/ts/components/fill_warning_dialog.tsx | 2 +- packages/website/ts/components/footer.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) (limited to 'packages/website/ts/components') diff --git a/packages/website/ts/components/eth_wrappers.tsx b/packages/website/ts/components/eth_wrappers.tsx index 4a9f3b2fe..61daa1103 100644 --- a/packages/website/ts/components/eth_wrappers.tsx +++ b/packages/website/ts/components/eth_wrappers.tsx @@ -209,7 +209,7 @@ export class EthWrappers extends React.Component
The{' '} - + canonical WETH {' '} contract is updated when necessary. Unwrap outdated WETH in order to
 retrieve your ETH and move diff --git a/packages/website/ts/components/fill_warning_dialog.tsx b/packages/website/ts/components/fill_warning_dialog.tsx index 430abd013..feb72c2ee 100644 --- a/packages/website/ts/components/fill_warning_dialog.tsx +++ b/packages/website/ts/components/fill_warning_dialog.tsx @@ -35,7 +35,7 @@ export const FillWarningDialog = (props: FillWarningDialogProps) => {
At least one of the tokens in this order was not found in the token registry smart contract and may be counterfeit. It is your responsibility to verify the token addresses on Etherscan ( - + See this how-to guide ) before filling an order. This action may result in the loss of funds.
diff --git a/packages/website/ts/components/footer.tsx b/packages/website/ts/components/footer.tsx index 1098d6d0b..6366bf4ea 100644 --- a/packages/website/ts/components/footer.tsx +++ b/packages/website/ts/components/footer.tsx @@ -107,7 +107,7 @@ export class Footer extends React.Component { }, { title: this.props.translate.get(Key.Contact, Deco.Cap), - to: 'mailto:team@0xproject.com', + to: 'mailto:team@0x.org', shouldOpenInNewTab: true, }, ], -- cgit From c4036d7d0f0b0aa2491b67ea882365858574d440 Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Mon, 17 Dec 2018 12:23:08 -0800 Subject: fix(website): update Animation component for styled components v4 --- .../ts/components/onboarding/onboarding_flow.tsx | 4 +-- packages/website/ts/components/ui/animation.tsx | 42 ---------------------- .../ui/ease_up_from_bottom_animation.tsx | 32 +++++++++++++++++ 3 files changed, 34 insertions(+), 44 deletions(-) delete mode 100644 packages/website/ts/components/ui/animation.tsx create mode 100644 packages/website/ts/components/ui/ease_up_from_bottom_animation.tsx (limited to 'packages/website/ts/components') diff --git a/packages/website/ts/components/onboarding/onboarding_flow.tsx b/packages/website/ts/components/onboarding/onboarding_flow.tsx index 91d5f2476..ec1b5bc42 100644 --- a/packages/website/ts/components/onboarding/onboarding_flow.tsx +++ b/packages/website/ts/components/onboarding/onboarding_flow.tsx @@ -7,8 +7,8 @@ import { OnboardingTooltip, TooltipPointerDisplay, } from 'ts/components/onboarding/onboarding_tooltip'; -import { Animation } from 'ts/components/ui/animation'; import { Container } from 'ts/components/ui/container'; +import { EaseUpFromBottomAnimation } from 'ts/components/ui/ease_up_from_bottom_animation'; import { Overlay } from 'ts/components/ui/overlay'; import { zIndex } from 'ts/style/z_index'; @@ -66,7 +66,7 @@ export class OnboardingFlow extends React.Component { let onboardingElement = null; const currentStep = this._getCurrentStep(); if (this.props.isMobile) { - onboardingElement = {this._renderOnboardingCard()}; + onboardingElement = {this._renderOnboardingCard()}; } else if (currentStep.position.type === 'target') { const { placement, target } = currentStep.position; onboardingElement = ( diff --git a/packages/website/ts/components/ui/animation.tsx b/packages/website/ts/components/ui/animation.tsx deleted file mode 100644 index 943e3bf28..000000000 --- a/packages/website/ts/components/ui/animation.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import * as React from 'react'; -import { keyframes, styled } from 'ts/style/theme'; - -export type AnimationType = 'easeUpFromBottom'; - -export interface AnimationProps { - type: AnimationType; -} - -const PlainAnimation: React.StatelessComponent = props =>
; - -const appearFromBottomFrames = keyframes` - from { - position: fixed; - bottom: -500px; - left: 0px; - right: 0px; - } - - to { - position: fixed; - bottom: 0px; - left: 0px; - right: 0px; - } -`; - -const stylesForAnimation: { [K in AnimationType]: string } = { - // Needed for safari - easeUpFromBottom: `position: fixed`, -}; - -const animations: { [K in AnimationType]: string } = { - easeUpFromBottom: `${appearFromBottomFrames} 1s ease 0s 1 forwards`, -}; - -export const Animation = styled(PlainAnimation)` - animation: ${props => animations[props.type]}; - ${props => stylesForAnimation[props.type]}; -`; - -Animation.displayName = 'Animation'; diff --git a/packages/website/ts/components/ui/ease_up_from_bottom_animation.tsx b/packages/website/ts/components/ui/ease_up_from_bottom_animation.tsx new file mode 100644 index 000000000..176c9410c --- /dev/null +++ b/packages/website/ts/components/ui/ease_up_from_bottom_animation.tsx @@ -0,0 +1,32 @@ +import * as React from 'react'; +import { css, keyframes, styled } from 'ts/style/theme'; + +const appearFromBottomFrames = keyframes` + from { + position: fixed; + bottom: -500px; + left: 0px; + right: 0px; + } + + to { + position: fixed; + bottom: 0px; + left: 0px; + right: 0px; + } +`; + +const stylesForAnimation = css` + position: fixed; +`; +const animations = css` + animation: ${appearFromBottomFrames} 1s ease 0s 1 forwards; +`; + +export const EaseUpFromBottomAnimation = styled.div` + ${props => animations}; + ${props => stylesForAnimation}; +`; + +EaseUpFromBottomAnimation.displayName = 'EaseUpFromBottomAnimation'; -- cgit From bb691aa4ed15f0d9ed4a3beb7778311faf57aef1 Mon Sep 17 00:00:00 2001 From: fragosti Date: Mon, 17 Dec 2018 15:48:17 -0800 Subject: feat: more blog url fixes --- packages/website/ts/components/eth_wrappers.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages/website/ts/components') diff --git a/packages/website/ts/components/eth_wrappers.tsx b/packages/website/ts/components/eth_wrappers.tsx index 61daa1103..dc597b18f 100644 --- a/packages/website/ts/components/eth_wrappers.tsx +++ b/packages/website/ts/components/eth_wrappers.tsx @@ -209,7 +209,7 @@ export class EthWrappers extends React.Component
The{' '} - + canonical WETH {' '} contract is updated when necessary. Unwrap outdated WETH in order to
 retrieve your ETH and move -- cgit From 18e55830b5816c342d8e9d9f64ae035f9284ea80 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Tue, 18 Dec 2018 15:31:58 +0000 Subject: Fix version picker so it doesn't overflow onto two lines --- .../ts/components/documentation/sidebar_header.tsx | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) (limited to 'packages/website/ts/components') diff --git a/packages/website/ts/components/documentation/sidebar_header.tsx b/packages/website/ts/components/documentation/sidebar_header.tsx index 9ced52c74..0ab24ab5e 100644 --- a/packages/website/ts/components/documentation/sidebar_header.tsx +++ b/packages/website/ts/components/documentation/sidebar_header.tsx @@ -24,7 +24,7 @@ export const SidebarHeader: React.StatelessComponent = ({ return ( - + = ({ {!_.isUndefined(docsVersion) && !_.isUndefined(availableDocVersions) && !_.isUndefined(onVersionSelected) && ( -
- +
+ + +
)} -- cgit From 441b5ac6f1d597f6a6ee32f672c46f2cdac03dbf Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Tue, 18 Dec 2018 14:08:06 -0800 Subject: Get rid of unused import --- packages/website/ts/components/ui/ease_up_from_bottom_animation.tsx | 1 - 1 file changed, 1 deletion(-) (limited to 'packages/website/ts/components') diff --git a/packages/website/ts/components/ui/ease_up_from_bottom_animation.tsx b/packages/website/ts/components/ui/ease_up_from_bottom_animation.tsx index 176c9410c..ba141c01e 100644 --- a/packages/website/ts/components/ui/ease_up_from_bottom_animation.tsx +++ b/packages/website/ts/components/ui/ease_up_from_bottom_animation.tsx @@ -1,4 +1,3 @@ -import * as React from 'react'; import { css, keyframes, styled } from 'ts/style/theme'; const appearFromBottomFrames = keyframes` -- cgit