implemented the cancel and continue Button component

src/components/Burger/OrderSummary/OrderSummary.js

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import Aux from '../../../hoc/Aux';
+import Button from '../../UI/Button/Button';
 
 const orderSummary = (props) => {
   const ingredientSummary = Object.keys(props.ingredients)
@@ -19,6 +20,9 @@ const orderSummary = (props) => {
             {ingredientSummary}
         </ul>
         <p>Continue to Checkout?</p>
+        <Button btnType="Danger" clicked={props.purchaseCancelled}>CANCEL</Button>
+        <Button btnType="Success" clicked={props.purchaseContinued}>CONTINUE</Button>
+
     </Aux>
   )
 };

src/components/UI/Button/Button.css

@@ -0,0 +1,24 @@
+.Button {
+    background-color: transparent;
+    border: none;
+    color: white;
+    outline: none;
+    cursor: pointer;
+    font: inherit;
+    padding: 10px;
+    margin: 10px;
+    font-weight: bold;
+}
+
+.Button:first-of-type {
+    margin-left: 0;
+    padding-left: 0;
+}
+
+.Success {
+    color: #5C9210;
+}
+
+.Danger {
+    color: #944317;
+}

src/components/UI/Button/Button.js

@@ -0,0 +1,11 @@
+import React from 'react';
+
+import classes from './Button.css';
+
+const button = (props) => (
+  <button
+      className={[classes.Button, classes[props.btnType]].join(' ')}
+      onClick={props.clicked}>{props.children}</button>
+);
+
+export default button;

src/containers/BurgerBuilder/BurgerBuilder.js

@@ -84,6 +84,10 @@ class BurgerBuilder extends Component {
     this.setState({purchasing: false});
   }
 
+  purchaseContinueHandler = () => {
+    alert('You continue!');
+  }
+
   render() {
     const disabledInfo = {
         ...this.state.ingredients
@@ -95,16 +99,21 @@ class BurgerBuilder extends Component {
     return(
       <Aux>
           <Modal show={this.state.purchasing} modalClosed={this.purchaseCancelHandler}>
-              <OrderSummary ingredients={this.state.ingredients} />
+              <OrderSummary
+                  ingredients={this.state.ingredients}
+                  purchaseCancelled={this.purchaseCancelHandler}
+                  purchaseContinued={this.purchaseContinueHandler}
+               />
           </Modal>
-          <Burger ingredients={this.state.ingredients}/>
+          <Burger ingredients={this.state.ingredients} />
           <BuildControls
               ingredientAdded={this.addIngredientHandler}
               ingredientRemoved={this.removeIngredientHandler}
               disabled={disabledInfo}
               purchasable={this.state.purchasable}
               ordered={this.purchaseHandler}
-              price={this.state.totalPrice} />
+              price={this.state.totalPrice}
+          />
 
       </Aux>
     );