🚧 Style BoxConditionMap

code/frontend/src/components/interactive/BoxConditionMap.js

@@ -5,10 +5,14 @@ import { faMapPin, faPlus } from "@fortawesome/free-solid-svg-icons"
 import FormInline from "../base/FormInline"
 import Style from "./BoxConditionMap.module.css"
 import ButtonIconOnly from "../base/ButtonIconOnly"
-import {MapContainer, TileLayer} from "react-leaflet"
+import { MapContainer, Marker, TileLayer } from "react-leaflet"
 import useRepositoryEditor from "../../hooks/useRepositoryEditor"
 
 
+const STARTING_POSITION = [41.89309, 12.48289]
+const STARTING_ZOOM = 3
+
+
 /**
  * A {@link BoxFull} that allows the user to select a geographical location to use to filter tweets.
  *
@@ -52,21 +56,22 @@ export default function BoxConditionMap({ ...props }) {
     }
 
     return (
-        <BoxFull header={<span>Search by <FontAwesomeIcon icon={faMapPin}/> zone</span>} {...props}>
+        <BoxFull
-            <MapContainer center={[41.89309, 12.48289]} zoom={3} style={{"height": "400px"}}>
+            header={<span>Search by <FontAwesomeIcon icon={faMapPin}/> zone</span>}
+            childrenClassName={Style.BoxConditionMapContents}
+            {...props}
+        >
+            <MapContainer
+                center={STARTING_POSITION}
+                zoom={STARTING_ZOOM}
+                className={Style.MapContainer}
+            >
                 <TileLayer
                     attribution='(c) <a href="https://osm.org/copyright">OpenStreetMap</a> contributors'
                     url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                 />
+                <Marker draggable={true} position={STARTING_POSITION}/>
             </MapContainer>
-            <FormInline>
-                <ButtonIconOnly
-                    className={Style.Button}
-                    icon={faPlus}
-                    color={"Green"}
-                    onClick={onButtonClick}
-                />
-            </FormInline>
         </BoxFull>
     )
 }

code/frontend/src/components/interactive/BoxConditionMap.module.css

@@ -1,7 +1,11 @@
-.Input {
+.BoxConditionMapContents {
-    flex-shrink: 1;
+    display: flex;
+    flex-direction: column;
+    padding: 0;
 }
 
-.Button {
+.MapContainer {
-
+    flex-grow: 1;
+    height: 300px;
+    border-radius: 0 0 25px 25px;
 }