Update of tx list item screen, new icons for contract and pending tx

CHANGELOG.md

@@ -2,6 +2,9 @@
 
 ## Current Master
 
+- [#69](https://github.com/poanetwork/metamask-extension/pull/69): Restyling: fix page headers, redesigned warnings, fix paddings, update some icons, redesigned page for buying, redesigned confirm screens, redesigned account menu
+- [#67](https://github.com/poanetwork/metamask-extension/pull/67): Improve performance when big list of sent transactions from account
+
 ## 4.8.3 Fri Aug 03 2018
 
 - [#59](https://github.com/poanetwork/metamask-extension/pull/59): Update e2e test of Terms of Use page

app/images/contract-small.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="19" height="22">
+    <path fill="#60DB97" fill-rule="evenodd" d="M2.639 0h7.917L19 8.381v11A2.629 2.629 0 0 1 16.361 22H2.639A2.629 2.629 0 0 1 0 19.381V2.619A2.629 2.629 0 0 1 2.639 0z"/>
+    <path fill="#449A6A" fill-rule="evenodd" d="M13.495 8.006a2.502 2.502 0 0 1-2.502-2.502V0L19 8.006h-5.505zM7.214 8H4.786A.786.786 0 0 1 4 7.214v-.428C4 6.352 4.352 6 4.786 6h2.428c.434 0 .786.352.786.786v.428A.786.786 0 0 1 7.214 8zm-2.428 3h9.428c.434 0 .786.352.786.786v.428a.786.786 0 0 1-.786.786H4.786A.786.786 0 0 1 4 12.214v-.428c0-.434.352-.786.786-.786zm0 5h9.428c.434 0 .786.352.786.786v.428a.786.786 0 0 1-.786.786H4.786A.786.786 0 0 1 4 17.214v-.428c0-.434.352-.786.786-.786z"/>
+</svg>

app/images/contract.svg

@@ -0,0 +1 @@
+<svg height="42" width="36" xmlns="http://www.w3.org/2000/svg"><g fill-rule="evenodd"><path d="m5 0h15l16 16v21a5 5 0 0 1 -5 5h-26a5 5 0 0 1 -5-5v-32a5 5 0 0 1 5-5z" fill="#60db97"/><path d="m25 16a5 5 0 0 1 -5-5v-11l16 16zm-10 0h-8a1 1 0 0 1 -1-1v-1a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v1a1 1 0 0 1 -1 1zm-8 6h22a1 1 0 0 1 1 1v1a1 1 0 0 1 -1 1h-22a1 1 0 0 1 -1-1v-1a1 1 0 0 1 1-1zm0 9h22a1 1 0 0 1 1 1v1a1 1 0 0 1 -1 1h-22a1 1 0 0 1 -1-1v-1a1 1 0 0 1 1-1z" fill="#449a6a"/></g></svg>

app/images/new-tx.svg

@@ -0,0 +1 @@
+<svg height="5" width="21" xmlns="http://www.w3.org/2000/svg"><path d="m18.5 5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5zm-8 0a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5zm-8 0a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z" fill="#6729a8" fill-rule="evenodd"/></svg>

old-ui/app/components/buy-button-subview.js

@@ -157,29 +157,24 @@ BuyButtonSubview.prototype.primarySubview = function () {
             margin: '20px 30px',
           },
         }, [
-          network !== '99' ? h('p.cursor-pointer', {
+          network !== '99' ? h('p.exchanges.cursor-pointer', {
-            style: {marginBottom: '10px'},
             onClick: () => this.props.dispatch(actions.buyEth({ network })),
           },
-            [h('span', {style: {marginRight: '10px', color: '#6729a8'}}, label), h('i.arrow-right')]) : null,
+            [h('span', {style: {marginRight: '10px', color: '#6729a8'}}, label)]) : null,
-          network === '99' ? h('p.cursor-pointer', {
+          network === '99' ? h('p.exchanges.cursor-pointer', {
-            style: {marginBottom: '10px'},
             onClick: () => this.props.dispatch(actions.buyEth({ network, exchange: 'binance' })),
-          }, [h('span', {style: {marginRight: '10px', color: '#6729a8'}}, 'Binance'), h('i.arrow-right')]) : null,
+          }, [h('span', {style: {marginRight: '10px', color: '#6729a8'}}, 'Binance')]) : null,
-          network === '99' ? h('p.cursor-pointer', {
+          network === '99' ? h('p.exchanges.cursor-pointer', {
-            style: {marginBottom: '10px'},
             onClick: () => this.props.dispatch(actions.buyEth({ network, exchange: 'bibox' })),
-          }, [h('span', {style: {marginRight: '10px', color: '#6729a8'}}, 'BiBox'), h('i.arrow-right')]) : null,
+          }, [h('span', {style: {marginRight: '10px', color: '#6729a8'}}, 'BiBox')]) : null,
-          network === '99' ? h('p.cursor-pointer', {
+          network === '99' ? h('p.exchanges.cursor-pointer', {
-            style: {marginBottom: '10px'},
             onClick: () => this.props.dispatch(actions.buyEth({ network, exchange: 'cex.plus' })),
-          }, [h('span', {style: {marginRight: '10px', color: '#6729a8'}}, 'CEX Plus'), h('i.arrow-right')]) : null,
+          }, [h('span', {style: {marginRight: '10px', color: '#6729a8'}}, 'CEX Plus')]) : null,
           // Kovan only: Dharma loans beta
           network === '42' ? (
-            h('p.cursor-pointer', {
+            h('p.exchanges.cursor-pointer', {
-              style: {marginBottom: '10px'},
               onClick: () => this.navigateTo('https://borrow.dharma.io/'),
-            }, [h('span', {style: {marginRight: '10px', color: '#6729a8'}}, 'Borrow With Dharma (Beta)'), h('i.arrow-right')])
+            }, [h('span', {style: {marginRight: '10px', color: '#6729a8'}}, 'Borrow With Dharma (Beta)')])
           ) : null,
       ])
     )

old-ui/app/components/copyButton.js

@@ -37,7 +37,7 @@ CopyButton.prototype.render = function () {
     }, [
       h('i.fa.fa-clipboard.cursor-pointer.color-violet', {
         style: {
-          margin: '5px',
+          marginLeft: '5px',
         },
         onClick: (event) => {
           event.preventDefault()

old-ui/app/components/mini-account-panel.js

@@ -50,7 +50,7 @@ AccountPanel.prototype.genIcon = function (seed, picOrder) {
         order: picOrder === 'left' ? 1 : 3,
       },
     }, [
-      h('i.fa.fa-file-text-o.fa-lg', {
+      h('i.contract', {
         style: {
           fontSize: '42px',
           transform: 'translate(0px, -16px)',

old-ui/app/components/transaction-list-item-icon.js

@@ -27,9 +27,9 @@ TransactionIcon.prototype.render = function () {
         title: 'Pending',
         position: 'right',
       }, [
-        h('i.fa.fa-ellipsis-h', {
+        h('i.new-tx', {
           style: {
-            fontSize: '27px',
+            marginLeft: '10px',
           },
         }),
       ])
@@ -49,9 +49,9 @@ TransactionIcon.prototype.render = function () {
       address: txParams.to || transaction.hash,
     })
   } else {
-    return h('i.fa.fa-file-text-o.fa-lg', {
+    return h('i.contract-small', {
       style: {
-        width: '40px',
+        marginLeft: '11px',
       },
     })
   }

old-ui/app/components/transaction-list-item.js

@@ -149,7 +149,6 @@ TransactionListItem.prototype.render = function () {
 
         h('.flex-column', {
           style: {
-            overflow: 'hidden',
             textAlign: 'left',
           },
         }, [
@@ -176,7 +175,7 @@ TransactionListItem.prototype.render = function () {
           showFiat: false,
           network,
           style: {
-            margin: '0 auto',
+            margin: '0px auto 0px 5px',
           },
         }) : h('.flex-column'),
       ]),
@@ -247,9 +246,9 @@ function recipientField (txParams, transaction, isTx, isMsg) {
       color: '#333333',
     },
   }, [
-    message,
+    h('span', (!txParams.to ? {style: {whiteSpace: 'nowrap'}} : null), message),
     // Places a copy button if tx is successful, else places a placeholder empty div.
-    transaction.hash ? h(CopyButton, { value: transaction.hash, display: 'inline-flex' }) : h('div', {style: { display: 'flex', alignItems: 'center', width: '26px' }}),
+    transaction.hash ? h(CopyButton, { value: transaction.hash, display: 'inline' }) : h('div', {style: { display: 'flex', alignItems: 'center', width: '26px' }}),
     renderErrorOrWarning(transaction),
   ])
 }
@@ -263,12 +262,12 @@ function renderErrorOrWarning (transaction) {
 
   // show dropped
   if (status === 'dropped') {
-    return h('div.dropped', ' (Dropped)')
+    return h('div', ' (Dropped)')
   }
 
   // show rejected
   if (status === 'rejected') {
-    return h('div.error', ' (Rejected)')
+    return h('div', ' (Rejected)')
   }
 
   // show error
@@ -279,7 +278,7 @@ function renderErrorOrWarning (transaction) {
           title: message,
           position: 'bottom',
         }, [
-          h(`div.error`, ` (Failed)`),
+          h(`div`, ` (Failed)`),
         ])
     )
   }
@@ -291,7 +290,7 @@ function renderErrorOrWarning (transaction) {
       title: message,
       position: 'bottom',
     }, [
-      h(`div.warning`, ` (Warning)`),
+      h(`div`, ` (Warning)`),
     ])
   }
 }

old-ui/app/css/index.css

@@ -269,8 +269,14 @@ app sections
   color: #8fdc97;
 }
 
-.dropped {
+p.exchanges {
-  color: #6195ED;
+  margin-bottom: 10px;
+}
+
+.new-tx {
+  background-image: url('../images/new-tx.svg');
+  width: 21px;
+  height: 5px;
 }
 
 .lock {
@@ -596,12 +602,13 @@ input.large-input {
   background: rgb(47, 174, 244);
   border-color: #AEAEAE;
   border-radius: 13px;
+  margin-left: 10px;
 }
 
 .tx-warning {
-  width: 60px;
+  width: 40px;
-  height: 60px;
+  height: 40px;
-  border-radius: 30px;
+  border-radius: 20px;
   background: #6729a8;
   background-image: url('../images/invalid-name.svg');
   background-size: 2px 18px;
@@ -970,6 +977,18 @@ div.message-container > div:first-child {
   background-color: rgba(103,41,168, 0.2);
 }
 
+.contract {
+  content: url('../images/contract.svg');
+  width: 36px;
+  height: 42px;
+}
+
+.contract-small {
+  content: url('../images/contract-small.svg');
+  width: 19px;
+  height: 22px;
+}
+
 .hidden {
   visibility: hidden;
 }