Styling and UX changes on sidebar

2 files changed, 14 insertions, 11 deletions

diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js
index 9c11ca4a5..3cb7a8b76 100644
--- a/ui/app/components/wallet-view.js
+++ b/ui/app/components/wallet-view.js
@@ -43,6 +43,9 @@ function mapDispatchToProps (dispatch) {
 inherits(WalletView, Component)
 function WalletView () {
   Component.call(this)
+  this.state = {
+    hasCopied: false,
+  }
 }
 
 WalletView.prototype.renderWalletBalance = function () {
@@ -132,19 +135,18 @@ WalletView.prototype.render = function () {
     ]),
 
 
-    h('div.wallet-view__address', { onClick: () => copyToClipboard(selectedAddress) }, [
-      `${selectedAddress.slice(0, 4)}...${selectedAddress.slice(-4)}`,
+    h('div.wallet-view__address', {
+      onClick: () => {
+        copyToClipboard(selectedAddress)
+        this.setState({ hasCopied: true })
+        setTimeout(() => this.setState({ hasCopied: false }), 3000)
+      },
+    }, [
+      this.state.hasCopied && 'Copied to Clipboard',
+      !this.state.hasCopied && `${selectedAddress.slice(0, 4)}...${selectedAddress.slice(-4)}`,
       h('i.fa.fa-clipboard', { style: { marginLeft: '8px' } }),
     ]),
 
-    // 'Wallet' - Title
-    // Not visible on mobile
-    h('div.flex-column.wallet-view-title-wrapper', [
-      h('span.wallet-view-title', [
-        'Wallet',
-      ]),
-    ]),
-
     this.renderWalletBalance(),
 
     h(TokenList),
diff --git a/ui/app/css/itcss/components/wallet-balance.scss b/ui/app/css/itcss/components/wallet-balance.scss
index cd44f89bb..64b291b89 100644
--- a/ui/app/css/itcss/components/wallet-balance.scss
+++ b/ui/app/css/itcss/components/wallet-balance.scss
@@ -1,4 +1,4 @@
-$wallet-balance-bg: $gallery;
+$wallet-balance-bg: #e7e7e7;
 $wallet-balance-breakpoint: 890px;
 $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (max-width: #{$wallet-balance-breakpoint})";
 
@@ -20,6 +20,7 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (
   align-items: center;
   flex: 0 0 auto;
   cursor: pointer;
+  border-top: 1px solid $wallet-balance-bg;
 
   .balance-container {
     display: flex;