diff options
| -rw-r--r-- | packages/website/ts/components/portal/portal.tsx | 67 |
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> + ); +}; |