redesign search panel

src/App.js

@@ -6,9 +6,7 @@ import "./App.scss";
 import TopBar from "./components/TopBar";
 import Notifier from "./components/Notifier";
 import AppBackdrop from "./components/Output/AppBackdrop";
-import LogoMain from "./components/Output/logoMain";
 import Footer from "./components/Output/Footer";
-import SearchPanel from "./components/Input/SearchPanel";
 import SearchResults from "./components/Output/SearchResults";
 import Restaurant from "./components/Output/Restaurant";
 import Dialogs from "./components/Dialogs";
@@ -63,8 +61,6 @@ function App(props) {
                  <HomeScreen/>
                 </Route>
                 <Route path="/results">
-                  <LogoMain />
-                  <SearchPanel />
                   <SearchResults />
                 </Route>
                 <Route path="/restaurant/:id">

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";
@@ -10,10 +11,14 @@ const useStyles = makeStyles((theme) => ({
   root: {
     "& .MuiOutlinedInput-root":{
       "& fieldset":{
-        borderColor: "#bbbbbb",
+        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
+        <IconButton color="primary" aria-label="search" onClick={() => dispatch(fetchSearch(searchQuery))}>
-          onClick={() => dispatch(fetchSearch(searchQuery))}
+          <SearchIcon/>
-          text="Szukaj"
+        </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">
+      <div className="search-top">
-        <p>Znaleziono: {count}</p>
+        <div className="search-top-left">
-        <hr />
+          <p>o</p>
         </div>
+        <SearchPanel/>
+        <h3>|</h3>
+      </div>
+      <div className="search-top-lower">
+        <p>Znaleziono: {count}</p>
+      </div>
+      <div className="search-middle">
         {restaurants}
       </div>
+    </div>
   );
 }

src/index.js

@@ -16,7 +16,6 @@ const store = createStore(
   rootReducer(history),
   compose(
     applyMiddleware(routerMiddleware(history), thunk),
-    window.__REDUX_DEVTOOLS_EXTENSION__ ? window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() : f => f
   )
 );
 

src/reducers/data.js

@@ -22,6 +22,10 @@ const initialState = {
   },
   backdrop: false,
   tempData: {},
+  filters: {
+    type: [],
+    tags: []
+  }
 };
 
 const data = (state = initialState, action) => {

src/styles/Pictograms.scss

@@ -1,8 +1,8 @@
 .pictograms-container {
   height: 30px;
   margin: 0px 8px 0px 0px;
-  background-color: #444444;
+/*   background-color: #444444;
-  border-radius: 24px;
+  border-radius: 24px; */
   padding: 2px;
   width: fit-content;
 }

src/styles/SearchPanel.scss

@@ -5,5 +5,6 @@
 
   .btnContainer {
     margin-left: 24px;
+    margin-right: 14px;
   }
 }

src/styles/SearchResults.scss

@@ -1,12 +1,39 @@
 @import "./Design.scss";
 
 .search-results {
-  min-width: 60%;
+  height: 100%;
-  max-width: 90%;
+  width: 100%;
+}
+
+.search-top{
+  background-color:$dark-gray;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0;
+}
+
+.search-top-left{
+  margin-left: 24px;
+}
+
+.search-top-lower{
+  margin-top: 0;
+  background-color: #202020;
+  p{
+    margin-top: 0;
+    padding: 8px;
+  }
+}
+
+.search-middle{
+  width: fit-content;
+  margin: auto;
 }
 
 .card-restaurant {
-  border-radius: 15px;
+  border-radius: 22px;
   padding: 4px;
   margin: 10px 0px 10px 0px;
   background-color: #202020;
@@ -25,8 +52,7 @@
   min-width: 180px;
   height: 180px;
   margin: 10px;
-  border-radius: 10px;
+  border-radius: 16px;
-  //border-radius: 100px;
   background-size: cover;
 }
 
@@ -63,12 +89,12 @@
 }
 
 .card-pictograms {
-  margin-bottom: 0px;
+  margin-bottom: 12px;
 }
 
 .results-count {
   width: 100%;
-  color: $secondary-color;
+  color: $gray;
   text-align: left;
   margin-top: 20px;
   margin-bottom: 20px;

src/styles/TopBar.scss

@@ -5,7 +5,7 @@
   display: flex;
   justify-content: space-between;
   background-color: $main-color;
-  position: fixed;
+  position: sticky;
   z-index: 3;
 }