From 45efbbecb732e33acf36426ad17dd83d80ddcb3c Mon Sep 17 00:00:00 2001
From: ricky <ricky.miller@gmail.com>
Date: Mon, 16 Mar 2020 09:44:02 -0400
Subject: [PATCH] Use new Copy icon (#8190)

* Use new Copy icon

* split props to two lines

* Add padding
---
 app/images/copy-to-clipboard.svg                          | 7 -------
 .../app/transaction-list-item-details/index.scss          | 5 -----
 .../transaction-list-item-details.component.js            | 6 ++----
 ui/app/pages/settings/contact-list-tab/index.scss         | 7 +++++--
 .../view-contact/view-contact.component.js                | 8 +++++---
 5 files changed, 12 insertions(+), 21 deletions(-)
 delete mode 100644 app/images/copy-to-clipboard.svg

diff --git a/app/images/copy-to-clipboard.svg b/app/images/copy-to-clipboard.svg
deleted file mode 100644
index 27f0f5876..000000000
--- a/app/images/copy-to-clipboard.svg
+++ /dev/null
@@ -1,7 +0,0 @@
-<svg height="17" width="18" xmlns="http://www.w3.org/2000/svg">
-    <g fill="none" fill-rule="evenodd">
-        <path d="M1.745 1h12.022v12H1.745z" stroke="#3098dc" stroke-width="2"/>
-        <path d="M2.903 2h14.022v14H2.903z" fill="#fff"/>
-        <path d="M4.981 4h12.022v12H4.981z" stroke="#3098dc" stroke-width="2"/>
-    </g>
-</svg>
diff --git a/ui/app/components/app/transaction-list-item-details/index.scss b/ui/app/components/app/transaction-list-item-details/index.scss
index 7cb253e4e..2e3a06f84 100644
--- a/ui/app/components/app/transaction-list-item-details/index.scss
+++ b/ui/app/components/app/transaction-list-item-details/index.scss
@@ -22,11 +22,6 @@
     &:not(:last-child) {
       margin-right: 8px;
     }
-
-    &__copy-icon {
-      width: 10px;
-      height: 10px;
-    }
   }
 
   &__sender-to-recipient-container {
diff --git a/ui/app/components/app/transaction-list-item-details/transaction-list-item-details.component.js b/ui/app/components/app/transaction-list-item-details/transaction-list-item-details.component.js
index 2fece12dc..6ad7b8763 100644
--- a/ui/app/components/app/transaction-list-item-details/transaction-list-item-details.component.js
+++ b/ui/app/components/app/transaction-list-item-details/transaction-list-item-details.component.js
@@ -10,6 +10,7 @@ import TransactionActivityLog from '../transaction-activity-log'
 import TransactionBreakdown from '../transaction-breakdown'
 import Button from '../../ui/button'
 import Tooltip from '../../ui/tooltip'
+import Copy from '../../ui/icon/copy-icon.component'
 
 export default class TransactionListItemDetails extends PureComponent {
   static contextTypes = {
@@ -178,10 +179,7 @@ export default class TransactionListItemDetails extends PureComponent {
                 className="transaction-list-item-details__header-button"
                 disabled={!hash}
               >
-                <img
-                  className="transaction-list-item-details__header-button__copy-icon"
-                  src="/images/copy-to-clipboard.svg"
-                />
+                <Copy size={10} color="#3098DC" />
               </Button>
             </Tooltip>
             <Tooltip title={blockExplorerUrl ? t('viewOnCustomBlockExplorer', [blockExplorerUrl]) : t('viewOnEtherscan')}>
diff --git a/ui/app/pages/settings/contact-list-tab/index.scss b/ui/app/pages/settings/contact-list-tab/index.scss
index 0e338450f..6a750c604 100644
--- a/ui/app/pages/settings/contact-list-tab/index.scss
+++ b/ui/app/pages/settings/contact-list-tab/index.scss
@@ -97,9 +97,12 @@
         }
 
         &--copy-icon {
-          padding-left: 4px;
-          width: 30px;
+          display: inline-block;
+          width: 20px;
           height: 20px;
+          padding: 0;
+          background: none;
+          padding-left: 10px;
         }
       }
 
diff --git a/ui/app/pages/settings/contact-list-tab/view-contact/view-contact.component.js b/ui/app/pages/settings/contact-list-tab/view-contact/view-contact.component.js
index fbc071504..e251aff6f 100644
--- a/ui/app/pages/settings/contact-list-tab/view-contact/view-contact.component.js
+++ b/ui/app/pages/settings/contact-list-tab/view-contact/view-contact.component.js
@@ -1,6 +1,7 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import Identicon from '../../../../components/ui/identicon'
+import Copy from '../../../../components/ui/icon/copy-icon.component'
 
 import Button from '../../../../components/ui/button/button.component'
 import copyToClipboard from 'copy-to-clipboard'
@@ -55,11 +56,12 @@ export default class ViewContact extends PureComponent {
               >
                 { quadSplit(checkSummedAddress) }
               </div>
-              <img
+              <button
                 className="address-book__view-contact__group__static-address--copy-icon"
                 onClick={() => copyToClipboard(checkSummedAddress)}
-                src="/images/copy-to-clipboard.svg"
-              />
+              >
+                <Copy size={20} color="#3098DC" />
+              </button>
             </div>
           </div>
           <div className="address-book__view-contact__group">