aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorBrandon Millman <brandon.millman@gmail.com>2018-05-17 04:47:50 +0800
committerBrandon Millman <brandon.millman@gmail.com>2018-05-18 02:02:55 +0800
commit63e7391981fca437efba221ff4babdb9d6fdac5b (patch)
treeedf2035ac8eb55858641a3b6d9a49acac5afb376
parentb6776f53ab3031a60eaaabffefc73d1e6d6f3d7c (diff)
downloaddexon-0x-contracts-63e7391981fca437efba221ff4babdb9d6fdac5b.tar
dexon-0x-contracts-63e7391981fca437efba221ff4babdb9d6fdac5b.tar.gz
dexon-0x-contracts-63e7391981fca437efba221ff4babdb9d6fdac5b.tar.bz2
dexon-0x-contracts-63e7391981fca437efba221ff4babdb9d6fdac5b.tar.lz
dexon-0x-contracts-63e7391981fca437efba221ff4babdb9d6fdac5b.tar.xz
dexon-0x-contracts-63e7391981fca437efba221ff4babdb9d6fdac5b.tar.zst
dexon-0x-contracts-63e7391981fca437efba221ff4babdb9d6fdac5b.zip
Add portal layout component
-rw-r--r--packages/website/ts/components/portal/portal.tsx67
1 files changed, 36 insertions, 31 deletions
diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx
index aa4392935..ce7911e10 100644
--- a/packages/website/ts/components/portal/portal.tsx
+++ b/packages/website/ts/components/portal/portal.tsx
@@ -105,6 +105,7 @@ const styles: Styles = {
},
backButton: {
height: BACK_BUTTON_HEIGHT,
+ paddingTop: 10,
backgroundColor: colors.white,
borderRadius: BACK_BUTTON_HEIGHT,
boxShadow: `0px 4px 6px ${colors.walletBoxShadow}`,
@@ -203,36 +204,17 @@ export class Portal extends React.Component<PortalProps, PortalState> {
style={{ backgroundColor: colors.lightestGrey }}
/>
<div id="portal" style={styles.body}>
- <div className="sm-flex flex-center">
- <div className="flex-last px3">
- <div style={styles.leftColumn}>
- <Switch>
- <Route
- path={`${WebsitePaths.Portal}/:route`}
- render={this._renderMenu.bind(this)}
- />
- <Route
- exact={true}
- path={`${WebsitePaths.Portal}`}
- render={this._renderWallet.bind(this)}
- />
- </Switch>
- </div>
- </div>
- <div className="flex-auto px3" style={styles.scrollContainer}>
- <Switch>
- <Route
- path={`${WebsitePaths.Portal}/:route`}
- render={this._renderAccountManagement.bind(this)}
- />
- <Route
- exact={true}
- path={`${WebsitePaths.Portal}/`}
- render={this._renderRelayerIndex.bind(this)}
- />
- </Switch>
- </div>
- </div>
+ <Switch>
+ <Route
+ path={`${WebsitePaths.Portal}/:route`}
+ render={this._renderMenuAndAccountManagement.bind(this)}
+ />
+ <Route
+ exact={true}
+ path={`${WebsitePaths.Portal}/`}
+ render={this._renderWalletAndRelayerIndex.bind(this)}
+ />
+ </Switch>
<BlockchainErrDialog
blockchain={this._blockchain}
blockchainErr={this.props.blockchainErr}
@@ -271,6 +253,12 @@ export class Portal extends React.Component<PortalProps, PortalState> {
</div>
);
}
+ private _renderWalletAndRelayerIndex(): React.ReactNode {
+ return <PortalLayout left={this._renderWallet()} right={this._renderRelayerIndex()} />;
+ }
+ private _renderMenuAndAccountManagement(routeComponentProps: RouteComponentProps<any>): React.ReactNode {
+ return <PortalLayout left={this._renderMenu(routeComponentProps)} right={this._renderAccountManagement()} />;
+ }
private _renderMenu(routeComponentProps: RouteComponentProps<any>): React.ReactNode {
return (
<div>
@@ -480,7 +468,7 @@ const BackButton = (props: BackButtonProps) => {
return (
<div style={{ height: 65, paddingTop: 25 }}>
<Link to={props.to} style={{ textDecoration: 'none' }}>
- <div className="flex right" style={{ ...styles.backButton, paddingTop: 10 }}>
+ <div className="flex right" style={styles.backButton}>
<div style={{ marginLeft: 12 }}>
<i style={styles.backButtonIcon} className={`zmdi zmdi-arrow-left`} />
</div>
@@ -492,3 +480,20 @@ const BackButton = (props: BackButtonProps) => {
</div>
);
};
+
+interface PortalLayoutProps {
+ left: React.ReactNode;
+ right: React.ReactNode;
+}
+const PortalLayout = (props: PortalLayoutProps) => {
+ return (
+ <div className="sm-flex flex-center">
+ <div className="flex-last px3">
+ <div style={styles.leftColumn}>{props.left}</div>
+ </div>
+ <div className="flex-auto px3" style={styles.scrollContainer}>
+ {props.right}
+ </div>
+ </div>
+ );
+};