From 549c6afa0af15cb19249ce8cdbad92b09ae231f6 Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Tue, 19 Jun 2018 13:55:29 -0700
Subject: Move some layout logic out of the Identicon component

---
 packages/website/ts/components/generate_order/asset_picker.tsx | 4 ++--
 packages/website/ts/components/ui/identicon.tsx                | 2 +-
 packages/website/ts/components/wallet/wallet.tsx               | 3 +++
 3 files changed, 6 insertions(+), 3 deletions(-)

(limited to 'packages/website/ts')

diff --git a/packages/website/ts/components/generate_order/asset_picker.tsx b/packages/website/ts/components/generate_order/asset_picker.tsx
index d7cc554c4..b43ac1f2e 100644
--- a/packages/website/ts/components/generate_order/asset_picker.tsx
+++ b/packages/website/ts/components/generate_order/asset_picker.tsx
@@ -151,12 +151,12 @@ export class AssetPicker extends React.Component<AssetPickerProps, AssetPickerSt
                         height: TILE_DIMENSION,
                         ...tileStyles,
                     }}
-                    className="p2 mx-auto"
+                    className="p2 flex flex-column items-center"
                     onClick={this._onChooseToken.bind(this, address)}
                     onMouseEnter={this._onToggleHover.bind(this, address, true)}
                     onMouseLeave={this._onToggleHover.bind(this, address, false)}
                 >
-                    <div className="p1 center">
+                    <div className="p1">
                         <TokenIcon token={token} diameter={TOKEN_ICON_DIMENSION} />
                     </div>
                     <div className="center">{token.name}</div>
diff --git a/packages/website/ts/components/ui/identicon.tsx b/packages/website/ts/components/ui/identicon.tsx
index 30df995c8..cc1655962 100644
--- a/packages/website/ts/components/ui/identicon.tsx
+++ b/packages/website/ts/components/ui/identicon.tsx
@@ -23,7 +23,7 @@ export class Identicon extends React.Component<IdenticonProps, IdenticonState> {
         const radius = diameter / 2;
         return (
             <div
-                className="circle mx-auto relative transitionFix"
+                className="circle relative transitionFix"
                 style={{
                     width: diameter,
                     height: diameter,
diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx
index 8c8d74e58..f92ddda48 100644
--- a/packages/website/ts/components/wallet/wallet.tsx
+++ b/packages/website/ts/components/wallet/wallet.tsx
@@ -322,6 +322,9 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
     }
     private _renderTokenRow(token: Token, _index: number): React.ReactNode {
         const tokenState = this.props.trackedTokenStateByAddress[token.address];
+        if (_.isUndefined(tokenState)) {
+            return null;
+        }
         const tokenLink = sharedUtils.getEtherScanLinkIfExists(
             token.address,
             this.props.networkId,
-- 
cgit v1.2.3


From 5817a30031b3cfac5c17dcc8e11d901e8d6ded45 Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Tue, 19 Jun 2018 16:25:43 -0700
Subject: Update Island shadow styling and use Island in more places

---
 packages/website/ts/components/portal/back_button.tsx       | 7 +++----
 packages/website/ts/components/top_bar/provider_display.tsx | 7 +++----
 packages/website/ts/components/ui/island.tsx                | 2 +-
 packages/website/ts/style/colors.ts                         | 2 +-
 4 files changed, 8 insertions(+), 10 deletions(-)

(limited to 'packages/website/ts')

diff --git a/packages/website/ts/components/portal/back_button.tsx b/packages/website/ts/components/portal/back_button.tsx
index 2d0bbefc3..ca35abc2b 100644
--- a/packages/website/ts/components/portal/back_button.tsx
+++ b/packages/website/ts/components/portal/back_button.tsx
@@ -2,6 +2,7 @@ import { Styles } from '@0xproject/react-shared';
 import * as React from 'react';
 import { Link } from 'react-router-dom';
 
+import { Island } from 'ts/components/ui/island';
 import { colors } from 'ts/style/colors';
 
 export interface BackButtonProps {
@@ -15,9 +16,7 @@ const styles: Styles = {
     backButton: {
         height: BACK_BUTTON_HEIGHT,
         paddingTop: 10,
-        backgroundColor: colors.white,
         borderRadius: BACK_BUTTON_HEIGHT,
-        boxShadow: `0px 4px 6px ${colors.walletBoxShadow}`,
     },
     backButtonIcon: {
         color: colors.mediumBlue,
@@ -29,14 +28,14 @@ export 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}>
+                <Island className="flex right" style={styles.backButton}>
                     <div style={{ marginLeft: 12 }}>
                         <i style={styles.backButtonIcon} className={`zmdi zmdi-arrow-left`} />
                     </div>
                     <div style={{ marginLeft: 12, marginRight: 12 }}>
                         <div style={{ fontSize: 16, color: colors.lightGrey }}>{props.labelText}</div>
                     </div>
-                </div>
+                </Island>
             </Link>
         </div>
     );
diff --git a/packages/website/ts/components/top_bar/provider_display.tsx b/packages/website/ts/components/top_bar/provider_display.tsx
index 1e8855c14..496e5cae0 100644
--- a/packages/website/ts/components/top_bar/provider_display.tsx
+++ b/packages/website/ts/components/top_bar/provider_display.tsx
@@ -10,6 +10,7 @@ import { Container } from 'ts/components/ui/container';
 import { DropDown } from 'ts/components/ui/drop_down';
 import { Identicon } from 'ts/components/ui/identicon';
 import { Image } from 'ts/components/ui/image';
+import { Island } from 'ts/components/ui/island';
 import { Text } from 'ts/components/ui/text';
 import { Dispatcher } from 'ts/redux/dispatcher';
 import { colors } from 'ts/style/colors';
@@ -35,9 +36,7 @@ interface ProviderDisplayState {}
 const styles: Styles = {
     root: {
         height: ROOT_HEIGHT,
-        backgroundColor: colors.white,
         borderRadius: ROOT_HEIGHT,
-        boxShadow: `0px 4px 6px ${colors.walletBoxShadow}`,
     },
 };
 
@@ -62,7 +61,7 @@ export class ProviderDisplay extends React.Component<ProviderDisplayProps, Provi
             this.props.providerType === ProviderType.Injected ? injectedProviderName : 'Ledger Nano S';
         const isProviderMetamask = providerTitle === constants.PROVIDER_NAME_METAMASK;
         const hoverActiveNode = (
-            <div className="flex items-center p1" style={styles.root}>
+            <Island className="flex items-center p1" style={styles.root}>
                 <div>
                     {this._isBlockchainReady() ? (
                         <Identicon address={this.props.userAddress} diameter={ROOT_HEIGHT} />
@@ -78,7 +77,7 @@ export class ProviderDisplay extends React.Component<ProviderDisplayProps, Provi
                 {isProviderMetamask && (
                     <Image src="/images/metamask_icon.png" height={ROOT_HEIGHT} width={ROOT_HEIGHT} />
                 )}
-            </div>
+            </Island>
         );
         const hasLedgerProvider = this.props.providerType === ProviderType.Ledger;
         const horizontalPosition = isExternallyInjectedProvider || hasLedgerProvider ? 'left' : 'middle';
diff --git a/packages/website/ts/components/ui/island.tsx b/packages/website/ts/components/ui/island.tsx
index de90b664f..fbb9989a4 100644
--- a/packages/website/ts/components/ui/island.tsx
+++ b/packages/website/ts/components/ui/island.tsx
@@ -14,7 +14,7 @@ const defaultStyle: React.CSSProperties = {
     borderBottomLeftRadius: 10,
     borderTopRightRadius: 10,
     borderTopLeftRadius: 10,
-    boxShadow: `0px 4px 6px ${colors.walletBoxShadow}`,
+    boxShadow: `0px 3px 4px ${colors.walletBoxShadow}`,
     overflow: 'hidden',
 };
 
diff --git a/packages/website/ts/style/colors.ts b/packages/website/ts/style/colors.ts
index b15000d7a..45be4fe7f 100644
--- a/packages/website/ts/style/colors.ts
+++ b/packages/website/ts/style/colors.ts
@@ -1,7 +1,7 @@
 import { colors as sharedColors } from '@0xproject/react-shared';
 
 const appColors = {
-    walletBoxShadow: 'rgba(56, 59, 137, 0.2)',
+    walletBoxShadow: 'rgba(0, 0, 0, 0.05)',
     walletBorder: '#ededee',
     walletDefaultItemBackground: '#fbfbfc',
     walletFocusedItemBackground: '#f0f1f4',
-- 
cgit v1.2.3