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>
   );

src/components/Output/SearchResults.js

@@ -1,5 +1,6 @@
 import React from "react";
 import CardRestaurant from "./CardRestaurant";
+import SearchPanel from "../Input/SearchPanel";
 import { useSelector } from "react-redux";
 
 export default function SearchResults() {
@@ -21,11 +22,19 @@ export default function SearchResults() {
 
   return (
     <div className="search-results">
-      <div className="results-count">
-        <p>Znaleziono: {count}</p>
-        <hr />
+      <div className="search-top">
+        <div className="search-top-left">
+          <p>o</p>
+        </div>
+        <SearchPanel/>
+        <h3>|</h3>
+      </div>
+      <div className="search-top-lower">
+        <p>Znaleziono: {count}</p>
+      </div>
+      <div className="search-middle">
+        {restaurants}
       </div>
-      {restaurants}
     </div>
   );
 }