White icon for copy button

app/images/copy-white.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" style=""><rect id="backgroundrect" width="100%" height="100%" x="0" y="0" fill="none" stroke="none"/>
+    
+<g class="currentLayer" style=""><title>Layer 1</title><path fill="#ffffff" fill-rule="evenodd" d="M13 10a1 1 0 0 1-1-1V2H5a1 1 0 0 1 0-2h8a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1zm-3-5v8a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1zM8 6H2v6h6V6z" id="svg_1" class="selected" fill-opacity="1"/></g></svg>

old-ui/app/account-detail.js

@@ -178,7 +178,8 @@ AccountDetailScreen.prototype.render = function () {
                 }}, checksumAddress),
                 h(CopyButton, {
                   value: checksumAddress,
-                })
+                  isWhite: true,
+                }),
               ]),
             ]),
 

old-ui/app/components/copyButton.js

@@ -1,5 +1,6 @@
 const Component = require('react').Component
 const h = require('react-hyperscript')
+const classNames = require('classnames')
 const inherits = require('util').inherits
 const copyToClipboard = require('copy-to-clipboard')
 
@@ -24,6 +25,7 @@ CopyButton.prototype.render = function () {
   const copied = state.copied
 
   const message = copied ? 'Copied' : props.title || ' Copy '
+  const defaultCopyStyles = ['clipboard', 'cursor-pointer']
 
   return h('.copy-button', {
     style: {
@@ -31,14 +33,14 @@ CopyButton.prototype.render = function () {
       alignItems: 'center',
     },
   }, [
-
     h(Tooltip, {
       title: message,
     }, [
-      h('i.fa.fa-clipboard.cursor-pointer', {
+      h('i', {
         style: {
           marginLeft: '5px',
         },
+        className: props.isWhite ? classNames(defaultCopyStyles.concat(['white'])) : classNames(defaultCopyStyles),
         onClick: (event) => {
           event.preventDefault()
           event.stopPropagation()

old-ui/app/css/index.css

@@ -338,12 +338,16 @@ p.exchanges {
   height: 14px;
 }
 
-.fa-clipboard {
+.clipboard {
   content: url('../images/copy.svg');
   width: 14px;
   height: 14px;
 }
 
+.clipboard.white {
+  content: url('../images/copy-white.svg');
+}
+
 .sandwich-expando {
   background-image: url('../images/menu.svg');
   background-size: 14px 12px;

package-lock.json

@@ -5330,9 +5330,9 @@
             }
         },
         "classnames": {
-            "version": "2.2.5",
-            "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.5.tgz",
-            "integrity": "sha1-+zgB1FNGdknvNgPH1hoCvRKb3m0="
+            "version": "2.2.6",
+            "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
+            "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q=="
         },
         "clean-css": {
             "version": "4.1.11",

package.json

@@ -88,7 +88,7 @@
     "browser-passworder": "^2.0.3",
     "browserify-derequire": "^0.9.4",
     "browserify-unibabel": "^3.0.0",
-    "classnames": "^2.2.5",
+    "classnames": "^2.2.6",
     "clone": "^2.1.1",
     "copy-to-clipboard": "^3.0.8",
     "css-loader": "^0.28.11",