Do the yarn prettier

src/components/DocSearch/DocSearch.js

@@ -8,103 +8,103 @@ import React, {Component} from 'react';
 import {colors, media} from 'theme';
 
 class DocSearch extends Component {
-    state = {
+  state = {
-        disabled: false
+    disabled: false,
-    }
+  };
-    componentDidMount() {
+  componentDidMount() {
-        // Initialize Algolia search.
+    // Initialize Algolia search.
-        // TODO Is this expensive? Should it be deferred until a user is about to search?
+    // TODO Is this expensive? Should it be deferred until a user is about to search?
-        // eslint-disable-next-line no-undef
+    // eslint-disable-next-line no-undef
-        if(window.docsearch) {
+    if (window.docsearch) {
-            docsearch({
+      docsearch({
-                apiKey: '36221914cce388c46d0420343e0bb32e',
+        apiKey: '36221914cce388c46d0420343e0bb32e',
-                indexName: 'react',
+        indexName: 'react',
-                inputSelector: '#algolia-doc-search',
+        inputSelector: '#algolia-doc-search',
-            });
+      });
-        } else {
+    } else {
-            this.setState({ disabled: true})
+      this.setState({disabled: true});
-        }
     }
+  }
 
-    render() {
+  render() {
-        const {disabled} = this.state
+    const {disabled} = this.state;
 
-        return (
+    return (
-            <form
+      <form
-                css={{
+        css={{
-                    display: 'flex',
+          display: 'flex',
-                    flex: '0 0 auto',
+          flex: '0 0 auto',
-                    flexDirection: 'row',
+          flexDirection: 'row',
-                    alignItems: 'center',
+          alignItems: 'center',
-                    paddingLeft: '0.5rem',
+          paddingLeft: '0.5rem',
-                    paddingRight: '0.5rem',
+          paddingRight: '0.5rem',
 
-                    [media.lessThan('small')]: {
+          [media.lessThan('small')]: {
-                        justifyContent: 'flex-end',
+            justifyContent: 'flex-end',
-                    },
+          },
-                    [media.lessThan('large')]: {
+          [media.lessThan('large')]: {
-                        marginRight: 10,
+            marginRight: 10,
-                    },
+          },
-                    [media.between('small', 'medium')]: {
+          [media.between('small', 'medium')]: {
-                        width: 'calc(100% / 3)',
+            width: 'calc(100% / 3)',
-                    },
+          },
-                    [media.between('medium', 'xlarge')]: {
+          [media.between('medium', 'xlarge')]: {
-                        width: 'calc(100% / 6)',
+            width: 'calc(100% / 6)',
-                    },
+          },
-                    [media.greaterThan('small')]: {
+          [media.greaterThan('small')]: {
-                        minWidth: 120,
+            minWidth: 120,
-                    },
+          },
-                    }}>
+        }}>
-                <input
+        <input
-                    disabled={disabled}
+          disabled={disabled}
-                    css={{
+          css={{
-                        appearance: 'none',
+            appearance: 'none',
-                        background: 'transparent',
+            background: 'transparent',
-                        border: 0,
+            border: 0,
-                        color: colors.white,
+            color: colors.white,
-                        fontSize: 18,
+            fontSize: 18,
-                        fontWeight: 300,
+            fontWeight: 300,
-                        fontFamily: 'inherit',
+            fontFamily: 'inherit',
-                        position: 'relative',
+            position: 'relative',
-                        padding: '5px 5px 5px 29px',
+            padding: '5px 5px 5px 29px',
-                        backgroundImage: 'url(/search.svg)',
+            backgroundImage: 'url(/search.svg)',
-                        backgroundSize: '16px 16px',
+            backgroundSize: '16px 16px',
-                        backgroundRepeat: 'no-repeat',
+            backgroundRepeat: 'no-repeat',
-                        backgroundPositionY: 'center',
+            backgroundPositionY: 'center',
-                        backgroundPositionX: '5px',
+            backgroundPositionX: '5px',
 
-                        ':focus': {
+            ':focus': {
-                        outline: 0,
+              outline: 0,
-                        backgroundColor: colors.lighter,
+              backgroundColor: colors.lighter,
-                        borderRadius: '0.25rem',
+              borderRadius: '0.25rem',
-                        },
+            },
 
-                        [media.lessThan('large')]: {
+            [media.lessThan('large')]: {
-                        fontSize: 16,
+              fontSize: 16,
-                        },
+            },
-                        [media.greaterThan('small')]: {
+            [media.greaterThan('small')]: {
-                        width: '100%',
+              width: '100%',
-                        },
+            },
-                        [media.lessThan('small')]: {
+            [media.lessThan('small')]: {
-                        width: '16px',
+              width: '16px',
-                        transition: 'width 0.2s ease, padding 0.2s ease',
+              transition: 'width 0.2s ease, padding 0.2s ease',
-                        paddingLeft: '16px',
+              paddingLeft: '16px',
 
-                        ':focus': {
+              ':focus': {
-                            paddingLeft: '29px',
+                paddingLeft: '29px',
-                            width: '8rem',
+                width: '8rem',
-                            outline: 'none',
+                outline: 'none',
-                        },
+              },
-                        },
+            },
-                    }}
+          }}
-                    id="algolia-doc-search"
+          id="algolia-doc-search"
-                    type="search"
+          type="search"
-                    placeholder="Search docs"
+          placeholder="Search docs"
-                    aria-label="Search docs"
+          aria-label="Search docs"
-                />
+        />
-            </form>
+      </form>
-        );
+    );
-    }
+  }
 }
 
 export default DocSearch;