Add: Tailwind Utility-Klassen für verbesserte Stilgebung in MapComponent für alle anderen Layer

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

@@ -814,13 +814,13 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
             .join("");
 
           marker.bindPopup(`
-            <b>${station.LD_Name}</b><br>
+            <div class=" bg-white rounded-lg ">
-            ${station.Device}<br>
+              <h3 class="text-lg font-semibold text-gray-900">${station.LD_Name}</h3>
-            ${station.Area_Short} (${station.Area_Name})
+              <p class="text-gray-800"><strong>Gerät:</strong> ${station.Device}</p>
-        <br>
+              <p class="text-gray-800"><strong>Zone:</strong> ${station.Area_Short} (${station.Area_Name})</p>
-            ${station.Location_Short} (${station.Location_Name})
+              <p class="text-gray-800"><strong>Standort:</strong> ${station.Location_Short} (${station.Location_Name})</p>
-  <br>
+              <div class="mt-2">${statusInfo}</div>
-            ${statusInfo}
+            </div>
           `);
           return marker;
         });