diff options
author | Fabio Berger <me@fabioberger.com> | 2018-10-04 02:00:59 +0800 |
---|---|---|
committer | Fabio Berger <me@fabioberger.com> | 2018-10-04 02:00:59 +0800 |
commit | d0b2b4d0aa8b67c6f867f83c9b35b8e49c57b4a1 (patch) | |
tree | 8d9dec0143900d155a61a88de798a962c0773e1a /packages/website | |
parent | 4184c5db8597a7311f3efe82bce9a5e2668daf51 (diff) | |
download | dexon-0x-contracts-d0b2b4d0aa8b67c6f867f83c9b35b8e49c57b4a1.tar dexon-0x-contracts-d0b2b4d0aa8b67c6f867f83c9b35b8e49c57b4a1.tar.gz dexon-0x-contracts-d0b2b4d0aa8b67c6f867f83c9b35b8e49c57b4a1.tar.bz2 dexon-0x-contracts-d0b2b4d0aa8b67c6f867f83c9b35b8e49c57b4a1.tar.lz dexon-0x-contracts-d0b2b4d0aa8b67c6f867f83c9b35b8e49c57b4a1.tar.xz dexon-0x-contracts-d0b2b4d0aa8b67c6f867f83c9b35b8e49c57b4a1.tar.zst dexon-0x-contracts-d0b2b4d0aa8b67c6f867f83c9b35b8e49c57b4a1.zip |
Convert more divs to Containers
Diffstat (limited to 'packages/website')
-rw-r--r-- | packages/website/ts/components/documentation/docs_top_bar.tsx | 39 | ||||
-rw-r--r-- | packages/website/ts/pages/documentation/home.tsx | 54 |
2 files changed, 44 insertions, 49 deletions
diff --git a/packages/website/ts/components/documentation/docs_top_bar.tsx b/packages/website/ts/components/documentation/docs_top_bar.tsx index e5aa2ea29..3fea1c714 100644 --- a/packages/website/ts/components/documentation/docs_top_bar.tsx +++ b/packages/website/ts/components/documentation/docs_top_bar.tsx @@ -65,7 +65,7 @@ export class DocsTopBar extends React.Component<DocsTopBarProps, DocsTopBarState return ( <Container height={80}> <Container className="flex items-center lg-pt3 md-pt3 sm-pt1 relative" width="100%"> - <div className="col col-2 sm-hide xs-hide"> + <Container className="col col-2 sm-hide xs-hide"> <Link to={WebsitePaths.Home} style={{ color: colors.linkSectionGrey }} @@ -78,17 +78,17 @@ export class DocsTopBar extends React.Component<DocsTopBarProps, DocsTopBarState </Text> </Container> </Link> - </div> - <div className="col col-4 md-hide sm-hide xs-hide" /> - <div className="col col-6 md-pl4 md-ml4 sm-hide xs-hide"> - <div className="flex items-center justify-between right" style={{ width: 300 }}> + </Container> + <Container className="col col-4 md-hide sm-hide xs-hide" /> + <Container className="col col-6 md-pl4 md-ml4 sm-hide xs-hide"> + <Container className="flex items-center justify-between right" width="300px"> {this._renderMenuItems(menuItemInfos)} - </div> - </div> - <div className="lg-hide md-hide"> + </Container> + </Container> + <Container className="lg-hide md-hide"> <DocsLogo height={30} containerStyle={{ paddingTop: 6, paddingLeft: 18 }} /> - </div> - <div className="md-hide lg-hide absolute" style={{ right: 18, top: 12 }}> + </Container> + <Container className="md-hide lg-hide absolute" right="18px" top="12px"> <i className="zmdi zmdi-menu" style={{ @@ -98,16 +98,9 @@ export class DocsTopBar extends React.Component<DocsTopBarProps, DocsTopBarState }} onClick={this._onMenuButtonClick.bind(this)} /> - </div> + </Container> </Container> - <div - style={{ - width: '100%', - height: 1, - backgroundColor: colors.grey300, - marginTop: 11, - }} - /> + <Container width={'100%'} height={'1px'} backgroundColor={colors.grey300} marginTop={'11px'} /> {this._renderDrawer()} </Container> ); @@ -124,12 +117,12 @@ export class DocsTopBar extends React.Component<DocsTopBarProps, DocsTopBarState fontSize: 16, }} > - <div className="flex"> + <Container className="flex"> <img src={menuItemInfo.iconUrl} width="18" /> <div className="flex items-center" style={{ ...menuItemInfo.textStyle, paddingLeft: 4 }}> {menuItemInfo.title} </div> - </div> + </Container> </a> ); }); @@ -143,14 +136,14 @@ export class DocsTopBar extends React.Component<DocsTopBarProps, DocsTopBarState openSecondary={true} onRequestChange={this._onMenuButtonClick.bind(this)} > - <div className="clearfix pl1"> + <Container className="clearfix pl1"> <NestedSidebarMenu sectionNameToLinks={this.props.sectionNameToLinks} shouldDisplaySectionHeaders={true} shouldReformatMenuItemNames={false} onMenuItemClick={this._onMenuButtonClick.bind(this)} /> - </div> + </Container> </Drawer> ); } diff --git a/packages/website/ts/pages/documentation/home.tsx b/packages/website/ts/pages/documentation/home.tsx index c0b50fab7..b95aa17f8 100644 --- a/packages/website/ts/pages/documentation/home.tsx +++ b/packages/website/ts/pages/documentation/home.tsx @@ -435,7 +435,7 @@ export class Home extends React.Component<HomeProps, HomeState> { } 50%, ${colors.white} 100%)`} > <DocumentTitle title="0x Docs Home" /> - <div className="flex mx-auto" style={{ height: '100vh' }}> + <Container className="flex mx-auto" height="100vh"> <Container className="sm-hide xs-hide relative" width={234} @@ -496,7 +496,7 @@ export class Home extends React.Component<HomeProps, HomeState> { onMouseOver={this._onMainContentHover.bind(this, true)} onMouseLeave={this._onMainContentHover.bind(this, false)} > - <div> + <Container> {this._renderSectionTitle(this.props.translate.get(Key.StartBuildOn0x, Deco.Cap))} <Container paddingTop="12px"> {this._renderSectionDescription( @@ -533,29 +533,29 @@ export class Home extends React.Component<HomeProps, HomeState> { </Container> </Container> </Container> - </div> + </Container> </div> </Container> - </div> + </Container> </Container> ); } private _renderPackageCategory(category: string, pkgs: Package[]): React.ReactNode { return ( - <div key={`category-${category}`}> + <Container key={`category-${category}`}> <Text fontSize="18px">{category}</Text> - <div>{_.map(pkgs, pkg => this._renderPackage(pkg))}</div> - </div> + <Container>{_.map(pkgs, pkg => this._renderPackage(pkg))}</Container> + </Container> ); } private _renderPackage(pkg: Package): React.ReactNode { const id = sharedUtils.getIdFromName(pkg.link.title); return ( <ScrollElement name={id} key={`package-${pkg.link.title}`}> - <div className="pb2"> + <Container className="pb2"> <Container width="100%" height="1px" backgroundColor={colors.grey300} marginTop="11px" /> - <div className="clearfix mt2 pt1"> - <div className="md-col lg-col md-col-4 lg-col-4"> + <Container className="clearfix mt2 pt1"> + <Container className="md-col lg-col md-col-4 lg-col-4"> <Link to={pkg.link.to} style={{ color: colors.lightLinkBlue }} @@ -566,16 +566,18 @@ export class Home extends React.Component<HomeProps, HomeState> { {pkg.link.title} </Text> </Link> - </div> - <div className="md-col lg-col md-col-6 lg-col-6 sm-py2" style={{ color: colors.grey700 }}> - <ReactMarkdown - source={pkg.description} - renderers={{ - link: MarkdownLinkBlock, - }} - /> - </div> - <div className="md-col lg-col md-col-2 lg-col-2 sm-pb2 relative"> + </Container> + <Container className="md-col lg-col md-col-6 lg-col-6 sm-py2"> + <Text fontColor={colors.grey700}> + <ReactMarkdown + source={pkg.description} + renderers={{ + link: MarkdownLinkBlock, + }} + /> + </Text> + </Container> + <Container className="md-col lg-col md-col-2 lg-col-2 sm-pb2 relative"> <Link to={pkg.link.to} className="absolute" @@ -583,19 +585,19 @@ export class Home extends React.Component<HomeProps, HomeState> { type={pkg.link.type} shouldOpenInNewTab={!!pkg.link.shouldOpenInNewTab} > - <div className="flex"> - <div>{this.props.translate.get(Key.More, Deco.Cap)}</div> + <Container className="flex"> + <Container>{this.props.translate.get(Key.More, Deco.Cap)}</Container> <Container paddingTop="1px" paddingLeft="6px"> <i className="zmdi zmdi-chevron-right bold" style={{ fontSize: 18, color: colors.lightLinkBlue }} /> </Container> - </div> + </Container> </Link> - </div> - </div> - </div> + </Container> + </Container> + </Container> </ScrollElement> ); } |