aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--packages/website/ts/components/portal/portal.tsx37
1 files changed, 13 insertions, 24 deletions
diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx
index 4f1dfea6f..c82bfbe6a 100644
--- a/packages/website/ts/components/portal/portal.tsx
+++ b/packages/website/ts/components/portal/portal.tsx
@@ -1,4 +1,4 @@
-import { colors, constants as sharedConstants, Styles } from '@0xproject/react-shared';
+import { colors, constants as sharedConstants } from '@0xproject/react-shared';
import { BigNumber } from '@0xproject/utils';
import * as _ from 'lodash';
import ActionAccountBalanceWallet from 'material-ui/svg-icons/action/account-balance-wallet';
@@ -108,20 +108,7 @@ const TOP_BAR_HEIGHT = TopBar.heightForDisplayType(TopBarDisplayType.Expanded);
const LEFT_COLUMN_WIDTH = 346;
const MENU_PADDING_LEFT = 185;
const LARGE_LAYOUT_MAX_WIDTH = 1200;
-
-const styles: Styles = {
- body: {
- marginTop: TOP_BAR_HEIGHT,
- },
- leftColumn: {
- width: LEFT_COLUMN_WIDTH,
- position: 'fixed',
- },
- scrollContainer: {
- marginLeft: LEFT_COLUMN_WIDTH + 30,
- marginRight: 30,
- },
-};
+const LARGE_LAYOUT_MARGIN = 30;
export class Portal extends React.Component<PortalProps, PortalState> {
private _blockchain: Blockchain;
@@ -258,7 +245,7 @@ export class Portal extends React.Component<PortalProps, PortalState> {
style={{ backgroundColor: colors.lightestGrey, position: 'fixed' }}
maxWidth={LARGE_LAYOUT_MAX_WIDTH}
/>
- <div id="portal" style={styles.body}>
+ <Container marginTop={TOP_BAR_HEIGHT}>
<Switch>
<Route path={`${WebsitePaths.Portal}/:route`} render={this._renderOtherRoutes.bind(this)} />
<Route
@@ -297,7 +284,7 @@ export class Portal extends React.Component<PortalProps, PortalState> {
tokenByAddress={this.props.tokenByAddress}
tokenVisibility={tokenVisibility}
/>
- </div>
+ </Container>
<PortalOnboardingFlow
blockchain={this._blockchain}
trackedTokenStateByAddress={this.state.trackedTokenStateByAddress}
@@ -706,11 +693,15 @@ const LargeLayout = (props: LargeLayoutProps) => {
return (
<div className="mx-auto flex flex-center" style={{ maxWidth: LARGE_LAYOUT_MAX_WIDTH }}>
<div className="flex-last">
- <div style={styles.leftColumn}>{props.left}</div>
- </div>
- <div className="flex-auto" style={styles.scrollContainer}>
- {props.right}
+ <Container width={LEFT_COLUMN_WIDTH} position="fixed" marginLeft={LARGE_LAYOUT_MARGIN}>
+ {props.left}
+ </Container>
</div>
+ <Container className="flex-auto" marginLeft={LEFT_COLUMN_WIDTH + LARGE_LAYOUT_MARGIN}>
+ <Container className="flex-auto" marginLeft={LARGE_LAYOUT_MARGIN} marginRight={LARGE_LAYOUT_MARGIN}>
+ {props.right}
+ </Container>
+ </Container>
</div>
);
};
@@ -721,9 +712,7 @@ interface SmallLayoutProps {
const SmallLayout = (props: SmallLayoutProps) => {
return (
<div className="flex flex-center">
- <div className="flex-auto px3" style={styles.scrollContainer}>
- {props.content}
- </div>
+ <div className="flex-auto px3">{props.content}</div>
</div>
);
}; // tslint:disable:max-file-line-count