From a2c4bcaea6f926b63d405c3b1d0381ab286e4263 Mon Sep 17 00:00:00 2001
From: Philipp Opheys <philipp@opheys.dev>
Date: Sat, 30 Sep 2023 18:49:10 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20style=20room=20map=20Popup?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 rogue-thi-app/components/RoomMap.jsx    |  2 +-
 rogue-thi-app/styles/RoomMap.module.css | 39 +++++++++++++++++++++++++
 2 files changed, 40 insertions(+), 1 deletion(-)

diff --git a/rogue-thi-app/components/RoomMap.jsx b/rogue-thi-app/components/RoomMap.jsx
index f4d417cf..20a40285 100644
--- a/rogue-thi-app/components/RoomMap.jsx
+++ b/rogue-thi-app/components/RoomMap.jsx
@@ -184,7 +184,7 @@ export default function RoomMap ({ highlight, roomData }) {
 
     return (
       <FeatureGroup key={key}>
-        <Popup>
+        <Popup className={styles.popup}>
           <strong>
             {entry.properties.Raum}
           </strong>
diff --git a/rogue-thi-app/styles/RoomMap.module.css b/rogue-thi-app/styles/RoomMap.module.css
index d766a7ec..2f910b9f 100644
--- a/rogue-thi-app/styles/RoomMap.module.css
+++ b/rogue-thi-app/styles/RoomMap.module.css
@@ -109,4 +109,43 @@
 
 .locationMarker {
   filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, .25));
+}
+
+/* Popup close button */
+.popup :global(.leaflet-popup-close-button) > span {
+  color: var(--white);
+  font-size: 1.5rem !important;
+}
+
+.popup :global(.leaflet-popup-close-button) {
+  top: 1.3rem !important;
+  right: 1rem !important;
+  background-color: var(--primary) !important;
+  border-radius: 50% !important;
+  height: 1.7rem !important;
+  width: 1.7rem !important;
+  transition: background-color 0.2s ease-in-out !important;
+}
+
+.popup :global(.leaflet-popup-close-button:hover) {
+  background-color: var(--navbar-border) !important;
+}
+
+/* Whole Popup */
+.popup > div {
+  border-radius: 10px;
+  font-size: 0.8rem;
+  color: var(--tabbar-tab);
+}
+
+/* Popup wrapper */
+.popup :global(.leaflet-popup-content-wrapper) {
+  padding: 0.2rem;
+  background-color: var(--rooms-controls-background);
+  padding-right: 2.2rem;
+}
+
+/* Popup tip */
+.popup :global(.leaflet-popup-tip) {
+  background-color: var(--tabbar-background);
 }
\ No newline at end of file