UI Mechanics / New Look (orange - gray)

src/App.js

@@ -6,6 +6,7 @@ import Footer from "./components/Footer";
 import SearchPanel from "./components/SearchPanel";
 import SearchResults from "./components/SearchResults";
 import Restaurant from "./components/Restaurant";
+import Dialogs from "./components/Dialogs";
 import { createMuiTheme, ThemeProvider } from "@material-ui/core/styles";
 import { useSelector } from "react-redux";
 
@@ -14,6 +15,12 @@ const theme = createMuiTheme({
     primary: {
       main: "#0e8496",
     },
+    secondary: {
+      light: "#ffffff",
+      main: "#ffffff",
+      dark: "#ffffff",
+      contrastText: "#ffffff",
+    },
   },
 });
 
@@ -37,6 +44,7 @@ function App() {
           {appMode === "search results" && <SearchResults />}
           {appMode === "restaurant" && <Restaurant />}
         </div>
+        <Dialogs />
         <Footer />
       </div>
     </ThemeProvider>

src/App.scss

@@ -6,8 +6,12 @@
 @import "./styles/Pictograms.scss";
 @import "./styles/Restaurant.scss";
 @import "./styles/DishList.scss";
+@import "./styles/Dialogs.scss";
 
 .App {
+  background-image: url("./public/bg_tile.jpg");
+  background-size: contain;
+  background-repeat: round;
   padding: 0;
   margin: 0;
   height: 100%;
@@ -16,6 +20,7 @@
   flex-direction: column;
   align-items: center;
   justify-content: space-between;
+  overflow: auto;
 }
 
 .logo {
@@ -30,14 +35,17 @@
 
 p {
   font-size: 14px;
-  font-weight: 300;
+  font-weight: 400;
 }
 
 .darkParagraph {
-  color: $darker-color;
+  color: $accents-color;
 }
 
 .main-container {
+  scroll-margin-top: 5rem;
+  scroll-margin-bottom: 5rem;
+  width: 100%;
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -45,3 +53,12 @@ p {
   align-items: center;
   flex-grow: 20;
 }
+
+.vertical-divider {
+  background-color: $bg-color;
+  width: 1px;
+  height: 70%;
+  margin-left: 10px;
+  margin-top: auto;
+  margin-bottom: auto;
+}

src/Design.scss

@@ -1,12 +1,14 @@
-$main-color: #eb9800;
-$secondary-color: #307482;
-$darker-color: #234f53;
-$bg-color: #f8f8f8;
-$accents-color: #0e8496;
-$lighter-color: #00d1b5;
-
+$main-color: #d68000;
+$secondary-color: #b46c00;
+$darker-color: #494949;
+$bg-color: #fafafa;
+$accents-color: #af6900;
+$lighter-color: #b46c00;
+$gray: #bbbbbb;
+$dark-gray: #2b2b2b;
+$mint: #01c3a9;
 /* $main-color: #01c3a9;
-$secondary-color: #307482;
+$secondary-color: #01c3a9;
 $darker-color: #234f53;
 $bg-color: #ffffff;
 $accents-color: #0e8496;

src/Services.js

@@ -1 +1,12 @@
-import axios from "axios";
+export function extractTags(tags) {
+  var results = [];
+
+  if (typeof tags !== "undefined") {
+    for (let [key, value] of Object.entries(tags)) {
+      if (value === true) {
+        results.push(key);
+      }
+    }
+  }
+  return results;
+}

src/actions/index.js

@@ -108,3 +108,16 @@ export const fetchAllDishes = (id) => {
       });
   };
 };
+
+export const tryLogin = (username) => {
+  return function (dispatch) {
+    dispatch(toggles.setLoggedIn(username));
+    dispatch(toggles.hideLoginDialog());
+  };
+};
+
+export const logout = () => {
+  return function (dispatch) {
+    dispatch(toggles.setLoggedOut());
+  };
+};

src/actions/toggles.js

@@ -9,3 +9,28 @@ export const hideDishes = () => {
     type: "SET_DISHLIST_HIDDEN",
   };
 };
+
+export const showLoginDialog = () => {
+  return {
+    type: "DIALOG_LOGIN_VISIBLE",
+  };
+};
+
+export const hideLoginDialog = () => {
+  return {
+    type: "DIALOG_LOGIN_HIDDEN",
+  };
+};
+
+export const setLoggedIn = (username) => {
+  return {
+    type: "SET_LOGGEDIN",
+    payload: username,
+  };
+};
+
+export const setLoggedOut = () => {
+  return {
+    type: "SET_LOGGEDOUT",
+  };
+};

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 + ")" }}
         />
+        <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,38 +1,50 @@
 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-content">
+        <div className="restaurant-info">
           <div
             className="restaurant-hero"
             style={{ backgroundImage: "url(" + restaurant.imgUrl + ")" }}
-      >
-        <div className="restaurant-pictograms">
-          <Pictograms pictograms={extractTags(restaurant.tags)} />
-        </div>
-      </div>
+          ></div>
           <h1>{restaurant.name}</h1>
-      <p>{restaurant.city}</p>
+          <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>
+    </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">
+      <div className="topBar-logo-container">
         <img
           src={logo}
           className="topBarLogo"
           alt="Menui logo"
           onClick={() => imgClick()}
         />
-      <div>
-        <ButtonPrimary text="Dodaj Lokal" />
-        <ButtonPrimary text="Logowanie" />
+        <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>
   );
 }

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":

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;

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;

src/reducers/toggles.js

@@ -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;

src/styles/Dialogs.scss

@@ -0,0 +1,7 @@
+.dialog-login {
+}
+
+.login-dialog-buttons {
+  display: flex;
+  justify-content: center;
+}

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;
+  }
+}

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;

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;
+  }
+}

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;
+}

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;

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;
+}