From e242e01320d4544ae7eb15fdc431184ba76f64cc Mon Sep 17 00:00:00 2001 From: Jonasz Bigda Date: Wed, 30 Sep 2020 21:57:51 +0200 Subject: [PATCH] web client v0.6 (add dish) --- src/App.js | 5 + src/components/Dialogs/EditRestaurant.js | 9 +- src/components/Dialogs/NewDish.js | 419 ++++++++++++++++++ src/components/Dialogs/NewRestaurant.js | 2 +- src/components/Dialogs/YesNo.js | 56 +++ .../EditRestaurant/EditRestaurantMenu.js | 67 ++- src/components/EditRestaurant/LunchMenu.js | 105 ++++- src/components/Input/ButtonPrimary.js | 2 +- src/components/Input/Checkboxes.js | 175 ++++++++ src/components/Output/EditCategoriesList.js | 78 ++++ src/components/Output/EditDishList.js | 33 ++ src/styles/Dialogs.scss | 7 + src/styles/EditRestaurant.scss | 5 +- 13 files changed, 899 insertions(+), 64 deletions(-) create mode 100644 src/components/Dialogs/NewDish.js create mode 100644 src/components/Dialogs/YesNo.js create mode 100644 src/components/Input/Checkboxes.js create mode 100644 src/components/Output/EditCategoriesList.js create mode 100644 src/components/Output/EditDishList.js diff --git a/src/App.js b/src/App.js index 8ec2e74..0e39f46 100644 --- a/src/App.js +++ b/src/App.js @@ -21,6 +21,7 @@ import ResetPassword from "./components/Dialogs/ResetPassword"; import Contact from "./components/Output/Contact"; import Settings from "./components/Dialogs/Settings"; import EditRestaurant from "./components/Dialogs/EditRestaurant"; +import NewDish from "./components/Dialogs/NewDish"; const theme = createMuiTheme({ palette: { @@ -68,6 +69,10 @@ function App(props) { + } + /> diff --git a/src/components/Dialogs/EditRestaurant.js b/src/components/Dialogs/EditRestaurant.js index 4260451..cbe1d88 100644 --- a/src/components/Dialogs/EditRestaurant.js +++ b/src/components/Dialogs/EditRestaurant.js @@ -53,6 +53,8 @@ export default function EditRestaurant(props) { color: "", secondaryText: "", }; + const restaurant = restaurants.find(matchId); + if (restaurant === undefined) history.push("/"); const badgeInit = () => { if ( !restaurant.subscriptionActive || @@ -73,8 +75,6 @@ export default function EditRestaurant(props) { function matchId(element) { return element._id === id; } - const restaurant = restaurants.find(matchId); - if (restaurant === undefined) history.push("/"); badgeInit(); return ( @@ -153,7 +153,10 @@ export default function EditRestaurant(props) { - + history.push(`/newDish/${restaurant._id}`)} + > diff --git a/src/components/Dialogs/NewDish.js b/src/components/Dialogs/NewDish.js new file mode 100644 index 0000000..e5f1efe --- /dev/null +++ b/src/components/Dialogs/NewDish.js @@ -0,0 +1,419 @@ +import React, { useState } 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 "../Input/ButtonSecondary"; +import IconButton from "@material-ui/core/IconButton"; +import TextField from "@material-ui/core/TextField"; +import CloseIcon from "@material-ui/icons/Close"; +import Paper from "@material-ui/core/Paper"; +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 validator from "validator"; +import { useHistory, useParams } from "react-router-dom"; +import axios from "axios"; +import { useSelector, useDispatch } from "react-redux"; +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"; + +// ICONS + +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"; + +// SETUP + +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 NewRestaurant() { + const dispatch = useDispatch(); + const { restaurantID } = useParams(); + const initialState = { + restaurantId: restaurantID, + name: "", + category: "", + price: "", + notes: "", + imgUrl: "", + hidden: false, + weight: "", + allergens: { + gluten: false, + lactose: false, + soy: false, + eggs: false, + seaFood: false, + peanuts: false, + sesame: false, + }, + ingredients: "", + glicemicIndex: "", + kCal: "", + vegan: false, + vegetarian: false, + charLeft: 200, + nameError: false, + categoryError: false, + priceError: false, + }; + const [state, setState] = useState(initialState); + const styles = useStyles(); + const history = useHistory(); + const token = useSelector((state) => state.data.userData.jwt); + const restaurants = useSelector((state) => state.data.userData.restaurants); + function matchId(element) { + return element._id === 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 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 = { + restaurantId: 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: "http://localhost:4000/dish", + method: "POST", + data: data, + headers: { + "x-auth-token": token, + }, + }) + .then((response) => { + dispatch(hideBackdrop()); + dispatch(notification("Danie dodane pomyślnie.", "success")); + dispatch(refreshUserData(token)); + history.push(`/editRestaurant/${restaurantID}`); + }) + .catch((error) => { + dispatch(hideBackdrop()); + dispatch( + notification( + "Wystąpił nieoczekiwany błąd, przepraszamy za utrudnienia. Spróbuj ponownie za chwilę.", + "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 }); + }; + + // COMPONENTS + + return ( +
+ + Dodaj danie + history.goBack()} + aria-label="close" + > + + + + +

Danie zostanie dodane do: {restaurant.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)} + /> + +
+ +
+ + +
+ ); +} diff --git a/src/components/Dialogs/NewRestaurant.js b/src/components/Dialogs/NewRestaurant.js index 07ec6ee..39660a1 100644 --- a/src/components/Dialogs/NewRestaurant.js +++ b/src/components/Dialogs/NewRestaurant.js @@ -39,7 +39,7 @@ const useStyles = makeStyles((theme) => ({ root: { margin: "auto", textAlign: "center", - maxHeight: "700px", + maxHeight: "90vh", "& .MuiPaper-root": { width: "auto", backgroundColor: "#262626", diff --git a/src/components/Dialogs/YesNo.js b/src/components/Dialogs/YesNo.js new file mode 100644 index 0000000..313e54b --- /dev/null +++ b/src/components/Dialogs/YesNo.js @@ -0,0 +1,56 @@ +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 "../Input/ButtonSecondary"; +import ButtonPrimary from "../Input/ButtonPrimary"; +import IconButton from "@material-ui/core/IconButton"; +import CloseIcon from "@material-ui/icons/Close"; + +export default function PasswordConfirmation(props) { + const loginStyles = makeStyles((theme) => ({ + root: { + textAlign: "center", + "& .MuiPaper-root": { + backgroundColor: "#262626", + color: "#bbbbbb", + }, + minWidth: "250px", + }, + closeButton: { + color: "#bbbbbb", + position: "absolute", + right: theme.spacing(1), + top: theme.spacing(1), + }, + })); + + const loginClass = loginStyles(); + + return ( + + Na pewno? + + + + + +
+ + +
+ + + ); +} diff --git a/src/components/EditRestaurant/EditRestaurantMenu.js b/src/components/EditRestaurant/EditRestaurantMenu.js index c2be503..d736062 100644 --- a/src/components/EditRestaurant/EditRestaurantMenu.js +++ b/src/components/EditRestaurant/EditRestaurantMenu.js @@ -3,18 +3,14 @@ import { useSelector, useDispatch } from "react-redux"; import Divider from "@material-ui/core/Divider"; import Accordion from "@material-ui/core/Accordion"; import AccordionSummary from "@material-ui/core/AccordionSummary"; -import ExpandMoreIcon from "@material-ui/icons/ExpandMore"; import ButtonSecondary from "../Input/ButtonSecondary"; import TextField from "@material-ui/core/TextField"; -import IconButton from "@material-ui/core/IconButton"; -import DeleteIcon from "@material-ui/icons/Delete"; -import List from "@material-ui/core/List"; -import ListItem from "@material-ui/core/ListItem"; import AddIcon from "@material-ui/icons/Add"; import { makeStyles } from "@material-ui/core/styles"; import validator from "validator"; import LunchMenu from "./LunchMenu"; import axios from "axios"; +import EditCategoriesList from "../Output/EditCategoriesList"; import { notification, refreshUserData } from "../../actions"; import { showBackdrop, hideBackdrop } from "../../actions/toggles.js"; @@ -30,6 +26,7 @@ const useStyles = makeStyles((theme) => ({ textInputFullWidth: { marginTop: theme.spacing(2), marginBottom: theme.spacing(2), + flexGrow: 5, "& .MuiInputBase-root": { color: "#bbbbbb", }, @@ -77,46 +74,42 @@ export default function EditRestaurantMenu(props) { } }; - const filterDishes = (dishes, category) => { - var result = []; - dishes.map((dish) => { - if (dish.category === category) { - result.push(dish); - } - return true; - }); - return result; + const removeCategory = (categoryName) => { + dispatch(showBackdrop()); + const data = { + restaurantId: props.restaurant._id, + category: categoryName, + action: "delete", + }; + axios({ + url: "http://localhost:4000/restaurant/category", + method: "POST", + data: data, + headers: { + "x-auth-token": token, + }, + }) + .then((res) => { + dispatch(hideBackdrop()); + dispatch(notification("Usunięto kategorię.", "success")); + dispatch(refreshUserData(token)); + }) + .catch((e) => { + dispatch(hideBackdrop()); + dispatch(notification("Nie udało się usunąć kategorii :(", "error")); + }); }; - const CategoriesList = categories.map((category) => { - return ( - - } - > -

{category}

-
-
Dania: 0
- - - -
- - - ); - }); - return (

Menu

- {CategoriesList} + } diff --git a/src/components/EditRestaurant/LunchMenu.js b/src/components/EditRestaurant/LunchMenu.js index fa1deba..fdf9c40 100644 --- a/src/components/EditRestaurant/LunchMenu.js +++ b/src/components/EditRestaurant/LunchMenu.js @@ -1,31 +1,96 @@ -import React from "react"; +import React, { useState } from "react"; +import Accordion from "@material-ui/core/Accordion"; +import AccordionSummary from "@material-ui/core/AccordionSummary"; +import ExpandMoreIcon from "@material-ui/icons/ExpandMore"; import IconButton from "@material-ui/core/IconButton"; import DeleteIcon from "@material-ui/icons/Delete"; -import List from "@material-ui/core/List"; -import ListItem from "@material-ui/core/ListItem"; +import { makeStyles } from "@material-ui/core/styles"; +import YesNo from "../Dialogs/YesNo"; +import ButtonSecondary from "../Input/ButtonSecondary"; +import TextField from "@material-ui/core/TextField"; +import AddIcon from "@material-ui/icons/Add"; -export default function LunchMenu(props) { - const { lunchMenu } = props; - const LunchDishes = () => { - if (lunchMenu.length > 0) { - lunchMenu.map((dish) => { - return ( - - Dish name +const useStyles = makeStyles((theme) => ({ + root: { + backgroundColor: "#262626", + color: "#bbbbbb", + width: "100%", + marginBottom: "24px", + }, + expandIcon: { + color: "#bbbbbb", + }, + textInputFullWidth: { + marginTop: theme.spacing(2), + marginBottom: theme.spacing(2), + flexGrow: 5, + "& .MuiInputBase-root": { + color: "#bbbbbb", + }, + "& .MuiInputLabel-root": { + color: "#bbbbbb", + }, + "$ .MuiFormHelperText-root": { + color: "#bbbbbb", + }, + }, +})); + +export default function EditCategoriesList(props) { + const [open, setOpen] = useState(false); + const [newSet, setNewSet] = useState(""); + const classes = useStyles(); + const handleDeleteButton = (set) => { + setOpen(true); + }; + const onCancel = () => { + setOpen(false); + }; + const onAccept = () => { + setOpen(false); + }; + const SetList = props.lunchMenu.map((set) => { + return ( + + } + > +

{set.name}

+
handleDeleteButton(set)} > - - ); - }); - } else { - return Lunch menu puste; - } - }; +
+ + + ); + }); - return {LunchDishes}; + return ( +
+ + {props.lunchMenu.length === 0 ?

Lunch menu puste

: SetList} + + } + > +

Dodaj zestaw

+ +
+ setNewSet(event.target.value)} + label="Nazwa zestawu" + variant="outlined" + > + {}} text="Dodaj" /> +
+ +
+ ); } diff --git a/src/components/Input/ButtonPrimary.js b/src/components/Input/ButtonPrimary.js index ee4ab6e..5dafbfd 100644 --- a/src/components/Input/ButtonPrimary.js +++ b/src/components/Input/ButtonPrimary.js @@ -6,7 +6,7 @@ const StyledButton = withStyles({ root: { backgroundColor: "#696969", color: "#262626", - margin: "16px 16px 16px 0px", + margin: "16px 16px 16px 16px", padding: "8px 12px 8px 12px", "&:hover": { backgroundColor: "#808080", diff --git a/src/components/Input/Checkboxes.js b/src/components/Input/Checkboxes.js new file mode 100644 index 0000000..8b7be57 --- /dev/null +++ b/src/components/Input/Checkboxes.js @@ -0,0 +1,175 @@ +import React, { useState } from "react"; +import { makeStyles } from "@material-ui/core/styles"; +import FormLabel from "@material-ui/core/FormLabel"; +import FormControl from "@material-ui/core/FormControl"; +import FormGroup from "@material-ui/core/FormGroup"; +import FormControlLabel from "@material-ui/core/FormControlLabel"; +import Checkbox from "@material-ui/core/Checkbox"; +import FormHelperText from "@material-ui/core/FormHelperText"; + +const useStyles = makeStyles((theme) => ({ + root: { + "& .MuiFormLabel-root": { + color: "#e99800", + marginBottom: theme.spacing(2), + marginLeft: "auto", + marginRight: "auto", + }, + "& .MuiFormHelperText-root": { + color: "#7e7e7e", + }, + "& .MuiFormGroup-root": { + display: "inline", + }, + border: "1px solid #1c1c1c", + borderRadius: "6px", + marginBottom: theme.spacing(2), + }, + formControl: { + margin: theme.spacing(2), + alignItems: "center", + }, +})); + +export default function Checkboxes(props) { + const classes = useStyles(); + const initialState = { + gluten: props.allergens.gluten, + lactose: props.allergens.lactose, + soy: props.allergens.soy, + eggs: props.allergens.eggs, + seaFood: props.allergens.seaFood, + peanuts: props.allergens.peanuts, + sesame: props.allergens.sesame, + }; + const [state, setState] = useState(initialState); + + return ( +
+ + Alergeny + + { + setState({ ...state, gluten: !state.gluten }); + props.onUpdate(state); + }} + name="gluten" + /> + } + label="Gluten" + /> + { + setState({ ...state, lactose: !state.lactose }); + props.onUpdate(state); + }} + name="lactose" + /> + } + label="Laktoza" + /> + { + setState({ ...state, soy: !state.soy }); + props.onUpdate(state); + }} + name="soy" + /> + } + label="Soja" + /> + { + setState({ ...state, eggs: !state.eggs }); + props.onUpdate(state); + }} + name="eggs" + /> + } + label="Jaja" + /> + { + setState({ ...state, seaFood: !state.seaFood }); + props.onUpdate(state); + }} + name="seaFood" + /> + } + label="Owoce morza" + /> + { + setState({ ...state, peanuts: !state.peanuts }); + props.onUpdate(state); + }} + name="peanuts" + /> + } + label="Orzechy" + /> + { + setState({ ...state, sesame: !state.sesame }); + props.onUpdate(state); + }} + name="sesame" + /> + } + label="Sezam" + /> + + + Jeżeli nie masz pewności, czy danie zawiera alergen, zaznacz go :) + + + + Inne + + props.onVegan()} + name="vegan" + /> + } + label="Danie wegańskie" + /> + props.onVegetarian()} + name="vegetarian" + /> + } + label="Danie wegetariańskie" + /> + + +
+ ); +} diff --git a/src/components/Output/EditCategoriesList.js b/src/components/Output/EditCategoriesList.js new file mode 100644 index 0000000..9ca970c --- /dev/null +++ b/src/components/Output/EditCategoriesList.js @@ -0,0 +1,78 @@ +import React, { useState } from "react"; +import Accordion from "@material-ui/core/Accordion"; +import AccordionSummary from "@material-ui/core/AccordionSummary"; +import ExpandMoreIcon from "@material-ui/icons/ExpandMore"; +import IconButton from "@material-ui/core/IconButton"; +import DeleteIcon from "@material-ui/icons/Delete"; +import EditDishList from "./EditDishList"; +import { makeStyles } from "@material-ui/core/styles"; +import YesNo from "../Dialogs/YesNo"; + +const useStyles = makeStyles((theme) => ({ + root: { + backgroundColor: "#262626", + color: "#bbbbbb", + width: "100%", + }, + expandIcon: { + color: "#bbbbbb", + }, + textInputFullWidth: { + marginTop: theme.spacing(2), + marginBottom: theme.spacing(2), + "& .MuiInputBase-root": { + color: "#bbbbbb", + }, + "& .MuiInputLabel-root": { + color: "#bbbbbb", + }, + "$ .MuiFormHelperText-root": { + color: "#bbbbbb", + }, + }, +})); + +export default function EditCategoriesList(props) { + const [open, setOpen] = useState(false); + const [selectedCategory, selectCategory] = useState(""); + const classes = useStyles(); + const handleDeleteButton = (category) => { + selectCategory(category); + setOpen(true); + }; + const onCancel = () => { + setOpen(false); + }; + const onAccept = () => { + setOpen(false); + props.deleteCategory(selectedCategory); + }; + const CategoriesList = props.categories.map((category) => { + return ( + + } + > +

{category}

+
+ handleDeleteButton(category)} + > + + +
+ + + + ); + }); + + return ( +
+ + {CategoriesList} +
+ ); +} diff --git a/src/components/Output/EditDishList.js b/src/components/Output/EditDishList.js new file mode 100644 index 0000000..048f296 --- /dev/null +++ b/src/components/Output/EditDishList.js @@ -0,0 +1,33 @@ +import React from "react"; +import { useSelector } from "react-redux"; +import List from "@material-ui/core/List"; +import ListItem from "@material-ui/core/ListItem"; + +export default function EditDishList(props) { + const filterDishes = (dishes, category) => { + var result = []; + dishes.map((dish) => { + if (dish.category === category) { + result.push(dish); + } + return true; + }); + return result; + }; + + const allDishes = useSelector((state) => state.dishes); + const thisCategoryDishes = filterDishes(allDishes, props.category); + const Dishes = thisCategoryDishes.map((dish) => { + return {dish.name}; + }); + + return ( + + {thisCategoryDishes.length === 0 ? ( + Kategoria pusta + ) : ( + Dishes + )} + + ); +} diff --git a/src/styles/Dialogs.scss b/src/styles/Dialogs.scss index 0d4284c..05c3283 100644 --- a/src/styles/Dialogs.scss +++ b/src/styles/Dialogs.scss @@ -11,6 +11,13 @@ } } +.yesno-dialog-buttons { + display: flex; + justify-content: center; + align-items: center; + flex-direction: row; +} + .register-dialog-actions { display: flex; justify-content: center; diff --git a/src/styles/EditRestaurant.scss b/src/styles/EditRestaurant.scss index b888b33..948921a 100644 --- a/src/styles/EditRestaurant.scss +++ b/src/styles/EditRestaurant.scss @@ -1,7 +1,8 @@ .editRestaurant-container { min-width: 70%; min-height: 600px; - max-width: 100%; + max-height: 80vh; + max-width: 80%; background-color: $dark-gray; border-radius: 15px; display: flex; @@ -27,7 +28,6 @@ justify-content: space-between; align-items: center; width: 100%; - max-height: 600px; overflow: auto; h3 { font-weight: 400; @@ -53,6 +53,7 @@ grid-column-start: 1; grid-column-end: 3; margin-bottom: 16px; + width: 100%; } .workingHours-container {