aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/components
diff options
context:
space:
mode:
authorBrandon Millman <brandon.millman@gmail.com>2018-06-29 15:59:24 +0800
committerBrandon Millman <brandon.millman@gmail.com>2018-06-29 15:59:24 +0800
commitaedd51a61bcc9ecef660c1bea1641c0400f3ac45 (patch)
tree20177ccc8b1d933d543ea2cc5ce51e291f492d40 /packages/website/ts/components
parent0b5a49c17dde87130a659e4101bd6e2f5666b9c7 (diff)
downloaddexon-sol-tools-aedd51a61bcc9ecef660c1bea1641c0400f3ac45.tar
dexon-sol-tools-aedd51a61bcc9ecef660c1bea1641c0400f3ac45.tar.gz
dexon-sol-tools-aedd51a61bcc9ecef660c1bea1641c0400f3ac45.tar.bz2
dexon-sol-tools-aedd51a61bcc9ecef660c1bea1641c0400f3ac45.tar.lz
dexon-sol-tools-aedd51a61bcc9ecef660c1bea1641c0400f3ac45.tar.xz
dexon-sol-tools-aedd51a61bcc9ecef660c1bea1641c0400f3ac45.tar.zst
dexon-sol-tools-aedd51a61bcc9ecef660c1bea1641c0400f3ac45.zip
Refactor inline styles out of Wallet
Diffstat (limited to 'packages/website/ts/components')
-rw-r--r--packages/website/ts/components/wallet/null_token_row.tsx41
-rw-r--r--packages/website/ts/components/wallet/placeholder.tsx26
-rw-r--r--packages/website/ts/components/wallet/standard_icon_row.tsx44
-rw-r--r--packages/website/ts/components/wallet/wallet.tsx148
-rw-r--r--packages/website/ts/components/wallet/wrap_ether_item.tsx3
5 files changed, 139 insertions, 123 deletions
diff --git a/packages/website/ts/components/wallet/null_token_row.tsx b/packages/website/ts/components/wallet/null_token_row.tsx
new file mode 100644
index 000000000..c8b4e67d0
--- /dev/null
+++ b/packages/website/ts/components/wallet/null_token_row.tsx
@@ -0,0 +1,41 @@
+import * as React from 'react';
+
+import { Circle } from 'ts/components/ui/circle';
+import { Container } from 'ts/components/ui/container';
+import { Text } from 'ts/components/ui/text';
+import { PlaceHolder } from 'ts/components/wallet/placeholder';
+import { StandardIconRow } from 'ts/components/wallet/standard_icon_row';
+import { colors } from 'ts/style/colors';
+
+export interface NullTokenRowProps {
+ iconDimension: number;
+ fillColor: string;
+}
+
+export const NullTokenRow: React.StatelessComponent<NullTokenRowProps> = ({ iconDimension, fillColor }) => {
+ const icon = <Circle diameter={iconDimension} fillColor={fillColor} />;
+ const main = (
+ <div className="flex flex-column">
+ <PlaceHolder hideChildren={true} fillColor={fillColor}>
+ <Text fontSize="16px" fontWeight="bold" lineHeight="1em">
+ 0.00 XXX
+ </Text>
+ </PlaceHolder>
+ <Container marginTop="3px">
+ <PlaceHolder hideChildren={true} fillColor={fillColor}>
+ <Text fontSize="14px" fontColor={colors.darkGrey} lineHeight="1em">
+ 0.00
+ </Text>
+ </PlaceHolder>
+ </Container>
+ </div>
+ );
+ const accessory = (
+ <Container marginRight="12px">
+ <PlaceHolder hideChildren={true} fillColor={fillColor}>
+ <Container width="20px" height="14px" />
+ </PlaceHolder>
+ </Container>
+ );
+ return <StandardIconRow icon={icon} main={main} accessory={accessory} />;
+};
diff --git a/packages/website/ts/components/wallet/placeholder.tsx b/packages/website/ts/components/wallet/placeholder.tsx
new file mode 100644
index 000000000..aca46014b
--- /dev/null
+++ b/packages/website/ts/components/wallet/placeholder.tsx
@@ -0,0 +1,26 @@
+import * as React from 'react';
+
+import { colors } from 'ts/style/colors';
+import { styled } from 'ts/style/theme';
+
+export interface PlaceHolderProps {
+ className?: string;
+ hideChildren: React.ReactNode;
+ fillColor: string;
+}
+
+const PlainPlaceHolder: React.StatelessComponent<PlaceHolderProps> = ({ className, hideChildren, children }) => {
+ const childrenVisibility = hideChildren ? 'hidden' : 'visible';
+ const childrenStyle: React.CSSProperties = { visibility: childrenVisibility };
+ return (
+ <div className={className}>
+ <div style={childrenStyle}>{children}</div>
+ </div>
+ );
+};
+
+export const PlaceHolder = styled(PlainPlaceHolder)`
+ background-color: ${props => (props.hideChildren ? props.fillColor : 'transparent')};
+ display: inline-block;
+ border-radius: 2px;
+`;
diff --git a/packages/website/ts/components/wallet/standard_icon_row.tsx b/packages/website/ts/components/wallet/standard_icon_row.tsx
new file mode 100644
index 000000000..1a2ec021b
--- /dev/null
+++ b/packages/website/ts/components/wallet/standard_icon_row.tsx
@@ -0,0 +1,44 @@
+import * as React from 'react';
+
+import { colors } from 'ts/style/colors';
+import { styled } from 'ts/style/theme';
+
+export interface StandardIconRowProps {
+ className?: string;
+ icon: React.ReactNode;
+ main: React.ReactNode;
+ accessory?: React.ReactNode;
+ minHeight?: string;
+ borderBottomColor?: string;
+ borderBottomStyle?: string;
+ borderWidth?: string;
+ backgroundColor?: string;
+}
+const PlainStandardIconRow: React.StatelessComponent<StandardIconRowProps> = ({ className, icon, main, accessory }) => {
+ return (
+ <div className={`flex items-center ${className}`}>
+ <div className="flex items-center px2">{icon}</div>
+ <div className="flex-none pr2">{main}</div>
+ <div className="flex-auto" />
+ <div>{accessory}</div>
+ </div>
+ );
+};
+
+export const StandardIconRow = styled(PlainStandardIconRow)`
+ min-height: ${props => props.minHeight};
+ border-bottom-color: ${props => props.borderBottomColor};
+ border-bottom-style: ${props => props.borderBottomStyle};
+ border-width: ${props => props.borderWidth};
+ background-color: ${props => props.backgroundColor};
+`;
+
+StandardIconRow.defaultProps = {
+ minHeight: '85px',
+ borderBottomColor: colors.walletBorder,
+ borderBottomStyle: 'solid',
+ borderWidth: '1px',
+ backgroundColor: colors.walletDefaultItemBackground,
+};
+
+StandardIconRow.displayName = 'StandardIconRow';
diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx
index 348800717..ee8ca8aeb 100644
--- a/packages/website/ts/components/wallet/wallet.tsx
+++ b/packages/website/ts/components/wallet/wallet.tsx
@@ -1,9 +1,4 @@
-import {
- constants as sharedConstants,
- EtherscanLinkSuffixes,
- Styles,
- utils as sharedUtils,
-} from '@0xproject/react-shared';
+import { constants as sharedConstants, EtherscanLinkSuffixes, utils as sharedUtils } from '@0xproject/react-shared';
import { BigNumber, errorUtils } from '@0xproject/utils';
import { Web3Wrapper } from '@0xproject/web3-wrapper';
import * as _ from 'lodash';
@@ -28,6 +23,9 @@ import { Island } from 'ts/components/ui/island';
import { Text } from 'ts/components/ui/text';
import { TokenIcon } from 'ts/components/ui/token_icon';
import { BodyOverlay } from 'ts/components/wallet/body_overlay';
+import { NullTokenRow } from 'ts/components/wallet/null_token_row';
+import { PlaceHolder } from 'ts/components/wallet/placeholder';
+import { StandardIconRow } from 'ts/components/wallet/standard_icon_row';
import { WrapEtherItem } from 'ts/components/wallet/wrap_ether_item';
import { AllowanceToggle } from 'ts/containers/inputs/allowance_toggle';
import { Dispatcher } from 'ts/redux/dispatcher';
@@ -48,7 +46,6 @@ import {
import { analytics } from 'ts/utils/analytics';
import { constants } from 'ts/utils/constants';
import { utils } from 'ts/utils/utils';
-import { styles as walletItemStyles } from 'ts/utils/wallet_item_styles';
export interface WalletProps {
userAddress: string;
@@ -88,34 +85,6 @@ interface AccessoryItemConfig {
allowanceToggleConfig?: AllowanceToggleConfig;
}
-const styles: Styles = {
- borderedItem: {
- borderBottomColor: colors.walletBorder,
- borderBottomStyle: 'solid',
- borderWidth: 1,
- },
- tokenItem: {
- backgroundColor: colors.walletDefaultItemBackground,
- minHeight: 85,
- },
- headerItem: {
- minHeight: 60,
- },
- amountLabel: {
- fontWeight: 'bold',
- color: colors.black,
- },
- valueLabel: {
- color: colors.darkGrey,
- fontSize: 14,
- },
- bodyInnerDiv: {
- overflow: 'auto',
- WebkitOverflowScrolling: 'touch',
- position: 'relative',
- },
-};
-
const ETHER_ICON_PATH = '/images/ether.png';
const ICON_DIMENSION = 28;
const BODY_ITEM_KEY = 'BODY';
@@ -177,7 +146,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
return (
<div key={BODY_ITEM_KEY} className="flex flex-column" style={bodyStyle}>
{_.map(loadingRowsRange, index => {
- return <NullTokenRow key={index} />;
+ return <NullTokenRow key={index} iconDimension={ICON_DIMENSION} fillColor={PLACEHOLDER_COLOR} />;
})}
<Container
className="flex items-center"
@@ -227,7 +196,8 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
// https://github.com/palantir/tslint-react/issues/140
// tslint:disable-next-line:jsx-curly-spacing
}
- style={{ ...styles.borderedItem, ...styles.headerItem }}
+ minHeight="60px"
+ backgroundColor={colors.white}
/>
);
}
@@ -247,7 +217,8 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
<StandardIconRow
icon={<Identicon address={userAddress} diameter={ICON_DIMENSION} />}
main={main}
- style={{ ...styles.borderedItem, ...styles.headerItem }}
+ minHeight="60px"
+ backgroundColor={colors.white}
/>
</Link>
);
@@ -268,7 +239,9 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
}
private _getBodyStyle(): React.CSSProperties {
return {
- ...styles.bodyInnerDiv,
+ overflow: 'auto',
+ WebkitOverflowScrolling: 'touch',
+ position: 'relative',
overflowY: this.state.isHoveringSidebar ? 'scroll' : 'hidden',
marginRight: this.state.isHoveringSidebar ? 0 : 4,
// TODO: make this completely responsive
@@ -306,7 +279,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
wrappedEtherDirection: Side.Deposit,
};
const key = ETHER_ITEM_KEY;
- return this._renderBalanceRow(key, icon, primaryText, secondaryText, accessoryItemConfig, false, 'eth-row');
+ return this._renderBalanceRow(key, icon, primaryText, secondaryText, accessoryItemConfig, 'eth-row');
}
private _renderTokenRows(): React.ReactNode {
const trackedTokens = this.props.trackedTokens;
@@ -352,7 +325,6 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
primaryText,
secondaryText,
accessoryItemConfig,
- isLastRow,
isWeth ? 'weth-row' : undefined,
);
}
@@ -362,20 +334,12 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
primaryText: React.ReactNode,
secondaryText: React.ReactNode,
accessoryItemConfig: AccessoryItemConfig,
- isLastRow: boolean,
className?: string,
): React.ReactNode {
const shouldShowWrapEtherItem =
!_.isUndefined(this.state.wrappedEtherDirection) &&
this.state.wrappedEtherDirection === accessoryItemConfig.wrappedEtherDirection &&
!_.isUndefined(this.props.userEtherBalanceInWei);
- let additionalStyle;
- if (shouldShowWrapEtherItem) {
- additionalStyle = walletItemStyles.focusedItem;
- } else if (!isLastRow) {
- additionalStyle = styles.borderedItem;
- }
- const style = { ...styles.tokenItem, ...additionalStyle };
const etherToken = this._getEthToken();
return (
<div id={key} key={key} className={`flex flex-column ${className || ''}`}>
@@ -388,7 +352,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
</div>
}
accessory={this._renderAccessoryItems(accessoryItemConfig)}
- style={style}
+ backgroundColor={shouldShowWrapEtherItem ? colors.walletFocusedItemBackground : undefined}
/>
{shouldShowWrapEtherItem && (
<WrapEtherItem
@@ -447,13 +411,19 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
): React.ReactNode {
if (isLoading) {
return (
- <PlaceHolder hideChildren={isLoading}>
- <div style={styles.amountLabel}>0.00 XXX</div>
+ <PlaceHolder hideChildren={isLoading} fillColor={PLACEHOLDER_COLOR}>
+ <Text fontSize="16px" fontWeight="bold" lineHeight="1em">
+ 0.00 XXX
+ </Text>
</PlaceHolder>
);
} else {
const result = utils.getFormattedAmount(amount, decimals, symbol);
- return <div style={styles.amountLabel}>{result}</div>;
+ return (
+ <Text fontSize="16px" fontWeight="bold" lineHeight="1em">
+ {result}
+ </Text>
+ );
}
}
private _renderValue(
@@ -476,8 +446,10 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
result = '$0.00';
}
return (
- <PlaceHolder hideChildren={isLoading}>
- <div style={styles.valueLabel}>{result}</div>
+ <PlaceHolder hideChildren={isLoading} fillColor={PLACEHOLDER_COLOR}>
+ <Text fontSize="14px" fontColor={colors.darkGrey} lineHeight="1em">
+ {result}
+ </Text>
</PlaceHolder>
);
}
@@ -543,70 +515,4 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
}
}
-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="flex items-center px2">{props.icon}</div>
- <div className="flex-none pr2">{props.main}</div>
- <div className="flex-auto" />
- <div>{props.accessory}</div>
- </div>
- );
-};
-interface PlaceHolderProps {
- hideChildren: React.ReactNode;
- children?: React.ReactNode;
-}
-const PlaceHolder = (props: PlaceHolderProps) => {
- const rootBackgroundColor = props.hideChildren ? PLACEHOLDER_COLOR : 'transparent';
- const rootStyle: React.CSSProperties = {
- backgroundColor: rootBackgroundColor,
- display: 'inline-block',
- borderRadius: 2,
- };
- const childrenVisibility = props.hideChildren ? 'hidden' : 'visible';
- const childrenStyle: React.CSSProperties = { visibility: childrenVisibility };
- return (
- <div style={rootStyle}>
- <div style={childrenStyle}>{props.children}</div>
- </div>
- );
-};
-
-const NullTokenRow = () => {
- const icon = <Circle diameter={ICON_DIMENSION} fillColor={PLACEHOLDER_COLOR} />;
- const main = (
- <div className="flex flex-column">
- <PlaceHolder hideChildren={true}>
- <div style={styles.amountLabel}>0.00 XXX</div>
- </PlaceHolder>
- <Container marginTop="3px">
- <PlaceHolder hideChildren={true}>
- <div style={styles.valueLabel}>0.00</div>
- </PlaceHolder>
- </Container>
- </div>
- );
- const accessory = (
- <Container marginRight="12px">
- <PlaceHolder hideChildren={true}>
- <Container width="20px" height="14px" />
- </PlaceHolder>
- </Container>
- );
- return (
- <StandardIconRow
- icon={icon}
- main={main}
- accessory={accessory}
- style={{ ...styles.tokenItem, ...styles.borderedItem }}
- />
- );
-};
// tslint:disable:max-file-line-count
diff --git a/packages/website/ts/components/wallet/wrap_ether_item.tsx b/packages/website/ts/components/wallet/wrap_ether_item.tsx
index d6135ce4d..f6d1a9a35 100644
--- a/packages/website/ts/components/wallet/wrap_ether_item.tsx
+++ b/packages/website/ts/components/wallet/wrap_ether_item.tsx
@@ -15,7 +15,6 @@ import { analytics } from 'ts/utils/analytics';
import { constants } from 'ts/utils/constants';
import { errorReporter } from 'ts/utils/error_reporter';
import { utils } from 'ts/utils/utils';
-import { styles as walletItemStyles } from 'ts/utils/wallet_item_styles';
export interface WrapEtherItemProps {
userAddress: string;
@@ -95,7 +94,7 @@ export class WrapEtherItem extends React.Component<WrapEtherItemProps, WrapEther
const topLabelText = isWrappingEth ? 'Convert ETH into WETH 1:1' : 'Convert WETH into ETH 1:1';
return (
- <div className="flex" style={walletItemStyles.focusedItem}>
+ <div className="flex" style={{ backgroundColor: colors.walletFocusedItemBackground }}>
<div>{this._renderIsEthConversionHappeningSpinner()} </div>
<div className="flex flex-column">
<div style={styles.topLabel}>{topLabelText}</div>