diff options
author | Brandon Millman <brandon.millman@gmail.com> | 2018-05-30 13:29:31 +0800 |
---|---|---|
committer | Brandon Millman <brandon.millman@gmail.com> | 2018-06-01 02:54:25 +0800 |
commit | 3b26a656f725b2100f346e4f7eeff33b741562f6 (patch) | |
tree | 36aecba14e467e6f1850088b06fd05546d4cd092 | |
parent | 2f5ac5d9939471615a281a69087150beafb66f16 (diff) | |
download | dexon-0x-contracts-3b26a656f725b2100f346e4f7eeff33b741562f6.tar dexon-0x-contracts-3b26a656f725b2100f346e4f7eeff33b741562f6.tar.gz dexon-0x-contracts-3b26a656f725b2100f346e4f7eeff33b741562f6.tar.bz2 dexon-0x-contracts-3b26a656f725b2100f346e4f7eeff33b741562f6.tar.lz dexon-0x-contracts-3b26a656f725b2100f346e4f7eeff33b741562f6.tar.xz dexon-0x-contracts-3b26a656f725b2100f346e4f7eeff33b741562f6.tar.zst dexon-0x-contracts-3b26a656f725b2100f346e4f7eeff33b741562f6.zip |
Add StandardIconRow
-rw-r--r-- | packages/website/ts/components/wallet/wallet.tsx | 75 |
1 files changed, 41 insertions, 34 deletions
diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx index 626d77ffe..219854f4a 100644 --- a/packages/website/ts/components/wallet/wallet.tsx +++ b/packages/website/ts/components/wallet/wallet.tsx @@ -92,9 +92,6 @@ const styles: Styles = { zIndex: zIndex.aboveOverlay, position: 'relative', }, - headerItemInnerDiv: { - paddingLeft: 65, - }, footerItemInnerDiv: { paddingLeft: 24, borderTopColor: colors.walletBorder, @@ -108,6 +105,7 @@ const styles: Styles = { }, tokenItem: { backgroundColor: colors.walletDefaultItemBackground, + minHeight: 85, }, amountLabel: { fontWeight: 'bold', @@ -132,7 +130,7 @@ const styles: Styles = { }; const ETHER_ICON_PATH = '/images/ether.png'; -const ICON_DIMENSION = 24; +const ICON_DIMENSION = 28; const TOKEN_AMOUNT_DISPLAY_PRECISION = 3; const BODY_ITEM_KEY = 'BODY'; const HEADER_ITEM_KEY = 'HEADER'; @@ -211,12 +209,9 @@ export class Wallet extends React.Component<WalletProps, WalletState> { const userAddress = this.props.userAddress; const primaryText = 'wallet'; return ( - <ListItem - key={HEADER_ITEM_KEY} - primaryText={primaryText.toUpperCase()} - leftIcon={<ActionAccountBalanceWallet color={colors.mediumBlue} />} - style={styles.paddedItem} - innerDivStyle={styles.headerItemInnerDiv} + <StandardIconRow + icon={<ActionAccountBalanceWallet color={colors.mediumBlue} />} + main={primaryText.toUpperCase()} /> ); } @@ -235,11 +230,10 @@ export class Wallet extends React.Component<WalletProps, WalletState> { const primaryText = utils.getAddressBeginAndEnd(userAddress); return ( <Link key={HEADER_ITEM_KEY} to={ACCOUNT_PATH} style={{ textDecoration: 'none' }}> - <ListItem - primaryText={primaryText} - leftIcon={<Identicon address={userAddress} diameter={ICON_DIMENSION} />} - style={{ ...styles.paddedItem, ...styles.borderedItem }} - innerDivStyle={styles.headerItemInnerDiv} + <StandardIconRow + icon={<Identicon address={userAddress} diameter={ICON_DIMENSION} />} + main={primaryText} + style={styles.borderedItem} /> </Link> ); @@ -340,12 +334,6 @@ export class Wallet extends React.Component<WalletProps, WalletState> { const accessoryItemConfig = { wrappedEtherDirection: Side.Deposit, }; - const isInWrappedEtherState = - !_.isUndefined(this.state.wrappedEtherDirection) && - this.state.wrappedEtherDirection === accessoryItemConfig.wrappedEtherDirection; - const style = isInWrappedEtherState - ? { ...walletItemStyles.focusedItem, ...styles.paddedItem } - : { ...styles.tokenItem, ...styles.borderedItem, ...styles.paddedItem }; const key = ETHER_ITEM_KEY; return this._renderBalanceRow(key, icon, primaryText, secondaryText, accessoryItemConfig, 'eth-row'); } @@ -398,21 +386,22 @@ export class Wallet extends React.Component<WalletProps, WalletState> { const shouldShowWrapEtherItem = !_.isUndefined(this.state.wrappedEtherDirection) && this.state.wrappedEtherDirection === accessoryItemConfig.wrappedEtherDirection; - const style = shouldShowWrapEtherItem - ? { ...walletItemStyles.focusedItem, ...styles.paddedItem } - : { ...styles.tokenItem, ...styles.borderedItem, ...styles.paddedItem }; + const additionalStyle = shouldShowWrapEtherItem ? walletItemStyles.focusedItem : styles.borderedItem; + const style = { ...styles.tokenItem, ...additionalStyle }; const etherToken = this._getEthToken(); return ( <div key={key} className={`flex flex-column ${className || ''}`}> - <div className="flex items-center" style={style}> - <div className="px2">{icon}</div> - <div className="flex-none pr2 pt2 pb2"> - {primaryText} - {secondaryText} - </div> - <div className="flex-auto" /> - <div>{this._renderAccessoryItems(accessoryItemConfig)}</div> - </div> + <StandardIconRow + icon={icon} + main={ + <div> + {primaryText} + {secondaryText} + </div> + } + accessory={this._renderAccessoryItems(accessoryItemConfig)} + style={style} + /> {shouldShowWrapEtherItem && ( <WrapEtherItem userAddress={this.props.userAddress} @@ -595,4 +584,22 @@ export class Wallet extends React.Component<WalletProps, WalletState> { private _getEthToken(): Token { return utils.getEthToken(this.props.tokenByAddress); } -} // tslint:disable:max-file-line-count +} + +interface StandardIconRowProps { + icon: React.ReactNode; + main: React.ReactNode; + accessory?: React.ReactNode; + style?: React.CSSProperties; +} +const StandardIconRow = (props: StandardIconRowProps) => { + return ( + <div className="flex items-center" style={props.style}> + <div className="p2">{props.icon}</div> + <div className="flex-none pr2 pt2 pb2">{props.main}</div> + <div className="flex-auto" /> + <div>{props.accessory}</div> + </div> + ); +}; +// tslint:disable:max-file-line-count |