component: add Backdrop component

src/components/UI/Backdrop/Backdrop.css

@@ -0,0 +1,9 @@
+.Backdrop {
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    z-index: 100;
+    left: 0;
+    top: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+}

src/components/UI/Backdrop/Backdrop.js

@@ -0,0 +1,13 @@
+import React from 'react';
+
+import classes from './Backdrop.css';
+const backdrop = (props) => {
+    return (
+        props.show ?
+            <div className={classes.Backdrop} 
+            onClick={props.clicked}>
+            </div> : null
+    )
+}
+
+export default backdrop;

src/components/UI/Modal/Modal.js

@@ -1,16 +1,25 @@
 import React from 'react';
 
+import Aux from '../../../hoc/Auxiliary';
+import Backdrop from '../Backdrop/Backdrop';
 import classes from './Modal.css';
 
 const modal = (props) => {
     return (
+        <Aux>
+            <Backdrop
+                show={props.show}
+                clicked={props.modalClosed}></Backdrop>
             <div
                 className={classes.Modal}
                 style={{
-                transform: props.show ? 'translateY(0)' : 'translateY(-100vh)'
+                    transform: props.show ? 'translateY(0)' : 'translateY(-100vh)',
+                    opacity: props.show ? '1' : '0',
                 }}>
                 {props.children}
             </div>
+
+        </Aux>
     );
 };
 

src/containers/BurgerBuilder/BurgerBuilder.js

@@ -82,6 +82,10 @@ class BurgerBuilder extends Component {
         this.setState({ purchasing: true });
     }
 
+    purchaseCancelHandler = () => {
+        this.setState({ purchasing: false });
+    }
+
     render() {
         const disabledInfo = {
             ...this.state.ingredients
@@ -93,7 +97,9 @@ class BurgerBuilder extends Component {
 
         return (
             <Aux>
-                <Modal show={this.state.purchasing}>
+                <Modal
+                    show={this.state.purchasing}
+                    modalClosed={this.purchaseCancelHandler}>
                     <OrderSummary ingredients={this.state.ingredients}></OrderSummary>
                 </Modal>
                 <Burger ingredients={this.state.ingredients} />