(feat) Search bar.

src/App.js

@@ -111,10 +111,13 @@ class App extends Component {
   render() {
     const { commonStore, contractsStore } = this.props
     const loading = commonStore.loading ? <Loading netId={contractsStore.netId} /> : ''
-    console.log(contractsStore.netId)
 
     const search = this.shouldShowSearch() ? (
-      <input type="search" className="search-input" onChange={this.onSearch} />
+      <div className={`search-container`}>
+        <div className="container">
+          <input type="search" className="search-input" onChange={this.onSearch} placeholder="Search..." />
+        </div>
+      </div>
     ) : (
       ''
     )
@@ -129,15 +132,15 @@ class App extends Component {
           onMenuToggle={this.toggleMobileMenu}
           showMobileMenu={this.state.showMobileMenu}
         />
+        {search}
         <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">
+            <div className={`main-title-container ${this.shouldShowSearch() ? '' : 'no-search-on-top'}`}>
               <span className="main-title">{this.getTitle()}</span>
-              {search}
             </div>
           </div>
           <Route exact path={`/`} render={this.onBallotsRender} />

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/application/_header.scss

@@ -9,7 +9,7 @@
     right: 0;
     position: fixed;
     top: 0;
-    z-index: 123;
+    z-index: 124;
   }
 
   .container {

src/assets/stylesheets/application/_layout.scss

@@ -1,7 +1,6 @@
 .app-container {
   padding-top: 40px;
   position: relative;
-  z-index: 1;
   &.app-container-open-mobile-menu {
     &:before {
       background-color: rgba(78, 44, 137, .8);
@@ -38,7 +37,9 @@
 
 .content {
   @media screen and (max-width: $mobile-width) {
-    padding-top: $header-height_mobile;
+
+    padding-top: $header-height_mobile + $search-container-height;
+
   }
   &.content-menu-open {
     padding-top: $header-mobile-menu-container-height + $header-height_mobile;
@@ -49,4 +50,4 @@
   content: "";
   clear: both;
   display: table;
-}
+}

src/assets/stylesheets/application/_search.scss

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

src/assets/stylesheets/helpers/_mixins.scss

@@ -29,3 +29,28 @@
     color: $input-color;
   }
 }
+
+@mixin placeholder-full($color: #fff, $font-size: 14px) {
+  &::-webkit-input-placeholder {
+      /* WebKit browsers */
+      color: $color!important;
+      font-size: $font-size!important;
+  }
+  &:-moz-placeholder {
+      /* Mozilla Firefox 4 to 18 */
+      color: $color!important;
+      font-size: $font-size!important;
+      opacity: 1;
+  }
+  &::-moz-placeholder {
+      /* Mozilla Firefox 19+ */
+      color: $color!important;
+      font-size: $font-size!important;
+      opacity: 1;
+  }
+  &:-ms-input-placeholder {
+      /* Internet Explorer 10+ */
+      color: $color!important;
+      font-size: $font-size!important;
+  }
+}

src/assets/stylesheets/helpers/_vars.scss

@@ -27,6 +27,9 @@ $small-mobile-width: 360px;
 $header-links-container-height: 70px;
 $header-height_mobile: 70px;
 
+// search
+$search-container-height: 50px;
+
 // mobile menu
 $header-mobile-menu-container-height: 172px;