From 8d4e92b90c4f574ff2a9de863608a21be6ecb67d Mon Sep 17 00:00:00 2001
From: viktor <baranov.viktor.27@gmail.com>
Date: Tue, 31 Jul 2018 17:42:04 +0300
Subject: [PATCH] tx list item redesign

---
 app/images/invalid-name.svg                   |  3 ++
 .../components/transaction-list-item-icon.js  | 18 +++-------
 .../app/components/transaction-list-item.js   | 36 +++++++++++++------
 old-ui/app/components/transaction-list.js     |  2 +-
 old-ui/app/css/index.css                      | 12 +++++++
 5 files changed, 45 insertions(+), 26 deletions(-)
 create mode 100644 app/images/invalid-name.svg

diff --git a/app/images/invalid-name.svg b/app/images/invalid-name.svg
new file mode 100644
index 000000000..ad3276fd6
--- /dev/null
+++ b/app/images/invalid-name.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="2" height="18">
+    <path fill="#60DB97" fill-rule="evenodd" d="M1 13a1 1 0 0 1-1-1V1a1 1 0 0 1 2 0v11a1 1 0 0 1-1 1zm0 3a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
+</svg>
diff --git a/old-ui/app/components/transaction-list-item-icon.js b/old-ui/app/components/transaction-list-item-icon.js
index f442b05af..3a5b5d22f 100644
--- a/old-ui/app/components/transaction-list-item-icon.js
+++ b/old-ui/app/components/transaction-list-item-icon.js
@@ -19,18 +19,8 @@ TransactionIcon.prototype.render = function () {
       return h(!isMsg ? '.unapproved-tx-icon' : 'i.fa.fa-certificate.fa-lg')
 
     case 'rejected':
-      return h('i.fa.fa-exclamation-triangle.fa-lg.warning', {
-        style: {
-          width: '24px',
-        },
-      })
-
     case 'failed':
-      return h('i.fa.fa-exclamation-triangle.fa-lg.error', {
-        style: {
-          width: '24px',
-        },
-      })
+      return h('i.tx-warning')
 
     case 'submitted':
       return h(Tooltip, {
@@ -48,20 +38,20 @@ TransactionIcon.prototype.render = function () {
   if (isMsg) {
     return h('i.fa.fa-certificate.fa-lg', {
       style: {
-        width: '24px',
+        width: '40px',
       },
     })
   }
 
   if (txParams.to) {
     return h(Identicon, {
-      diameter: 24,
+      diameter: 40,
       address: txParams.to || transaction.hash,
     })
   } else {
     return h('i.fa.fa-file-text-o.fa-lg', {
       style: {
-        width: '24px',
+        width: '40px',
       },
     })
   }
diff --git a/old-ui/app/components/transaction-list-item.js b/old-ui/app/components/transaction-list-item.js
index 3b81b8db8..b6666deb9 100644
--- a/old-ui/app/components/transaction-list-item.js
+++ b/old-ui/app/components/transaction-list-item.js
@@ -85,7 +85,7 @@ TransactionListItem.prototype.render = function () {
 
   const isClickable = ('hash' in transaction && isLinkable) || isPending
   const valueStyle = {
-    fontFamily: 'Nunito-Bold',
+    fontFamily: 'Nunito Bold',
     width: '100%',
     textAlign: 'right',
     fontSize: '14px',
@@ -93,7 +93,7 @@ TransactionListItem.prototype.render = function () {
   }
 
   const dimStyle = {
-    fontFamily: 'Nunito-Regular',
+    fontFamily: 'Nunito Regular',
     color: '#333333',
     marginLeft: '5px',
     fontSize: '14px',
@@ -136,6 +136,7 @@ TransactionListItem.prototype.render = function () {
         }, [
           h('span', {
             style: {
+              fontFamily: 'Nunito Bold',
               display: 'flex',
               cursor: 'normal',
               flexDirection: 'column',
@@ -146,15 +147,26 @@ TransactionListItem.prototype.render = function () {
           }, nonce),
         ]),
 
-        h('.flex-column', {style: {width: '200px', overflow: 'hidden'}}, [
+        h('.flex-column', {
+          style: {
+            overflow: 'hidden',
+            textAlign: 'left',
+          }
+        }, [
           domainField(txParams),
-          h('div', date),
-          recipientField(txParams, transaction, isTx, isMsg),
+          h('div.flex-row', [
+            recipientField(txParams, transaction, isTx, isMsg),
+            // Places a copy button if tx is successful, else places a placeholder empty div.
+            transaction.hash ? h(CopyButton, { value: transaction.hash }) : h('div', {style: { display: 'flex', alignItems: 'center', width: '26px' }}),
+          ]),
+          h('div', {
+            style: {
+              fontSize: '12px',
+              color: '#777777'
+            }
+          }, date),
         ]),
 
-        // Places a copy button if tx is successful, else places a placeholder empty div.
-        transaction.hash ? h(CopyButton, { value: transaction.hash }) : h('div', {style: { display: 'flex', alignItems: 'center', width: '26px' }}),
-
         isTx ? h(EthBalance, {
           valueStyle,
           dimStyle,
@@ -165,7 +177,9 @@ TransactionListItem.prototype.render = function () {
           shorten: true,
           showFiat: false,
           network,
-          style: {fontSize: '15px'},
+          style: {
+            margin: '0 auto',
+          },
         }) : h('.flex-column'),
       ]),
 
@@ -234,8 +248,8 @@ function recipientField (txParams, transaction, isTx, isMsg) {
 
   return h('div', {
     style: {
-      fontSize: 'x-small',
-      color: '#ABA9AA',
+      fontSize: '14px',
+      color: '#333333',
     },
   }, [
     message,
diff --git a/old-ui/app/components/transaction-list.js b/old-ui/app/components/transaction-list.js
index c77852921..202b84371 100644
--- a/old-ui/app/components/transaction-list.js
+++ b/old-ui/app/components/transaction-list.js
@@ -44,7 +44,7 @@ TransactionList.prototype.render = function () {
         style: {
           overflowY: 'auto',
           height: '100%',
-          padding: '0 25px 0 15px',
+          padding: '0 20px 0 20px',
           textAlign: 'center',
         },
       }, [
diff --git a/old-ui/app/css/index.css b/old-ui/app/css/index.css
index 9959b5a7a..f3788b90b 100644
--- a/old-ui/app/css/index.css
+++ b/old-ui/app/css/index.css
@@ -546,6 +546,18 @@ input.large-input {
   border-radius: 13px;
 }
 
+.tx-warning {
+  width: 60px;
+  height: 60px;
+  border-radius: 30px;
+  background: #6729a8;
+  background-image: url('../images/invalid-name.svg');
+  background-size: 2px 18px;
+  background-position: center;
+  background-repeat: no-repeat;
+  line-height: 60px;
+}
+
 .cell.label {
   font-family: 'Nunito Regular';
   font-size: 14px;