diff options
Diffstat (limited to 'packages/website/ts')
4 files changed, 8 insertions, 10 deletions
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', |