search design

Author: RafaelGB

src/components/reducers/GlobalFilter.tsx

@@ -20,13 +20,22 @@ export default function GlobalFilter(globalFilterProps: GlobalFilterProps) {
   return (
     <Search>
       <SearchIconWrapper>
-        <SearchIcon />
+        <div
+          style={{
+            listStyleType: "none",
+          }}
+        >
+          <li>
+            <SearchIcon />
+          </li>
+          <li>{hits}</li>
+        </div>
       </SearchIconWrapper>
       <DebouncedInputWrapper>
         <DebouncedInput
           value={globalFilter ?? ""}
           onChange={(value) => setGlobalFilter(String(value))}
-          placeholder={`Search... (${hits})`}
+          placeholder={`Search...`}
         />
       </DebouncedInputWrapper>
     </Search>

src/components/styles/NavBarStyles.ts

@@ -18,13 +18,14 @@ export const Search = styled('div')(({ theme }) => ({
 }));
 
 export const SearchIconWrapper = styled('div')(({ theme }) => ({
-    padding: theme.spacing(0, 2),
+    padding: theme.spacing(0, 1),
     height: '100%',
     position: 'absolute',
     pointerEvents: 'none',
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
+    textAlign: 'center'
 }));
 
 export const DebouncedInputWrapper = styled('div')(({ theme }) => ({