UI Mechanics / New Look (orange - gray)

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