diff options
Diffstat (limited to 'packages/website/ts')
4 files changed, 57 insertions, 57 deletions
diff --git a/packages/website/ts/components/documentation/docs_top_bar.tsx b/packages/website/ts/components/documentation/docs_top_bar.tsx index f95dbb5e1..9a2146f9c 100644 --- a/packages/website/ts/components/documentation/docs_top_bar.tsx +++ b/packages/website/ts/components/documentation/docs_top_bar.tsx @@ -24,7 +24,8 @@ interface MenuItemInfo { title: string; url: string; iconUrl: string; - textStyle: React.CSSProperties; + fontColor: string; + fontWeight?: string; } export class DocsTopBar extends React.Component<DocsTopBarProps, DocsTopBarState> { @@ -47,19 +48,20 @@ export class DocsTopBar extends React.Component<DocsTopBarProps, DocsTopBarState title: this.props.translate.get(Key.Github, Deco.Cap), url: constants.URL_GITHUB_ORG, iconUrl: '/images/developers/github_icon.svg', - textStyle: { color: colors.linkSectionGrey }, + fontColor: colors.linkSectionGrey, }, { title: this.props.translate.get(Key.Forum, Deco.Cap), url: constants.URL_FORUM, iconUrl: '/images/developers/forum_icon.svg', - textStyle: { color: colors.linkSectionGrey }, + fontColor: colors.linkSectionGrey, }, { title: this.props.translate.get(Key.LiveChat, Deco.Cap), url: constants.URL_ZEROEX_CHAT, iconUrl: '/images/developers/chat_icon.svg', - textStyle: { color: colors.lightLinkBlue, fontWeight: 'bold' }, + fontColor: colors.lightLinkBlue, + fontWeight: 'bold', }, ]; return ( @@ -118,9 +120,15 @@ export class DocsTopBar extends React.Component<DocsTopBarProps, DocsTopBarState > <Container className="flex"> <img src={menuItemInfo.iconUrl} width="18" /> - <div className="flex items-center" style={{ ...menuItemInfo.textStyle, paddingLeft: 4 }}> - <Text fontSize="16px">{menuItemInfo.title}</Text> - </div> + <Container className="flex items-center" paddingLeft="4px"> + <Text + fontSize="16px" + fontWeight={menuItemInfo.fontWeight || 'normal'} + fontColor={menuItemInfo.fontColor} + > + {menuItemInfo.title} + </Text> + </Container> </Container> </a> ); diff --git a/packages/website/ts/components/dropdowns/developers_drop_down.tsx b/packages/website/ts/components/dropdowns/developers_drop_down.tsx index 8a5ad53e2..df5dc173d 100644 --- a/packages/website/ts/components/dropdowns/developers_drop_down.tsx +++ b/packages/website/ts/components/dropdowns/developers_drop_down.tsx @@ -91,63 +91,50 @@ export class DevelopersDropDown extends React.Component<DevelopersDropDownProps, } private _renderDropdownMenu(): React.ReactNode { const dropdownMenu = ( - <div> + <Container> <Container padding="1.75rem"> {this._renderTitle('Getting started')} - <div className="flex"> - <div className="pr4 mr2">{this._renderLinkSection(gettingStartedKeyToLinkInfo1)}</div> - <div>{this._renderLinkSection(gettingStartedKeyToLinkInfo2)}</div> - </div> + <Container className="flex"> + <Container className="pr4 mr2"> + {this._renderLinkSection(gettingStartedKeyToLinkInfo1)} + </Container> + <Container>{this._renderLinkSection(gettingStartedKeyToLinkInfo2)}</Container> + </Container> + </Container> + <Container width="100%" height="1px" backgroundColor={colors.grey300} /> + <Container className="flex" padding="1.75rem"> + <Container className="pr4 mr2"> + <Container>{this._renderTitle('Popular docs')}</Container> + <Container>{this._renderLinkSection(popularDocsToLinkInfos)}</Container> + </Container> + <Container> + <Container>{this._renderTitle('Useful links')}</Container> + <Container>{this._renderLinkSection(usefulLinksToLinkInfo)}</Container> + </Container> </Container> - <div - style={{ - width: '100%', - height: 1, - backgroundColor: colors.grey300, - }} - /> - <div className="flex" style={{ padding: '1.75rem' }}> - <div className="pr4 mr2"> - <div>{this._renderTitle('Popular docs')}</div> - <div>{this._renderLinkSection(popularDocsToLinkInfos)}</div> - </div> - <div> - <div>{this._renderTitle('Useful links')}</div> - <div>{this._renderLinkSection(usefulLinksToLinkInfo)}</div> - </div> - </div> <Link to={WebsitePaths.Docs} fontColor={colors.lightBlueA700}> - <div - style={{ - padding: '0.9rem', - textAlign: 'center', - backgroundColor: colors.lightBgGrey, - borderBottomLeftRadius: 4, - borderBottomRightRadius: 4, - fontWeight: 'bold', - fontSize: 14, - }} + <Container + padding="0.9rem" + backgroundColor={colors.lightBgGrey} + borderBottomLeftRadius={4} + borderBottomRightRadius={4} > - {this.props.translate.get(Key.ViewAllDocumentation, Deco.Upper)} - </div> + <Text fontColor={colors.lightBlueA700} fontWeight="bold" fontSize="14px" textAlign="center"> + {this.props.translate.get(Key.ViewAllDocumentation, Deco.Upper)} + </Text> + </Container> </Link> - </div> + </Container> ); return dropdownMenu; } private _renderTitle(title: string): React.ReactNode { return ( - <div - style={{ - color: colors.linkSectionGrey, - fontSize: 14, - paddingBottom: 12, - fontWeight: 600, - letterSpacing: 1, - }} - > - {title.toUpperCase()} - </div> + <Container paddingBottom="12px"> + <Text letterSpacing={1} fontColor={colors.linkSectionGrey} fontSize="14px" fontWeight={600}> + {title.toUpperCase()} + </Text> + </Container> ); } private _renderLinkSection(links: ALink[]): React.ReactNode { @@ -157,7 +144,6 @@ export class DevelopersDropDown extends React.Component<DevelopersDropDownProps, const isWikiLink = _.startsWith(link.to, WebsitePaths.Wiki) && _.includes(link.to, '#'); const isOnWiki = this.props.location.pathname === WebsitePaths.Wiki; let to = link.to; - const type = link.type; if (isWikiLink && isOnWiki) { to = `${link.to.split('#')[1]}`; } @@ -165,15 +151,15 @@ export class DevelopersDropDown extends React.Component<DevelopersDropDownProps, const isLast = i === numLinks; const linkText = this.props.translate.get(link.title as Key, Deco.Cap); return ( - <div className={`pr1 pt1 ${!isLast && 'pb1'}`} key={`dev-dropdown-link-${link.title}`}> + <Container className={`pr1 pt1 ${!isLast && 'pb1'}`} key={`dev-dropdown-link-${link.title}`}> <Link to={to} shouldOpenInNewTab={!!link.shouldOpenInNewTab}> <Text fontFamily="Roboto, Roboto Mono" fontColor={colors.lightBlueA700}> {linkText} </Text> </Link> - </div> + </Container> ); }); - return <div>{renderLinks}</div>; + return <Container>{renderLinks}</Container>; } } diff --git a/packages/website/ts/components/ui/container.tsx b/packages/website/ts/components/ui/container.tsx index 782ab3b6f..ece077563 100644 --- a/packages/website/ts/components/ui/container.tsx +++ b/packages/website/ts/components/ui/container.tsx @@ -17,6 +17,8 @@ export interface ContainerProps { backgroundColor?: string; background?: string; borderRadius?: StringOrNum; + borderBottomLeftRadius?: StringOrNum; + borderBottomRightRadius?: StringOrNum; borderBottom?: StringOrNum; maxWidth?: StringOrNum; maxHeight?: StringOrNum; diff --git a/packages/website/ts/components/ui/text.tsx b/packages/website/ts/components/ui/text.tsx index cd8f290e3..4415962b1 100644 --- a/packages/website/ts/components/ui/text.tsx +++ b/packages/website/ts/components/ui/text.tsx @@ -19,7 +19,9 @@ export interface TextProps { textDecorationLine?: string; onClick?: (event: React.MouseEvent<HTMLElement>) => void; hoverColor?: string; + letterSpacing?: string | number; noWrap?: boolean; + textAlign?: string; display?: string; } @@ -34,6 +36,8 @@ export const Text = styled(PlainText)` font-style: ${props => props.fontStyle}; font-weight: ${props => props.fontWeight}; font-size: ${props => props.fontSize}; + text-align: ${props => props.textAlign}; + letter-spacing: ${props => props.letterSpacing}; text-decoration-line: ${props => props.textDecorationLine}; ${props => (props.lineHeight ? `line-height: ${props.lineHeight}` : '')}; ${props => (props.center ? 'text-align: center' : '')}; |