redesign search panel

src/components/Input/SearchPanel.js

@@ -1,6 +1,7 @@
 import React, { useEffect } from "react";
 import { makeStyles } from "@material-ui/core/styles";
-import ButtonSecondary from "./ButtonSecondary";
+import IconButton from '@material-ui/core/IconButton';
+import SearchIcon from '@material-ui/icons/Search';
 import TextField from "@material-ui/core/TextField";
 import Autocomplete from "@material-ui/lab/Autocomplete";
 import { useSelector, useDispatch } from "react-redux";
@@ -8,12 +9,16 @@ import { fetchAutocomplete, setSearchQuery, fetchSearch } from "../../actions";
 
 const useStyles = makeStyles((theme) => ({
   root: {
-    "& .MuiOutlinedInput-root": {
-      "& fieldset": {
-        borderColor: "#bbbbbb",
+    "& .MuiOutlinedInput-root":{
+      "& fieldset":{
+        borderWidth: "0px"
+      },
+      '&.Mui-focused fieldset': {
+        borderWidth: '2px',
       },
     },
     "& .MuiInputBase-root": {
+      backgroundColor: "#202020",
       color: "#bbbbbb",
       borderRadius: "16px"
     },
@@ -50,7 +55,7 @@ export default function SearchPanel() {
           <TextField
             {...params}
             className={classes.root}
-            label="Miasto, Nazwa lokalu, ..."
+            label="Szukaj"
             variant="outlined"
             onKeyDown={keyDown}
             onChange={(event) => dispatch(setSearchQuery(event.target.value))}
@@ -60,10 +65,9 @@ export default function SearchPanel() {
       />
 
       <div className="btnContainer">
-        <ButtonSecondary
-          onClick={() => dispatch(fetchSearch(searchQuery))}
-          text="Szukaj"
-        />
+        <IconButton color="primary" aria-label="search" onClick={() => dispatch(fetchSearch(searchQuery))}>
+          <SearchIcon/>
+        </IconButton>
       </div>
     </div>
   );