Refactor inline styles out of Wallet

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} />;
+};

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;
+`;

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';

packages/website/ts/components/wallet/wallet.tsx

@@ -1,9 +1,4 @@
-import {
+import { constants as sharedConstants, EtherscanLinkSuffixes, utils as sharedUtils } from '@0xproject/react-shared';
-    constants as sharedConstants,
-    EtherscanLinkSuffixes,
-    Styles,
-    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}>
+                <PlaceHolder hideChildren={isLoading} fillColor={PLACEHOLDER_COLOR}>
-                    <div style={styles.amountLabel}>0.00 XXX</div>
+                    <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}>
+            <PlaceHolder hideChildren={isLoading} fillColor={PLACEHOLDER_COLOR}>
-                <div style={styles.valueLabel}>{result}</div>
+                <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

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>

packages/website/ts/utils/wallet_item_styles.ts

@@ -1,9 +0,0 @@
-import { Styles } from '@0xproject/react-shared';
-
-import { colors } from 'ts/style/colors';
-
-export const styles: Styles = {
-    focusedItem: {
-        backgroundColor: colors.walletFocusedItemBackground,
-    },
-};