(fix) PR's feedback on https://github.com/poanetwork/poa-dapps-voting/pull/192#issuecomment-452305947

src/assets/stylesheets/components/_BallotInfoContainer.scss

@@ -46,10 +46,6 @@
         position: relative;
     }
 
-    &#{ & }-collapsed {
-        height: 90px;
-        overflow: hidden;
-    }
 }
 
 .bc-BallotInfoContainer_ToggleShow {

src/assets/stylesheets/components/_ButtonNewBallot.scss

@@ -1,6 +1,7 @@
 $sw-ButtonNewBallot-height: 36px;
 
 .sw-ButtonNewBallot {
+    @include not-selectable-text();
     align-items: center;
     border-radius: 3px;
     color: #fff;
@@ -25,6 +26,14 @@ $sw-ButtonNewBallot-height: 36px;
         &:hover {
             background-color: darken($poa-green-color, 10%);
         }
+
+        &.active {
+            &,
+            &:active,
+            &:hover {
+                background-color: $poa-green-color;
+            }
+        }
     }
 
     &#{ & }-sokol {
@@ -36,6 +45,14 @@ $sw-ButtonNewBallot-height: 36px;
         &:hover {
             background-color: darken(#fff, 5%);
         }
+
+        &.active {
+            &,
+            &:active,
+            &:hover {
+                background-color: #fff;
+            }
+        }
     }
 
     &#{ & }-dai {
@@ -47,6 +64,19 @@ $sw-ButtonNewBallot-height: 36px;
         &:hover {
             background-color: lighten($xdai-menu-icon-color, 5%);
         }
+
+        &.active {
+            &,
+            &:active,
+            &:hover {
+                background-color: $xdai-menu-icon-color;
+            }
+        }
+    }
+
+    &.active {
+        cursor: pointer;
+        pointer-events: none;
     }
 
     .sw-Header_Links & {

src/assets/stylesheets/components/_NavigationLinks.scss

@@ -9,6 +9,7 @@
 }
 
 .nl-NavigationLinks_Link {
+    @include not-selectable-text();
     align-items: center;
     color: #fff;
     display: flex;
@@ -27,6 +28,11 @@
         opacity: 1;
     }
 
+    &.active {
+        cursor: default;
+        pointer-events: none;
+    }
+
     &#{ & }-core {
         color: #fff;
 

src/components/ButtonNewBallot/index.js

@@ -1,14 +1,17 @@
 import React from 'react'
-import { constants } from '../../utils/constants'
 import { IconAdd } from '../IconAdd'
+import { NavLink } from 'react-router-dom'
+import { constants } from '../../utils/constants'
+import { scrollToTop } from '../../utils/utils'
 
 export const ButtonNewBallot = ({ extraClassName = '', networkBranch }) => {
   return (
-    <a
-      href={`${constants.rootPath}/new`}
+    <NavLink
       className={`sw-ButtonNewBallot ${extraClassName} sw-ButtonNewBallot-${networkBranch}`}
+      onClick={scrollToTop()}
+      to={`${constants.rootPath}/new`}
     >
       New Ballot <IconAdd networkBranch={networkBranch} />
-    </a>
+    </NavLink>
   )
 }

src/components/LogoDai/index.js

@@ -1,10 +1,11 @@
 import React from 'react'
 import logoSokol from './logo.svg'
+import { NavLink } from 'react-router-dom'
 
 export const LogoDai = ({ href = null, extraClass = '' }) => {
   return (
-    <a href={href} className={`sw-LogoDai ${extraClass}`}>
+    <NavLink to={href} className={`sw-LogoDai ${extraClass}`}>
       <img className="sw-LogoDai_Image" src={logoSokol} alt="" />
-    </a>
+    </NavLink>
   )
 }

src/components/LogoPOA/index.js

@@ -1,10 +1,11 @@
 import React from 'react'
 import logoPOA from './logo.svg'
+import { NavLink } from 'react-router-dom'
 
 export const LogoPOA = ({ href = null, extraClass = '' }) => {
   return (
-    <a href={href} className={`sw-LogoPOA ${extraClass}`}>
+    <NavLink to={href} className={`sw-LogoPOA ${extraClass}`}>
       <img className="sw-LogoPOA_Image" src={logoPOA} alt="" />
-    </a>
+    </NavLink>
   )
 }

src/components/LogoSokol/index.js

@@ -1,10 +1,11 @@
 import React from 'react'
 import logoSokol from './logo.svg'
+import { NavLink } from 'react-router-dom'
 
 export const LogoSokol = ({ href = null, extraClass = '' }) => {
   return (
-    <a href={href} className={`sw-LogoSokol ${extraClass}`}>
+    <NavLink to={href} className={`sw-LogoSokol ${extraClass}`}>
       <img className="sw-LogoSokol_Image" src={logoSokol} alt="" />
-    </a>
+    </NavLink>
   )
 }

src/components/NavigationLinks/index.js

@@ -1,7 +1,8 @@
 import React from 'react'
 import { NavLink } from 'react-router-dom'
-import { constants } from '../../utils/constants'
 import { NavigationIcon } from '../NavigationIcon'
+import { constants } from '../../utils/constants'
+import { scrollToTop } from '../../utils/utils'
 
 export const NavigationLinks = ({ networkBranch }) => {
   return (
@@ -14,6 +15,7 @@ export const NavigationLinks = ({ networkBranch }) => {
               className={`nl-NavigationLinks_Link nl-NavigationLinks_Link-${networkBranch}`}
               exact
               key={index}
+              onClick={scrollToTop()}
               to={item.url}
             >
               <NavigationIcon networkBranch={networkBranch} icon={item.icon} />

src/utils/constants.js

@@ -32,7 +32,7 @@ constants.navigationData = [
   {
     icon: 'all',
     title: 'All',
-    url: constants.rootPath
+    url: `${constants.rootPath}`
   },
   {
     icon: 'active',

src/utils/utils.js

@@ -15,3 +15,7 @@ export const getNetworkBranch = netId => {
 export const getNetworkName = netId => {
   return constants.NETWORKS[netId].NAME
 }
+
+export const scrollToTop = () => {
+  document.querySelectorAll('html')[0].scrollTop = 0
+}