From 6f842e81435d0c4e5822de3c80cda084ab2bf462 Mon Sep 17 00:00:00 2001
From: Eugene Burmakin <iamfrey@gmail.com>
Date: Thu, 21 Aug 2025 19:48:32 +0200
Subject: [PATCH] Make visit popup look nicer

---
 app/javascript/maps/visits.js    | 66 ++++++++++++++++++++++----------
 app/javascript/styles/visits.css | 39 +++++++++++++++++++
 2 files changed, 84 insertions(+), 21 deletions(-)

diff --git a/app/javascript/maps/visits.js b/app/javascript/maps/visits.js
index 0ceeb415..b55b52d2 100644
--- a/app/javascript/maps/visits.js
+++ b/app/javascript/maps/visits.js
@@ -1326,30 +1326,38 @@ export class VisitsManager {
       // Create popup content with form and dropdown
       const defaultName = visit.name;
       const popupContent = `
-        <div class="p-3">
-          <div class="mb-3">
-            <div class="text-sm mb-1">
+        <div class="p-4 bg-base-100 text-base-content rounded-lg shadow-lg">
+          <div class="mb-4">
+            <div class="text-sm mb-2 text-base-content/80 font-medium">
               ${dateTimeDisplay.trim()}
             </div>
-            <div>
-              <span class="text-sm text-gray-500">
-                Duration: ${durationText},
-              </span>
-              <span class="text-sm mb-1 ${statusColorClass} font-semibold">
-                status: ${visit.status.charAt(0).toUpperCase() + visit.status.slice(1)}
-              </span>
-              <span>${visit.place.latitude}, ${visit.place.longitude}</span>
+            <div class="space-y-1">
+              <div class="text-sm text-base-content/60">
+                Duration: ${durationText}
+              </div>
+              <div class="text-sm ${statusColorClass} font-semibold">
+                Status: ${visit.status.charAt(0).toUpperCase() + visit.status.slice(1)}
+              </div>
+              <div class="text-xs text-base-content/50 font-mono">
+                ${visit.place.latitude}, ${visit.place.longitude}
+              </div>
             </div>
           </div>
-          <form class="visit-name-form" data-visit-id="${visit.id}">
+          <form class="visit-name-form space-y-3" data-visit-id="${visit.id}">
             <div class="form-control">
+              <label class="label">
+                <span class="label-text text-sm font-medium">Visit Name</span>
+              </label>
               <input type="text"
-                     class="input input-bordered input-sm w-full text-neutral-content"
+                     class="input input-bordered input-sm w-full bg-base-200 text-base-content placeholder:text-base-content/50"
                      value="${defaultName}"
                      placeholder="Enter visit name">
             </div>
-            <div class="form-control mt-2">
-              <select class="select text-neutral-content select-bordered select-sm w-full h-fit" name="place">
+            <div class="form-control">
+              <label class="label">
+                <span class="label-text text-sm font-medium">Location</span>
+              </label>
+              <select class="select select-bordered select-sm w-full bg-base-200 text-base-content" name="place">
                 ${possiblePlaces.map(place => `
                   <option value="${place.id}" ${place.id === visit.place.id ? 'selected' : ''}>
                     ${place.name}
@@ -1357,11 +1365,26 @@ export class VisitsManager {
                 `).join('')}
               </select>
             </div>
-            <div class="flex gap-2 mt-2">
-              <button type="submit" class="btn btn-xs btn-primary">Save</button>
+            <div class="flex gap-2 mt-4 pt-2 border-t border-base-300">
+              <button type="submit" class="btn btn-sm btn-primary flex-1">
+                <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
+                </svg>
+                Save
+              </button>
               ${visit.status !== 'confirmed' ? `
-                <button type="button" class="btn btn-xs btn-success confirm-visit" data-id="${visit.id}">Confirm</button>
-                <button type="button" class="btn btn-xs btn-error decline-visit" data-id="${visit.id}">Decline</button>
+                <button type="button" class="btn btn-sm btn-success confirm-visit" data-id="${visit.id}">
+                  <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4"></path>
+                  </svg>
+                  Confirm
+                </button>
+                <button type="button" class="btn btn-sm btn-error decline-visit" data-id="${visit.id}">
+                  <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+                  </svg>
+                  Decline
+                </button>
               ` : ''}
             </div>
           </form>
@@ -1374,8 +1397,9 @@ export class VisitsManager {
         closeOnClick: true,
         autoClose: true,
         closeOnEscapeKey: true,
-        maxWidth: 450, // Set maximum width
-        minWidth: 300  // Set minimum width
+        maxWidth: 420, // Set maximum width
+        minWidth: 320, // Set minimum width
+        className: 'visit-popup' // Add custom class for additional styling
       })
         .setLatLng([visit.place.latitude, visit.place.longitude])
         .setContent(popupContent);
diff --git a/app/javascript/styles/visits.css b/app/javascript/styles/visits.css
index c43cb036..5852d002 100644
--- a/app/javascript/styles/visits.css
+++ b/app/javascript/styles/visits.css
@@ -15,3 +15,42 @@
 .merge-visits-button {
   margin: 8px 0;
 }
+
+/* Visit popup styling */
+.visit-popup .leaflet-popup-content-wrapper {
+  border-radius: 0.5rem;
+  border: none;
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  padding: 0;
+  overflow: hidden;
+}
+
+.visit-popup .leaflet-popup-content {
+  margin: 0;
+  line-height: 1.5;
+}
+
+.visit-popup .leaflet-popup-tip {
+  border-top-color: hsl(var(--b1));
+}
+
+.visit-popup .leaflet-popup-close-button {
+  color: hsl(var(--bc)) !important;
+  font-size: 18px !important;
+  font-weight: bold !important;
+  top: 8px !important;
+  right: 8px !important;
+  width: 24px !important;
+  height: 24px !important;
+  text-align: center !important;
+  line-height: 24px !important;
+  background: hsl(var(--b2)) !important;
+  border-radius: 50% !important;
+  border: none !important;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
+}
+
+.visit-popup .leaflet-popup-close-button:hover {
+  background: hsl(var(--b3)) !important;
+  color: hsl(var(--bc)) !important;
+}