aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--CHANGELOG.md2
-rw-r--r--README.md2
-rw-r--r--app/_locales/en/messages.json6
-rw-r--r--app/_locales/zh_TW/messages.json3
-rw-r--r--app/images/icons/3dots.svg5
-rw-r--r--app/images/icons/caret-down.svg3
-rw-r--r--app/images/icons/hamburger.svg7
-rw-r--r--app/images/logo/metamask-fox.svg157
-rw-r--r--package.json2
-rw-r--r--test/e2e/beta/metamask-beta-ui.spec.js16
-rw-r--r--ui/app/components/app/account-menu/index.scss2
-rw-r--r--ui/app/components/app/app-header/app-header.component.js2
-rw-r--r--ui/app/components/app/app-header/index.scss5
-rw-r--r--ui/app/components/app/dropdowns/account-details-dropdown.js5
-rw-r--r--ui/app/components/app/dropdowns/components/menu.js4
-rw-r--r--ui/app/components/app/menu-bar/index.scss19
-rw-r--r--ui/app/components/app/menu-bar/menu-bar.component.js4
-rw-r--r--ui/app/components/app/network.js12
-rw-r--r--ui/app/components/app/selected-account/index.scss11
-rw-r--r--ui/app/components/app/transaction-list-item/index.scss19
-rw-r--r--ui/app/components/app/transaction-list-item/transaction-list-item.component.js2
-rw-r--r--ui/app/components/app/transaction-list/index.scss7
-rw-r--r--ui/app/components/app/transaction-status/index.scss5
-rw-r--r--ui/app/components/app/transaction-view-balance/index.scss14
-rw-r--r--ui/app/components/ui/currency-display/index.scss1
-rw-r--r--ui/app/components/ui/page-container/page-container-footer/page-container-footer.component.js4
-rw-r--r--ui/app/css/itcss/components/menu.scss7
-rw-r--r--ui/app/css/itcss/components/network.scss20
-rw-r--r--ui/app/css/itcss/components/new-account.scss1
-rw-r--r--ui/app/css/itcss/settings/variables.scss18
-rw-r--r--ui/app/pages/create-account/import-account/json.js6
-rw-r--r--ui/app/pages/mobile-sync/index.js29
-rw-r--r--ui/app/pages/settings/index.scss10
-rw-r--r--ui/app/pages/settings/networks-tab/index.scss30
-rw-r--r--ui/app/pages/settings/networks-tab/network-form/network-form.component.js128
-rw-r--r--ui/app/pages/settings/networks-tab/networks-tab.component.js80
-rw-r--r--ui/app/pages/settings/networks-tab/networks-tab.constants.js9
-rw-r--r--ui/app/pages/settings/networks-tab/networks-tab.container.js4
-rw-r--r--ui/app/pages/settings/settings.component.js2
39 files changed, 422 insertions, 241 deletions
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 03f988d57..0f4377e14 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,10 +1,12 @@
# Changelog
## Current Develop Branch
+- [#6700](https://github.com/MetaMask/metamask-extension/pull/6700): Fix styles on 'import account' page, update help link
## 6.6.2 Fri Jun 07 2019
- [#6690](https://github.com/MetaMask/metamask-extension/pull/6690): Update dependencies, re-enable npm audit CI job
+- [#6700](https://github.com/MetaMask/metamask-extension/pull/6700): Fix styles on 'import account' page, update help link
## 6.6.1 Thu Jun 06 2019
diff --git a/README.md b/README.md
index 15c4c48a2..b742e1868 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,5 @@
# MetaMask Browser Extension
-[![Build Status](https://circleci.com/gh/MetaMask/metamask-extension.svg?style=shield&circle-token=a1ddcf3cd38e29267f254c9c59d556d513e3a1fd)](https://circleci.com/gh/MetaMask/metamask-extension) [![Coverage Status](https://coveralls.io/repos/github/MetaMask/metamask-extension/badge.svg?branch=master)](https://coveralls.io/github/MetaMask/metamask-extension?branch=master) [![Stories in Ready](https://badge.waffle.io/MetaMask/metamask-extension.png?label=in%20progress&title=waffle.io)](https://waffle.io/MetaMask/metamask-extension)
+[![Build Status](https://circleci.com/gh/MetaMask/metamask-extension.svg?style=shield&circle-token=a1ddcf3cd38e29267f254c9c59d556d513e3a1fd)](https://circleci.com/gh/MetaMask/metamask-extension) [![Coverage Status](https://coveralls.io/repos/github/MetaMask/metamask-extension/badge.svg?branch=master)](https://coveralls.io/github/MetaMask/metamask-extension?branch=master)
You can find the latest version of MetaMask on [our official website](https://metamask.io/). For help using MetaMask, visit our [User Support Site](https://metamask.zendesk.com/hc/en-us).
diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index 41ba7ef7a..774ae4c85 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -454,6 +454,9 @@
"defaultNetwork": {
"message": "The default network for Ether transactions is Main Net."
},
+ "delete": {
+ "message": "Delete"
+ },
"denExplainer": {
"message": "Your DEN is your password-encrypted storage within MetaMask."
},
@@ -1742,6 +1745,9 @@
"viewAccount": {
"message": "View Account"
},
+ "viewinExplorer": {
+ "message": "View in Explorer"
+ },
"viewOnCustomBlockExplorer": {
"message": "View at $1"
},
diff --git a/app/_locales/zh_TW/messages.json b/app/_locales/zh_TW/messages.json
index c645f2af1..4df95f72f 100644
--- a/app/_locales/zh_TW/messages.json
+++ b/app/_locales/zh_TW/messages.json
@@ -366,6 +366,9 @@
"defaultNetwork": {
"message": "預設乙太幣交易網路為主網路"
},
+ "delete": {
+ "message": "刪除"
+ },
"denExplainer": {
"message": "您的 DEN 是 MetaMask 中您的的密碼加密儲存庫。"
},
diff --git a/app/images/icons/3dots.svg b/app/images/icons/3dots.svg
new file mode 100644
index 000000000..07bbad137
--- /dev/null
+++ b/app/images/icons/3dots.svg
@@ -0,0 +1,5 @@
+<svg width="20" height="4" viewBox="0 0 20 4" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M2 4C3.10457 4 4 3.10457 4 2C4 0.89543 3.10457 0 2 0C0.89543 0 0 0.89543 0 2C0 3.10457 0.89543 4 2 4Z" fill="#6A737D"/>
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M10 4C11.1046 4 12 3.10457 12 2C12 0.89543 11.1046 0 10 0C8.89543 0 8 0.89543 8 2C8 3.10457 8.89543 4 10 4Z" fill="#6A737D"/>
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M18 4C19.1046 4 20 3.10457 20 2C20 0.89543 19.1046 0 18 0C16.8954 0 16 0.89543 16 2C16 3.10457 16.8954 4 18 4Z" fill="#6A737D"/>
+</svg>
diff --git a/app/images/icons/caret-down.svg b/app/images/icons/caret-down.svg
new file mode 100644
index 000000000..06790bf92
--- /dev/null
+++ b/app/images/icons/caret-down.svg
@@ -0,0 +1,3 @@
+<svg width="11" height="7" viewBox="0 0 11 7" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <path d="M1 1L5.57143 5.57143L10.1407 1.0022" stroke="#545556"/>
+</svg>
diff --git a/app/images/icons/hamburger.svg b/app/images/icons/hamburger.svg
new file mode 100644
index 000000000..7a6da3089
--- /dev/null
+++ b/app/images/icons/hamburger.svg
@@ -0,0 +1,7 @@
+<svg width="20" height="15" viewBox="0 0 20 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <g id="hamburger">
+ <rect id="Rectangle 3" width="20" height="3" rx="1.5" fill="#6A737D"/>
+ <rect id="Rectangle 3_2" y="6" width="20" height="3" rx="1.5" fill="#6A737D"/>
+ <rect id="Rectangle 3_3" y="12" width="20" height="3" rx="1.5" fill="#6A737D"/>
+ </g>
+</svg>
diff --git a/app/images/logo/metamask-fox.svg b/app/images/logo/metamask-fox.svg
index f3c24f79e..60a827b02 100644
--- a/app/images/logo/metamask-fox.svg
+++ b/app/images/logo/metamask-fox.svg
@@ -1,128 +1,31 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
-<svg version="1.1" id="Layer_1" xmlns:ev="http://www.w3.org/2001/xml-events"
- xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 318.6 318.6"
- style="enable-background:new 0 0 318.6 318.6;" xml:space="preserve">
-<style type="text/css">
- .st0{fill:#161616;stroke:#161616;}
- .st1{fill:#E4761B;stroke:#E4761B;stroke-linecap:round;stroke-linejoin:round;}
- .st2{fill:#763D16;stroke:#763D16;stroke-linecap:round;stroke-linejoin:round;}
- .st3{fill:#F6851B;stroke:#F6851B;stroke-linecap:round;stroke-linejoin:round;}
- .st4{fill:#E2761B;stroke:#E2761B;stroke-linecap:round;stroke-linejoin:round;}
- .st5{fill:#CD6116;stroke:#CD6116;stroke-linecap:round;stroke-linejoin:round;}
- .st6{fill:#C0AD9E;stroke:#C0AD9E;stroke-linecap:round;stroke-linejoin:round;}
- .st7{fill:#D7C1B3;stroke:#D7C1B3;stroke-linecap:round;stroke-linejoin:round;}
- .st8{fill:#E4751F;stroke:#E4751F;stroke-linecap:round;stroke-linejoin:round;}
- .st9{fill:#233447;stroke:#233447;stroke-linecap:round;stroke-linejoin:round;}
- .st10{fill:#161616;stroke:#161616;stroke-linecap:round;stroke-linejoin:round;}
-</style>
-<polygon class="st0" points="277.3,145.6 272.3,142 280.3,134.7 274.2,129.9 282.2,123.8 276.9,119.8 285.3,79 272.7,41.1
- 191.6,71.4 124.1,71.4 43,41.1 30.4,79 38.9,119.8 33.5,123.8 41.5,129.9 35.4,134.7 43.4,142 38.4,145.6 49.9,159.1 32.5,213.3
- 48.6,268.6 105.3,253 116.3,262 138.7,277.5 177,277.5 199.4,262 210.4,253 267.1,268.6 283.3,213.3 265.8,159.1 "/>
-<g>
- <polygon class="st1" points="105.3,253 48.6,268.6 32.5,213.3 "/>
- <polygon class="st1" points="283.3,213.3 267.1,268.6 210.4,253 "/>
- <polygon class="st2" points="265.8,159.1 213.5,143.8 231.8,139 "/>
- <polygon class="st2" points="49.9,159.1 84,139 102.2,143.8 "/>
- <polygon class="st2" points="43.4,142 41.5,129.9 84,139 "/>
- <polygon class="st2" points="272.3,142 231.8,139 274.2,129.9 "/>
- <polygon class="st2" points="272.3,142 265.8,159.1 231.8,139 "/>
- <polygon class="st2" points="43.4,142 84,139 49.9,159.1 "/>
- <polygon class="st2" points="231.8,139 276.9,119.8 274.2,129.9 "/>
- <polygon class="st2" points="84,139 41.5,129.9 38.9,119.8 "/>
- <polygon class="st3" points="124.1,71.4 191.6,71.4 176.5,112.5 "/>
- <polygon class="st3" points="176.5,112.5 139.2,112.5 124.1,71.4 "/>
- <polygon class="st2" points="276.9,119.8 231.8,139 231,87.4 "/>
- <polygon class="st2" points="102.2,143.8 84,139 84.7,87.4 "/>
- <polygon class="st2" points="84.7,87.4 84,139 38.9,119.8 "/>
- <polygon class="st2" points="231,87.4 231.8,139 213.5,143.8 "/>
- <polygon class="st1" points="139.2,112.5 43,41.1 124.1,71.4 "/>
- <polygon class="st4" points="272.7,41.1 176.5,112.5 191.6,71.4 "/>
- <polygon class="st1" points="210.4,253 236.9,213.3 283.3,213.3 "/>
- <polygon class="st1" points="32.5,213.3 78.9,213.3 105.3,253 "/>
- <polygon class="st3" points="229.3,167.7 283.3,213.3 236.9,213.3 "/>
- <polygon class="st3" points="86.4,167.7 32.5,213.3 49.9,159.1 "/>
- <polygon class="st3" points="78.9,213.3 32.5,213.3 86.4,167.7 "/>
- <polygon class="st3" points="229.3,167.7 265.8,159.1 283.3,213.3 "/>
- <polygon class="st2" points="84.7,87.4 139.2,112.5 102.2,143.8 "/>
- <polygon class="st2" points="213.5,143.8 176.5,112.5 231,87.4 "/>
- <polygon class="st2" points="265.8,159.1 272.3,142 277.3,145.6 "/>
- <polygon class="st2" points="49.9,159.1 38.4,145.6 43.4,142 "/>
- <polygon class="st2" points="272.3,142 274.2,129.9 280.3,134.7 "/>
- <polygon class="st2" points="43.4,142 35.4,134.7 41.5,129.9 "/>
- <polygon class="st2" points="33.5,123.8 38.9,119.8 41.5,129.9 "/>
- <polygon class="st2" points="282.2,123.8 274.2,129.9 276.9,119.8 "/>
- <polygon class="st3" points="49.9,159.1 102.2,143.8 86.4,167.7 "/>
- <polygon class="st3" points="265.8,159.1 229.3,167.7 213.5,143.8 "/>
- <polygon class="st2" points="38.9,119.8 30.4,79 84.7,87.4 "/>
- <polygon class="st2" points="231,87.4 285.3,79 276.9,119.8 "/>
- <polygon class="st1" points="102.2,143.8 139.2,112.5 142.6,170.2 "/>
- <polygon class="st1" points="213.5,143.8 229.3,167.7 173.1,170.2 "/>
- <polygon class="st1" points="173.1,170.2 176.5,112.5 213.5,143.8 "/>
- <polygon class="st1" points="142.6,170.2 86.4,167.7 102.2,143.8 "/>
- <polygon class="st2" points="272.7,41.1 285.3,79 231,87.4 "/>
- <polygon class="st2" points="43,41.1 139.2,112.5 84.7,87.4 "/>
- <polygon class="st2" points="231,87.4 176.5,112.5 272.7,41.1 "/>
- <polygon class="st2" points="84.7,87.4 30.4,79 43,41.1 "/>
- <polygon class="st5" points="105.3,253 78.9,213.3 110,213.7 "/>
- <polygon class="st5" points="210.4,253 205.7,213.7 236.9,213.3 "/>
- <polygon class="st3" points="173.1,170.2 142.6,170.2 139.2,112.5 "/>
- <polygon class="st3" points="139.2,112.5 176.5,112.5 173.1,170.2 "/>
- <polygon class="st6" points="116.3,262 105.3,253 136.8,267.9 "/>
- <polygon class="st6" points="178.9,267.9 210.4,253 199.4,262 "/>
- <polygon class="st7" points="136.6,258.6 136.8,267.9 105.3,253 "/>
- <polygon class="st7" points="179.2,258.6 210.4,253 178.9,267.9 "/>
- <polygon class="st3" points="86.4,167.7 110,213.7 78.9,213.3 "/>
- <polygon class="st3" points="236.9,213.3 205.7,213.7 229.3,167.7 "/>
- <polygon class="st8" points="86.4,167.7 109.2,190.8 110,213.7 "/>
- <polygon class="st8" points="229.3,167.7 205.7,213.7 206.6,190.8 "/>
- <polygon class="st7" points="105.3,253 139.2,236.5 136.6,258.6 "/>
- <polygon class="st7" points="210.4,253 179.2,258.6 176.5,236.5 "/>
- <polygon class="st1" points="139.2,236.5 105.3,253 110,213.7 "/>
- <polygon class="st1" points="176.5,236.5 205.7,213.7 210.4,253 "/>
- <polygon class="st5" points="173.1,170.2 229.3,167.7 206.6,190.8 "/>
- <polygon class="st5" points="109.2,190.8 86.4,167.7 142.6,170.2 "/>
- <polygon class="st5" points="142.6,170.2 129.1,181.7 109.2,190.8 "/>
- <polygon class="st5" points="206.6,190.8 186.6,181.7 173.1,170.2 "/>
- <polygon class="st3" points="205.7,213.7 178.3,199.1 206.6,190.8 "/>
- <polygon class="st3" points="110,213.7 109.2,190.8 137.4,199.1 "/>
- <polygon class="st9" points="137.4,199.1 109.2,190.8 129.1,181.7 "/>
- <polygon class="st9" points="178.3,199.1 186.6,181.7 206.6,190.8 "/>
- <polygon class="st5" points="186.6,181.7 178.3,199.1 173.1,170.2 "/>
- <polygon class="st5" points="129.1,181.7 142.6,170.2 137.4,199.1 "/>
- <polygon class="st6" points="199.4,262 177,277.5 178.9,267.9 "/>
- <polygon class="st6" points="136.8,267.9 138.7,277.5 116.3,262 "/>
- <polygon class="st4" points="178.3,199.1 171.8,188.4 173.1,170.2 "/>
- <polygon class="st8" points="137.4,199.1 142.6,170.2 143.9,188.4 "/>
- <polygon class="st3" points="173.1,170.2 171.8,188.4 143.9,188.4 "/>
- <polygon class="st3" points="143.9,188.4 142.6,170.2 173.1,170.2 "/>
- <polygon class="st3" points="178.3,199.1 205.7,213.7 176.5,236.5 "/>
- <polygon class="st3" points="139.2,236.5 110,213.7 137.4,199.1 "/>
- <polygon class="st3" points="137.4,199.1 144,233.2 139.2,236.5 "/>
- <polygon class="st3" points="176.5,236.5 171.7,233.2 178.3,199.1 "/>
- <polygon class="st8" points="171.8,188.4 178.3,199.1 171.7,233.2 "/>
- <polygon class="st8" points="143.9,188.4 144,233.2 137.4,199.1 "/>
- <polygon class="st3" points="143.9,188.4 171.8,188.4 171.7,233.2 "/>
- <polygon class="st3" points="171.7,233.2 144,233.2 143.9,188.4 "/>
- <polygon class="st6" points="179.2,258.6 178.9,267.9 177,277.5 "/>
- <polygon class="st6" points="138.7,277.5 136.8,267.9 136.6,258.6 "/>
- <polygon class="st6" points="136.6,258.6 139,256.4 138.7,277.5 "/>
- <polygon class="st6" points="177,277.5 176.7,256.4 179.2,258.6 "/>
- <polygon class="st6" points="138.7,277.5 139,256.4 176.7,256.4 "/>
- <polygon class="st6" points="176.7,256.4 177,277.5 138.7,277.5 "/>
- <polygon class="st10" points="176.5,236.5 179.2,258.6 176.7,256.4 "/>
- <polygon class="st10" points="139,256.4 136.6,258.6 139.2,236.5 "/>
- <polygon class="st10" points="139.2,236.5 140.7,241.2 139,256.4 "/>
- <polygon class="st10" points="176.7,256.4 175,241.2 176.5,236.5 "/>
- <polygon class="st10" points="143.7,237.7 140.7,241.2 139.2,236.5 "/>
- <polygon class="st10" points="176.5,236.5 175,241.2 172,237.7 "/>
- <polygon class="st10" points="172,237.7 171.7,233.2 176.5,236.5 "/>
- <polygon class="st10" points="139.2,236.5 144,233.2 143.7,237.7 "/>
- <polygon class="st10" points="171.7,233.2 172,237.7 143.7,237.7 "/>
- <polygon class="st10" points="143.7,237.7 144,233.2 171.7,233.2 "/>
- <polygon class="st10" points="140.7,241.2 175,241.2 176.7,256.4 "/>
- <polygon class="st10" points="176.7,256.4 139,256.4 140.7,241.2 "/>
- <polygon class="st10" points="140.7,241.2 143.7,237.7 172,237.7 "/>
- <polygon class="st10" points="172,237.7 175,241.2 140.7,241.2 "/>
-</g>
+<svg width="35" height="33" viewBox="0 0 35 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <path d="M32.9582 1L19.8241 10.7183L22.2665 4.99099L32.9582 1Z" fill="#E17726" stroke="#E17726" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/>
+ <path d="M2.66296 1L15.6801 10.809L13.3547 4.99098L2.66296 1Z" fill="#E27625" stroke="#E27625" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/>
+ <path d="M28.2295 23.5335L24.7348 28.8721L32.2177 30.9324L34.3613 23.6501L28.2295 23.5335Z" fill="#E27625" stroke="#E27625" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/>
+ <path d="M1.27281 23.6501L3.40336 30.9324L10.8733 28.8721L7.39164 23.5335L1.27281 23.6501Z" fill="#E27625" stroke="#E27625" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/>
+ <path d="M10.4706 14.5149L8.392 17.6507L15.797 17.9876L15.5501 10.0186L10.4706 14.5149Z" fill="#E27625" stroke="#E27625" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/>
+ <path d="M25.1505 14.5149L19.993 9.92786L19.8242 17.9876L27.2291 17.6507L25.1505 14.5149Z" fill="#E27625" stroke="#E27625" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/>
+ <path d="M10.8733 28.8721L15.3552 26.7082L11.4969 23.702L10.8733 28.8721Z" fill="#E27625" stroke="#E27625" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/>
+ <path d="M20.2659 26.7082L24.7348 28.8721L24.1243 23.702L20.2659 26.7082Z" fill="#E27625" stroke="#E27625" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/>
+ <path d="M24.7348 28.8721L20.2658 26.7082L20.6296 29.6107L20.5906 30.8417L24.7348 28.8721Z" fill="#D5BFB2" stroke="#D5BFB2" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/>
+ <path d="M10.8732 28.8721L15.0304 30.8417L15.0044 29.6107L15.3552 26.7082L10.8732 28.8721Z" fill="#D5BFB2" stroke="#D5BFB2" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/>
+ <path d="M15.1084 21.7842L11.3929 20.6958L14.0172 19.4907L15.1084 21.7842Z" fill="#233447" stroke="#233447" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/>
+ <path d="M20.5126 21.7842L21.6039 19.4907L24.2411 20.6958L20.5126 21.7842Z" fill="#233447" stroke="#233447" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/>
+ <path d="M10.8733 28.8721L11.5228 23.5335L7.39163 23.6502L10.8733 28.8721Z" fill="#CC6228" stroke="#CC6228" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/>
+ <path d="M24.0982 23.5335L24.7348 28.8721L28.2294 23.6502L24.0982 23.5335Z" fill="#CC6228" stroke="#CC6228" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/>
+ <path d="M27.2291 17.6507L19.8241 17.9876L20.5126 21.7842L21.6039 19.4907L24.2411 20.6958L27.2291 17.6507Z" fill="#CC6228" stroke="#CC6228" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/>
+ <path d="M11.3929 20.6958L14.0171 19.4907L15.1084 21.7842L15.7969 17.9876L8.39195 17.6507L11.3929 20.6958Z" fill="#CC6228" stroke="#CC6228" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/>
+ <path d="M8.392 17.6507L11.4969 23.702L11.393 20.6958L8.392 17.6507Z" fill="#E27525" stroke="#E27525" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/>
+ <path d="M24.2412 20.6958L24.1243 23.702L27.2292 17.6507L24.2412 20.6958Z" fill="#E27525" stroke="#E27525" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/>
+ <path d="M15.797 17.9876L15.1084 21.7843L15.9788 26.2676L16.1737 20.3589L15.797 17.9876Z" fill="#E27525" stroke="#E27525" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/>
+ <path d="M19.8242 17.9876L19.4604 20.346L19.6423 26.2676L20.5127 21.7843L19.8242 17.9876Z" fill="#E27525" stroke="#E27525" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/>
+ <path d="M20.5127 21.7842L19.6423 26.2676L20.2659 26.7082L24.1243 23.702L24.2412 20.6958L20.5127 21.7842Z" fill="#F5841F" stroke="#F5841F" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/>
+ <path d="M11.3929 20.6958L11.4969 23.702L15.3552 26.7082L15.9788 26.2676L15.1084 21.7842L11.3929 20.6958Z" fill="#F5841F" stroke="#F5841F" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/>
+ <path d="M20.5906 30.8417L20.6296 29.6107L20.2918 29.3256H15.3292L15.0044 29.6107L15.0304 30.8417L10.8732 28.8721L12.3283 30.0642L15.2772 32.0986H20.3308L23.2928 30.0642L24.7348 28.8721L20.5906 30.8417Z" fill="#C0AC9D" stroke="#C0AC9D" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/>
+ <path d="M20.2659 26.7082L19.6423 26.2676H15.9788L15.3552 26.7082L15.0044 29.6107L15.3292 29.3256H20.2918L20.6296 29.6107L20.2659 26.7082Z" fill="#161616" stroke="#161616" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/>
+ <path d="M33.5168 11.3532L34.6211 5.98873L32.9582 1L20.2659 10.3944L25.1505 14.5149L32.0488 16.5234L33.5688 14.7482L32.9062 14.2687L33.9585 13.3099L33.1531 12.6879L34.2054 11.8845L33.5168 11.3532Z" fill="#763E1A" stroke="#763E1A" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/>
+ <path d="M1 5.98873L2.11724 11.3532L1.40273 11.8845L2.468 12.6879L1.66255 13.3099L2.71483 14.2687L2.05228 14.7482L3.57225 16.5234L10.4706 14.5149L15.3552 10.3944L2.66287 1L1 5.98873Z" fill="#763E1A" stroke="#763E1A" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/>
+ <path d="M32.0489 16.5234L25.1506 14.5149L27.2292 17.6507L24.1243 23.702L28.2295 23.6501H34.3613L32.0489 16.5234Z" fill="#F5841F" stroke="#F5841F" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/>
+ <path d="M10.4705 14.5149L3.57222 16.5234L1.27278 23.6501H7.39161L11.4968 23.702L8.39193 17.6507L10.4705 14.5149Z" fill="#F5841F" stroke="#F5841F" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/>
+ <path d="M19.8241 17.9876L20.2658 10.3944L22.2665 4.991H13.3546L15.3552 10.3944L15.7969 17.9876L15.9658 20.3718L15.9788 26.2676H19.6423L19.6553 20.3718L19.8241 17.9876Z" fill="#F5841F" stroke="#F5841F" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
diff --git a/package.json b/package.json
index bccc23ef9..8d700c897 100644
--- a/package.json
+++ b/package.json
@@ -101,7 +101,7 @@
"eth-token-tracker": "^1.1.5",
"eth-trezor-keyring": "^0.4.0",
"ethereumjs-abi": "^0.6.4",
- "ethereumjs-tx": "^1.3.7",
+ "ethereumjs-tx": "1.3.7",
"ethereumjs-util": "github:ethereumjs/ethereumjs-util#ac5d0908536b447083ea422b435da27f26615de9",
"ethereumjs-wallet": "^0.6.0",
"etherscan-link": "^1.0.2",
diff --git a/test/e2e/beta/metamask-beta-ui.spec.js b/test/e2e/beta/metamask-beta-ui.spec.js
index 06778ab99..15087c57f 100644
--- a/test/e2e/beta/metamask-beta-ui.spec.js
+++ b/test/e2e/beta/metamask-beta-ui.spec.js
@@ -1478,7 +1478,7 @@ describe('MetaMask', function () {
await customRpcInput.clear()
await customRpcInput.sendKeys(customRpcUrl)
- const customRpcSave = await findElement(driver, By.css('.page-container__footer-button'))
+ const customRpcSave = await findElement(driver, By.css('.network-form__footer .btn-secondary'))
await customRpcSave.click()
await delay(largeDelayMs * 2)
})
@@ -1504,5 +1504,19 @@ describe('MetaMask', function () {
assert.equal(customRpcs.length, customRpcUrls.length)
})
+
+ it('deletes a custom RPC', async () => {
+ const networkListItems = await findElements(driver, By.css('.networks-tab__networks-list-name'))
+ const lastNetworkListItem = networkListItems[networkListItems.length - 1]
+ await lastNetworkListItem.click()
+ await delay(100)
+
+ const deleteButton = await findElement(driver, By.css('.btn-danger'))
+ await deleteButton.click()
+ await delay(regularDelayMs)
+ const newNetworkListItems = await findElements(driver, By.css('.networks-tab__networks-list-name'))
+
+ assert.equal(networkListItems.length - 1, newNetworkListItems.length)
+ })
})
})
diff --git a/ui/app/components/app/account-menu/index.scss b/ui/app/components/app/account-menu/index.scss
index 9a61bf887..435dd6b2a 100644
--- a/ui/app/components/app/account-menu/index.scss
+++ b/ui/app/components/app/account-menu/index.scss
@@ -21,7 +21,7 @@
}
&__icon {
- margin-left: 20px;
+ margin-left: 1rem;
cursor: pointer;
&--disabled {
diff --git a/ui/app/components/app/app-header/app-header.component.js b/ui/app/components/app/app-header/app-header.component.js
index 343e0daab..171a3499f 100644
--- a/ui/app/components/app/app-header/app-header.component.js
+++ b/ui/app/components/app/app-header/app-header.component.js
@@ -101,8 +101,6 @@ export default class AppHeader extends PureComponent {
<img
className="app-header__metafox-logo app-header__metafox-logo--icon"
src="/images/logo/metamask-fox.svg"
- height={42}
- width={42}
/>
</div>
<div className="app-header__account-menu-container">
diff --git a/ui/app/components/app/app-header/index.scss b/ui/app/components/app/app-header/index.scss
index d46b16f25..d3f37b7a2 100644
--- a/ui/app/components/app/app-header/index.scss
+++ b/ui/app/components/app/app-header/index.scss
@@ -1,6 +1,6 @@
.app-header {
align-items: center;
- background: $gallery;
+ background: $Grey-000;
position: relative;
z-index: $header-z-index;
display: flex;
@@ -9,7 +9,7 @@
flex: 0 0 auto;
@media screen and (max-width: 575px) {
- padding: 12px;
+ padding: 1rem;
box-shadow: 0 0 0 1px rgba(0, 0, 0, .08);
z-index: $mobile-header-z-index;
}
@@ -34,6 +34,7 @@
cursor: pointer;
&--icon {
+ height: 32px;
@media screen and (min-width: $break-large) {
display: none;
}
diff --git a/ui/app/components/app/dropdowns/account-details-dropdown.js b/ui/app/components/app/dropdowns/account-details-dropdown.js
index cbeccdd81..a4c33620a 100644
--- a/ui/app/components/app/dropdowns/account-details-dropdown.js
+++ b/ui/app/components/app/dropdowns/account-details-dropdown.js
@@ -119,8 +119,11 @@ AccountDetailsDropdown.prototype.render = function () {
this.props.onClose()
},
text: (rpcPrefs.blockExplorerUrl
- ? this.context.t('blockExplorerView', [rpcPrefs.blockExplorerUrl.match(/^https?:\/\/(.+)/)[1]])
+ ? this.context.t('viewinExplorer')
: this.context.t('viewOnEtherscan')),
+ subText: (rpcPrefs.blockExplorerUrl
+ ? rpcPrefs.blockExplorerUrl.match(/^https?:\/\/(.+)/)[1]
+ : null),
icon: h(`img`, { src: 'images/open-etherscan.svg', style: { height: '15px' } }),
}),
isRemovable ? h(Item, {
diff --git a/ui/app/components/app/dropdowns/components/menu.js b/ui/app/components/app/dropdowns/components/menu.js
index f6d8a139e..63501eaa9 100644
--- a/ui/app/components/app/dropdowns/components/menu.js
+++ b/ui/app/components/app/dropdowns/components/menu.js
@@ -20,16 +20,18 @@ Item.prototype.render = function () {
icon,
children,
text,
+ subText,
className = '',
onClick,
} = this.props
const itemClassName = `menu__item ${className} ${onClick ? 'menu__item--clickable' : ''}`
const iconComponent = icon ? h('div.menu__item__icon', [icon]) : null
const textComponent = text ? h('div.menu__item__text', text) : null
+ const subTextComponent = subText ? h('div.menu__item__subtext', subText) : null
return children
? h('div', { className: itemClassName, onClick }, children)
- : h('div.menu__item', { className: itemClassName, onClick }, [ iconComponent, textComponent ]
+ : h('div.menu__item', { className: itemClassName, onClick }, [ iconComponent, textComponent, subTextComponent ]
.filter(d => Boolean(d))
)
}
diff --git a/ui/app/components/app/menu-bar/index.scss b/ui/app/components/app/menu-bar/index.scss
index f699f4090..eaa50619c 100644
--- a/ui/app/components/app/menu-bar/index.scss
+++ b/ui/app/components/app/menu-bar/index.scss
@@ -5,19 +5,28 @@
align-items: center;
flex: 0 0 auto;
margin-bottom: 16px;
- padding: 5px;
- border-bottom: 1px solid #e5e5e5;
+ padding: 0 22px;
+ border-bottom: 1px solid $Grey-100;
&__sidebar-button {
- font-size: 1.25rem;
+ width: 20px;
+ height: 20px;
+ background-image: url(/images/icons/hamburger.svg);
+ background-repeat: no-repeat;
+ background-size: contain;
+ background-position: center;
cursor: pointer;
- padding: 10px;
}
&__open-in-browser {
+ width: 20px;
+ height: 20px;
+ background-image: url(/images/icons/3dots.svg);
+ background-repeat: no-repeat;
+ background-size: contain;
+ background-position: center;
cursor: pointer;
display: flex;
justify-content: center;
- padding: 10px;
}
}
diff --git a/ui/app/components/app/menu-bar/menu-bar.component.js b/ui/app/components/app/menu-bar/menu-bar.component.js
index e37fddda4..c830d8a19 100644
--- a/ui/app/components/app/menu-bar/menu-bar.component.js
+++ b/ui/app/components/app/menu-bar/menu-bar.component.js
@@ -30,7 +30,7 @@ export default class MenuBar extends PureComponent {
position="bottom"
>
<div
- className="fa fa-bars menu-bar__sidebar-button"
+ className="menu-bar__sidebar-button"
onClick={() => {
this.context.metricsEvent({
eventOpts: {
@@ -50,7 +50,7 @@ export default class MenuBar extends PureComponent {
position="bottom"
>
<div
- className="fa fa-ellipsis-h fa-lg menu-bar__open-in-browser"
+ className="menu-bar__open-in-browser"
onClick={() => {
this.context.metricsEvent({
eventOpts: {
diff --git a/ui/app/components/app/network.js b/ui/app/components/app/network.js
index 9ee0a1e17..e778700cd 100644
--- a/ui/app/components/app/network.js
+++ b/ui/app/components/app/network.js
@@ -82,7 +82,7 @@ Network.prototype.render = function () {
loading: networkNumber === 'loading',
}),
h('.network-name', context.t('mainnet')),
- h('i.fa.fa-chevron-down.fa-lg.network-caret'),
+ h('.network-indicator__down-arrow'),
])
case 'ropsten-test-network':
return h('.network-indicator', [
@@ -92,7 +92,7 @@ Network.prototype.render = function () {
loading: networkNumber === 'loading',
}),
h('.network-name', context.t('ropsten')),
- h('i.fa.fa-chevron-down.fa-lg.network-caret'),
+ h('.network-indicator__down-arrow'),
])
case 'kovan-test-network':
return h('.network-indicator', [
@@ -102,7 +102,7 @@ Network.prototype.render = function () {
loading: networkNumber === 'loading',
}),
h('.network-name', context.t('kovan')),
- h('i.fa.fa-chevron-down.fa-lg.network-caret'),
+ h('.network-indicator__down-arrow'),
])
case 'rinkeby-test-network':
return h('.network-indicator', [
@@ -112,7 +112,7 @@ Network.prototype.render = function () {
loading: networkNumber === 'loading',
}),
h('.network-name', context.t('rinkeby')),
- h('i.fa.fa-chevron-down.fa-lg.network-caret'),
+ h('.network-indicator__down-arrow'),
])
case 'goerli-test-network':
return h('.network-indicator', [
@@ -122,7 +122,7 @@ Network.prototype.render = function () {
loading: networkNumber === 'loading',
}),
h('.network-name', context.t('goerli')),
- h('i.fa.fa-chevron-down.fa-lg.network-caret'),
+ h('.network-indicator__down-arrow'),
])
default:
return h('.network-indicator', [
@@ -142,7 +142,7 @@ Network.prototype.render = function () {
}),
h('.network-name', providerName === 'localhost' ? context.t('localhost') : providerNick || context.t('privateNetwork')),
- h('i.fa.fa-chevron-down.fa-lg.network-caret'),
+ h('.network-indicator__down-arrow'),
])
}
})(),
diff --git a/ui/app/components/app/selected-account/index.scss b/ui/app/components/app/selected-account/index.scss
index 5339a228b..fa3079d77 100644
--- a/ui/app/components/app/selected-account/index.scss
+++ b/ui/app/components/app/selected-account/index.scss
@@ -7,15 +7,21 @@
&__name {
max-width: 200px;
+ font-size: 1rem;
+ font-weight: 500;
+ line-height: 19px;
+ color: $black;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
text-align: center;
+ margin-bottom: 4px;
}
&__address {
font-size: .75rem;
- color: $silver-chalice;
+ line-height: .75rem;
+ color: #989a9b;
}
&__clickable {
@@ -23,7 +29,8 @@
flex-direction: column;
align-items: center;
justify-content: center;
- padding: 5px 15px;
+ margin: 4px 0;
+ padding: 6px 15px;
border-radius: 10px;
cursor: pointer;
diff --git a/ui/app/components/app/transaction-list-item/index.scss b/ui/app/components/app/transaction-list-item/index.scss
index 9e73a546c..4dba4b2c3 100644
--- a/ui/app/components/app/transaction-list-item/index.scss
+++ b/ui/app/components/app/transaction-list-item/index.scss
@@ -1,7 +1,7 @@
.transaction-list-item {
box-sizing: border-box;
min-height: 74px;
- border-bottom: 1px solid $geyser;
+ border-bottom: 1px solid $Grey-100;
display: flex;
justify-content: center;
align-items: center;
@@ -19,7 +19,7 @@
"identicon nonce status secondary-amount";
@media screen and (max-width: $break-small) {
- padding: 8px 20px 12px;
+ padding: .5rem 1rem;
grid-template-columns: 45px 5fr 3fr;
grid-template-areas:
"nonce nonce nonce"
@@ -44,12 +44,13 @@
&__action {
text-transform: capitalize;
- padding: 0 8px 2px 0;
+ padding: 0 0 4px 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
grid-area: action;
- align-self: end;
+ color: $Grey-800;
+ line-height: 20px;
}
&__status {
@@ -72,7 +73,8 @@
align-self: start;
@media screen and (max-width: $break-small) {
- padding-bottom: 4px;
+ padding-bottom: 8px;
+ line-height: 12px;
}
}
@@ -88,19 +90,22 @@
grid-area: primary-amount;
align-self: end;
justify-self: end;
+ line-height: 20px;
@media screen and (max-width: $break-small) {
- padding-bottom: 2px;
+ padding-bottom: 4px;
+ height: 100%;
+ color: $Grey-800;
}
}
&--secondary {
text-align: end;
font-size: .75rem;
- color: #5e6064;
grid-area: secondary-amount;
align-self: start;
justify-self: end;
+ color: $Grey-500;
}
}
diff --git a/ui/app/components/app/transaction-list-item/transaction-list-item.component.js b/ui/app/components/app/transaction-list-item/transaction-list-item.component.js
index 0d4127b4f..80b26469b 100644
--- a/ui/app/components/app/transaction-list-item/transaction-list-item.component.js
+++ b/ui/app/components/app/transaction-list-item/transaction-list-item.component.js
@@ -179,7 +179,7 @@ export default class TransactionListItem extends PureComponent {
<Identicon
className="transaction-list-item__identicon"
address={toAddress}
- diameter={34}
+ diameter={36}
image={assetImages[toAddress]}
/>
<TransactionAction
diff --git a/ui/app/components/app/transaction-list/index.scss b/ui/app/components/app/transaction-list/index.scss
index a486f4112..42eddd31e 100644
--- a/ui/app/components/app/transaction-list/index.scss
+++ b/ui/app/components/app/transaction-list/index.scss
@@ -12,9 +12,10 @@
&__header {
flex: 0 0 auto;
- font-size: .875rem;
- color: $dusty-gray;
- border-bottom: 1px solid $geyser;
+ font-size: 14px;
+ line-height: 20px;
+ color: $Grey-400;
+ border-bottom: 1px solid $Grey-100;
padding: 8px 0 8px 20px;
@media screen and (max-width: $break-small) {
diff --git a/ui/app/components/app/transaction-status/index.scss b/ui/app/components/app/transaction-status/index.scss
index e7daafeef..024cbf2a1 100644
--- a/ui/app/components/app/transaction-status/index.scss
+++ b/ui/app/components/app/transaction-status/index.scss
@@ -12,8 +12,9 @@
@media screen and (max-width: $break-small) {
height: 16px;
- width: 72px;
- font-size: .5rem;
+ min-width: 72px;
+ font-size: 10px;
+ padding: 0 12px;
}
&--confirmed {
diff --git a/ui/app/components/app/transaction-view-balance/index.scss b/ui/app/components/app/transaction-view-balance/index.scss
index bdcd536b0..cdb09db8a 100644
--- a/ui/app/components/app/transaction-view-balance/index.scss
+++ b/ui/app/components/app/transaction-view-balance/index.scss
@@ -33,11 +33,14 @@
&__primary-balance {
font-size: 1.5rem;
+ color: $black;
@media screen and (max-width: $break-small) {
- font-size: 1.75rem;
+ font-size: 32px;
+ line-height: 45px;
width: 100%;
justify-content: center;
+
}
}
@@ -51,12 +54,15 @@
&__cached-secondary-balance {
color: rgba(220, 153, 18, 0.6901960784313725);
- font-size: 1.15rem;
+ font-size: 16px;
+ line-height: 23px;
}
&__secondary-balance {
- font-size: 1.15rem;
- color: #a0a0a0;
+ font-size: 16px;
+ line-height: 23px;
+ font-weight: 400;
+ color: $Grey-400;
}
&__balance-container {
diff --git a/ui/app/components/ui/currency-display/index.scss b/ui/app/components/ui/currency-display/index.scss
index 313c932b8..6d069eb05 100644
--- a/ui/app/components/ui/currency-display/index.scss
+++ b/ui/app/components/ui/currency-display/index.scss
@@ -6,6 +6,7 @@
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
+
}
&__suffix {
diff --git a/ui/app/components/ui/page-container/page-container-footer/page-container-footer.component.js b/ui/app/components/ui/page-container/page-container-footer/page-container-footer.component.js
index 4ef203521..a2cf0100b 100644
--- a/ui/app/components/ui/page-container/page-container-footer/page-container-footer.component.js
+++ b/ui/app/components/ui/page-container/page-container-footer/page-container-footer.component.js
@@ -8,6 +8,7 @@ export default class PageContainerFooter extends Component {
children: PropTypes.node,
onCancel: PropTypes.func,
cancelText: PropTypes.string,
+ cancelButtonType: PropTypes.string,
onSubmit: PropTypes.func,
submitText: PropTypes.string,
disabled: PropTypes.bool,
@@ -29,6 +30,7 @@ export default class PageContainerFooter extends Component {
disabled,
submitButtonType,
hideCancel,
+ cancelButtonType,
} = this.props
return (
@@ -36,7 +38,7 @@ export default class PageContainerFooter extends Component {
<header>
{!hideCancel && <Button
- type="default"
+ type={cancelButtonType || 'default'}
large
className="page-container__footer-button"
onClick={e => onCancel(e)}
diff --git a/ui/app/css/itcss/components/menu.scss b/ui/app/css/itcss/components/menu.scss
index 6409ad545..7d71ea799 100644
--- a/ui/app/css/itcss/components/menu.scss
+++ b/ui/app/css/itcss/components/menu.scss
@@ -8,7 +8,7 @@
&__item {
padding: 18px;
display: flex;
- flex-flow: row nowrap;
+ flex-flow: row wrap;
align-items: center;
position: relative;
z-index: 201;
@@ -39,6 +39,11 @@
font-size: 16px;
line-height: 21px;
}
+
+ &__subtext {
+ font-size: 12px;
+ padding: 5px 0px 0px 30px;
+ }
}
&__divider {
diff --git a/ui/app/css/itcss/components/network.scss b/ui/app/css/itcss/components/network.scss
index da90b7910..4275ffe92 100644
--- a/ui/app/css/itcss/components/network.scss
+++ b/ui/app/css/itcss/components/network.scss
@@ -8,9 +8,9 @@
}
.network-component.pointer {
- border: 2px solid $silver;
+ border: 2px solid $Grey-200;
border-radius: 82px;
- padding: 7px 3px;
+ padding: 6px 3px;
flex: 0 0 auto;
display: flex;
@@ -47,11 +47,15 @@
align-items: center;
font-size: .6em;
- .fa-caret-down {
- line-height: 15px;
- font-size: 12px;
- padding: 0 4px;
- flex: 0 0 auto;
+ &__down-arrow {
+ height: 8px;
+ width: 12px;
+ display: block;
+ background-image: url(/images/icons/caret-down.svg);
+ background-repeat: no-repeat;
+ background-size: contain;
+ background-position: center;
+ margin: 0 8px;
}
.fa-question-circle {
@@ -65,12 +69,14 @@
padding: 0 4px;
font-family: Roboto;
font-size: 12px;
+ line-height: 14px;
flex: 1 1 auto;
color: $tundora;
font-weight: 500;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
+ height: 16px;
}
.dropdown-menu-item .fa.delete {
diff --git a/ui/app/css/itcss/components/new-account.scss b/ui/app/css/itcss/components/new-account.scss
index 7bfa2d443..b3aae8eec 100644
--- a/ui/app/css/itcss/components/new-account.scss
+++ b/ui/app/css/itcss/components/new-account.scss
@@ -143,6 +143,7 @@
flex-flow: column;
align-items: center;
margin-top: 29px;
+ width: 100%;
}
&__buttons {
diff --git a/ui/app/css/itcss/settings/variables.scss b/ui/app/css/itcss/settings/variables.scss
index f7003b1f4..c02be0d98 100644
--- a/ui/app/css/itcss/settings/variables.scss
+++ b/ui/app/css/itcss/settings/variables.scss
@@ -99,7 +99,11 @@ $Blue-500: #037DD6;
$Blue-600: #0260a4;
$Grey-000: #f2f3f4;
+$Grey-100: #D6D9DC;
+$Grey-200: #bbc0c5;
+$Grey-400: #848c96;
$Grey-500: #6A737D;
+$Grey-800: #24272a;
$Red-000: #fcf2f3;
$Red-500: #D73A49;
@@ -109,3 +113,17 @@ $Orange-000: #fef5ef;
$Orange-500: #F66A0A;
+/*
+ Spacing Variables
+*/
+$no-spacing: 0px;
+$xxs-spacing: 4px;
+$xs-spacing: 8px;
+$s-spacing: 16px;
+$base-spacing: 24px;
+$medium-spacing: 32px;
+$large-spacing: 40px;
+$xlarge-spacing: 48px;
+$xxlarge-spacing: 64px;
+
+
diff --git a/ui/app/pages/create-account/import-account/json.js b/ui/app/pages/create-account/import-account/json.js
index ad430ba58..2482e49d1 100644
--- a/ui/app/pages/create-account/import-account/json.js
+++ b/ui/app/pages/create-account/import-account/json.js
@@ -8,9 +8,10 @@ const actions = require('../../../store/actions')
const FileInput = require('react-simple-file-input').default
const { DEFAULT_ROUTE } = require('../../../helpers/constants/routes')
const { getMetaMaskAccounts } = require('../../../selectors/selectors')
-const HELP_LINK = 'https://support.metamask.io/kb/article/7-importing-accounts'
import Button from '../../../components/ui/button'
+const HELP_LINK = 'https://metamask.zendesk.com/hc/en-us/articles/360015489351-Importing-Accounts'
+
class JsonImportSubview extends Component {
constructor (props) {
super(props)
@@ -37,10 +38,11 @@ class JsonImportSubview extends Component {
readAs: 'text',
onLoad: this.onLoad.bind(this),
style: {
- margin: '20px 0px 12px 34%',
+ padding: '20px 0px 12px 15%',
fontSize: '15px',
display: 'flex',
justifyContent: 'center',
+ width: '100%',
},
}),
diff --git a/ui/app/pages/mobile-sync/index.js b/ui/app/pages/mobile-sync/index.js
index 00a514534..a8de4fce9 100644
--- a/ui/app/pages/mobile-sync/index.js
+++ b/ui/app/pages/mobile-sync/index.js
@@ -16,6 +16,7 @@ import LoadingScreen from '../../components/ui/loading-screen'
const PASSWORD_PROMPT_SCREEN = 'PASSWORD_PROMPT_SCREEN'
const REVEAL_SEED_SCREEN = 'REVEAL_SEED_SCREEN'
+const KEYS_GENERATION_TIME = 30000
class MobileSyncPage extends Component {
static propTypes = {
@@ -36,6 +37,8 @@ class MobileSyncPage extends Component {
error: null,
syncing: false,
completed: false,
+ channelName: undefined,
+ cipherKey: undefined,
}
this.syncing = false
@@ -53,16 +56,31 @@ class MobileSyncPage extends Component {
this.setState({ seedWords: null, error: null })
this.props.requestRevealSeedWords(this.state.password)
.then(seedWords => {
- this.generateCipherKeyAndChannelName()
+ this.startKeysGeneration()
this.setState({ seedWords, screen: REVEAL_SEED_SCREEN })
- this.initWebsockets()
})
.catch(error => this.setState({ error: error.message }))
}
+ startKeysGeneration () {
+ this.handle && clearTimeout(this.handle)
+ this.disconnectWebsockets()
+ this.generateCipherKeyAndChannelName()
+ this.initWebsockets()
+ this.handle = setTimeout(() => {
+ this.startKeysGeneration()
+ }, KEYS_GENERATION_TIME)
+ }
+
generateCipherKeyAndChannelName () {
this.cipherKey = `${this.props.selectedAddress.substr(-4)}-${PubNub.generateUUID()}`
this.channelName = `mm-${PubNub.generateUUID()}`
+ this.setState({cipherKey: this.cipherKey, channelName: this.channelName})
+ }
+
+ initWithCipherKeyAndChannelName (cipherKey, channelName) {
+ this.cipherKey = cipherKey
+ this.channelName = channelName
}
initWebsockets () {
@@ -83,6 +101,11 @@ class MobileSyncPage extends Component {
if (message.event === 'start-sync') {
this.startSyncing()
+ } else if (message.event === 'connection-info') {
+ this.handle && clearTimeout(this.handle)
+ this.disconnectWebsockets()
+ this.initWithCipherKeyAndChannelName(message.cipher, message.channel)
+ this.initWebsockets()
} else if (message.event === 'end-sync') {
this.disconnectWebsockets()
this.setState({syncing: false, completed: true})
@@ -272,7 +295,7 @@ class MobileSyncPage extends Component {
renderRevealSeedContent () {
const qrImage = qrCode(0, 'M')
- qrImage.addData(`metamask-sync:${this.channelName}|@|${this.cipherKey}`)
+ qrImage.addData(`metamask-sync:${this.state.channelName}|@|${this.state.cipherKey}`)
qrImage.make()
const { t } = this.context
diff --git a/ui/app/pages/settings/index.scss b/ui/app/pages/settings/index.scss
index 66959ba93..c516a84bb 100644
--- a/ui/app/pages/settings/index.scss
+++ b/ui/app/pages/settings/index.scss
@@ -28,6 +28,10 @@
font-size: 20px;
border-bottom: 1px solid $alto;
margin-right: 24px;
+ height: 72px;
+ align-items: center;
+ display: flex;
+ flex-flow: row nowrap;
@media screen and (max-width: 575px) {
display: none;
@@ -52,9 +56,7 @@
font-family: Roboto;
font-style: normal;
font-weight: normal;
- font-size: 24px;
- line-height: 24px;
- color: black;
+ font-size: 20px;
@media screen and (max-width: 575px) {
font-size: 16px;
@@ -123,7 +125,7 @@
&__body {
padding: 12px 24px;
-
+
@media screen and (min-width: 576px) {
padding: 12px;
}
diff --git a/ui/app/pages/settings/networks-tab/index.scss b/ui/app/pages/settings/networks-tab/index.scss
index b0020437d..bf83c7a14 100644
--- a/ui/app/pages/settings/networks-tab/index.scss
+++ b/ui/app/pages/settings/networks-tab/index.scss
@@ -12,7 +12,7 @@
}
&__body {
- padding: 12px 24px;
+ padding-right: 24px;
height: 100%;
display: flex;
flex-direction: column;
@@ -118,12 +118,12 @@
}
&__add-network-header-button-wrapper {
- padding-top: 15px;
- padding-bottom: 21px;
justify-content: center;
.button {
- width: 178px;
+ width: 138px;
+ padding: 10px;
+ line-height: 20px;
}
@media screen and (max-width: 575px) {
@@ -197,4 +197,24 @@
font-weight: bold;
color: #000000;
}
-} \ No newline at end of file
+}
+
+.network-form {
+ &__footer {
+ display: flex;
+ flex-flow: row nowrap;
+ margin: .75rem 0;
+
+ .btn-default {
+ margin-right: .375rem;
+ }
+
+ .btn-secondary {
+ margin-left: .375rem;
+ }
+
+ .btn-danger {
+ margin-right: 3.75rem;
+ }
+ }
+}
diff --git a/ui/app/pages/settings/networks-tab/network-form/network-form.component.js b/ui/app/pages/settings/networks-tab/network-form/network-form.component.js
index 5e455b65e..388e2665f 100644
--- a/ui/app/pages/settings/networks-tab/network-form/network-form.component.js
+++ b/ui/app/pages/settings/networks-tab/network-form/network-form.component.js
@@ -1,10 +1,10 @@
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import validUrl from 'valid-url'
-import PageContainerFooter from '../../../../components/ui/page-container/page-container-footer'
import TextField from '../../../../components/ui/text-field'
+import Button from '../../../../components/ui/button'
-export default class NetworksTab extends PureComponent {
+export default class NetworkForm extends PureComponent {
static contextTypes = {
t: PropTypes.func.isRequired,
metricsEvent: PropTypes.func.isRequired,
@@ -12,6 +12,7 @@ export default class NetworksTab extends PureComponent {
static propTypes = {
editRpc: PropTypes.func.isRequired,
+ delRpcTarget: PropTypes.func.isRequired,
rpcUrl: PropTypes.string,
chainId: PropTypes.string,
ticker: PropTypes.string,
@@ -20,6 +21,7 @@ export default class NetworksTab extends PureComponent {
onClear: PropTypes.func.isRequired,
setRpcTarget: PropTypes.func.isRequired,
networksTabIsInAddMode: PropTypes.bool,
+ isCurrentRpcTarget: PropTypes.bool,
blockExplorerUrl: PropTypes.string,
rpcPrefs: PropTypes.object,
}
@@ -70,6 +72,71 @@ export default class NetworksTab extends PureComponent {
})
}
+ resetForm () {
+ const {
+ rpcUrl,
+ chainId,
+ ticker,
+ networkName,
+ blockExplorerUrl,
+ } = this.props
+
+ this.setState({ rpcUrl, chainId, ticker, networkName, blockExplorerUrl, errors: {} })
+ }
+
+ onSubmit = () => {
+ const {
+ setRpcTarget,
+ rpcUrl: propsRpcUrl,
+ editRpc,
+ rpcPrefs = {},
+ onClear,
+ networksTabIsInAddMode,
+ } = this.props
+ const {
+ networkName,
+ rpcUrl,
+ chainId,
+ ticker,
+ blockExplorerUrl,
+ } = this.state
+ if (propsRpcUrl && rpcUrl !== propsRpcUrl) {
+ editRpc(propsRpcUrl, rpcUrl, chainId, ticker, networkName, {
+ blockExplorerUrl: blockExplorerUrl || rpcPrefs.blockExplorerUrl,
+ ...rpcPrefs,
+ })
+ } else {
+ setRpcTarget(rpcUrl, chainId, ticker, networkName, {
+ blockExplorerUrl: blockExplorerUrl || rpcPrefs.blockExplorerUrl,
+ ...rpcPrefs,
+ })
+ }
+
+ if (networksTabIsInAddMode) {
+ onClear()
+ }
+ }
+
+ onCancel = () => {
+ const {
+ networksTabIsInAddMode,
+ onClear,
+ } = this.props
+
+ if (networksTabIsInAddMode) {
+ onClear()
+ } else {
+ this.resetForm()
+ }
+ }
+
+ onDelete = () => {
+ const { delRpcTarget, rpcUrl, onClear } = this.props
+ delRpcTarget(rpcUrl)
+ this.resetForm()
+ onClear()
+ }
+
stateIsUnchanged () {
const {
rpcUrl,
@@ -152,16 +219,23 @@ export default class NetworksTab extends PureComponent {
}
render () {
- const { setRpcTarget, viewOnly, rpcUrl: propsRpcUrl, editRpc, rpcPrefs = {} } = this.props
+ const { t } = this.context
+ const {
+ viewOnly,
+ isCurrentRpcTarget,
+ networksTabIsInAddMode,
+ } = this.props
const {
networkName,
rpcUrl,
- chainId,
+ chainId = '',
ticker,
blockExplorerUrl,
errors,
} = this.state
+ const isSubmitDisabled = viewOnly || this.stateIsUnchanged() || Object.values(errors).some(x => x) || !rpcUrl
+ const deletable = !networksTabIsInAddMode && !isCurrentRpcTarget && !viewOnly
return (
<div className="networks-tab__network-form">
@@ -198,26 +272,32 @@ export default class NetworksTab extends PureComponent {
blockExplorerUrl,
'optionalBlockExplorerUrl',
)}
- <PageContainerFooter
- cancelText={this.context.t('cancel')}
- hideCancel={true}
- onSubmit={() => {
- if (propsRpcUrl && rpcUrl !== propsRpcUrl) {
- editRpc(propsRpcUrl, rpcUrl, chainId, ticker, networkName, {
- blockExplorerUrl: blockExplorerUrl || rpcPrefs.blockExplorerUrl,
- ...rpcPrefs,
- })
- } else {
- setRpcTarget(rpcUrl, chainId, ticker, networkName, {
- blockExplorerUrl: blockExplorerUrl || rpcPrefs.blockExplorerUrl,
- ...rpcPrefs,
- })
- }
- }}
- submitText={this.context.t('save')}
- submitButtonType={'confirm'}
- disabled={viewOnly || this.stateIsUnchanged() || Object.values(errors).some(x => x) || !rpcUrl}
- />
+ <div className="network-form__footer">
+ {
+ deletable && (
+ <Button
+ type="danger"
+ onClick={this.onDelete}
+ >
+ { t('delete') }
+ </Button>
+ )
+ }
+ <Button
+ type="default"
+ onClick={this.onCancel}
+ disabled={viewOnly || this.stateIsUnchanged()}
+ >
+ { t('cancel') }
+ </Button>
+ <Button
+ type="secondary"
+ disabled={isSubmitDisabled}
+ onClick={this.onSubmit}
+ >
+ { t('save') }
+ </Button>
+ </div>
</div>
)
}
diff --git a/ui/app/pages/settings/networks-tab/networks-tab.component.js b/ui/app/pages/settings/networks-tab/networks-tab.component.js
index 2f921a892..f6c8443cf 100644
--- a/ui/app/pages/settings/networks-tab/networks-tab.component.js
+++ b/ui/app/pages/settings/networks-tab/networks-tab.component.js
@@ -25,6 +25,7 @@ export default class NetworksTab extends PureComponent {
setNetworksTabAddMode: PropTypes.func.isRequired,
setRpcTarget: PropTypes.func.isRequired,
setSelectedSettingsRpcUrl: PropTypes.func.isRequired,
+ delRpcTarget: PropTypes.func.isRequired,
providerUrl: PropTypes.string,
providerType: PropTypes.string,
networkDefaultedToProvider: PropTypes.bool,
@@ -62,7 +63,7 @@ export default class NetworksTab extends PureComponent {
<span className="settings-page__sub-header-text">{ this.context.t('networks') }</span>
<div className="networks-tab__add-network-header-button-wrapper">
<Button
- type="primary"
+ type="secondary"
onClick={event => {
event.preventDefault()
setSelectedSettingsRpcUrl(null)
@@ -125,19 +126,41 @@ export default class NetworksTab extends PureComponent {
renderNetworksList () {
const { networksToRender, selectedNetwork, networkIsSelected, networksTabIsInAddMode, networkDefaultedToProvider } = this.props
-
+ console.log(networksToRender)
return (
- <div className={classnames('networks-tab__networks-list', {
- 'networks-tab__networks-list--selection': (networkIsSelected && !networkDefaultedToProvider) || networksTabIsInAddMode,
- })}>
+ <div
+ className={classnames('networks-tab__networks-list', {
+ 'networks-tab__networks-list--selection': (networkIsSelected && !networkDefaultedToProvider) || networksTabIsInAddMode,
+ })}
+ >
{ networksToRender.map(network => this.renderNetworkListItem(network, selectedNetwork.rpcUrl)) }
+ {
+ networksTabIsInAddMode && (
+ <div
+ className="networks-tab__networks-list-item"
+ >
+ <NetworkDropdownIcon
+ backgroundColor="white"
+ innerBorder="1px solid rgb(106, 115, 125)"
+ />
+ <div
+ className="networks-tab__networks-list-name networks-tab__networks-list-name--selected"
+ >
+ { this.context.t('newNetwork') }
+ </div>
+ <div className="networks-tab__networks-list-arrow" />
+ </div>
+ )
+ }
</div>
)
}
renderNetworksTabContent () {
+ const { t } = this.context
const {
setRpcTarget,
+ delRpcTarget,
setSelectedSettingsRpcUrl,
setNetworksTabAddMode,
selectedNetwork: {
@@ -153,30 +176,39 @@ export default class NetworksTab extends PureComponent {
networksTabIsInAddMode,
editRpc,
networkDefaultedToProvider,
+ providerUrl,
} = this.props
+
const envIsPopup = getEnvironmentType() === ENVIRONMENT_TYPE_POPUP
+ const shouldRenderNetworkForm = networksTabIsInAddMode || !envIsPopup || (envIsPopup && !networkDefaultedToProvider)
return (
<div className="networks-tab__content">
- {this.renderNetworksList()}
- {networksTabIsInAddMode || !envIsPopup || (envIsPopup && !networkDefaultedToProvider)
- ? <NetworkForm
- setRpcTarget={setRpcTarget}
- editRpc={editRpc}
- networkName={label || labelKey && this.context.t(labelKey) || ''}
- rpcUrl={rpcUrl}
- chainId={chainId}
- ticker={ticker}
- onClear={() => {
- setNetworksTabAddMode(false)
- setSelectedSettingsRpcUrl(null)
- }}
- viewOnly={viewOnly}
- networksTabIsInAddMode={networksTabIsInAddMode}
- rpcPrefs={rpcPrefs}
- blockExplorerUrl={blockExplorerUrl}
- />
- : null
+ { this.renderNetworksList() }
+ {
+ shouldRenderNetworkForm
+ ? (
+ <NetworkForm
+ setRpcTarget={setRpcTarget}
+ editRpc={editRpc}
+ networkName={label || labelKey && t(labelKey) || ''}
+ rpcUrl={rpcUrl}
+ chainId={chainId}
+ ticker={ticker}
+ onClear={() => {
+ setNetworksTabAddMode(false)
+ setSelectedSettingsRpcUrl(null)
+ }}
+ delRpcTarget={delRpcTarget}
+ viewOnly={viewOnly}
+ isCurrentRpcTarget={providerUrl === rpcUrl}
+ networksTabIsInAddMode={networksTabIsInAddMode}
+ rpcPrefs={rpcPrefs}
+ blockExplorerUrl={blockExplorerUrl}
+ cancelText={t('cancel')}
+ />
+ )
+ : null
}
</div>
)
diff --git a/ui/app/pages/settings/networks-tab/networks-tab.constants.js b/ui/app/pages/settings/networks-tab/networks-tab.constants.js
index d3d1a01cc..1a49ca04f 100644
--- a/ui/app/pages/settings/networks-tab/networks-tab.constants.js
+++ b/ui/app/pages/settings/networks-tab/networks-tab.constants.js
@@ -36,6 +36,15 @@ const defaultNetworksData = [
blockExplorerUrl: 'https://rinkeby.etherscan.io',
},
{
+ labelKey: 'goerli',
+ iconColor: '#3099f2',
+ providerType: 'goerli',
+ rpcUrl: 'https://api.infura.io/v1/jsonrpc/goerli',
+ chainId: '5',
+ ticker: 'ETH',
+ blockExplorerUrl: 'https://goerli.etherscan.io',
+ },
+ {
labelKey: 'localhost',
iconColor: 'white',
border: '1px solid #6A737D',
diff --git a/ui/app/pages/settings/networks-tab/networks-tab.container.js b/ui/app/pages/settings/networks-tab/networks-tab.container.js
index a5d71f714..9e1098922 100644
--- a/ui/app/pages/settings/networks-tab/networks-tab.container.js
+++ b/ui/app/pages/settings/networks-tab/networks-tab.container.js
@@ -8,6 +8,7 @@ import {
displayWarning,
setNetworksTabAddMode,
editRpc,
+ delRpcTarget,
} from '../../../store/actions'
import { defaultNetworksData } from './networks-tab.constants'
const defaultNetworks = defaultNetworksData.map(network => ({ ...network, viewOnly: true }))
@@ -63,6 +64,9 @@ const mapDispatchToProps = dispatch => {
setRpcTarget: (newRpc, chainId, ticker, nickname, rpcPrefs) => {
dispatch(updateAndSetCustomRpc(newRpc, chainId, ticker, nickname, rpcPrefs))
},
+ delRpcTarget: (target) => {
+ dispatch(delRpcTarget(target))
+ },
displayWarning: warning => dispatch(displayWarning(warning)),
setNetworksTabAddMode: isInAddMode => dispatch(setNetworksTabAddMode(isInAddMode)),
editRpc: (oldRpc, newRpc, chainId, ticker, nickname, rpcPrefs) => {
diff --git a/ui/app/pages/settings/settings.component.js b/ui/app/pages/settings/settings.component.js
index a2f137264..7f2045244 100644
--- a/ui/app/pages/settings/settings.component.js
+++ b/ui/app/pages/settings/settings.component.js
@@ -89,7 +89,7 @@ class SettingsPage extends PureComponent {
const { t } = this.context
const { location: { pathname } } = this.props
- return (
+ return pathname !== NETWORKS_ROUTE && (
<div className="settings-page__subheader">
{t(ROUTES_TO_I18N_KEYS[pathname] || 'general')}
</div>