💄 style room map Popup

neuland-ingolstadt · Sep 30, 2023 · a2c4bca · a2c4bca
1 parent 9193e57
commit a2c4bca
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 1 deletion.
diff --git 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
@@ -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);
 }