common popup component is created and styled

Relates #36

client/package.json

@@ -3,10 +3,11 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "babel-eslint": "^9.0.0",
+    "prop-types": "^15.7.2",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
-    "react-scripts": "^3.1.2",
-    "babel-eslint": "^9.0.0"
+    "react-scripts": "^3.1.2"
   },
   "devDependencies": {
     "eslint": "^5.12.0",

client/src/components/App/index.js

@@ -1,4 +1,10 @@
 import React from 'react';
 import './style.css';
+import PopUp from '../utils/PopUp/index';
 
-export default () => <h1>Hello World</h1>;
+export default () => (
+  <div>
+    <PopUp message="The waiter is coming" />
+    <h1>Hello World</h1>
+  </div>
+);

client/src/components/utils/PopUp/index.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import propTypes from 'prop-types';
+import './style.css';
+import img from '../../../assets/images/popupImg.png';
+// import Button from '../../utils/Button/index';
+
+function PopUp({ message }) {
+  return (
+    <div className="popup-background">
+      <div className="popup">
+        <img src={img} alt="food" className="popup-img" />
+        <p className="popup-text"> {message} </p>
+        <button type="submit" className="popup-button">
+          submit
+        </button>
+      </div>
+    </div>
+  );
+}
+
+PopUp.propTypes = {
+  message: propTypes.string.isRequired,
+};
+export default PopUp;

client/src/components/utils/PopUp/style.css

@@ -0,0 +1,62 @@
+.popup{
+  position: absolute;
+  text-align: center;
+  width: 80%;
+  height: 36%;
+  right: 50%;
+  top: 50%;
+  transform: translate(50%, -50%);
+  background:#FFFFFF;
+  border-radius: 10px;
+  flex-direction: column;
+  justify-content: space-between;
+
+}
+
+.popup-background{
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  background: #564B4B;
+  mix-blend-mode: multiply;
+}
+
+.popup-img{
+  position: absolute;
+    text-align: center;
+    display: flex;
+    width: 100%;
+    height: 40%;
+    left: 0;
+    top: -10%;
+    mix-blend-mode: normal;
+}
+
+
+.popup-text{
+  position: absolute;
+    right: 50%;
+    top: 40%;
+    transform: translate(50%, -50%);
+    font-family: Roboto;
+    font-style: normal;
+    font-weight: normal;
+    font-size: 30px;
+    line-height: 25px;
+    text-align: center;
+    color: #000000;
+}
+
+.popup-button{
+  text-align: center;
+  position: absolute;
+  width: 33%;
+  height: 15%;
+  left: 50%;
+  bottom: 20%;
+  transform: translate(-50%, 50%);
+  background: #ED6707;
+  border-radius: 3px;
+}