Add Background component

packages/website/ts/components/portal/portal.tsx

@@ -22,6 +22,7 @@ import { RelayerIndex } from 'ts/components/relayer_index/relayer_index';
 import { TokenBalances } from 'ts/components/token_balances';
 import { TopBar, TopBarDisplayType } from 'ts/components/top_bar/top_bar';
 import { TradeHistory } from 'ts/components/trade_history/trade_history';
+import { Background } from 'ts/components/ui/background';
 import { Container } from 'ts/components/ui/container';
 import { FlashMessage } from 'ts/components/ui/flash_message';
 import { Island } from 'ts/components/ui/island';
@@ -109,22 +110,16 @@ const MENU_PADDING_LEFT = 185;
 const LARGE_LAYOUT_MAX_WIDTH = 1200;
 
 const styles: Styles = {
-    root: {
-        width: '100%',
-        height: '100%',
-        backgroundColor: colors.lightestGrey,
-    },
     body: {
-        height: `calc(100vh - ${TOP_BAR_HEIGHT}px)`,
+        marginTop: TOP_BAR_HEIGHT,
     },
     leftColumn: {
         width: LEFT_COLUMN_WIDTH,
-        height: '100%',
+        position: 'fixed',
     },
     scrollContainer: {
-        height: `calc(100vh - ${TOP_BAR_HEIGHT}px)`,
-        WebkitOverflowScrolling: 'touch',
-        overflow: 'auto',
+        marginLeft: LEFT_COLUMN_WIDTH + 30,
+        marginRight: 30,
     },
 };
 
@@ -245,7 +240,8 @@ export class Portal extends React.Component<PortalProps, PortalState> {
                 ? TokenVisibility.UNTRACKED
                 : TokenVisibility.TRACKED;
         return (
-            <div style={styles.root}>
+            <div>
+                <Background />
                 <DocumentTitle title="0x Portal DApp" />
                 <TopBar
                     userAddress={this.props.userAddress}
@@ -259,7 +255,7 @@ export class Portal extends React.Component<PortalProps, PortalState> {
                     blockchain={this._blockchain}
                     translate={this.props.translate}
                     displayType={TopBarDisplayType.Expanded}
-                    style={{ backgroundColor: colors.lightestGrey }}
+                    style={{ backgroundColor: colors.lightestGrey, position: 'fixed' }}
                     maxWidth={LARGE_LAYOUT_MAX_WIDTH}
                 />
                 <div id="portal" style={styles.body}>
@@ -709,10 +705,10 @@ interface LargeLayoutProps {
 const LargeLayout = (props: LargeLayoutProps) => {
     return (
         <div className="mx-auto flex flex-center" style={{ maxWidth: LARGE_LAYOUT_MAX_WIDTH }}>
-            <div className="flex-last px2">
+            <div className="flex-last">
                 <div style={styles.leftColumn}>{props.left}</div>
             </div>
-            <div className="flex-auto px2" style={styles.scrollContainer}>
+            <div className="flex-auto" style={styles.scrollContainer}>
                 {props.right}
             </div>
         </div>

packages/website/ts/components/ui/background.tsx

@@ -0,0 +1,24 @@
+import { colors } from '@0xproject/react-shared';
+import * as React from 'react';
+import { styled } from 'ts/style/theme';
+import { zIndex } from 'ts/style/z_index';
+
+export interface BackgroundProps {
+    color?: string;
+}
+
+const PlainBackground: React.StatelessComponent<BackgroundProps> = props => <div {...props} />;
+
+export const Background = styled(PlainBackground)`
+    background-color: ${props => props.color};
+    height: 100vh;
+    width: 100vw;
+    position: fixed;
+    z-index: ${zIndex.background};
+`;
+
+Background.defaultProps = {
+    color: colors.lightestGrey,
+};
+
+Background.displayName = 'Background';

packages/website/ts/style/z_index.ts

@@ -1,4 +1,5 @@
 export const zIndex = {
+    background: -1,
     topBar: 1100,
     overlay: 1105,
     aboveOverlay: 1106,