Use Container instead of div

1 files changed, 10 insertions, 6 deletions

diff --git a/packages/website/ts/components/dropdowns/developers_drop_down.tsx b/packages/website/ts/components/dropdowns/developers_drop_down.tsx
index 42a81ee88..d66e75722 100644
--- a/packages/website/ts/components/dropdowns/developers_drop_down.tsx
+++ b/packages/website/ts/components/dropdowns/developers_drop_down.tsx
@@ -2,7 +2,9 @@ import { colors } from '@0xproject/react-shared';
 import * as _ from 'lodash';
 import * as React from 'react';
 import { Link } from 'react-router-dom';
+import { Container } from 'ts/components/ui/container';
 import { DropDown } from 'ts/components/ui/drop_down';
+import { Text } from 'ts/components/ui/text';
 import { Deco, Key, ObjectMap, WebsitePaths } from 'ts/types';
 import { constants } from 'ts/utils/constants';
 import { Translate } from 'ts/utils/translate';
@@ -72,9 +74,11 @@ interface DevelopersDropDownState {}
 export class DevelopersDropDown extends React.Component<DevelopersDropDownProps, DevelopersDropDownState> {
     public render(): React.ReactNode {
         const activeNode = (
-            <div className="flex relative" style={{ color: this.props.menuIconStyle.color }}>
-                <div style={{ paddingRight: 10 }}>{this.props.translate.get(Key.Developers, Deco.Cap)}</div>
-            </div>
+            <Container className="flex relative" paddingRight="10">
+                <Text fontColor={this.props.menuIconStyle.color}>
+                    {this.props.translate.get(Key.Developers, Deco.Cap)}
+                </Text>
+            </Container>
         );
         return (
             <DropDown
@@ -90,13 +94,13 @@ export class DevelopersDropDown extends React.Component<DevelopersDropDownProps,
     private _renderDropdownMenu(): React.ReactNode {
         const dropdownMenu = (
             <div>
-                <div style={{ padding: '1.75rem' }}>
+                <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>
-                </div>
+                </Container>
                 <div
                     style={{
                         width: '100%',
@@ -116,7 +120,7 @@ export class DevelopersDropDown extends React.Component<DevelopersDropDownProps,
                 </div>
                 <div
                     style={{
-                        padding: '1.125rem',
+                        padding: '0.8rem',
                         textAlign: 'center',
                         backgroundColor: colors.lightBgGrey,
                         borderBottomLeftRadius: 4,