diff --git a/web/chat/chat-thread-list.css b/web/chat/chat-thread-list.css --- a/web/chat/chat-thread-list.css +++ b/web/chat/chat-thread-list.css @@ -288,37 +288,3 @@ display: flex; flex-direction: column; } - -div.searchContainer { - background-color: var(--text-input-bg); - display: flex; - align-items: center; - margin: 1rem; -} - -input.searchInput { - background-color: var(--text-input-bg); - font-size: var(--s-font-14); - padding: 1rem; - flex: 1; - border: none; - color: var(--text-input-color); - outline: none; -} - -input.searchInput::placeholder { - color: var(--text-input-placeholder); -} - -button.clearSearch { - color: var(--text-input-color); - transition: ease-in-out 0.15s; - border: none; - padding: 0 1rem; - font-size: var(--m-font-16); - background: none; -} - -button.clearSearchDisabled { - opacity: 0; -} diff --git a/web/chat/chat-thread-list.react.js b/web/chat/chat-thread-list.react.js --- a/web/chat/chat-thread-list.react.js +++ b/web/chat/chat-thread-list.react.js @@ -5,10 +5,10 @@ import { emptyItemText } from 'lib/shared/thread-utils'; +import Search from '../components/search.react'; import ChatThreadListItem from './chat-thread-list-item.react'; import css from './chat-thread-list.css'; import { ThreadListContext } from './thread-list-provider'; -import ThreadListSearch from './thread-list-search.react'; function ChatThreadList(): React.Node { const threadListContext = React.useContext(ThreadListContext); @@ -36,7 +36,11 @@ return (
- +
{threadComponents}
); diff --git a/web/chat/clear-search-button.react.js b/web/components/clear-search-button.react.js rename from web/chat/clear-search-button.react.js rename to web/components/clear-search-button.react.js --- a/web/chat/clear-search-button.react.js +++ b/web/components/clear-search-button.react.js @@ -5,7 +5,7 @@ import classNames from 'classnames'; import * as React from 'react'; -import css from './chat-thread-list.css'; +import css from './search.css'; type ClearSearchButtonProps = { +active: boolean, diff --git a/web/components/search.css b/web/components/search.css new file mode 100644 --- /dev/null +++ b/web/components/search.css @@ -0,0 +1,33 @@ +div.searchContainer { + background-color: var(--text-input-bg); + display: flex; + align-items: center; + margin: 1rem; +} + +input.searchInput { + background-color: var(--text-input-bg); + font-size: var(--s-font-14); + padding: 1rem; + flex: 1; + border: none; + color: var(--text-input-color); + outline: none; +} + +input.searchInput::placeholder { + color: var(--text-input-placeholder); +} + +button.clearSearch { + color: var(--text-input-color); + transition: ease-in-out 0.15s; + border: none; + padding: 0 1rem; + font-size: var(--m-font-16); + background: none; +} + +button.clearSearchDisabled { + opacity: 0; +} diff --git a/web/chat/thread-list-search.react.js b/web/components/search.react.js rename from web/chat/thread-list-search.react.js rename to web/components/search.react.js --- a/web/chat/thread-list-search.react.js +++ b/web/components/search.react.js @@ -2,16 +2,17 @@ import * as React from 'react'; -import css from './chat-thread-list.css'; import ClearSearchButton from './clear-search-button.react'; +import css from './search.css'; -type ThreadListSearchProps = { +type Props = { +searchText: string, +onChangeText: (searchText: string) => mixed, + +placeholder?: string, }; -function ThreadListSearch(props: ThreadListSearchProps): React.Node { - const { searchText, onChangeText } = props; +function Search(props: Props): React.Node { + const { searchText, onChangeText, placeholder } = props; const showClearButton = !!searchText; @@ -33,11 +34,11 @@ onChange={onChange} value={searchText} type="text" - placeholder="Search threads" + placeholder={placeholder} /> ); } -export default ThreadListSearch; +export default Search;