diff --git a/components/Panel/Panel.jsx b/components/Panel/Panel.jsx index 20f2dca02..07462debf 100644 --- a/components/Panel/Panel.jsx +++ b/components/Panel/Panel.jsx @@ -42,7 +42,7 @@ class Panel extends Component { return (
- {this.props.showHeader ? header : null} + {header} {body}
) @@ -54,8 +54,4 @@ Panel.propTypes = { expandTrigger: PropTypes.string } -Panel.defaultProps = { - showHeader : true -} - export default Panel diff --git a/components/Panel/Panel.scss b/components/Panel/Panel.scss index 393d80cc8..a16519b1e 100644 --- a/components/Panel/Panel.scss +++ b/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; } -} +} \ No newline at end of file diff --git a/components/SearchBar/SearchBar.jsx b/components/SearchBar/SearchBar.jsx index e73eeb6d1..18b4ee291 100644 --- a/components/SearchBar/SearchBar.jsx +++ b/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 ?
- : + : return (
- { typeaheadText } + { typeaheadText }
- +
{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 diff --git a/components/SearchBar/SearchBar.scss b/components/SearchBar/SearchBar.scss index acbbf190d..63ce73fc0 100644 --- a/components/SearchBar/SearchBar.scss +++ b/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,7 +44,7 @@ } &.state-focused { - border-color: $tc-gray-40; + border-color: $accent-gray; .search-typeahead-text { display: block; @@ -47,6 +52,7 @@ .search-icon-wrap { cursor: pointer; + background-color: $active-icon-wrap-bg; } .suggestions-panel { @@ -55,7 +61,7 @@ } &.state-filled { - border-color: $tc-gray-20; + border-color: $border-color; .search-typeahead-text { display: none; @@ -63,7 +69,7 @@ .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 @@ } } } -} +} \ No newline at end of file diff --git a/components/SearchBar/ico-mobile-search-selected.svg b/components/SearchBar/ico-mobile-search-selected.svg index bc9981dd8..6bf51cd82 100644 --- a/components/SearchBar/ico-mobile-search-selected.svg +++ b/components/SearchBar/ico-mobile-search-selected.svg @@ -4,7 +4,7 @@ ico-mobile-search-selected Created with Sketch. - + diff --git a/components/SearchBar/icon-search.png b/components/SearchBar/icon-search.png deleted file mode 100644 index b624a1d13..000000000 Binary files a/components/SearchBar/icon-search.png and /dev/null differ diff --git a/components/SearchBar/x-mark.svg b/components/SearchBar/x-mark.svg index e0b2c62ed..6c043bb74 100644 --- a/components/SearchBar/x-mark.svg +++ b/components/SearchBar/x-mark.svg @@ -4,7 +4,7 @@ x-mark Created with Sketch. - + diff --git a/components/SearchSuggestions/SearchSuggestions.jsx b/components/SearchSuggestions/SearchSuggestions.jsx index e1c7e9aee..98b4eba6f 100644 --- a/components/SearchSuggestions/SearchSuggestions.jsx +++ b/components/SearchSuggestions/SearchSuggestions.jsx @@ -83,7 +83,7 @@ class SearchSuggestions extends Component { const popularSearch = !popularList ? '' :(
- +
Popular
@@ -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 ? (
) : ( + return (
{ 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 \ No newline at end of file diff --git a/components/SearchSuggestions/SearchSuggestions.scss b/components/SearchSuggestions/SearchSuggestions.scss index e6220d1c4..52668c273 100644 --- a/components/SearchSuggestions/SearchSuggestions.scss +++ b/components/SearchSuggestions/SearchSuggestions.scss @@ -1,16 +1,16 @@ -@import 'tc-includes'; +@import 'topcoder/tc-includes'; .SearchSuggestions { margin-bottom: 30px; - background-color: white; - border: 1px solid $tc-gray-30; + background-color: $white; + border: 1px solid $gray-dark; box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.3); border-radius: 2px; - // min-height: 303px; + min-height: 303px; position: relative; .panel-header { - background-color: $tc-gray-neutral-light; + background-color: $gray-lighter; position: relative; height: 36px; padding-left: 14px; @@ -18,7 +18,7 @@ .label { font-size: 12px; line-height: 14px; - color: $tc-gray-30; + color: $gray-darker; position: relative; } @@ -37,7 +37,7 @@ a, a:visited { font-size: 12px; line-height: 14px; - color: $tc-gray-30; + color: $gray-darker; background-color: transparent; border: 0px; outline: 0px; @@ -55,7 +55,7 @@ .recent-search-panel-action { a, a:hover, a:active { - color: $tc-dark-blue; + color: $dark-blue; border: 0px; outline: 0px; } @@ -66,10 +66,10 @@ .panel-body { border: none; padding: 0; - // padding-bottom: 5px; + padding-bottom: 5px; li.selected { - background-color: $tc-gray-neutral-dark; + background-color: $gray-light; } .StandardListItem { @@ -80,7 +80,7 @@ max-height: 36px; .label { - color: $tc-gray-90; + color: $accent-gray-dark; font-size: 16px; line-height: 30px; white-space: nowrap; @@ -92,7 +92,7 @@ } .StandardListItem:hover { - background-color: $tc-gray-neutral-dark; + background-color: $gray-light; } @@ -101,8 +101,8 @@ display:block; height: 40px; padding: 14px 15px; - background-color: $tc-dark-blue-10; - color: $tc-gray-90; + background-color: $primary-lighter; + color: $accent-gray-dark; font-size: 12px; line-height: 14px; position: absolute; @@ -111,12 +111,12 @@ outline: 0px none; white-space: nowrap; text-overflow: ellipsis; - overflow: hidden; + overflow-x: hidden; } .footer-link:hover, .footer-link:active { - background-color: $tc-dark-blue-30; - color: $tc-black; + background-color: $primary-light; + color: $black; border: 0px none; outline: 0px none; } @@ -127,4 +127,4 @@ .panel-body { padding-bottom: 45px; } -} +} \ No newline at end of file diff --git a/components/SwitchButton/SwitchButton.jsx b/components/SwitchButton/SwitchButton.jsx deleted file mode 100644 index 0c83e86cd..000000000 --- a/components/SwitchButton/SwitchButton.jsx +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react' -require('./SwitchButton.scss') -const SwitchButton = ({label, ...props}) => { - return ( -
- -
- ) -} - -export default SwitchButton diff --git a/components/SwitchButton/SwitchButton.scss b/components/SwitchButton/SwitchButton.scss deleted file mode 100644 index 6b0aca522..000000000 --- a/components/SwitchButton/SwitchButton.scss +++ /dev/null @@ -1,73 +0,0 @@ -@import 'tc-includes'; - -.SwitchButton { - position: relative; - .label{ - width: 92px; - line-height: 20px; - font-size: 12px; - @include roboto; - color: $tc-gray-60; - float: left; - } - label{ - float: left; - margin: 0; - padding: 0; - display: block; - height: 20px; - margin-top: 5px; - } - input[type="checkbox"] { - max-height: 0; - max-width: 0; - opacity: 0; - margin: 0; - position: absolute; - z-index:-1; - &:checked + i:before { - width: 35px; - background: $tc-dark-blue-90; - } - &:checked + i:after { - left: 18px; - } - } - i { - display: inline-block; - position: relative; - text-indent: 60px; - height: 20px; - width: 35px; - border-radius: 10px; - margin: 0; - padding: 0; - background: $tc-gray-40; - float: left; - &:before { - content: ""; - position: absolute; - display: block; - height: 20px; - width: 20px; - top: 0; - left: 0; - border-radius: 10px; - background: $tc-gray-40; - -webkit-transition: .25s ease-in-out; - } - &:after { - content: ""; - position: absolute; - display: block; - height: 14px; - width: 14px; - top: 3px; - left: 3px; - border-radius: 7px; - background: $tc-white; - cursor: pointer; - -webkit-transition: .25s ease-in-out; - } - } -}