diff options
author | Brandon Millman <brandon.millman@gmail.com> | 2018-06-22 01:34:45 +0800 |
---|---|---|
committer | fragosti <francesco.agosti93@gmail.com> | 2018-06-22 08:40:33 +0800 |
commit | 79edc12c764097bb46f6dd40fe1f10fd8944f583 (patch) | |
tree | 74f1fe3a891a9eae481f2294351af7810f9c5444 /packages/website/ts/components/portal/portal.tsx | |
parent | bd03151c2a10c680bb8a12e0bdd73590381aa4ca (diff) | |
download | dexon-0x-contracts-79edc12c764097bb46f6dd40fe1f10fd8944f583.tar dexon-0x-contracts-79edc12c764097bb46f6dd40fe1f10fd8944f583.tar.gz dexon-0x-contracts-79edc12c764097bb46f6dd40fe1f10fd8944f583.tar.bz2 dexon-0x-contracts-79edc12c764097bb46f6dd40fe1f10fd8944f583.tar.lz dexon-0x-contracts-79edc12c764097bb46f6dd40fe1f10fd8944f583.tar.xz dexon-0x-contracts-79edc12c764097bb46f6dd40fe1f10fd8944f583.tar.zst dexon-0x-contracts-79edc12c764097bb46f6dd40fe1f10fd8944f583.zip |
Add Background component
Diffstat (limited to 'packages/website/ts/components/portal/portal.tsx')
-rw-r--r-- | packages/website/ts/components/portal/portal.tsx | 24 |
1 files changed, 10 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> |