Refactor portal specific colors out of react-shared

packages/react-shared/CHANGELOG.json

@@ -1,4 +1,12 @@
 [
+    {
+        "version": "0.2.0",
+        "changes": [
+            {
+                "note": "Removed portal specific colors"
+            }
+        ]
+    },
     {
         "timestamp": 1525477860,
         "version": "0.1.6",

packages/react-shared/src/utils/colors.ts

@@ -48,20 +48,7 @@ const baseColors = {
     darkYellow: '#caca03',
 };
 
-const appColors = {
-    // wallet specific colors
-    walletBoxShadow: 'rgba(56, 59, 137, 0.2)',
-    walletBorder: '#ededee',
-    walletDefaultItemBackground: '#fbfbfc',
-    walletFocusedItemBackground: '#f0f1f4',
-    allowanceToggleShadow: 'rgba(0, 0, 0, 0)',
-    allowanceToggleOffTrack: '#adadad',
-    allowanceToggleOnTrack: baseColors.mediumBlue,
-    wrapEtherConfirmationButton: baseColors.mediumBlue,
-};
-
 export const colors = {
     ...materialUiColors,
     ...baseColors,
-    ...appColors,
 };

packages/website/ts/components/inputs/allowance_toggle.tsx

@@ -1,4 +1,4 @@
-import { colors, constants as sharedConstants, Styles } from '@0xproject/react-shared';
+import { constants as sharedConstants, Styles } from '@0xproject/react-shared';
 import { BigNumber, logUtils } from '@0xproject/utils';
 import * as _ from 'lodash';
 import Toggle from 'material-ui/Toggle';
@@ -7,6 +7,7 @@ import { Blockchain } from 'ts/blockchain';
 import { Dispatcher } from 'ts/redux/dispatcher';
 import { BalanceErrs, Token, TokenState } from 'ts/types';
 import { analytics } from 'ts/utils/analytics';
+import { colors } from 'ts/utils/colors';
 import { constants } from 'ts/utils/constants';
 import { errorReporter } from 'ts/utils/error_reporter';
 import { utils } from 'ts/utils/utils';

packages/website/ts/components/portal/back_button.tsx

@@ -1,7 +1,9 @@
-import { colors, Styles } from '@0xproject/react-shared';
+import { Styles } from '@0xproject/react-shared';
 import * as React from 'react';
 import { Link } from 'react-router-dom';
 
+import { colors } from 'ts/utils/colors';
+
 export interface BackButtonProps {
     to: string;
     labelText: string;

packages/website/ts/components/relayer_index/relayer_grid_tile.tsx

@@ -1,4 +1,4 @@
-import { colors, Styles } from '@0xproject/react-shared';
+import { Styles } from '@0xproject/react-shared';
 import * as _ from 'lodash';
 import { GridTile } from 'material-ui/GridList';
 import * as React from 'react';
@@ -6,6 +6,7 @@ import * as React from 'react';
 import { TopTokens } from 'ts/components/relayer_index/relayer_top_tokens';
 import { TokenIcon } from 'ts/components/ui/token_icon';
 import { Token, WebsiteBackendRelayerInfo } from 'ts/types';
+import { colors } from 'ts/utils/colors';
 
 export interface RelayerGridTileProps {
     relayerInfo: WebsiteBackendRelayerInfo;

packages/website/ts/components/relayer_index/relayer_index.tsx

@@ -1,4 +1,4 @@
-import { colors, Styles } from '@0xproject/react-shared';
+import { Styles } from '@0xproject/react-shared';
 import * as _ from 'lodash';
 import CircularProgress from 'material-ui/CircularProgress';
 import FlatButton from 'material-ui/FlatButton';
@@ -8,6 +8,7 @@ import * as React from 'react';
 import { RelayerGridTile } from 'ts/components/relayer_index/relayer_grid_tile';
 import { ScreenWidths, WebsiteBackendRelayerInfo } from 'ts/types';
 import { backendClient } from 'ts/utils/backend_client';
+import { colors } from 'ts/utils/colors';
 
 export interface RelayerIndexProps {
     networkId: number;

packages/website/ts/components/top_bar/provider_display.tsx

@@ -1,13 +1,15 @@
-import { colors, Styles } from '@0xproject/react-shared';
+import { Styles } from '@0xproject/react-shared';
 import * as _ from 'lodash';
 import RaisedButton from 'material-ui/RaisedButton';
 import * as React from 'react';
+
 import { Blockchain } from 'ts/blockchain';
 import { ProviderPicker } from 'ts/components/top_bar/provider_picker';
 import { DropDown } from 'ts/components/ui/drop_down';
 import { Identicon } from 'ts/components/ui/identicon';
 import { Dispatcher } from 'ts/redux/dispatcher';
 import { ProviderType } from 'ts/types';
+import { colors } from 'ts/utils/colors';
 import { constants } from 'ts/utils/constants';
 import { utils } from 'ts/utils/utils';
 
@@ -41,9 +43,7 @@ export class ProviderDisplay extends React.Component<ProviderDisplayProps, Provi
             this.props.providerType === ProviderType.Injected && this.props.injectedProviderName !== '0x Public';
         const displayAddress = isAddressAvailable
             ? utils.getAddressBeginAndEnd(this.props.userAddress)
-            : isExternallyInjectedProvider
-                ? 'Account locked'
-                : '0x0000...0000';
+            : isExternallyInjectedProvider ? 'Account locked' : '0x0000...0000';
         // If the "injected" provider is our fallback public node, then we want to
         // show the "connect a wallet" message instead of the providerName
         const injectedProviderName = isExternallyInjectedProvider

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

@@ -1,6 +1,5 @@
 import { ZeroEx } from '0x.js';
 import {
-    colors,
     constants as sharedConstants,
     EtherscanLinkSuffixes,
     Styles,
@@ -42,6 +41,7 @@ import {
     WebsitePaths,
 } from 'ts/types';
 import { backendClient } from 'ts/utils/backend_client';
+import { colors } from 'ts/utils/colors';
 import { constants } from 'ts/utils/constants';
 import { utils } from 'ts/utils/utils';
 import { styles as walletItemStyles } from 'ts/utils/wallet_item_styles';

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

@@ -1,9 +1,10 @@
-import { colors, Styles } from '@0xproject/react-shared';
+import { Styles } from '@0xproject/react-shared';
 import FlatButton from 'material-ui/FlatButton';
 import ActionAccountBalanceWallet from 'material-ui/svg-icons/action/account-balance-wallet';
 import * as React from 'react';
 
 import { ProviderType } from 'ts/types';
+import { colors } from 'ts/utils/colors';
 import { constants } from 'ts/utils/constants';
 
 export interface WalletDisconnectedItemProps {

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

@@ -1,5 +1,5 @@
 import { ZeroEx } from '0x.js';
-import { colors, Styles } from '@0xproject/react-shared';
+import { Styles } from '@0xproject/react-shared';
 import { BigNumber, logUtils } from '@0xproject/utils';
 import * as _ from 'lodash';
 import FlatButton from 'material-ui/FlatButton';
@@ -11,6 +11,7 @@ import { EthAmountInput } from 'ts/components/inputs/eth_amount_input';
 import { TokenAmountInput } from 'ts/components/inputs/token_amount_input';
 import { Dispatcher } from 'ts/redux/dispatcher';
 import { BlockchainCallErrs, Side, Token } from 'ts/types';
+import { colors } from 'ts/utils/colors';
 import { constants } from 'ts/utils/constants';
 import { errorReporter } from 'ts/utils/error_reporter';
 import { utils } from 'ts/utils/utils';

packages/website/ts/utils/colors.ts

@@ -0,0 +1,17 @@
+import { colors as sharedColors } from '@0xproject/react-shared';
+
+const appColors = {
+    walletBoxShadow: 'rgba(56, 59, 137, 0.2)',
+    walletBorder: '#ededee',
+    walletDefaultItemBackground: '#fbfbfc',
+    walletFocusedItemBackground: '#f0f1f4',
+    allowanceToggleShadow: 'rgba(0, 0, 0, 0)',
+    allowanceToggleOffTrack: '#adadad',
+    allowanceToggleOnTrack: sharedColors.mediumBlue,
+    wrapEtherConfirmationButton: sharedColors.mediumBlue,
+};
+
+export const colors = {
+    ...sharedColors,
+    ...appColors,
+};

packages/website/ts/utils/wallet_item_styles.ts

@@ -1,4 +1,6 @@
-import { colors, Styles } from '@0xproject/react-shared';
+import { Styles } from '@0xproject/react-shared';
+
+import { colors } from 'ts/utils/colors';
 
 export const styles: Styles = {
     focusedItem: {