Convert more divs to Containers

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>
         );
     }