From 2ab445670e509424664aa2d1e2c616f1e1449fe8 Mon Sep 17 00:00:00 2001
From: Jonasz Bigda <jonasz@bankai.pl>
Date: Thu, 23 Jul 2020 22:16:27 +0200
Subject: [PATCH] card further work

---
 src/App.js                       |  2 +-
 src/App.scss                     |  1 +
 src/components/CardRestaurant.js | 36 +++++++++++++++----
 src/components/Pictograms.js     | 62 ++++++++++++++++++++++++++++++++
 src/components/SearchResults.js  | 34 +++++++++---------
 src/components/TopBar.js         | 14 +++++++-
 src/public/i_alcohol.svg         |  1 +
 src/public/i_card.svg            |  1 +
 src/public/i_delivery.svg        |  1 +
 src/public/i_eggs.svg            |  1 +
 src/public/i_gluten.svg          |  1 +
 src/public/i_glutenFree.svg      |  1 +
 src/public/i_lactose.svg         |  1 +
 src/public/i_lactoseFree.svg     |  1 +
 src/public/i_peanuts.svg         |  1 +
 src/public/i_pets.svg            |  1 +
 src/public/i_seaFood.svg         |  1 +
 src/public/i_sesame.svg          |  1 +
 src/public/i_soy.svg             |  1 +
 src/public/i_vegan.svg           |  1 +
 src/public/i_vegetarian.svg      |  1 +
 src/reducers/appMode.js          |  2 +-
 src/styles/Pictograms.scss       | 10 ++++++
 src/styles/SearchResults.scss    | 34 ++++++++++++++----
 src/styles/TopBar.scss           |  4 +++
 25 files changed, 181 insertions(+), 33 deletions(-)
 create mode 100644 src/components/Pictograms.js
 create mode 100644 src/public/i_alcohol.svg
 create mode 100644 src/public/i_card.svg
 create mode 100644 src/public/i_delivery.svg
 create mode 100644 src/public/i_eggs.svg
 create mode 100644 src/public/i_gluten.svg
 create mode 100644 src/public/i_glutenFree.svg
 create mode 100644 src/public/i_lactose.svg
 create mode 100644 src/public/i_lactoseFree.svg
 create mode 100644 src/public/i_peanuts.svg
 create mode 100644 src/public/i_pets.svg
 create mode 100644 src/public/i_seaFood.svg
 create mode 100644 src/public/i_sesame.svg
 create mode 100644 src/public/i_soy.svg
 create mode 100644 src/public/i_vegan.svg
 create mode 100644 src/public/i_vegetarian.svg
 create mode 100644 src/styles/Pictograms.scss

diff --git a/src/App.js b/src/App.js
index b7b3c3e..6039327 100644
--- a/src/App.js
+++ b/src/App.js
@@ -31,7 +31,7 @@ function App() {
               Sprawdź co serwuje Twoja ulubiona restauracja.
             </p>
           )}
-          <SearchResults />
+          {appMode === "search results" && <SearchResults />}
         </div>
         <Footer />
       </div>
diff --git a/src/App.scss b/src/App.scss
index 2792432..1eb86eb 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -3,6 +3,7 @@
 @import "./styles/SearchPanel.scss";
 @import "./styles/Footer.scss";
 @import "./styles/SearchResults.scss";
+@import "./styles/Pictograms.scss";
 
 .App {
   padding: 0;
diff --git a/src/components/CardRestaurant.js b/src/components/CardRestaurant.js
index 9ff9346..f047d2c 100644
--- a/src/components/CardRestaurant.js
+++ b/src/components/CardRestaurant.js
@@ -1,17 +1,39 @@
 import React from "react";
+import Pictograms from "./Pictograms";
 
 export default function CardRestaurant(props) {
   return (
     <div className="card-restaurant">
       <div className="card-img"></div>
       <div className="card-info">
-        <h1>{props.name}</h1>
-        <hr />
-        <h3>Miasto: {props.city}</h3>
-        <h3>Godziny otwarcia: {props.hours}</h3>
-        <p>
-          Jakiś krótki opis restauracji. Coś tam że jest przytulnie i elegancko.
-        </p>
+        <div className="title-info">
+          <h1>{props.name}</h1>
+          <hr />
+          <h3>Miasto: {props.city}</h3>
+          <h3>Godziny otwarcia: {props.hours}</h3>
+        </div>
+        <div className="card-description">
+          <p>
+            Jakiś krótki opis restauracji. Coś tam że jest przytulnie i
+            elegancko.
+          </p>
+        </div>
+        <div className="card-pictograms">
+          <Pictograms
+            pictograms={[
+              "alcohol",
+              "card",
+              "delivery",
+              "glutenFree",
+              "vegan",
+              "vegetarian",
+              "eggs",
+              "gluten",
+              "lactose",
+              "lactoseFree",
+            ]}
+          />
+        </div>
       </div>
     </div>
   );
diff --git a/src/components/Pictograms.js b/src/components/Pictograms.js
new file mode 100644
index 0000000..f4b2535
--- /dev/null
+++ b/src/components/Pictograms.js
@@ -0,0 +1,62 @@
+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";
+
+function getImage(name) {
+  switch (name) {
+    case "alcohol":
+      return alcohol;
+    case "card":
+      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 "pets":
+      return pets;
+    case "seaFood":
+      return seaFood;
+    case "sesame":
+      return sesame;
+    case "soy":
+      return soy;
+    case "vegan":
+      return vegan;
+    case "vegetarian":
+      return vegetarian;
+    default:
+      return false;
+  }
+}
+
+export default function (props) {
+  const pictograms = props.pictograms.map((pictogram) => (
+    <img className="pictogram" src={getImage(pictogram)} alt={pictogram} />
+  ));
+
+  return <div className="pictograms-container">{pictograms}</div>;
+}
diff --git a/src/components/SearchResults.js b/src/components/SearchResults.js
index 2d67d9b..f86d50a 100644
--- a/src/components/SearchResults.js
+++ b/src/components/SearchResults.js
@@ -4,25 +4,27 @@ import { useSelector } from "react-redux";
 
 export default function SearchResults() {
   var results = useSelector((store) => store.searchResults);
+  const array = Array.from(results);
+  var count = results.length;
+  const restaurants = array.map((restaurant) => (
+    <li key={restaurant._id}>
+      <CardRestaurant
+        name={restaurant.name}
+        city={restaurant.city}
+        imgUrl={restaurant.imgUrl}
+        hours={restaurant.workingHours}
+        tags={restaurant.tags}
+      />
+    </li>
+  ));
 
   return (
     <div className="search-results">
-      <CardRestaurant
-        name="Kuchnie Świata"
-        city="Mikołajki"
-        hours="7:00 - 23:00"
-      />
-      <CardRestaurant
-        name="Grzmiące Patyki"
-        city="Ciechanów"
-        hours="7:00 - 23:00"
-      />
-      <CardRestaurant name="Naruto Sushi" city="Tokio" hours="7:00 - 23:00" />
-      <CardRestaurant
-        name="Gówno"
-        city="Dąbrowa górnicza"
-        hours="7:00 - 23:00"
-      />
+      <div className="results-count">
+        <p>Znaleziono: {count}</p>
+        <hr />
+      </div>
+      <ul>{restaurants}</ul>
     </div>
   );
 }
diff --git a/src/components/TopBar.js b/src/components/TopBar.js
index e5b7f4e..d0f2620 100644
--- a/src/components/TopBar.js
+++ b/src/components/TopBar.js
@@ -1,11 +1,23 @@
 import React from "react";
 import ButtonPrimary from "./ButtonPrimary";
 import logo from "../public/logo_white.svg";
+import { useDispatch } from "react-redux";
+import { setAppMode } from "../actions";
 
 export default function TopBar() {
+  const dispatch = useDispatch();
+  const imgClick = () => {
+    dispatch(setAppMode("APP_INIT"));
+  };
+
   return (
     <div className="topBar">
-      <img src={logo} className="topBarLogo" alt="Menui logo" />
+      <img
+        src={logo}
+        className="topBarLogo"
+        alt="Menui logo"
+        onClick={() => imgClick()}
+      />
       <div>
         <ButtonPrimary text="Dodaj Lokal" />
         <ButtonPrimary text="Logowanie" />
diff --git a/src/public/i_alcohol.svg b/src/public/i_alcohol.svg
new file mode 100644
index 0000000..ed3b115
--- /dev/null
+++ b/src/public/i_alcohol.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4.27 5.46"><defs><style>.cls-1{fill:#38b5a3;}</style></defs><title>i_alcohol</title><g id="Warstwa_2" data-name="Warstwa 2"><g id="Warstwa_1-2" data-name="Warstwa 1"><path class="cls-1" d="M3.05,5.32H2.23V2.69L4.27,0H0L2.05,2.69V5.32H1.22a.07.07,0,1,0,0,.14H3.05a.07.07,0,1,0,0-.14ZM.35.17H3.92L3.49.74H.78Z"/></g></g></svg>
\ No newline at end of file
diff --git a/src/public/i_card.svg b/src/public/i_card.svg
new file mode 100644
index 0000000..567087a
--- /dev/null
+++ b/src/public/i_card.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 7.53 4.68"><defs><style>.cls-1{fill:#38b5a3;}</style></defs><title>i_card</title><g id="Warstwa_2" data-name="Warstwa 2"><g id="Warstwa_1-2" data-name="Warstwa 1"><path class="cls-1" d="M6.55,0H1A1,1,0,0,0,0,1v.23H7.53V1A1,1,0,0,0,6.55,0Z"/><path class="cls-1" d="M0,2.15V3.7a1,1,0,0,0,1,1H6.55a1,1,0,0,0,1-1V2.15ZM6.65,3.62a.21.21,0,0,1-.21.21h-.8a.21.21,0,0,1-.21-.21v-.4A.22.22,0,0,1,5.64,3h.8a.21.21,0,0,1,.21.22Z"/></g></g></svg>
\ No newline at end of file
diff --git a/src/public/i_delivery.svg b/src/public/i_delivery.svg
new file mode 100644
index 0000000..0d27d14
--- /dev/null
+++ b/src/public/i_delivery.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9.59 5.12"><defs><style>.cls-1{fill:#38b5a3;}</style></defs><title>i_delivery_1</title><g id="Warstwa_2" data-name="Warstwa 2"><g id="Warstwa_1-2" data-name="Warstwa 1"><rect class="cls-1" x="0.63" y="0.98" width="4.78" height="0.41"/><rect class="cls-1" x="1.02" y="1.98" width="4.71" height="0.41"/><rect class="cls-1" y="2.99" width="4.88" height="0.41"/><polygon class="cls-1" points="8.72 2.35 7.98 1.72 6.74 1.72 6.74 2.35 6.74 2.81 8.72 2.81 8.72 2.35"/><path class="cls-1" d="M8.24,1H6.77V0H1.38V.41h5v1H8.09l1.08,1V4.09H8.35a.8.8,0,0,0-1.56,0H4.12a.8.8,0,0,0-1.56,0H1.47V4.5H2.56a.8.8,0,0,0,1.56,0H6.79a.8.8,0,0,0,1.56,0H9.59V2.19ZM3.34,4.79a.5.5,0,1,1,.49-.49A.49.49,0,0,1,3.34,4.79Zm4.23,0a.5.5,0,1,1,0-1,.5.5,0,0,1,0,1Z"/></g></g></svg>
\ No newline at end of file
diff --git a/src/public/i_eggs.svg b/src/public/i_eggs.svg
new file mode 100644
index 0000000..d856c31
--- /dev/null
+++ b/src/public/i_eggs.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3.55 5.51"><defs><style>.cls-1{fill:#38b5a3;}</style></defs><title>i_eggs</title><g id="Warstwa_2" data-name="Warstwa 2"><g id="Warstwa_1-2" data-name="Warstwa 1"><path class="cls-1" d="M1.78,0C.8,0,0,2.19,0,3.42A1.91,1.91,0,0,0,1.78,5.51,1.9,1.9,0,0,0,3.55,3.42C3.55,2.19,2.76,0,1.78,0Zm0,5.31A1.72,1.72,0,0,1,.2,3.42C.2,2.24,1,.2,1.78.2s1.57,2,1.57,3.22A1.71,1.71,0,0,1,1.78,5.31Z"/></g></g></svg>
\ No newline at end of file
diff --git a/src/public/i_gluten.svg b/src/public/i_gluten.svg
new file mode 100644
index 0000000..fe40fa2
--- /dev/null
+++ b/src/public/i_gluten.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5.69 5.81"><defs><style>.cls-1{fill:#38b5a3;}</style></defs><title>i_gluten</title><g id="Warstwa_2" data-name="Warstwa 2"><g id="Warstwa_1-2" data-name="Warstwa 1"><path class="cls-1" d="M3.93,4a3,3,0,0,0,.78-.44.1.1,0,0,0,0-.17,3,3,0,0,0-.36-.22,2.4,2.4,0,0,0,1.3-.55.1.1,0,0,0,0-.17,2.14,2.14,0,0,0-1.46-.47A1.07,1.07,0,0,0,3.92,2l.17-.17a1.4,1.4,0,0,0,.9-.3A2.19,2.19,0,0,0,5.52.11.11.11,0,0,0,5.39,0C5.08.09,4.31.33,4.08.8a1.47,1.47,0,0,0-.14.94l-.15.15a1.71,1.71,0,0,0,.09-.27A2.18,2.18,0,0,0,3.41.17a.11.11,0,0,0-.17,0,2.43,2.43,0,0,0-.55,1.3,3.75,3.75,0,0,0-.22-.35.11.11,0,0,0-.17,0,3.36,3.36,0,0,0-.43.74l-.07.21s0,.09,0,.08a.69.69,0,0,0,0,.24c-.08-.14-.16-.26-.21-.34a.1.1,0,0,0-.17,0A2.14,2.14,0,0,0,.84,3.47a1.36,1.36,0,0,0,.51.84h0L0,5.64a.12.12,0,0,0,0,.15.1.1,0,0,0,.15,0L1.5,4.45h0A1.44,1.44,0,0,0,2.35,5a2.19,2.19,0,0,0,1.44-.53.11.11,0,0,0,0-.17,2.29,2.29,0,0,0-.34-.21,1.35,1.35,0,0,0,.29,0ZM4.25.88C4.42.53,5,.31,5.32.22A1.83,1.83,0,0,1,4.87,1.4a1.26,1.26,0,0,1-.75.27A1.27,1.27,0,0,1,4.25.88Zm0,1.23a1.87,1.87,0,0,1,1.2.38,1.9,1.9,0,0,1-1.18.43,1.29,1.29,0,0,1-.7-.39A1.32,1.32,0,0,1,4.24,2.11Zm-.6.75a.86.86,0,0,0-.39,0L3,3l.37-.38h0A1.34,1.34,0,0,0,3.64,2.86ZM3.32.38a1.85,1.85,0,0,1,.38,1.2,1.23,1.23,0,0,1-.42.67,1.19,1.19,0,0,1-.39-.69A1.84,1.84,0,0,1,3.32.38ZM2.94,2.56a1,1,0,0,0,0-.39,1.21,1.21,0,0,0,.27.28h0l-.38.38A1.71,1.71,0,0,0,2.94,2.56ZM2.38,1.32a1.83,1.83,0,0,1,.38,1.2,1.23,1.23,0,0,1-.42.67A1.19,1.19,0,0,1,2,2.5,1.87,1.87,0,0,1,2.38,1.32Zm.31,2.46a.86.86,0,0,0-.36,0,1.69,1.69,0,0,0-.27.1l.37-.37h0A1.58,1.58,0,0,0,2.69,3.78ZM2,3.49a1.06,1.06,0,0,0,0-.36,1,1,0,0,0,.25.25h0l-.37.37A1.07,1.07,0,0,0,2,3.49Zm-.6.63A1.25,1.25,0,0,1,1,3.43a1.9,1.9,0,0,1,.43-1.19,1.87,1.87,0,0,1,.38,1.2A1.23,1.23,0,0,1,1.41,4.12Zm2.16.24a1.83,1.83,0,0,1-1.18.42,1.19,1.19,0,0,1-.69-.39A1.18,1.18,0,0,1,2.37,4,1.8,1.8,0,0,1,3.57,4.36Zm-.25-.5a1.36,1.36,0,0,1-.7-.39,1.25,1.25,0,0,1,.68-.42,1.87,1.87,0,0,1,1.2.38A1.9,1.9,0,0,1,3.32,3.86Z"/></g></g></svg>
\ No newline at end of file
diff --git a/src/public/i_glutenFree.svg b/src/public/i_glutenFree.svg
new file mode 100644
index 0000000..e5b4a3d
--- /dev/null
+++ b/src/public/i_glutenFree.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5.94 5.96"><defs><style>.cls-1{fill:#38b5a3;}</style></defs><title>i_glutenFree</title><g id="Warstwa_2" data-name="Warstwa 2"><g id="Warstwa_1-2" data-name="Warstwa 1"><path class="cls-1" d="M4.21,4.05h0A3.28,3.28,0,0,0,5,3.61a.1.1,0,0,0,0-.17c-.08,0-.21-.14-.36-.22a2.4,2.4,0,0,0,1.3-.55.1.1,0,0,0,0-.17A2.19,2.19,0,0,0,4.44,2l-.27.09L4.34,2a1.37,1.37,0,0,0,.9-.31A2.16,2.16,0,0,0,5.77.22.1.1,0,0,0,5.64.11C5.33.19,4.56.43,4.33.9a1.47,1.47,0,0,0-.14.94L4,2q0-.12.09-.27A2.19,2.19,0,0,0,3.66.27a.1.1,0,0,0-.17,0,2.4,2.4,0,0,0-.55,1.3c-.08-.15-.17-.28-.22-.36a.1.1,0,0,0-.17,0A3.36,3.36,0,0,0,2.12,2L.21,0A.11.11,0,0,0,0,0,.11.11,0,0,0,0,.21l2,2v0a1.35,1.35,0,0,0,0,.29c-.08-.14-.16-.26-.21-.34a.11.11,0,0,0-.17,0,2.16,2.16,0,0,0-.53,1.44,1.39,1.39,0,0,0,.51.85h0L.29,5.74a.11.11,0,0,0,0,.15.1.1,0,0,0,.15,0L1.75,4.55h0a1.39,1.39,0,0,0,.85.51A2.14,2.14,0,0,0,4,4.54a.11.11,0,0,0,0-.17l-.34-.21a1.35,1.35,0,0,0,.29,0H4L5.74,5.92a.12.12,0,0,0,.17-.17ZM4.5,1C4.67.63,5.27.42,5.57.32A1.83,1.83,0,0,1,5.12,1.5a1.26,1.26,0,0,1-.75.27A1.27,1.27,0,0,1,4.5,1Zm0,1.23a1.93,1.93,0,0,1,1.2.38A1.79,1.79,0,0,1,4.51,3a1.23,1.23,0,0,1-.7-.39A1.27,1.27,0,0,1,4.49,2.21ZM3.89,3A1,1,0,0,0,3.5,3a1.71,1.71,0,0,0-.27.09l.38-.38v0A1.35,1.35,0,0,0,3.89,3ZM3.57.48A1.93,1.93,0,0,1,4,1.68a1.27,1.27,0,0,1-.42.68,1.23,1.23,0,0,1-.39-.69A1.79,1.79,0,0,1,3.57.48ZM3.19,2.67a1,1,0,0,0,0-.39,1.12,1.12,0,0,0,.26.27h0l-.38.38A1.71,1.71,0,0,0,3.19,2.67ZM2.63,1.42A1.87,1.87,0,0,1,3,2.62a1.32,1.32,0,0,1-.42.68,1.23,1.23,0,0,1-.39-.7A1.9,1.9,0,0,1,2.63,1.42Zm.3,2.46a1,1,0,0,0-.35,0A1.07,1.07,0,0,0,2.31,4l.37-.37h0A1.15,1.15,0,0,0,2.93,3.88ZM2.26,3.6a1.09,1.09,0,0,0,0-.36,1.15,1.15,0,0,0,.25.25h0l-.37.36A1.14,1.14,0,0,0,2.26,3.6Zm-.6.62a1.25,1.25,0,0,1-.39-.69A1.9,1.9,0,0,1,1.7,2.35a1.85,1.85,0,0,1,.38,1.2A1.23,1.23,0,0,1,1.66,4.22Zm2.16.24a1.9,1.9,0,0,1-1.18.43A1.25,1.25,0,0,1,2,4.5a1.23,1.23,0,0,1,.67-.42A1.85,1.85,0,0,1,3.82,4.46ZM3.57,4a1.23,1.23,0,0,1-.7-.39,1.32,1.32,0,0,1,.68-.42,1.87,1.87,0,0,1,1.2.38A1.9,1.9,0,0,1,3.57,4Z"/></g></g></svg>
\ No newline at end of file
diff --git a/src/public/i_lactose.svg b/src/public/i_lactose.svg
new file mode 100644
index 0000000..0b422ee
--- /dev/null
+++ b/src/public/i_lactose.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2.37 5.4"><defs><style>.cls-1{fill:#38b5a3;}</style></defs><title>i_lactose</title><g id="Warstwa_2" data-name="Warstwa 2"><g id="Warstwa_1-2" data-name="Warstwa 1"><path class="cls-1" d="M2.37,1.56c0-.33-.15-.21-.39-.62A1.31,1.31,0,0,1,1.81.52h0A.26.26,0,0,0,2.08.26.26.26,0,0,0,1.82,0H.55A.27.27,0,0,0,.28.26.26.26,0,0,0,.55.52h0A1.59,1.59,0,0,1,.39.94c-.25.41-.39.29-.39.62S0,5,0,5s0,.34.25.36H2.09c.31,0,.26-.36.26-.36S2.37,1.9,2.37,1.56ZM2.15,5.2l-.06,0H.27a.15.15,0,0,1-.08-.16s0-3.17,0-3.51c0-.11,0-.12.07-.18A1.39,1.39,0,0,0,.53,1a1.66,1.66,0,0,0,.2-.5h.91A1.41,1.41,0,0,0,1.83,1a1.49,1.49,0,0,0,.29.35c.07.06.08.07.08.18,0,.34,0,3.48,0,3.48S2.18,5.17,2.15,5.2Z"/></g></g></svg>
\ No newline at end of file
diff --git a/src/public/i_lactoseFree.svg b/src/public/i_lactoseFree.svg
new file mode 100644
index 0000000..a4c01f5
--- /dev/null
+++ b/src/public/i_lactoseFree.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5.91 5.91"><defs><style>.cls-1{fill:#38b5a3;}</style></defs><title>i_lactoseFree</title><g id="Warstwa_2" data-name="Warstwa 2"><g id="Warstwa_1-2" data-name="Warstwa 1"><path class="cls-1" d="M4.14,1.69c0-.33-.15-.21-.39-.63A1.19,1.19,0,0,1,3.58.65h0A.26.26,0,0,0,3.85.39.26.26,0,0,0,3.59.13H2.32a.25.25,0,0,0-.26.26.26.26,0,0,0,.26.26h0a1.43,1.43,0,0,1-.17.41c-.25.42-.39.3-.39.63s0,3.48,0,3.48-.05.34.25.35H3.86c.31,0,.26-.35.26-.35S4.14,2,4.14,1.69ZM3.92,5.33l-.06,0H2A.15.15,0,0,1,2,5.19s0-3.17,0-3.5c0-.12,0-.12.08-.18a2,2,0,0,0,.28-.36,1.43,1.43,0,0,0,.2-.5h.91a1.38,1.38,0,0,0,.19.5,1.6,1.6,0,0,0,.29.36c.07.06.08.06.08.18C4,2,4,5.17,4,5.17S4,5.3,3.92,5.33Z"/><path class="cls-1" d="M.2,0,5.87,5.71a.11.11,0,0,1,0,.17h0a.14.14,0,0,1-.17,0L0,.2A.14.14,0,0,1,0,0H0A.14.14,0,0,1,.2,0Z"/></g></g></svg>
\ No newline at end of file
diff --git a/src/public/i_peanuts.svg b/src/public/i_peanuts.svg
new file mode 100644
index 0000000..19646cf
--- /dev/null
+++ b/src/public/i_peanuts.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6.72 4.98"><defs><style>.cls-1{fill:#38b5a3;}</style></defs><title>i_peanuts</title><g id="Warstwa_2" data-name="Warstwa 2"><g id="Warstwa_1-2" data-name="Warstwa 1"><path class="cls-1" d="M3.89,2.87A1.8,1.8,0,0,1,1.8,2.29,1,1,0,0,0,.2,3.5,3.7,3.7,0,0,0,3.19,5a4.19,4.19,0,0,0,1.3-.2,1,1,0,1,0-.6-1.91ZM4.27,4a4.87,4.87,0,0,1-1.08.13,3.18,3.18,0,0,1-1.12-.19,2.9,2.9,0,0,1-1.15-1,.12.12,0,0,1,0-.18.13.13,0,0,1,.18,0,2.6,2.6,0,0,0,1,.87,3.85,3.85,0,0,0,2.07,0,.13.13,0,0,1,.15.1A.12.12,0,0,1,4.27,4Z"/><path class="cls-1" d="M6.37.53A3,3,0,0,0,3.68.17a3.58,3.58,0,0,0-1,.49A.82.82,0,0,0,2.56,1.8.8.8,0,0,0,3.69,2a1.49,1.49,0,0,1,1.76-.1A.81.81,0,1,0,6.37.53ZM6,1.29a.11.11,0,0,1-.14,0,2.14,2.14,0,0,0-1-.41,3.09,3.09,0,0,0-1.61.5.1.1,0,0,1-.14,0,.11.11,0,0,1,0-.14,4.4,4.4,0,0,1,.8-.38A2.94,2.94,0,0,1,4.83.71,2.37,2.37,0,0,1,6,1.15.11.11,0,0,1,6,1.29Z"/></g></g></svg>
\ No newline at end of file
diff --git a/src/public/i_pets.svg b/src/public/i_pets.svg
new file mode 100644
index 0000000..88e7b74
--- /dev/null
+++ b/src/public/i_pets.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5.42 5.29"><defs><style>.cls-1{fill:#38b5a3;}</style></defs><title>i_pets</title><g id="Warstwa_2" data-name="Warstwa 2"><g id="Warstwa_1-2" data-name="Warstwa 1"><path class="cls-1" d="M3.52,2.07a1.53,1.53,0,0,0-1-.33,1.21,1.21,0,0,0-.91.33c-.37.42-.32.63-.56,1.24a1.51,1.51,0,0,0,.05,1.56c.4.45,1.46.42,1.46.42A2.29,2.29,0,0,0,4,4.85a1.52,1.52,0,0,0,.06-1.54C3.83,2.7,3.89,2.48,3.52,2.07Z"/><path class="cls-1" d="M1.17,1.5C1,1.08.66.82.35.92a.72.72,0,0,0-.29,1c.14.42.51.68.81.58A.74.74,0,0,0,1.17,1.5Z"/><path class="cls-1" d="M2.09,1.61A.73.73,0,0,0,2.55.72C2.48.28,2.17,0,1.85,0s-.52.45-.46.89S1.77,1.66,2.09,1.61Z"/><path class="cls-1" d="M3.32,1.64c.31.09.66-.18.79-.61A.74.74,0,0,0,3.77.08C3.46,0,3.11.27,3,.7A.73.73,0,0,0,3.32,1.64Z"/><path class="cls-1" d="M5.2,1.19c-.27-.18-.69,0-.93.37a.72.72,0,0,0,.06,1c.27.18.69,0,.93-.37A.72.72,0,0,0,5.2,1.19Z"/></g></g></svg>
\ No newline at end of file
diff --git a/src/public/i_seaFood.svg b/src/public/i_seaFood.svg
new file mode 100644
index 0000000..6e33c5d
--- /dev/null
+++ b/src/public/i_seaFood.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3.72 5.98"><defs><style>.cls-1{fill:#38b5a3;}</style></defs><title>i_seaFood</title><g id="Warstwa_2" data-name="Warstwa 2"><g id="Warstwa_1-2" data-name="Warstwa 1"><circle class="cls-1" cx="2.44" cy="2.84" r="0.12"/><circle class="cls-1" cx="1.29" cy="2.84" r="0.12"/><path class="cls-1" d="M3.59,4.81A2,2,0,0,1,2.93,3,1.7,1.7,0,1,0,.09,1.7,1.73,1.73,0,0,0,.85,3.12,2.73,2.73,0,0,1,.08,4.94a.29.29,0,0,0,0,.41.28.28,0,0,0,.2.09A.29.29,0,0,0,.5,5.35,3.09,3.09,0,0,0,1.33,3.8,3.17,3.17,0,0,1,1,5.51a.28.28,0,0,0,.11.39.25.25,0,0,0,.14,0,.3.3,0,0,0,.26-.15A2.91,2.91,0,0,0,1.87,4.6a2.31,2.31,0,0,0,.42,1.25A.26.26,0,0,0,2.53,6a.25.25,0,0,0,.16-.05.29.29,0,0,0,.08-.4A2.1,2.1,0,0,1,2.45,4a2,2,0,0,0,.81,1.24.27.27,0,0,0,.17.06.28.28,0,0,0,.23-.13A.27.27,0,0,0,3.59,4.81Zm-2-1.69a.76.76,0,0,0-.27-.06A.88.88,0,0,0,1,3.13a.41.41,0,0,1-.12-.29.41.41,0,1,1,.71.28Zm1.15,0a.73.73,0,0,0-.3-.06.72.72,0,0,0-.29.06A.43.43,0,0,1,2,2.84a.42.42,0,0,1,.41-.41.41.41,0,0,1,.41.41A.42.42,0,0,1,2.74,3.13Z"/></g></g></svg>
\ No newline at end of file
diff --git a/src/public/i_sesame.svg b/src/public/i_sesame.svg
new file mode 100644
index 0000000..6fdd3b0
--- /dev/null
+++ b/src/public/i_sesame.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4.87 6.15"><defs><style>.cls-1{fill:#38b5a3;}</style></defs><title>i_sesame</title><g id="Warstwa_2" data-name="Warstwa 2"><g id="Warstwa_1-2" data-name="Warstwa 1"><path class="cls-1" d="M.2,2.26A1.38,1.38,0,0,0,.07,3.34,1.4,1.4,0,0,0,1,3.91a1.36,1.36,0,0,0,.12-1.08C.91,2.37.2,2.26.2,2.26Z"/><path class="cls-1" d="M2.37,1.87a1.36,1.36,0,0,0-.32-1s-.68.24-.82.73a1.39,1.39,0,0,0,.33,1S2.24,2.36,2.37,1.87Z"/><path class="cls-1" d="M3.7,1.65A1.38,1.38,0,0,0,3.83.57C3.61.11,2.9,0,2.9,0a1.39,1.39,0,0,0-.13,1.08C3,1.54,3.7,1.65,3.7,1.65Z"/><path class="cls-1" d="M2.48,2.54a1.39,1.39,0,0,0-.49,1c0,.51.67.86.67.86s.55-.47.5-1S2.48,2.54,2.48,2.54Z"/><path class="cls-1" d="M4.44,2s-.65.31-.74.81a1.36,1.36,0,0,0,.42,1s.65-.3.74-.8A1.39,1.39,0,0,0,4.44,2Z"/><path class="cls-1" d="M3.74,4.1a1.4,1.4,0,0,0-.13,1.09c.22.46.93.57.93.57a1.4,1.4,0,0,0,.13-1.09C4.45,4.22,3.74,4.1,3.74,4.1Z"/><path class="cls-1" d="M1.36,5.09a1.36,1.36,0,0,0,.23,1.06s.7-.18.87-.66a1.38,1.38,0,0,0-.23-1.07S1.53,4.61,1.36,5.09Z"/></g></g></svg>
\ No newline at end of file
diff --git a/src/public/i_soy.svg b/src/public/i_soy.svg
new file mode 100644
index 0000000..468b713
--- /dev/null
+++ b/src/public/i_soy.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5.04 5.04"><defs><style>.cls-1{fill:#38b5a3;}</style></defs><title>i_soy</title><g id="Warstwa_2" data-name="Warstwa 2"><g id="Warstwa_1-2" data-name="Warstwa 1"><path class="cls-1" d="M2.82,3.63a1.17,1.17,0,0,0,.55-.31,1.13,1.13,0,0,0,.3-.53A.41.41,0,0,1,4,2.51,1.25,1.25,0,0,0,4.72,2,6.62,6.62,0,0,0,5,0a6.42,6.42,0,0,0-2,.32,1.16,1.16,0,0,0-.54.75.42.42,0,0,1-.28.3,1.21,1.21,0,0,0-.54.3,1.27,1.27,0,0,0-.3.54.45.45,0,0,1-.33.32,1.39,1.39,0,0,0-.8.57A6.06,6.06,0,0,0,0,5a5.61,5.61,0,0,0,1.93-.29A1.31,1.31,0,0,0,2.51,4,.43.43,0,0,1,2.82,3.63Zm-1,.94A4.78,4.78,0,0,1,.2,4.84,5.11,5.11,0,0,1,.46,3.19a1.23,1.23,0,0,1,.67-.47.63.63,0,0,0,.47-.46,1,1,0,0,1,.25-.45,1.14,1.14,0,0,1,.44-.25.6.6,0,0,0,.43-.44A1,1,0,0,1,3.15.5,5.45,5.45,0,0,1,4.83.21a5.71,5.71,0,0,1-.29,1.68,1.09,1.09,0,0,1-.62.43.57.57,0,0,0-.44.42.94.94,0,0,1-.26.44.94.94,0,0,1-.44.26.64.64,0,0,0-.47.47A1.11,1.11,0,0,1,1.85,4.57Z"/><path class="cls-1" d="M4.09,1a.51.51,0,0,0-.71,0,.5.5,0,0,0,0,.7.5.5,0,0,0,.71,0A.5.5,0,0,0,4.09,1Z"/><path class="cls-1" d="M2.91,2.13a.49.49,0,0,0-.7.7.49.49,0,0,0,.7-.7Z"/><path class="cls-1" d="M1.68,3.36a.48.48,0,0,0-.7,0,.48.48,0,0,0,0,.7.49.49,0,1,0,.7-.7Z"/></g></g></svg>
\ No newline at end of file
diff --git a/src/public/i_vegan.svg b/src/public/i_vegan.svg
new file mode 100644
index 0000000..0376411
--- /dev/null
+++ b/src/public/i_vegan.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5.51 3.4"><defs><style>.cls-1{fill:#38b5a3;}</style></defs><title>i_vegan</title><g id="Warstwa_2" data-name="Warstwa 2"><g id="Warstwa_1-2" data-name="Warstwa 1"><path class="cls-1" d="M5.23,0A6,6,0,0,0,2.67,1a1.71,1.71,0,0,0-.41.73A1.22,1.22,0,0,0,2,1.35,4.13,4.13,0,0,0,.2.62a.17.17,0,0,0-.2.2,4.09,4.09,0,0,0,.73,1.8A1.85,1.85,0,0,0,2.12,3a.76.76,0,0,0,0,.16s0,0,0,0h0s0,0,0,0A1.55,1.55,0,0,0,2.47,3a3,3,0,0,0,.36-.51.13.13,0,0,1,.18,0,.14.14,0,0,1,0,.17,3.5,3.5,0,0,1-.4.55,2.32,2.32,0,0,1-.25.21,2.83,2.83,0,0,0,2.08-.55,5.9,5.9,0,0,0,1-2.56A.24.24,0,0,0,5.23,0ZM1.78,2.71a3,3,0,0,1-.44-.51.12.12,0,0,1,0-.17.14.14,0,0,1,.18,0A2.67,2.67,0,0,0,2,2.53a1,1,0,0,0,.17.12,1.31,1.31,0,0,0,0,.28A1.16,1.16,0,0,1,1.78,2.71Z"/></g></g></svg>
\ No newline at end of file
diff --git a/src/public/i_vegetarian.svg b/src/public/i_vegetarian.svg
new file mode 100644
index 0000000..acf75f6
--- /dev/null
+++ b/src/public/i_vegetarian.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6.88 5.91"><defs><style>.cls-1{fill:#38b5a3;}</style></defs><title>i_vegetarian</title><g id="Warstwa_2" data-name="Warstwa 2"><g id="Warstwa_1-2" data-name="Warstwa 1"><path class="cls-1" d="M6.61,1A1.92,1.92,0,0,0,4,.59c-1.25.71-2.9,3.57-2.9,3.57l0,.07-.28.22h0a.44.44,0,0,1-.35-.06A.33.33,0,0,0,0,4.56.32.32,0,0,0,.2,5l.2.08-.08.15a.33.33,0,0,0,.17.43.31.31,0,0,0,.13,0,.34.34,0,0,0,.31-.2,1.42,1.42,0,0,1,.55-.7l.05.07A19,19,0,0,1,5.45,3.63,1.74,1.74,0,0,0,6.61,1Zm-1,2.17a1.11,1.11,0,0,1-1-1.23A1.12,1.12,0,0,1,5.66.7,1.12,1.12,0,0,1,6.6,1.94,1.11,1.11,0,0,1,5.66,3.17Z"/><path class="cls-1" d="M5.66,1.5c-.18,0-.32.2-.32.44s.14.43.32.43S6,2.18,6,1.94,5.83,1.5,5.66,1.5Z"/><path class="cls-1" d="M.9,0,6.57,5.71a.14.14,0,0,1,0,.17h0a.14.14,0,0,1-.17,0L.73.2A.11.11,0,0,1,.73,0h0A.14.14,0,0,1,.9,0Z"/></g></g></svg>
\ No newline at end of file
diff --git a/src/reducers/appMode.js b/src/reducers/appMode.js
index b7bb239..a8e04dc 100644
--- a/src/reducers/appMode.js
+++ b/src/reducers/appMode.js
@@ -1,4 +1,4 @@
-const appModeReducer = (state = "search results", action) => {
+const appModeReducer = (state = "init", action) => {
   switch (action.type) {
     case "APP_INIT":
       return (state = "init");
diff --git a/src/styles/Pictograms.scss b/src/styles/Pictograms.scss
new file mode 100644
index 0000000..8b2ce9f
--- /dev/null
+++ b/src/styles/Pictograms.scss
@@ -0,0 +1,10 @@
+.pictograms-container {
+  height: 30px;
+  margin: 8px 8px 8px 0px;
+}
+
+.pictogram {
+  margin: 6px;
+  height: 20px;
+  width: 20px;
+}
diff --git a/src/styles/SearchResults.scss b/src/styles/SearchResults.scss
index ffe1e89..41cd87d 100644
--- a/src/styles/SearchResults.scss
+++ b/src/styles/SearchResults.scss
@@ -4,16 +4,14 @@
 }
 
 .card-restaurant {
-  background-color: #f7f7f7;
-  margin: 14px;
+  margin: 20px 0px 20px 0px;
   color: $secondary-color;
-  border-radius: 10px;
   min-width: 70vw;
   min-height: 200px;
   display: flex;
   cursor: pointer;
-  :hover {
-    background-color: #ebebeb;
+  &:hover {
+    color: $main-color;
   }
 }
 
@@ -21,7 +19,7 @@
   width: 180px;
   height: 180px;
   margin: 10px;
-  border-radius: 8px;
+  border-radius: 100px;
   background-image: url("../public/cat.jpg");
   background-size: cover;
 }
@@ -29,21 +27,43 @@
 .card-info {
   text-align: start;
   flex-grow: 6;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
 
   h1 {
     color: $main-color;
     font-size: 1.6rem;
     font-weight: 300;
     margin-bottom: 4px;
+    margin-top: 8px;
   }
   h3 {
     font-weight: 400;
     margin-top: 2px;
     margin-bottom: 2px;
-    font-size: 0.8rem;
+    font-size: 0.9rem;
   }
   hr {
     color: $main-color;
     border: solid 1px;
   }
 }
+
+.card-pictograms {
+  margin-bottom: 4px;
+}
+
+.results-count {
+  width: 100%;
+  color: $secondary-color;
+  text-align: left;
+  margin-top: 20px;
+  margin-bottom: 20px;
+  hr {
+    border: solid 1px rgb(238, 238, 238);
+  }
+  p {
+    font-size: 0.9rem;
+  }
+}
diff --git a/src/styles/TopBar.scss b/src/styles/TopBar.scss
index 0c05ba9..2f9c30d 100644
--- a/src/styles/TopBar.scss
+++ b/src/styles/TopBar.scss
@@ -10,4 +10,8 @@
 .topBarLogo {
   height: 2.4rem;
   margin: 16px;
+  cursor: pointer;
+  &:hover {
+    opacity: 0.5;
+  }
 }