Merge pull request #71 from gabitoesmiapodo/restyling

(Feature) Restyling

.editorconfig

@@ -0,0 +1,8 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
+indent_style = space
+indent_size = 2

README.md

@@ -13,7 +13,7 @@ Validators DApp is built for POA Network based blockchains. It gives an opportun
 
 ## MetaMask plugin setup
 
-* Connect to POA Network in MetaMask plugin (See [Connect to POA Network via MetaMask](https://github.com/poanetwork/wiki/blob/master/MetaMask-connect.md#connect-to-poa-network-via-metamask))
+* Connect to POA Network in MetaMask plugin (See [Connect to POA Network via MetaMask](https://github.com/poanetwork/wiki/wiki/POA-Network-on-MetaMask))
 
 Validators DApp is based on [POA Network Governance contracts](https://github.com/poanetwork/poa-network-consensus-contracts)
 
@@ -36,7 +36,7 @@ If you need to change already submitted data you need to repeat previous instruc
 If you are an active validator of POA Network you have an ability to confirm pending changes of personal information from other validators. To do it you need:
 - connect to the corresponding endpoint of POA Network in Metamask
 - select your voting key from accounts in Metamask
-- click **PENDING CHANGES** in the navigation bar. You'll see all pending changes 
+- click **PENDING CHANGES** in the navigation bar. You'll see all pending changes
 - find pending changes card
 - click **Confirm** button
 
@@ -46,4 +46,4 @@ If you see **Finalize** button, then 2 confirmations are already submitted and y
 
 1) `npm i`
 
-2) `npm start`
+2) `npm start`

package-lock.json

@@ -240,7 +240,7 @@
     "arr-flatten": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/arr-flatten/-/arr-flatten-1.1.0.tgz",
-      "integrity": "sha512-L3hKV5R/p5o81R7O02IGnwpDmkp6E982XhtbuwSe3O4qOtMMMtodicASA1Cny2U+aCXcNpml+m4dPsvsJ3jatg=="
+      "integrity": "sha1-NgSLv/TntH4TZkQxbJlmnqWukfE="
     },
     "arr-union": {
       "version": "3.1.0",
@@ -2618,7 +2618,7 @@
     "cosmiconfig": {
       "version": "2.2.2",
       "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-2.2.2.tgz",
-      "integrity": "sha512-GiNXLwAFPYHy25XmTPpafYvn3CLAkJ8FLsscq78MQd1Kh0OU6Yzhn4eV2MVF4G9WEQZoWEGltatdR+ntGPMl5A==",
+      "integrity": "sha1-YXPOvVb6wELB9DkO33r2wHx8uJI=",
       "requires": {
         "is-directory": "0.3.1",
         "js-yaml": "3.7.0",
@@ -5653,7 +5653,7 @@
     "hosted-git-info": {
       "version": "2.5.0",
       "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.5.0.tgz",
-      "integrity": "sha512-pNgbURSuab90KbTqvRPsseaTxOJCZBD0a7t+haSN33piP9cCM4l0CqdzAif2hUqm716UovKB2ROmiabGAKVXyg=="
+      "integrity": "sha1-bWDjSzq7yDEwYsO3mO+NkBoHrzw="
     },
     "hpack.js": {
       "version": "2.1.6",
@@ -8291,7 +8291,7 @@
     "normalize-package-data": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.4.0.tgz",
-      "integrity": "sha512-9jjUFbTPfEy3R/ad/2oNbKtW9Hgovl5O1FvFWKkKblNXoN/Oou6+9+KKohPK13Yc3/TyunyWhJp6gvRNR/PPAw==",
+      "integrity": "sha1-EvlaMH1YNSB1oEkHuErIvpisAS8=",
       "requires": {
         "hosted-git-info": "2.5.0",
         "is-builtin-module": "1.0.0",
@@ -8448,7 +8448,7 @@
     "npmlog": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz",
-      "integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==",
+      "integrity": "sha1-CKfyqL9zRgR3mp76StXMcXq7lUs=",
       "requires": {
         "are-we-there-yet": "1.1.4",
         "console-control-strings": "1.1.0",
@@ -11346,7 +11346,7 @@
     "safe-buffer": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.1.tgz",
-      "integrity": "sha512-kKvNJn6Mm93gAczWVJg7wH+wGYWNrDHdWvpUmHyEsgCtIwwo3bqPtV4tR5tuPaUhTOo/kvhVwd8XwwOllGYkbg=="
+      "integrity": "sha1-iTMSr2myEj3vcfV4iQAWce6yyFM="
     },
     "safe-regex": {
       "version": "1.1.0",
@@ -15037,7 +15037,7 @@
     "which": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/which/-/which-1.3.0.tgz",
-      "integrity": "sha512-xcJpopdamTuY5duC/KnTTNBraPK54YwpenP4lzxU8H91GudWpFv38u0CKjclE1Wi2EH2EDz5LRcHcKbCIzqGyg==",
+      "integrity": "sha1-/wS9/AEO5UfXgL7DjhrBwnd9JTo=",
       "requires": {
         "isexe": "2.0.0"
       }
@@ -15050,7 +15050,7 @@
     "wide-align": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.2.tgz",
-      "integrity": "sha512-ijDLlyQ7s6x1JgCLur53osjm/UXUYD9+0PbYKrBsYisYXzCxN+HC3mYDNy/dWdmf3AwqwU3CXwDCvsNgGK1S0w==",
+      "integrity": "sha1-Vx4PGwYEY268DfwhsDObvjE0FxA=",
       "requires": {
         "string-width": "1.0.2"
       }

package.json

@@ -47,6 +47,7 @@
     "watch-css": "nodemon -e scss -x \"npm run build-css\"",
     "start-js": "react-scripts start",
     "start": "node scripts/start.js",
+    "start-watch": "npm-run-all -p watch-css start-js",
     "build-js": "react-scripts build",
     "build": "node scripts/build.js",
     "test": "react-scripts test --env=jsdom",

public/favicons/browserconfig.xml

@@ -3,7 +3,7 @@
     <msapplication>
         <tile>
             <square150x150logo src="/mstile-150x150.png"/>
-            <TileColor>#da532c</TileColor>
+            <TileColor>#5c3698</TileColor>
         </tile>
     </msapplication>
 </browserconfig>

public/index.html

@@ -11,6 +11,7 @@
     -->
   <link rel="manifest" href="%PUBLIC_URL%/favicons/manifest.json">
   <link rel="shortcut icon" href="%PUBLIC_URL%/favicons/favicon.ico">
+  <link href="https://fonts.googleapis.com/css?family=Nunito:300,400,700" rel="stylesheet">
   <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

public/manifest.json

@@ -1,6 +1,6 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "short_name": "POA Validators dApp",
+  "name": "POA Validators dApp",
   "icons": [
     {
       "src": "favicon.ico",

src/AllValidators.js

@@ -88,10 +88,17 @@ export default class AllValidators extends Component {
     )
     const validatorsCount = isValidatorsPage ? validatorsCountObj : ''
 
+    const titleContainer = (
+      <div className="main-title-container">
+        <span className="main-title">{this.props.viewTitle}</span>
+        {validatorsCount}
+      </div>
+    )
+
     return (
       <div className="container">
         {loading}
-        {validatorsCount}
+        {titleContainer}
         {validators}
       </div>
     )

src/App.js

@@ -198,6 +198,7 @@ class App extends Component {
     const field = event.target.id
     const value = event.target.value
     let form = this.state.form
+
     form[field] = value
     this.setState({ form })
   }
@@ -224,18 +225,10 @@ class App extends Component {
           <div className="create-keys-form-i">
             <label htmlFor="first-name">First name</label>
             <input type="text" id="firstName" value={this.state.form.firstName} onChange={this.onChangeFormField} />
-            <label htmlFor="last-name">Last name</label>
-            <input type="text" id="lastName" value={this.state.form.lastName} onChange={this.onChangeFormField} />
             <label htmlFor="address">Address</label>
             <PlacesAutocomplete onSelect={this.onSelect} inputProps={inputProps} autocompleteItem={AutocompleteItem} />
-            <label htmlFor="state">State</label>
-            <input type="text" id="us_state" value={this.state.form.us_state} onChange={this.onChangeFormField} />
-          </div>
-          <div className="create-keys-form-i">
             <label htmlFor="zip">Zip code</label>
             <input type="text" id="postal_code" value={this.state.form.postal_code} onChange={this.onChangeFormField} />
-            <label htmlFor="licenseId">License id</label>
-            <input type="text" id="licenseId" value={this.state.form.licenseId} onChange={this.onChangeFormField} />
             <label htmlFor="expirationDate">License expiration</label>
             <input
               type="date"
@@ -244,16 +237,32 @@ class App extends Component {
               onChange={this.onChangeFormField}
             />
           </div>
+          <div className="create-keys-form-i">
+            <label htmlFor="last-name">Last name</label>
+            <input type="text" id="lastName" value={this.state.form.lastName} onChange={this.onChangeFormField} />
+            <label htmlFor="state">State</label>
+            <input type="text" id="us_state" value={this.state.form.us_state} onChange={this.onChangeFormField} />
+            <label htmlFor="licenseId">License id</label>
+            <input type="text" id="licenseId" value={this.state.form.licenseId} onChange={this.onChangeFormField} />
+          </div>
         </form>
         <button onClick={this.onClick} className="create-keys-button">
           {BtnAction} Metadata
         </button>
       </div>
     )
+
     let content = createKeyBtn
+    const titleContainer = (
+      <div className="main-title-container no-search-on-top">
+        <span className="main-title">{this.props.viewTitle}</span>
+      </div>
+    )
+
     return (
       <div className="container">
         {loader}
+        {titleContainer}
         {content}
       </div>
     )

src/Footer.js

@@ -1,26 +1,18 @@
 import React from 'react'
 import moment from 'moment'
+import Socials from './Socials'
+
 const Footer = ({ netId }) => {
   const footerClassName = netId === '77' ? 'sokol' : ''
+
   return (
     <footer className={`footer ${footerClassName}`}>
       <div className="container">
-        <p className="footer-rights">{moment().format('YYYY')} POA Network. All rights reserved.</p>
-        <a href="/poa-dapps-keys-generation" className="footer-logo" />
-        <div className="socials">
-          <a href="https://twitter.com/poanetwork" className="socials-i socials-i_twitter">
-            Twitter
-          </a>
-          <a href="https://poa.network" className="socials-i socials-i_oracles">
-            POA Network
-          </a>
-          <a href="https://t.me/oraclesnetwork" className="socials-i socials-i_telegram">
-            Telegram
-          </a>
-          <a href="https://github.com/poanetwork/" className="socials-i socials-i_github">
-            GitHub
-          </a>
-        </div>
+        <a href="/">
+          <i className="footer-logo" />
+        </a>
+        <p className="footer-rights">{moment().format('YYYY')} POA. All rights reserved.</p>
+        <Socials />
       </div>
     </footer>
   )

src/Header.js

@@ -0,0 +1,65 @@
+import React from 'react'
+import Select from 'react-select'
+import logoBase from './images/logos/logo_validators_dapp@2x.png'
+import logoSokol from './images/logos/logo_sokol@2x.png'
+import menuIconBase from './images/icons/icon-menu.svg'
+import menuIconSokol from './images/icons/icon-menu-sokol.svg'
+import menuOpenIconBase from './images/icons/icon-close.svg'
+import menuOpenIconSokol from './images/icons/icon-close-sokol.svg'
+import NavigationLinks from './NavigationLinks'
+import MobileMenuLinks from './MobileMenuLinks'
+
+const Header = ({ netId, onChange, injectedWeb3, showMobileMenu, onMenuToggle, baseRootPath, navigationData }) => {
+  const headerClassName = netId === '77' ? 'sokol' : ''
+  const logoImageName = netId === '77' ? logoSokol : logoBase
+  const menuIcon = netId === '77' ? menuIconSokol : menuIconBase
+  const menuOpenIcon = netId === '77' ? menuOpenIconSokol : menuOpenIconBase
+
+  let select
+
+  if (!injectedWeb3) {
+    select = (
+      <Select
+        id="netId"
+        value={netId}
+        onChange={onChange}
+        style={{
+          width: '150px'
+        }}
+        wrapperStyle={{
+          width: '150px'
+        }}
+        clearable={false}
+        options={[{ value: '77', label: 'Network: Sokol' }, { value: '99', label: 'Network: Core' }]}
+      />
+    )
+  }
+  return (
+    <header id="header" className={`header ${headerClassName}`}>
+      {showMobileMenu && (
+        <div className="header-mobile-menu-container">
+          {<MobileMenuLinks onMenuToggle={onMenuToggle} navigationData={navigationData} />}
+        </div>
+      )}
+      <div className="container">
+        <a className="header-logo-a" href={baseRootPath}>
+          <img className="header-logo" src={logoImageName} alt="" />
+        </a>
+        <div className="links-container">
+          <NavigationLinks navigationData={navigationData} />
+        </div>
+        <div className="mobile-menu">
+          <img
+            alt=""
+            className={showMobileMenu ? 'mobile-menu-open-icon' : 'mobile-menu-icon'}
+            onClick={onMenuToggle}
+            src={showMobileMenu ? menuOpenIcon : menuIcon}
+          />
+        </div>
+        {select}
+      </div>
+    </header>
+  )
+}
+
+export default Header

src/Loading.js

@@ -1,11 +1,13 @@
 import React from 'react'
+
 const styles = netId => {
   const core = {
-    backgroundColor: 'rgba(35, 29, 115, 0.8)'
+    backgroundColor: 'rgba(78,44,137, 0.9)'
   }
   const sokol = {
     backgroundColor: 'rgba(47, 109, 99, 0.8)'
   }
+
   switch (netId) {
     case '77':
       return sokol

src/MobileMenuLinks.js

@@ -0,0 +1,17 @@
+import React from 'react'
+import { NavLink } from 'react-router-dom'
+
+const MobileMenuLinks = ({ onMenuToggle, navigationData }) => {
+  return (
+    <div className="links-container-mobile" onClick={onMenuToggle}>
+      {navigationData.map((item, index) => (
+        <NavLink activeClassName="active" className="link" exact to={item.url} key={index}>
+          <i className={`link-icon ${item.icon}`} />
+          <span className="link-text">{item.title}</span>
+        </NavLink>
+      ))}
+    </div>
+  )
+}
+
+export default MobileMenuLinks

src/NavigationLinks.js

@@ -0,0 +1,13 @@
+import React from 'react'
+import { NavLink } from 'react-router-dom'
+
+const NavigationLinks = ({ navigationData, baseRootPath }) => {
+  return navigationData.map((item, index) => (
+    <NavLink activeClassName="active" className="link" exact key={index} to={item.url}>
+      <i className={`link-icon ${item.icon}`} />
+      <span className="link-text">{item.title}</span>
+    </NavLink>
+  ))
+}
+
+export default NavigationLinks

src/Socials.js

@@ -0,0 +1,38 @@
+import React from 'react'
+
+let Socials = () => {
+  const socialItems = [
+    {
+      icon: 'socials-i_twitter',
+      title: 'Twitter',
+      url: 'https://twitter.com/poanetwork'
+    },
+    // {
+    //   icon: 'socials-i_poa',
+    //   title: 'POA Network',
+    //   url: 'https://poa.network'
+    // },
+    {
+      icon: 'socials-i_telegram',
+      title: 'Telegram',
+      url: 'https://t.me/oraclesnetwork'
+    },
+    {
+      icon: 'socials-i_github',
+      title: 'GitHub',
+      url: 'https://github.com/poanetwork/'
+    }
+  ]
+
+  return (
+    <div className="socials">
+      {socialItems.map((item, index) => (
+        <a className={`socials-i ${item.icon}`} key={index} href={item.url}>
+          {item.title}
+        </a>
+      ))}
+    </div>
+  )
+}
+
+export default Socials

src/Validator.js

@@ -32,9 +32,7 @@ class Validator extends Component {
     const confirmations = showAllValidators ? (
       ''
     ) : (
-      <div className="confirmations">
-        <div>{this.state.confirmation} confirmations</div>
-      </div>
+      <div className="validators-header--confirmations">{this.state.confirmation} confirmations</div>
     )
 
     const indexAndAddress = showAllValidators ? `#${index}. ${address}` : address
@@ -50,13 +48,15 @@ class Validator extends Component {
     return (
       <div className="validators-i">
         <div className="validators-header">
-          <div className="validators-header--address">{indexAndAddress}</div>
-          <div>{confirmations}</div>
-          <div>{children}</div>
+          <div>
+            <div className="validators-header--address">{indexAndAddress}</div>
+            <div className="validators-header--hint">Wallet Address</div>
+          </div>
+          {confirmations}
         </div>
         <div className="validators-body">
           <div className="validators-notary left">
-            <p className="validators-title">Notary</p>
+            <p className="validators-title validators-title--notary">Notary</p>
             <div className="validators-table">
               <div className="validators-table-i">
                 <p>Full Name</p>
@@ -79,7 +79,7 @@ class Validator extends Component {
             </div>
           </div>
           <div className="validators-license right">
-            <p className="validators-title">Notary license</p>
+            <p className="validators-title  validators-title--notary-license">Notary license</p>
             <div className="validators-table">
               <div className="validators-table-i">
                 <p>License ID</p>
@@ -97,6 +97,7 @@ class Validator extends Component {
             </div>
           </div>
         </div>
+        <div className="validators-footer">{children}</div>
       </div>
     )
   }

src/getWeb3.js

@@ -1,14 +1,6 @@
 import Web3 from 'web3'
-const POA_CORE = {
-  RPC_URL: 'https://core.poa.network',
-  netIdName: 'CORE',
-  netId: '99'
-}
-const POA_SOKOL = {
-  RPC_URL: 'https://sokol.poa.network',
-  netIdName: 'SOKOL',
-  netId: '77'
-}
+const POA_CORE = { RPC_URL: 'https://core.poa.network', netIdName: 'CORE', netId: '99' }
+const POA_SOKOL = { RPC_URL: 'https://sokol.poa.network', netIdName: 'SOKOL', netId: '77' }
 let getWeb3 = () => {
   return new Promise(function(resolve, reject) {
     // Wait for loading completion to avoid race conditions with web3 injection timing.
@@ -35,12 +27,12 @@ let getWeb3 = () => {
               break
             default:
               netIdName = 'ERROR'
-              errorMsg = `You aren't connected to POA Network. 
-                  Please, switch to POA network and refresh the page. 
+              errorMsg = `You aren't connected to POA Network.
+                  Please, switch to POA network and refresh the page.
                   Check POA Network <a href='https://github.com/poanetwork/wiki' target='blank'>wiki</a> for more info.`
               console.log('This is an unknown network.', netId)
           }
-          document.title = `${netIdName} - POA validators dApp`
+          document.title = `${netIdName} - POA Validators dApp`
           var defaultAccount = web3.eth.defaultAccount || null
           if (errorMsg !== null) {
             reject({ message: errorMsg })

src/images/icons/icon-all-sokol.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18">
+    <path fill="#ffffff" fill-rule="evenodd" d="M17 12H9a3 3 0 0 1 3 3v2a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1v-2a3 3 0 0 1 3-3h.184A2.962 2.962 0 0 1 3 11V9a3 3 0 0 1 3-3c.549 0 1.057.158 1.5.416A2.968 2.968 0 0 1 9 6h.184A2.962 2.962 0 0 1 9 5V3a3 3 0 1 1 6 0v2c0 .353-.072.686-.184 1H15a3 3 0 0 1 3 3v2a1 1 0 0 1-1 1zM7 9a1 1 0 0 0-2 0v2a1 1 0 0 0 2 0V9zm-4 5a1 1 0 0 0-1 1v1h8v-1a1 1 0 0 0-1-1H3zM13 3a1 1 0 0 0-2 0v2a1 1 0 0 0 2 0V3zm3 6a1 1 0 0 0-1-1H9c-.061 0-.115.024-.173.035C8.931 8.339 9 8.66 9 9v1h7V9z"/>
+</svg>

src/images/icons/icon-all.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18">
+    <path fill="#60DB97" fill-rule="evenodd" d="M17 12H9a3 3 0 0 1 3 3v2a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1v-2a3 3 0 0 1 3-3h.184A2.962 2.962 0 0 1 3 11V9a3 3 0 0 1 3-3c.549 0 1.057.158 1.5.416A2.968 2.968 0 0 1 9 6h.184A2.962 2.962 0 0 1 9 5V3a3 3 0 1 1 6 0v2c0 .353-.072.686-.184 1H15a3 3 0 0 1 3 3v2a1 1 0 0 1-1 1zM7 9a1 1 0 0 0-2 0v2a1 1 0 0 0 2 0V9zm-4 5a1 1 0 0 0-1 1v1h8v-1a1 1 0 0 0-1-1H3zM13 3a1 1 0 0 0-2 0v2a1 1 0 0 0 2 0V3zm3 6a1 1 0 0 0-1-1H9c-.061 0-.115.024-.173.035C8.931 8.339 9 8.66 9 9v1h7V9z"/>
+</svg>

src/images/icons/icon-arrow-right.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="19" height="14">
+    <path fill="#FFF" fill-rule="evenodd" d="M17.711 7.767L11.8 13.678a1.045 1.045 0 0 1-1.478-1.478l4.2-4.2H1a1 1 0 0 1 0-2h13.522l-4.233-4.233A1.045 1.045 0 0 1 11.767.289L17.678 6.2c.107.108.17.238.22.371.192.391.138.871-.187 1.196z"/>
+</svg>

src/images/icons/icon-close-sokol.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18">
+    <path fill="#ffffff" fill-rule="evenodd" d="M17.691 1.719l-3 3-4.265 4.265.019.02 4.245 4.245 3 3a1.019 1.019 0 1 1-1.441 1.441l-3-3-4.265-4.264L4.72 14.69l-3 3a1.02 1.02 0 0 1-1.442-1.441l3-3 4.265-4.265-.02-.019-4.245-4.246-3-3A1.019 1.019 0 1 1 1.719.278l3 3 4.265 4.265 4.266-4.265 3-3a1.019 1.019 0 1 1 1.441 1.441z"/>
+</svg>

src/images/icons/icon-close.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18">
+    <path fill="#60DB97" fill-rule="evenodd" d="M17.691 1.719l-3 3-4.265 4.265.019.02 4.245 4.245 3 3a1.019 1.019 0 1 1-1.441 1.441l-3-3-4.265-4.264L4.72 14.69l-3 3a1.02 1.02 0 0 1-1.442-1.441l3-3 4.265-4.265-.02-.019-4.245-4.246-3-3A1.019 1.019 0 1 1 1.719.278l3 3 4.265 4.265 4.266-4.265 3-3a1.019 1.019 0 1 1 1.441 1.441z"/>
+</svg>

src/images/icons/icon-menu-sokol.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="14">
+    <path fill="#ffffff" fill-rule="evenodd" d="M17 8H1a1 1 0 0 1 0-2h16a1 1 0 0 1 0 2zm0-6H1a1 1 0 0 1 0-2h16a1 1 0 0 1 0 2zM1 12h16a1 1 0 0 1 0 2H1a1 1 0 0 1 0-2z"/>
+</svg>

src/images/icons/icon-menu.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="14">
+    <path fill="#60DB97" fill-rule="evenodd" d="M17 8H1a1 1 0 0 1 0-2h16a1 1 0 0 1 0 2zm0-6H1a1 1 0 0 1 0-2h16a1 1 0 0 1 0 2zM1 12h16a1 1 0 0 1 0 2H1a1 1 0 0 1 0-2z"/>
+</svg>

src/images/icons/icon-notary-license.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="24">
+    <path fill="#DED6EC" fill-rule="evenodd" d="M0 2h19v8H0V2z"/>
+    <path fill="#5C34A2" fill-rule="evenodd" d="M19 21h-2a1 1 0 0 1 0-2h1V2H2v17h7a1 1 0 0 1 0 2H1a1 1 0 0 1-1-1V1a1 1 0 0 1 1-1h18a1 1 0 0 1 1 1v19a1 1 0 0 1-1 1zm-4-10h-3a1 1 0 0 1 0-2h3a1 1 0 0 1 0 2zM5 5h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2zm0 8h3a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2zm0-4h3a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2zm8 4a3 3 0 0 1 3 3 2.99 2.99 0 0 1-2 2.816V23a1 1 0 0 1-2 0v-4.184A2.99 2.99 0 0 1 10 16a3 3 0 0 1 3-3zm0 4a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/>
+</svg>

src/images/icons/icon-notary.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">
+    <path fill="#5C34A2" fill-rule="evenodd" d="M22 24H2a2 2 0 0 1-2-2v-2a8.002 8.002 0 0 1 6.416-7.842C7.285 14.402 9.45 16 12 16c2.551 0 4.715-1.598 5.584-3.842A8.002 8.002 0 0 1 24 20v2a2 2 0 0 1-2 2z" opacity=".2"/>
+    <path fill="#5C34A2" fill-rule="evenodd" d="M22 24H2a2 2 0 0 1-2-2v-2a8.002 8.002 0 0 1 6.416-7.842A5.975 5.975 0 0 1 6 10V6a6 6 0 1 1 12 0v4c0 .763-.157 1.487-.416 2.158A8.002 8.002 0 0 1 24 20v2a2 2 0 0 1-2 2zM16 7.143C16 4.303 14.209 2 12 2S8 4.303 8 7.143v1.714C8 11.697 9.791 14 12 14s4-2.303 4-5.143V7.143zM22 20c0-3.174-2.472-5.745-5.591-5.959C15.312 15.237 13.751 16 12 16s-3.312-.763-4.409-1.959C4.472 14.255 2 16.826 2 20v1a1 1 0 0 0 1 1h3v-2a1 1 0 0 1 2 0v2h8v-2a1 1 0 0 1 2 0v2h3a1 1 0 0 0 1-1v-1z"/>
+</svg>

src/images/icons/icon-pending-changes-sokol.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18">
+    <path fill="#ffffff" fill-rule="evenodd" d="M17 18H1a1 1 0 0 1-1-1V1a1 1 0 0 1 1-1h6a1 1 0 0 1 0 2H2v14h14v-5a1 1 0 0 1 2 0v6a1 1 0 0 1-1 1zm-.579-15.027l-1.425-1.426L16.26.283a1.008 1.008 0 1 1 1.426 1.425l-1.265 1.265zm-8.713 8.713a1.009 1.009 0 0 1-1.425-1.426l7.264-7.264 1.426 1.425-7.265 7.265z"/>
+</svg>

src/images/icons/icon-pending-changes.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18">
+    <path fill="#60DB97" fill-rule="evenodd" d="M17 18H1a1 1 0 0 1-1-1V1a1 1 0 0 1 1-1h6a1 1 0 0 1 0 2H2v14h14v-5a1 1 0 0 1 2 0v6a1 1 0 0 1-1 1zm-.579-15.027l-1.425-1.426L16.26.283a1.008 1.008 0 1 1 1.426 1.425l-1.265 1.265zm-8.713 8.713a1.009 1.009 0 0 1-1.425-1.426l7.264-7.264 1.426 1.425-7.265 7.265z"/>
+</svg>

src/images/icons/icon-search-sokol.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14">
+    <path fill="#ffffff" fill-rule="evenodd" d="M13.711 13.711a1.01 1.01 0 0 1-1.427 0l-1.97-1.97A6.444 6.444 0 0 1 6.5 13 6.5 6.5 0 1 1 13 6.5c0 1.43-.476 2.741-1.259 3.814l1.97 1.97a1.01 1.01 0 0 1 0 1.427zM6.5 2a4.5 4.5 0 1 0 0 9 4.5 4.5 0 0 0 0-9z"/>
+</svg>

src/images/icons/icon-search.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14">
+    <path fill="#60DB97" fill-rule="evenodd" d="M13.711 13.711a1.01 1.01 0 0 1-1.427 0l-1.97-1.97A6.444 6.444 0 0 1 6.5 13 6.5 6.5 0 1 1 13 6.5c0 1.43-.476 2.741-1.259 3.814l1.97 1.97a1.01 1.01 0 0 1 0 1.427zM6.5 2a4.5 4.5 0 1 0 0 9 4.5 4.5 0 0 0 0-9z"/>
+</svg>

src/images/icons/icon-set-metadata-sokol.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18">
+    <path fill="#ffffff" fill-rule="evenodd" d="M17 18H1a1 1 0 0 1-1-1V1a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1zM16 2H2v14h14V2zM5 4h4a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2zm0 4h8a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2zm0 4h1a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2zm4 0h4a1 1 0 0 1 0 2H9a1 1 0 0 1 0-2zm4-6h-1a1 1 0 0 1 0-2h1a1 1 0 0 1 0 2z"/>
+</svg>

src/images/icons/icon-set-metadata.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18">
+    <path fill="#60DB97" fill-rule="evenodd" d="M17 18H1a1 1 0 0 1-1-1V1a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1zM16 2H2v14h14V2zM5 4h4a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2zm0 4h8a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2zm0 4h1a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2zm4 0h4a1 1 0 0 1 0 2H9a1 1 0 0 1 0-2zm4-6h-1a1 1 0 0 1 0-2h1a1 1 0 0 1 0 2z"/>
+</svg>

src/images/logos/logo_loader.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 214.64 31"><title>logo-loader</title><g style="isolation:isolate"><path d="M123.06,33.95a1,1,0,0,1-.31-0.74v-17a1.14,1.14,0,0,1,.29-0.82,1.2,1.2,0,0,1,1.61,0,1.15,1.15,0,0,1,.29.82v16.1h8.65a1.07,1.07,0,0,1,.75.24,1,1,0,0,1,0,1.4,1.08,1.08,0,0,1-.75.24h-9.78A1.09,1.09,0,0,1,123.06,33.95Z" transform="translate(0 -10)" fill="#fff"/><path d="M139,33.58a5.55,5.55,0,0,1-2.17-2.38,8,8,0,0,1-.76-3.59,8,8,0,0,1,.76-3.59A5.54,5.54,0,0,1,139,21.63a6.25,6.25,0,0,1,3.25-.83,6.34,6.34,0,0,1,3.27.83A5.53,5.53,0,0,1,147.74,24a8,8,0,0,1,.76,3.59,8,8,0,0,1-.76,3.59,5.54,5.54,0,0,1-2.18,2.38,6.34,6.34,0,0,1-3.27.83A6.26,6.26,0,0,1,139,33.58Zm6.21-2.25a5.83,5.83,0,0,0,1-3.73,5.79,5.79,0,0,0-1-3.7,4,4,0,0,0-5.89,0,5.8,5.8,0,0,0-1,3.7,5.84,5.84,0,0,0,1,3.72A4.05,4.05,0,0,0,145.25,31.34Z" transform="translate(0 -10)" fill="#fff"/><path d="M162,26v7.32a1.09,1.09,0,0,1-.28.78,1,1,0,0,1-.76.3,1,1,0,0,1-1.07-1.08V32a3.85,3.85,0,0,1-1.55,1.79,4.56,4.56,0,0,1-2.41.63,5.26,5.26,0,0,1-2.32-.51,4.14,4.14,0,0,1-1.67-1.43,3.54,3.54,0,0,1-.62-2,3.29,3.29,0,0,1,.75-2.3A4.54,4.54,0,0,1,154.5,27a24.24,24.24,0,0,1,4.77-.36h0.59V25.72a3.55,3.55,0,0,0-.66-2.37,2.69,2.69,0,0,0-2.13-.75,7.84,7.84,0,0,0-3.7,1,2.44,2.44,0,0,1-1,.46,0.69,0.69,0,0,1-.54-0.24,0.9,0.9,0,0,1-.21-0.62,1,1,0,0,1,.23-0.66,2.67,2.67,0,0,1,.74-0.58,8.61,8.61,0,0,1,2.13-.85,9.4,9.4,0,0,1,2.37-.31Q162,20.79,162,26Zm-3.15,5.64a3.93,3.93,0,0,0,1-2.81V28h-0.48a23.82,23.82,0,0,0-3.59.2,3.47,3.47,0,0,0-1.75.67,1.77,1.77,0,0,0-.52,1.39,2.23,2.23,0,0,0,.76,1.74,2.76,2.76,0,0,0,1.92.69A3.47,3.47,0,0,0,158.83,31.6Z" transform="translate(0 -10)" fill="#fff"/><path d="M177.22,15.41a1,1,0,0,1,.29.75V33.29a1.06,1.06,0,0,1-.29.78,1.08,1.08,0,0,1-.8.3,1,1,0,0,1-.79-0.3,1.09,1.09,0,0,1-.28-0.78V31.83a4.32,4.32,0,0,1-1.73,1.91,5.14,5.14,0,0,1-2.67.67,5.39,5.39,0,0,1-3-.86,5.67,5.67,0,0,1-2-2.41,8.41,8.41,0,0,1-.72-3.59,8.26,8.26,0,0,1,.72-3.55,5.37,5.37,0,0,1,5.06-3.2,5.14,5.14,0,0,1,2.67.67,4.32,4.32,0,0,1,1.73,1.91V16.16a1,1,0,0,1,.28-0.77,1.07,1.07,0,0,1,.79-0.28A1.08,1.08,0,0,1,177.22,15.41Zm-2.91,15.9a5.85,5.85,0,0,0,1-3.7,5.79,5.79,0,0,0-1-3.69,3.54,3.54,0,0,0-2.93-1.29,3.61,3.61,0,0,0-3,1.29,5.59,5.59,0,0,0-1.06,3.63,5.85,5.85,0,0,0,1.06,3.73,3.57,3.57,0,0,0,3,1.33A3.52,3.52,0,0,0,174.31,31.31Z" transform="translate(0 -10)" fill="#fff"/><path d="M181.59,17.65a1.3,1.3,0,0,1-.4-1,1.27,1.27,0,0,1,.4-1,1.64,1.64,0,0,1,2.09,0,1.27,1.27,0,0,1,.4,1,1.3,1.3,0,0,1-.4,1A1.64,1.64,0,0,1,181.59,17.65Zm0.25,16.44a1,1,0,0,1-.31-0.79V21.93a1,1,0,0,1,.31-0.79,1.12,1.12,0,0,1,.79-0.28,1.08,1.08,0,0,1,.78.28,1.05,1.05,0,0,1,.29.79V33.29a1,1,0,0,1-.29.81,1.11,1.11,0,0,1-.78.27A1.13,1.13,0,0,1,181.84,34.08Z" transform="translate(0 -10)" fill="#fff"/><path d="M199,26v7.3a1,1,0,0,1-1.07,1.08,1.12,1.12,0,0,1-.8-0.28,1.05,1.05,0,0,1-.29-0.79V26.13a4.08,4.08,0,0,0-.71-2.66,2.82,2.82,0,0,0-2.26-.83,3.81,3.81,0,0,0-2.87,1.1,4.11,4.11,0,0,0-1.07,3v6.57a1,1,0,0,1-1.07,1.08,1.12,1.12,0,0,1-.8-0.28,1.05,1.05,0,0,1-.29-0.79V21.93a1.06,1.06,0,0,1,.29-0.78,1.08,1.08,0,0,1,.8-0.3,1,1,0,0,1,.76.3,1.05,1.05,0,0,1,.28.75v1.37a4.41,4.41,0,0,1,1.79-1.84,5.36,5.36,0,0,1,2.63-.63Q199,20.79,199,26Z" transform="translate(0 -10)" fill="#fff"/><path d="M214.35,21.15a1.06,1.06,0,0,1,.29.78V33.34a6,6,0,0,1-1.5,4.43,6,6,0,0,1-4.45,1.49,9.2,9.2,0,0,1-4.77-1.13,1.51,1.51,0,0,1-1-1.24,0.94,0.94,0,0,1,.2-0.62,0.65,0.65,0,0,1,.52-0.24,2.58,2.58,0,0,1,1,.38,12.4,12.4,0,0,0,1.85.78,7.06,7.06,0,0,0,2.17.3,3.79,3.79,0,0,0,2.87-1,4.11,4.11,0,0,0,1-2.95V31.21a4.09,4.09,0,0,1-1.73,1.94,5.39,5.39,0,0,1-2.75.67,5.73,5.73,0,0,1-3-.81,5.46,5.46,0,0,1-2.06-2.29,7.58,7.58,0,0,1-.74-3.42,7.58,7.58,0,0,1,.74-3.42A5.46,5.46,0,0,1,205,21.6a5.73,5.73,0,0,1,3-.81,5.27,5.27,0,0,1,2.71.67,4.3,4.3,0,0,1,1.74,1.91V21.93a1.09,1.09,0,0,1,.28-0.78,1,1,0,0,1,.79-0.3A1.08,1.08,0,0,1,214.35,21.15Zm-2.95,9.62a5.15,5.15,0,0,0,1.07-3.46,5.15,5.15,0,0,0-1.06-3.43,3.66,3.66,0,0,0-3-1.25,3.75,3.75,0,0,0-3,1.25,5.07,5.07,0,0,0-1.08,3.43,5.11,5.11,0,0,0,1.08,3.46,3.74,3.74,0,0,0,3,1.25A3.67,3.67,0,0,0,211.4,30.77Z" transform="translate(0 -10)" fill="#fff"/></g><path d="M17.38,34.81H15.81v4.63h0A1.57,1.57,0,0,1,14.22,41H1.59A1.57,1.57,0,0,1,0,39.45H0V11.56H0v0A1.57,1.57,0,0,1,1.59,10H17.38A12.52,12.52,0,0,1,30,22.41,12.52,12.52,0,0,1,17.38,34.81ZM48.5,10A15.5,15.5,0,1,1,33,25.5,15.5,15.5,0,0,1,48.5,10ZM99,40a1,1,0,0,1-1,1H62.94a0.94,0.94,0,0,1-.74-1.51l0,0L79.54,10.77h0a0.93,0.93,0,0,1,1.83,0h0L99,39.65l-0.06.08A0.93,0.93,0,0,1,99,40Z" transform="translate(0 -10)" fill="#fff"/></svg>

src/index.js

@@ -1,58 +1,47 @@
+import 'react-select/dist/react-select.css'
+import AllValidators from './AllValidators'
+import App from './App'
+import Footer from './Footer'
+import Header from './Header'
+import KeysManager from './contracts/KeysManager.contract'
+import Loading from './Loading'
+import Metadata from './contracts/Metadata.contract'
 import React, { Component } from 'react'
 import ReactDOM from 'react-dom'
-import App from './App'
-import registerServiceWorker from './registerServiceWorker'
-import KeysManager from './contracts/KeysManager.contract'
-import Metadata from './contracts/Metadata.contract'
+import createBrowserHistory from 'history/createBrowserHistory'
 import getWeb3, { setWeb3 } from './getWeb3'
 import helpers from './helpers'
-import { messages } from './messages'
-import { Router, Route, NavLink } from 'react-router-dom'
-import createBrowserHistory from 'history/createBrowserHistory'
-import Loading from './Loading'
-import Footer from './Footer'
-import AllValidators from './AllValidators'
-import Select from 'react-select'
-import 'react-select/dist/react-select.css'
 import networkAddresses from './contracts/addresses'
+import registerServiceWorker from './registerServiceWorker'
+import { Router, Route } from 'react-router-dom'
+import { messages } from './messages'
 
 const history = createBrowserHistory()
-
-let Header = ({ netId, onChange, injectedWeb3 }) => {
-  let select
-  let headerClassName = netId === '77' ? 'sokol' : ''
-  const logoClassName = netId === '77' ? 'header-logo-sokol' : 'header-logo'
-  if (!injectedWeb3) {
-    select = (
-      <Select
-        id="netId"
-        value={netId}
-        onChange={onChange}
-        style={{
-          width: '150px'
-        }}
-        wrapperStyle={{
-          width: '150px'
-        }}
-        clearable={false}
-        options={[{ value: '77', label: 'Network: Sokol' }, { value: '99', label: 'Network: Core' }]}
-      />
-    )
+const baseRootPath = '/poa-dapps-validators'
+const navigationData = [
+  {
+    icon: 'link-icon-all',
+    title: 'All',
+    url: baseRootPath
+  },
+  {
+    icon: 'link-icon-set-metadata',
+    title: 'Set Metadata',
+    url: `${baseRootPath}/set`
+  },
+  {
+    icon: 'link-icon-pending-changes',
+    title: 'Pending Changes',
+    url: `${baseRootPath}/pending-changes`
   }
-  return (
-    <header id="header" className={`header ${headerClassName}`}>
-      <div className="container">
-        <a href="/poa-dapps-validators" className={logoClassName} />
-        {select}
-      </div>
-    </header>
-  )
-}
+]
+
 class AppMainRouter extends Component {
   constructor(props) {
     super(props)
-    this.rootPath = '/poa-dapps-validators'
+
     history.listen(this.onRouteChange.bind(this))
+
     this.onSetRender = this.onSetRender.bind(this)
     this.onPendingChangesRender = this.onPendingChangesRender.bind(this)
     this.onAllValidatorsRender = this.onAllValidatorsRender.bind(this)
@@ -60,6 +49,9 @@ class AppMainRouter extends Component {
     this.onFinalize = this.onFinalize.bind(this)
     this.onSearch = this.onSearch.bind(this)
     this.onNetworkChange = this.onNetworkChange.bind(this)
+    this.toggleMobileMenu = this.toggleMobileMenu.bind(this)
+    this.getNetIdClass = this.getNetIdClass.bind(this)
+
     this.state = {
       showSearch: true,
       keysManager: null,
@@ -70,7 +62,9 @@ class AppMainRouter extends Component {
       searchTerm: '',
       injectedWeb3: true,
       netId: '',
-      error: false
+      error: false,
+      title: navigationData[0].title,
+      showMobileMenu: false
     }
     getWeb3()
       .then(async web3Config => {
@@ -106,9 +100,11 @@ class AppMainRouter extends Component {
       })
   }
   onRouteChange() {
-    const setMetadata = this.rootPath + '/set'
+    const setMetadata = baseRootPath + '/set'
+
     if (history.location.pathname === setMetadata) {
       this.setState({ showSearch: false })
+
       if (this.state.injectedWeb3 === false) {
         helpers.generateAlert('warning', 'Warning!', 'Metamask was not found')
       }
@@ -128,9 +124,13 @@ class AppMainRouter extends Component {
       return ''
     }
     return this.checkForVotingKey(() => {
-      return <App web3Config={this.state} />
+      return <App web3Config={this.state} viewTitle={navigationData[1]['title']} />
     })
   }
+  toggleMobileMenu = () => {
+    this.setState(prevState => ({ showMobileMenu: !prevState.showMobileMenu }))
+  }
+
   async _onBtnClick({ event, methodToCall, successMsg }) {
     event.preventDefault()
     this.checkForVotingKey(async () => {
@@ -174,6 +174,7 @@ class AppMainRouter extends Component {
         methodToCall="getAllPendingChanges"
         searchTerm={this.state.searchTerm}
         web3Config={this.state}
+        viewTitle={navigationData[2]['title']}
       >
         <button onClick={this.onFinalize} className="create-keys-button finalize">
           Finalize
@@ -188,18 +189,28 @@ class AppMainRouter extends Component {
     return this.state.loading || this.state.error ? (
       ''
     ) : (
-      <AllValidators searchTerm={this.state.searchTerm} methodToCall="getAllValidatorsData" web3Config={this.state} />
+      <AllValidators
+        searchTerm={this.state.searchTerm}
+        methodToCall="getAllValidatorsData"
+        web3Config={this.state}
+        viewTitle={navigationData[0]['title']}
+      />
     )
   }
+  getNetIdClass() {
+    return this.state.netId === '77' ? 'sokol' : ''
+  }
   onSearch(term) {
     this.setState({ searchTerm: term.target.value.toLowerCase() })
   }
   async onNetworkChange(e) {
     const netId = e.value
     const web3 = setWeb3(netId)
+
     networkAddresses({ netId }).then(async config => {
       const { addresses } = config
       const keysManager = new KeysManager()
+
       await keysManager.init({
         web3,
         netId,
@@ -216,37 +227,43 @@ class AppMainRouter extends Component {
   }
   render() {
     console.log('v2.09')
+
     const search = this.state.showSearch ? (
-      <input type="search" className="search-input" onChange={this.onSearch} />
+      <div className={`search-container ${this.getNetIdClass()}`}>
+        <div className="container">
+          <input type="search" className="search-input" onChange={this.onSearch} placeholder="Search..." />
+        </div>
+      </div>
     ) : (
       ''
     )
+
     const loading = this.state.loading ? <Loading netId={this.state.netId} /> : ''
+
     return (
       <Router history={history}>
-        <section className="content">
-          <Header netId={this.state.netId} onChange={this.onNetworkChange} injectedWeb3={this.state.injectedWeb3} />
+        <section className={`content ${this.state.showMobileMenu ? 'content-menu-open' : ''}`}>
           {loading}
-          <div className="nav-container">
-            <div className="container">
-              <div className="nav">
-                <NavLink className="nav-i" exact activeClassName="nav-i_active" to={`${this.rootPath}/`}>
-                  All
-                </NavLink>
-                <NavLink className="nav-i" activeClassName="nav-i_active" to={`${this.rootPath}/set`}>
-                  Set metadata
-                </NavLink>
-                <NavLink className="nav-i" activeClassName="nav-i_active" to={`${this.rootPath}/pending-changes`}>
-                  Pending changes
-                </NavLink>
-              </div>
-              {search}
-            </div>
+          <Header
+            baseRootPath={baseRootPath}
+            injectedWeb3={this.state.injectedWeb3}
+            navigationData={navigationData}
+            netId={this.state.netId}
+            onChange={this.onNetworkChange}
+            onMenuToggle={this.toggleMobileMenu}
+            showMobileMenu={this.state.showMobileMenu}
+          />
+          {search}
+          <div
+            className={`app-container ${
+              this.state.showMobileMenu ? 'app-container-open-mobile-menu' : ''
+            } ${this.getNetIdClass()}`}
+          >
+            <Route exact path="/" render={this.onAllValidatorsRender} web3Config={this.state} />
+            <Route exact path={`${baseRootPath}/`} render={this.onAllValidatorsRender} web3Config={this.state} />
+            <Route path={`${baseRootPath}/pending-changes`} render={this.onPendingChangesRender} />
+            <Route path={`${baseRootPath}/set`} render={this.onSetRender} />
           </div>
-          <Route exact path={`${this.rootPath}/`} render={this.onAllValidatorsRender} web3Config={this.state} />
-          <Route exact path="/" render={this.onAllValidatorsRender} web3Config={this.state} />
-          <Route path={`${this.rootPath}/set`} render={this.onSetRender} />
-          <Route path={`${this.rootPath}/pending-changes`} render={this.onPendingChangesRender} />
           <Footer netId={this.state.netId} />
         </section>
       </Router>

src/logo.svg

@@ -1,7 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3">
-    <g fill="#61DAFB">
-        <path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/>
-        <circle cx="420.9" cy="296.5" r="45.7"/>
-        <path d="M520.5 78.1z"/>
-    </g>
-</svg>

src/stylesheets/application.scss

@@ -1,14 +1,15 @@
-@import './application/vars';
-@import './application/fonts';
-@import './application/mixins';
-@import './application/placeholders';
-@import './application/base';
-@import './application/addition';
-@import './application/create-keys';
-@import './application/footer';
-@import './application/header';
-@import './application/loading';
-@import './application/socials';
-@import './application/validators';
-@import './application/nav';
-@import './application/search';
+@import "helpers/variables";
+@import "helpers/mixins";
+@import "helpers/placeholders";
+
+@import 'application/addition';
+@import 'application/base';
+@import 'application/create-keys';
+@import 'application/footer';
+@import 'application/header';
+@import 'application/layout';
+@import 'application/loading';
+@import 'application/main-title';
+@import 'application/search';
+@import 'application/socials';
+@import 'application/validators';

src/stylesheets/application/_base.scss

@@ -0,0 +1,50 @@
+html,
+body,
+p, h1, h2, h3 {
+  margin: 0;
+  padding: 0;
+  font-weight: normal;
+}
+
+html {
+  display: flex;
+  min-height: 100%;
+}
+
+body {
+  -webkit-font-smoothing: antialiased;
+  background-color: #ffffff;
+  box-sizing: border-box;
+  color: #333;
+  font-family: 'Nunito', sans-serif;
+  font-size: 14px;
+  padding-bottom: $footer-height_desktop;
+  position: relative;
+  width: 100%;
+
+  @media screen and (max-width: $tablet-width) {
+    padding-bottom: $footer-height_mobile;
+  }
+  @media screen and (max-width: $mobile-width) {
+    padding-bottom: $footer-height_mobile;
+  }
+}
+
+.container {
+  @extend %container;
+}
+
+.key-content {
+  display: table-cell;
+  vertical-align: middle;
+  background-color: #fbfbfb;
+  text-align: center;
+}
+
+.left {
+  float: left;
+}
+
+.right {
+  float: right;
+}

src/stylesheets/application/_create-keys.scss

@@ -5,8 +5,7 @@
 }
 
 .create-keys {
-  @extend %item;
-  @extend %item-paddings;
+  padding-bottom: 20px;
 
   h1 {
     margin-bottom: 20px;
@@ -16,22 +15,10 @@
     margin-bottom: 20px;
   }
 
-  &-button {
-    @extend %btn;
-    @extend %btn-new;
-
-    &[disabled] {
-      background-color: #079dd4;
-    }
-
-    &.finalize {
-      margin-right: 10px;
-    }
-  }
-
   &-form {
     display: flex;
     justify-content: space-between;
+    margin-bottom: 10px;
 
     @media (max-width: $tablet-width) {
       flex-direction: column;
@@ -48,11 +35,12 @@
 
   label {
     &:not(.radio) {
+      color: #333;
       display: block;
-      margin-bottom: 10px;
-      text-transform: uppercase;
-      font-size: 12px;
-      font-weight: bold;
+      font-size: 16px;
+      font-weight: 500;
+      line-height: 1.5;
+      margin-bottom: 6px;
     }
   }
 
@@ -65,29 +53,24 @@
 
   input,
   textarea {
-    transition: 0.3s border-color;
-    width: 100%;
+    @include default-text-input-styles();
     margin-bottom: 20px;
-    border-radius: 3px;
-    box-sizing: border-box;
-    border: 1px solid #eee;
+    width: 100%;
+  }
 
-    &:focus {
-      border-color: #08b3f2;
+  #PlacesAutocomplete__root {
+    margin-bottom: 20px;
+    input {
+      margin-bottom: 0;
     }
   }
 
   textarea {
-    padding: 15px;
     height: 110px;
+    padding: 15px;
     resize: none;
   }
 
-  input {
-    padding: 0 10px;
-    height: $input-height;
-  }
-
   input[type="radio"] {
     display: none;
 
@@ -96,3 +79,31 @@
     }
   }
 }
+
+.create-keys-button {
+
+  @extend %btn;
+  @extend %btn-new;
+
+  &[disabled] {
+    cursor: default;
+    opacity: 0.7;
+  }
+
+  &:focus,
+  &:active {
+    box-shadow: none;
+  }
+
+  &.finalize {
+    margin-right: 10px;
+  }
+
+  .sokol & {
+    background-color: $secondary-color;
+    &:hover {
+      background-color: lighten($secondary-color, 10%);
+    }
+  }
+
+}

src/stylesheets/application/_footer.scss

@@ -0,0 +1,58 @@
+.footer {
+  @extend %full-width;
+
+  background-color: #5c34a2;
+  bottom: 0;
+  padding: 18px 0;
+  position: absolute;
+
+  &.sokol {
+    background-color: $secondary-color;
+  }
+
+  .container {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+
+    @media screen and (max-width: $tablet-width) {
+      flex-direction: column;
+    }
+  }
+
+  .socials {
+    order: 2;
+
+    @media screen and (max-width: $tablet-width) {
+      margin-top: 15px;
+      order: 1;
+    }
+  }
+
+  &-logo {
+    @include image-2x('#{ $base-images-path}/logos/logo_validators_dapp_footer@2x.png');
+    background-image: url('#{ $base-images-path}/logos/logo_validators_dapp_footer.png');
+    background-repeat: no-repeat;
+    background-size: contain;
+    display: block;
+    height: 20px;
+    left: 0;
+    order: 0;
+    width: 123px;
+  }
+
+  &-rights {
+    color: #fff;
+    font-size: 12px;
+    order: 1;
+    text-align: center;
+
+    @media screen and (max-width: $tablet-width) {
+      line-height: normal;
+      margin-top: 15px;
+      order: 2;
+      width: 100%;
+    }
+  }
+}

src/stylesheets/application/_header.scss

@@ -0,0 +1,177 @@
+.header {
+  background-color: $primary-color;
+  position: relative;
+  width: 100%;
+  z-index: 9999;
+
+  @media screen and (max-width: $mobile-width) {
+    left: 0;
+    right: 0;
+    position: fixed;
+    top: 0;
+    z-index: 124;
+  }
+
+  .container {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+
+
+    @media screen and (max-width: $tablet-width) {
+
+    }
+    @media screen and (max-width: $mobile-width) {
+      width: 93%;
+      padding: 22px 0;
+    }
+  }
+
+  &.sokol {
+    background-color: $secondary-color;
+  }
+
+  // logos
+  &-logo {
+    display: block;
+    height: 26px;
+  }
+
+  // header links
+  .links-container {
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+    height: $header-links-container-height;
+    margin-left: auto;
+
+    @media screen and (max-width: $mobile-width) {
+      display: none;
+    }
+
+    @media screen and (max-width: $tablet-width) {
+      justify-content: flex-end;
+      width: auto;
+    }
+  }
+
+  .links-container-mobile {
+    display: none;
+
+    @media screen and (max-width: $mobile-width) {
+      align-items: center;
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      justify-content: space-evenly;
+    }
+  }
+
+  .link {
+    color: #fff;
+    font-size: 14px;
+    font-weight: 700;
+    line-height: 18px;
+    margin-left: 34px;
+    opacity: 0.9;
+    text-decoration: none;
+    transition: opacity linear 0.1s;
+
+    &:hover,
+    &.active {
+      opacity: 1;
+    }
+
+    @media screen and (max-width: $mobile-width) {
+      margin-left: 0;
+    }
+  }
+
+  // header link items
+  .link-icon {
+    height: 18px;
+    width: 18px;
+    margin-right: 10px;
+    float: left;
+    background-position: 50% 50%;
+    background-repeat: no-repeat;
+
+    &-all {
+      background-image: url('#{ $base-images-path }/icons/icon-all.svg');
+    }
+    &-set-metadata {
+      background-image: url('#{ $base-images-path }/icons/icon-set-metadata.svg');
+    }
+    &-pending-changes {
+      background-image: url('#{ $base-images-path }/icons/icon-pending-changes.svg');
+    }
+  }
+
+  &.sokol {
+    .link-icon {
+      &-all {
+        background-image: url('#{ $base-images-path }/icons/icon-all-sokol.svg');
+      }
+      &-set-metadata {
+        background-image: url('#{ $base-images-path }/icons/icon-set-metadata-sokol.svg');
+      }
+      &-pending-changes {
+        background-image: url('#{ $base-images-path }/icons/icon-pending-changes-sokol.svg');
+      }
+    }
+  }
+
+  .mobile-menu {
+    display: none;
+    @media screen and (max-width: $mobile-width) {
+      display: block;
+      order: 3;
+    }
+
+    .mobile-menu-icon {
+      width: 18px;
+      height: 14px;
+    }
+
+    .mobile-menu-open-icon {
+      width: 18px;
+      height: 18px;
+    }
+  }
+
+  .header-mobile-menu-container {
+    @media screen and (max-width: $mobile-width) {
+      background-color: $primary-color-darker;
+      height: $header-mobile-menu-container-height;
+    }
+  }
+
+  &.sokol {
+    .header-mobile-menu-container {
+      @media screen and (max-width: $mobile-width) {
+        background-color: $secondary-color-darker;
+      }
+    }
+  }
+
+  .Select {
+    $select-mobile-width: 125px;
+
+    margin-left: 25px;
+    @media screen and (max-width: $mobile-width) {
+      margin-left: 0;
+      max-width: $select-mobile-width;
+      order: 2;
+      .Select-control {
+        max-width: $select-mobile-width;
+      }
+    }
+  }
+
+}
+
+.select-network-id {
+  background: #fff;
+  width: 40px;
+}

src/stylesheets/application/_layout.scss

@@ -0,0 +1,48 @@
+.app-container {
+  padding-top: 40px;
+  position: relative;
+  &.app-container-open-mobile-menu {
+    z-index: 1;
+    &:before {
+      background-color: rgba(78, 44, 137, .8);
+      bottom: 0;
+      content: '';
+      display: none;
+      left: 0;
+      position: absolute;
+      right: 0;
+      top: 0;
+      z-index: 1234;
+
+      @media screen and (max-width: $mobile-width) {
+        display: block;
+      }
+    }
+  }
+  &.app-container-open-mobile-menu.sokol {
+    &:before {
+      background-color: rgba(106, 201, 185, .8);
+    }
+  }
+}
+@media screen and (max-width: $mobile-width) {
+  #root,
+  .app-container {
+    height: 100%;
+  }
+  .app-container {
+    padding-left: 10px;
+    padding-right: 10px;
+  }
+}
+
+.content {
+  @media screen and (max-width: $mobile-width) {
+
+    padding-top: $header-height_mobile + $search-container-height;
+
+  }
+  &.content-menu-open {
+    padding-top: $header-mobile-menu-container-height + $header-height_mobile;
+  }
+}

src/stylesheets/application/_loading.scss

@@ -15,32 +15,32 @@
 .loading {
   display: flex;
   justify-content: space-between;
-  position: absolute;
   left: 50%;
-  top: 50%;
-  width: 206px;
   margin: -30px 0 0 -111.5px;
   padding-top: 50px;
+  position: absolute;
+  top: 50%;
+  width: 206px;
 
   &:before {
-    @include image-2x('../images/loading@2x.png');
-    content: '';
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 206px;
-    height: 35px;
-    background-image: url("../images/loading.png");
+    background-image: url("#{ $base-images-path }/logos/logo_loader.svg");
     background-position: 0 0;
+    background-repeat: no-repeat;
+    content: '';
+    left: 0;
+    position: absolute;
+    top: 0;
+    height: 100px;
+    width: 206px;
   }
 
   &-container {
-    position: fixed;
-    z-index: 1000000;
+    bottom: 0;
     left: 0;
+    position: fixed;
     right: 0;
     top: 0;
-    bottom: 0;
+    z-index: 1000000;
   }
 
   &-i {
@@ -49,11 +49,11 @@
     animation-iteration-count: infinite;
     animation-name: fadeOut;
     animation-timing-function: linear;
+    background-color: #fff;
+    border-radius: 50%;
+    height: 9px;
     opacity:.2;
     width: 9px;
-    height: 9px;
-    border-radius: 50%;
-    background-color: #fff;
 
     &:nth-child(2) {
       animation-delay: .1s;

src/stylesheets/application/_main-title.scss

@@ -0,0 +1,26 @@
+.main-title-container {
+  -ms-flex-pack: justify;
+  display: -ms-flexbox;
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 38px;
+
+  .main-title {
+    font-size: 24px;
+    color: #333;
+    line-height: 38px;
+  }
+
+  @media screen and (max-width: $mobile-width) {
+    -ms-flex-direction: column;
+    flex-direction: column;
+
+    &.no-search-on-top {
+      margin-top: -#{ $search-container-height };
+    }
+
+    .search-input {
+      width: 100%;
+    }
+  }
+}

src/stylesheets/application/_mixins.scss

@@ -1,10 +0,0 @@
-@mixin image-2x($image, $width: 100%, $height: 100%) {
-  @media (min--moz-device-pixel-ratio: 1.3),
-         (-o-min-device-pixel-ratio: 2.6/2),
-         (-webkit-min-device-pixel-ratio: 1.3),
-         (min-device-pixel-ratio: 1.3),
-         (min-resolution: 1.3dppx) {
-    background-image: url($image);
-    background-size: $width $height;
-  }
-}

src/stylesheets/application/_placeholders.scss

@@ -1,58 +0,0 @@
-%full-width {
-  left: 0;
-  right: 0;
-}
-
-%stretch-width {
-  left: 0;
-  right: 0;
-}
-
-%btn {
-  cursor: pointer;
-  transition: 0.3s background-color;
-  border-radius: 3px;
-  border: 0;
-  padding: 0 15px 0 32px;
-  background-color: #08b3f2;
-  background-repeat: no-repeat;
-  background-position: left 15px center;
-  color: #fff;
-  line-height: 36px;
-  font-size: 13px;
-  text-decoration: none;
-  text-transform: uppercase;
-  font-weight: bold;
-
-  &:hover {
-    background-color: #20bdf7;
-  }
-
-  &-new {
-    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAAFVBMVEX///////////////////////////9nSIHRAAAABnRSTlMASUrk5udXTd49AAAAOUlEQVR42tXQsQEAIAgDQcAn+4+snRZxAK79KokrIcNBwgYdc0Migwxk8Qsd1TJWDf/KQWobqt+9G4coA99W7as5AAAAAElFTkSuQmCC);
-    background-size: 12px 12px;
-  }
-}
-
-%item {
-  margin-bottom: 30px;
-  border-radius: 5px;
-  border: 1px solid #eee;
-  background-color: #fff;
-
-  @media (max-width: $tablet-width) {
-    margin-bottom: 20px;
-  }
-}
-
-%item-paddings {
-  padding: 25px 20px;
-
-  @media (max-width: $tablet-width) {
-    padding: 20px;
-  }
-
-  @media (max-width: $mobile-width) {
-    padding: 15px;
-  }
-}

src/stylesheets/application/_search.scss

@@ -0,0 +1,43 @@
+.search-container {
+  background-color: #502d8d;
+  box-sizing: border-box;
+  height: $search-container-height;
+  padding: 10px 0 0 0;
+  &.sokol {
+    background-color: $secondary-color-darker;
+  }
+
+  @media screen and (max-width: $mobile-width) {
+    left: 0;
+    position: fixed;
+    right: 0;
+    top: 70px;
+    z-index: 123;
+  }
+
+}
+
+.search-input {
+  background-color: transparent;
+  background-image: url('#{ $base-images-path }/icons/icon-search.svg');
+  background-position: 0 50%;
+  background-repeat: no-repeat;
+  background-size: 16px 16px;
+  border-radius: 0;
+  border: none;
+  box-sizing: border-box;
+  color: #fff;
+  display: block;
+  font-size: 14px;
+  font-weight: 400;
+  height: 30px;
+  outline: none;
+  padding-left: 30px;
+  width: 100%;
+
+  .sokol & {
+    background-image: url('#{ $base-images-path }/icons/icon-search-sokol.svg');
+  }
+
+  @include placeholder-full($color: rgba(255, 255, 255, 0.5));
+}

src/stylesheets/application/_socials.scss

@@ -0,0 +1,105 @@
+.socials {
+  font-size: 0;
+
+  &-item {
+    &:not(:first-child) {
+      margin-left: 10px;
+    }
+  }
+
+  &-i {
+    background-color: #ffffff;
+    border-radius: 3px;
+    display: inline-block;
+    height: 30px;
+    position: relative;
+    transition: 0.3s background-color;
+    vertical-align: top;
+    width: 30px;
+
+    &:not(:first-child) {
+      margin-left: 10px;
+    }
+
+    &:hover {
+      background-color: fade-out(#fff, 0.6);
+    }
+
+    &:before {
+      background-position: 50% 50%;
+      background-repeat: no-repeat;
+      background-size: contain;
+      content: '';
+      height: 16px;
+      left: 50%;
+      position: absolute;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      width: 16px;
+    }
+
+    &_github {
+      &:before {
+        @include image-2x('#{ $base-images-path }/socials/git@2x.png');
+        background-image: url('#{ $base-images-path }/socials/git.png');
+      }
+    }
+
+    &_telegram {
+      &:before {
+        @include image-2x('#{ $base-images-path }/socials/telegram@2x.png');
+        background-image: url('#{ $base-images-path }/socials/telegram.png');
+      }
+    }
+
+    &_twitter {
+      &:before {
+        @include image-2x('#{ $base-images-path }/socials/tw@2x.png');
+        background-image: url('#{ $base-images-path }/socials/tw.png');
+      }
+    }
+
+    &_poa {
+      &:before {
+        @include image-2x('#{ $base-images-path }/socials/poa@2x.png');
+        background-image: url('#{ $base-images-path }/socials/poa.png');
+        height: 20px;
+        width: 20px;
+      }
+    }
+
+  }
+}
+
+.sokol {
+  .socials {
+
+    .socials-i_github {
+      &:before {
+        @include image-2x('#{ $base-images-path }/socials/git-sokol@2x.png');
+        background-image: url('#{ $base-images-path }/socials/git-sokol.png');
+      }
+    }
+
+    .socials-i_telegram {
+      &:before {
+        @include image-2x('#{ $base-images-path }/socials/telegram-sokol@2x.png');
+        background-image: url('#{ $base-images-path }/socials/telegram-sokol.png');
+      }
+    }
+
+    .socials-i_twitter {
+      &:before {
+        @include image-2x('#{ $base-images-path }/socials/tw-sokol@2x.png');
+        background-image: url('#{ $base-images-path }/socials/tw-sokol.png');
+      }
+    }
+
+    .socials-i_poa {
+      &:before {
+        @include image-2x('#{ $base-images-path }/socials/poa-sokol@2x.png');
+        background-image: url('#{ $base-images-path }/socials/poa-sokol.png');
+      }
+    }
+  }
+}

src/stylesheets/application/_validators.scss

@@ -0,0 +1,133 @@
+.validators {
+  text-align: left;
+
+  &-i {
+
+    border-radius: 5px;
+    border: 1px solid $base-border-color;
+    margin-bottom: 30px;
+    padding: 20px 30px;
+
+    @media (max-width: $mobile-width) {
+      margin-bottom: 20px;
+    }
+
+  }
+
+  &-header {
+
+    border-bottom: 1px solid $base-border-color;
+    color: #333333;
+    display: flex;
+    font-size: 18px;
+    font-stretch: normal;
+    font-style: normal;
+    font-weight: 700;
+    justify-content: space-between;
+    letter-spacing: normal;
+    line-height: 1.2;
+    margin: 0 0 20px;
+    padding: 0 0 15px;
+    text-align: left;
+
+    @media (max-width: $mobile-width) {
+      display: block;
+    }
+
+    &--address {
+      word-break: break-all;
+      margin-bottom: 10px;
+    }
+
+    &--hint {
+      color: #777;
+      font-size: 13px;
+      font-weight: 400;
+      line-height: 1.2;
+    }
+
+    &--confirmations {
+      font-size: 15px;
+      font-weight: 500;
+      line-height: 1.2;
+      @media (max-width: $mobile-width) {
+        padding-top: 15px;
+      }
+    }
+
+  }
+
+  &-body {
+    overflow: hidden;
+  }
+  &-footer {
+    display: flex;
+    justify-content: center;
+    padding-top: 20px;
+  }
+
+  &-notary,
+  &-license {
+    width: 48%;
+    font-size: 12px;
+
+    @media (max-width: $mobile-width) {
+      float: none;
+      width: 100%;
+    }
+  }
+
+  &-title {
+    background-position: 0 50%;
+    background-repeat: no-repeat;
+    background-size: contain;
+    color: #333;
+    font-size: 16px;
+    font-weight: 700;
+    height: 24px;
+    line-height: 24px;
+    margin: 0 0 20px 0;
+    padding: 0 0 0 35px;
+    text-align: left;
+
+    @media (max-width: $mobile-width) {
+      margin: 15px 0;
+    }
+
+    &--notary {
+      background-image: url('#{ $base-images-path }/icons/icon-notary.svg');
+    }
+    &--notary-license {
+      background-image: url('#{ $base-images-path }/icons/icon-notary-license.svg');
+    }
+  }
+
+  &-table {
+
+    &-i {
+      color: #333;
+      display: flex;
+      font-size: 14px;
+      font-weight: 500;
+      justify-content: space-between;
+      line-height: 1.2;
+      padding: 20px;
+
+      &:nth-child(odd) {
+        background-color: #f7f7f7;
+      }
+
+    }
+  }
+}
+
+.validators-count {
+  color: #333;
+  font-size: 14px;
+  line-height: 38px;
+  margin-bottom: 0;
+
+  &-val {
+    font-weight: 700;
+  }
+}

src/stylesheets/application/_vars.scss

@@ -1,10 +0,0 @@
-$container-width: 960px;
-$tablet-width: 768px;
-$mobile-width: 414px;
-$footer-height: 60px;
-
-$desktop-indent: 30px;
-$tablet-indent: 20px;
-$mobile-indent: 15px;
-
-$input-height: 40px;

src/stylesheets/application/base.scss

@@ -1,53 +0,0 @@
-html,
-body {
-  margin: 0;
-  padding: 0;
-  background-color: #fbfbfb;
-}
-
-html {
-  height: 100%;
-}
-
-body {
-  position: relative;
-  display: table;
-  width: 100%;
-  height: 100%;
-  box-sizing: border-box;
-  padding-bottom: $footer-height;
-
-  @media screen and (max-width: $tablet-width) {
-    padding-bottom: $footer-height + 30;
-  }
-}
-
-p, h1, h2, h3, h4 {
-  margin: 0;
-  padding: 0;
-  font-family: 'Open Sans', sans-serif;
-}
-
-.container {
-  max-width: 960px;
-  margin: 0 auto;
-
-  @media (max-width: $container-width) {
-    padding: 0 10px;
-  }
-}
-
-.key-content {
-  display: table-cell;
-  vertical-align: middle;
-  background-color: #fbfbfb;
-  text-align: center;
-}
-
-.left {
-  float: left;
-}
-
-.right {
-  float: right;
-}

src/stylesheets/application/fonts.scss

@@ -1,24 +0,0 @@
-@font-face {
-  font-family: 'Open Sans';
-  font-style: normal;
-  font-weight: 400;
-  src: local('Open Sans'), local('OpenSans'), url(https://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3ZBw1xU1rKptJj_0jans920.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
-}
-
-@font-face {
-  font-family: 'Open Sans';
-  font-style: normal;
-  font-weight: 700;
-  src: local('Open Sans Bold'), local('OpenSans-Bold'), url(https://fonts.gstatic.com/s/opensans/v13/k3k702ZOKiLJc3WVjuplzBampu5_7CjHW5spxoeN3Vs.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
-}
-
-html,
-body {
-  color: #333;
-  line-height: 1;
-  font-size: 14px;
-  font-family: 'Open Sans', sans-serif;
-  -webkit-font-smoothing: antialiased;
-}

src/stylesheets/application/footer.scss

@@ -1,59 +0,0 @@
-.footer {
-  @extend %full-width;
-  position: absolute;
-  bottom: 0;
-  height: $footer-height;
-  background-color: #6d2eae;
-
-  @media screen and (max-width: $tablet-width) {
-    height: auto;
-    padding: 20px 10px 0;
-  }
-
-  &.sokol {
-    background-color: #6ac9b9;
-  }
-
-  .container {
-    position: relative;
-
-    @media screen and (max-width: $tablet-width) {
-      padding-top: $footer-height - 20;
-    }
-  }
-
-  &-logo,
-  .socials {
-    transform: translateY(-50%);
-    position: absolute;
-    z-index: 1;
-    top: 50%;
-
-    @media screen and (max-width: $tablet-width) {
-      transform: translateY(0);
-      top: 0;
-    }
-  }
-
-  &-logo {
-    @include image-2x('../images/logo_validators_dapp_footer@2x.png', 123px, 24px);
-    z-index: 2;
-    display: inline-block;
-    vertical-align: middle;
-    width: 123px;
-    height: 24px;
-    background-image: url('../images/logo_validators_dapp_footer.png');
-    background-position: 0 0;
-  }
-
-  &-rights {
-    color: #fff;
-    line-height: $footer-height;
-    text-align: center;
-    font-size: 12px;
-
-    @media screen and (max-width: $tablet-width) {
-      line-height: 30px;
-    }
-  }
-}

src/stylesheets/application/header.scss

@@ -1,39 +0,0 @@
-.header {
-  .container {		
-    display: flex;		
-    justify-content: space-between;		
-  }		
-  padding: 18px 0;
-  background-image: url('../images/bg_header.png');
-  background-repeat: no-repeat;
-  background-size: cover;
-
-  &.sokol {
-    background-image: none;
-    background-color: #6ac9b9;
-  }
-
-  &-logo {
-    @include image-2x('../images/logo_validators_dapp@2x.png', 182px, 35px);
-    display: block;
-    width: 182px;
-    height: 35px;
-    background-image: url('../images/logo_validators_dapp.png');
-    background-position: 0 0;
-  }
-
-  &-logo-sokol {
-    @include image-2x('../images/logo_sokol@2x.png', 146px, 35px);
-    display: block;
-    width: 146px;
-    height: 35px;
-    background-image: url('../images/logo_sokol.png');
-    background-position: 0 0;
-    background-repeat: no-repeat;
-  }
-}
-
-.select-network-id {
-  width: 40px;
-  background: #fff;
-}

src/stylesheets/application/nav.scss

@@ -1,75 +0,0 @@
-.nav {
-  &-container {
-    margin-bottom: 30px;
-    border-bottom: 1px solid #eee;
-    background-color: #fff;
-    line-height: 80px;
-    text-align: left;
-
-    @media (max-width: $tablet-width) {
-      padding: 20px 0;
-      line-height: normal;
-    }
-
-    .container {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-
-      @media (max-width: $tablet-width) {
-        flex-direction: column-reverse;
-      }
-    }
-  }
-
-  &-i {
-    position: relative;
-    display: inline-block;
-    vertical-align: middle;
-    transition: 0.3s color;
-    color: #8197a2;
-    text-transform: uppercase;
-    text-decoration: none;
-    line-height: normal;
-    font-size: 14px;
-    font-weight: bold;
-
-    &:not(:last-child) {
-      margin-right: 40px;
-
-      @media (max-width: $tablet-width) {
-        margin-right: 30px;
-      }
-
-      @media (max-width: $mobile-width) {
-        margin-right: 20px;
-        font-size: 13px;
-      }
-    }
-
-    &:hover,
-    &_active {
-      color: #444;
-    }
-
-    &_active {
-      &:before {
-        content: '';
-        position: absolute;
-        left: 0;
-        right: 0;
-        bottom: -30px;
-        height: 3px;
-        background-color: #08b3f2;
-
-        @media (max-width: $tablet-width) {
-          bottom: -20px;
-        }
-      }
-    }
-  }
-}
-
-.Select.is-focused:not(.is-open) > .Select-control {
-  border: none;
-}

src/stylesheets/application/search.scss

@@ -1,41 +0,0 @@
-@mixin search-active {
-  cursor: text;
-  border-color: #eee;
-  padding: 0 40px 0 10px;
-}
-
-.search {
-  &-input {
-    cursor: pointer;
-    display: inline-block;
-    transition: 0.3s width,
-                0.3s border-color;
-    width: 80px;
-    height: 40px;
-    outline: none;
-    border-radius: 5px;
-    border: 1px solid transparent;
-    box-sizing: border-box;
-    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAMAAAC7IEhfAAAA6lBMVEWAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6PrSx+9AAAATXRSTlMAAgMGCAkKDA0UFRYXISIjJDM0NTo7PD0/QEFERUlQWVpoaWp0dXaZm5ydnqSlpra4ub/AwcTFxsjKzM3Oz9bX2N3e6ers7fX5+vz9/pKojzsAAAGRSURBVHgBjZRtX4IwFMUXmKaBYmhWauSzEmkl+ZAaaJGo8P2/TnejEGHrt/PqcM9f2cbdRVHJDWPhuK6zMBoyYkrQJp4fyptoAp2rWn5MVpWCpXo+Rb1UnMvNg/eZ3bIkilK5YwarmOdinI2rB105lhT9gGv2CZme4dpGPf21usHVWTpS6uPKaxbFlDVxvR/ZL35+EVFC4jNOwr2ffeC1XCCKMnjt1t95avCwVxFV6h5C7ffhDbyOGBpAOAmsDCfmKSxQwWme2Cb8ZoyYGkPcJM4A12WDXYgN4lbgrtlgBeIlcQ44iQ1KEH8T54IT2aAIscsP8r+abzMr4p7AdXiOh/vA8/9/wgP5hGFTDDiaImizKzpXjLaZYOHuzFAbl0TCyVUY0a7CCCe1Y+GRkIn/zBBOT1xXqxhbXzBj6rQBUDiWCjAAiLY3UfLy3Seo2S7hkVJqmxijkef0IVXfJkhUs+OYDfu9o5CCNvUi2PSBnN9tkgTJreHS2e2c5bBFRjOVpCskK7zkGnGSn4hHlfXX/Q90qIZ+dL9jIAAAAABJRU5ErkJggg==);
-    background-size: 20px 20px;
-    background-repeat: no-repeat;
-    background-position: right 10px center;
-    color: #333;
-    font-size: 14px;
-
-    @media (max-width: $tablet-width) {
-      @include search-active;
-      width: 100% !important;
-      margin-bottom: 20px;
-    }
-
-    &:focus {
-      @include search-active;
-      width: 300px;
-
-      @media (max-width: $tablet-width) {
-        border-color: #08b3f2;
-      }
-    }
-  }
-}

src/stylesheets/application/socials.scss

@@ -1,76 +0,0 @@
-.socials {
-  font-size: 0;
-
-  .footer & {
-    right: 0;
-  }
-
-  &-i {
-    transition: 0.3s background-color;
-    position: relative;
-    display: inline-block;
-    vertical-align: top;
-    width: 30px;
-    height: 30px;
-    border-radius: 50%;
-    background-color: fade-out(#fff, 0.8);
-
-    &:not(:first-child) {
-      margin-left: 10px;
-    }
-
-    &:hover {
-      background-color: fade-out(#fff, 0.6);
-    }
-
-    &:before {
-      @include image-2x('../images/socials@2x.png', 16px, 69px);
-      transform: translate(-50%, -50%);
-      content: '';
-      position: absolute;
-      left: 50%;
-      top: 50%;
-      background-image: url(../images/socials.png);
-    }
-
-    &_github {
-      &:before {
-        width: 16px;
-        height: 16px;
-        background-position: 0 0;
-      }
-    }
-
-    &_oracles {
-      &:before {
-        width: 16px;
-        height: 14px;
-        background-position: 0 -16px;
-      }
-    }
-
-    &_reddit {
-      &:before {
-        width: 15px;
-        height: 13px;
-        background-position: 0 -30px;
-      }
-    }
-
-    &_telegram {
-      &:before {
-        width: 16px;
-        height: 14px;
-        background-position: 0 -43px;
-      }
-    }
-
-    &_twitter {
-      &:before {
-        width: 15px;
-        height: 12px;
-        background-position: 0 -57px;
-      }
-    }
-  }
-}