Add filter style (#16)

* Add filter style

* Add svg icons

* Add search style

* Add page bar

* Lint:fix

src/assets/images/arrowDown.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="7" viewBox="0 0 12 7" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0.46967 0.46967C0.762563 0.176777 1.23744 0.176777 1.53033 0.46967L5.64645 4.58579C5.84171 4.78105 6.15829 4.78105 6.35355 4.58579L10.4697 0.46967C10.7626 0.176777 11.2374 0.176777 11.5303 0.46967C11.8232 0.762563 11.8232 1.23744 11.5303 1.53033L6.88388 6.17678C6.39573 6.66493 5.60427 6.66493 5.11612 6.17678L0.46967 1.53033C0.176777 1.23744 0.176777 0.762563 0.46967 0.46967Z" fill="#8C21BA"/>
+</svg>

src/assets/images/filter.svg

@@ -0,0 +1,5 @@
+<svg width="18" height="10" viewBox="0 0 18 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7 8.25C6.58579 8.25 6.25 8.58579 6.25 9C6.25 9.41421 6.58579 9.75 7 9.75H11C11.4142 9.75 11.75 9.41421 11.75 9C11.75 8.58579 11.4142 8.25 11 8.25H7Z" fill="#8C21BA"/>
+<path d="M3.25 5C3.25 4.58579 3.58579 4.25 4 4.25H14C14.4142 4.25 14.75 4.58579 14.75 5C14.75 5.41421 14.4142 5.75 14 5.75H4C3.58579 5.75 3.25 5.41421 3.25 5Z" fill="#8C21BA"/>
+<path d="M0.25 1C0.25 0.585787 0.585786 0.25 1 0.25H17C17.4142 0.25 17.75 0.585787 17.75 1C17.75 1.41421 17.4142 1.75 17 1.75H1C0.585786 1.75 0.25 1.41421 0.25 1Z" fill="#8C21BA"/>
+</svg>

src/assets/images/search.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.8504 15.9111C14.6709 15.7315 14.3863 15.7169 14.177 15.8607C13.1313 16.5794 11.8648 17 10.5 17C6.91015 17 4 14.0899 4 10.5C4 6.91015 6.91015 4 10.5 4C14.0899 4 17 6.91015 17 10.5C17 11.8648 16.5794 13.1313 15.8607 14.177C15.7169 14.3863 15.7315 14.6709 15.9111 14.8504L20.5303 19.4698C20.8232 19.7627 20.8232 20.2376 20.5303 20.5305C20.2374 20.8233 19.7626 20.8233 19.4697 20.5304L14.8504 15.9111ZM15.5 10.5C15.5 13.2614 13.2614 15.5 10.5 15.5C7.73858 15.5 5.5 13.2614 5.5 10.5C5.5 7.73858 7.73858 5.5 10.5 5.5C13.2614 5.5 15.5 7.73858 15.5 10.5Z" fill="#939BA1"/>
+</svg>

src/components/Filter.tsx

@@ -0,0 +1,22 @@
+import styled from 'styled-components'
+import { Colors } from '../constants/styles'
+import filterIcon from '../assets/images/filter.svg'
+import arrowDownIcon from '../assets/images/arrowDown.svg'
+
+export const Filter = styled.select`
+  width: 175px;
+  padding: 2px 10px 2px 30px;
+  font-weight: 500;
+  font-size: 15px;
+  line-height: 22px;
+  color: ${Colors.VioletDark};
+  border: 1px solid #e6ecf0;
+  border-radius: 14px;
+  appearance: none;
+  background: url(${filterIcon}) no-repeat 5px center, url(${arrowDownIcon}) no-repeat right 10px center;
+  outline: none;
+
+  &:focus {
+    border: 1px solid ${Colors.Violet};
+  }
+`

src/components/Input.tsx

@@ -0,0 +1,33 @@
+import styled from 'styled-components'
+import { Colors } from '../constants/styles'
+import searchIcon from '../assets/images/search.svg'
+
+export const Input = styled.input`
+  max-width: 420px;
+  padding: 11px 20px;
+  background: ${Colors.GrayBorder};
+  color: ${Colors.Black};
+  border-radius: 8px;
+  border: 1px solid ${Colors.GrayBorder};
+  outline: none;
+
+  &:active,
+  &:focus {
+    border: 1px solid ${Colors.Violet};
+    caret-color: ${Colors.Violet};
+  }
+`
+
+export const Search = styled(Input)`
+  width: 270px;
+  padding: 7px 36px;
+  background-image: url(${searchIcon});
+  background-size: 24px 24px;
+  background-repeat: no-repeat;
+  background-position: center left 10px;
+
+  &::placeholder {
+    font-size: 15px;
+    line-height: 22px;
+  }
+`

src/components/PageBar.tsx

@@ -0,0 +1,7 @@
+import styled from 'styled-components'
+
+export const PageBar = styled.div`
+  display: flex;
+  justify-content: space-between;
+  margin: 0 20px;
+`

src/components/votes/VotingCards.tsx

@@ -3,6 +3,9 @@ import { Card, CardCommunity, CardVote } from '../Card'
 import { getCommunitiesUnderVote } from '../../helpers/apiMock'
 import { CommunityDetail, VotingSortingEnum } from '../../models/community'
 import styled from 'styled-components'
+import { Filter } from '../Filter'
+import { Search } from '../Input'
+import { PageBar } from '../PageBar'
 
 export function VotingCards() {
   const [searchField, setSearchField] = useState('')
@@ -49,16 +52,24 @@ export function VotingCards() {
 
   return (
     <div>
-      <input type="text" value={searchField} onChange={(e) => setSearchField(e.currentTarget.value)} />
+      <PageBar>
+        <Search
+          type="text"
+          placeholder="Search communities..."
+          value={searchField}
+          onChange={(e) => setSearchField(e.currentTarget.value)}
+        />
+
+        <Filter value={sortingType} onChange={(e) => setSortingType(parseInt(e.currentTarget.value))}>
+          <option value={VotingSortingEnum.EndingSoonest}>Ending Soonest</option>
+          <option value={VotingSortingEnum.EndingLatest}>Ending Latest</option>
+          <option value={VotingSortingEnum.AtoZ}>A to Z</option>
+          <option value={VotingSortingEnum.ZtoA}>Z to A</option>
+          <option value={VotingSortingEnum.LeastVotes}>Least Votes</option>
+          <option value={VotingSortingEnum.MostVotes}>Most Votes</option>
+        </Filter>
+      </PageBar>
 
-      <select value={sortingType} onChange={(e) => setSortingType(parseInt(e.currentTarget.value))}>
-        <option value={VotingSortingEnum.EndingSoonest}>Ending Soonest</option>
-        <option value={VotingSortingEnum.EndingLatest}>Ending Latest</option>
-        <option value={VotingSortingEnum.AtoZ}>A to Z</option>
-        <option value={VotingSortingEnum.ZtoA}>Z to A</option>
-        <option value={VotingSortingEnum.LeastVotes}>Least Votes</option>
-        <option value={VotingSortingEnum.MostVotes}>Most Votes</option>
-      </select>
       <Voting>
         {communities.map((community) => {
           let heading =