Boycott modal

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "bulma": "^0.7.1",
     "google-maps-react": "^2.0.2",
     "react": "^16.3.2",
     "react-dom": "^16.3.2",

src/App.css

@@ -26,3 +26,7 @@
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }
 }
+
+.map-container {
+  height: 65vh;
+}

src/components/App.js

@@ -2,29 +2,51 @@ import React, { Component } from "react";
 
 import GoogleMapsComponent from "./MapContainer";
 import Button from "./Button";
+import BoycottModal from "./BoycottModal";
 import logo from "../logo.svg";
 import "../App.css";
+import 'bulma/css/bulma.css'
 
 class App extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = { 
+      isActive: false 
+    };
+
+    this.toggleModal = this.toggleModal.bind(this);
+  }
+
   componentDidMount() {
     // this is here as an example for how to connect to the backend
     // it should be removed once development has started
     // this.props.healthCheck();
   }
 
+  toggleModal = () => {
+    this.setState({
+      isActive: !this.state.isActive
+    });
+  }
+
   render() {
     return (
       <div className="App">
         <header className="App-header">
           <img src={logo} className="App-logo" alt="logo" />
           <h1 className="App-title">Welcome to Boycottr</h1>
         </header>
+        <Button buttonText="Add Boycott" onClickHandler={this.toggleModal}/>
+        <BoycottModal 
+          isActive={this.state.isActive}
+          onClose={this.toggleModal}
+         />
         <div className="App-intro">
           <div className="map-container">
               <GoogleMapsComponent
                 className="map" 
-              />
-              <Button buttonText="Add Boycott"/>  
+              />  
           </div>
         </div>
       </div>

src/components/BoycottModal.js

@@ -0,0 +1,31 @@
+import React, { Component } from 'react';
+
+export class BoycottModal extends Component {
+    render() {
+        //Render nothing if the "show" prop is false
+        if(!this.props.isActive) {
+          return null;
+        }
+
+        return (
+            <div className={this.props.isActive ? 'is-active modal' : 'modal'} >
+                <div className="modal-background"></div>
+                <div className="modal-card">
+                    <header className="modal-card-head">
+                        <button 
+                            className="delete"
+                            aria-label="close"
+                            onClick={this.props.onClose}
+                        ></button>
+                    </header>
+                    <section className="modal-card-body">
+                    </section>
+                    <footer className="modal-card-foot">
+                    </footer>
+                </div>
+            </div>
+        );
+      }
+}
+
+export default BoycottModal;

src/components/MapContainer.js

@@ -55,19 +55,27 @@ export class GoogleMapsComponent extends Component {
 
   render() {
     const { isLoading, userLat, userLng } = this.props;
+    const style = {
+      'width': '85%',
+      'margin': '0 auto',
+      'display': 'block',
+      'height' : '65vh',
+      'position': 'static'
+    }
+
     return (
        isLoading
         ? <p>Loading</p>
         : <Map 
         google = {this.props.google}
-        className = "map"
-        zoom = {10}
+        zoom = {14}
         initialCenter = {
           {
             lat: userLat,
             lng: userLng
           }
         }
+        style = {style}
       >
         {MarkerList({markerData: this.props.markerData})}
       </Map>