UI Mechanics / New Look (orange - gray)

src/components/ButtonPrimary.js

@@ -4,8 +4,9 @@ import Button from "@material-ui/core/Button";
 
 const StyledButton = withStyles({
   root: {
-    background: "white",
-    color: "#0e8496",
+    background: "none",
+    color: "white",
+    border: "solid 1px white",
     margin: "16px 16px 16px 0px",
     padding: "8px 12px 8px 12px",
     "&:hover": {

src/components/ButtonSecondary.js

@@ -5,9 +5,9 @@ import Button from "@material-ui/core/Button";
 const StylizedButton = withStyles({
   root: {
     background: "#01c3a9",
-    color: "white",
-    margin: "16px 16px 16px 0px",
-    padding: "8px 12px 8px 12px",
+    color: "#262626",
+    margin: "16px 16px 16px 16px",
+    padding: "8px 16px 8px 16px",
     borderColor: "white",
     "&:hover": {
       backgroundColor: "#00af98",

src/components/CardDish.js

@@ -1,7 +1,18 @@
 import React from "react";
+import Pictograms from "./Pictograms";
+import { extractTags } from "../Services";
 
 export default function CardDish(props) {
-  const { name, price, imgUrl } = props.dish;
+  const {
+    name,
+    price,
+    imgUrl,
+    notes,
+    weight,
+    vegan,
+    vegetarian,
+    allergens,
+  } = props.dish;
 
   return (
     <div className="carddish-container">
@@ -10,10 +21,14 @@ export default function CardDish(props) {
           className="carddish-img"
           style={{ backgroundImage: "url(" + imgUrl + ")" }}
         />
-        <h2>{name}</h2>
+        <div className="carddish-left-info">
+          <h2>{name}</h2>
+          <p>{weight}</p>
+          <Pictograms pictograms={extractTags(allergens)} />
+        </div>
       </div>
       <div className="carddish-right">
-        <h5>{price}</h5>
+        <h5>{price} zł</h5>
       </div>
     </div>
   );

src/components/CardRestaurant.js

@@ -31,7 +31,7 @@ export default function CardRestaurant(props) {
           <h1>{props.name}</h1>
           <hr />
           <h3>Miasto: {props.city}</h3>
-          <h3>Godziny otwarcia: {props.hours}</h3>
+          <h3>Otwarte: {props.hours}</h3>
         </div>
         <div className="card-description">
           <p>{props.description}</p>

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 (
+    <div>
+      <Dialog
+        className={loginClass.root}
+        onClose={() => dispatch(hideLoginDialog())}
+        open={loginDialog}
+        aria-labelledby="login-title"
+      >
+        <DialogTitle id="login-title">Logowanie</DialogTitle>
+        <IconButton
+          className={loginClass.closeButton}
+          onClick={() => dispatch(hideLoginDialog())}
+          aria-label="close"
+        >
+          <CloseIcon />
+        </IconButton>
+        <Divider />
+        <DialogContent>
+          <TextField
+            className={loginClass.textInput}
+            required
+            id="email"
+            label="Email"
+            type="email"
+            variant="outlined"
+          />
+          <TextField
+            className={loginClass.textInput}
+            required
+            id="password"
+            label="Hasło"
+            type="password"
+            variant="outlined"
+          />
+          <div className="login-dialog-buttons">
+            <ButtonSecondary
+              onClick={() => dispatch(tryLogin("jonasz@bankai.pl"))}
+              text="Zaloguj"
+            />
+          </div>
+          <p>
+            Nie masz konta?
+            <span>
+              <p>Zarejestruj się.</p>
+            </span>
+          </p>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}

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 (
-    <Accordion>
-      <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+    <Accordion className={classes.root}>
+      <AccordionSummary
+        expandIcon={<ExpandMoreIcon className={classes.expandIcon} />}
+      >
         <h4>{props.name}</h4>
       </AccordionSummary>
       <List>{dishCards}</List>

src/components/Pictograms.js

@@ -16,6 +16,19 @@ 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 pictograms = props.pictograms.map((pictogram, index) => (
+    <img
+      key={index}
+      className="pictogram"
+      src={getImage(pictogram)}
+      alt={pictogram}
+    />
+  ));
+
+  return <div className="pictograms-container">{pictograms}</div>;
+}
+
 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) => (
-    <img
-      key={index}
-      className="pictogram"
-      src={getImage(pictogram)}
-      alt={pictogram}
-    />
-  ));
-
-  return <div className="pictograms-container">{pictograms}</div>;
-}

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) => (
+    <div key={index} className="separate-pictogram">
+      <h4>{getName(pictogram)}</h4>
+      <img className="pictogram" src={getImage(pictogram)} alt={pictogram} />
+    </div>
+  ));
+
+  return (
+    <div className="pictograms-container-separated">{pictogramsSeparated}</div>
+  );
+}
+
+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ą";
+  }
+}

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 (
     <div className="restaurant-container">
-      <div
-        className="restaurant-hero"
-        style={{ backgroundImage: "url(" + restaurant.imgUrl + ")" }}
-      >
-        <div className="restaurant-pictograms">
-          <Pictograms pictograms={extractTags(restaurant.tags)} />
+      <div className="restaurant-content">
+        <div className="restaurant-info">
+          <div
+            className="restaurant-hero"
+            style={{ backgroundImage: "url(" + restaurant.imgUrl + ")" }}
+          ></div>
+          <h1>{restaurant.name}</h1>
+          <p>{restaurant.description}</p>
+          <hr />
+          <p>
+            Miejscowość:{" "}
+            <span className="restaurant-span">{restaurant.city}</span>
+          </p>
+          <p>
+            Godziny pracy:{" "}
+            <span className="restaurant-span">{restaurant.workingHours}</span>
+          </p>
+          {restaurant.phone && (
+            <p>
+              Kontakt:{" "}
+              <span className="restaurant-span">{restaurant.phone}</span>
+            </p>
+          )}
+          <hr />
+          <div className="restaurant-pictograms">
+            <PictogramsSeparate pictograms={extractTags(restaurant.tags)} />
+          </div>
+        </div>
+        <div className="restaurant-dishes">
+          <h3>Menu</h3>
+          {showDishList === false && <CircularProgress />}
+          {showDishList === true && <DishList />}
         </div>
-      </div>
-      <h1>{restaurant.name}</h1>
-      <p>{restaurant.city}</p>
-      <div className="restaurant-dishes">
-        {showDishList === false && <CircularProgress />}
-        {showDishList === true && <DishList />}
       </div>
     </div>
   );

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 (
     <div className="searchPanel">
@@ -20,6 +38,7 @@ export default function SearchPanel() {
         renderInput={(params) => (
           <TextField
             {...params}
+            className={classes.root}
             label="Miasto, Nazwa lokalu, ..."
             variant="outlined"
             onChange={(event) => dispatch(setSearchQuery(event.target.value))}

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 (
     <div className="topBar">
-      <img
-        src={logo}
-        className="topBarLogo"
-        alt="Menui logo"
-        onClick={() => imgClick()}
-      />
-      <div>
-        <ButtonPrimary text="Dodaj Lokal" />
-        <ButtonPrimary text="Logowanie" />
+      <div className="topBar-logo-container">
+        <img
+          src={logo}
+          className="topBarLogo"
+          alt="Menui logo"
+          onClick={() => imgClick()}
+        />
+        <div className="vertical-divider"></div>
+        <h5>Food guide</h5>
       </div>
+      <div className="topBar-hamburger">
+        {loggedIn && (
+          <div className="topbar-username">
+            {" "}
+            <p>Witaj {username}</p>{" "}
+          </div>
+        )}
+        <IconButton onClick={toggleDrawer(true)} aria-label="menu">
+          <MenuIcon color="secondary" />
+        </IconButton>
+      </div>
+      <Drawer
+        className={classes.root}
+        anchor="right"
+        open={state.menuOpen}
+        onClose={toggleDrawer(false)}
+        PaperProps={{ className: classes.paper }}
+      >
+        <List style={{ width: "300px" }}>
+          <ListItem button onClick={() => handleClick("menui")}>
+            <ListItemIcon>
+              <HomeIcon />
+            </ListItemIcon>
+            <ListItemText primary="Menui" />
+          </ListItem>
+          <ListItem button onClick={() => handleClick("contact")}>
+            <ListItemIcon>
+              <MailIcon />
+            </ListItemIcon>
+            <ListItemText primary="Skontaktuj się" />
+          </ListItem>
+          <ListItem button onClick={() => handleClick("pricing")}>
+            <ListItemIcon>
+              <PaymentIcon />
+            </ListItemIcon>
+            <ListItemText primary="Cennik" />
+          </ListItem>
+          <Divider />
+          {loggedIn && (
+            <ListItem button onClick={() => handleClick("myRestaurant")}>
+              <ListItemIcon>
+                <FastfoodIcon />
+              </ListItemIcon>
+              <ListItemText primary="Moja restauracja" />
+            </ListItem>
+          )}
+          {loggedIn && (
+            <ListItem button onClick={() => handleClick("addDish")}>
+              <ListItemIcon>
+                <AddCircleIcon />
+              </ListItemIcon>
+              <ListItemText primary="Dodaj danie" />
+            </ListItem>
+          )}
+        </List>
+        <div className="drawer-buttons">
+          {!loggedIn && (
+            <ButtonSecondary
+              onClick={() => handleClick("logIn")}
+              text="Zaloguj się"
+            />
+          )}
+          {loggedIn && (
+            <ButtonSecondary
+              onClick={() => handleClick("logOut")}
+              text="Wyloguj"
+            />
+          )}
+        </div>
+        <div className="drawer-bottom">
+          <IconButton color="secondary">
+            <FacebookIcon />
+          </IconButton>
+          <IconButton color="secondary">
+            <TwitterIcon />
+          </IconButton>
+          <IconButton color="secondary">
+            <InstagramIcon />
+          </IconButton>
+        </div>
+      </Drawer>
     </div>
   );
 }