From b70d9cfa363f986c4290a9616142d5a445ede0d5 Mon Sep 17 00:00:00 2001
From: Maurice Dalderup <Maurice_Dalderup@hotmail.com>
Date: Sat, 26 May 2018 15:30:55 +0200
Subject: [PATCH 1/6] chore(components): fixed css background bug on certain
 occasions - removed outlines on click - added some css animation

---
 .../AccountInfoAmounts/AccountInfoAmounts.css | 22 +++++++++++++++++++
 .../AccountInfoHeader/AccountInfoHeader.css   |  8 +++++++
 src/app/components/DropDown/DropDown.css      |  4 ++++
 src/app/components/MainNav/MainNav.css        |  8 +++++++
 src/app/components/MainNav/MainNav.js         |  2 +-
 .../NetworkSwitcher/NetworkSwitcher.css       | 12 ++++++++++
 .../SettingsNavigation/SettingsNavigation.css |  4 ++++
 7 files changed, 59 insertions(+), 1 deletion(-)

diff --git a/src/app/components/AccountInfo/AccountInfoAmounts/AccountInfoAmounts.css b/src/app/components/AccountInfo/AccountInfoAmounts/AccountInfoAmounts.css
index 9d605e8..f4cee2a 100644
--- a/src/app/components/AccountInfo/AccountInfoAmounts/AccountInfoAmounts.css
+++ b/src/app/components/AccountInfo/AccountInfoAmounts/AccountInfoAmounts.css
@@ -29,6 +29,7 @@
   color: #36b149;
   padding: 4px 10px;
   border-radius: 50px;
+  cursor: default;
 }
 
 
@@ -38,4 +39,25 @@
   color: #585858;
   position: absolute;
   cursor: pointer;
+  background-color: white;
+
+  transition:all 0.2s ease;
+  opacity:1;
+}
+
+.accountInfoRefreshButton:hover {
+  opacity: 0.7;
+  border: 1px;
+}
+
+.accountInfoRefreshButton:active {
+  opacity: 0.7;
+  border: 1px;
+  -webkit-transform: scale(0.8);
+  -ms-transform: scale(0.8);
+  transform: scale(0.8);
+}
+
+.accountInfoRefreshButton:focus  {
+  outline: none;
 }
diff --git a/src/app/components/AccountInfo/AccountInfoHeader/AccountInfoHeader.css b/src/app/components/AccountInfo/AccountInfoHeader/AccountInfoHeader.css
index ca71cf8..4b9250b 100644
--- a/src/app/components/AccountInfo/AccountInfoHeader/AccountInfoHeader.css
+++ b/src/app/components/AccountInfo/AccountInfoHeader/AccountInfoHeader.css
@@ -46,6 +46,14 @@
   font-size: 1.1rem;
 }
 
+.accountDropDownButton:hover {
+  font-size: 1.2rem;
+}
+
+.accountDropDownButton:focus {
+  font-size: 1.2rem;
+}
+
 .accountInfoDropDown {
   background-color: #f5f5f5;
   top: 24px;
diff --git a/src/app/components/DropDown/DropDown.css b/src/app/components/DropDown/DropDown.css
index f02bb3b..c57c132 100644
--- a/src/app/components/DropDown/DropDown.css
+++ b/src/app/components/DropDown/DropDown.css
@@ -20,3 +20,7 @@
 .showDropDown {
   display: block;
 }
+
+.dropDownButton:focus {
+  outline: none;
+}
diff --git a/src/app/components/MainNav/MainNav.css b/src/app/components/MainNav/MainNav.css
index 81ea23d..518e324 100644
--- a/src/app/components/MainNav/MainNav.css
+++ b/src/app/components/MainNav/MainNav.css
@@ -4,8 +4,16 @@
   height: 100%;
   border: none;
   cursor: pointer;
+  transition:all 0.3s ease;
 }
 
+.mainNavButton:active {
+  -webkit-transform: scale(0.8);
+  -ms-transform: scale(0.8);
+  transform: scale(0.8);
+}
+
+
 .mainNavButton svg {
   color: #fff;
   font-size: 1.5rem;
diff --git a/src/app/components/MainNav/MainNav.js b/src/app/components/MainNav/MainNav.js
index 20bc8af..2f00645 100644
--- a/src/app/components/MainNav/MainNav.js
+++ b/src/app/components/MainNav/MainNav.js
@@ -37,7 +37,7 @@ class MainNav extends Component {
     const navigationMarkup = this.generateNavigationMarkup()
 
     return (
-      <nav className={ style.mainNav }>
+      <nav>
         <DropDown
           buttonContent={ <i className='fas fa-bars' /> }
           buttonStyles={ style.mainNavButton }
diff --git a/src/app/components/NetworkSwitcher/NetworkSwitcher.css b/src/app/components/NetworkSwitcher/NetworkSwitcher.css
index 7f1aa6f..fe5a9a5 100644
--- a/src/app/components/NetworkSwitcher/NetworkSwitcher.css
+++ b/src/app/components/NetworkSwitcher/NetworkSwitcher.css
@@ -2,6 +2,14 @@
   position: relative;
   height: 100%;
   width: 25%;
+  transition:all 0.3s ease;
+}
+
+.networkNavigation:active {
+  -webkit-transform: scale(0.8);
+  -ms-transform: scale(0.8);
+  transform: scale(0.8);
+  color:black;
 }
 
 .networkNavigationButtonContainer {
@@ -18,6 +26,10 @@
   cursor: pointer;
 }
 
+.networkNavigationButton:focus {
+  font-size: 1.2rem;
+}
+
 .networkNavigationGlobe {
   width: 14px;
   margin-right: 5px;
diff --git a/src/app/components/SettingsNavigation/SettingsNavigation.css b/src/app/components/SettingsNavigation/SettingsNavigation.css
index 49d7ac9..80b3b48 100644
--- a/src/app/components/SettingsNavigation/SettingsNavigation.css
+++ b/src/app/components/SettingsNavigation/SettingsNavigation.css
@@ -17,6 +17,10 @@
   align-items: center;
 }
 
+.settingsNavigationButton:active {
+  outline:none;
+}
+
 .settingsNavigationButton svg {
   margin-right: 5px;
 }

From 5260b593dbe02283de5256552e845563c9545aca Mon Sep 17 00:00:00 2001
From: Maurice Dalderup <Maurice_Dalderup@hotmail.com>
Date: Sat, 26 May 2018 15:38:11 +0200
Subject: [PATCH 2/6] chore(components): fixed an issue where the menu was also
 animating with the button

---
 src/app/components/MainNav/MainNav.css           |  1 -
 .../NetworkSwitcher/NetworkSwitcher.css          | 16 ++++++----------
 2 files changed, 6 insertions(+), 11 deletions(-)

diff --git a/src/app/components/MainNav/MainNav.css b/src/app/components/MainNav/MainNav.css
index 518e324..f86bfcd 100644
--- a/src/app/components/MainNav/MainNav.css
+++ b/src/app/components/MainNav/MainNav.css
@@ -13,7 +13,6 @@
   transform: scale(0.8);
 }
 
-
 .mainNavButton svg {
   color: #fff;
   font-size: 1.5rem;
diff --git a/src/app/components/NetworkSwitcher/NetworkSwitcher.css b/src/app/components/NetworkSwitcher/NetworkSwitcher.css
index fe5a9a5..99110a7 100644
--- a/src/app/components/NetworkSwitcher/NetworkSwitcher.css
+++ b/src/app/components/NetworkSwitcher/NetworkSwitcher.css
@@ -2,14 +2,6 @@
   position: relative;
   height: 100%;
   width: 25%;
-  transition:all 0.3s ease;
-}
-
-.networkNavigation:active {
-  -webkit-transform: scale(0.8);
-  -ms-transform: scale(0.8);
-  transform: scale(0.8);
-  color:black;
 }
 
 .networkNavigationButtonContainer {
@@ -24,10 +16,14 @@
   justify-content: center;
   height: 100%;
   cursor: pointer;
+  transition:all 0.3s ease;
 }
 
-.networkNavigationButton:focus {
-  font-size: 1.2rem;
+.networkNavigationButton:active {
+  -webkit-transform: scale(0.8);
+  -ms-transform: scale(0.8);
+  transform: scale(0.8);
+  color:black;
 }
 
 .networkNavigationGlobe {

From 612bea00ce6239322192bcbea06604c51ae86793 Mon Sep 17 00:00:00 2001
From: Maurice Dalderup <Maurice_Dalderup@hotmail.com>
Date: Sat, 26 May 2018 15:40:43 +0200
Subject: [PATCH 3/6] chore(components): removed redundant css

---
 .../AccountInfo/AccountInfoAmounts/AccountInfoAmounts.css       | 2 --
 src/app/components/NetworkSwitcher/NetworkSwitcher.css          | 1 -
 2 files changed, 3 deletions(-)

diff --git a/src/app/components/AccountInfo/AccountInfoAmounts/AccountInfoAmounts.css b/src/app/components/AccountInfo/AccountInfoAmounts/AccountInfoAmounts.css
index f4cee2a..571e3f9 100644
--- a/src/app/components/AccountInfo/AccountInfoAmounts/AccountInfoAmounts.css
+++ b/src/app/components/AccountInfo/AccountInfoAmounts/AccountInfoAmounts.css
@@ -47,12 +47,10 @@
 
 .accountInfoRefreshButton:hover {
   opacity: 0.7;
-  border: 1px;
 }
 
 .accountInfoRefreshButton:active {
   opacity: 0.7;
-  border: 1px;
   -webkit-transform: scale(0.8);
   -ms-transform: scale(0.8);
   transform: scale(0.8);
diff --git a/src/app/components/NetworkSwitcher/NetworkSwitcher.css b/src/app/components/NetworkSwitcher/NetworkSwitcher.css
index 99110a7..703cd5b 100644
--- a/src/app/components/NetworkSwitcher/NetworkSwitcher.css
+++ b/src/app/components/NetworkSwitcher/NetworkSwitcher.css
@@ -23,7 +23,6 @@
   -webkit-transform: scale(0.8);
   -ms-transform: scale(0.8);
   transform: scale(0.8);
-  color:black;
 }
 
 .networkNavigationGlobe {

From 0557f184a5db0d2540aced4e26d3011d0bab4d52 Mon Sep 17 00:00:00 2001
From: Maurice Dalderup <Maurice_Dalderup@hotmail.com>
Date: Tue, 29 May 2018 20:57:12 +0200
Subject: [PATCH 4/6] chore(src): added focus ring management through
 what-input

---
 package-lock.json                                   | 13 +++++++++----
 package.json                                        |  3 ++-
 .../AccountInfoAmounts/AccountInfoAmounts.css       |  4 ----
 src/app/components/DropDown/DropDown.css            |  4 ----
 .../SettingsNavigation/SettingsNavigation.css       |  4 ----
 src/app/containers/App/App.css                      | 12 ++++++++----
 src/app/containers/App/App.js                       |  2 ++
 7 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 146a1ba..462d1ae 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -861,7 +861,7 @@
       "resolved": "https://registry.npmjs.org/axios/-/axios-0.18.0.tgz",
       "integrity": "sha1-MtU+SFHv3AoRmTts0AB4nXDAUQI=",
       "requires": {
-        "follow-redirects": "1.4.1",
+        "follow-redirects": "1.5.0",
         "is-buffer": "1.1.6"
       }
     },
@@ -5317,9 +5317,9 @@
       }
     },
     "follow-redirects": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.4.1.tgz",
-      "integrity": "sha512-uxYePVPogtya1ktGnAAXOacnbIuRMB4dkvqeNz2qTtTQsuzSfbDolV+wMMKxAmCx0bLgAKLbBOkjItMbbkR1vg==",
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.0.tgz",
+      "integrity": "sha512-fdrt472/9qQ6Kgjvb935ig6vJCuofpBUD14f9Vb+SLlm7xIe4Qva5gey8EKtv8lp7ahE1wilg3xL1znpVGtZIA==",
       "requires": {
         "debug": "3.1.0"
       }
@@ -16869,6 +16869,11 @@
       "resolved": "https://registry.npmjs.org/websocket-extensions/-/websocket-extensions-0.1.3.tgz",
       "integrity": "sha512-nqHUnMXmBzT0w570r2JpJxfiSD1IzoI+HGVdd3aZ0yNi3ngvQ4jv1dtHt5VGxfI2yj5yqImPhOK4vmIh2xMbGg=="
     },
+    "what-input": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/what-input/-/what-input-5.1.0.tgz",
+      "integrity": "sha512-8Z/3D2ASERofi3YeWmcd7gjU2rg4lP4lMbXa6Kxb9R7l076tnmA7+lhhXCDpQ3R+X+lK3c8R8UuTG+YoJm7wGA=="
+    },
     "whatwg-encoding": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-1.0.3.tgz",
diff --git a/package.json b/package.json
index 42a6ffe..3a29601 100644
--- a/package.json
+++ b/package.json
@@ -82,7 +82,8 @@
     "redux": "^3.7.2",
     "redux-form": "^7.2.3",
     "redux-thunk": "^2.2.0",
-    "rmwc": "0.0.1-rc13"
+    "rmwc": "0.0.1-rc13",
+    "what-input": "^5.1.0"
   },
   "jest": {
     "transform": {
diff --git a/src/app/components/AccountInfo/AccountInfoAmounts/AccountInfoAmounts.css b/src/app/components/AccountInfo/AccountInfoAmounts/AccountInfoAmounts.css
index 571e3f9..a86b6fe 100644
--- a/src/app/components/AccountInfo/AccountInfoAmounts/AccountInfoAmounts.css
+++ b/src/app/components/AccountInfo/AccountInfoAmounts/AccountInfoAmounts.css
@@ -55,7 +55,3 @@
   -ms-transform: scale(0.8);
   transform: scale(0.8);
 }
-
-.accountInfoRefreshButton:focus  {
-  outline: none;
-}
diff --git a/src/app/components/DropDown/DropDown.css b/src/app/components/DropDown/DropDown.css
index c57c132..f02bb3b 100644
--- a/src/app/components/DropDown/DropDown.css
+++ b/src/app/components/DropDown/DropDown.css
@@ -20,7 +20,3 @@
 .showDropDown {
   display: block;
 }
-
-.dropDownButton:focus {
-  outline: none;
-}
diff --git a/src/app/components/SettingsNavigation/SettingsNavigation.css b/src/app/components/SettingsNavigation/SettingsNavigation.css
index 80b3b48..49d7ac9 100644
--- a/src/app/components/SettingsNavigation/SettingsNavigation.css
+++ b/src/app/components/SettingsNavigation/SettingsNavigation.css
@@ -17,10 +17,6 @@
   align-items: center;
 }
 
-.settingsNavigationButton:active {
-  outline:none;
-}
-
 .settingsNavigationButton svg {
   margin-right: 5px;
 }
diff --git a/src/app/containers/App/App.css b/src/app/containers/App/App.css
index 74ecc7a..3ba783b 100644
--- a/src/app/containers/App/App.css
+++ b/src/app/containers/App/App.css
@@ -30,13 +30,17 @@ h6 {
   background-color: #eaeaea;
 }
 
+::-webkit-scrollbar {
+    display: none;
+}
+
+[data-whatintent="mouse"] :focus {
+    outline-width: 0;
+}
+
 /* Temporary styling to make WIP pages more usable */
 .tempFormStyle {
   padding: 20px;
   display: flex;
   flex-direction: column;
 }
-
-::-webkit-scrollbar {
-  display: none;
-}
diff --git a/src/app/containers/App/App.js b/src/app/containers/App/App.js
index b1c1d0b..e5bd4e4 100644
--- a/src/app/containers/App/App.js
+++ b/src/app/containers/App/App.js
@@ -2,6 +2,8 @@ import React, { Component } from 'react'
 import { Switch, Route } from 'react-router-dom'
 import { connect } from 'react-redux'
 
+import 'what-input';
+
 import Home from '../Home'
 import Send from '../Send'
 import TestInvoke from '../TestInvoke'

From 94eb43150a90ef08a7f29ebd4f7252613a02b0e2 Mon Sep 17 00:00:00 2001
From: Maurice Dalderup <Maurice_Dalderup@hotmail.com>
Date: Tue, 29 May 2018 21:01:58 +0200
Subject: [PATCH 5/6] chore(src): linting fix

---
 src/app/containers/App/App.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/containers/App/App.js b/src/app/containers/App/App.js
index e5bd4e4..35ae0bb 100644
--- a/src/app/containers/App/App.js
+++ b/src/app/containers/App/App.js
@@ -2,7 +2,7 @@ import React, { Component } from 'react'
 import { Switch, Route } from 'react-router-dom'
 import { connect } from 'react-redux'
 
-import 'what-input';
+import 'what-input'
 
 import Home from '../Home'
 import Send from '../Send'

From 9e10e7a65288659a91270c2182f408203e71c982 Mon Sep 17 00:00:00 2001
From: Maurice Dalderup <Maurice_Dalderup@hotmail.com>
Date: Tue, 29 May 2018 21:31:16 +0200
Subject: [PATCH 6/6] chore(components): updated css to be more consistent

---
 .../AccountInfoAmounts/AccountInfoAmounts.css     | 15 ++++++++++-----
 .../AccountInfoHeader/AccountInfoHeader.css       | 14 +++++++++++---
 src/app/components/MainNav/MainNav.css            |  7 ++++++-
 .../NetworkSwitcher/NetworkSwitcher.css           |  7 ++++++-
 4 files changed, 33 insertions(+), 10 deletions(-)

diff --git a/src/app/components/AccountInfo/AccountInfoAmounts/AccountInfoAmounts.css b/src/app/components/AccountInfo/AccountInfoAmounts/AccountInfoAmounts.css
index a86b6fe..89787bf 100644
--- a/src/app/components/AccountInfo/AccountInfoAmounts/AccountInfoAmounts.css
+++ b/src/app/components/AccountInfo/AccountInfoAmounts/AccountInfoAmounts.css
@@ -32,7 +32,6 @@
   cursor: default;
 }
 
-
 .accountInfoRefreshButton {
   font-size: 1.2rem;
   border: none;
@@ -41,16 +40,22 @@
   cursor: pointer;
   background-color: white;
 
-  transition:all 0.2s ease;
-  opacity:1;
+  transition: all 0.2s ease;
+  opacity: 1;
+}
+
+.accountInfoRefreshButton:link,
+.accountInfoRefreshButton:visited {
+  color: #585858;
 }
 
 .accountInfoRefreshButton:hover {
-  opacity: 0.7;
+  opacity: 0.5;
 }
 
 .accountInfoRefreshButton:active {
-  opacity: 0.7;
+  opacity: 1;
+  color: #585858;
   -webkit-transform: scale(0.8);
   -ms-transform: scale(0.8);
   transform: scale(0.8);
diff --git a/src/app/components/AccountInfo/AccountInfoHeader/AccountInfoHeader.css b/src/app/components/AccountInfo/AccountInfoHeader/AccountInfoHeader.css
index 4b9250b..d94d534 100644
--- a/src/app/components/AccountInfo/AccountInfoHeader/AccountInfoHeader.css
+++ b/src/app/components/AccountInfo/AccountInfoHeader/AccountInfoHeader.css
@@ -44,14 +44,22 @@
   cursor: pointer;
   color: #585858;
   font-size: 1.1rem;
+  transition:all 0.2s ease;
+}
+
+.accountDropDownButton:link,
+.accountDropDownButton:visited {
+  color: #585858;
 }
 
 .accountDropDownButton:hover {
-  font-size: 1.2rem;
+  opacity: 0.5;
 }
 
-.accountDropDownButton:focus {
-  font-size: 1.2rem;
+.accountDropDownButton:active {
+  opacity: 1;
+  color: #585858;
+  font-size: 0.8rem;
 }
 
 .accountInfoDropDown {
diff --git a/src/app/components/MainNav/MainNav.css b/src/app/components/MainNav/MainNav.css
index f86bfcd..9f07f68 100644
--- a/src/app/components/MainNav/MainNav.css
+++ b/src/app/components/MainNav/MainNav.css
@@ -4,10 +4,15 @@
   height: 100%;
   border: none;
   cursor: pointer;
-  transition:all 0.3s ease;
+  transition:all 0.2s ease;
+}
+
+.mainNavButton:hover {
+  opacity: 0.6;
 }
 
 .mainNavButton:active {
+  opacity: 1;
   -webkit-transform: scale(0.8);
   -ms-transform: scale(0.8);
   transform: scale(0.8);
diff --git a/src/app/components/NetworkSwitcher/NetworkSwitcher.css b/src/app/components/NetworkSwitcher/NetworkSwitcher.css
index 703cd5b..50caf0a 100644
--- a/src/app/components/NetworkSwitcher/NetworkSwitcher.css
+++ b/src/app/components/NetworkSwitcher/NetworkSwitcher.css
@@ -16,10 +16,15 @@
   justify-content: center;
   height: 100%;
   cursor: pointer;
-  transition:all 0.3s ease;
+  transition:all 0.2s ease;
+}
+
+.networkNavigationButton:hover {
+  opacity: 0.6;
 }
 
 .networkNavigationButton:active {
+  opacity: 1;
   -webkit-transform: scale(0.8);
   -ms-transform: scale(0.8);
   transform: scale(0.8);