From 1b08a46ea6db3542fedfbb6c79169ae7fcfbffd7 Mon Sep 17 00:00:00 2001
From: Stefano Pigozzi <256895@studenti.unimore.it>
Date: Sat, 1 May 2021 02:33:46 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=A7=20Style=20BoxConditionMap?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/interactive/BoxConditionMap.js | 27 +++++++++++--------
 .../interactive/BoxConditionMap.module.css    | 12 ++++++---
 2 files changed, 24 insertions(+), 15 deletions(-)

diff --git a/code/frontend/src/components/interactive/BoxConditionMap.js b/code/frontend/src/components/interactive/BoxConditionMap.js
index d3b45c4..89540ca 100644
--- a/code/frontend/src/components/interactive/BoxConditionMap.js
+++ b/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}>
-            <MapContainer center={[41.89309, 12.48289]} zoom={3} style={{"height": "400px"}}>
+        <BoxFull
+            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>
     )
 }
diff --git a/code/frontend/src/components/interactive/BoxConditionMap.module.css b/code/frontend/src/components/interactive/BoxConditionMap.module.css
index f8b3933..27da2ec 100644
--- a/code/frontend/src/components/interactive/BoxConditionMap.module.css
+++ b/code/frontend/src/components/interactive/BoxConditionMap.module.css
@@ -1,7 +1,11 @@
-.Input {
-    flex-shrink: 1;
+.BoxConditionMapContents {
+    display: flex;
+    flex-direction: column;
+    padding: 0;
 }
 
-.Button {
-
+.MapContainer {
+    flex-grow: 1;
+    height: 300px;
+    border-radius: 0 0 25px 25px;
 }
\ No newline at end of file