From d30b1a1f7e4c58872c09b88cd3ce4ca78e1c5a0c Mon Sep 17 00:00:00 2001
From: ISA <Ismail.ali@littwin-systemtechnik.de>
Date: Tue, 7 May 2024 15:51:06 +0200
Subject: [PATCH] =?UTF-8?q?Add:=20Tailwind=20Utility-Klassen=20f=C3=BCr=20?=
 =?UTF-8?q?verbesserte=20Stilgebung=20in=20MapComponent=20f=C3=BCr=20alle?=
 =?UTF-8?q?=20anderen=20Layer=20Dieser=20Commit=20f=C3=BChrt=20die=20Nutzu?=
 =?UTF-8?q?ng=20von=20Tailwind=20CSS=20Utility-Klassen=20in=20der=20MapCom?=
 =?UTF-8?q?ponent=20ein,=20um=20eine=20konsistente=20und=20effiziente=20St?=
 =?UTF-8?q?ilgebung=20zu=20gew=C3=A4hrleisten.=20Folgende=20=C3=84nderunge?=
 =?UTF-8?q?n=20wurden=20vorgenommen:?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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 | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

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