Implementing a Backdrop Component

README.md

@@ -30,3 +30,4 @@ NOTE: There can be more additions into the design, over iterations of the Applic
 13. Implementing and adding the `<OrderButton />`: [Commit Details](https://github.com/Ch-sriram/burger-builder/commit/4b5c848b026bd9c921731a3f11ba5ae05d6a46cf)
 14. Creating the `<OrderSummary />` Modal Component: [Commit Details](https://github.com/Ch-sriram/burger-builder/commit/220a907178932aac83bf09d61997785edf3f0bff)
 15. Showing/Hiding the `<OrderSummary />` Modal Component w. Animation: [Commit Details](https://github.com/Ch-sriram/burger-builder/commit/c50a7880b846b16bb0b1267034faf945d18f40e0)
+16. Implementing a `<Backdrop />` Component: [Commit Details]()

src/components/UI/Backdrop/Backdrop.component.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const Backdrop = styled.div`
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  z-index: 100;
+  left: 0;
+  top: 0;
+  background-color: rgba(0, 0, 0, .5);
+`;
+
+const backdrop = props => props.show ? <Backdrop onClick={props.clicked}/> : null;
+
+export default backdrop;

src/components/UI/Modal/Modal.component.jsx

@@ -1,16 +1,25 @@
 // LIBRARY IMPORTS
 import React from 'react';
 
+// CUSTOM COMPONENTS
+import Aux from '../../../hoc/Auxiliary/Auxiliary.hoc';
+import Backdrop from '../Backdrop/Backdrop.component';
+
 // STYLED IMPORTS
 import { Modal } from './Modal.styled';
 
 const modal = props => (
-  <Modal style={{
-    transform: props.show ? 'translateY(0)' : 'translateY(-100vh)',
-    opacity: props.show ? '1' : '0'
-  }}>
-    {props.children}
-  </Modal>
+  <Aux>
+    <Backdrop show={props.show} clicked={props.modalClosed} />
+    <Modal
+      style={{
+        transform: props.show ? "translateY(0)" : "translateY(-100vh)",
+        opacity: props.show ? "1" : "0",
+      }}
+    >
+      {props.children}
+    </Modal>
+  </Aux>
 );
 
 export default modal;

src/containers/BurgerBuilder/BurgerBuilder.component.jsx

@@ -70,8 +70,12 @@ class BurgerBuilder extends Component {
   };
 
   orderNowHandler = () => {
-    this.setState({ orderNow: true })
-  };
+    this.setState({ orderNow: true });
+  }
+
+  orderCancelHandler = () => {
+    this.setState({ orderNow: false });
+  }
 
   render() {
     const disabledInfo = { ...this.state.ingredients };
@@ -81,7 +85,7 @@ class BurgerBuilder extends Component {
 
     return (
       <Aux>
-        <Modal show={this.state.orderNow}>
+        <Modal show={this.state.orderNow} modalClosed={this.orderCancelHandler}>
           <OrderSummary
             ingredients={this.state.ingredients}
             price={this.state.totalPrice}