diff --git a/src/components/Header/component/CircleDot.jsx b/src/components/Header/component/CircleDot.jsx index 2fc9c844..ef208715 100644 --- a/src/components/Header/component/CircleDot.jsx +++ b/src/components/Header/component/CircleDot.jsx @@ -7,7 +7,7 @@ import Img from '~/components/layout/Img' import { fancy, border, warning } from '~/theme/variables' const key = require('../assets/key.svg') -const triangle = require('../assets/key.svg') +const triangle = require('../assets/triangle.svg') const styles = () => ({ root: { @@ -24,6 +24,10 @@ const styles = () => ({ justifyContent: 'center', backgroundColor: border, }, + warning: { + position: 'relative', + top: '-2px', + }, }) type Mode = 'error' | 'warning' @@ -35,8 +39,9 @@ type Props = { dotSize: number, dotTop: number, dotRight: number, - center?: boolean, mode: Mode, + center?: boolean, + hideDot?: boolean, } const buildKeyStyleFrom = (size: number, center: boolean, dotSize: number) => ({ @@ -56,19 +61,26 @@ const buildDotStyleFrom = (size: number, top: number, right: number, mode: Mode) }) const KeyRing = ({ - classes, circleSize, keySize, dotSize, dotTop, dotRight, mode, center = false, + classes, circleSize, keySize, dotSize, dotTop, dotRight, mode, center = false, hideDot = false, }: Props) => { const keyStyle = buildKeyStyleFrom(circleSize, center, dotSize) const dotStyle = buildDotStyleFrom(dotSize, dotTop, dotRight, mode) - const img = mode === warning ? triangle : key + const isWarning = mode === 'warning' + const img = isWarning ? triangle : key return ( - Status disconnected + Status connection - + { !hideDot && } ) diff --git a/src/components/Header/component/ProviderInfo/UserDetails.jsx b/src/components/Header/component/ProviderInfo/UserDetails.jsx index 4a4a62cb..ee9ae678 100644 --- a/src/components/Header/component/ProviderInfo/UserDetails.jsx +++ b/src/components/Header/component/ProviderInfo/UserDetails.jsx @@ -15,6 +15,7 @@ import { xs, sm, md, lg, background, secondary } from '~/theme/variables' import { upperFirst } from '~/utils/css' import { shortVersionOf } from '~/logic/wallets/ethAddresses' import { openAddressInEtherScan } from '~/logic/wallets/getWeb3' +import CircleDot from '~/components/Header/component/CircleDot' const metamask = require('../../assets/metamask.svg') const connectedLogo = require('../../assets/connected.svg') @@ -92,7 +93,10 @@ const UserDetails = ({ - + { connected + ? + : + } {address} diff --git a/src/components/Header/component/ProviderInfo/index.jsx b/src/components/Header/component/ProviderInfo/index.jsx index 88b7802d..26fcaf97 100644 --- a/src/components/Header/component/ProviderInfo/index.jsx +++ b/src/components/Header/component/ProviderInfo/index.jsx @@ -64,7 +64,7 @@ const ProviderInfo = ({ } { !connected && - + } {providerText}