Multiple UX Polish Updates #72

Copilot · 2025-12-14T03:25:30Z

The !important flag is used here to override Select2's default width. While this works, it's generally better to avoid !important as it makes styles harder to maintain and override in the future. Consider using a more specific selector or setting the width through Select2's initialization options in timezone-select.js instead.

Suggested change

width: 100% !important;

width: 100%;

Copilot · 2025-12-14T03:25:32Z

The toggleDropdown function doesn't check if the dropdown element exists before attempting to toggle its class. If the element is not found, this will throw a TypeError. Add a null check: if (dropdown) dropdown.classList.toggle('show'); to prevent errors on pages where the dropdown doesn't exist.

Suggested change

dropdown.classList.toggle('show');

if (dropdown) {

dropdown.classList.toggle('show');

}

Copilot · 2025-12-14T03:25:32Z

Unused variable toggleButton.

Suggested change

const toggleButton = document.querySelector('.dropdown-toggle');

Copilot · 2025-12-14T03:25:31Z

The click event listener is registered outside of DOMContentLoaded. While it will work since the actual DOM queries happen when the event fires, it's better practice to wrap all event listener registrations in DOMContentLoaded for consistency and to ensure the page structure is ready. This makes the code more maintainable and reduces potential issues if the script load order changes.

Suggested change

document.addEventListener('click', function(event) {

const dropdown = document.getElementById('chartDropdown');

const toggleButton = document.querySelector('.dropdown-toggle');

if (dropdown && !event.target.closest('.dropdown-button-wrapper')) {

dropdown.classList.remove('show');

}

});

// Prevent form submission when clicking the dropdown toggle

document.addEventListener('DOMContentLoaded', function() {

// Prevent form submission when clicking the dropdown toggle

document.addEventListener('DOMContentLoaded', function() {

// Close dropdown when clicking outside

document.addEventListener('click', function(event) {

const dropdown = document.getElementById('chartDropdown');

const toggleButton = document.querySelector('.dropdown-toggle');

if (dropdown && !event.target.closest('.dropdown-button-wrapper')) {

dropdown.classList.remove('show');

}

});

Copilot · 2025-12-14T03:25:29Z

The Select2 initialization has allowClear: false which means users cannot clear their timezone selection once made. This could be problematic if a user wants to start over or made a mistake. Consider setting allowClear: true to improve user experience, especially since the field is required and validation will still ensure a value is selected on form submission.

Suggested change

allowClear: false,

allowClear: true,

Copilot · 2025-12-14T03:25:29Z

When restoring the timezone value from localStorage, there's no validation to ensure the stored value is actually one of the valid timezone options. If localStorage contains an invalid or outdated value, Select2 will fail silently. Consider adding validation by checking if the stored value exists as an option in the select element before attempting to restore it.

Suggested change

if (storedTimezone) {

if (

storedTimezone &&

$('#timezone_offset option[value="' + storedTimezone.replace(/"/g, '\\"') + '"]').length > 0

) {

Copilot · 2025-12-14T03:25:29Z

The timezone-select.js script depends on jQuery being loaded, but there's no check to ensure jQuery is available before using it. If jQuery fails to load from the CDN for any reason, this script will throw an error and break the page. Add a check like if (typeof jQuery === 'undefined') or wrap the code in a try-catch block for better error handling.

Copilot · 2025-12-14T03:25:30Z

jQuery and Select2 are loaded from CDNs in the head, blocking page rendering. These scripts should be loaded with 'defer' attribute or moved to the end of the body to improve initial page load performance. Since timezone-select.js uses DOMContentLoaded, deferring these scripts won't cause timing issues.

Suggested change

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<script src="https://code.jquery.com/jquery-3.6.0.min.js" defer></script>

<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js" defer></script>

-Original file line number
+Diff line change
@@ -1,6 +1,7 @@
     // Interactive map for location selection using Leaflet
     let map;
     let marker;
+    let currentTileLayer;
     document.addEventListener('DOMContentLoaded', function() {
         initMap();
@@ Expand All / @@ -23,6 +24,20 @@ document.addEventListener('DOMContentLoaded', function() { @@
                 }
             });
         }
+        // Listen for dark mode changes and update map tiles
+        const observer = new MutationObserver(function(mutations) {
+            mutations.forEach(function(mutation) {
+                if (mutation.attributeName === 'class') {
+                    updateMapTiles();
+                }
+            });
+        });
+        observer.observe(document.documentElement, {
+            attributes: true,
+            attributeFilter: ['class']
+        });
     });
     function initMap() {
@@ Expand All / @@ -35,10 +50,8 @@ function initMap() { @@
         // Make map globally available for form persistence
         window.map = map;
-        // Add OpenStreetMap tiles
-        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-            attribution: '© OpenStreetMap contributors'
-        }).addTo(map);
+        // Add appropriate tile layer based on current mode
+        updateMapTiles();
         // Add click listener to map
         map.on('click', function(e) {
@@ Expand Down Expand Up / @@ -143,6 +156,32 @@ function getTimezoneForLocation(lat, lng) { @@
         }
     }
+    function updateMapTiles() {
+        if (!map) return;
+        // Remove existing tile layer if present
+        if (currentTileLayer) {
+            map.removeLayer(currentTileLayer);
+        }
+        const isDarkMode = document.documentElement.classList.contains('dark-mode');
+        if (isDarkMode) {
+            // Dark mode: Use CartoDB Dark Matter tiles
+            currentTileLayer = L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', {
+                attribution: '© OpenStreetMap contributors © CARTO',
+                subdomains: 'abcd',
+                maxZoom: 19
+            }).addTo(map);
+        } else {
+            // Light mode: Use standard OpenStreetMap tiles
+            currentTileLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+                attribution: '© OpenStreetMap contributors',
+                maxZoom: 19
+            }).addTo(map);
+        }
+    }
     // Search for locations using Nominatim (OpenStreetMap's geocoding service)
     function searchLocation() {
         const searchInput = document.getElementById('locationSearch');
@@ Expand Down @@

-Original file line number
+Diff line change
@@ Expand Up / @@ -5,9 +5,9 @@ function createSparkle() { @@
         const sparkle = document.createElement('div');
         sparkle.className = 'sparkle';
-        // Random sparkle characters
-        const sparkleChars = ['✨', '⭐', '🌟', '💫', '🔮'];
-        sparkle.textContent = sparkleChars[Math.floor(Math.random() * sparkleChars.length)];
+        // Random star characters (matching star-trail)
+        const starChars = ['✦', '✧', '⋆', '✩', '✪', '✫', '✬', '✭', '✮', '✯'];
+        sparkle.textContent = starChars[Math.floor(Math.random() * starChars.length)];
         // Random position across the width
         sparkle.style.left = Math.random() * 100 + '%';
@@ Expand All / @@ -20,6 +20,12 @@ function createSparkle() { @@
         const size = Math.random() * 15 + 15;
         sparkle.style.fontSize = size + 'px';
+        // Random color (matching star-trail)
+        const colors = ['#FFD700', '#FFA500', '#FF69B4', '#9370DB', '#00CED1', '#FFFFFF', '#FFB6C1'];
+        const color = colors[Math.floor(Math.random() * colors.length)];
+        sparkle.style.color = color;
+        sparkle.style.textShadow = `0 0 ${size/2}px ${color}`;
         // Some sparkles get extra twinkle
         if (Math.random() > 0.7) {
             sparkle.classList.add('twinkle');
@@ Expand Down @@

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Multiple UX Polish Updates #72

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Copilot AI Dec 14, 2025

Uh oh!

Copilot AI Dec 14, 2025

Uh oh!

Copilot AI Dec 14, 2025

Uh oh!

Copilot AI Dec 14, 2025

Uh oh!

Copilot AI Dec 14, 2025

Uh oh!

Copilot AI Dec 14, 2025

Uh oh!

Copilot AI Dec 14, 2025

Uh oh!

Copilot AI Dec 14, 2025

Uh oh!

Uh oh!

Multiple UX Polish Updates #72

Uh oh!

Multiple UX Polish Updates #72

Uh oh!

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Copilot AI Dec 14, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 14, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 14, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 14, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 14, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 14, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 14, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 14, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!