diff --git a/common/components/BalanceSidebar/AccountInfo.scss b/common/components/BalanceSidebar/AccountInfo.scss index fde80af6..447b1055 100644 --- a/common/components/BalanceSidebar/AccountInfo.scss +++ b/common/components/BalanceSidebar/AccountInfo.scss @@ -2,24 +2,28 @@ @import 'common/sass/mixins'; .AccountInfo { - &-copy-icon{ - display: inline; - color: $gray-light; - .fa{ - margin-right: 3px; - } - &-copied{ - color: $brand-success; - cursor: pointer; - .fa{ - margin-right: 3px; - } - } + &-copy { + display: inline-block; + cursor: pointer; + color: $text-color; + font-size: $font-size-xs; + opacity: 0.5; + transition: $transition; + &:hover{ - cursor: pointer; - color: $text-color; + opacity: 1; + } + + &.is-copied{ + color: $brand-success; + opacity: 1; + } + + .fa { + margin-right: $space-xs; } } + &-section { margin-top: $space * 1.5; @@ -81,6 +85,7 @@ } &-addr { + margin-top: -$space-xs; word-wrap: break-word; @include mono; } diff --git a/common/components/BalanceSidebar/AccountInfo.tsx b/common/components/BalanceSidebar/AccountInfo.tsx index 325e17fd..939fc801 100644 --- a/common/components/BalanceSidebar/AccountInfo.tsx +++ b/common/components/BalanceSidebar/AccountInfo.tsx @@ -1,15 +1,16 @@ +import React from 'react'; +import { connect } from 'react-redux'; +import { toChecksumAddress } from 'ethereumjs-util'; +import { CopyToClipboard } from 'react-copy-to-clipboard'; import { Identicon, UnitDisplay, Address, NewTabLink } from 'components/ui'; import { IWallet, Balance, TrezorWallet, LedgerWallet } from 'libs/wallet'; -import React from 'react'; import translate from 'translations'; -import './AccountInfo.scss'; import Spinner from 'components/ui/Spinner'; import { getNetworkConfig, getOffline } from 'selectors/config'; import { AppState } from 'reducers'; -import { connect } from 'react-redux'; import { NetworkConfig } from 'types/network'; import { TSetAccountBalance, setAccountBalance } from 'actions/wallet'; -import { CopyToClipboard } from 'react-copy-to-clipboard'; +import './AccountInfo.scss'; interface OwnProps { wallet: IWallet; @@ -106,10 +107,10 @@ class AccountInfo extends React.Component {
- +
{this.state.copied ? 'copied!' : 'copy address'}