aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts
diff options
context:
space:
mode:
authorFabio Berger <me@fabioberger.com>2018-10-05 22:33:15 +0800
committerFabio Berger <me@fabioberger.com>2018-10-05 22:33:15 +0800
commitdf7210163ad2835dcb6e461da173d1873d3195d4 (patch)
treed266df9035c1cf9c0613d228bb6b5adf66e76687 /packages/website/ts
parentded6742ddd70e295f15dab6363c935777a6a5588 (diff)
downloaddexon-sol-tools-df7210163ad2835dcb6e461da173d1873d3195d4.tar
dexon-sol-tools-df7210163ad2835dcb6e461da173d1873d3195d4.tar.gz
dexon-sol-tools-df7210163ad2835dcb6e461da173d1873d3195d4.tar.bz2
dexon-sol-tools-df7210163ad2835dcb6e461da173d1873d3195d4.tar.lz
dexon-sol-tools-df7210163ad2835dcb6e461da173d1873d3195d4.tar.xz
dexon-sol-tools-df7210163ad2835dcb6e461da173d1873d3195d4.tar.zst
dexon-sol-tools-df7210163ad2835dcb6e461da173d1873d3195d4.zip
Convert more divs to containers and text components
Diffstat (limited to 'packages/website/ts')
-rw-r--r--packages/website/ts/components/documentation/docs_top_bar.tsx22
-rw-r--r--packages/website/ts/components/dropdowns/developers_drop_down.tsx86
-rw-r--r--packages/website/ts/components/ui/container.tsx2
-rw-r--r--packages/website/ts/components/ui/text.tsx4
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' : '')};