adds shopping cart page

_redirects

@@ -0,0 +1 @@
+/*    /index.html   200

package.json

@@ -20,6 +20,7 @@
     "react-router": "^5.1.2",
     "react-router-dom": "^5.1.2",
     "react-scripts": "3.2.0",
+    "react-star-rating-component": "^1.4.1",
     "redux": "^4.0.4",
     "redux-thunk": "^2.3.0"
   },

public/_redirects

@@ -0,0 +1 @@
+/*    /index.html   200

src/App.js

@@ -1,10 +1,15 @@
 import React, { Component } from 'react';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import {Switch, Route} from 'react-router-dom'
-
+import RestauMenuPage from './Pages/Restaurant/RestauMenuPage'
 import Homepage from './Pages/Homepage'
 import UserDashboard from './Pages/user-dashboard';
 
+import ReviewOrder from './Pages/ReviewOrder'
+import DashboardOrder from './Pages/user-dashboard/order-dashboard';
+import OrderRefund from "./Pages/user-dashboard/dashboard-refund"
+
+import Cart from './Pages/shopping-cart';
 
 
 
@@ -16,10 +21,17 @@ class App extends Component {
 
     <div className="App">
      <Switch>
-        <Route exact  path="/" component={Homepage} />
+        <Route exact path="/" component={Homepage} />
         <Route exact path="/dashboard/information" component={UserDashboard} />
+        <Route exact path="/restaurant/menu" component={RestauMenuPage} />
+
+        <Route exact path="/revieworder" component={ReviewOrder} />
+
+        <Route exact path="/dashboard/order" component={DashboardOrder} />
+        <Route exact path="/dashboard/refund" component={OrderRefund} />
+        <Route exact path='/cart' component={Cart} />
      </Switch> 
-     
+
     </div>
 
   );

src/Pages/Homepage/Homepage-component/header/header.scss

@@ -27,6 +27,7 @@ b {
 .search {
     margin-top: 2%;
     margin-bottom: 2%;
+    border: none;
 }
 @media screen and (max-width: 780px) {
     .header-text {

src/Pages/Homepage/Homepage-component/subscription/subscription.scss

@@ -1,12 +1,12 @@
 .subscription {
     background-color: #D6DB46;
-    height: 500px;
+    height: 333px;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     position: absolute;
-    margin-top: 40%;
+    // margin-top: 40%;
 }
 .subscription-header {
     font-family: Roboto;

src/Pages/Restaurant/Components/DasMenu.scss

@@ -0,0 +1,27 @@
+@import url("https://fonts.googleapis.com/css?family=Roboto&display=swap");
+
+.dashmenu-wrapper {
+  display: flex;
+  justify-content: space-between;
+  margin: 2%;
+}
+
+.dash-button {
+  background-color: #ffffff;
+  color: #5c5b5bca;
+  border: none;
+  text-align: left;
+  font-family: "Roboto", sans-serif;
+  font-size: 18px;
+  width: 35%;
+  height: 10%;
+  &:hover {
+    background-color: #d6db46;
+    color: #ffffff;
+  }
+  &:focus {
+    background-color: #d6db46;
+    color: #fff;
+    border: 1px solid #d6db46;
+  }
+}

src/Pages/Restaurant/Components/DashMenu.jsx

@@ -0,0 +1,31 @@
+import React from "react";
+import {
+  faCommentDots,
+  faConciergeBell,
+  faInfoCircle
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import "./DasMenu.scss";
+
+class DashMenu extends React.Component {
+  render() {
+    return (
+      <div className="dashmenu-wrapper">
+        <button className="dash-button">
+          {" "}
+          <FontAwesomeIcon icon={faConciergeBell} /> Menu
+        </button>
+
+        <button className="dash-button">
+          <FontAwesomeIcon icon={faCommentDots} /> Reviews (1)
+        </button>
+        <button className="dash-button">
+          {" "}
+          <FontAwesomeIcon icon={faInfoCircle} /> Restaurant Info
+        </button>
+      </div>
+    );
+  }
+}
+
+export default DashMenu;

src/Pages/Restaurant/Components/Discount.jsx

@@ -0,0 +1,52 @@
+import React from "react";
+import offers from "../../../assets/offers.svg";
+import "./Discounts.scss";
+import Container from "react-bootstrap/Container";
+import Row from "react-bootstrap/Row";
+import goodfood from "../../../assets/goodfood.svg";
+
+const Discount = () => {
+  return (
+    <Container>
+      <Row>
+        <div className="discount-wrapper">
+          <img
+            src={offers}
+            className="discount-image"
+            height="400px"
+            width="301px"
+            alt="offers and discounts"
+          />
+          <div className="discount">
+            <img
+              src={goodfood}
+              className="good-food"
+              height="80px"
+              alt="good-food"
+            />
+            <p className="percent-off">15% Off</p>
+            <p
+              style={{
+                color: "#ED7B43",
+                fontWeight: "bold",
+                marginTop: "5%",
+                lineHeight: "2%",
+                fontSize: "14px",
+                marginLeft: "2%"
+              }}
+            >
+              DISCOUNT
+            </p>
+          </div>
+          <div className="offers">
+            <a className="offers-link" href="">
+              VIEW OFFERS
+            </a>
+          </div>
+        </div>
+      </Row>
+    </Container>
+  );
+};
+
+export default Discount;

src/Pages/Restaurant/Components/Discounts.scss

@@ -0,0 +1,47 @@
+@import url("https://fonts.googleapis.com/css?family=Roboto&display=swap");
+
+
+
+.discount-wrapper{
+    margin-left: 30%;
+}
+.percent-off {
+  background-color: #ed7b43;
+  border: 1px solid #ed7b43;
+  border-radius: 100px;
+  width: 50px;
+  margin-top: 20%;
+  text-align: center;
+  color: #fff;
+  font-weight: normal;
+  font-family: "Roboto", sans-serif;
+}
+.discount{
+  position: absolute;
+  top: 20%;
+  left: 75%;
+}
+
+
+.offers {
+  background-color: #ed7b43;
+  border: 1px solid #ed7b43;
+  margin-left: 16%;
+  width: 70%;
+  text-align: center;
+  height: 8%;
+
+
+}
+
+.offers-link{
+  font-family: "Roboto", sans-serif;
+  padding: 0 auto;
+  font-size: 16px;
+  color: #fff;
+
+  &:hover {
+    color: #fff;
+    text-decoration: none;
+  }
+}

src/Pages/Restaurant/Components/FoodCard.jsx

@@ -0,0 +1,85 @@
+import React from "react";
+import FoodList from "./FoodList";
+import "./FoodCard.scss";
+import Container from "react-bootstrap/Container";
+import "bootstrap/dist/css/bootstrap.min.css";
+import DashMenu from "./DashMenu";
+import { faSearch } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+class FoodCard extends React.Component {
+  constructor() {
+    super();
+    this.state = {
+      fooditems: FoodList
+    };
+  }
+  render() {
+    const fudList = this.state.fooditems.map(item => (
+      <Container>
+        <div key={item.key} className="food-card">
+          <img src={item.imageUrl} className="image" alt="food" />
+
+          <div className="food-info">
+            <h5 className="food-name">{item.name}</h5>
+            <p className="food-desc"> {item.description} </p>
+          </div>
+
+          <div className="food--price">
+            <p className="food--price__order"> {item.order} </p>
+            <button className=" food--price__btn btn-action">
+              Add to Cart
+            </button>
+          </div>
+        </div>
+      </Container>
+    ));
+
+    return (
+      <div className="food-card-wrapper">
+        <DashMenu />
+        <div className="test">
+          <FontAwesomeIcon
+            className="search-icon"
+            icon={faSearch}
+            color="rgba(0, 0, 0, 0.2)"
+          />
+          <input
+            type="text"
+            className="search"
+            placeholder="Find Food "
+            ref={input => (this.search = input)}
+            onChange={this.handleInputChange}
+          />
+        </div>
+
+        <p
+          style={{
+            fontStyle: "italic",
+            color: "rgba(0, 0, 0, 0.4)",
+            marginLeft: "3%",
+            padding: "2%",
+            fontSize: "12px"
+          }}
+        >
+          Please note that you can individually add item to cart or you can just
+          add all item to cart below
+        </p>
+        <h5
+          style={{
+            fontSize: "22px",
+            fontWeight: "bold",
+            marginLeft: "5%",
+            color: "#D6DB46"
+          }}
+        >
+          Local Assorted
+        </h5>
+        <div>{fudList}</div>
+        <a  className="master-button" href="">Add to cart</a>
+      </div>
+    );
+  }
+}
+
+export default FoodCard;