Added bootstrap buttons below map

Author: sodamodo

CHANGELOG.md

@@ -13,6 +13,7 @@ and this project adheres to release number versioning.
 - Added Docker containers with docker-compose [#10](https://github.com/CodeForPhilly/third-places/pull/10)
 - Set up Leaflet React component and boiletplate homepage[#7](https://github.com/CodeForPhilly/third-places/issues/7)
 - Added initial Django models & migration [#21](https://github.com/CodeForPhilly/third-places/pull/21)
+- Added buttons at bottom of Map [#28](https://github.com/CodeForPhilly/third-places/issues/28)
 
 ### Changed
 - Made Leaflet map element fullscreen and rmeoved title[#27](https://github.com/CodeForPhilly/third-places/issues/27)

src/app/src/Map/Map.css

@@ -1,4 +1,10 @@
 .leaflet-container {
   width: 100vw;
   height: 100vh;
+}
+
+.button-container {
+  padding-left: 1rem;
+  padding-right: 1rem;
+  margin-top: 2rem;
 }

src/app/src/Map/Map.tsx

@@ -21,9 +21,11 @@ function Map() {
             </Marker>
         </MapContainer>
       </div>
-      <Button style={{backgroundColor:"#ADD8E6"}} variant="primary">Primary</Button>{' '}
-      <Button style={{backgroundColor:"#ADD8E6"}} variant="secondary">Secondary</Button>
-      <Button style={{backgroundColor:"#ADD8E6"}} variant="success">Success</Button>
+      <div className="button-container">
+        <Button style={{backgroundColor:"#ADD8E6", marginLeft: '1rem', marginRight: '1rem'}} variant="primary">Near Me</Button>
+        <Button style={{backgroundColor:"#ADD8E6", marginLeft: '1rem', marginRight: '1rem'}} variant="primary">On the Way To</Button>
+        <Button style={{backgroundColor:"#ADD8E6", marginLeft: '1rem', marginRight: '1rem'}} variant="primary">Around Destination</Button>
+      </div>
     </div>
   )
 }