fix: 🐛 fix header search styling

filipowm · Aug 8, 2020 · bb85c17 · bb85c17
1 parent 587c0de
commit bb85c17
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 7 deletions.
diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js
@@ -20,7 +20,8 @@ const SearchWrapper = styled.div`
   padding-left: 20px;
   flex: 1 1 auto;
   position: relative;
-  min-width: 290px;
+  min-width: 200px;
+  max-width: 280px;
   border-left: 1px solid ${(props) => props.theme.header.border};
   ${onTablet} {
     padding-left: 0;
@@ -43,7 +44,7 @@ const HeaderWrapper = styled.header`
   align-items: center;
   box-shadow: 0 3px 8px 0 ${(props) => props.theme.header.shadow};
   border-bottom: 1px solid ${(props) => props.theme.header.border};
-  padding: 13px 0;
+  padding: 10px 0;
   position: relative;
   overflow: hidden;
   z-index: 1;
@@ -103,8 +104,8 @@ const SearchOpener = ({ open, forcedComponent, ...props }) => {
   switch (method.toLowerCase()) {
     case 'input':
       opener = (
-        <SearchWrapper css={hiddenMobile} style={{ marginRight: '20px' }} {...props}>
-          <SearchInput onChange={(e) => (e.target.value = '')} onFocus={open} />
+        <SearchWrapper css={hiddenMobile} style={{ marginRight: '10px' }} {...props}>
+          <SearchInput style={{marginTop: '0', marginBottom: '0'}} onChange={(e) => (e.target.value = '')} onFocus={open} />
         </SearchWrapper>
       );
       break;

diff --git a/src/components/Search/Input.js b/src/components/Search/Input.js
@@ -95,7 +95,7 @@ const SidebarSearchInput = ({ search, inputRef, showClean, ...props }) => (
   </SidebarSearchInputWrapper>
 );
 
-const SearchInput = ({ search, inputRef, showClean, ...props }) => {
+const SearchInput = ({ search, inputRef, showClean, style, ...props }) => {
   const theme = useTheme();
   const preventSubmit = (e) => {
     e.preventDefault();
@@ -116,7 +116,7 @@ const SearchInput = ({ search, inputRef, showClean, ...props }) => {
   };
 
   return (
-    <Form css={shadowAround(theme)} onSubmit={preventSubmit}>
+    <Form css={shadowAround(theme)} onSubmit={preventSubmit} style={style} >
       <SearchIcon />
       <Input
         ref={inputRef}

diff --git a/src/components/Search/localsearch/index.js b/src/components/Search/localsearch/index.js
@@ -29,7 +29,6 @@ const search = (query, index, store, page) => {
   const pageHits = calculatePage(results, page);
   const t2 = performance.now();
   const processingTimeMS = (t2 - t1).toFixed(2);
-  console.log(index);
   return {
     hits: pageHits,
     nbHits: nbHits,