From 62702521ee5e0ca20ab6e9d7e5b830ce52889d11 Mon Sep 17 00:00:00 2001 From: Jonasz Bigda Date: Thu, 1 Oct 2020 20:21:46 +0200 Subject: [PATCH] web client v0.7 (edit dish / visibility / delete/ routes) --- src/App.js | 4 +- src/components/Dialogs/EditDish.js | 409 ++++++++++++++++++ src/components/Dialogs/EditRestaurant.js | 5 +- src/components/Dialogs/NewDish.js | 3 +- src/components/Dialogs/NewRestaurant.js | 3 +- .../EditRestaurant/EditRestaurantInfo.js | 3 +- .../EditRestaurant/EditRestaurantLocation.js | 3 +- .../EditRestaurant/EditRestaurantMenu.js | 4 +- .../EditRestaurant/EditRestaurantPhoto.js | 3 +- src/components/Input/Checkboxes.js | 14 +- src/components/Input/ImageUpload.js | 3 +- src/components/Input/ImageUploadWide.js | 3 +- src/components/Output/EditCategoriesList.js | 26 +- src/components/Output/EditDishList.js | 112 ++++- src/config.js | 1 + src/styles/EditRestaurant.scss | 33 ++ 16 files changed, 605 insertions(+), 24 deletions(-) create mode 100644 src/components/Dialogs/EditDish.js create mode 100644 src/config.js diff --git a/src/App.js b/src/App.js index 0e39f46..4e9fabc 100644 --- a/src/App.js +++ b/src/App.js @@ -22,6 +22,7 @@ import Contact from "./components/Output/Contact"; import Settings from "./components/Dialogs/Settings"; import EditRestaurant from "./components/Dialogs/EditRestaurant"; import NewDish from "./components/Dialogs/NewDish"; +import EditDish from "./components/Dialogs/EditDish"; const theme = createMuiTheme({ palette: { @@ -73,7 +74,7 @@ function App(props) { path="/newDish/:restaurantID" component={} /> - + @@ -94,6 +95,7 @@ function App(props) { path="/editRestaurant/:id" component={} /> + } /> diff --git a/src/components/Dialogs/EditDish.js b/src/components/Dialogs/EditDish.js new file mode 100644 index 0000000..4203749 --- /dev/null +++ b/src/components/Dialogs/EditDish.js @@ -0,0 +1,409 @@ +import React, { useState } from "react"; +import { useSelector, useDispatch } from "react-redux"; +import { useParams, useHistory } from "react-router-dom"; +import Divider from "@material-ui/core/Divider"; +import ButtonSecondary from "../Input/ButtonSecondary"; +import ButtonPrimary from "../Input/ButtonPrimary"; +import TextField from "@material-ui/core/TextField"; +import { makeStyles } from "@material-ui/core/styles"; +import TextFieldsIcon from "@material-ui/icons/TextFields"; +import AttachMoneyIcon from "@material-ui/icons/AttachMoney"; +import FitnessCenterIcon from "@material-ui/icons/FitnessCenter"; +import LocalHospitalIcon from "@material-ui/icons/LocalHospital"; +import FavoriteBorderIcon from "@material-ui/icons/FavoriteBorder"; +import { notification, refreshUserData } from "../../actions"; +import { showBackdrop, hideBackdrop } from "../../actions/toggles.js"; +import InputLabel from "@material-ui/core/InputLabel"; +import InputAdornment from "@material-ui/core/InputAdornment"; +import Checkboxes from "../Input/Checkboxes"; +import axios from "axios"; +import { backend } from "../../config"; +import MenuItem from "@material-ui/core/MenuItem"; +import FormControl from "@material-ui/core/FormControl"; +import Select from "@material-ui/core/Select"; +import ImageUpload from "../Input/ImageUpload"; +import Paper from "@material-ui/core/Paper"; +import validator from "validator"; +import DialogTitle from "@material-ui/core/DialogTitle"; +import DialogContent from "@material-ui/core/DialogContent"; +import Dialog from "@material-ui/core/Dialog"; + +const useStyles = makeStyles((theme) => ({ + root: { + margin: "auto", + textAlign: "center", + maxHeight: "90vh", + "& .MuiPaper-root": { + width: "auto", + backgroundColor: "#262626", + color: "#bbbbbb", + overflow: "visible", + }, + }, + closeButton: { + color: "#bbbbbb", + position: "absolute", + right: theme.spacing(1), + top: theme.spacing(1), + }, + textInput: { + margin: theme.spacing(2), + "& .MuiInputBase-root": { + color: "#bbbbbb", + }, + "& .MuiInputLabel-root": { + color: "#bbbbbb", + }, + }, + textInputFullWidth: { + marginTop: theme.spacing(2), + marginBottom: theme.spacing(2), + color: "#bbbbbb", + "& .MuiInputBase-root": { + color: "#bbbbbb", + }, + "& .MuiInputLabel-root": { + color: "#bbbbbb", + }, + "$ .MuiFormHelperText-root": { + color: "#bbbbbb", + }, + }, + formControl: { + margin: theme.spacing(2), + minWidth: 100, + "& .MuiInputBase-root": { + color: "#bbbbbb", + }, + "$ .MuiSelect-root": { + color: "#bbbbbb", + }, + "& .MuiInputLabel-root": { + color: "#bbbbbb", + }, + }, + selectEmpty: { + marginTop: theme.spacing(2), + }, +})); + +export default function EditDish() { + const styles = useStyles(); + const token = useSelector((state) => state.data.userData.jwt); + const { id } = useParams(); + const dishes = useSelector((state) => state.dishes); + const history = useHistory(); + const dispatch = useDispatch(); + const dish = dishes.find((element) => element._id === id); + if (dish === undefined) history.push("/"); + const initialState = { + restaurantId: dish.restaurantId, + name: dish.name, + category: dish.category, + price: dish.price, + notes: dish.notes, + imgUrl: dish.imgUrl, + hidden: false, + weight: dish.weight, + allergens: { + gluten: dish.allergens.gluten, + lactose: dish.allergens.lactose, + soy: dish.allergens.soy, + eggs: dish.allergens.eggs, + seaFood: dish.allergens.seaFood, + peanuts: dish.allergens.peanuts, + sesame: dish.allergens.sesame, + }, + ingredients: dish.ingredients, + glicemicIndex: dish.glicemicIndex, + kCal: dish.kCal, + vegan: dish.vegan, + vegetarian: dish.vegetarian, + charLeft: 200 - dish.notes.length, + nameError: false, + categoryError: false, + priceError: false, + }; + const [state, setState] = useState(initialState); + + const restaurants = useSelector((state) => state.data.userData.restaurants); + function matchId(element) { + return element._id === dish.restaurantId; + } + const restaurant = restaurants.find(matchId); + if (restaurant === undefined) history.push("/"); + + const Categories = restaurant.categories.map((category) => { + return ( + + {category} + + ); + }); + + // HANDLERS + + const handleCategoryChange = (event) => { + setState({ ...state, category: event.target.value }); + }; + + const handleAdd = () => { + if (validateForm()) { + sendForm(); + } else { + dispatch(notification("Popraw dane", "error")); + } + }; + + const handleImageUploaded = (link) => { + setState({ ...state, imgUrl: link }); + }; + + const handleDescriptionChange = (event) => { + let stringLength = event.target.value.length; + let charleft = 200 - stringLength; + setState({ ...state, notes: event.target.value, charLeft: charleft }); + }; + + const validateForm = () => { + const validation = { + name: validator.isLength(state.name, { max: 50, min: 1 }), + category: restaurant.categories.includes(state.category), + price: validator.isAlphanumeric(state.price), + }; + + setState({ + ...state, + nameError: !validation.name, + categoryError: !validation.category, + priceError: !validation.price, + }); + + return validation.name && validation.category && validation.price; + }; + + const sendForm = () => { + const data = { + dishId: id, + restaurantId: state.restaurantId, + name: state.name, + category: state.category, + price: state.price, + notes: state.notes, + imgUrl: state.imgUrl, + hidden: false, + weight: state.weight, + allergens: state.allergens, + ingredients: state.ingredients, + glicemicIndex: state.glicemicIndex, + kCal: state.kCal, + vegan: state.vegan, + vegetarian: state.vegetarian, + }; + dispatch(showBackdrop()); + axios({ + url: backend + "/dish", + method: "PUT", + data: data, + headers: { + "x-auth-token": token, + }, + }) + .then((response) => { + dispatch(hideBackdrop()); + dispatch(notification("Danie zmienione.", "success")); + dispatch(refreshUserData(token)); + history.push(`/dish/${dish._id}`); + }) + .catch((error) => { + dispatch(hideBackdrop()); + dispatch( + notification("Wystąpił nieoczekiwany błąd, przepraszamy.", "error") + ); + }); + }; + + return ( +
+ + {state.name} + + +
+ +
+ + setState({ ...state, name: event.target.value }) + } + InputProps={{ + startAdornment: ( + + + + ), + }} + /> + + Kategoria + + + + setState({ ...state, price: event.target.value }) + } + InputProps={{ + startAdornment: ( + + + + ), + }} + /> + + setState({ ...state, weight: event.target.value }) + } + InputProps={{ + startAdornment: ( + + + + ), + }} + /> + + setState({ ...state, glicemicIndex: event.target.value }) + } + InputProps={{ + startAdornment: ( + + + + ), + }} + /> + + setState({ ...state, kCal: event.target.value }) + } + InputProps={{ + startAdornment: ( + + + + ), + }} + /> +
+
+ + setState({ ...state, ingredients: event.target.value }) + } + /> + + setState({ ...state, vegan: !state.vegan })} + onVegetarian={() => + setState({ ...state, vegetarian: !state.vegetarian }) + } + onUpdate={(updated) => + setState({ ...state, allergens: updated }) + } + /> +
+ + +

Dodaj zdjęcie.

+ handleImageUploaded(link)} + /> + +
+
+ history.push("/")} /> + handleAdd()} /> +
+ + +
+ ); +} diff --git a/src/components/Dialogs/EditRestaurant.js b/src/components/Dialogs/EditRestaurant.js index cbe1d88..2417a35 100644 --- a/src/components/Dialogs/EditRestaurant.js +++ b/src/components/Dialogs/EditRestaurant.js @@ -1,5 +1,5 @@ import React, { useState } from "react"; -import { useSelector } from "react-redux"; +import { useSelector, useDispatch } from "react-redux"; import { useParams, useHistory } from "react-router-dom"; import { makeStyles } from "@material-ui/core/styles"; import List from "@material-ui/core/List"; @@ -20,6 +20,7 @@ import EditRestaurantLocation from "../EditRestaurant/EditRestaurantLocation"; import EditRestaurantMenu from "../EditRestaurant/EditRestaurantMenu"; import EditRestaurantPhoto from "../EditRestaurant/EditRestaurantPhoto"; import EditRestaurantSubscription from "../EditRestaurant/EditRestaurantSubscription"; +import { fetchAllDishes } from "../../actions"; const useStyles = makeStyles((theme) => ({ main: { @@ -44,6 +45,7 @@ const useStyles = makeStyles((theme) => ({ })); export default function EditRestaurant(props) { + const dispatch = useDispatch(); const classes = useStyles(); const [tab, setTab] = useState(0); const history = useHistory(); @@ -67,6 +69,7 @@ export default function EditRestaurant(props) { badgeData.secondaryText = `Aktywna do: ${restaurant.subscriptionDue}`; } }; + dispatch(fetchAllDishes(restaurant._id)); const handleListItemClick = (event, index) => { setTab(index); diff --git a/src/components/Dialogs/NewDish.js b/src/components/Dialogs/NewDish.js index e5f1efe..8aaf699 100644 --- a/src/components/Dialogs/NewDish.js +++ b/src/components/Dialogs/NewDish.js @@ -22,6 +22,7 @@ import { showBackdrop, hideBackdrop } from "../../actions/toggles.js"; import InputLabel from "@material-ui/core/InputLabel"; import InputAdornment from "@material-ui/core/InputAdornment"; import Checkboxes from "../Input/Checkboxes"; +import { backend } from "../../config"; // ICONS @@ -192,7 +193,7 @@ export default function NewRestaurant() { }; dispatch(showBackdrop()); axios({ - url: "http://localhost:4000/dish", + url: backend + "/dish", method: "POST", data: data, headers: { diff --git a/src/components/Dialogs/NewRestaurant.js b/src/components/Dialogs/NewRestaurant.js index 39660a1..bcf0eb6 100644 --- a/src/components/Dialogs/NewRestaurant.js +++ b/src/components/Dialogs/NewRestaurant.js @@ -24,6 +24,7 @@ import { useSelector, useDispatch } from "react-redux"; import { notification, refreshUserData } from "../../actions"; import { showBackdrop, hideBackdrop } from "../../actions/toggles.js"; import InputWorkingHours from "../Input/InputWorkingHours"; +import { backend } from "../../config"; // ICONS import FastfoodIcon from "@material-ui/icons/Fastfood"; import LocationCityIcon from "@material-ui/icons/LocationCity"; @@ -152,7 +153,7 @@ export default function NewRestaurant() { }; dispatch(showBackdrop()); axios({ - url: "http://localhost:4000/restaurant", + url: backend + "/restaurant", method: "POST", data: data, headers: { diff --git a/src/components/EditRestaurant/EditRestaurantInfo.js b/src/components/EditRestaurant/EditRestaurantInfo.js index 5bd1e77..8e99779 100644 --- a/src/components/EditRestaurant/EditRestaurantInfo.js +++ b/src/components/EditRestaurant/EditRestaurantInfo.js @@ -23,6 +23,7 @@ import { showBackdrop, hideBackdrop } from "../../actions/toggles.js"; import { prepareTags } from "../../Services.js"; import axios from "axios"; import PasswordConfirmation from "../Dialogs/PasswordConfirmation"; +import { backend } from "../../config"; const useStyles = makeStyles((theme) => ({ textInput: { @@ -174,7 +175,7 @@ export default function EditRestaurantInfo(props) { }; dispatch(showBackdrop()); axios({ - url: "http://localhost:4000/restaurant", + url: backend + "/restaurant", method: "PUT", data: data, headers: { diff --git a/src/components/EditRestaurant/EditRestaurantLocation.js b/src/components/EditRestaurant/EditRestaurantLocation.js index f11d427..7dcf95a 100644 --- a/src/components/EditRestaurant/EditRestaurantLocation.js +++ b/src/components/EditRestaurant/EditRestaurantLocation.js @@ -5,6 +5,7 @@ import { useDispatch, useSelector } from "react-redux"; import { notification } from "../../actions"; import { showBackdrop, hideBackdrop } from "../../actions/toggles.js"; import axios from "axios"; +import { backend } from "../../config"; export default function EditRestaurantLocation(props) { const { @@ -52,7 +53,7 @@ export default function EditRestaurantLocation(props) { hidden: hidden, }; axios({ - url: "http://localhost:4000/restaurant", + url: backend + "/restaurant", method: "PUT", data: data, headers: { diff --git a/src/components/EditRestaurant/EditRestaurantMenu.js b/src/components/EditRestaurant/EditRestaurantMenu.js index d736062..fdcf43f 100644 --- a/src/components/EditRestaurant/EditRestaurantMenu.js +++ b/src/components/EditRestaurant/EditRestaurantMenu.js @@ -13,6 +13,7 @@ import axios from "axios"; import EditCategoriesList from "../Output/EditCategoriesList"; import { notification, refreshUserData } from "../../actions"; import { showBackdrop, hideBackdrop } from "../../actions/toggles.js"; +import { backend } from "../../config"; const useStyles = makeStyles((theme) => ({ root: { @@ -55,7 +56,7 @@ export default function EditRestaurantMenu(props) { action: "add", }; axios({ - url: "http://localhost:4000/restaurant/category", + url: backend + "/restaurant/category", method: "POST", data: data, headers: { @@ -107,6 +108,7 @@ export default function EditRestaurantMenu(props) { diff --git a/src/components/EditRestaurant/EditRestaurantPhoto.js b/src/components/EditRestaurant/EditRestaurantPhoto.js index ca59ba2..70379ae 100644 --- a/src/components/EditRestaurant/EditRestaurantPhoto.js +++ b/src/components/EditRestaurant/EditRestaurantPhoto.js @@ -6,6 +6,7 @@ import { useDispatch, useSelector } from "react-redux"; import { notification } from "../../actions"; import { showBackdrop, hideBackdrop } from "../../actions/toggles.js"; import axios from "axios"; +import { backend } from "../../config"; export default function EditRestaurantPhoto(props) { const { @@ -49,7 +50,7 @@ export default function EditRestaurantPhoto(props) { hidden: hidden, }; axios({ - url: "http://localhost:4000/restaurant", + url: backend + "/restaurant", method: "PUT", data: data, headers: { diff --git a/src/components/Input/Checkboxes.js b/src/components/Input/Checkboxes.js index 8b7be57..9f4b954 100644 --- a/src/components/Input/Checkboxes.js +++ b/src/components/Input/Checkboxes.js @@ -54,8 +54,8 @@ export default function Checkboxes(props) { { + props.onUpdate({ ...state, gluten: !state.gluten }); setState({ ...state, gluten: !state.gluten }); - props.onUpdate(state); }} name="gluten" /> @@ -67,8 +67,8 @@ export default function Checkboxes(props) { { + props.onUpdate({ ...state, lactose: !state.lactose }); setState({ ...state, lactose: !state.lactose }); - props.onUpdate(state); }} name="lactose" /> @@ -80,8 +80,8 @@ export default function Checkboxes(props) { { + props.onUpdate({ ...state, soy: !state.soy }); setState({ ...state, soy: !state.soy }); - props.onUpdate(state); }} name="soy" /> @@ -93,8 +93,8 @@ export default function Checkboxes(props) { { + props.onUpdate({ ...state, eggs: !state.eggs }); setState({ ...state, eggs: !state.eggs }); - props.onUpdate(state); }} name="eggs" /> @@ -106,8 +106,8 @@ export default function Checkboxes(props) { { + props.onUpdate({ ...state, seaFood: !state.seaFood }); setState({ ...state, seaFood: !state.seaFood }); - props.onUpdate(state); }} name="seaFood" /> @@ -119,8 +119,8 @@ export default function Checkboxes(props) { { + props.onUpdate({ ...state, peanuts: !state.peanuts }); setState({ ...state, peanuts: !state.peanuts }); - props.onUpdate(state); }} name="peanuts" /> @@ -132,8 +132,8 @@ export default function Checkboxes(props) { { + props.onUpdate({ ...state, sesame: !state.sesame }); setState({ ...state, sesame: !state.sesame }); - props.onUpdate(state); }} name="sesame" /> diff --git a/src/components/Input/ImageUpload.js b/src/components/Input/ImageUpload.js index ccf9f9e..98da71c 100644 --- a/src/components/Input/ImageUpload.js +++ b/src/components/Input/ImageUpload.js @@ -2,6 +2,7 @@ import React, { useState } from "react"; import CircularProgress from "@material-ui/core/CircularProgress"; import { useSelector } from "react-redux"; import axios from "axios"; +import { backend } from "../../config"; export default function ImageUpload(props) { const { img } = props; @@ -13,7 +14,7 @@ export default function ImageUpload(props) { data.append("menuiImage", event.target.files[0]); setLoading(true); axios({ - url: "http://localhost:4000/img", + url: backend + "/img", method: "POST", data: data, headers: { diff --git a/src/components/Input/ImageUploadWide.js b/src/components/Input/ImageUploadWide.js index 45b4071..68e20b8 100644 --- a/src/components/Input/ImageUploadWide.js +++ b/src/components/Input/ImageUploadWide.js @@ -2,6 +2,7 @@ import React, { useState } from "react"; import CircularProgress from "@material-ui/core/CircularProgress"; import { useSelector } from "react-redux"; import axios from "axios"; +import { backend } from "../../config"; export default function ImageUpload(props) { const { img } = props; @@ -13,7 +14,7 @@ export default function ImageUpload(props) { data.append("menuiImage", event.target.files[0]); setLoading(true); axios({ - url: "http://localhost:4000/img", + url: backend + "/img", method: "POST", data: data, headers: { diff --git a/src/components/Output/EditCategoriesList.js b/src/components/Output/EditCategoriesList.js index 9ca970c..6ddde5f 100644 --- a/src/components/Output/EditCategoriesList.js +++ b/src/components/Output/EditCategoriesList.js @@ -1,4 +1,5 @@ import React, { useState } from "react"; +import { useDispatch, useSelector } from "react-redux"; import Accordion from "@material-ui/core/Accordion"; import AccordionSummary from "@material-ui/core/AccordionSummary"; import ExpandMoreIcon from "@material-ui/icons/ExpandMore"; @@ -7,6 +8,7 @@ import DeleteIcon from "@material-ui/icons/Delete"; import EditDishList from "./EditDishList"; import { makeStyles } from "@material-ui/core/styles"; import YesNo from "../Dialogs/YesNo"; +import { notification } from "../../actions"; const useStyles = makeStyles((theme) => ({ root: { @@ -32,13 +34,31 @@ const useStyles = makeStyles((theme) => ({ }, })); +const filterDishes = (dishes, category) => { + var result = []; + dishes.map((dish) => { + if (dish.category === category) { + result.push(dish); + } + return true; + }); + return result; +}; + export default function EditCategoriesList(props) { + const dispatch = useDispatch(); const [open, setOpen] = useState(false); const [selectedCategory, selectCategory] = useState(""); + const dishes = useSelector((state) => state.dishes); const classes = useStyles(); const handleDeleteButton = (category) => { - selectCategory(category); - setOpen(true); + const dishesInCategory = filterDishes(dishes, category); + if (dishesInCategory.length === 0) { + selectCategory(category); + setOpen(true); + } else { + dispatch(notification("Kategoria nie jest pusta!", "error")); + } }; const onCancel = () => { setOpen(false); @@ -64,7 +84,7 @@ export default function EditCategoriesList(props) { - + ); }); diff --git a/src/components/Output/EditDishList.js b/src/components/Output/EditDishList.js index 048f296..17c834c 100644 --- a/src/components/Output/EditDishList.js +++ b/src/components/Output/EditDishList.js @@ -1,9 +1,23 @@ -import React from "react"; -import { useSelector } from "react-redux"; +import React, { useState } from "react"; +import { useSelector, useDispatch } from "react-redux"; +import { useHistory } from "react-router-dom"; import List from "@material-ui/core/List"; import ListItem from "@material-ui/core/ListItem"; +import IconButton from "@material-ui/core/IconButton"; +import DeleteIcon from "@material-ui/icons/Delete"; +import EditIcon from "@material-ui/icons/Edit"; +import Switch from "@material-ui/core/Switch"; +import axios from "axios"; +import { backend } from "../../config"; +import YesNo from "../Dialogs/YesNo"; +import { notification, fetchAllDishes } from "../../actions"; export default function EditDishList(props) { + const [open, setOpen] = useState(false); + const [selectedDish, setDish] = useState(""); + const history = useHistory(); + const dispatch = useDispatch(); + const token = useSelector((state) => state.data.userData.jwt); const filterDishes = (dishes, category) => { var result = []; dishes.map((dish) => { @@ -15,16 +29,106 @@ export default function EditDishList(props) { return result; }; + const handleSetDishVisibility = (dishId, visible) => { + const data = { + dishId: dishId, + visible: visible, + }; + axios({ + method: "POST", + url: backend + "/dish/hidden", + data: data, + headers: { + "x-auth-token": token, + }, + }) + .then((res) => { + dispatch(fetchAllDishes(props.restaurantId)); + dispatch(notification("Zmieniono widoczność dania.", "success")); + }) + .catch((error) => { + dispatch(notification("Nie udało się zmienić :(", "error")); + }); + }; + + const selectDish = (dishId) => { + setDish(dishId); + setOpen(true); + }; + + const onCancel = () => { + setOpen(false); + }; + const onAccept = () => { + setOpen(false); + axios({ + method: "DELETE", + url: backend + "/dish", + data: { + dishId: selectedDish, + }, + headers: { + "x-auth-token": token, + }, + }) + .then((res) => { + dispatch(fetchAllDishes(props.restaurantId)); + dispatch(notification("Usunięto.", "success")); + }) + .catch((error) => { + dispatch(notification("Nie udało się usunąć :(", "error")); + }); + }; + const allDishes = useSelector((state) => state.dishes); const thisCategoryDishes = filterDishes(allDishes, props.category); const Dishes = thisCategoryDishes.map((dish) => { - return {dish.name}; + return ( + +
+
+
+

{dish.name}

+
+
+ handleSetDishVisibility(dish._id, dish.hidden)} + /> + selectDish(dish._id)} + > + + + history.push(`/editDish/${dish._id}`)} + > + + +
+
+ + ); }); return ( + {thisCategoryDishes.length === 0 ? ( - Kategoria pusta + + Kategoria pusta + ) : ( Dishes )} diff --git a/src/config.js b/src/config.js new file mode 100644 index 0000000..c8f4712 --- /dev/null +++ b/src/config.js @@ -0,0 +1 @@ +export const backend = "http://localhost:4000"; diff --git a/src/styles/EditRestaurant.scss b/src/styles/EditRestaurant.scss index 948921a..64cfc09 100644 --- a/src/styles/EditRestaurant.scss +++ b/src/styles/EditRestaurant.scss @@ -92,3 +92,36 @@ font-size: 14px; } } + +.editRestaurant-dish { + background-color: #323232; + width: 100%; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + margin: 0px 8px 0px 8px; + padding: 4px; + border-radius: 5px; + h3 { + font-size: 15px; + margin-left: 14px; + } +} + +.editRestaurant-dishImg { + height: 60px; + width: 60px; + border-radius: 5px; + background-size: cover; +} + +.editRestaurant-dishLeft { + display: flex; + flex-direction: row; + align-items: center; +} + +.editRestaurant-dish:hover { + background-color: #3b3b3b; +}