diff --git a/src/components/DocSearch/DocSearch.js b/src/components/DocSearch/DocSearch.js index 4f3b8ca2..c5b7337f 100644 --- a/src/components/DocSearch/DocSearch.js +++ b/src/components/DocSearch/DocSearch.js @@ -8,103 +8,103 @@ import React, {Component} from 'react'; import {colors, media} from 'theme'; class DocSearch extends Component { - state = { - disabled: false - } - componentDidMount() { - // Initialize Algolia search. - // TODO Is this expensive? Should it be deferred until a user is about to search? - // eslint-disable-next-line no-undef - if(window.docsearch) { - docsearch({ - apiKey: '36221914cce388c46d0420343e0bb32e', - indexName: 'react', - inputSelector: '#algolia-doc-search', - }); - } else { - this.setState({ disabled: true}) - } + state = { + disabled: false, + }; + componentDidMount() { + // Initialize Algolia search. + // TODO Is this expensive? Should it be deferred until a user is about to search? + // eslint-disable-next-line no-undef + if (window.docsearch) { + docsearch({ + apiKey: '36221914cce388c46d0420343e0bb32e', + indexName: 'react', + inputSelector: '#algolia-doc-search', + }); + } else { + this.setState({disabled: true}); } + } - render() { - const {disabled} = this.state + render() { + const {disabled} = this.state; - return ( -
- ); - } + ':focus': { + paddingLeft: '29px', + width: '8rem', + outline: 'none', + }, + }, + }} + id="algolia-doc-search" + type="search" + placeholder="Search docs" + aria-label="Search docs" + /> + + ); + } } -export default DocSearch; \ No newline at end of file +export default DocSearch;