Changed Map CSS to use flexbox. DRY'd button style

Author: sodamodo

src/app/src/Map/Map.css

@@ -1,10 +1,21 @@
+.leaflet-container-wrapper {
+  display: flex;
+  flex-flow: column nowrap;
+  height: 100vh;
+}
+
 .leaflet-container {
   width: 100vw;
-  height: 100vh;
+  height: 100%;
+  flex-grow: 1;
 }
 
 .button-container {
-  padding-left: 1rem;
-  padding-right: 1rem;
-  margin-top: 2rem;
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: center;
+  z-index: 1000;
+  width: 100vw;
+  padding: 1rem 0;
+  background-color: white;
 }

src/app/src/Map/Map.tsx

@@ -5,7 +5,7 @@ import Button from 'react-bootstrap/Button';
 
 
 function Map() {
-
+  const buttonStyle = {backgroundColor:"#ADD8E6", marginLeft: '1rem', marginRight: '1rem'}
   return (
     <div className="leaflet-container-wrapper">
       <div className="leaflet-container">    
@@ -22,9 +22,9 @@ function Map() {
         </MapContainer>
       </div>
       <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>
+        <Button style={buttonStyle} variant="primary">Near Me</Button>
+        <Button style={buttonStyle} variant="primary">On the Way To</Button>
+        <Button style={buttonStyle} variant="primary">Around Destination</Button>
       </div>
     </div>
   )