Update Island shadow styling and use Island in more places

1 files changed, 3 insertions, 4 deletions

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';