feat: More vibrant colors, button for closing new point form

src/main/webapp/css/mapModal.css

@@ -17,6 +17,12 @@
     background-color: #fefefe;
 }
 
+#open-map-modal-icon {
+    font-size: 30px;
+    margin-left: 15px;
+    cursor: pointer;
+}
+
 #selectedPointInfo {
     font-family: Arial, sans-serif;
     font-size: 12px;
@@ -54,7 +60,13 @@
     position: absolute;
     top: 10px;
     right: 15px;
-    font-size: 40px;
+    font-size: 50px;
+    font-weight: bold;
+    text-shadow:
+            -1px -1px 0 #000,  /* Top left shadow */
+            1px -1px 0 #000,   /* Top right shadow */
+            -1px 1px 0 #000,   /* Bottom left shadow */
+            1px 1px 0 #000;
     color: white;
     background-color: transparent;
     border: none;
@@ -62,10 +74,6 @@
     z-index: 1500;
 }
 
-.close-button:hover {
-    color: #ddd;
-}
-
 #newPointForm {
     z-index: 1200;
     position: absolute;

src/main/webapp/js/mapModal.js

@@ -39,13 +39,13 @@ class MapModal {
 
         // Colours for the available types of pois
         this.typeColorMap = {
-            0: "#B3CDE0",  // Light blue
-            1: "#FBB4AE",  // Soft pink
-            2: "#CCEBC5",  // Light green
-            3: "#DECBE4",  // Lavender
-            5: "#FED9A6",  // Light peach
-            6: "#FFFFCC",  // Pale yellow
-            7: "#E5D8BD"   // Beige
+            0: "#5DADE2",  // Bright Blue
+            1: "#58D68D",  // Vibrant Green
+            2: "#AF7AC5",  // Medium Lavender
+            3: "#F5B041",  // Warm Orange
+            5: "#F7DC6F",  // Bright Yellow
+            6: "#DC7633",   // Rich Brown
+            7: "#FF33A6"  // Vivid Magenta
         };
 
     }
@@ -183,8 +183,8 @@ class MapModal {
             this.selectedPointLayer.setStyle({
                 radius: 8,  // Size of the marker
                 fillColor: color,
-                color: "#FFFFFF",  // Border color
-                weight: 2,  // Border thickness
+                color: "#FFFFFF",
+                weight: 2,
                 opacity: 1,
                 fillOpacity: 0.8
             });
@@ -192,8 +192,9 @@ class MapModal {
 
         // Highlight the new selected point
         layer.setStyle({
-            fillColor: 'red',
-            color: '#f00'
+            radius: 12,
+            fillColor: "#FF5733",
+            fillOpacity: 1,
         });
 
         if (zoomInToSelected) {
@@ -241,6 +242,7 @@ class MapModal {
             // Add event listener to close the form if clicked outside
             document.addEventListener('click', this.handleClickOutsidePointForm.bind(this), true);
 
+            const closeButton = newPointFormElement.querySelector("#close-button");
             const nameInput = newPointFormElement.querySelector('#name');
             const latitudeInput = newPointFormElement.querySelector('#latitude');
             const longitudeInput = newPointFormElement.querySelector('#longitude');
@@ -256,6 +258,10 @@ class MapModal {
             longitudeInput.addEventListener('input', validateInputs);
             validateInputs();
 
+            closeButton.addEventListener('click', function() {
+                newPointFormElement.remove();
+            });
+
             submitButton.addEventListener('click', () => {
                 this.removeExistingNewPoint();
                 this.setNewPointAsSelected(nameInput.value, parseFloat(latitudeInput.value), parseFloat(longitudeInput.value), parseInt(typeInput.value, 10));
@@ -358,6 +364,7 @@ class MapModal {
             <div id="newPointForm" class="panel panel-default"  style="top: ${positionY}px; left: ${positionX}px;">
                 <div class="panel-heading">
                     <h3 class="panel-title">Opprett nytt sted</h3>
+                    <span id="close-button" style="position: absolute; top: 5px; right: 10px; cursor: pointer; font-size: 18px;">&times;</span>
                 </div>
                 <div class="panel-body">
                     <div class="form-group">
@@ -381,7 +388,7 @@ class MapModal {
                         </select>
                     </div>
                     <div class="form-group text-right">
-                        <button id="submit-button" class="btn btn-primary">Save</button>
+                        <button id="submit-button" class="btn btn-primary">OK</button>
                     </div>                
                 </div>
             </div>`;