Merge branch 'master' into feature/merged-with-master

* master:
  Revert "Project search typeahead fix and styles clean up - connect-app issue #43"

Conflicts:
	components/SearchBar/SearchBar.jsx
	components/SearchBar/SearchBar.scss
	components/SwitchButton/SwitchButton.scss

Author: Vikas Agarwal

components/Panel/Panel.jsx

@@ -42,7 +42,7 @@ class Panel extends Component {
 
     return (
       <div className="Panel">
-        {this.props.showHeader ? header : null}
+        {header}
         {body}
       </div>
     )
@@ -54,8 +54,4 @@ Panel.propTypes = {
   expandTrigger: PropTypes.string
 }
 
-Panel.defaultProps = {
-  showHeader : true
-}
-
 export default Panel

components/Panel/Panel.scss

@@ -19,8 +19,5 @@ $panel-header-bg-color: #DFDFE1;
     border-right : 1px solid $tc-gray-40;
     border-bottom : 1px solid $tc-gray-40;
     padding: 10px;
-    overflow-x: visible;
-    overflow-y: scroll;
-    max-height: 252px;
   }
-}
+}

components/SearchBar/SearchBar.jsx

@@ -29,9 +29,9 @@ class SearchBar extends Component {
     this.handleSuggestionsUpdate = this.handleSuggestionsUpdate.bind(this)
   }
 
-  getQueryStringValue (key) {
+  getQueryStringValue (key) {  
     return unescape(window.location.href.replace(new RegExp('^(?:.*[&\\?]' + escape(key).replace(/[\.\+\*]/g, '\\$&') + '(?:\\=([^&]*))?)?.*$', 'i'), '$1'))
-  }
+  } 
 
   componentDidMount() {
     window.addEventListener('click', this.handleOutsideClick)
@@ -73,7 +73,6 @@ class SearchBar extends Component {
 
   handleSuggestionsUpdate(requestNo, data) {
     if (requestNo === this.state.maxRequestNo) {
-      console.log('SUGGESTIONS', data)
       this.setState({loading: false, suggestions: data, selectedSuggestionIdx: null})
     }
   }
@@ -109,8 +108,6 @@ class SearchBar extends Component {
     this.refs.searchValue.value = ''
     this.setState({ searchValue: this.refs.searchValue.value, finalTerm: '' })
     this.setState({ searchState: 'empty' })
-    this.setState({ suggestions: false })
-    this.props.onClearSearch()
   }
 
   onKeyUp(evt) {
@@ -207,14 +204,14 @@ class SearchBar extends Component {
 
     const results = this.state.loading === true
       ? <div className="loading-suggestions"><Loader /></div>
-      : <SearchSuggestions hideSuggestionsWhenEmpty={ this.props.hideSuggestionsWhenEmpty } recentSearch={ recentList } searchTerm={ this.state.searchValue } popularSearch={ popularList } showPopularSearchHeader={ this.props.showPopularSearchHeader } onSuggestionSelect={ this.handleSuggestionSelect } />
+      : <SearchSuggestions recentSearch={ recentList } searchTerm={ this.state.searchValue } popularSearch={ popularList } onSuggestionSelect={ this.handleSuggestionSelect } />
     return (
       <div className={ sbClasses }>
-        <span className="search-typeahead-text">{ typeaheadText }</span>
         <input className="search-bar__text" onFocus={ this.onFocus } onChange={ this.onChange } onKeyUp={ this.onKeyUp } ref="searchValue" value={this.state.searchValue} />
+        <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.handleClick }>
-          <span className="search-txt">Search</span>
+        <div className="search-icon-wrap" onClick={ this.search }>
+          <img className="search-bar__icon" src={ require('./ico-mobile-search-selected.svg') } />
         </div>
         <div className="suggestions-panel">
           {results}
@@ -225,22 +222,17 @@ class SearchBar extends Component {
   }
 }
 
+
 SearchBar.propTypes = {
-  hideSuggestionsWhenEmpty: PropTypes.bool,
   onSearch     : PropTypes.func.isRequired,
-  onClearSearch : PropTypes.func,
   onTermChange : PropTypes.func.isRequired,
   recentTerms  : PropTypes.array,
-  searchTermKey: PropTypes.string,
-  showPopularSearchHeader: PropTypes.bool
+  searchTermKey: PropTypes.string
 }
 
 SearchBar.defaultProps = {
-  hideSuggestionsWhenEmpty: false,
   recentTerms   : [],
-  searchTermKey : 'q',
-  onClearSearch : () => {},
-  showPopularSearchHeader: true
+  searchTermKey : 'q'
 }
 
 export default SearchBar

components/SearchBar/SearchBar.scss

@@ -1,12 +1,21 @@
-@import 'tc-includes';
+@import "tc-includes";
+
+$border-color: #D8D8DB;
+$active-icon-wrap-bg: #888894;
 
 .SearchBar {
-  @include roboto;
-  background: $tc-gray-80;
-  height: 30px;
+  // @include roboto;
+  // background: $tc-gray-80;
+  // height: 30px;
+  // width: 100%;
+  // border: 0;
+  // border-radius: 2px;
+
+  background-color: $tc-white;
+  height: 40px;
   width: 100%;
-  border: 0;
-  border-radius: 2px;
+  border: 1px solid $border-color;
+  border-radius: 4px;
   position: relative;
   padding-left: 15px;
   padding-right: 46px;
@@ -23,19 +32,22 @@
   }
 
   &.state-empty:before {
-    content: "Search for projects";
+    content: "Search Topcoder for challenges, people or content";
     position: absolute;
     left: 15px;
     top: 50%;
-    text-align: left;
     transform: translateY(-50%);
     color: $tc-gray-40;
-    font-size: 13px;
+    font-size: 15px;
     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,
@@ -45,9 +57,11 @@
 
   &.state-filled,
   &.state-focused {
+    // border-color: $tc-gray-40;
+    // padding-right: 88px;
+    // background-color: white;
+
     border-color: $tc-gray-40;
-    padding-right: 88px;
-    background-color: white;
 
     .search-txt {
       display: block;
@@ -58,12 +72,23 @@
       background-color: $tc-dark-blue-90;
       z-index: 20;
       cursor: pointer;
+      background-color: $active-icon-wrap-bg;
+    }
+    .search-typeahead-text {
+      display: block;
     }
   }
 
-  &.state-focused {
+  &.state-filled {
+    border-color: $border-color;
+
     .search-typeahead-text {
-      display: block;
+      display: none;
+    }
+
+    .search-icon-wrap {
+      cursor: pointer;
+      background-color: $active-icon-wrap-bg;
     }
 
     .suggestions-panel {
@@ -73,24 +98,21 @@
 
   .search-bar__text,
   .search-typeahead-text {
-    @include roboto;
+    font-family: "Roboto", Arial, Helvetica, sans-serif;
     outline: 0px;
     border: 0px none;
     font-size: 17px;
     color: $tc-gray-90;
     line-height: 20px;
-    // NOTE: If uncommented, it causes problems with the proper alignment of
-    //    the typeahead text.
-    // width: calc(100% - 15px - 46px);
+    width: 90%;
     position: absolute;
     left: 0;
     text-indent: 15px;
     top: 50%;
     transform: translateY(-50%);
-    background-color: transparent !important;
+    background-color: transparent;
     z-index: 20;
     padding-left: 0px;
-    height: 30px;
   }
 
   .search-bar__text {
@@ -104,11 +126,10 @@
   }
 
   .search-typeahead-text {
-    position: absolute;
     color: $tc-gray-40;
     display: none;
-    z-index: 20;
-    top: 19px;
+    z-index: 10;
+    left: 16.5px;
   }
 
   .search-bar__clear {
@@ -121,26 +142,27 @@
   }
 
   .search-icon-wrap {
+    width: 46px;
+    height: 40px;
     position: absolute;
-    right: 0;
-    top: 0;
-    height: 30px;
-    width: 37px;
-    background: $tc-gray-60 url("./ui-16px-2_zoom.svg") 10px 7px no-repeat;
-    border-radius: 0 2px 2px 0;
-    border-left: 1px solid $tc-black;
-    @include roboto;
-    font-size: 12px;
-    color: $tc-white;
-    padding-left: 36px;
-    text-align: left;
-    line-height: 30px;
+    top: -1px;
+    right: -1px;
+    background-color: $tc-gray-neutral-light;
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+
+    .search-bar__icon {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
   }
 
   .suggestions-panel {
     display: none;
     position: absolute;
-    top: 30px;
+    top: 43px;
     left: 0;
     width: 100%;
     z-index: 1000;
@@ -154,4 +176,4 @@
       }
     }
   }
-}
+}

components/SearchBar/ico-mobile-search-selected.svg

@@ -83,7 +83,7 @@ class SearchSuggestions extends Component {
 
     const popularSearch = !popularList ? '' :(
 			<div className="popular-search-suggestions">
-				<Panel showHeader={this.props.showPopularSearchHeader}>
+				<Panel>
 					<div className="panel-header">
 						<div className="label">Popular</div>
 					</div>
@@ -100,11 +100,7 @@ class SearchSuggestions extends Component {
       { 'empty-state' : recentList && !popularList }
     )
 
-    const hide = this.props.hideSuggestionsWhenEmpty &&
-        (!recentList || !recentList.length) &&
-        (!popularList || !popularList.length)
-
-    return hide ? (<div></div>) : (
+    return (
 			<div className={ ssClasses }>
 				{ popularSearch }
 				{ recentSearches }
@@ -114,20 +110,16 @@ class SearchSuggestions extends Component {
 }
 
 SearchSuggestions.propTypes = {
-  hideWhenEmpty         : PropTypes.bool,
   onSuggestionSelect    : PropTypes.func.isRequired,
   recentSearch          : PropTypes.array,
   popularSearch         : PropTypes.array,
-  searchTerm            : PropTypes.string,
-  showPopularSearchHeader: PropTypes.bool
+  searchTerm            : PropTypes.string
 }
 
 SearchSuggestions.defaultProps = {
-  hideWhenEmpty         : true,
   recentSearch          : [],
   popularSearch         : [],
-  searchTerm            : '',
-  showPopularSearchHeader: true
+  searchTerm            : ''
 }
 
-export default SearchSuggestions
+export default SearchSuggestions