diff options
author | Brandon Millman <brandon@0xproject.com> | 2018-06-22 01:31:48 +0800 |
---|---|---|
committer | GitHub <noreply@github.com> | 2018-06-22 01:31:48 +0800 |
commit | 88500e37146dc9152050fdd810f9f3c3cc5faf9f (patch) | |
tree | be4123b951aa186362594d9d12909df2f6a65c41 /packages/website/ts/components | |
parent | eae2a4df8b8d8874f7e8115530e8f25ceb607b4e (diff) | |
parent | 5817a30031b3cfac5c17dcc8e11d901e8d6ded45 (diff) | |
download | dexon-0x-contracts-88500e37146dc9152050fdd810f9f3c3cc5faf9f.tar dexon-0x-contracts-88500e37146dc9152050fdd810f9f3c3cc5faf9f.tar.gz dexon-0x-contracts-88500e37146dc9152050fdd810f9f3c3cc5faf9f.tar.bz2 dexon-0x-contracts-88500e37146dc9152050fdd810f9f3c3cc5faf9f.tar.lz dexon-0x-contracts-88500e37146dc9152050fdd810f9f3c3cc5faf9f.tar.xz dexon-0x-contracts-88500e37146dc9152050fdd810f9f3c3cc5faf9f.tar.zst dexon-0x-contracts-88500e37146dc9152050fdd810f9f3c3cc5faf9f.zip |
Merge pull request #734 from 0xProject/feature/website/shadow-styling
Update Island shadow styling and use Island in more places
Diffstat (limited to 'packages/website/ts/components')
-rw-r--r-- | packages/website/ts/components/portal/back_button.tsx | 7 | ||||
-rw-r--r-- | packages/website/ts/components/top_bar/provider_display.tsx | 7 | ||||
-rw-r--r-- | packages/website/ts/components/ui/island.tsx | 2 |
3 files changed, 7 insertions, 9 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', }; |