(Refactor) Search and Main Title components.

src/App.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react'
 import swal from 'sweetalert2'
-import { Header, Ballots, NewBallot, Settings, Footer, Loading, BaseLoader } from './components'
+import { Header, Ballots, NewBallot, Settings, Footer, Loading, BaseLoader, SearchBar, MainTitle } from './components'
 import { Route } from 'react-router-dom'
 import { constants } from './utils/constants'
 import { inject, observer } from 'mobx-react'
@@ -91,18 +91,11 @@ class App extends Component {
     commonStore.setSearchTerm(e.target.value.toLowerCase())
   }
 
-  shouldShowSearch = () => {
+  hideSearch = () => {
     const { commonStore } = this.props
     const currentPath = this.props.location.pathname
 
-    let showSearch =
-      currentPath === `${commonStore.rootPath}` ||
-      currentPath === '/' ||
-      currentPath === `${commonStore.rootPath}/` ||
-      currentPath === `${commonStore.rootPath}/active` ||
-      currentPath === `${commonStore.rootPath}/tofinalize`
-
-    return showSearch
+    return currentPath === `${commonStore.rootPath}/new`
   }
 
   toggleMobileMenu = () => {
@@ -132,14 +125,6 @@ class App extends Component {
     const { commonStore, contractsStore } = this.props
     const networkBranch = contractsStore.netId ? getNetworkBranch(contractsStore.netId) : null
 
-    const search = this.shouldShowSearch() ? (
-      <div className={`search-container ${this.getNetIdClass()}`}>
-        <div className="container">
-          <input type="search" className="search-input" onChange={this.onSearch} placeholder="Search..." />
-        </div>
-      </div>
-    ) : null
-
     return networkBranch ? (
       <div className={`lo-App ${this.state.showMobileMenu ? 'lo-App-menu-open' : ''}`}>
         {commonStore.loading ? <Loading networkBranch={networkBranch} /> : null}
@@ -151,17 +136,13 @@ class App extends Component {
           onMenuToggle={this.toggleMobileMenu}
           showMobileMenu={this.state.showMobileMenu}
         />
-        {search}
+        {this.hideSearch() ? null : <SearchBar networkBranch={networkBranch} onSearch={this.onSearch} />}
         <section
           className={`lo-App_Content lo-App_Content-${networkBranch} ${
             this.state.showMobileMenu ? 'lo-App_Content-mobile-menu-open' : ''
           }`}
         >
-          <div className="container">
-            <div className={`main-title-container ${this.shouldShowSearch() ? '' : 'no-search-on-top'}`}>
-              <span className="main-title">{this.getTitle()}</span>
-            </div>
-          </div>
+          <MainTitle text={this.getTitle()} />
           <Route exact path={`/`} render={this.onBallotsRender} />
           <Route exact path={`${commonStore.rootPath}/`} render={this.onBallotsRender} />
           <Route exact path={`${commonStore.rootPath}/active`} render={this.onActiveBallotsRender} />

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/stylesheets/application/_main-title.scss

@@ -1,21 +0,0 @@
-.main-title-container {
-  -ms-flex-pack: justify;
-  display: -ms-flexbox;
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: 40px;
-
-  .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%;
-    }
-  }
-}

src/assets/stylesheets/application/_search.scss

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

src/assets/stylesheets/application/_settings.scss

@@ -1,12 +0,0 @@
-.settings {
-  @extend %white-block;
-  max-width: 600px;
-  margin: 0 auto;
-
-  &-title {
-    margin-bottom: 20px;
-    color: #38454f;
-    text-align: center;
-    font-size: 24px;
-  }
-}

src/assets/stylesheets/components/_MainTitle.scss

@@ -0,0 +1,20 @@
+.sw-MainTitle {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  margin-bottom: 40px;
+
+  @media (min-width: $breakpoint-md) {
+    flex-direction: row;
+  }
+}
+
+.sw-MainTitle_Content {
+  @include content-layout-width();
+}
+
+.sw-MainTitle_Text {
+  color: #333;
+  font-size: 24px;
+  line-height: 38px;
+}

src/assets/stylesheets/components/_MobileMenuLinks.scss

@@ -8,7 +8,7 @@
     }
 
     .sokol & { // TODO: Fix
-        background-color: $sokol-cyan-sarker;
+        background-color: $sokol-cyan-darker;
     }
 }
 

src/assets/stylesheets/components/_SearchBar.scss

@@ -0,0 +1,72 @@
+.sw-SearchBar {
+    background-color: $poa-purple-darker;
+    box-sizing: border-box;
+    display: flex;
+    flex-shrink: 0;
+    height: $search-container-height;
+    justify-content: center;
+    left: 0;
+    padding: 10px 0 0 0;
+    position: fixed;
+    right: 0;
+    top: 70px;
+    z-index: 123;
+
+    @media (min-width: $breakpoint-md) {
+        left: auto;
+        position: relative;
+        right: auto;
+        top: auto;
+        z-index: 1;
+    }
+
+    &#{ & }-core {
+        background-color: $poa-purple-darker;
+    }
+    &#{ & }-sokol {
+        background-color: $sokol-cyan-darker;
+    }
+    &#{ & }-dai {
+        background-color: $xdai-gray-darker;
+    }
+}
+
+.sw-SearchBar_Content {
+    @include content-layout-width();
+}
+
+.sw-SearchBar_Input {
+    background-color: transparent;
+    background-position: 0 50%;
+    background-repeat: no-repeat;
+    background-size: 16px 16px;
+    border-radius: 0;
+    border: none;
+    box-sizing: border-box;
+    display: block;
+    font-size: 14px;
+    font-weight: 400;
+    height: 30px;
+    outline: none;
+    padding-left: 30px;
+    width: 100%;
+
+    &,
+    &:focus,
+    &:hover,
+    &:active {
+        color: #fff;
+    }
+
+    @include placeholder-full($color: rgba(255, 255, 255, 0.5));
+
+    &#{ & }-core {
+        background-image: url('#{ $base-images-path }/SearchBar/core.svg');
+    }
+    &#{ & }-sokol {
+        background-image: url('#{ $base-images-path }/SearchBar/sokol.svg');
+    }
+    &#{ & }-dai {
+        background-image: url('#{ $base-images-path }/SearchBar/dai.svg');
+    }
+}

src/assets/stylesheets/components/_index.scss

@@ -10,7 +10,9 @@
 @import "LogoDai";
 @import "LogoPOA";
 @import "LogoSokol";
+@import "MainTitle";
 @import "MobileMenuLinks";
+@import "SearchBar";
 @import "SocialIcons";
 
 // delete

src/assets/stylesheets/helpers/_variables.scss

@@ -8,12 +8,13 @@ $poa-danger-color: #f21b57;
 $poa-success-color: #60db97;
 
 $sokol-cyan: #6ac9b9;
-$sokol-cyan-sarker: #41b19e;
+$sokol-cyan-darker: #41b19e;
 $sokol-freeze-color: #50bbda;
 $sokol-danger-color: #f24c67;
 $sokol-success-color: #6ac9b9;
 
 $xdai-orange: #fec042;
+$xdai-gray-darker:  #eaeef0;
 $xdai-gray: #f2f6f8;
 
 // colors

src/assets/stylesheets/index.scss

@@ -9,10 +9,7 @@
 @import 'application/buttons';
 @import 'application/controls';
 @import 'application/info';
-@import 'application/main-title';
 @import 'application/new';
-@import 'application/search';
-@import 'application/settings';
 @import 'application/vote-scale';
 
 @import 'application/ballot-types';

src/components/MainTitle/index.js

@@ -0,0 +1,11 @@
+import React from 'react'
+
+export const MainTitle = ({ extraClassName = '', text = '' }) => {
+  return (
+    <div className={`sw-MainTitle ${extraClassName}`}>
+      <div className="sw-MainTitle_Content">
+        <span className="sw-MainTitle_Text">{text}</span>
+      </div>
+    </div>
+  )
+}

src/components/SearchBar/index.js

@@ -0,0 +1,16 @@
+import React from 'react'
+
+export const SearchBar = ({ extraClassName = '', networkBranch = false, onSearch }) => {
+  return (
+    <div className={`sw-SearchBar sw-SearchBar-${networkBranch} ${extraClassName}`}>
+      <div className="sw-SearchBar_Content">
+        <input
+          className={`sw-SearchBar_Input sw-SearchBar_Input-${networkBranch}`}
+          onChange={onSearch}
+          placeholder="Search..."
+          type="search"
+        />
+      </div>
+    </div>
+  )
+}

src/components/SocialIcons/index.js

@@ -48,7 +48,7 @@ export const SocialIcons = ({ extraClass = '', networkBranch = '' }) => {
         text="POA Github"
         url="https://github.com/poanetwork"
       />
-      <IconPOA text="POA Network" url="'https://poa.network" backgroundColor={backgroundColor} color={iconColor} />
+      <IconPOA text="POA Network" url="https://poa.net" backgroundColor={backgroundColor} color={iconColor} />
     </div>
   )
 }

src/components/index.js

@@ -3,4 +3,6 @@ export { BaseLoader } from './BaseLoader'
 export { Footer } from './Footer'
 export { Header } from './Header'
 export { Loading } from './Loading'
+export { MainTitle } from './MainTitle'
 export { NewBallot } from './NewBallot.jsx'
+export { SearchBar } from './SearchBar'