diff options
12 files changed, 46 insertions, 25 deletions
diff --git a/packages/react-shared/CHANGELOG.json b/packages/react-shared/CHANGELOG.json index 1095c78ee..3e03f81f1 100644 --- a/packages/react-shared/CHANGELOG.json +++ b/packages/react-shared/CHANGELOG.json @@ -1,5 +1,13 @@ [ { + "version": "0.2.0", + "changes": [ + { + "note": "Removed portal specific colors" + } + ] + }, + { "timestamp": 1525477860, "version": "0.1.6", "changes": [ diff --git a/packages/react-shared/src/utils/colors.ts b/packages/react-shared/src/utils/colors.ts index 4617fa5dc..71d92c290 100644 --- a/packages/react-shared/src/utils/colors.ts +++ b/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, }; diff --git a/packages/website/ts/components/inputs/allowance_toggle.tsx b/packages/website/ts/components/inputs/allowance_toggle.tsx index 48c7f9f57..d61dfa87d 100644 --- a/packages/website/ts/components/inputs/allowance_toggle.tsx +++ b/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'; diff --git a/packages/website/ts/components/portal/back_button.tsx b/packages/website/ts/components/portal/back_button.tsx index 68934f88e..48858613c 100644 --- a/packages/website/ts/components/portal/back_button.tsx +++ b/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; diff --git a/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx b/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx index 5964dcd56..dc9eeb29d 100644 --- a/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx +++ b/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; diff --git a/packages/website/ts/components/relayer_index/relayer_index.tsx b/packages/website/ts/components/relayer_index/relayer_index.tsx index 9e028fc06..e19ab5122 100644 --- a/packages/website/ts/components/relayer_index/relayer_index.tsx +++ b/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; diff --git a/packages/website/ts/components/top_bar/provider_display.tsx b/packages/website/ts/components/top_bar/provider_display.tsx index bebaa5341..889038652 100644 --- a/packages/website/ts/components/top_bar/provider_display.tsx +++ b/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 diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx index 75dbd12e9..dab8b7d2f 100644 --- a/packages/website/ts/components/wallet/wallet.tsx +++ b/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'; diff --git a/packages/website/ts/components/wallet/wallet_disconnected_item.tsx b/packages/website/ts/components/wallet/wallet_disconnected_item.tsx index 89e32f7be..d334f1748 100644 --- a/packages/website/ts/components/wallet/wallet_disconnected_item.tsx +++ b/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 { diff --git a/packages/website/ts/components/wallet/wrap_ether_item.tsx b/packages/website/ts/components/wallet/wrap_ether_item.tsx index db0983407..98b28b3ad 100644 --- a/packages/website/ts/components/wallet/wrap_ether_item.tsx +++ b/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'; diff --git a/packages/website/ts/utils/colors.ts b/packages/website/ts/utils/colors.ts new file mode 100644 index 000000000..34db3f77e --- /dev/null +++ b/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, +}; diff --git a/packages/website/ts/utils/wallet_item_styles.ts b/packages/website/ts/utils/wallet_item_styles.ts index 1ad304ce1..6b038efd2 100644 --- a/packages/website/ts/utils/wallet_item_styles.ts +++ b/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: { |