Add html and css for responsive retry button.

3 files changed, 57 insertions, 0 deletions

diff --git a/ui/app/components/tx-list-item.js b/ui/app/components/tx-list-item.js
index 1a13070c8..574d10e14 100644
--- a/ui/app/components/tx-list-item.js
+++ b/ui/app/components/tx-list-item.js
@@ -240,6 +240,15 @@ TxListItem.prototype.render = function () {
 
         ]),
       ]),
+
+      h('div.tx-list-item-retry-container', [
+
+        h('span.tx-list-item-retry-copy', 'Taking too long?'),
+
+        h('span.tx-list-item-retry-link', 'Increase the gas 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 c3df493df..4545897e3 100644
--- a/ui/app/css/itcss/components/transaction-list.scss
+++ b/ui/app/css/itcss/components/transaction-list.scss
@@ -126,6 +126,53 @@
   }
 }
 
+.tx-list-item-retry-container {
+  background: #d1edff;
+  width: 100%;
+  border-radius: 4px;
+  font-size: 0.8em;
+  display: flex;
+  justify-content: center;
+  margin-left: 44px;
+  width: calc(100% - 44px);
+
+  @media screen and (min-width: 576px) and (max-width: 679px) {
+    flex-flow: column;
+    align-items: center;
+  }
+
+  @media screen and (min-width: 380px) and (max-width: 575px) {
+    flex-flow: row;
+  }
+
+  @media screen and (max-width: 379px) {
+    flex-flow: column;
+    align-items: center;
+  }
+}
+
+.tx-list-item-retry-copy {
+  font-family: Roboto;
+}
+
+.tx-list-item-retry-link {
+  text-decoration: underline;
+  margin-left: 6px;
+  cursor: pointer;
+
+  @media screen and (min-width: 576px) and (max-width: 679px) {
+    margin-left: 0px;
+  }
+
+  @media screen and (min-width: 380px) and (max-width: 575px) {
+    margin-left: 6px;
+  }
+
+  @media screen and (max-width: 379px) {
+    margin-left: 0px;
+  }
+}
+
 .tx-list-date {
   color: $dusty-gray;
   font-size: 12px;
diff --git a/ui/app/css/itcss/settings/variables.scss b/ui/app/css/itcss/settings/variables.scss
index 4c0972527..1b5f1a491 100644
--- a/ui/app/css/itcss/settings/variables.scss
+++ b/ui/app/css/itcss/settings/variables.scss
@@ -46,6 +46,7 @@ $manatee: #93949d;
 $spindle: #c7ddec;
 $mid-gray: #5b5d67;
 $cape-cod: #38393a;
+$onahau: #d1edff;
 
 /*
   Z-Indicies