Fix search input style

src/components/layout/styles.js

@@ -72,7 +72,7 @@ export const SideSheet = styled.div`
 export const SideSheetButton = styled.button`
   ${({ theme: { spacing, colors } }) => css`
     border: none;
-    background: none;
+    background-color: transparent;
     color: ${colors.gray[8]};
     display: flex;
     align-items: center;

src/components/search/index.js

@@ -1,8 +1,17 @@
 import React from 'react'
+import { FiSearch } from 'react-icons/fi'
+
 import * as S from './styles'
 
 const Search = () => {
-  return <S.Search type="search" placeholder="Search..." />
+  return (
+    <S.Label>
+      <S.InputWrapper>
+        <FiSearch />
+        <S.StyledInput type="search" placeholder="Search..." />
+      </S.InputWrapper>
+    </S.Label>
+  )
 }
 
 export default Search

src/components/search/styles.js

@@ -1,7 +1,43 @@
-import styled from 'styled-components'
+import styled, { css } from 'styled-components'
 
-export const Search = styled.input`
-  border: none;
-  border-radius: 3px;
-  padding: 5px;
+export const Label = styled.label`
+  ${({ theme: { spacing } }) => css`
+    width: 50%;
+  `}
+`
+
+export const InputWrapper = styled.div`
+  ${({ theme: { spacing, font } }) => css`
+    position: relative;
+
+    > svg {
+      position: absolute;
+      left: ${spacing.small}px;
+      top: ${spacing.small}px;
+    }
+
+    > input {
+      padding-left: ${spacing.small * 2 + font.sizes.big}px;
+    }
+  `};
+`
+
+export const StyledInput = styled.input`
+  ${({ theme: { spacing, colors, radius, font } }) => css`
+    padding: ${spacing.small}px;
+    width: 100%;
+    border: none;
+    border-radius: ${radius}px;
+    font-size: ${font.sizes.default}px;
+
+    &::placeholder {
+      font-size: ${font.sizes.default}px;
+      font-weight: ${font.weights.thin};
+      color: ${colors.gray[6]};
+      opacity: 1;
+    }
+
+    background-color: ${colors.white};
+    color: ${colors.gray[8]};
+  `};
 `