merging updates from challenge

Author: Parth Shah

components/Dropdown/Dropdown.scss

@@ -8,7 +8,7 @@
 
 .Dropdown {
   background-color: #fff;
-  box-shadow: 0px 2px 7px 1px rgba(0, 0, 0, 0.17);
+  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.17);
   border-radius: 5px;
   display: inline-block;
   position: absolute;
@@ -83,22 +83,67 @@
 }
 
 .Dropdown:before {
-  content: " ";
-  width: 15px;
-  height: 15px;
-  display: block;
-  transform: rotate(45deg);
-  background-color: #fff;
+  width: 14px;
+  height: 7px;
   position: absolute;
-  right: 15px;
-  top: -6px;
-  border-radius: 5px;
+  display: block;
+  content: '';
+  right: 24px;
+  top: -7px;
+  background: url("./arrow-dropdown.png") left top no-repeat;
+  background-size: 14px 7px;
+  z-index:999;
 }
 
 .Dropdown.pointer-hide:before {
   display: none;
 }
 
-.Dropdown.pointer-shadow:before {
-  box-shadow: 0px 2px 7px 1px rgba(0, 0, 0, 0.17);
-}
+.new-theme {
+  text-align: left;
+  height: 30px;
+  color: $tc-black;
+  background: $tc-gray-neutral-light;
+  border: 1px solid $tc-gray-20;
+  @include roboto;
+  font-size: 13px;
+  line-height: 20px;
+  width: 100%;
+  border-radius: 2px;
+  position: relative;
+  .dropdown-menu-header {
+    width: 100%;
+    border: 0;
+    height: 28px;
+    line-height: 28px;
+    margin: 0;
+    padding: 0 0 0 10px;
+    color: $tc-gray-50;
+    font-size: 13px;
+  }
+  &:after{
+    display: block;
+    content: '';
+    position: absolute;
+    width: 10px;
+    height: 14px;
+    right: 11px;
+    top: 50%;
+    margin-top: -7px;
+    background: url("./icon-select.png") left top no-repeat;
+    background-size: 10px 14px;
+    z-index:2;
+  }
+  .Dropdown {
+    ul.dropdown-menu-list {
+      padding: 10px 0px;
+      li {
+        padding: 0 20px;
+        @include ellipsis;
+      }
+      li:hover {
+        background-color: $tc-gray-neutral-dark;
+      }
+    }
+  }
+}

components/Dropdown/arrow-dropdown.png

@@ -4,6 +4,7 @@ import React, { PropTypes } from 'react'
 import classNames from 'classnames'
 import _ from 'lodash'
 import BaseInputField from './BaseInputField'
+import './FormFields.scss'
 
 class TiledCheckboxInput extends BaseInputField {
 

components/Dropdown/icon-select.png

@@ -176,6 +176,7 @@ textarea{
   display: flex;
   flex-flow: row wrap;
   overflow: hidden;
+  justify-content: center;
 }
 a.tiled-group-item {
   -webkit-flex: initial;

components/Forms/TiledCheckboxInput.jsx

@@ -12,10 +12,6 @@
       display: flex;
       justify-content: center;
       margin: 0px 15px;
-
-      a {
-        padding-bottom: 6px;
-      }
     }
   }
 
@@ -31,7 +27,7 @@
     display: flex;
 
     &.selected {
-      border-bottom: 2px solid $tc-dark-blue-70;
+      border-bottom: 2px solid $tc-orange-70;
 
       a {
         color: $tc-black;
@@ -43,10 +39,14 @@
     }
 
     a {
-      text-transform: uppercase;
-      font-size: 12px;
-      line-height: 14px;
+      display: inline-block;
+      @include roboto-medium;
+      font-size: $tc-label-lg;
       color: $tc-gray-50;
+      line-height: 32px;
+      &:hover{
+        color: $tc-black;
+      }
     }
   }
 

components/Formsy/FormFields.scss

@@ -198,7 +198,7 @@ class SearchBar extends Component {
         <span className="search-typeahead-text">{ typeaheadText }</span>
         <img className="search-bar__clear" src={ require('./x-mark.svg') } onClick={ this.clearSearch }/>
         <div className="search-icon-wrap" onClick={ this.search }>
-          <img className="search-bar__icon" src={ require('./ico-mobile-search-selected.svg') } />
+          <img className="search-bar__icon" src={ require('./icon-search.png') } />
         </div>
         <div className="suggestions-panel">
           {results}

components/MenuBar/MenuBar.scss

@@ -1,6 +1,7 @@
 @import 'tc-includes';
 
 .SearchBar {
+  @include roboto;
   background-color: white;
   height: 40px;
   width: 100%;
@@ -17,22 +18,19 @@
   }
 
   &.state-empty:before {
-    content: "Search Topcoder for challenges, people or content";
+    content: "Search for projects";
     position: absolute;
     left: 15px;
     top: 50%;
+    text-align: left;
     transform: translateY(-50%);
     color: $tc-gray-40;
-    font-size: 15px;
+    font-size: 13px;
     line-height: 20px;
     width: 75%;
     white-space: nowrap;
     overflow-x: hidden;
     text-overflow: ellipsis;
-
-    @media screen and (max-width: 768px) {
-      content: "Search Topcoder";
-    }
   }
 
   &.state-focused:before,
@@ -49,7 +47,6 @@
 
     .search-icon-wrap {
       cursor: pointer;
-      background-color: $tc-gray-50;
     }
 
     .suggestions-panel {
@@ -76,7 +73,7 @@
 
   .search-bar__text,
   .search-typeahead-text {
-    font-family: "Roboto", Arial, Helvetica, sans-serif;
+    @include roboto;
     outline: 0px;
     border: 0px none;
     font-size: 17px;
@@ -87,10 +84,10 @@
     left: 15px;
     top: 50%;
     transform: translateY(-50%);
-    background-color: transparent;
+    background-color: transparent !important;
     z-index: 20;
     padding-left: 0px;
-    height: 38px;
+    height: 30px;
   }
 
   .search-bar__text {
@@ -119,17 +116,19 @@
   }
 
   .search-icon-wrap {
-    width: 46px;
-    height: 40px;
+    height: 30px;
+    width: 36px;
     position: absolute;
     top: -1px;
     right: -1px;
-    background-color: $tc-gray-neutral-dark;
+    background-color: $tc-gray-40;
     border-top-right-radius: 4px;
     border-bottom-right-radius: 4px;
 
     .search-bar__icon {
       position: absolute;
+      width: 17px;
+      height: 17px;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
@@ -139,7 +138,7 @@
   .suggestions-panel {
     display: none;
     position: absolute;
-    top: 43px;
+    top: 30px;
     left: 0;
     width: 100%;
     z-index: 1000;
@@ -153,4 +152,4 @@
       }
     }
   }
-}
+}

components/SearchBar/SearchBar.jsx

@@ -1,18 +1,15 @@
 import React from 'react'
-import classNames from 'classnames'
-import ReactSwitchButton from 'react-switch-button'
-
 require('./SwitchButton.scss')
-require('react-switch-button/dist/react-switch-button.min.css')
-  
-const SwitchButton = (props) => {
-  const switchButtonClass = classNames(
-    'SwitchButton'
-  )
+const SwitchButton = ({label, ...props}) => {
   return (
-    <div className={switchButtonClass}>
-      <ReactSwitchButton {...props} />
+    <div className="SwitchButton clearfix">
+      <span className="label">{label}</span>
+      <label>
+        <input type="checkbox" {...props} />
+        <i/>
+      </label>
     </div>
   )
-} 
+}
+
 export default SwitchButton