From c176d509518b78bb7c5f46dfac05f0649dcc01ea Mon Sep 17 00:00:00 2001
From: Hazem Krimi <krimihazem1@gmail.com>
Date: Sun, 18 Oct 2020 19:25:25 +0100
Subject: [PATCH] Update search bar styles

---
 src/assets/search.svg        |  9 +++++++++
 src/components/SearchBar.tsx | 35 ++++++++++++++++++++++++++---------
 2 files changed, 35 insertions(+), 9 deletions(-)
 create mode 100644 src/assets/search.svg

diff --git a/src/assets/search.svg b/src/assets/search.svg
new file mode 100644
index 0000000..7d7452e
--- /dev/null
+++ b/src/assets/search.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+    <style>
+        svg {
+            fill: rgba(0, 0, 0, 0.5);
+        }
+    </style>
+    <path d="M0 0h24v24H0z" fill="none"/>
+    <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
+</svg>
\ No newline at end of file
diff --git a/src/components/SearchBar.tsx b/src/components/SearchBar.tsx
index da32239..abc69fe 100644
--- a/src/components/SearchBar.tsx
+++ b/src/components/SearchBar.tsx
@@ -1,13 +1,23 @@
 import React, { useState } from 'react';
 import styled from 'styled-components';
 import { useHistory } from 'react-router-dom';
+import SearchIcon from '../assets/search.svg';
 
-const Input = styled.input`
+const Wrapper = styled.div`
+    width: 100%;
+    display: grid;
+    grid-template-columns: 1fr auto;
+    justify-content: center;
+    align-items: center;
     border: 1px solid rgba(0, 0, 0, 0.15);
     border-radius: 5px;
-    padding: 0.25rem 0.5rem;
     justify-self: flex-end;
-    width: 100%;
+    padding: 0.2rem 0.5rem;
+`;
+
+const Input = styled.input`
+    border: none;
+    border-radius: 5px;
 
     &::placeholder {
         color: rgba(0, 0, 0, 0.5);
@@ -19,18 +29,25 @@ const SearchBar: React.FC = () => {
     const history = useHistory();
 
     const search = (event: React.KeyboardEvent<HTMLInputElement>) => {
-        if (event.key === 'Enter') {
+        if (event.key === 'Enter' && query !== '') {
             history.push(`/search/${query}`);
             setQuery('');
         }
     }
 
     return (
-        <Input
-            placeholder='Search'
-            onKeyPress={search}
-            onChange={event => setQuery(event.target.value)}
-        />
+        <Wrapper>
+            <Input
+                placeholder='Search'
+                value={query}
+                onKeyPress={search}
+                onChange={event => setQuery(event.target.value)}
+            />
+            <img
+                src={SearchIcon}
+                alt='Search icon'
+            />
+        </Wrapper>
     );
 }