From c712d614e127f0ae7ae3a492681368d44f783236 Mon Sep 17 00:00:00 2001 From: Jonasz Bigda Date: Thu, 4 Feb 2021 20:25:07 +0100 Subject: [PATCH] redesign search panel --- src/App.js | 4 --- src/components/Input/SearchPanel.js | 22 ++++++++------ src/components/Output/SearchResults.js | 17 ++++++++--- src/index.js | 1 - src/reducers/data.js | 4 +++ src/styles/Pictograms.scss | 4 +-- src/styles/SearchPanel.scss | 1 + src/styles/SearchResults.scss | 40 +++++++++++++++++++++----- src/styles/TopBar.scss | 2 +- 9 files changed, 67 insertions(+), 28 deletions(-) diff --git a/src/App.js b/src/App.js index 13beb21..918f9ef 100644 --- a/src/App.js +++ b/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) { - - diff --git a/src/components/Input/SearchPanel.js b/src/components/Input/SearchPanel.js index c022fc4..9335d32 100644 --- a/src/components/Input/SearchPanel.js +++ b/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() { dispatch(setSearchQuery(event.target.value))} @@ -60,10 +65,9 @@ export default function SearchPanel() { />
- dispatch(fetchSearch(searchQuery))} - text="Szukaj" - /> + dispatch(fetchSearch(searchQuery))}> + +
); diff --git a/src/components/Output/SearchResults.js b/src/components/Output/SearchResults.js index 9aee1cb..c4ad217 100644 --- a/src/components/Output/SearchResults.js +++ b/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 (
-
-

Znaleziono: {count}

-
+
+
+

o

+
+ +

|

+
+
+

Znaleziono: {count}

+
+
+ {restaurants}
- {restaurants}
); } diff --git a/src/index.js b/src/index.js index 0f9efab..f32c075 100644 --- a/src/index.js +++ b/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 ) ); diff --git a/src/reducers/data.js b/src/reducers/data.js index 46943c4..c48695b 100644 --- a/src/reducers/data.js +++ b/src/reducers/data.js @@ -22,6 +22,10 @@ const initialState = { }, backdrop: false, tempData: {}, + filters: { + type: [], + tags: [] + } }; const data = (state = initialState, action) => { diff --git a/src/styles/Pictograms.scss b/src/styles/Pictograms.scss index 9e4a485..3da3926 100644 --- a/src/styles/Pictograms.scss +++ b/src/styles/Pictograms.scss @@ -1,8 +1,8 @@ .pictograms-container { height: 30px; margin: 0px 8px 0px 0px; - background-color: #444444; - border-radius: 24px; +/* background-color: #444444; + border-radius: 24px; */ padding: 2px; width: fit-content; } diff --git a/src/styles/SearchPanel.scss b/src/styles/SearchPanel.scss index 48e2dfd..6cd69ab 100644 --- a/src/styles/SearchPanel.scss +++ b/src/styles/SearchPanel.scss @@ -5,5 +5,6 @@ .btnContainer { margin-left: 24px; + margin-right: 14px; } } diff --git a/src/styles/SearchResults.scss b/src/styles/SearchResults.scss index d92bf6c..10c1488 100644 --- a/src/styles/SearchResults.scss +++ b/src/styles/SearchResults.scss @@ -1,12 +1,39 @@ @import "./Design.scss"; .search-results { - min-width: 60%; - max-width: 90%; + height: 100%; + 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: 100px; + border-radius: 16px; 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; diff --git a/src/styles/TopBar.scss b/src/styles/TopBar.scss index 2c19f5c..e015d58 100644 --- a/src/styles/TopBar.scss +++ b/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; }