[feat] Header restyling - Base styles - Main title.

src/index.js

@@ -1,63 +1,76 @@
-import React, {Component} from 'react';
-import ReactDOM from 'react-dom';
-import App from './App';
-import registerServiceWorker from './registerServiceWorker';
-import KeysManager from './contracts/KeysManager.contract'
-import Metadata from './contracts/Metadata.contract'
-import getWeb3, {setWeb3} from './getWeb3'
-import helpers from './helpers'
-import {
-  Router,
-  Route,
-  NavLink
-} from 'react-router-dom'
-import createBrowserHistory from 'history/createBrowserHistory'
-import Loading from './Loading'
-import Footer from './Footer';
-import AllValidators from './AllValidators'
-import Select from 'react-select'
 import "react-select/dist/react-select.css";
+import AllValidators from './AllValidators'
+import App from './App';
+import Footer from './Footer';
+import KeysManager from './contracts/KeysManager.contract'
+import Loading from './Loading'
+import Metadata from './contracts/Metadata.contract'
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+import Select from 'react-select'
+import createBrowserHistory from 'history/createBrowserHistory'
+import getWeb3, { setWeb3 } from './getWeb3'
+import helpers from './helpers'
 import networkAddresses from './contracts/addresses';
+import registerServiceWorker from './registerServiceWorker';
+import { Router, Route, NavLink } from 'react-router-dom'
+import logoBase from './images/logos/logo_validators_dapp@2x.png'
+import logoSokol from './images/logos/logo_sokol@2x.png'
 
-let errorMsgNoMetamaskAccount = `Your MetaMask is locked.
+const errorMsgNoMetamaskAccount = `Your MetaMask is locked.
 Please choose your voting key in MetaMask and reload the page.
 Check POA Network <a href='https://github.com/poanetwork/wiki' target='blank'>wiki</a> for more info.`;
 
 const history = createBrowserHistory()
+const baseRootPath = '/poa-dapps-validators';
+const sectionsTitles = ['All', 'Set Metadata', 'Pending Changes'];
+
+let Header = ({ netId, onChange, injectedWeb3 }) => {
+
+  const headerClassName = netId === '77' ? 'sokol' : '';
+  const logoImageName = netId === '77' ? logoSokol : logoBase;
 
-let Header = ({netId, onChange, injectedWeb3}) => {
   let select;
-  let headerClassName = netId === '77' ? 'sokol' : '';
-  const logoClassName = netId === '77' ? 'header-logo-sokol' : 'header-logo';
-  if(!injectedWeb3) {
+
+  if (!injectedWeb3) {
     select = <Select id="netId"
-        value={netId}
-        onChange={onChange}
-        style={{
-          width: '150px',
-        }}
-        wrapperStyle={{
-          width: '150px',
-        }}
-        clearable={false}
-        options={[
-          { value: '77', label: 'Network: Sokol' },
-          { value: '99', label: 'Network: Core' },
-        ]} />
+      value={netId}
+      onChange={onChange}
+      style={{
+        width: '150px',
+      }}
+      wrapperStyle={{
+        width: '150px',
+      }}
+      clearable={false}
+      options={[
+        { value: '77', label: 'Network: Sokol' },
+        { value: '99', label: 'Network: Core' },
+      ]} />
   }
   return (
     <header id="header" className={`header ${headerClassName}`}>
       <div className="container">
-          <a href="/poa-dapps-validators" className={logoClassName}></a>
-          {select}
+        <a href={baseRootPath} className="header-logo-a">
+          <img className="header-logo" src={logoImageName} alt="" />
+        </a>
+        <div className="links-container">
+          <NavLink className="link" exact activeClassName="nav-i_active" to={`${baseRootPath}/`}>{sectionsTitles[0]}</NavLink>
+          <NavLink className="link" activeClassName="nav-i_active" to={`${baseRootPath}/set`}>{sectionsTitles[1]}</NavLink>
+          <NavLink className="link" activeClassName="nav-i_active" to={`${baseRootPath}/pending-changes`}>{sectionsTitles[2]}</NavLink>
+        </div>
+        {select}
       </div>
     </header>
   )
 }
+
 class AppMainRouter extends Component {
-  constructor(props){
+  constructor(props) {
+
     super(props);
-    this.rootPath = '/poa-dapps-validators'
+
+    this.rootPath = baseRootPath;
     history.listen(this.onRouteChange.bind(this));
     this.onSetRender = this.onSetRender.bind(this);
     this.onPendingChangesRender = this.onPendingChangesRender.bind(this);
@@ -76,12 +89,13 @@ class AppMainRouter extends Component {
       searchTerm: '',
       injectedWeb3: true,
       netId: '',
-      error: false
+      error: false,
+      title: sectionsTitles[0]
     }
     getWeb3().then(async (web3Config) => {
       return networkAddresses(web3Config)
     }).then(async (config) => {
-      const {web3Config, addresses} = config;
+      const { web3Config, addresses } = config;
       const keysManager = new KeysManager()
       await keysManager.init({
         web3: web3Config.web3Instance,
@@ -104,23 +118,38 @@ class AppMainRouter extends Component {
       })
     }).catch((error) => {
       console.error(error.message);
-      this.setState({loading: false, error: true});
+      this.setState({ loading: false, error: true });
       helpers.generateAlert("error", "Error!", error.message);
     })
   }
-  onRouteChange(){
+  onRouteChange() {
+
     const setMetadata = this.rootPath + "/set";
-    if(history.location.pathname === setMetadata){
-      this.setState({showSearch: false})
-      if(this.state.injectedWeb3 === false){
+    this.setTitle()
+
+    if (history.location.pathname === setMetadata) {
+      this.setState({ showSearch: false })
+      if (this.state.injectedWeb3 === false) {
         helpers.generateAlert("warning", "Warning!", 'Metamask was not found');
       }
     } else {
-      this.setState({showSearch: true})
+      this.setState({ showSearch: true })
+    }
+
+  }
+  setTitle() {
+    if (history.location.pathname.includes('/set')) {
+      this.state.title = sectionsTitles[1];
+    }
+    else if (history.location.pathname.includes('/pending-changes')) {
+      this.state.title = sectionsTitles[2];
+    }
+    else {
+      this.state.title = sectionsTitles[0];
     }
   }
-  checkForVotingKey(cb){
-    if(this.state.votingKey && !this.state.loading){
+  checkForVotingKey(cb) {
+    if (this.state.votingKey && !this.state.loading) {
       return cb();
     } else {
       helpers.generateAlert("warning", "Warning!", errorMsgNoMetamaskAccount);
@@ -132,24 +161,24 @@ class AppMainRouter extends Component {
       return '';
     }
     return this.checkForVotingKey(() => {
-      return <App web3Config={this.state}/>
+      return <App web3Config={this.state} />
     });
   }
-  async _onBtnClick({event, methodToCall, successMsg}){
+  async _onBtnClick({ event, methodToCall, successMsg }) {
     event.preventDefault();
     this.checkForVotingKey(async () => {
-      this.setState({loading: true})
+      this.setState({ loading: true })
       const miningKey = event.currentTarget.getAttribute('miningkey');
-      try{
+      try {
         let result = await this.state.metadataContract[methodToCall]({
           miningKeyToConfirm: miningKey,
           senderVotingKey: this.state.votingKey
         });
         console.log(result);
-        this.setState({loading: false})
+        this.setState({ loading: false })
         helpers.generateAlert("success", "Congratulations!", successMsg);
-      } catch(error) {
-        this.setState({loading: false})
+      } catch (error) {
+        this.setState({ loading: false })
         console.error(error.message);
         helpers.generateAlert("error", "Error!", error.message);
       }
@@ -162,7 +191,7 @@ class AppMainRouter extends Component {
       successMsg: 'You have successfully confirmed the change!'
     });
   }
-  async onFinalize(event){
+  async onFinalize(event) {
     await this._onBtnClick({
       event,
       methodToCall: 'finalize',
@@ -170,30 +199,30 @@ class AppMainRouter extends Component {
     });
   }
   onPendingChangesRender() {
-    return this.state.loading || this.state.error? '' : <AllValidators
+    return this.state.loading || this.state.error ? '' : <AllValidators
       ref="AllValidatorsRef"
       methodToCall="getAllPendingChanges"
       searchTerm={this.state.searchTerm}
       web3Config={this.state}>
-          <button onClick={this.onFinalize} className="create-keys-button finalize">Finalize</button>
-          <button onClick={this.onConfirmPendingChange} className="create-keys-button">Confirm</button>
-      </AllValidators>;
+      <button onClick={this.onFinalize} className="create-keys-button finalize">Finalize</button>
+      <button onClick={this.onConfirmPendingChange} className="create-keys-button">Confirm</button>
+    </AllValidators>;
   }
   onAllValidatorsRender() {
     return this.state.loading || this.state.error ? '' : <AllValidators
       searchTerm={this.state.searchTerm}
       methodToCall="getAllValidatorsData"
       web3Config={this.state}
-      />
+    />
   }
-  onSearch(term){
-    this.setState({searchTerm: term.target.value.toLowerCase()})
+  onSearch(term) {
+    this.setState({ searchTerm: term.target.value.toLowerCase() })
   }
-  async onNetworkChange(e){
+  async onNetworkChange(e) {
     const netId = e.value;
     const web3 = setWeb3(netId);
-    networkAddresses({netId}).then(async (config) => {
-      const {addresses} = config;
+    networkAddresses({ netId }).then(async (config) => {
+      const { addresses } = config;
       const keysManager = new KeysManager();
       await keysManager.init({
         web3,
@@ -206,33 +235,35 @@ class AppMainRouter extends Component {
         netId,
         addresses
       });
-      this.setState({netId: e.value, keysManager, metadataContract})
+      this.setState({ netId: e.value, keysManager, metadataContract })
     })
   }
-  render(){
+  render() {
+
     console.log('v2.09')
-    const search = this.state.showSearch ? <input type="search" className="search-input" onChange={this.onSearch}/> : ''
+
+    const search = this.state.showSearch ? <input type="search" className="search-input" onChange={this.onSearch} /> : '';
+
     const loading = this.state.loading ? <Loading netId={this.state.netId} /> : ''
+
     return (
       <Router history={history}>
         <section className="content">
           <Header netId={this.state.netId} onChange={this.onNetworkChange} injectedWeb3={this.state.injectedWeb3} />
-        {loading}
-        <div className="nav-container">
-          <div className="container">
-            <div className="nav">
-              <NavLink className="nav-i" exact activeClassName="nav-i_active" to={`${this.rootPath}/`}>All</NavLink>
-              <NavLink className="nav-i" activeClassName="nav-i_active" to={`${this.rootPath}/set`}>Set metadata</NavLink>
-              <NavLink className="nav-i" activeClassName="nav-i_active" to={`${this.rootPath}/pending-changes`}>Pending changes</NavLink>
+          {loading}
+          <div className="app-container">
+            <div className="container">
+              <div className="main-title-container">
+                <span className="main-title">{this.state.title}</span>
+                { search }
+              </div>
             </div>
-            {search}
+            <Route exact path="/" render={this.onAllValidatorsRender} web3Config={this.state} />
+            <Route exact path={`${this.rootPath}/`} render={this.onAllValidatorsRender} web3Config={this.state} />
+            <Route path={`${this.rootPath}/pending-changes`} render={this.onPendingChangesRender} />
+            <Route path={`${this.rootPath}/set`} render={this.onSetRender} />
           </div>
-        </div>
-        <Route exact path={`${this.rootPath}/`} render={this.onAllValidatorsRender} web3Config={this.state}/>
-        <Route exact path="/" render={this.onAllValidatorsRender} web3Config={this.state}/>
-        <Route path={`${this.rootPath}/set`} render={this.onSetRender} />
-        <Route path={`${this.rootPath}/pending-changes`} render={this.onPendingChangesRender} />
-        <Footer netId={this.state.netId} />
+          <Footer netId={this.state.netId} />
         </section>
       </Router>
     )

src/stylesheets/application.scss

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

src/stylesheets/application/_base.scss

@@ -1,40 +1,31 @@
 html,
-body {
+body,
+p, h1, h2, h3 {
   margin: 0;
   padding: 0;
-  background-color: #fbfbfb;
+  font-weight: normal;
 }
 
 html {
-  height: 100%;
+  display: flex;
+  min-height: 100%;
 }
 
 body {
   position: relative;
-  display: table;
   width: 100%;
-  height: 100%;
   box-sizing: border-box;
-  padding-bottom: $footer-height;
+  padding-bottom: $footer-height_desktop;
+  background-color: #ffffff;
+  font-family: 'Nunito', sans-serif;
 
   @media screen and (max-width: $tablet-width) {
-    padding-bottom: $footer-height + 30;
+    padding-bottom: $footer-height_mobile;
   }
 }
 
-p, h1, h2, h3, h4 {
-  margin: 0;
-  padding: 0;
-  font-family: 'Open Sans', sans-serif;
-}
-
 .container {
-  max-width: 960px;
-  margin: 0 auto;
-
-  @media (max-width: $container-width) {
-    padding: 0 10px;
-  }
+  @extend %container;
 }
 
 .key-content {

src/stylesheets/application/_footer.scss

@@ -2,7 +2,7 @@
   @extend %full-width;
   position: absolute;
   bottom: 0;
-  height: $footer-height;
+  height: $footer-height_desktop;
   background-color: #6d2eae;
 
   @media screen and (max-width: $tablet-width) {
@@ -11,14 +11,14 @@
   }
 
   &.sokol {
-    background-color: #6ac9b9;
+    background-color: $secondary-color;
   }
 
   .container {
     position: relative;
 
     @media screen and (max-width: $tablet-width) {
-      padding-top: $footer-height - 20;
+      padding-top: $footer-height_desktop - 20;
     }
   }
 
@@ -48,7 +48,7 @@
 
   &-rights {
     color: #fff;
-    line-height: $footer-height;
+    line-height: $footer-height_desktop;
     text-align: center;
     font-size: 12px;
 

src/stylesheets/application/_header.scss

@@ -0,0 +1,88 @@
+.header {
+  background-color: $primary-color;
+  width: 100%;
+  z-index: 9999;
+
+  .container {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+
+    @media screen and (max-width: $mobile-width) {
+      width: 93%;
+      padding: 22px 0;
+    }
+
+    @media screen and (max-width: $tablet-width) {
+
+    }
+  }
+
+  &.sokol {
+    background-color: $secondary-color;
+  }
+
+  // logos
+  &-logo {
+    display: block;
+    height: 35px;
+  }
+
+  // header links
+  .links-container {
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+    height: $header-links-container-height;
+    margin-left: auto;
+    width: 350px;
+
+    @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;
+    text-decoration: none;
+
+    @media screen and (max-width: $mobile-width) {
+      margin-left: 0;
+    }
+  }
+
+  .link_text {
+    margin-left: 10px;
+  }
+
+  .Select {
+    margin-left: 25px;
+  }
+
+}
+
+.select-network-id {
+  width: 40px;
+  background: #fff;
+}

src/stylesheets/application/_layout.scss

@@ -0,0 +1,3 @@
+.app-container {
+  padding-top: 40px;
+}

src/stylesheets/application/_main-title.scss

@@ -0,0 +1,12 @@
+.main-title-container {
+  -ms-flex-pack: justify;
+  display: -ms-flexbox;
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 38px;
+  .main-title {
+    font-size: 24px;
+    color: #333;
+    line-height: 38px;
+  }
+}

src/stylesheets/application/_nav.scss

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

src/stylesheets/application/_search.scss

@@ -0,0 +1,26 @@
+@mixin search-active {
+  cursor: text;
+  border-color: #eee;
+  padding: 0 40px 0 10px;
+}
+.search-input {
+  background-color: #fff;
+  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: calc(100% - 10px) 50%;
+  background-repeat: no-repeat;
+  background-size: 16px 16px;
+  border-radius: 3px;
+  border: 1px solid $base-border-color;
+  box-sizing: border-box;
+  color: #333;
+  display: inline-block;
+  font-size: 14px;
+  height: 38px;
+  outline: none;
+  transition: 0.25s border-color;
+  width: 300px;
+
+  &:focus {
+    @include search-active;
+  }
+}

src/stylesheets/application/header.scss

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

src/stylesheets/application/nav.scss

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

src/stylesheets/application/search.scss

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

src/stylesheets/helpers/_placeholders.scss

@@ -56,3 +56,14 @@
     padding: 15px;
   }
 }
+
+%container {
+  margin-left: auto;
+  margin-right: auto;
+  position: relative;
+  width: $container-width;
+
+  @media (max-width: $container-responsive-width) {
+    width: 98%;
+  }
+}

src/stylesheets/helpers/_variables.scss

@@ -1,10 +1,30 @@
+$base-images-path: '../images';
+
+// colors
+$primary-color: #5c34a2;
+$secondary-color: #6ac9b9;
+
+// borders
+$base-border-color: #dadada;
+
+// widths
 $container-width: 960px;
+$container-responsive-width: 980px;
 $tablet-width: 768px;
 $mobile-width: 414px;
-$footer-height: 60px;
+$small-mobile-width: 360px;
 
+// header
+$header-links-container-height: 70px;
+
+// footer
+$footer-height_desktop: 66px;
+$footer-height_mobile: 98px;
+
+// misc
 $desktop-indent: 30px;
 $tablet-indent: 20px;
 $mobile-indent: 15px;
 
+// forms
 $input-height: 40px;