Add: Tailwind Utility-Klassen für verbesserte Stilgebung in MapComponent zuerst nur für poiLayer

Dieser Commit führt die Nutzung von Tailwind CSS Utility-Klassen in der MapComponent ein, um eine konsistente und effiziente Stilgebung zu gewährleisten. Folgende Änderungen wurden vorgenommen:

- Hinzufügung von Tailwind-Klassen zu Popups und Tooltips, um das Erscheinungsbild der UI-Elemente zu standardisieren.
- Anwendung von Text- und Background-Utility-Klassen auf verschiedene Elemente innerhalb der Marker-Popups, um die Lesbarkeit und Benutzerfreundlichkeit zu erhöhen.
- Optimierung der bestehenden CSS-Klassen durch Tailwind-Utilities, um die Notwendigkeit manueller CSS-Definitionen zu reduzieren und die Wartbarkeit des Codes zu verbessern.

Diese Änderungen tragen dazu bei, das visuelle Erscheinungsbild der Karten-Interaktionen zu vereinheitlichen und die Anpassung an das bestehende Design-System zu erleichtern.

components/MapComponent.js

@@ -19,6 +19,7 @@ import { zoomTriggerState } from "../store/atoms/zoomTriggerState.js";
 import { poiTypState } from "../store/atoms/poiTypState.js";
 import ShowAddStationPopup from "./ShowAddStationPopup";
 import { poiReadFromDbTriggerAtom } from "../store/atoms/poiReadFromDbTriggerAtom";
+
 //import { createRoot } from "react-dom/client";
 
 const plusRoundIcon = L.icon({
@@ -292,6 +293,8 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
           {
             text: "Station hinzufügen",
             icon: "img/add_station.png",
+            //style background red color
+            className: "background-red",
             callback: addStationCallback,
           },
           {
@@ -659,9 +662,13 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
         });
 
         // Popup konfigurieren
-        marker.bindPopup(
-          `<b>${location.description || "Unbekannt"}</b><br>Type: ${poiTypName}<br>Lat: ${latitude.toFixed(5)}, Lng: ${longitude.toFixed(5)}`
-        );
+        marker.bindPopup(`
+        <div>
+            <b  class="text-xl text-black-700">${location.description || "Unbekannt"}</b><br>
+            Type: ${poiTypName}<br>
+            Lat: ${latitude.toFixed(5)}, Lng: ${longitude.toFixed(5)}
+        </div>
+    `);
 
         // Event-Handler hinzufügen
         marker.on("mouseover", function () {