Merge remote-tracking branch 'upstream/core' into core

2018-07-25 14:04:18 +03:00 · 2018-07-25 14:04:18 +03:00 · 83f35cd730
parent bd619ba387 84b3a6f29b
commit 83f35cd730
117 changed files with 1391 additions and 943 deletions
--- a/.editorconfig
+++ b/.editorconfig
@ -0,0 +1,8 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
+indent_style = space
+indent_size = 2
--- a/public/favicons/android-chrome-192x192.png
+++ b/public/favicons/android-chrome-192x192.png
--- a/public/favicons/android-chrome-256x256.png
+++ b/public/favicons/android-chrome-256x256.png
--- a/public/favicons/apple-touch-icon.png
+++ b/public/favicons/apple-touch-icon.png
--- a/public/favicons/browserconfig.xml
+++ b/public/favicons/browserconfig.xml
@ -3,7 +3,7 @@
    <msapplication>
        <tile>
            <square150x150logo src="/mstile-150x150.png"/>
-            <TileColor>#da532c</TileColor>
+            <TileColor>#5c3698</TileColor>
        </tile>
    </msapplication>
 </browserconfig>
--- a/public/favicons/fav_2.png
+++ b/public/favicons/fav_2.png
--- a/public/favicons/favicon-16x16.png
+++ b/public/favicons/favicon-16x16.png
--- a/public/favicons/favicon-32x32.png
+++ b/public/favicons/favicon-32x32.png
--- a/public/favicons/favicon.ico
+++ b/public/favicons/favicon.ico
--- a/public/favicons/mstile-150x150.png
+++ b/public/favicons/mstile-150x150.png
--- a/public/index.html
+++ b/public/index.html
@ -4,21 +4,9 @@
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
-    <!--
-      manifest.json provides metadata used when your web app is added to the
-      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicons/favicon.ico">
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
+    <link href="https://fonts.googleapis.com/css?family=Nunito:300,400,700" rel="stylesheet">
    <title>POA Network Governance DApp</title>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD97qDOBYZ2fH86Wq1vzhDOiSUsZGVqbVQ&libraries=places"></script>
  </head>
@ -27,15 +15,5 @@
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
  </body>
 </html>
--- a/public/manifest.json
+++ b/public/manifest.json
@ -1,6 +1,6 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "short_name": "Governance",
+  "name": "Governance DApp",
  "icons": [
    {
      "src": "favicon.ico",
--- a/src/App.js
+++ b/src/App.js
@ -1,14 +1,56 @@
-import React, { Component } from 'react'
-import { Route, NavLink } from 'react-router-dom'
-import { Header, Ballots, NewBallot, Settings, Footer } from './components'
-import './assets/App.css'
 //import DevTools from 'mobx-react-devtools'
+import './assets/App.css'
 import Loading from './Loading'
+import React, { Component } from 'react'
+import { Header, Ballots, NewBallot, Settings, Footer } from './components'
+import { Route } from 'react-router-dom'
 import { inject, observer } from 'mobx-react'

@inject('commonStore', 'contractsStore')
@observer
 class App extends Component {
+  constructor(props) {
+    super(props)
+
+    const { commonStore } = this.props
+
+    this.state = {
+      showMobileMenu: false,
+      navigationData: [
+        {
+          icon: '',
+          title: 'All',
+          url: commonStore.rootPath,
+          class: ''
+        },
+        {
+          icon: '',
+          title: 'Active',
+          url: `${commonStore.rootPath}/active`,
+          class: ''
+        },
+        {
+          icon: '',
+          title: 'To Finalize',
+          url: `${commonStore.rootPath}/tofinalize`,
+          class: ''
+        },
+        {
+          icon: '',
+          title: 'New Ballot',
+          url: `${commonStore.rootPath}/new`,
+          class: 'btn btn-new-ballot btn-success btn-new'
+        }
+        // {
+        //   'icon': '',
+        //   'title': 'Settings',
+        //   'url': `${ commonStore.rootPath }/settings`,
+        //    class: ''
+        // }
+      ]
+    }
+  }
+
  onBallotsRender = () => {
    return <Ballots isActiveFilter={false} />
  }
@ -34,52 +76,79 @@ class App extends Component {
    commonStore.setSearchTerm(e.target.value.toLowerCase())
  }

-  shouldShowNavPan = () => {
+  shouldShowSearch = () => {
    const { commonStore } = this.props
    const currentPath = this.props.location.pathname
-    let showNavPan =
+
+    let showSearch =
      currentPath === `${commonStore.rootPath}` ||
      currentPath === '/' ||
      currentPath === `${commonStore.rootPath}/` ||
      currentPath === `${commonStore.rootPath}/active` ||
      currentPath === `${commonStore.rootPath}/tofinalize`
-    return showNavPan
+
+    return showSearch
+  }
+
+  toggleMobileMenu = () => {
+    this.setState(prevState => ({ showMobileMenu: !prevState.showMobileMenu }))
+  }
+
+  getTitle = () => {
+    const currentPath = this.props.location.pathname
+
+    if (currentPath === `${this.state.navigationData[1].url}`) {
+      return this.state.navigationData[1].title
+    } else if (currentPath === `${this.state.navigationData[2].url}`) {
+      return this.state.navigationData[2].title
+    } else if (currentPath === `${this.state.navigationData[3].url}`) {
+      return this.state.navigationData[3].title
+    } else {
+      return this.state.navigationData[0].title
+    }
  }

  render() {
    const { commonStore, contractsStore } = this.props
    const loading = commonStore.loading ? <Loading netId={contractsStore.netId} /> : ''
-    const nav = this.shouldShowNavPan() ? (
-      <div className="search">
-        <div className="container flex-container">
-          <div className="nav">
-            <NavLink className="nav-i" exact activeClassName="nav-i_active" to={`${commonStore.rootPath}/`}>
-              All
-            </NavLink>
-            <NavLink className="nav-i" activeClassName="nav-i_active" to={`${commonStore.rootPath}/active`}>
-              Active
-            </NavLink>
-            <NavLink className="nav-i" activeClassName="nav-i_active" to={`${commonStore.rootPath}/tofinalize`}>
-              To finalize
-            </NavLink>
-          </div>
-          <input type="search" className="search-input" onChange={this.onSearch} />
-        </div>
-      </div>
-    ) : null
+    console.log(contractsStore.netId)
+
+    const search = this.shouldShowSearch() ? (
+      <input type="search" className="search-input" onChange={this.onSearch} />
+    ) : (
+      ''
+    )
+
    return (
-      <div>
+      <section className={`content ${this.state.showMobileMenu ? 'content-menu-open' : ''}`}>
        {loading}
-        <Header netId={contractsStore.netId} />
-        {nav}
-        <Route exact path={`/`} render={this.onBallotsRender} />
-        <Route exact path={`${commonStore.rootPath}/`} render={this.onBallotsRender} />
-        <Route exact path={`${commonStore.rootPath}/active`} render={this.onActiveBallotsRender} />
-        <Route exact path={`${commonStore.rootPath}/tofinalize`} render={this.onToFinalizeBallotsRender} />
-        <Route path={`${commonStore.rootPath}/new`} render={this.onNewBallotRender} />
-        {/*<Route path={`${commonStore.rootPath}/settings`} render={this.onSettingsRender}/>*/}
+        <Header
+          baseRootPath={commonStore.rootPath}
+          navigationData={this.state.navigationData}
+          netId={contractsStore.netId}
+          onMenuToggle={this.toggleMobileMenu}
+          showMobileMenu={this.state.showMobileMenu}
+        />
+        <div
+          className={`app-container ${this.state.showMobileMenu ? 'app-container-open-mobile-menu' : ''} ${
+            this.state.netId === '77' ? 'sokol' : ''
+          }`}
+        >
+          <div className="container">
+            <div className="main-title-container">
+              <span className="main-title">{this.getTitle()}</span>
+              {search}
+            </div>
+          </div>
+          <Route exact path={`/`} render={this.onBallotsRender} />
+          <Route exact path={`${commonStore.rootPath}/`} render={this.onBallotsRender} />
+          <Route exact path={`${commonStore.rootPath}/active`} render={this.onActiveBallotsRender} />
+          <Route exact path={`${commonStore.rootPath}/tofinalize`} render={this.onToFinalizeBallotsRender} />
+          <Route path={`${commonStore.rootPath}/new`} render={this.onNewBallotRender} />
+          {/*<Route path={`${commonStore.rootPath}/settings`} render={this.onSettingsRender}/>*/}
+        </div>
        <Footer netId={contractsStore.netId} />
-      </div>
+      </section>
    )
  }
 }
--- a/src/Loading.js
+++ b/src/Loading.js
@ -1,18 +1,19 @@
 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
    case '99':
-      return core
    default:
-      return {}
+      return core
  }
 }
 const Loading = ({ netId }) => (
--- a/src/assets/App.css
+++ b/src/assets/App.css
--- a/src/assets/App.scss
+++ b/src/assets/App.scss
@ -1,27 +1,32 @@
-@import 'stylesheets/vars';
-@import 'stylesheets/mixins';
-@import 'stylesheets/placeholders';
-@import 'stylesheets/fonts';
-@import 'stylesheets/base';
-@import 'stylesheets/controls';
-@import 'stylesheets/footer';
-@import 'stylesheets/header';
-@import 'stylesheets/info';
-@import 'stylesheets/loading';
-@import 'stylesheets/nav';
-@import 'stylesheets/new';
-@import 'stylesheets/search';
-@import 'stylesheets/settings';
-@import 'stylesheets/socials';
-@import 'stylesheets/vote-scale';
-@import 'stylesheets/ballot-types';
-@import 'stylesheets/ballots/placeholders';
-@import 'stylesheets/ballots/base';
-@import 'stylesheets/ballots/about';
-@import 'stylesheets/ballots/footer';
-@import 'stylesheets/select/select';
-@import 'stylesheets/select/control';
-@import 'stylesheets/select/menu';
-@import 'stylesheets/select/mixins';
-@import 'stylesheets/select/multi';
-@import 'stylesheets/select/spinner';
+@import 'stylesheets/helpers/vars';
+@import 'stylesheets/helpers/mixins';
+@import 'stylesheets/helpers/placeholders';
+
+@import 'stylesheets/application/base';
+@import 'stylesheets/application/buttons';
+@import 'stylesheets/application/controls';
+@import 'stylesheets/application/footer';
+@import 'stylesheets/application/header';
+@import 'stylesheets/application/info';
+@import 'stylesheets/application/layout';
+@import 'stylesheets/application/loading';
+@import 'stylesheets/application/main-title';
+@import 'stylesheets/application/nav';
+@import 'stylesheets/application/new';
+@import 'stylesheets/application/search';
+@import 'stylesheets/application/settings';
+@import 'stylesheets/application/socials';
+@import 'stylesheets/application/vote-scale';
+
+@import 'stylesheets/application/select/select';
+@import 'stylesheets/application/select/control';
+@import 'stylesheets/application/select/menu';
+@import 'stylesheets/application/select/mixins';
+@import 'stylesheets/application/select/multi';
+@import 'stylesheets/application/select/spinner';
+
+@import 'stylesheets/application/ballot-types';
+@import 'stylesheets/application/ballots/placeholders';
+@import 'stylesheets/application/ballots/base';
+@import 'stylesheets/application/ballots/about';
+@import 'stylesheets/application/ballots/footer';
--- a/src/assets/images/btn-new-success.png
+++ b/src/assets/images/btn-new-success.png
--- a/src/assets/images/icons/icon-close-sokol.svg
+++ b/src/assets/images/icons/icon-close-sokol.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18"><path fill="#fff" 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>
--- a/src/assets/images/icons/icon-close.svg
+++ b/src/assets/images/icons/icon-close.svg
@ -0,0 +1 @@
+<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>
--- a/src/assets/images/icons/icon-events-sokol.svg
+++ b/src/assets/images/icons/icon-events-sokol.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="17"><path fill="#fff" fill-rule="evenodd" d="M17 13.031h-5.528l1.203 1.208a1.04 1.04 0 0 1 0 1.466 1.03 1.03 0 0 1-1.461 0l-2.92-2.932a1.022 1.022 0 0 1-.272-.891 1 1 0 0 1 .274-.635l2.939-2.95a1.036 1.036 0 0 1 1.469 0 1.045 1.045 0 0 1 0 1.475L11.481 11H17a1 1 0 0 1 1 1v.031a1 1 0 0 1-1 1zM9.676 4.755l-2.912 2.92a1.027 1.027 0 0 1-1.455 0 1.034 1.034 0 0 1 0-1.46L6.519 5H1a1 1 0 0 1 0-2h5.51L5.28 1.765a1.04 1.04 0 0 1 0-1.469 1.032 1.032 0 0 1 1.464 0l2.93 2.939c.2.201.29.464.291.727.002.036.005.069.004.104-.002.019-.008.036-.01.054a1.02 1.02 0 0 1-.283.635z"/></svg>
--- a/src/assets/images/icons/icon-events.svg
+++ b/src/assets/images/icons/icon-events.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="17"><path fill="#60DB97" fill-rule="evenodd" d="M17 13.031h-5.528l1.203 1.208a1.04 1.04 0 0 1 0 1.466 1.03 1.03 0 0 1-1.461 0l-2.92-2.932a1.022 1.022 0 0 1-.272-.891 1 1 0 0 1 .274-.635l2.939-2.95a1.036 1.036 0 0 1 1.469 0 1.045 1.045 0 0 1 0 1.475L11.481 11H17a1 1 0 0 1 1 1v.031a1 1 0 0 1-1 1zM9.676 4.755l-2.912 2.92a1.027 1.027 0 0 1-1.455 0 1.034 1.034 0 0 1 0-1.46L6.519 5H1a1 1 0 0 1 0-2h5.51L5.28 1.765a1.04 1.04 0 0 1 0-1.469 1.032 1.032 0 0 1 1.464 0l2.93 2.939c.2.201.29.464.291.727.002.036.005.069.004.104-.002.019-.008.036-.01.054a1.02 1.02 0 0 1-.283.635z"/></svg>
--- a/src/assets/images/icons/icon-menu-sokol.svg
+++ b/src/assets/images/icons/icon-menu-sokol.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="14"><path fill="#fff" 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>
--- a/src/assets/images/icons/icon-menu.svg
+++ b/src/assets/images/icons/icon-menu.svg
@ -0,0 +1 @@
+<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>
--- a/src/assets/images/icons/icon-statistics-sokol.svg
+++ b/src/assets/images/icons/icon-statistics-sokol.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18"><path fill="#fff" fill-rule="evenodd" d="M17 14a1 1 0 0 1-1-1V1a1 1 0 0 1 2 0v12a1 1 0 0 1-1 1zm-4 0a1 1 0 0 1-1-1V5a1 1 0 0 1 2 0v8a1 1 0 0 1-1 1zm-4 0a1 1 0 0 1-1-1V1a1 1 0 0 1 2 0v12a1 1 0 0 1-1 1zm-4 0a1 1 0 0 1-1-1V5a1 1 0 0 1 2 0v8a1 1 0 0 1-1 1zm-4 0a1 1 0 0 1-1-1V7a1 1 0 0 1 2 0v6a1 1 0 0 1-1 1zm0 2h16a1 1 0 0 1 0 2H1a1 1 0 0 1 0-2z"/></svg>
--- a/src/assets/images/icons/icon-statistics.svg
+++ b/src/assets/images/icons/icon-statistics.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18"><path fill="#60DB97" fill-rule="evenodd" d="M17 14a1 1 0 0 1-1-1V1a1 1 0 0 1 2 0v12a1 1 0 0 1-1 1zm-4 0a1 1 0 0 1-1-1V5a1 1 0 0 1 2 0v8a1 1 0 0 1-1 1zm-4 0a1 1 0 0 1-1-1V1a1 1 0 0 1 2 0v12a1 1 0 0 1-1 1zm-4 0a1 1 0 0 1-1-1V5a1 1 0 0 1 2 0v8a1 1 0 0 1-1 1zm-4 0a1 1 0 0 1-1-1V7a1 1 0 0 1 2 0v6a1 1 0 0 1-1 1zm0 2h16a1 1 0 0 1 0 2H1a1 1 0 0 1 0-2z"/></svg>
--- a/src/assets/images/icons/icon-status-sokol.svg
+++ b/src/assets/images/icons/icon-status-sokol.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18"><path fill="#fff" fill-rule="evenodd" d="M17 10h-1.101a6.918 6.918 0 0 1-1.31 3.175l.775.775a1 1 0 0 1-1.414 1.414l-.775-.775A6.918 6.918 0 0 1 10 15.899V17a1 1 0 0 1-2 0v-1.101a6.918 6.918 0 0 1-3.175-1.31l-.775.775a1 1 0 0 1-1.414-1.414l.775-.775A6.918 6.918 0 0 1 2.101 10H1a1 1 0 0 1 0-2h1.101a6.918 6.918 0 0 1 1.31-3.175l-.775-.775A.999.999 0 1 1 4.05 2.636l.775.775A6.918 6.918 0 0 1 8 2.101V1a1 1 0 0 1 2 0v1.101a6.918 6.918 0 0 1 3.175 1.31l.775-.775a1 1 0 0 1 1.414 1.414l-.775.775A6.918 6.918 0 0 1 15.899 8H17a1 1 0 0 1 0 2zM9 4a5 5 0 1 0 .001 10.001A5 5 0 0 0 9 4zm0 8a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0-4a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"/></svg>
--- a/src/assets/images/icons/icon-status.svg
+++ b/src/assets/images/icons/icon-status.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18"><path fill="#60DB97" fill-rule="evenodd" d="M17 10h-1.101a6.918 6.918 0 0 1-1.31 3.175l.775.775a1 1 0 0 1-1.414 1.414l-.775-.775A6.918 6.918 0 0 1 10 15.899V17a1 1 0 0 1-2 0v-1.101a6.918 6.918 0 0 1-3.175-1.31l-.775.775a1 1 0 0 1-1.414-1.414l.775-.775A6.918 6.918 0 0 1 2.101 10H1a1 1 0 0 1 0-2h1.101a6.918 6.918 0 0 1 1.31-3.175l-.775-.775A.999.999 0 1 1 4.05 2.636l.775.775A6.918 6.918 0 0 1 8 2.101V1a1 1 0 0 1 2 0v1.101a6.918 6.918 0 0 1 3.175 1.31l.775-.775a1 1 0 0 1 1.414 1.414l-.775.775A6.918 6.918 0 0 1 15.899 8H17a1 1 0 0 1 0 2zM9 4a5 5 0 1 0 .001 10.001A5 5 0 0 0 9 4zm0 8a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0-4a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"/></svg>
--- a/src/assets/images/info.png
+++ b/src/assets/images/info.png
--- a/src/assets/images/info@2x.png
+++ b/src/assets/images/info@2x.png
--- a/src/assets/images/loading.png
+++ b/src/assets/images/loading.png
--- a/src/assets/images/loading@2x.png
+++ b/src/assets/images/loading@2x.png
--- a/src/assets/images/logo_sokol.png
+++ b/src/assets/images/logo_sokol.png
--- a/src/assets/images/logo_sokol@2x.png
+++ b/src/assets/images/logo_sokol@2x.png
--- a/src/assets/images/logos.png
+++ b/src/assets/images/logos.png
--- a/src/assets/images/logos/logo_loader.svg
+++ b/src/assets/images/logos/logo_loader.svg
@ -0,0 +1 @@
+<svg viewBox="0 0 214.64 31" xmlns="http://www.w3.org/2000/svg"><g fill="#fff" transform="translate(0 -10)"><path d="m123.06 33.95a1 1 0 0 1 -.31-.74v-17a1.14 1.14 0 0 1 .29-.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 -.75-.24z"/><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.59 5.54 5.54 0 0 1 2.17-2.39 6.25 6.25 0 0 1 3.25-.83 6.34 6.34 0 0 1 3.27.83 5.53 5.53 0 0 1 2.22 2.37 8 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.83 6.26 6.26 0 0 1 -3.29-.81zm6.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.72 4.05 4.05 0 0 0 5.93.02z"/><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.08v-1.32a3.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.3 4.54 4.54 0 0 1 2.43-1.18 24.24 24.24 0 0 1 4.77-.36h.59v-.92a3.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.69.69 0 0 1 -.54-.24.9.9 0 0 1 -.21-.62 1 1 0 0 1 .23-.66 2.67 2.67 0 0 1 .74-.58 8.61 8.61 0 0 1 2.13-.85 9.4 9.4 0 0 1 2.37-.31q4.91-.01 4.91 5.2zm-3.15 5.64a3.93 3.93 0 0 0 1-2.81v-.83h-.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.69 3.47 3.47 0 0 0 2.64-1.09z"/><path d="m177.22 15.41a1 1 0 0 1 .29.75v17.13a1.06 1.06 0 0 1 -.29.78 1.08 1.08 0 0 1 -.8.3 1 1 0 0 1 -.79-.3 1.09 1.09 0 0 1 -.28-.78v-1.46a4.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.91v-7.22a1 1 0 0 1 .28-.77 1.07 1.07 0 0 1 .79-.28 1.08 1.08 0 0 1 .74.3zm-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.33 3.52 3.52 0 0 0 2.93-1.3z"/><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 1 1.64 1.64 0 0 1 -2.09 0zm.25 16.44a1 1 0 0 1 -.31-.79v-11.37a1 1 0 0 1 .31-.79 1.12 1.12 0 0 1 .79-.28 1.08 1.08 0 0 1 .78.28 1.05 1.05 0 0 1 .29.79v11.36a1 1 0 0 1 -.29.81 1.11 1.11 0 0 1 -.78.27 1.13 1.13 0 0 1 -.79-.29z"/><path d="m199 26v7.3a1 1 0 0 1 -1.07 1.08 1.12 1.12 0 0 1 -.8-.28 1.05 1.05 0 0 1 -.29-.79v-7.18a4.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-.28 1.05 1.05 0 0 1 -.29-.79v-11.39a1.06 1.06 0 0 1 .29-.78 1.08 1.08 0 0 1 .8-.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-.63q4.68-.01 4.68 5.2z"/><path d="m214.35 21.15a1.06 1.06 0 0 1 .29.78v11.41a6 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.94.94 0 0 1 .2-.62.65.65 0 0 1 .52-.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.95v-2.33a4.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.42 5.46 5.46 0 0 1 2.01-2.28 5.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.91v-1.44a1.09 1.09 0 0 1 .28-.78 1 1 0 0 1 .79-.3 1.08 1.08 0 0 1 .83.3zm-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.25 3.67 3.67 0 0 0 2.99-1.25z"/><path d="m17.38 34.81h-1.57v4.63a1.57 1.57 0 0 1 -1.59 1.56h-12.63a1.57 1.57 0 0 1 -1.59-1.55v-27.89a1.57 1.57 0 0 1 1.59-1.56h15.79a12.52 12.52 0 0 1 12.62 12.41 12.52 12.52 0 0 1 -12.62 12.4zm31.12-24.81a15.5 15.5 0 1 1 -15.5 15.5 15.5 15.5 0 0 1 15.5-15.5zm50.5 30a1 1 0 0 1 -1 1h-35.06a.94.94 0 0 1 -.74-1.51l17.34-28.72a.93.93 0 0 1 1.83 0l17.63 28.88-.06.08a.93.93 0 0 1 .06.27z"/></g></svg>
--- a/src/assets/images/logos/logo_sokol.png
+++ b/src/assets/images/logos/logo_sokol.png
--- a/src/assets/images/logos/logo_sokol@2x.png
+++ b/src/assets/images/logos/logo_sokol@2x.png
--- a/src/assets/images/logos/logo_voting_dapp.png
+++ b/src/assets/images/logos/logo_voting_dapp.png
--- a/src/assets/images/logos/logo_voting_dapp@2x.png
+++ b/src/assets/images/logos/logo_voting_dapp@2x.png
--- a/src/assets/images/logos/logo_voting_dapp_footer.png
+++ b/src/assets/images/logos/logo_voting_dapp_footer.png
--- a/src/assets/images/logos/logo_voting_dapp_footer@2x.png
+++ b/src/assets/images/logos/logo_voting_dapp_footer@2x.png
--- a/src/assets/images/logos@2x.png
+++ b/src/assets/images/logos@2x.png
--- a/src/assets/images/select.png
+++ b/src/assets/images/select.png
--- a/src/assets/images/select@2x.png
+++ b/src/assets/images/select@2x.png
--- a/src/assets/images/socials.png
+++ b/src/assets/images/socials.png
--- a/src/assets/images/socials/git-sokol.png
+++ b/src/assets/images/socials/git-sokol.png
--- a/src/assets/images/socials/git-sokol@2x.png
+++ b/src/assets/images/socials/git-sokol@2x.png
--- a/src/assets/images/socials/git.png
+++ b/src/assets/images/socials/git.png
--- a/src/assets/images/socials/git@2x.png
+++ b/src/assets/images/socials/git@2x.png
--- a/src/assets/images/socials/github@2x.png
+++ b/src/assets/images/socials/github@2x.png
--- a/src/assets/images/socials/oracles@2x.png
+++ b/src/assets/images/socials/oracles@2x.png
--- a/src/assets/images/socials/poa-sokol.png
+++ b/src/assets/images/socials/poa-sokol.png
--- a/src/assets/images/socials/poa-sokol@2x.png
+++ b/src/assets/images/socials/poa-sokol@2x.png
--- a/src/assets/images/socials/poa.png
+++ b/src/assets/images/socials/poa.png
--- a/src/assets/images/socials/poa@2x.png
+++ b/src/assets/images/socials/poa@2x.png
--- a/src/assets/images/socials/reddit@2x.png
+++ b/src/assets/images/socials/reddit@2x.png
--- a/src/assets/images/socials/telegram-sokol.png
+++ b/src/assets/images/socials/telegram-sokol.png
--- a/src/assets/images/socials/telegram-sokol@2x.png
+++ b/src/assets/images/socials/telegram-sokol@2x.png
--- a/src/assets/images/socials/telegram.png
+++ b/src/assets/images/socials/telegram.png
--- a/src/assets/images/socials/telegram@2x.png
+++ b/src/assets/images/socials/telegram@2x.png
--- a/src/assets/images/socials/tw-sokol.png
+++ b/src/assets/images/socials/tw-sokol.png
--- a/src/assets/images/socials/tw-sokol@2x.png
+++ b/src/assets/images/socials/tw-sokol@2x.png
--- a/src/assets/images/socials/tw.png
+++ b/src/assets/images/socials/tw.png
--- a/src/assets/images/socials/tw@2x.png
+++ b/src/assets/images/socials/tw@2x.png
--- a/src/assets/images/socials/twitter@2x.png
+++ b/src/assets/images/socials/twitter@2x.png
--- a/src/assets/images/socials@2x.png
+++ b/src/assets/images/socials@2x.png
--- a/src/assets/stylesheets/_mixins.scss
+++ b/src/assets/stylesheets/_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;
-  }
-}
--- a/src/assets/stylesheets/_vars.scss
+++ b/src/assets/stylesheets/_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;
--- a/src/assets/stylesheets/application/_ballot-types.scss
+++ b/src/assets/stylesheets/application/_ballot-types.scss
@ -16,11 +16,11 @@
      height: 30px;
      width: 3px;
      transform: translateY(-50%);
-      background-color: #08b3f2;
+      background-color: $primary-color;
    }

    &_active {
-      color: #08b3f2;
+      color: $primary-color;

      &:before {
        opacity: 1;
--- a/src/assets/stylesheets/application/_base.scss
+++ b/src/assets/stylesheets/application/_base.scss
@ -1,47 +1,43 @@
 html,
-body {
+body,
+p, h1, h2, h3 {
  margin: 0;
  padding: 0;
+  font-weight: normal;
 }

 html {
-  height: 100%;
-}
-
-p, h1, h2, h3, h4 {
-  margin: 0;
-  padding: 0;
-  font-family: 'Open Sans', sans-serif;
+  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%;
-  min-height: 100%;
-  box-sizing: border-box;
-  padding-bottom: $footer-height + 10px;
-  background-color: #f4f9ff;

+  @media screen and (max-width: $tablet-width) {
+    padding-bottom: $footer-height_mobile;
+  }
  @media screen and (max-width: $mobile-width) {
-    padding-bottom: $footer-height + 30px;
+    padding-bottom: $footer-height_mobile;
  }
 }

 a {
-  color: #08b3f2;
+  color: $primary-color;
  text-decoration: none;
-  font-size: 14px;
-
  &:hover {
    text-decoration: underline;
  }
 }

-p {
-  color: #444;
-  font-size: 14px;
-}
-
 hr {
  display: block;
  width: 100%;
--- a/src/assets/stylesheets/application/_buttons.scss
+++ b/src/assets/stylesheets/application/_buttons.scss
@ -0,0 +1,60 @@
+button,
+input,
+textarea {
+  outline: none;
+}
+
+.btn {
+  background-position: calc(100% - 15px) 50%;
+  background-repeat: no-repeat;
+  border-radius: 5px;
+  border: 0;
+  color: #fff;
+  cursor: pointer;
+  font-weight: bold;
+  font-size: 14px;
+  line-height: 42px;
+  outline: none;
+  padding: 0 15px;
+  text-decoration: none;
+  text-transform: uppercase;
+  transition: 0.15s background-color;
+  &.btn-primary {
+    background-color: $primary-color;
+    &:hover {
+      background-color: lighten($primary-color, 10%);
+    }
+  }
+  &.btn-secondary {
+    background-color: $secondary-color;
+    &:hover {
+      background-color: lighten($secondary-color, 10%);
+    }
+  }
+  &.btn-success {
+    background-color: $success-color;
+    &:hover {
+      background-color: lighten($success-color, 10%);
+    }
+  }
+  &.btn-danger {
+    background-color: $danger-color;
+    &:hover {
+      background-color: lighten($danger-color, 10%);
+    }
+  }
+  &.btn-new {
+    padding-right: 45px;
+    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACsAAAArCAYAAADhXXHAAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA/JJREFUeNrcmUtME1EUhv8ppVDegpaHgFTAN7FYRHwQ0agRFWNc6sIY3bjXsDO4VBMX6lpdaMTEBTFujK+Fr/AG4wutLxQxihGLwNCWGc8tt8mo2N6ZtlA8yZ8QMvfeb07PvefcM5KqqpgpZgpzfD3pEWmA5CEpJFUjhf9/gD9XH9ZqzLM6VUtqJsmqMZP5+Fq9a+t52EHqJPnUyJiPz+eINOw50ogaHRvh84fkkAQ2WCvJSZKiuHcYRDtpZbCHQsG6SMVTuOFfk0qMnAZTDQq+nksvbOs0gGqBW0Vhz/EYnU5zco6gMesgPSRZYyBhjZLWkLr+BdvJgWPFGGj5ZGFQSyoTmUEe8eJs/QNcPtWBvjdueGQfolRjlHGuvzzbTKoUmeFF+xecOHQbHo+CWTYrquvmw1lTgFx7KqzJFkiRPZFbSKv+hJVJCSKjW2/14vSR+1CVibES0eUUpaBy8zyUVeWiaHEmEpPMkYIdIyWyP+IaGhoC1dNW0dHvnn1D292PE3mH289BD152fMXb5wMY/Cr7vZuelQhzfLiFHczckQ8Cr79Lz2ivV2FFxaQV3IeXP9DncuPxwz4scuagYkM+SpbPhiUhLhxgxnc8AFuqZ6TiUxBsPykUHr09g+h/O4SnLf0EnY3qHXZ/eBj0dGnAxczSdMEqYjvf6xknL//Al96f6L7XB8e6PGzZuwi589L0bkI/n+nKmS6TBlqsRFL0HVMMeuDTMO5cdeHonhu4eLIN7u+y3riFKdEan6a3/FNVY2cT+0XkYQ9uXOrB4bpruH7+GcbHhV7cv6CJJlhh5CoUrkkmCa4n3/wJRti98rC3w1CpbNBSMywoWDALjup8VG0tRHKqRRx2eMjj5stL0WRNSbf4j7Cy1XkoX58H29xU3e4xHzy6il2XfaT4aHiWZbKFThul43wsrsiGrSAFcXG6jy+f9uhi3s0SZw1Na6KYZJDVO+1Y4LAhKycJ8RbDicGthX2lB1YKcUjal2Zi+74llAxs9PMnRCLlvtLCNpGqwj0N5hanoe7AMlRuKiQvmkK+lA5r0sIeJx0TrbrYTzzhYQr0BDOyC1NQs7sYa7fZ/Z6MsI1xvt8yV7doPZuVm4zMHCsy5iShYmMBQRZRTCZH67bQPVmvq1a0NTQ26lNbbr5XP/cOqVE2n7YnNmPvYMz281tlLNgo5/ln34C9SWN4CTViva9G7TU8WK+LdUQqphG2bbImXbDG3HT0uoI254KllhI+MCZAQ8EGgNumIIZVvk5J0GQkMBGLnQtRPCVG+fwrhfL8//ZNISa+1khh3qfqeQOilF+XzX/cOFReOLt5mdcUKEoM3dtm0hfGXwIMAC+6tL4wp5PYAAAAAElFTkSuQmCC');
+    background-size: 18px 18px;
+  }
+  &[disabled],
+  &.disabled {
+    color: #788f9a;
+    cursor: default;
+    background-color: #dde2e8;
+    &:hover {
+      background-color: #dde2e8;
+    }
+  }
+}
--- a/src/assets/stylesheets/application/_controls.scss
+++ b/src/assets/stylesheets/application/_controls.scss
@ -1,9 +1,8 @@
 label {
  display: inline-block;
  margin-bottom: 15px;
-  color: #8197a2;
+  color: $gray-text-color;
  font-size: 14px;
-  font-family: 'Open Sans', sans-serif;
 }

 input,
@ -11,7 +10,7 @@ textarea {
  @extend %form-el;

  &:focus {
-    border-color: #08b3f2;
+    border-color: $primary-color;
  }

  &[type='radio'] {
@ -39,13 +38,10 @@ select {

 button {
  @extend %button;
-  background-color: fade-out(#08b3f2, 0.9);
-  color: #08b3f2;
+  background-color: fade-out($primary-color, 0.9);
+  color: $primary-color;

  &.load-more {
-    background-color: rgba(109,46,174,0.1);
-    color: #6d2eae;
-    margin-top: 0;
    margin-bottom: 50px;

    @media screen and (max-width: $container-width) {
@ -59,7 +55,7 @@ button {
 }

 .radio {
-  @extend %form-el;
+  // @extend %form-el;
  transition: 0.3s color,
              0.3s background-color,
              0.3s border-color;
@ -69,9 +65,8 @@ button {
  line-height: $input-height;

  input[type='radio']:checked + & {
-    border-color: #08b3f2;
-    background-color: fade-out(#08b3f2, 0.9);
-    color: #08b3f2;
+    border-color: $primary-color;
+    color: $primary-color;
  }

  &_icon {
@ -82,15 +77,15 @@ button {
  }

  &_add {
-    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAFVBMVEUAsvUAsvUAsvUAsvUAsvUAsvUAsvVmJ/ytAAAABnRSTlMASUrk5udXTd49AAAAPElEQVR4Ae3RIQKAAAzDwG5k/f+TwYIoEsROx0V3BaUEGyW+bPBVUDighCPeglGPg6P3xW8D7FHS8/x3AhBhBV+OMM67AAAAAElFTkSuQmCC);
+    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAZ0lEQVR4AWIgF8SYLPIE4mdQ7MlAbwC1GNB+HWAAAMJQGL5f9z9C2jGWWTIASk/8eAS8D/LMV4YC4DX/AgAAAAAAQFk1f5xcUVH5RqgBFoAWD0F5j25+AQAAAAAAuHWcmgCQK3q6ahPyvQbTMeZShQAAAABJRU5ErkJggg==')
  }

  &_remove {
-    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAFVBMVEUAsvUAsvUAsvUAsvUAsvUAsvUAsvVmJ/ytAAAABnRSTlMASUrk5udXTd49AAAATklEQVR4Ae3SQQqAMAxE0Wmc5P5H1k2gfijFnaBvWf5mStSGa+Ihct14F6QosiZH6D24nzw4j7wLEvsb/qMugn77g28G9Czw6h5b5PoeT61VCXCp8qCYAAAAAElFTkSuQmCC);
+    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAc0lEQVR42u2XwQ3AIAwDM1SXgBmYrrNVyRglbz5WcRGtZEv3Q/g+icBQ2nGWxJP7IZ4UYwPKEb5bIN4QqElMlF9JNUWh5pwH7wmqnMd3C8Qw5zT8nhgPGhV8nwQkIAEJSEACEvi6AM8vBXyhQBB/wTVvwA5ymYbEmIcsVAAAAABJRU5ErkJggg==');
  }

  &_swap {
-    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAulBMVEUAsvUAsvUAsvUAsvUAsvUAsvUAsvUAsvUAsvUAsvUAsvUAsvUAsvUAsvUAsvUAsvUAsvUAsvUAsvUAsvUAsvUAsvUAsvUAsvUAsvUAsvUAsvUAsvUAsvUAsvUAsvUAsvUAsvUAsvUAsvUAsvUAsvUAsvUAsvUAsvUAsvUAsvUAsvUAsvUAsvUAsvUAsvUAsvUAsvUAsvUAsvUAsvUAsvUAsvUAsvUAsvUAsvUAsvUAsvUAsvUAsvUAsvVktDOmAAAAPXRSTlMAAQIDBAUGETxARUlKS1BRUlNUVVdaXGFkZmdpamtuc3R2fH+IiYrR19ja3N7h4+bn6+3v8PHy9fj5+vz+d3lc/AAAALhJREFUeNqVk0cOwkAMAE0n1NBLgNAhQCCFTvz/b6GYPQS03hVznZF8sA0fBr5XBgU2Ih41Hn2Nj/qsn5Ifa/yI9RbKcQ0RnJFhK4KTLmi95P5ggKBDxRwY/ihsXRGCptiDCnO3KUKSVBqUtIOwp/LZC62PJ3eLF2gBzwR1xYyKYWJq4Yfld9G8opSoKwIfGVzdVTgiqHhy/+DfaU2+xvoV+TrrF+RN1ufvsW8ASyZAfJLnKDlOFYg3It9LpKV2sncAAAAASUVORK5CYII=);
+    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABBklEQVR4AWLABWJMFgGarwfdCoAgCsNbxujz1LZt2wyquHi7BrVtW9tTc7ZXO3Mn+eL0P20v62APtiBRcR6C3aC/WBOLv9mTjD9CDUe8h4g3S8abOOKNoC1agQjTgGPQlk2ZBmxKD8iFe4vxRYj473FQRIwYUFzn7SO6pUccKZzkiHnFfYhmwSxMQIiLP8MHfJXEIZwPB3AEldxxfzgh3tRYBgTAxR9vbo2cI9pAS4/oI0bUO/O/DHLTqHkEHc+BU9CWPEKJacAeaMtWpD8nTJsGJMGWxfgNyxceRMaJeAZHfIyIZ3LEh4l4Fkc8EK7/iGdzvQL6wcGX+K3VODEiFqbfJCvingAZLf+WroN1/QAAAABJRU5ErkJggg==');
  }

  &:before,
@ -108,10 +103,10 @@ button {
    width: 24px;
    height: 24px;
    box-sizing: border-box;
-    border: 1px solid #e5eef9;
+    border: 1px solid $base-border-color;

    input[type='radio']:checked + & {
-      border-color: #08b3f2;
+      border-color: $primary-color;
    }
  }

@ -124,7 +119,7 @@ button {
    top: ($input-height - 12px) / 2;
    width: 12px;
    height: 12px;
-    background-color: #08b3f2;
+    background-color: $primary-color;

    input[type='radio']:checked + & {
      transform: scale(1);
@ -143,8 +138,9 @@ button {
 }

 .hint {
-  margin-top: 15px;
-  color: #8197a2;
-  line-height: 18px;
+  color: $gray-text-color;
  font-size: 12px;
+  line-height: 18px;
+  margin-top: 15px;
+  word-break: break-all;
 }
--- a/src/assets/stylesheets/application/_footer.scss
+++ b/src/assets/stylesheets/application/_footer.scss
@ -0,0 +1,58 @@
+.footer {
+  @extend %full-width;
+
+  background-color: $primary-color;
+  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_voting_dapp_footer@2x.png');
+    background-image: url('#{ $base-images-path}/logos/logo_voting_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%;
+    }
+  }
+}
--- a/src/assets/stylesheets/application/_header.scss
+++ b/src/assets/stylesheets/application/_header.scss
@ -0,0 +1,186 @@
+.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: 123;
+  }
+
+  .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-weight: 700;
+    line-height: 16px;
+    margin-left: 30px;
+    opacity: 0.8;
+    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-events.svg');
+    }
+    &-set-metadata {
+      background-image: url('#{ $base-images-path }/icons/icon-status.svg');
+    }
+    &-pending-changes {
+      background-image: url('#{ $base-images-path }/icons/icon-statistics.svg');
+    }
+  }
+
+  &.sokol {
+    .link-icon {
+      &-all {
+        background-image: url('#{ $base-images-path }/icons/icon-events-sokol.svg');
+      }
+      &-set-metadata {
+        background-image: url('#{ $base-images-path }/icons/icon-status-sokol.svg');
+      }
+      &-pending-changes {
+        background-image: url('#{ $base-images-path }/icons/icon-statistics-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;
+      }
+    }
+  }
+
+  .btn.btn-new-ballot {
+    background-image: url('#{ $base-images-path }/btn-new-success.png');
+    height: 40px;
+    line-height: 40px;
+    opacity: 1;
+    .link-icon {
+      display: none;
+    }
+  }
+
+}
+
+.select-network-id {
+  background: #fff;
+  width: 40px;
+}
--- a/src/assets/stylesheets/application/_info.scss
+++ b/src/assets/stylesheets/application/_info.scss
@ -1,16 +1,18 @@
 .info {
-  color: #8197a2;
+  color: #000;

  .ballots & {
    @include image-2x('./images/info@2x.png', 32px, 32px);
-    display: flex;
    align-items: center;
-    padding-left: 44px;
-    min-height: 32px;
    background-image: url(./images/info.png);
-    background-repeat: no-repeat;
    background-position: left center;
+    background-repeat: no-repeat;
+    display: flex;
    margin-bottom: 20px;
+    max-width: 100%;
+    min-height: 32px;
+    padding-left: 44px;
+    word-break: break-all;
  }

  .new-form & {
@ -49,7 +51,7 @@
      width: 4px;
      height: 4px;
      border-radius: 50%;
-      background-color: #08b3f2;
+      background-color: $primary-color;
    }
  }
 }
--- a/src/assets/stylesheets/application/_layout.scss
+++ b/src/assets/stylesheets/application/_layout.scss
@ -0,0 +1,52 @@
+.app-container {
+  padding-top: 40px;
+  position: relative;
+  z-index: 1;
+  &.app-container-open-mobile-menu {
+    &: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;
+  }
+  &.content-menu-open {
+    padding-top: $header-mobile-menu-container-height + $header-height_mobile;
+  }
+}
+
+.clearfix::after {
+  content: "";
+  clear: both;
+  display: table;
+}
--- a/src/assets/stylesheets/application/_loading.scss
+++ b/src/assets/stylesheets/application/_loading.scss
@ -15,33 +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;
-    background-color: fade-out(#231d73, 0.2);
+    z-index: 1000000;
  }

  &-i {
@ -50,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;
@ -76,4 +75,4 @@
      animation-delay: .5s;
    }
  }
-}
+}
--- a/src/assets/stylesheets/application/_main-title.scss
+++ b/src/assets/stylesheets/application/_main-title.scss
@ -0,0 +1,21 @@
+.main-title-container {
+  -ms-flex-pack: justify;
+  display: -ms-flexbox;
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 50px;
+
+  .main-title {
+    font-size: 24px;
+    color: #333;
+    line-height: 38px;
+  }
+
+  @media screen and (max-width: $mobile-width) {
+    -ms-flex-direction: column;
+    flex-direction: column;
+    .search-input {
+      width: 100%;
+    }
+  }
+}
--- a/src/assets/stylesheets/application/_nav.scss
+++ b/src/assets/stylesheets/application/_nav.scss
@ -7,7 +7,7 @@
    display: inline-block;
    vertical-align: middle;
    margin-right: 40px;
-    color: #8197a2;
+    color: $gray-text-color;
    text-transform: uppercase;
    text-decoration: none;
    line-height: normal;
--- a/src/assets/stylesheets/application/_new.scss
+++ b/src/assets/stylesheets/application/_new.scss
@ -42,7 +42,6 @@

  .add-ballot {
    white-space: nowrap;
-
    @media screen and (max-width: $mobile-width) {
      margin-top: 20px;
    }
--- a/src/assets/stylesheets/application/_search.scss
+++ b/src/assets/stylesheets/application/_search.scss
@ -0,0 +1,11 @@
+.search-input {
+  @include default-text-input-styles();
+
+  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAA0lBMVEWAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6McEf5GAAAARXRSTlMAAQIDBQYHDA0bHB8gISQmJyg+P0BGR0lMU1RVWFlcXV5iY2tsdXZ4iYqLo6Spqqusra7Cw8TFysvM29zm5+jr8vP4+fzSh6raAAABM0lEQVR4AYWTeVeCQBTFr6AtuaTYkpUVlqZm0JIaLhjBfP+v1NxDyDCcA7+/3nLPecu8QULFGs/9MPTnE6uCPIa9EntWtgGN5lJkWDaR4WwnNHYWFM5DxsLXfqN22Ok7sXeR5ts/jHy0Er/1Tj9oJ77J+tEICqOIfZiIsalnXlUwNvifn/O50HA5bQWky45OoHHMTrsgY2nNkONFhscgX9K6Ro6eDH+C+NKqI0ddhn0QFjtAjhpb2wuOigQscVpQorzJScGYRYv65aLSVTvQcLhqI7YHQjJEhqHyWDC/+dxPUHjkc3tm4nYC6t/Sg3GFdgGX8ZHNeo1qtdGb0ZNEd4oiEBq6ouNlc95zRMW9+nHWaXptG3jQFTCs6YJfbzG1OL+m0EkVt2WKLUoUGxRxs91c/QFA1F3oKOgExAAAAABJRU5ErkJggg==);
+  background-position: 15px 50%;
+  background-repeat: no-repeat;
+  background-size: 16px 16px;
+  display: inline-block;
+  padding-left: 40px;
+  width: 300px;
+}
--- a/src/assets/stylesheets/application/_settings.scss
+++ b/src/assets/stylesheets/application/_settings.scss
--- a/src/assets/stylesheets/application/_socials.scss
+++ b/src/assets/stylesheets/application/_socials.scss
@ -0,0 +1,181 @@
+.socials {
+  &-item {
+    &:not(:first-child) {
+      margin-left: 10px;
+    }
+  }
+
+  &-i {
+    background-color: #ffffff;
+    border-radius: 3px;
+    display: inline-block;
+    font-size: 0;
+    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');
+      }
+    }
+  }
+}
+
+// .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;
+//       }
+//     }
+//   }
+// }
--- a/src/assets/stylesheets/application/_vote-scale.scss
+++ b/src/assets/stylesheets/application/_vote-scale.scss
@ -15,11 +15,11 @@
    border-radius: 3px;

    &_yes {
-      background-color: #08b3f2;
+      background-color: $danger-color;;
    }

    &_no {
-      background-color: #6d2eae;
+      background-color: $success-color;
    }
  }

@ -41,15 +41,16 @@
  &--votes,
  &--percentage {
    float: right;
-    font-size: 12px;
+    font-size: 13px;
  }

  &--votes {
+    color: $gray-text-color;
    margin-left: 10px;
-    color: #8197a2;
  }

  &--percentage {
-    color: #08b3f2;
+    color: #000;
+    font-weight: 700;
  }
 }
--- a/src/assets/stylesheets/application/ballots/_placeholders.scss
+++ b/src/assets/stylesheets/application/ballots/_placeholders.scss
--- a/src/assets/stylesheets/application/ballots/about.scss
+++ b/src/assets/stylesheets/application/ballots/about.scss
@ -1,105 +1,77 @@
 .ballots-about {
-  font-size: 0;
-
  @media screen and (max-width: $tablet-width) {
    display: table;
    width: 100%;
  }
-
  $this: &;
-
  p {
    line-height: 28px;
  }
-
  &-i {
    position: relative;
    display: inline-block;
    vertical-align: top;
    box-sizing: border-box;
-
-    &:not(&_time) {
-      padding-right: 10px;
-
-      @media screen and (max-width: $tablet-width) {
-        padding-right: 0;
-      }
-    }
-
    @media screen and (max-width: $tablet-width) {
      display: table-row;
      width: 100% !important;
    }
-
    &_name {
      width: 20%;
    }
-
    &_action {
      width: 10%;
    }
-// 25
+    // 25
    &_type {
      width: 10%;
    }
-
    &_proposal {
      width: 30%;
    }
-
    &_key {
-      width: 25%;
+      width: 26%;
      word-break: break-all;
    }
-
    &_key_wide {
      width: 50%;
      word-break: break-all;
    }
-
    &_proposed-min-threshold {
      width: 70%;
      word-break: break-all;
    }
-
    &_contract-type {
      width: 40%;
      word-break: break-all;
    }
-
    &_proposed-address {
      width: 30%;
      word-break: break-all;
    }
-
    &_time {
-      width: 10%;
+      width: 8%;
      text-align: right;
-
      @media screen and (max-width: $tablet-width) {
        text-align: left;
      }
-
      #{$this}-i--title {
        text-align: right;
-
        @media screen and (max-width: $tablet-width) {
          text-align: left;
        }
      }
    }
-
    &--title {
-      position: absolute;
-      z-index: 1;
-      left: 0;
-      right: 0;
-      top: -#{$desktop-indent * 2};
-      opacity: 0.6;
-      color: #38454f;
-      text-transform: uppercase;
+      color: #333;
      font-size: 13px;
-
+      font-weight: 700;
+      left: 0;
+      position: absolute;
+      right: 0;
+      text-align: left;
+      top: -#{ $desktop-indent * 2 + 10 };
+      z-index: 1;
      @media screen and (max-width: $tablet-width) {
        position: relative;
        left: auto;
@ -108,24 +80,42 @@
        white-space: nowrap;
      }
    }
+    &:first-child .ballots-about-td-value {
+      border-left: none;
+      padding-left: 0;
+    }
+    &:last-child .ballots-about-td-value {
+      border-right: none;
+      padding-right: 0;
+    }
  }
-
  &-td {
+    &.ballots-about-td-value {
+      border-right: 1px solid $base-border-color;
+      font-size: 13px;
+      min-height: 56px;
+      padding-left: 5px;
+      padding-right: 5px;
+      @media screen and (max-width: $tablet-width) {
+        border: none;
+        min-height: 0;
+        padding-left: 0;
+        padding-right: 0;
+      }
+    }
    @media screen and (max-width: $tablet-width) {
      display: table-cell;
      vertical-align: top;
    }
-
    &:first-child {
      @media screen and (max-width: $tablet-width) {
-        padding-right: 20px;
+        padding-right: 10px;
      }
    }
-
    #{$this}-i:not(:last-child) & {
      @media screen and (max-width: $tablet-width) {
        padding-bottom: 10px;
      }
    }
  }
-}
+}
--- a/src/assets/stylesheets/application/ballots/base.scss
+++ b/src/assets/stylesheets/application/ballots/base.scss
@ -1,55 +1,44 @@
 .ballots {
  .title {
    margin-bottom: 50px;
-
    @media screen and (max-width: $tablet-width) {
      margin-bottom: $tablet-indent;
    }
-
    @media screen and (max-width: $mobile-width) {
      margin-bottom: $mobile-indent;
    }
  }
-
  &-i {
    @extend %white-block;
-
+    background-color: rgba(240, 240, 240, 0.2);
    &-not-finalized {
-      background-color: rgba(8,179,242,0.1);
+      background-color: #fff;
+      border-color: rgba($primary-color, 0.3);
    }
-
-    &:hover {
-      box-shadow: 0 11px 11px 0 fade-out(#326cb5, 0.85);
-    }
-
    &-scale {
+      border-top: 1px solid #e5eef9;
      display: flex;
      justify-content: space-between;
+      margin-bottom: 30px;
      margin-top: $desktop-indent;
-      border-top: 1px solid #e5eef9;
-      padding: $desktop-indent 0;
-
+      padding: $desktop-indent 0 0 0;
      @media screen and (max-width: $tablet-width) {
        display: block;
        margin-top: $tablet-indent;
-        padding: $tablet-indent 0;
+        padding: $tablet-indent 0 0 0;
      }
-
      @media screen and (max-width: $mobile-width) {
        margin-top: $mobile-indent;
-        padding: $mobile-indent 0;
+        padding: $mobile-indent 0 0 0;
      }
-
      &-column {
        display: flex;
        justify-content: space-between;
        width: 48%;
-
        @media screen and (max-width: $tablet-width) {
          overflow: hidden;
          width: 100%;
        }
-
        &:last-child {
          @media screen and (max-width: $tablet-width) {
            flex-direction: row-reverse;
@ -58,72 +47,62 @@
        }
      }
    }
-
    &--name {
      color: #333;
      font-weight: bold;
      overflow: hidden;
      text-overflow: ellipsis;
    }
-
    &--created {
-      padding-left: 20px;
      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAMAAABF0y+mAAAAw1BMVEWAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6M9jT1MAAAAQHRSTlMAAQIDBQYHDA0bHB8gISQmJyg+P0BGR0lKU1RZYmNrbHV2iYqLo6Spqqusra7Cw8TFysvM29zk5ufo6/Lz+Pn8DzgVHgAAATNJREFUeNplk+1agkAQhQfRykQTrJTEUjSCvtTQECPk/q+qPQ7LsnR+7DOzL898LiRlOP46zfN0vXQM0tXydkWlndeqs/620LTtK3Z7LBo6OpLd5fDzl6nVubSnIXv3zIY/8N4HVGrwBj8bwjaR77SgmhYn5DWF5eE7ZoribkZkoIeI78ZJMmYrQkcGjZD9mq+SokjY6qKqEfniDIiFYMR6FqZPn+J8+A9dYX5QKs5eBaFz3p4wUkLwizrkvB2UcoZXJUwYHiqIsDclnBzAvicyrFYQpBW0lK0oqVbkEHR1fzEEHl/YhCHG1yKaoYi5zubl4Mn8wsqe6uwRK4tNmHaG717VsiP4mV1uih9G4FrttuUG7GGGTLOioUwyRI51Ftv6o94rtNcfNbCz2uB32KycCv0BfU5XCrQEyKwAAAAASUVORK5CYII=);
-      background-size: 14px 14px;
-      background-repeat: no-repeat;
      background-position: left center;
-      color: #8197a2;
-      font-size: 12px;
+      background-repeat: no-repeat;
+      background-size: 14px 14px;
+      font-size: 13px;
+      font-weight: 700;
+      padding-left: 20px;
    }
-
    &--see-all-proposal {
      display: inline-block;
      margin-top: 5px;
    }
-
    &--time {
      color: #333;
      font-size: 24px;
      font-weight: bold;
-
      @media screen and (max-width: $tablet-width) {
        display: inline-block;
        vertical-align: middle;
        margin-right: 10px;
      }
    }
-
    &--to-close {
      color: #333;
      text-transform: uppercase;
-
      @media screen and (max-width: $tablet-width) {
        display: inline-block;
        vertical-align: middle;
      }
    }
-
    &--vote {
      @extend %_button;
-
      &-label {
        cursor: default;
+        font-size: 15px;
+        font-weight: 700;
+        line-height: 1.2;
+        @media screen and (max-width: $mobile-width) {
+          margin-bottom: 25px;
+        }
      }
-
      &-label-right {
        margin-left: auto !important;
      }
-
      &_yes {
        margin-right: 15px;
-        background-color: fade-out(#08b3f2, 0.9);
      }
-
      &_no {
        margin-left: 15px;
-        background-color: fade-out(#6d2eae, 0.9);
-        color: #6d2eae;
-
        @media screen and (max-width: $tablet-width) {
          float: left;
          margin-left: 0;
@ -135,7 +114,6 @@
 }

 textarea {
-  border: 1px solid #e5eef9;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
@ -143,8 +121,14 @@ textarea {
  outline: none;
  border-radius: 3px;
  width: 100%;
-  &:focus {
-    border-color: #08b3f2;
-    
-  }
+}
+
+.color-primary {
+  color: $primary-color;
+}
+.color-danger {
+  color: $danger-color;
+}
+.color-success {
+  color: $success-color;
 }
--- a/src/assets/stylesheets/application/ballots/footer.scss
+++ b/src/assets/stylesheets/application/ballots/footer.scss
@ -6,20 +6,31 @@
  &-left {
    display: inline-flex;
    align-items: center;
+
+    @media screen and (max-width: $mobile-width) {
+      display: block;
+      .btn {
+        display: block;
+        margin: 0 0 15px;
+        width: 100%;
+      }
+    }
  }
+
  @media screen and (max-width: $tablet-width) {
    padding-top: $tablet-indent;
  }

  @media screen and (max-width: $mobile-width) {
    flex-direction: column-reverse;
-    padding-top: $mobile-indent;
+    padding-top: 0;
  }

  p {
+    color: $gray-text-color;
    line-height: 18px;
-    color: #8197a2;
    max-width: 340px;
+    padding-left: 15px;
  }

  &-finalize {
--- a/src/assets/stylesheets/application/select/components.scss
+++ b/src/assets/stylesheets/application/select/components.scss
--- a/src/assets/stylesheets/application/select/control.scss
+++ b/src/assets/stylesheets/application/select/control.scss
@ -0,0 +1,271 @@
+//
+// Control
+// ------------------------------
+@import 'spinner';
+@import 'mixins';
+.Select {
+  position: relative; // disable some browser-specific behaviours that break the input
+  input::-webkit-contacts-auto-fill-button,
+  input::-webkit-credentials-auto-fill-button {
+    display: none !important;
+  }
+  input::-ms-clear {
+    display: none !important;
+  }
+  input::-ms-reveal {
+    display: none !important;
+  } // preferred box model
+  &,
+  & div,
+  & input,
+  & span {
+    @include box-sizing(border-box);
+  } // handle disabled state
+  &.is-disabled {
+    .Select-arrow-zone {
+      cursor: default;
+      pointer-events: none;
+    }
+    >.Select-control {
+      background-color: $select-input-bg-disabled;
+      &:hover {
+        box-shadow: none;
+      }
+    }
+  }
+  &.is-searchable {
+    &.is-open>.Select-control {
+      cursor: text;
+    }
+    &.is-focused:not(.is-open)>.Select-control {
+      cursor: text;
+    }
+  }
+  &.is-open>.Select-control {
+    @include border-bottom-radius( 0);
+    background: $select-input-bg;
+    border-color: darken($select-input-border-color, 10%) $select-input-border-color lighten($select-input-border-color, 5%); // flip the arrow so its pointing up when the menu is open
+    .Select-arrow {
+      top: -2px;
+      border-color: transparent transparent $select-arrow-color;
+      border-width: 0 $select-arrow-width $select-arrow-width;
+    }
+  }
+  &.is-focused>.Select-control {
+    background: $select-input-bg-focus;
+  }
+  &.is-focused:not(.is-open)>.Select-control {
+    border-color: $select-input-border-focus lighten($select-input-border-focus, 5%) lighten($select-input-border-focus, 5%);
+    box-shadow: $select-input-box-shadow-focus;
+  }
+  &.has-value.is-clearable.Select--single>.Select-control .Select-value {
+    padding-right: ($select-clear-width + $select-arrow-width * 5);
+  }
+  &.has-value.Select--single>.Select-control .Select-value,
+  &.has-value.is-pseudo-focused.Select--single>.Select-control .Select-value {
+    .Select-value-label {
+      color: $select-text-color;
+    }
+    a.Select-value-label {
+      cursor: pointer;
+      text-decoration: none;
+      &:hover,
+      &:focus {
+        color: $select-link-hover-color;
+        outline: none;
+        text-decoration: underline;
+      }
+      &:focus {
+        background: $select-input-bg-focus;
+      }
+    }
+  } // fake-hide the input when the control is pseudo-focused
+  &.has-value.is-pseudo-focused .Select-input {
+    opacity: 0;
+  }
+  &.is-open .Select-arrow,
+  .Select-arrow-zone:hover>.Select-arrow {
+    border-top-color: $select-arrow-color-hover;
+  }
+  &.Select--rtl {
+    direction: rtl;
+    text-align: right;
+  }
+}
+
+// base
+.Select-control {
+  background-color: $select-input-bg;
+  border-collapse: separate;
+  border-color: lighten($select-input-border-color, 5%) $select-input-border-color darken($select-input-border-color, 10%);
+  border-radius: $select-input-border-radius;
+  border-spacing: 0;
+  border: $select-input-border-width solid $select-input-border-color;
+  color: $select-text-color;
+  cursor: default;
+  display: table;
+  height: $select-input-height;
+  outline: none;
+  overflow: hidden;
+  position: relative;
+  width: 100%;
+  &:hover {
+    box-shadow: $select-input-hover-box-shadow;
+  }
+  .Select-input:focus {
+    outline: none;
+    background: $select-input-bg-focus;
+  }
+}
+
+// placeholder
+.Select-placeholder,
+.Select--single > .Select-control .Select-value {
+  bottom: 0;
+  color: $select-input-placeholder;
+  left: 0;
+  line-height: $select-input-internal-height;
+  padding-left: $select-padding-horizontal;
+  padding-right: $select-padding-horizontal;
+  position: absolute;
+  right: 0;
+  top: 0; // crop text
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+// the <input> element users type in
+.Select-input {
+  // inherits `display: inline-block` from "react-input-autosize"
+  height: $select-input-internal-height;
+  padding-left: $select-padding-horizontal;
+  padding-right: $select-padding-horizontal;
+  vertical-align: middle;
+  >input {
+    background: none transparent;
+    border: 0 none;
+    box-shadow: none;
+    cursor: default;
+    display: inline-block;
+    font-family: inherit;
+    font-size: inherit; // height: $select-input-internal-height;
+    margin: 0;
+    outline: none; // padding: 0;
+    line-height: 17px;
+    /* For IE 8 compatibility */
+    padding: (($select-input-internal-height - 14) / 2 - 2) 0 (($select-input-internal-height - 14) / 2 + 2);
+    /* For IE 8 compatibility */
+    -webkit-appearance: none;
+    .is-focused & {
+      cursor: text;
+    }
+  }
+}
+
+// fake input
+.Select-control:not(.is-searchable)>.Select-input {
+  outline: none;
+}
+
+// loading indicator
+.Select-loading-zone {
+  cursor: pointer;
+  display: table-cell;
+  position: relative;
+  text-align: center;
+  vertical-align: middle;
+  width: $select-loading-size;
+}
+
+.Select-loading {
+  @include Select-spinner($select-loading-size, $select-loading-color-bg, $select-loading-color);
+  vertical-align: middle;
+}
+
+// the little cross that clears the field
+.Select-clear-zone {
+  @include animation( Select-animation-fadeIn 200ms);
+  color: $select-clear-color;
+  cursor: pointer;
+  display: table-cell;
+  position: relative;
+  text-align: center;
+  vertical-align: middle;
+  width: $select-clear-width;
+  &:hover {
+    color: $select-clear-hover-color;
+  }
+}
+
+.Select-clear {
+  display: inline-block;
+  font-size: $select-clear-size;
+  line-height: 1;
+}
+
+.Select--multi .Select-clear-zone {
+  width: $select-clear-width;
+}
+
+.Select--multi .Select-multi-value-wrapper {
+  display: inline-block;
+}
+
+.Select .Select-aria-only {
+  position: absolute;
+  display: inline-block;
+  height: 1px;
+  width: 1px;
+  margin: -1px;
+  clip: rect(0, 0, 0, 0);
+  overflow: hidden;
+  float: left;
+}
+
+// arrow indicator
+.Select-arrow-zone {
+  cursor: pointer;
+  display: table-cell;
+  position: relative;
+  text-align: center;
+  vertical-align: middle;
+  width: ($select-arrow-width * 5);
+  padding-right: $select-arrow-width;
+  .Select--rtl & {
+    padding-right: 0;
+    padding-left: $select-arrow-width;
+  }
+}
+
+.Select-arrow {
+  border-color: $select-arrow-color transparent transparent;
+  border-style: solid;
+  border-width: $select-arrow-width $select-arrow-width ($select-arrow-width / 2);
+  display: inline-block;
+  height: 0;
+  width: 0;
+  position: relative;
+}
+
+// Animation
+// ------------------------------
+// fade in
+@-webkit-keyframes Select-animation-fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes Select-animation-fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
--- a/src/assets/stylesheets/application/select/default.scss
+++ b/src/assets/stylesheets/application/select/default.scss
--- a/src/assets/stylesheets/application/select/menu.scss
+++ b/src/assets/stylesheets/application/select/menu.scss
--- a/src/assets/stylesheets/application/select/mixins.scss
+++ b/src/assets/stylesheets/application/select/mixins.scss
--- a/src/assets/stylesheets/application/select/multi.scss
+++ b/src/assets/stylesheets/application/select/multi.scss
--- a/src/assets/stylesheets/application/select/select.scss
+++ b/src/assets/stylesheets/application/select/select.scss
@ -12,21 +12,21 @@
 // control options
 $select-input-bg:                   #fff !default;
 $select-input-bg-disabled:          #f9f9f9 !default;
-$select-input-bg-focus:             $select-input-bg !default;
-$select-input-border-color:         #e5eef9 !default;
+$select-input-bg-focus:             #fff !default;
+$select-input-border-color:         $base-border-color !default;
 $select-input-border-radius:        3px !default;
-$select-input-border-focus:         #08c !default; // blue
-$select-input-box-shadow-focus:     inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 5px -1px fade($select-input-border-focus, 50%) !default;
+$select-input-border-focus:         $primary-color !default;
+$select-input-box-shadow-focus:     none !default;
 $select-input-border-width:         1px !default;
 $select-input-height:               40px !default;
 $select-input-internal-height:      ($select-input-height - ($select-input-border-width * 2)) !default;
-$select-input-placeholder:          #aaa !default;
+$select-input-placeholder:          #333 !default;
 $select-text-color:                 #333 !default;
-$select-link-hover-color:           $select-input-border-focus !default;
-$select-input-hover-box-shadow:     0 1px 0 rgba(0, 0, 0, 0.06) !default;
+$select-link-hover-color:           #8e959d !default;
+$select-input-hover-box-shadow:     none !default;

 $select-padding-vertical:           8px !default;
-$select-padding-horizontal:         10px !default;
+$select-padding-horizontal:         15px !default;

 // menu options
 $select-menu-zindex:                1000 !default;
--- a/src/assets/stylesheets/application/select/spinner.scss
+++ b/src/assets/stylesheets/application/select/spinner.scss
--- a/src/assets/stylesheets/fonts.scss
+++ b/src/assets/stylesheets/fonts.scss
@ -1,32 +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: 600;
-  src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'), url(https://fonts.gstatic.com/s/opensans/v14/MTP_ySUJH_bn48VBG8sNShampu5_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;
-}
-
-@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: #444;
-  line-height: 1;
-  font-size: 14px;
-  font-family: 'Open Sans', sans-serif;
-  -webkit-font-smoothing: antialiased;
-}
--- a/src/assets/stylesheets/footer.scss
+++ b/src/assets/stylesheets/footer.scss
@ -1,57 +0,0 @@
-.footer {
-  @extend %full-width;
-  position: absolute;
-  bottom: 0;
-  height: $footer-height;
-  background-color: #6d2eae;
-
-  @media screen and (max-width: $mobile-width) {
-    height: auto;
-    padding: 20px 10px 0;
-  }
-
-
-  &.sokol {
-    background-color: #6ac9b9;
-  }
-
-  .container {
-    position: relative;
-
-    @media screen and (max-width: $mobile-width) {
-      padding-top: $footer-height - 20;
-    }
-  }
-
-  &-logo,
-  .socials {
-    transform: translateY(-50%);
-    position: absolute;
-    z-index: 1;
-    top: 50%;
-
-    @media screen and (max-width: $mobile-width) {
-      transform: translateY(0);
-      top: 0;
-    }
-  }
-
-  &-logo {
-    @extend %logos;
-    left: 0;
-    width: 127px;
-  	height: 24px;
-  	background-position: 0 0
-  }
-
-  &-rights {
-    color: #fff;
-    line-height: $footer-height;
-    text-align: center;
-    font-size: 12px;
-
-    @media screen and (max-width: $mobile-width) {
-      line-height: 30px;
-    }
-  }
-}
--- a/src/assets/stylesheets/header.scss
+++ b/src/assets/stylesheets/header.scss
@ -1,67 +0,0 @@
-.header {
-  margin-bottom: 0px;
-  padding: 22px 0;
-  background-color: #6d2eae;
-
-  @media screen and (max-width: $tablet-width) {
-    margin-bottom: 0px;
-  }
-
-  @media screen and (max-width: $mobile-width) {
-    margin-bottom: 0px;
-  }
-
-  .container {
-    overflow: hidden;
-  }
-
-  &.sokol {
-    background-image: none;
-    background-color: #6ac9b9;
-  }
-
-  &-logo {
-    @extend %logos;
-    float: left;
-    width: 182px;
-  	height: 35px;
-    background-position: 0 -24px;
-  }
-
-  &-logo-sokol {
-    @include image-2x('./images/logo_sokol@2x.png', 146px, 35px);
-    display: inline-block;
-    width: 146px;
-    height: 35px;
-    background-image: url('./images/logo_sokol.png');
-    background-position: 0 0;
-    background-repeat: no-repeat;
-  }
-
-  &-settings,
-  &-new-ballot {
-    @extend %button;
-    @extend %button_icon;
-    float: right;
-    border-radius: 3px;
-    color: #fff;
-    background-size: 12px 12px;
-
-    @media screen and (max-width: $tablet-width) {
-      padding: 0 20px;
-      background-position: center center;
-      font-size: 0;
-    }
-  }
-
-  &-settings {
-    margin-right: 15px;
-    background-color: #7d58bb;
-    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAAflBMVEX///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////+yfIzaAAAAKXRSTlMAAgQFBgwNDhAqKyxJSlJTVFVXZGVojo+Q19ja5Obn6+3u7/D19vf8/fmxL7QAAADLSURBVHgBfdHtVoJAGMTxUUwUZCtKRWzpxWj93/8Nti5LxDlbv68DzHkGTXbW7pRiwWpumcnDk5ctFe37y8MUPH58PsXne3D19oB32NYO+uGdxRvgrgRXB7wvFBjHjLtXVM8SV2tU3IKzyXNzvgWFRkeg3cjbtMAx3ktgYh+B38AyyBXcEZO/gk5Vl/rUS/VTfhrKT0CjUemA1qzXpgVcqf8PTEwS+xav6RHj7EWD15S/Ztf+a/ajLv2zomylKdAq05yFTilVF+8NvgGLASpP2eRPbAAAAABJRU5ErkJggg==);
-  }
-
-  &-new-ballot {
-    background-color: #08b3f2;
-    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAAFVBMVEX///////////////////////////9nSIHRAAAABnRSTlMASUrk5udXTd49AAAAOUlEQVR42tXQsQEAIAgDQcAn+4+snRZxAK79KokrIcNBwgYdc0Migwxk8Qsd1TJWDf/KQWobqt+9G4coA99W7as5AAAAAElFTkSuQmCC);
-  }
-}
--- a/src/assets/stylesheets/helpers/_mixins.scss
+++ b/src/assets/stylesheets/helpers/_mixins.scss
@ -0,0 +1,31 @@
+@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;
+  }
+}
+
+@mixin default-text-input-styles() {
+  background-color: #fff;
+  border-radius: 3px;
+  border: 1px solid $base-border-color;
+  box-sizing: border-box;
+  color: #333;
+  font-size: 16px;
+  height: 38px;
+  outline: none;
+  padding: 0 15px;
+  transition: 0.15s border-color;
+  &:hover {
+    border-color: #8e959d;
+    color: $input-color;
+  }
+  &:focus {
+    border-color: $primary-color;
+    color: $input-color;
+  }
+}
--- a/Show More
+++ b/Show More
				`@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18"><path fill="#fff" 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>`
				`@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" width="18" height="17"><path fill="#fff" fill-rule="evenodd" d="M17 13.031h-5.528l1.203 1.208a1.04 1.04 0 0 1 0 1.466 1.03 1.03 0 0 1-1.461 0l-2.92-2.932a1.022 1.022 0 0 1-.272-.891 1 1 0 0 1 .274-.635l2.939-2.95a1.036 1.036 0 0 1 1.469 0 1.045 1.045 0 0 1 0 1.475L11.481 11H17a1 1 0 0 1 1 1v.031a1 1 0 0 1-1 1zM9.676 4.755l-2.912 2.92a1.027 1.027 0 0 1-1.455 0 1.034 1.034 0 0 1 0-1.46L6.519 5H1a1 1 0 0 1 0-2h5.51L5.28 1.765a1.04 1.04 0 0 1 0-1.469 1.032 1.032 0 0 1 1.464 0l2.93 2.939c.2.201.29.464.291.727.002.036.005.069.004.104-.002.019-.008.036-.01.054a1.02 1.02 0 0 1-.283.635z"/></svg>
				`@ -0,0 +1 @@`
				<svg viewBox="0 0 214.64 31" xmlns="http://www.w3.org/2000/svg"><g fill="#fff" transform="translate(0 -10)"><path d="m123.06 33.95a1 1 0 0 1 -.31-.74v-17a1.14 1.14 0 0 1 .29-.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 -.75-.24z"/><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.59 5.54 5.54 0 0 1 2.17-2.39 6.25 6.25 0 0 1 3.25-.83 6.34 6.34 0 0 1 3.27.83 5.53 5.53 0 0 1 2.22 2.37 8 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.83 6.26 6.26 0 0 1 -3.29-.81zm6.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.72 4.05 4.05 0 0 0 5.93.02z"/><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.08v-1.32a3.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.3 4.54 4.54 0 0 1 2.43-1.18 24.24 24.24 0 0 1 4.77-.36h.59v-.92a3.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.69.69 0 0 1 -.54-.24.9.9 0 0 1 -.21-.62 1 1 0 0 1 .23-.66 2.67 2.67 0 0 1 .74-.58 8.61 8.61 0 0 1 2.13-.85 9.4 9.4 0 0 1 2.37-.31q4.91-.01 4.91 5.2zm-3.15 5.64a3.93 3.93 0 0 0 1-2.81v-.83h-.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.69 3.47 3.47 0 0 0 2.64-1.09z"/><path d="m177.22 15.41a1 1 0 0 1 .29.75v17.13a1.06 1.06 0 0 1 -.29.78 1.08 1.08 0 0 1 -.8.3 1 1 0 0 1 -.79-.3 1.09 1.09 0 0 1 -.28-.78v-1.46a4.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.91v-7.22a1 1 0 0 1 .28-.77 1.07 1.07 0 0 1 .79-.28 1.08 1.08 0 0 1 .74.3zm-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.33 3.52 3.52 0 0 0 2.93-1.3z"/><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 1 1.64 1.64 0 0 1 -2.09 0zm.25 16.44a1 1 0 0 1 -.31-.79v-11.37a1 1 0 0 1 .31-.79 1.12 1.12 0 0 1 .79-.28 1.08 1.08 0 0 1 .78.28 1.05 1.05 0 0 1 .29.79v11.36a1 1 0 0 1 -.29.81 1.11 1.11 0 0 1 -.78.27 1.13 1.13 0 0 1 -.79-.29z"/><path d="m199 26v7.3a1 1 0 0 1 -1.07 1.08 1.12 1.12 0 0 1 -.8-.28 1.05 1.05 0 0 1 -.29-.79v-7.18a4.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-.28 1.05 1.05 0 0 1 -.29-.79v-11.39a1.06 1.06 0 0 1 .29-.78 1.08 1.08 0 0 1 .8-.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-.63q4.68-.01 4.68 5.2z"/><path d="m214.35 21.15a1.06 1.06 0 0 1 .29.78v11.41a6 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.94.94 0 0 1 .2-.62.65.65 0 0 1 .52-.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.95v-2.33a4.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.42 5.46 5.46 0 0 1 2.01-2.28 5.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.91v-1.44a1.09 1.09 0 0 1 .28-.78 1 1 0 0 1 .79-.3 1.08 1.08 0 0 1 .83.3zm-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.25 3.67 3.67 0 0 0 2.99-1.25z"/><path d="m17.38 34.81h-1.57v4.63a1.57 1.57 0 0 1 -1.59 1.56h-12.63a1.57 1.57 0 0 1 -1.59-1.55v-27.89a1.57 1.57 0 0 1 1.59-1.56h15.79a12.52 12.52 0 0 1 12.62 12.41 12.52 12.52 0 0 1 -12.62 12.4zm31.12-24.81a15.5 15.5 0 1 1 -15.5 15.5 15.5 15.5 0 0 1 15.5-15.5zm50.5 30a1 1 0 0 1 -1 1h-35.06a.94.94 0 0 1 -.74-1.51l17.34-28.72a.93.93 0 0 1 1.83 0l17.63 28.88-.06.08a.93.93 0 0 1 .06.27z"/></g></svg>