component: add custom Button component

src/components/Burger/OrderSummary/OrderSummary.js

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import Aux from '../../../hoc/Auxiliary';
+import Button from '../../UI/Button/Button';
 
 const orderSummary = (props) => {
     const ingredients = Object.keys(props.ingredients)
@@ -20,6 +21,8 @@ const orderSummary = (props) => {
                 {ingredients}
             </ul>
             <p>Continue to Checkout?</p>
+            <Button btnType="Danger" clicked={props.purchaseCancalled}>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,12 @@
+import React from 'react';
+
+import classes from './Button.css';
+
+const button = (props) => {
+    return (
+        <button className={[classes.Button, classes[props.btnType]].join(' ')}
+            onClick={props.clicked}> { props.children}</button >
+    )
+}
+
+export default button;

src/containers/BurgerBuilder/BurgerBuilder.js

@@ -86,6 +86,10 @@ class BurgerBuilder extends Component {
         this.setState({ purchasing: false });
     }
 
+    purchaseContinueHandler = () => {
+        alert("You continue");
+    }
+
     render() {
         const disabledInfo = {
             ...this.state.ingredients
@@ -100,7 +104,10 @@ class BurgerBuilder extends Component {
                 <Modal
                     show={this.state.purchasing}
                     modalClosed={this.purchaseCancelHandler}>
-                    <OrderSummary ingredients={this.state.ingredients}></OrderSummary>
+                    <OrderSummary
+                        ingredients={this.state.ingredients}
+                        purchaseCancalled={this.purchaseCancelHandler}
+                        purchaseContinued={this.purchaseContinueHandler}></OrderSummary>
                 </Modal>
                 <Burger ingredients={this.state.ingredients} />
                 <BuildControls