Merge pull request #4815 from MetaMask/i4783-retry

Increase clickable area and padding of Retry Transaction bar

2 files changed, 14 insertions, 20 deletions

diff --git a/ui/app/components/tx-list-item.js b/ui/app/components/tx-list-item.js
index e539514ec..0d693b805 100644
--- a/ui/app/components/tx-list-item.js
+++ b/ui/app/components/tx-list-item.js
@@ -307,20 +307,16 @@ TxListItem.prototype.render = function () {
         ]),
       ]),
 
-      this.showRetryButton() && h('div.tx-list-item-retry-container', [
-
-        h('span.tx-list-item-retry-copy', 'Taking too long?'),
-
-        h('span.tx-list-item-retry-link', {
-          onClick: (event) => {
-            event.stopPropagation()
-            if (isTokenTx) {
-              this.setSelectedToken(txParams.to)
-            }
-            this.resubmit()
-          },
-        }, 'Increase the gas price on your transaction'),
-
+      this.showRetryButton() && h('.tx-list-item-retry-container', {
+        onClick: (event) => {
+          event.stopPropagation()
+          if (isTokenTx) {
+            this.setSelectedToken(txParams.to)
+          }
+          this.resubmit()
+        },
+      }, [
+        h('span', 'Taking too long? Increase the gas price on your transaction'),
       ]),
 
     ]), // holding on icon from design
diff --git a/ui/app/css/itcss/components/transaction-list.scss b/ui/app/css/itcss/components/transaction-list.scss
index d03faf486..1d45ff13b 100644
--- a/ui/app/css/itcss/components/transaction-list.scss
+++ b/ui/app/css/itcss/components/transaction-list.scss
@@ -129,12 +129,14 @@
 .tx-list-item-retry-container {
   background: #d1edff;
   width: 100%;
-  border-radius: 4px;
-  font-size: 0.8em;
+  border-radius: 12px;
+  font-size: .75rem;
   display: flex;
   justify-content: center;
   margin-left: 44px;
   width: calc(100% - 44px);
+  padding: 4px;
+  cursor: pointer;
 
   @media screen and (min-width: 576px) and (max-width: 679px) {
     flex-flow: column;
@@ -151,10 +153,6 @@
   }
 }
 
-.tx-list-item-retry-copy {
-  font-family: Roboto;
-}
-
 .tx-list-item-retry-link {
   text-decoration: underline;
   margin-left: 6px;