{props.description}
diff --git a/src/components/Dialogs.js b/src/components/Dialogs.js new file mode 100644 index 0000000..ad851bb --- /dev/null +++ b/src/components/Dialogs.js @@ -0,0 +1,98 @@ +import React from "react"; +import { makeStyles } from "@material-ui/core/styles"; +import DialogTitle from "@material-ui/core/DialogTitle"; +import DialogContent from "@material-ui/core/DialogContent"; +import Dialog from "@material-ui/core/Dialog"; +import Divider from "@material-ui/core/Divider"; +import ButtonSecondary from "./ButtonSecondary"; +import IconButton from "@material-ui/core/IconButton"; +import TextField from "@material-ui/core/TextField"; +import CloseIcon from "@material-ui/icons/Close"; +import { useSelector, useDispatch } from "react-redux"; +import { hideLoginDialog } from "../actions/toggles"; +import { tryLogin } from "../actions"; + +export default function (props) { + var loginDialog = useSelector((state) => state.data.dialogs.logIn); + const dispatch = useDispatch(); + + const loginStyles = makeStyles((theme) => ({ + root: { + textAlign: "center", + "& .MuiPaper-root": { + backgroundColor: "#262626", + color: "#bbbbbb", + }, + }, + closeButton: { + color: "#bbbbbb", + position: "absolute", + right: theme.spacing(1), + top: theme.spacing(1), + }, + textInput: { + marginTop: "20px", + marginBottom: "10px", + width: "90%", + "& .MuiInputBase-root": { + color: "#01c3a9", + }, + "& .MuiInputLabel-root": { + color: "#bbbbbb", + }, + }, + })); + + const loginClass = loginStyles(); + + return ( +
+
+
+ );
+}
diff --git a/src/components/DishesCategory.js b/src/components/DishesCategory.js
index a36e3b1..1e25f41 100644
--- a/src/components/DishesCategory.js
+++ b/src/components/DishesCategory.js
@@ -5,8 +5,20 @@ import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import CardDish from "./CardDish";
+import { makeStyles } from "@material-ui/core/styles";
+
+const useStyles = makeStyles((theme) => ({
+ root: {
+ backgroundColor: "#262626",
+ color: "#bbbbbb",
+ },
+ expandIcon: {
+ color: "#bbbbbb",
+ },
+}));
export default function DishesCategory(props) {
+ const classes = useStyles();
const dishes = props.dishes;
const dishCards = dishes.map((dish) => {
return (
@@ -17,8 +29,10 @@ export default function DishesCategory(props) {
});
return (
- {props.name}
- {dishCards}
{pictograms}
;
+}
+
function getImage(name) {
switch (name) {
case "alcohol":
@@ -52,16 +65,3 @@ function getImage(name) {
return card;
}
}
-
-export default function (props) {
- const pictograms = props.pictograms.map((pictogram, index) => (
- {pictograms}
;
-}
diff --git a/src/components/PictogramsSeparate.js b/src/components/PictogramsSeparate.js
new file mode 100644
index 0000000..fa05b41
--- /dev/null
+++ b/src/components/PictogramsSeparate.js
@@ -0,0 +1,104 @@
+import React from "react";
+// ICONS
+import alcohol from "../public/i_alcohol.svg";
+import card from "../public/i_card.svg";
+import delivery from "../public/i_delivery.svg";
+import eggs from "../public/i_eggs.svg";
+import gluten from "../public/i_gluten.svg";
+import glutenFree from "../public/i_glutenFree.svg";
+import lactose from "../public/i_lactose.svg";
+import lactoseFree from "../public/i_lactoseFree.svg";
+import peanuts from "../public/i_peanuts.svg";
+import pets from "../public/i_pets.svg";
+import seaFood from "../public/i_seaFood.svg";
+import sesame from "../public/i_sesame.svg";
+import soy from "../public/i_soy.svg";
+import vegan from "../public/i_vegan.svg";
+import vegetarian from "../public/i_vegetarian.svg";
+
+export default function (props) {
+ const pictogramsSeparated = props.pictograms.map((pictogram, index) => (
+
+ })
+
+ ));
+
+ return (
+ {getName(pictogram)}
+{pictogramsSeparated}
+ );
+}
+
+function getImage(name) {
+ switch (name) {
+ case "alcohol":
+ return alcohol;
+ case "cardPayments":
+ return card;
+ case "delivery":
+ return delivery;
+ case "eggs":
+ return eggs;
+ case "gluten":
+ return gluten;
+ case "glutenFree":
+ return glutenFree;
+ case "lactose":
+ return lactose;
+ case "lactoseFree":
+ return lactoseFree;
+ case "peanuts":
+ return peanuts;
+ case "petFriendly":
+ return pets;
+ case "seaFood":
+ return seaFood;
+ case "sesame":
+ return sesame;
+ case "soy":
+ return soy;
+ case "vegan":
+ return vegan;
+ case "vegetarian":
+ return vegetarian;
+ default:
+ return card;
+ }
+}
+
+function getName(name) {
+ switch (name) {
+ case "alcohol":
+ return "Alkohol";
+ case "cardPayments":
+ return "Płatność kartą";
+ case "delivery":
+ return "Dostawa";
+ case "eggs":
+ return "Jaja";
+ case "gluten":
+ return "Gluten";
+ case "glutenFree":
+ return "Bezglutenowe";
+ case "lactose":
+ return "Laktoza";
+ case "lactoseFree":
+ return "Bez laktozy";
+ case "peanuts":
+ return "Orzechy";
+ case "petFriendly":
+ return "Lubimy zwierzaki";
+ case "seaFood":
+ return "Owoce morza";
+ case "sesame":
+ return "Sezam";
+ case "soy":
+ return "Soja";
+ case "vegan":
+ return "Wegańskie";
+ case "vegetarian":
+ return "Wegetariańskie";
+ default:
+ return "Płatność kartą";
+ }
+}
diff --git a/src/components/Restaurant.js b/src/components/Restaurant.js
index 72b263b..6df38b5 100644
--- a/src/components/Restaurant.js
+++ b/src/components/Restaurant.js
@@ -1,37 +1,49 @@
import React from "react";
-import Pictograms from "./Pictograms";
+import PictogramsSeparate from "./PictogramsSeparate";
import DishList from "./DishList";
import CircularProgress from "@material-ui/core/CircularProgress";
+import { extractTags } from "../Services";
import { useSelector } from "react-redux";
export default function Restaurant(props) {
const restaurant = useSelector((state) => state.restaurant);
- const showDishList = useSelector((state) => state.toggles.showDishList);
- function extractTags(tags) {
- var results = [];
- for (let [key, value] of Object.entries(tags)) {
- if (value === true) {
- results.push(key);
- }
- }
- return results;
- }
+ const showDishList = useSelector((state) => state.data.showDishList);
return (
-
-
-
);
diff --git a/src/components/SearchPanel.js b/src/components/SearchPanel.js
index 3836fbd..836939b 100644
--- a/src/components/SearchPanel.js
+++ b/src/components/SearchPanel.js
@@ -1,14 +1,32 @@
import React from "react";
+import { makeStyles } from "@material-ui/core/styles";
import ButtonSecondary from "./ButtonSecondary";
import TextField from "@material-ui/core/TextField";
import Autocomplete from "@material-ui/lab/Autocomplete";
import { useSelector, useDispatch } from "react-redux";
import { fetchAutocomplete, setSearchQuery, fetchSearch } from "../actions";
+const useStyles = makeStyles((theme) => ({
+ root: {
+ "& .MuiOutlinedInput-root": {
+ "& fieldset": {
+ borderColor: "#01c3a9",
+ },
+ },
+ "& .MuiInputBase-root": {
+ color: "#01c3a9",
+ },
+ "& .MuiInputLabel-root": {
+ color: "#01c3a9",
+ },
+ },
+}));
+
export default function SearchPanel() {
let options = useSelector((store) => store.autocomplete);
let searchQuery = useSelector((store) => store.searchQuery);
const dispatch = useDispatch();
+ const classes = useStyles();
return (
+
-
+
+
+
+
+ {restaurant.name}
+{restaurant.description}
++
+ Miejscowość:{" "} + {restaurant.city} +
++ Godziny pracy:{" "} + {restaurant.workingHours} +
+ {restaurant.phone && ( ++ Kontakt:{" "} + {restaurant.phone} +
+ )} ++
+
+
+
- Menu
+ {showDishList === false &&{restaurant.name}
-{restaurant.city}
-
- {showDishList === false &&
@@ -20,6 +38,7 @@ export default function SearchPanel() {
renderInput={(params) => (
dispatch(setSearchQuery(event.target.value))}
diff --git a/src/components/TopBar.js b/src/components/TopBar.js
index d0f2620..0494655 100644
--- a/src/components/TopBar.js
+++ b/src/components/TopBar.js
@@ -1,27 +1,176 @@
import React from "react";
-import ButtonPrimary from "./ButtonPrimary";
import logo from "../public/logo_white.svg";
-import { useDispatch } from "react-redux";
+import IconButton from "@material-ui/core/IconButton";
+import MenuIcon from "@material-ui/icons/Menu";
+import { useDispatch, useSelector } from "react-redux";
import { setAppMode } from "../actions";
+import Drawer from "@material-ui/core/Drawer";
+import List from "@material-ui/core/List";
+import ListItem from "@material-ui/core/ListItem";
+import Divider from "@material-ui/core/Divider";
+import ListItemText from "@material-ui/core/ListItemText";
+import ListItemIcon from "@material-ui/core/ListItemIcon";
+import HomeIcon from "@material-ui/icons/Home";
+import MailIcon from "@material-ui/icons/Mail";
+import PaymentIcon from "@material-ui/icons/Payment";
+import FastfoodIcon from "@material-ui/icons/Fastfood";
+import AddCircleIcon from "@material-ui/icons/AddCircle";
+import FacebookIcon from "@material-ui/icons/Facebook";
+import TwitterIcon from "@material-ui/icons/Twitter";
+import InstagramIcon from "@material-ui/icons/Instagram";
+import { showLoginDialog } from "../actions/toggles";
+import { logout } from "../actions";
+import { makeStyles } from "@material-ui/core/styles";
+import ButtonSecondary from "./ButtonSecondary";
+
+const useStyles = makeStyles((theme) => ({
+ paper: {
+ backgroundColor: "#262626",
+ color: "#bbbbbb",
+ "& .MuiListItemIcon-root": {
+ color: "#01c3a9",
+ },
+ },
+}));
export default function TopBar() {
+ const classes = useStyles();
+ const loggedIn = useSelector((state) => state.data.loggedIn);
+ const username = useSelector((state) => state.data.username);
const dispatch = useDispatch();
const imgClick = () => {
dispatch(setAppMode("APP_INIT"));
};
+ const handleClick = (button) => {
+ setState((state.menuOpen = false));
+ switch (button) {
+ case "menui":
+ dispatch(setAppMode("APP_INIT"));
+ break;
+ case "logIn":
+ dispatch(showLoginDialog());
+ break;
+ case "logOut":
+ dispatch(logout());
+ break;
+ case "myRestaurant":
+ dispatch(setAppMode("APP_RESTAURANT"));
+ break;
+ case "addDish":
+ dispatch(setAppMode("APP_ADD_DISH"));
+ break;
+ default:
+ return true;
+ }
+ };
+ const [state, setState] = React.useState({
+ menuOpen: false,
+ });
+
+ const toggleDrawer = (open) => (event) => {
+ if (
+ event.type === "keydown" &&
+ (event.key === "Tab" || event.key === "Shift")
+ ) {
+ return;
+ }
+
+ setState({ menuOpen: open });
+ };
return (
- 
imgClick()}
- />
-
-
+
);
}
diff --git a/src/public/bg.jpg b/src/public/bg.jpg
new file mode 100644
index 0000000..838b76a
Binary files /dev/null and b/src/public/bg.jpg differ
diff --git a/src/public/bg_tile.jpg b/src/public/bg_tile.jpg
new file mode 100644
index 0000000..d449d3c
Binary files /dev/null and b/src/public/bg_tile.jpg differ
diff --git a/src/public/cat.jpg b/src/public/cat.jpg
deleted file mode 100644
index 34f49a5..0000000
Binary files a/src/public/cat.jpg and /dev/null differ
diff --git a/src/public/photo.jpg b/src/public/photo.jpg
deleted file mode 100644
index c078d0a..0000000
Binary files a/src/public/photo.jpg and /dev/null differ
diff --git a/src/reducers/appMode.js b/src/reducers/appMode.js
index a8e04dc..92c3050 100644
--- a/src/reducers/appMode.js
+++ b/src/reducers/appMode.js
@@ -4,8 +4,6 @@ const appModeReducer = (state = "init", action) => {
return (state = "init");
case "APP_SEARCH_RESULTS":
return (state = "search results");
- case "APP_LOGIN":
- return (state = "login");
case "APP_RESTAURANT":
return (state = "restaurant");
case "APP_DISH":
diff --git a/src/reducers/data.js b/src/reducers/data.js
new file mode 100644
index 0000000..8e3ff29
--- /dev/null
+++ b/src/reducers/data.js
@@ -0,0 +1,36 @@
+const initialState = {
+ showDishList: false,
+ loggedIn: false,
+ jwt: "",
+ username: "",
+ dialogs: {
+ logIn: false,
+ register: false,
+ contact: false,
+ pricing: false,
+ },
+};
+
+const data = (state = initialState, action) => {
+ switch (action.type) {
+ case "SET_DISHLIST_VISIBLE":
+ return (state = { ...state, showDishList: true });
+ case "SET_DISHLIST_HIDDEN":
+ return (state = { ...state, showDishList: false });
+ case "DIALOG_LOGIN_VISIBLE":
+ return (state = { ...state, dialogs: { ...state.dialogs, logIn: true } });
+ case "SET_LOGGEDIN":
+ return (state = { ...state, loggedIn: true, username: action.payload });
+ case "SET_LOGGEDOUT":
+ return (state = { ...state, loggedIn: false, username: "" });
+ case "DIALOG_LOGIN_HIDDEN":
+ return (state = {
+ ...state,
+ dialogs: { ...state.dialogs, logIn: false },
+ });
+ default:
+ return state;
+ }
+};
+
+export default data;
diff --git a/src/reducers/index.js b/src/reducers/index.js
index 60bd94a..d437e3f 100644
--- a/src/reducers/index.js
+++ b/src/reducers/index.js
@@ -5,7 +5,7 @@ import appMode from "./appMode";
import searchQuery from "./searchQuery";
import restaurant from "./restaurant";
import dishes from "./dishes";
-import toggles from "./toggles";
+import data from "./data";
const rootReducer = combineReducers({
autocomplete: autoCompleteReducer,
@@ -14,7 +14,7 @@ const rootReducer = combineReducers({
searchQuery: searchQuery,
restaurant: restaurant,
dishes: dishes,
- toggles: toggles,
+ data: data,
});
export default rootReducer;
diff --git a/src/reducers/toggles.js b/src/reducers/toggles.js
deleted file mode 100644
index 396eee7..0000000
--- a/src/reducers/toggles.js
+++ /dev/null
@@ -1,16 +0,0 @@
-const initialState = {
- showDishList: false,
-};
-
-const toggles = (state = initialState, action) => {
- switch (action.type) {
- case "SET_DISHLIST_VISIBLE":
- return (state = { ...state, showDishList: true });
- case "SET_DISHLIST_HIDDEN":
- return (state = { ...state, showDishList: false });
- default:
- return state;
- }
-};
-
-export default toggles;
diff --git a/src/styles/Dialogs.scss b/src/styles/Dialogs.scss
new file mode 100644
index 0000000..8c9abf0
--- /dev/null
+++ b/src/styles/Dialogs.scss
@@ -0,0 +1,7 @@
+.dialog-login {
+}
+
+.login-dialog-buttons {
+ display: flex;
+ justify-content: center;
+}
diff --git a/src/styles/DishList.scss b/src/styles/DishList.scss
index cf2550e..4c8f99f 100644
--- a/src/styles/DishList.scss
+++ b/src/styles/DishList.scss
@@ -3,16 +3,30 @@
h4 {
font-weight: 400;
+ margin-left: 1rem;
}
.carddish-container {
- margin-top: 20px;
- margin-bottom: 20px;
+ background-color: #303030;
+ border-radius: 10px;
+ margin-right: auto;
+ margin-left: auto;
+ margin-top: 10px;
+ margin-bottom: 10px;
+ padding: 20px;
display: flex;
- width: 100%;
+ justify-content: space-between;
+ width: 95%;
+ cursor: pointer;
+ transition: all 0.25s;
h2 {
font-weight: 300;
+ color: $main-color;
+ margin-top: 1rem;
+ }
+ &:hover {
+ background-color: #3a3a3a;
}
}
@@ -20,10 +34,18 @@ h4 {
background-color: $secondary-color;
width: 150px;
height: 150px;
- border-radius: 75px;
+ border-radius: 10px;
margin: 0px 20px 0px 0px;
}
.carddish-left {
display: flex;
}
+
+.carddish-right {
+ h5 {
+ font-weight: 500;
+ font-size: 1.2rem;
+ margin-top: 1rem;
+ }
+}
diff --git a/src/styles/Footer.scss b/src/styles/Footer.scss
index 7d1729d..c06f0d5 100644
--- a/src/styles/Footer.scss
+++ b/src/styles/Footer.scss
@@ -1,7 +1,7 @@
-@import "../Design.scss";
-
.footer {
- background-color: $main-color;
+ position: fixed;
+ bottom: 0;
+ background-color: $dark-gray;
p {
color: white;
diff --git a/src/styles/Pictograms.scss b/src/styles/Pictograms.scss
index 8b2ce9f..bae6d45 100644
--- a/src/styles/Pictograms.scss
+++ b/src/styles/Pictograms.scss
@@ -3,8 +3,30 @@
margin: 8px 8px 8px 0px;
}
+.pictograms-container-separated {
+ width: 100%;
+ display: flex;
+ flex-wrap: wrap;
+}
+
.pictogram {
margin: 6px;
height: 20px;
width: 20px;
}
+
+.separate-pictogram {
+ background-color: $dark-gray;
+ display: flex;
+ align-items: center;
+ border-radius: 25px;
+ font-size: 0.8rem;
+ padding: 4px;
+ margin: 8px;
+ h4 {
+ margin: 8px;
+ }
+ .pictogram {
+ margin: 8px;
+ }
+}
diff --git a/src/styles/Restaurant.scss b/src/styles/Restaurant.scss
index bd74315..14f7e85 100644
--- a/src/styles/Restaurant.scss
+++ b/src/styles/Restaurant.scss
@@ -1,14 +1,17 @@
.restaurant-container {
- min-width: 100vw;
+ width: 100vw;
height: 100%;
display: flex;
- flex-flow: column;
- align-items: center;
+ justify-content: center;
+ align-items: flex-start;
h1 {
font-weight: 100;
+ color: $gray;
+ background-color: $dark-gray;
+ padding: 15px;
font-size: 3rem;
- margin: 16px;
- margin-bottom: 4px;
+ margin-bottom: 16px;
+ margin-top: 0;
}
p {
margin: 6px;
@@ -21,17 +24,17 @@
.restaurant-hero {
width: 100%;
- height: 400px;
+ height: 500px;
+ border-top-left-radius: 15px;
+ border-top-right-radius: 15px;
background-size: cover;
- display: flex;
- align-items: flex-end;
}
.restaurant-pictograms {
- background-color: white;
- width: fit-content;
+ width: 100%;
+ display: flex;
padding: 4px;
- margin: 20px;
+ margin-top: 20px;
border-radius: 50px;
.pictograms-container {
margin: 8px;
@@ -39,5 +42,47 @@
}
.restaurant-dishes {
+ min-width: 60%;
+ h3 {
+ font-size: 1.6rem;
+ font-weight: 400;
+ }
+}
+
+.restaurant-content {
+ padding-top: 10rem;
+ padding-bottom: 10rem;
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-start;
min-width: 70%;
}
+
+.restaurant-info {
+ text-align: center;
+ max-width: 30%;
+ background-color: #1d1d1d;
+ box-shadow: -2px 10px 20px rgba(0, 0, 0, 0.212);
+ border-radius: 15px;
+
+ p {
+ font-size: 1rem;
+ font-weight: 300;
+ margin-top: 8px;
+ margin-bottom: 8px;
+ }
+ hr {
+ border: 1px solid $dark-gray;
+ margin-top: 18px;
+ margin-bottom: 18px;
+ }
+ h5 {
+ font-size: 1rem;
+ font-weight: 500;
+ }
+}
+
+.restaurant-span {
+ font-weight: 500;
+ color: $gray;
+}
diff --git a/src/styles/SearchResults.scss b/src/styles/SearchResults.scss
index 13c1f2f..b1c7f3b 100644
--- a/src/styles/SearchResults.scss
+++ b/src/styles/SearchResults.scss
@@ -1,12 +1,10 @@
@import "./Design.scss";
-.search-results {
-}
-
.card-restaurant {
- border: solid 1px rgb(224, 224, 224);
- border-radius: 25px;
+ border-radius: 15px;
+ padding: 10px;
margin: 20px 0px 20px 0px;
+ background-color: #202020;
color: $secondary-color;
max-width: 70vw;
min-height: 200px;
@@ -14,8 +12,7 @@
cursor: pointer;
transition: all 0.25s;
&:hover {
- background-color: #fcfcfc;
- border-color: rgba(241, 177, 38, 0.87);
+ background-color: #2e2e2e;
}
}
@@ -23,33 +20,39 @@
min-width: 180px;
height: 180px;
margin: 10px;
- border-radius: 18px;
+ border-radius: 10px;
//border-radius: 100px;
background-size: cover;
}
.card-info {
text-align: start;
+ padding-left: 10px;
+ padding-right: 10px;
flex-grow: 6;
display: flex;
flex-direction: column;
justify-content: space-between;
h1 {
- color: $main-color;
+ color: $secondary-color;
font-size: 1.6rem;
font-weight: 300;
margin-bottom: 4px;
margin-top: 8px;
}
h3 {
+ color: $gray;
font-weight: 400;
margin-top: 2px;
margin-bottom: 2px;
font-size: 0.9rem;
}
+ p {
+ color: $gray;
+ }
hr {
- color: $main-color;
+ color: #2e2e2e;
border: solid 1px;
}
}
@@ -65,7 +68,7 @@
margin-top: 20px;
margin-bottom: 20px;
hr {
- border: solid 1px rgb(238, 238, 238);
+ border: solid 1px rgb(44, 44, 44);
}
p {
font-size: 0.9rem;
diff --git a/src/styles/TopBar.scss b/src/styles/TopBar.scss
index 2f9c30d..6e9c272 100644
--- a/src/styles/TopBar.scss
+++ b/src/styles/TopBar.scss
@@ -5,6 +5,8 @@
display: flex;
justify-content: space-between;
background-color: $main-color;
+ position: fixed;
+ z-index: 1;
}
.topBarLogo {
@@ -15,3 +17,44 @@
opacity: 0.5;
}
}
+
+.topBar-logo-container {
+ margin: 0;
+ display: flex;
+
+ h5 {
+ color: $bg-color;
+ font-weight: 300;
+ font-size: 1rem;
+ margin-left: 20px;
+ margin-top: auto;
+ margin-bottom: auto;
+ }
+}
+
+.topBar-hamburger {
+ margin-right: 20px;
+ margin-top: auto;
+ margin-bottom: auto;
+ display: flex;
+}
+
+.topbar-username {
+ color: rgb(221, 221, 221);
+ margin-right: 16px;
+ padding-top: 2px;
+}
+
+.drawer-bottom {
+ width: 100%;
+ margin-bottom: 20px;
+ display: flex;
+ justify-content: center;
+ position: absolute;
+ bottom: 0;
+}
+
+.drawer-buttons {
+ margin-left: auto;
+ margin-right: auto;
+}
+ imgClick()}
+ />
+
+
+ Food guide
+ {loggedIn && (
+
+
+
+
+ {" "}
+
+ )}
+ Witaj {username}
{" "} +-
+
+ {!loggedIn && (
+ handleClick("logIn")}
+ text="Zaloguj się"
+ />
+ )}
+ {loggedIn && (
+ handleClick("logOut")}
+ text="Wyloguj"
+ />
+ )}
+
+
+
+
+
+
+
+
+
+