(refactor) file and folders' structure / scaffolding - (fix) eslint + prettier - (add) npm start watches scss now

.eslintrc

@@ -1,16 +0,0 @@
-{
-  "extends": [
-    "react-app",
-    "plugin:prettier/recommended"
-  ],
-  "plugins": [
-    "dependencies"
-  ],
-  "rules": {
-    "no-control-regex": 0,
-    "dependencies/no-cycles": "error",
-    "dependencies/no-unresolved": ["error", {
-      "ignore": ["web3"]
-    }]
-  }
-}

.eslintrc.json

@@ -0,0 +1,32 @@
+{
+  "extends": [
+    "react-app",
+    "plugin:prettier/recommended"
+  ],
+  "plugins": [
+    "dependencies",
+    "prettier"
+  ],
+  "rules": {
+    "no-control-regex": 0,
+    "dependencies/no-cycles": "error",
+    "dependencies/no-unresolved": [
+      "error",
+      {
+        "ignore": [
+          "web3"
+        ]
+      }
+    ]
+  },
+  "settings": {
+    "import/resolver": {
+      "node": {
+        "extensions": [
+          ".js",
+          ".jsx"
+        ]
+      }
+    }
+  }
+}

.prettierignore

@@ -3,5 +3,4 @@ build_scripts
 config
 public
 scripts
-submodules
-*.js
+submodules

config/webpack.config.dev.js

@@ -9,6 +9,7 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
 const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
 const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
+const eslintFormatter = require('react-dev-utils/eslintFormatter');
 const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
 const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent');
 const getClientEnvironment = require('./env');
@@ -184,9 +185,9 @@ module.exports = {
         use: [
           {
             options: {
-              formatter: require.resolve('react-dev-utils/eslintFormatter'),
+              formatter: eslintFormatter,
               eslintPath: require.resolve('eslint'),
-              
+
             },
             loader: require.resolve('eslint-loader'),
           },
@@ -219,7 +220,7 @@ module.exports = {
               customize: require.resolve(
                 'babel-preset-react-app/webpack-overrides'
               ),
-              
+
               plugins: [
                 [
                   require.resolve('babel-plugin-named-asset-import'),
@@ -259,7 +260,7 @@ module.exports = {
               cacheDirectory: true,
               // Don't waste time on Gzipping the cache
               cacheCompression: false,
-              
+
               // If an error happens in a package, it's possible to be
               // because it was compiled. Thus, we don't want the browser
               // debugger to show the original code. Instead, the code

package.json

@@ -5,104 +5,88 @@
   "homepage": "https://poanetwork.github.io/",
   "dependencies": {
     "@babel/core": "7.1.0",
-    "@babel/preset-react": "^7.0.0",
+    "@babel/preset-react": "7.0.0",
     "@svgr/webpack": "2.4.1",
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "9.0.0",
     "babel-jest": "23.6.0",
     "babel-loader": "8.0.4",
-    "babel-plugin-named-asset-import": "^0.2.3",
-    "babel-plugin-transform-decorators-legacy": "^1.3.5",
-    "babel-preset-react-app": "^6.1.0",
+    "babel-plugin-named-asset-import": "0.2.3",
+    "babel-plugin-transform-decorators-legacy": "1.3.5",
+    "babel-preset-react-app": "6.1.0",
     "bfj": "6.1.1",
     "case-sensitive-paths-webpack-plugin": "2.1.2",
     "chalk": "2.4.1",
     "css-loader": "1.0.0",
     "dotenv": "6.0.0",
     "dotenv-expand": "4.2.0",
-    "email-validator": "^2.0.4",
-    "eslint": "5.6.0",
-    "eslint-config-prettier": "^3.3.0",
-    "eslint-config-react-app": "^3.0.5",
-    "eslint-loader": "2.1.1",
-    "eslint-plugin-dependencies": "^2.4.0",
-    "eslint-plugin-flowtype": "2.50.1",
-    "eslint-plugin-import": "2.14.0",
-    "eslint-plugin-jsx-a11y": "6.1.2",
-    "eslint-plugin-prettier": "^3.0.0",
-    "eslint-plugin-react": "7.11.1",
+    "email-validator": "2.0.4",
     "file-loader": "2.0.0",
     "fork-ts-checker-webpack-plugin-alt": "0.4.14",
     "fs-extra": "7.0.0",
-    "gh-pages": "^1.2.0",
+    "gh-pages": "1.2.0",
     "html-webpack-plugin": "4.0.0-alpha.2",
     "identity-obj-proxy": "3.0.0",
     "jest": "23.6.0",
     "jest-pnp-resolver": "1.0.1",
     "jest-resolve": "23.6.0",
     "mini-css-extract-plugin": "0.4.3",
-    "moment": "^2.22.2",
+    "moment": "2.22.2",
+    "node-sass-chokidar": "1.3.0",
+    "nodemon": "1.17.5",
+    "npm-run-all": "4.1.3",
     "optimize-css-assets-webpack-plugin": "5.0.1",
     "pnp-webpack-plugin": "1.1.0",
     "postcss-flexbugs-fixes": "4.1.0",
     "postcss-loader": "3.0.0",
     "postcss-preset-env": "6.0.6",
     "postcss-safe-parser": "4.0.1",
-    "prettier": "^1.13.7",
-    "react": "^16.6.3",
-    "react-app-polyfill": "^0.1.3",
-    "react-dev-utils": "^6.1.1",
-    "react-dom": "^16.6.3",
-    "react-places-autocomplete": "^5.4.3",
-    "react-router": "^4.3.1",
-    "react-router-dom": "^4.3.1",
-    "react-select": "^1.2.1",
+    "react": "16.6.3",
+    "react-app-polyfill": "0.1.3",
+    "react-dev-utils": "6.1.1",
+    "react-dom": "16.6.3",
+    "react-places-autocomplete": "5.4.3",
+    "react-router": "4.3.1",
+    "react-router-dom": "4.3.1",
+    "react-scripts": "2.1.3",
+    "react-select": "1.2.1",
     "resolve": "1.8.1",
     "sass-loader": "7.1.0",
     "style-loader": "0.23.0",
-    "sweetalert": "^2.1.0",
+    "sweetalert": "2.1.0",
     "terser-webpack-plugin": "1.1.0",
     "url-loader": "1.1.1",
     "web3": "1.0.0-beta.34",
     "webpack": "4.19.1",
-    "webpack-dev-server": "3.1.9",
+    "webpack-dev-server": "3.1.14",
     "webpack-manifest-plugin": "2.0.4",
     "workbox-webpack-plugin": "3.6.3"
   },
-  "scripts": {
-    "predeploy": "npm run build",
-    "deploy": "gh-pages -d build -o origin",
-    "build-css": "node-sass-chokidar src/stylesheets/application.scss -o src/stylesheets --output-style=compressed",
-    "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",
-    "eject": "react-scripts eject",
-    "lint": "./node_modules/.bin/eslint src"
+  "devDependencies": {
+    "eslint": "5.6.0",
+    "eslint-config-prettier": "3.3.0",
+    "eslint-config-react-app": "3.0.6",
+    "eslint-loader": "2.1.1",
+    "eslint-plugin-dependencies": "2.4.0",
+    "eslint-plugin-flowtype": "2.49.3",
+    "eslint-plugin-import": "2.14.0",
+    "eslint-plugin-jsx-a11y": "6.1.2",
+    "eslint-plugin-prettier": "3.0.1",
+    "eslint-plugin-react": "7.12.3",
+    "prettier": "1.15.3"
   },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "plugin:prettier/recommended"
-    ],
-    "plugins": [
-      "dependencies"
-    ],
-    "rules": {
-      "no-control-regex": 0,
-      "dependencies/no-cycles": "error",
-      "dependencies/no-unresolved": [
-        "error",
-        {
-          "ignore": [
-            "web3"
-          ]
-        }
-      ]
-    }
+  "scripts": {
+    "build": "node scripts/build.js",
+    "build-css": "node-sass-chokidar src/assets/stylesheets/index.scss -o src/assets/stylesheets/ --output-style=compressed",
+    "build-js": "react-scripts build",
+    "deploy": "gh-pages -d build -o origin",
+    "eject": "react-scripts eject",
+    "lint": "./node_modules/.bin/eslint src",
+    "predeploy": "npm run build",
+    "start": "npm-run-all -p watch-css start-js",
+    "start-js": "react-scripts start",
+    "test": "react-scripts test --env=jsdom",
+    "watch-css": "nodemon -e scss -x \"npm run build-css\""
   },
   "browserslist": [
     ">0.2%",

src/App.css

@@ -1,28 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 80px;
-}
-
-.App-header {
-  background-color: #222;
-  height: 150px;
-  padding: 20px;
-  color: white;
-}
-
-.App-title {
-  font-size: 1.5em;
-}
-
-.App-intro {
-  font-size: large;
-}
-
-@keyframes App-logo-spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
-}

src/App.js

@@ -1,16 +1,18 @@
-import React, { Component } from 'react'
-import './stylesheets/application.css'
+import Loading from './components/Loading'
 import PlacesAutocomplete, { geocodeByAddress } from 'react-places-autocomplete'
-import moment from 'moment'
-import Loading from './Loading'
-import { messages } from './messages'
-import helpers from './helpers'
-import { constants } from './constants'
+import React, { Component } from 'react'
 import emailValidator from 'email-validator'
+import helpers from './utils/helpers'
+import moment from 'moment'
+import { constants } from './utils/constants'
+import { messages } from './utils/messages'
+
+import './assets/stylesheets/index.css'
 
 class App extends Component {
   constructor(props) {
     super(props)
+
     this.checkValidation = this.checkValidation.bind(this)
     this.onClick = this.onClick.bind(this)
     this.onChangeFormField = this.onChangeFormField.bind(this)

src/App.test.js

@@ -1,8 +0,0 @@
-import React from 'react'
-import ReactDOM from 'react-dom'
-import App from './App'
-
-it('renders without crashing', () => {
-  const div = document.createElement('div')
-  ReactDOM.render(<App />, div)
-})

src/assets/images/BallotInfoContainer/info.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="10" height="18">
+    <path fill="#333" fill-rule="evenodd" d="M9 18H1a1 1 0 0 1 0-2h3V6H1a1 1 0 0 1 0-2h4a1 1 0 0 1 1 1v11h3a1 1 0 0 1 0 2zM5 2H4a1 1 0 0 1 0-2h1a1 1 0 0 1 0 2z"/>
+</svg>

src/assets/images/BallotInfoContainer/min.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18">
+    <path fill="#333" fill-rule="evenodd" d="M17 18h-6a1 1 0 0 1-1-1v-6a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1zm-1-6h-4v4h4v-4zm1-4h-6a1 1 0 0 1-1-1V1a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1zm-1-6h-4v4h4V2zM7 18H1a1 1 0 0 1-1-1v-6a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1zm-1-6H2v4h4v-4zm.728-8.514l-.118.118-.127.128h-.001l-.881.882-.78.779c-.023.03-.034.066-.062.093l-.805.805a.86.86 0 0 1-.222.441c-.2.2-.471.269-.732.237a.869.869 0 0 1-.732-.237.86.86 0 0 1-.222-.441l-.56-.559-.127-.128-.118-.118-1-1a.88.88 0 1 1 1.245-1.245l1.246 1.245.268.268.175-.175c.023-.03.034-.065.062-.093l1.246-1.245.754-.755 1.246-1.245a.88.88 0 1 1 1.245 1.245l-1 1z"/>
+</svg>

src/assets/images/NewBallotMenuInfo/icon.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="10" height="18">
+    <path fill="#333" fill-rule="evenodd" d="M9 18H1a1 1 0 0 1 0-2h3V6H1a1 1 0 0 1 0-2h4a1 1 0 0 1 1 1v11h3a1 1 0 0 1 0 2zM5 2H4a1 1 0 0 1 0-2h1a1 1 0 0 1 0 2z"/>
+</svg>

src/assets/images/SearchBar/dai.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14">
+    <path fill="#333333" 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/assets/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/assets/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/assets/stylesheets/GUIDELINES.md

@@ -0,0 +1,43 @@
+#ECSS (Enduring CSS) will be used
+
+http://ecss.io/
+
+##ECSS naming convention
+
+.namespace-ModuleOrComponent_ChildNode-variant {}
+
+- namespace: This is a required part of every selector. The micro-namespace should be all lowercase/train-case. It is typically an abbreviation to denote context or originating logic.
+
+- ModuleOrComponent: This is a upper camel case/pascal case. It should always be preceded by a hyphen character (-).
+
+- ChildNode: This is an optional section of the selector. It should be upper camel case/pascal case and preceded by an underscore (_).
+
+- variant: This is a further optional section of the selector. It should be written all lowercase/train-case.
+
+For example:
+
+.hm-Item_Header {}
+.hm-Item_Header-bg1 {} /* Image background 1 */
+
+##ECSS component states
+
+.is-Suspended {}
+.is-Live {}
+.is-Selected {}
+.is-Busy {}
+
+etc.
+
+#CSS Overrides
+
+Should be self contained.
+
+For example:
+
+.ip-Carousel {
+    font-size: $text13;
+    /* The override is here for when this key-selector sits within a ip-HomeCallouts element */
+    .ip-HomeCallouts & {
+        font-size: $text15;
+    }
+}

src/assets/stylesheets/base/README.md

@@ -0,0 +1 @@
+Holds what we might call the boilerplate stuff for the project: reset (or Normalize.css, or whatever), typography, etc.

src/assets/stylesheets/base/_display.scss

@@ -0,0 +1,11 @@
+.hidden {
+    display: none;
+}
+
+.display-block {
+    display: block;
+}
+
+.display-inline {
+    display: inline;
+}

src/assets/stylesheets/base/_index.scss

@@ -0,0 +1,7 @@
+@import 'reset';
+@import 'normalize';
+
+@import 'display';
+@import 'effects';
+@import 'forms';
+@import 'typography';

src/assets/stylesheets/base/_normalize.scss

@@ -0,0 +1,341 @@
+/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+html {
+  line-height: 1.15; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+   ========================================================================== */
+
+/**
+ * Remove the margin in all browsers.
+ */
+
+body {
+  margin: 0;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+
+a {
+  background-color: transparent;
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+  border-bottom: none; /* 1 */
+  text-decoration: underline; /* 2 */
+  text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove the border on images inside links in IE 10.
+ */
+
+img {
+  border-style: none;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input { /* 1 */
+  overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select { /* 1 */
+  text-transform: none;
+}
+
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+ * Correct the padding in Firefox.
+ */
+
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+
+legend {
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+  vertical-align: baseline;
+}
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/* Interactive
+   ========================================================================== */
+
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+
+details {
+  display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+  display: list-item;
+}
+
+/* Misc
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 10+.
+ */
+
+template {
+  display: none;
+}
+
+/**
+ * Add the correct display in IE 10.
+ */
+
+[hidden] {
+  display: none;
+}

src/assets/stylesheets/base/_reset.scss

@@ -0,0 +1,3 @@
+* {
+    box-sizing: border-box;
+}

src/assets/stylesheets/base/_typography.scss

@@ -0,0 +1,8 @@
+@import url('https://fonts.googleapis.com/css?family=Nunito:300,400,600,700');
+
+body {
+    -webkit-font-smoothing: antialiased;
+    color: $base-text-color;
+    font-family: "Nunito", sans-serif;
+    font-size: $base-font-size;
+}

src/assets/stylesheets/components/README.md

@@ -0,0 +1 @@
+All kinds of specific modules like a slider, a loader, a widget, etc.

src/assets/stylesheets/components/_App.scss

@@ -0,0 +1,56 @@
+.lo-App {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    padding-top: $header-height + $search-container-height;
+    width: 100%;
+
+    &#{ & }-no-search-bar {
+        padding-top: $header-height;
+    }
+}
+
+.lo-App_Content {
+    flex-grow: 1;
+    max-width: 100%;
+    padding-bottom: 30px;
+    position: relative;
+    z-index: 1;
+
+    &:before {
+        background-color: rgba($poa-purple, 0.5);
+        bottom: 0;
+        content: '';
+        display: none;
+        left: 0;
+        position: fixed;
+        right: 0;
+        top: 0;
+        z-index: 1234;
+    }
+
+    &#{ & }-mobile-menu-open {
+        &:before {
+            display: block;
+        }
+    }
+
+    &#{ & }-core {
+        &:before {
+            background-color: rgba($poa-purple, 0.5);
+        }
+    }
+
+    &#{ & }-sokol {
+        &:before {
+            background-color: rgba($sokol-cyan, 0.5);
+        }
+    }
+
+    &#{ & }-dai {
+        &:before {
+            background-color: rgba($xdai-orange, 0.5);
+        }
+    }
+}

src/assets/stylesheets/components/_BallotAbout.scss

@@ -0,0 +1,3 @@
+.sw-BallotAbout {
+    margin-top: -8px;
+}

src/assets/stylesheets/components/_BallotCard.scss

@@ -0,0 +1,38 @@
+.sw-BallotCard {
+    background-color: #fff;
+    border-radius: 6px;
+    border: 1px solid $base-border-color;
+    margin-bottom: 30px;
+    padding: $desktop-indent;
+    transition: 0.15s box-shadow;
+    @media screen and (max-width: $breakpoint-md) {
+        margin-bottom: $tablet-indent;
+        padding: $tablet-indent;
+    }
+}
+
+///////////////////////////
+///////////////////////////
+///////////////////////////
+///////////////////////////
+///////////////////////////
+.color-primary {
+    color: $poa-purple;
+    .sokol & {
+        color: $sokol-cyan;
+    }
+}
+
+.color-danger {
+    color: $poa-danger-color;
+    .sokol & {
+        color: $sokol-danger-color;
+    }
+}
+
+.color-success {
+    color: $poa-green-color;
+    .sokol & {
+        color: $sokol-cyan;
+    }
+}

src/assets/stylesheets/components/_BallotDataPair.scss

@@ -0,0 +1,91 @@
+$cell-right-padding: 12px;
+
+.blc-BallotDataPair {
+    box-sizing: border-box;
+    display: table-row;
+    min-width: 100%;
+    padding-right: 0;
+    position: relative;
+    vertical-align: top;
+
+    @media (min-width: $breakpoint-md) {
+        display: inline-block;
+        min-width: 0;
+        padding-right: $cell-right-padding;
+    }
+
+    &:last-child {
+        padding-right: 0;
+    }
+
+    &#{ & }-name {
+        width: 12%;
+        word-break: break-word;
+    }
+    &#{ & }-action {
+        width: 8%;
+    }
+    &#{ & }-type {
+        width: 8%;
+    }
+    &#{ & }-proposal {
+        width: 30%;
+    }
+    &#{ & }-key {
+        width: 26%;
+        word-break: break-all;
+    }
+    &#{ & }-key-wide {
+        width: 50%;
+        word-break: break-all;
+    }
+    &#{ & }-proposed-receiver {
+        width: 45%;
+        word-break: break-all;
+    }
+    &#{ & }-funds-amount {
+        width: 23%;
+        word-break: break-all;
+    }
+    &#{ & }-proposed-min-threshold {
+        width: 30%;
+        word-break: break-all;
+    }
+    &#{ & }-contract-type {
+        width: 25%;
+        word-break: break-all;
+    }
+    &#{ & }-proposed-address {
+        width: 30%;
+        word-break: break-all;
+    }
+    &#{ & }-time {
+        width: 20%;
+    }
+}
+
+.blc-BallotDataPair_Title {
+    color: #777;
+    font-size: 13px;
+    font-weight: 400;
+    line-height: 28px;
+    margin: 0;
+    text-align: left;
+}
+
+.blc-BallotDataPair_Value {
+    color: #333;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 28px;
+    margin: 0;
+    text-align: left;
+
+    &#{ & }-action {
+        text-transform: capitalize;
+    }
+
+    &#{ & }-type {
+        text-transform: capitalize;
+    }
+}

src/assets/stylesheets/components/_BallotEmissionFundsMetadata.scss

@@ -0,0 +1,15 @@
+.frm-BallotEmissionFundsMetadata {
+    margin-bottom: $base-grid-gap;
+}
+
+.frm-BallotEmissionFundsMetadata_Row {
+    @include form-row-base-styles();
+    display: grid;
+    grid-row-gap: $base-grid-gap;
+    grid-template-columns: 1fr;
+
+    @media (min-width: $breakpoint-xxl) {
+        grid-column-gap: $base-grid-gap;
+        grid-template-columns: 1fr 1fr;
+    }
+}

src/assets/stylesheets/components/_BallotFooter.scss

@@ -0,0 +1,53 @@
+.bc-BallotFooter {
+    display: flex;
+    flex-direction: column;
+
+    @media (min-width: $breakpoint-md) {
+        align-items: center;
+        flex-direction: row;
+    }
+
+}
+
+.bc-BallotFooter_Description {
+    color: #777;
+    font-size: 14px;
+    font-stretch: normal;
+    font-style: normal;
+    font-weight: normal;
+    line-height: 18px;
+    max-width: 340px;
+
+    @media (min-width: $breakpoint-md) {
+        padding-left: 15px;
+    }
+}
+
+.bc-BallotFooter_Voted {
+    box-sizing: border-box;
+    color: #333;
+    display: inline-block;
+    font-size: 14px;
+    font-weight: 700;
+    line-height: 1.2;
+    margin-left: auto;
+    padding: 0 13px;
+    text-transform: uppercase;
+}
+
+.bc-BallotFooter_ID {
+    color: #333;
+    font-size: 14px;
+    font-weight: normal;
+    line-height: 1.1;
+    margin-top: 10px;
+
+    @media (min-width: $breakpoint-md) {
+        margin-left: auto;
+        margin-top: 0;
+    }
+}
+
+.bc-BallotFooter_voteID {
+    font-weight: 700;
+}

src/assets/stylesheets/components/_BallotInfoContainer.scss

@@ -0,0 +1,73 @@
+.bc-BallotInfoContainer {
+    background-color: #f8f8f8;
+    margin-bottom: 30px;
+    margin-left: -#{ $desktop-indent };
+    margin-right: -#{ $desktop-indent };
+    padding-bottom: #{ $desktop-indent };
+    padding-left: #{ $desktop-indent };
+    padding-right: #{ $desktop-indent };
+    padding-top: #{ $desktop-indent };
+
+    @media screen and (max-width: $breakpoint-md) {
+        margin-left: -#{ $tablet-indent };
+        margin-right: -#{ $tablet-indent };
+        padding-left: #{ $tablet-indent };
+        padding-right: #{ $tablet-indent };
+    }
+}
+
+.bc-BallotInfoContainer_Info {
+    background-position: 0 2px;
+    background-repeat: no-repeat;
+    color: #333333;
+    font-size: 14px;
+    font-weight: normal;
+    letter-spacing: normal;
+    line-height: 1.71;
+    margin-bottom: 20px;
+    max-width: 100%;
+    min-height: 32px;
+    padding-left: 30px;
+    text-align: left;
+    word-break: break-word;
+
+    &:last-child {
+        margin-bottom: 0;
+    }
+
+    &#{ & }-minimum {
+        background-image: url('#{ $base-images-path }/BallotInfoContainer/min.svg');
+        background-size: 18px 18px;
+    }
+
+    &#{ & }-details {
+        background-image: url('#{ $base-images-path }/BallotInfoContainer/info.svg');
+        background-size: 10px 18px;
+        position: relative;
+    }
+
+    &#{ & }-collapsed {
+        height: 90px;
+        overflow: hidden;
+    }
+}
+
+.bc-BallotInfoContainer_ToggleShow {
+    color: $poa-purple;
+    cursor: pointer;
+    display: inline-block;
+    margin-left: 5px;
+
+    &#{ & }-core {
+        color: $poa-purple;
+    }
+
+    &#{ & }-sokol {
+        color: $sokol-cyan;
+    }
+
+    &#{ & }-dai {
+        color: $xdai-orange;
+    }
+
+}

src/assets/stylesheets/components/_BallotKeysMetadata.scss

@@ -0,0 +1,15 @@
+.frm-BallotKeysMetadata {
+    margin-bottom: $base-grid-gap;
+}
+
+.frm-BallotKeysMetadata_Row {
+    @include form-row-base-styles();
+    display: grid;
+    grid-row-gap: $base-grid-gap;
+    grid-template-columns: 1fr;
+
+    @media (min-width: $breakpoint-xxl) {
+        grid-column-gap: $base-grid-gap;
+        grid-template-columns: 1fr 1fr;
+    }
+}

src/assets/stylesheets/components/_BallotMinThresholdMetadata.scss

@@ -0,0 +1,15 @@
+.frm-BallotMinThresholdMetadata {
+    margin-bottom: $base-grid-gap;
+}
+
+.frm-BallotMinThresholdMetadata_Row {
+    @include form-row-base-styles();
+    display: grid;
+    grid-row-gap: $base-grid-gap;
+    grid-template-columns: 1fr;
+
+    @media (min-width: $breakpoint-xxl) {
+        grid-column-gap: $base-grid-gap;
+        grid-template-columns: 1fr 1fr;
+    }
+}

src/assets/stylesheets/components/_BallotProxyMetadata.scss

@@ -0,0 +1,15 @@
+.frm-BallotProxyMetadata {
+    margin-bottom: $base-grid-gap;
+}
+
+.frm-BallotProxyMetadata_Row {
+    @include form-row-base-styles();
+    display: grid;
+    grid-row-gap: $base-grid-gap;
+    grid-template-columns: 1fr;
+
+    @media (min-width: $breakpoint-xxl) {
+        grid-column-gap: $base-grid-gap;
+        grid-template-columns: 1fr 1fr;
+    }
+}

src/assets/stylesheets/components/_Ballots.scss

@@ -0,0 +1,3 @@
+.sw-Ballots {
+    @include content-layout-width();
+}

src/assets/stylesheets/components/_BaseLoader.scss

@@ -0,0 +1,13 @@
+.ld-BaseLoader {
+    align-items: center;
+    background-color: rgba(#fff, 0.8);
+    bottom: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    left: 0;
+    position: fixed;
+    right: 0;
+    top: 0;
+    z-index: 1000000;
+}

src/assets/stylesheets/components/_ButtonAddBallot.scss

@@ -0,0 +1,47 @@
+$sw-ButtonAddBallot-height: 44px;
+
+.sw-ButtonAddBallot {
+    align-items: center;
+    border: none;
+    border-radius: 3px;
+    color: #fff;
+    cursor: pointer;
+    display: flex;
+    font-size: 14px;
+    font-weight: 700;
+    height: $sw-ButtonAddBallot-height;
+    justify-content: space-between;
+    line-height: $sw-ButtonAddBallot-height;
+    opacity: 1;
+    outline: none;
+    padding: 0 15px;
+    text-decoration: none;
+    transition: 0.15s background-color;
+
+    &#{ & }-core {
+        background-color: $poa-purple;
+        color: #fff;
+
+        &:hover {
+            background-color: darken($poa-purple, 10%);
+        }
+    }
+
+    &#{ & }-sokol {
+        background-color: $sokol-cyan;
+        color: #fff;
+
+        &:hover {
+            background-color: darken($sokol-cyan, 5%);
+        }
+    }
+
+    &#{ & }-dai {
+        background-color: $xdai-orange;
+        color: #fff;
+
+        &:hover {
+            background-color: lighten($xdai-orange, 5%);
+        }
+    }
+}

src/assets/stylesheets/components/_ButtonFinalize.scss

@@ -0,0 +1,79 @@
+.sw-ButtonFinalize {
+    align-items: center;
+    border-radius: 5px;
+    border: 0;
+    color: #fff;
+    cursor: pointer;
+    display: flex;
+    font-size: 14px;
+    font-weight: 700;
+    height: 42px;
+    justify-content: space-between;
+    line-height: 42px;
+    outline: none;
+    padding: 0 15px;
+    text-decoration: none;
+    text-transform: capitalize;
+    transition: 0.15s background-color;
+
+    &#{ & }-core {
+        background-color: $poa-purple;
+
+        &:active,
+        &:hover {
+            background-color: darken($poa-purple, 10%);
+        }
+    }
+
+    &#{ & }-sokol {
+        background-color: $sokol-cyan;
+
+        &:active,
+        &:hover {
+            background-color: darken($sokol-cyan, 10%);
+        }
+    }
+
+    &#{ & }-dai {
+        background-color: $xdai-orange;
+
+        &:active,
+        &:hover {
+            background-color: darken($xdai-orange, 10%);
+        }
+    }
+
+    &#{ & }-cancel {
+        &,
+        &:active,
+        &:hover {
+            background-color: #f21b57 !important;
+        }
+    }
+
+    &#{ & }-disabled {
+        &,
+        &:active,
+        &:hover {
+            cursor: default;
+            background-color: #f0f0f0 !important;
+            color: #333;
+        }
+    }
+
+    .bc-BallotFooter & {
+        margin-top: 30px;
+        order: 3;
+        width: 100%;
+
+        @media (min-width: $breakpoint-md) {
+            margin-top: 0;
+            order: 0;
+            width: auto;
+        }
+    }
+}
+
+.sw-ButtonFinalize_Text {
+    margin-right: 50px;
+}

src/assets/stylesheets/components/_ButtonLoadMore.scss

@@ -0,0 +1,55 @@
+.sw-ButtonLoadMore {
+    align-items: center;
+    background-color: transparent;
+    background-size: 14px 14px;
+    border-radius: 5px;
+    border: 2px solid $poa-purple;
+    color: $poa-purple;
+    cursor: pointer;
+    display: flex;
+    font-size: 16px;
+    font-weight: 400;
+    height: 42px;
+    justify-content: center;
+    outline: none;
+    padding: 0 15px;
+    text-decoration: none;
+    width: 100%;
+
+    &#{ & }-core {
+        border-color: $poa-purple;
+    }
+
+    &#{ & }-sokol {
+        border-color: $sokol-cyan;
+    }
+
+    &#{ & }-dai {
+        border-color: $xdai-gray;
+    }
+
+    @media (min-width: $breakpoint-md) {
+        width: auto;
+    }
+
+}
+
+.sw-ButtonLoadMore_Text {
+    margin-right: 15px;
+
+    .sw-ButtonLoadMore:hover & {
+        opacity: 0.7;
+    }
+
+    .sw-ButtonLoadMore-core & {
+        color: $poa-purple;
+    }
+
+    .sw-ButtonLoadMore-sokol & {
+        color: $sokol-cyan;
+    }
+
+    .sw-ButtonLoadMore-dai & {
+        color: $xdai-gray;
+    }
+}

src/assets/stylesheets/components/_ButtonNewBallot.scss

@@ -0,0 +1,62 @@
+$sw-ButtonNewBallot-height: 36px;
+
+.sw-ButtonNewBallot {
+    align-items: center;
+    border-radius: 3px;
+    color: #fff;
+    cursor: pointer;
+    display: flex;
+    font-size: 14px;
+    font-weight: 700;
+    height: $sw-ButtonNewBallot-height;
+    line-height: $sw-ButtonNewBallot-height;
+    opacity: 1;
+    outline: none;
+    padding: 0 15px;
+    text-decoration: none;
+    transition: 0.15s background-color;
+
+    &#{ & }-core {
+        background-color: $poa-green-color;
+        box-shadow: 0 5px 10px 0 rgba($poa-purple, 0.3);
+        color: #fff;
+
+        &:active,
+        &:hover {
+            background-color: darken($poa-green-color, 10%);
+        }
+    }
+
+    &#{ & }-sokol {
+        background-color: #fff;
+        box-shadow: 0 5px 10px 0 rgba($sokol-cyan, 0.3);
+        color: $sokol-cyan;
+
+        &:active,
+        &:hover {
+            background-color: darken(#fff, 5%);
+        }
+    }
+
+    &#{ & }-dai {
+        background-color: $xdai-menu-icon-color;
+        box-shadow: 0 5px 10px 0 rgba($xdai-menu-icon-color, 0.3);
+        color: #fff;
+
+        &:active,
+        &:hover {
+            background-color: lighten($xdai-menu-icon-color, 5%);
+        }
+    }
+
+    .sw-Header_Links & {
+        margin-left: 40px;
+    }
+
+    .hd-MobileMenuLinks & {
+        box-shadow: none;
+        height: 50px;
+        justify-content: center;
+        margin: 0;
+    }
+}

src/assets/stylesheets/components/_ButtonVoting.scss

@@ -0,0 +1,121 @@
+.vt-ButtonVoting {
+    border-radius: 5px;
+    border: 0;
+    box-sizing: border-box;
+    color: #fff;
+    cursor: pointer;
+    display: inline-block;
+    font-size: 14px;
+    font-weight: 700;
+    line-height: 42px;
+    margin-right: 20px;
+    min-width: 55px;
+    outline: none;
+    padding: 0 15px;
+    text-decoration: none;
+    text-transform: capitalize;
+    transition: 0.15s background-color linear;
+
+    &#{ & }-sm {
+        min-width: 55px;
+    }
+
+    &#{ & }-md {
+        min-width: 78px;
+    }
+
+    @media (min-width: $breakpoint-xl) {
+        &#{ & }-left {
+            margin-left: 0;
+            margin-right: 20px;
+        }
+
+        &#{ & }-right {
+            margin-left: 20px;
+            margin-right: 0;
+            order: 2;
+        }
+    }
+
+    &#{ & }-negative#{ & }-core {
+        background-color: $voting-negative-poa;
+        box-shadow: 0 5px 10px 0 rgba($voting-negative-poa, 0.3);
+
+        &:hover {
+            background-color: darken($voting-negative-poa, 10%);
+        }
+    }
+
+    &#{ & }-neutral#{ & }-core {
+        background-color: $voting-neutral-poa;
+        box-shadow: 0 5px 10px 0 rgba($voting-neutral-poa, 0.3);
+
+        &:hover {
+            background-color: darken($voting-neutral-poa, 10%);
+        }
+    }
+
+    &#{ & }-positive#{ & }-core {
+        background-color: $voting-positive-poa;
+        box-shadow: 0 5px 10px 0 rgba($voting-positive-poa, 0.3);
+
+        &:hover {
+            background-color: darken($voting-positive-poa, 10%);
+        }
+    }
+
+    &#{ & }-negative#{ & }-sokol {
+        background-color: $voting-negative-sokol;
+        box-shadow: 0 5px 10px 0 rgba($voting-negative-sokol, 0.3);
+
+        &:hover {
+            background-color: darken($voting-negative-sokol, 10%);
+        }
+    }
+
+    &#{ & }-neutral#{ & }-sokol {
+        background-color: $voting-neutral-sokol;
+        box-shadow: 0 5px 10px 0 rgba($voting-neutral-sokol, 0.3);
+
+        &:hover {
+            background-color: darken($voting-neutral-sokol, 10%);
+        }
+    }
+
+    &#{ & }-positive#{ & }-sokol {
+        background-color: $voting-positive-sokol;
+        box-shadow: 0 5px 10px 0 rgba($voting-positive-sokol, 0.3);
+
+        &:hover {
+            background-color: darken($voting-positive-sokol, 10%);
+        }
+    }
+
+    &#{ & }-negative#{ & }-dai {
+        background-color: $voting-negative-dai;
+        box-shadow: 0 5px 10px 0 rgba($voting-negative-dai, 0.3);
+
+        &:hover {
+            background-color: darken($voting-negative-dai, 10%);
+        }
+    }
+
+    &#{ & }-neutral#{ & }-dai {
+        background-color: $voting-neutral-dai;
+        box-shadow: 0 5px 10px 0 rgba($voting-neutral-dai, 0.3);
+
+        &:hover {
+            background-color: darken($voting-neutral-dai, 10%);
+        }
+    }
+
+    &#{ & }-positive#{ & }-dai {
+        background-color: $voting-positive-dai;
+        box-shadow: 0 5px 10px 0 rgba($voting-positive-dai, 0.3);
+
+        &:hover {
+            background-color: darken($voting-positive-dai, 10%);
+        }
+    }
+
+}

src/assets/stylesheets/components/_Footer.scss

@@ -0,0 +1,57 @@
+.sw-Footer {
+    align-items: center;
+    background-color: $poa-purple;
+    color: #fff;
+    display: flex;
+    flex-shrink: 0;
+    justify-content: center;
+    min-height: 60px;
+    overflow: hidden;
+    padding: 16px 0;
+    transition: background-color 0.25s ease-out;
+    width: 100%;
+
+    &#{ & }-core {
+        background-color: $poa-purple;
+    }
+
+    &#{ & }-sokol {
+        background-color: $sokol-cyan;
+    }
+
+    &#{ & }-dai {
+        background-color: $xdai-gray;
+    }
+}
+
+.sw-Footer_Content {
+    @include content-layout-width();
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+
+    @media (min-width: $breakpoint-md) {
+        flex-direction: row;
+        justify-content: space-between;
+    }
+}
+
+.sw-Footer_Text {
+    color: #fff;
+    flex-grow: 1;
+    font-size: 11px;
+    font-weight: 300;
+    line-height: 1.2;
+    margin: 0;
+    padding: 15px 0 0 0;
+    text-align: center;
+
+    @media (min-width: $breakpoint-md) {
+        padding-top: 0;
+    }
+
+    .sw-Footer-dai & {
+        color: #333;
+    }
+}

src/assets/stylesheets/components/_FormAutocomplete.scss

@@ -0,0 +1,6 @@
+input[type="text"] {
+    .frm-FormAutocomplete & {
+        @include form-element-base-style();
+        height: $input-height;
+    }
+}

src/assets/stylesheets/components/_FormFieldTitle.scss

@@ -0,0 +1,7 @@
+.frm-FormFieldTitle {
+    color: $gray-text-color;
+    display: inline-block;
+    font-size: 14px;
+    line-height: 1.2;
+    margin-bottom: 15px;
+}

src/assets/stylesheets/components/_FormHint.scss

@@ -0,0 +1,28 @@
+.frm-FormHint {
+    color: #777;
+    font-size: 13px;
+    font-weight: 400;
+    line-height: 1.38;
+    margin: 0;
+    padding-top: 12px;
+    word-break: break-all;  // hack for FF, leave it as it is
+    word-break: break-word;
+
+    &#{ & }-core {
+        a {
+            color: $poa-purple;
+        }
+    }
+
+    &#{ & }-sokol {
+        a {
+            color: $sokol-cyan;
+        }
+    }
+
+    &#{ & }-dai {
+        a {
+            color: $xdai-orange;
+        }
+    }
+}

src/assets/stylesheets/components/_FormInput.scss

@@ -0,0 +1,4 @@
+.frm-FormInput_Field {
+    @include form-element-base-style();
+    height: $input-height;
+}

src/assets/stylesheets/components/_FormSelect.scss

@@ -0,0 +1,12 @@
+.frm-FormSelect_Select {
+    select {
+        @include form-element-base-style();
+        @include image-2x('#{ $base-images-path }/Base/select@2x.png', 8px, 4px);
+        appearance: none;
+        background-image: url('#{ $base-images-path }/Base/select.png');
+        background-position: right 13px center;
+        background-repeat: no-repeat;
+        height: $input-height;
+        padding-right: 30px;
+    }
+}

src/assets/stylesheets/components/_FormTextarea.scss

@@ -0,0 +1,8 @@
+.frm-FormTextarea_Field {
+    @include form-element-base-style();
+    height: 70px;
+    padding-bottom: 10px;
+    padding-top: 10px;
+    resize: none;
+    width: 100%;
+}

src/assets/stylesheets/components/_Header.scss

@@ -0,0 +1,57 @@
+.sw-Header {
+    align-items: center;
+    background-color: $poa-purple;
+    color: #fff;
+    display: flex;
+    flex-shrink: 0;
+    height: $header-height;
+    justify-content: center;
+    left: 0;
+    overflow: hidden;
+    position: fixed;
+    right: 0;
+    top: 0;
+    transition: background-color 0.25s ease-out;
+    width: 100%;
+    z-index: 124;
+
+    &#{ & }-menu-open {
+        flex-direction: column;
+        height: auto;
+    }
+
+    &#{ & }-core {
+        background-color: $poa-purple;
+    }
+
+    &#{ & }-sokol {
+        background-color: $sokol-cyan;
+    }
+
+    &#{ & }-dai {
+        background-color: $xdai-gray;
+    }
+
+}
+
+.sw-Header_Content {
+    @include content-layout-width();
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    min-height: $header-height;
+}
+
+.sw-Header_Links {
+    align-items: center;
+    display: none;
+    height: $header-links-container-height;
+    justify-content: flex-end;
+    margin-left: auto;
+    width: auto;
+
+    @media (min-width: $breakpoint-md) {
+        display: flex;
+    }
+}

src/assets/stylesheets/components/_IconActive.scss

@@ -0,0 +1,3 @@
+.nl-IconActive_Path {
+    @include menu-icon-colors();
+}

src/assets/stylesheets/components/_IconAdd.scss

@@ -0,0 +1,33 @@
+@mixin path-colors($parent-class: '', $fill-core: #fff, $fill-sokol: #fff, $fill-dai: #fff) {
+
+    #{ $parent-class } &#{ & }-core {
+        fill: $fill-core;
+    }
+
+    #{ $parent-class } &#{ & }-sokol {
+        fill: $fill-sokol;
+    }
+
+    #{ $parent-class } &#{ & }-dai {
+        fill: $fill-dai;
+    }
+
+}
+
+.sw-IconAdd {
+    .sw-ButtonNewBallot & {
+        margin-left: 10px;
+    }
+
+    .sw-ButtonAddBallot & {
+        margin-left: 10px;
+    }
+}
+
+.sw-IconAdd_Path {
+
+    @include path-colors('.sw-ButtonNewBallot', #fff, $sokol-cyan, #fff);
+
+    @include path-colors('.sw-ButtonAddBallot');
+
+}

src/assets/stylesheets/components/_IconAll.scss

@@ -0,0 +1,3 @@
+.nl-IconAll_Path {
+    @include menu-icon-colors();
+}