aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website')
-rw-r--r--packages/website/ts/components/portal/portal.tsx24
-rw-r--r--packages/website/ts/components/ui/background.tsx24
-rw-r--r--packages/website/ts/style/z_index.ts1
3 files changed, 35 insertions, 14 deletions
diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx
index cd88a3f95..4f1dfea6f 100644
--- a/packages/website/ts/components/portal/portal.tsx
+++ b/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>
diff --git a/packages/website/ts/components/ui/background.tsx b/packages/website/ts/components/ui/background.tsx
new file mode 100644
index 000000000..808792a41
--- /dev/null
+++ b/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';
diff --git a/packages/website/ts/style/z_index.ts b/packages/website/ts/style/z_index.ts
index 0411cdd91..6e3aebaa1 100644
--- a/packages/website/ts/style/z_index.ts
+++ b/packages/website/ts/style/z_index.ts
@@ -1,4 +1,5 @@
export const zIndex = {
+ background: -1,
topBar: 1100,
overlay: 1105,
aboveOverlay: 1106,