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

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

@@ -1,4 +1,4 @@
-@import 'tc-includes';
+@import 'topcoder/tc-includes';
 
 $panel-header-text-color: #737380;
 $panel-header-bg-color: #DFDFE1;
@@ -15,12 +15,9 @@ $panel-header-bg-color: #DFDFE1;
   }
 
   .panel-body {
-    border-left : 1px solid $tc-gray-40;
-    border-right : 1px solid $tc-gray-40;
-    border-bottom : 1px solid $tc-gray-40;
+    border-left : 1px solid $accent-gray;
+    border-right : 1px solid $accent-gray;
+    border-bottom : 1px solid $accent-gray;
     padding: 10px;
-    overflow-x: visible;
-    overflow-y: scroll;
-    max-height: 252px;
   }
-}
+}

components/SearchBar/SearchBar.jsx

@@ -27,9 +27,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)
@@ -67,7 +67,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})
     }
   }
@@ -103,8 +102,6 @@ class SearchBar extends Component {
     this.refs.searchValue.value = null
     this.setState({ searchValue: this.refs.searchValue.value })
     this.setState({ searchState: 'empty' })
-    this.setState({ suggestions: false })
-    this.props.onClearSearch()
   }
 
   onKeyUp(evt) {
@@ -193,14 +190,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.search }>
-          <img className="search-bar__icon" src={ require('./icon-search.png') } />
+          <img className="search-bar__icon" src={ require('./ico-mobile-search-selected.svg') } />
         </div>
         <div className="suggestions-panel">
           {results}
@@ -211,22 +208,17 @@ class SearchBar extends Component {
   }
 }
 
+
 SearchBar.propTypes = {
-  hideSuggestionsWhenEmpty: PropTypes.func.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,11 +1,13 @@
-@import 'tc-includes';
+@import "topcoder/tc-includes";
+
+$border-color: #D8D8DB;
+$active-icon-wrap-bg: #888894;
 
 .SearchBar {
-  @include roboto;
-  background-color: white;
+  background-color: $white;
   height: 40px;
   width: 100%;
-  border: 1px solid $tc-gray-20;
+  border: 1px solid $border-color;
   border-radius: 4px;
   position: relative;
   padding-left: 15px;
@@ -18,19 +20,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;
+    color: $accent-gray;
+    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,
@@ -39,14 +44,15 @@
   }
 
   &.state-focused {
-    border-color: $tc-gray-40;
+    border-color: $accent-gray;
 
     .search-typeahead-text {
       display: block;
     }
 
     .search-icon-wrap {
       cursor: pointer;
+      background-color: $active-icon-wrap-bg;
     }
 
     .suggestions-panel {
@@ -55,15 +61,15 @@
   }
 
   &.state-filled {
-    border-color: $tc-gray-20;
+    border-color: $border-color;
 
     .search-typeahead-text {
       display: none;
     }
 
     .search-icon-wrap {
       cursor: pointer;
-      background-color: $tc-gray-50;
+      background-color: $active-icon-wrap-bg;
     }
 
     .suggestions-panel {
@@ -73,23 +79,20 @@
 
   .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;
+    color: $accent-gray-dark;
     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: 15px;
     top: 50%;
     transform: translateY(-50%);
-    background-color: transparent !important;
+    background-color: transparent;
     z-index: 20;
     padding-left: 0px;
-    height: 30px;
   }
 
   .search-bar__text {
@@ -102,11 +105,10 @@
   }
 
   .search-typeahead-text {
-    position: absolute;
-    color: $tc-gray-40;
+    color: $accent-gray;
     display: none;
     z-index: 10;
-    top: 19px;
+    left: 16.5px;
   }
 
   .search-bar__clear {
@@ -119,19 +121,17 @@
   }
 
   .search-icon-wrap {
-    height: 30px;
-    width: 36px;
+    width: 46px;
+    height: 40px;
     position: absolute;
     top: -1px;
     right: -1px;
-    background-color: $tc-gray-40;
+    background-color: $gray-light;
     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%);
@@ -141,7 +141,7 @@
   .suggestions-panel {
     display: none;
     position: absolute;
-    top: 30px;
+    top: 43px;
     left: 0;
     width: 100%;
     z-index: 1000;
@@ -155,4 +155,4 @@
       }
     }
   }
-}
+}

components/SearchSuggestions/SearchSuggestions.jsx

@@ -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