andras/perfect-postcode
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

Add dark mode

Browse source
This commit is contained in:
Andras Schmelczer 2026-02-01 13:07:24 +00:00
parent 5e210e14bd
commit 7235df0a97
14 changed files with 304 additions and 139 deletions
Download patch file Download diff file Expand all files Collapse all files

38
frontend/src/components/POIPane.tsx
View file

@ -95,13 +95,13 @@ export default function POIPane({
const selectedCount = selectedCategories.size;
return (
<div className="w-72 p-4 bg-white shadow-lg space-y-4 overflow-y-auto max-h-screen">
<h2 className="text-xl font-bold">Points of Interest</h2>
<div className="w-72 p-4 bg-white dark:bg-warm-900 shadow-lg space-y-4 overflow-y-auto max-h-screen">
<h2 className="text-xl font-bold dark:text-warm-100">Points of Interest</h2>
<div className="space-y-2" ref={dropdownRef}>
<button
onClick={() => setDropdownOpen(!dropdownOpen)}
className="w-full flex items-center justify-between px-3 py-2 text-sm border border-warm-300 rounded hover:border-warm-400 bg-white"
className="w-full flex items-center justify-between px-3 py-2 text-sm border border-warm-300 dark:border-warm-700 rounded hover:border-warm-400 bg-white dark:bg-warm-800 dark:text-warm-200"
>
<span className="truncate text-left">
{selectedCount === 0
@ -121,23 +121,23 @@ export default function POIPane({
</button>
{dropdownOpen && (
<div className="border border-warm-300 rounded shadow-lg bg-white">
<div className="flex gap-2 px-3 py-2 border-b border-warm-200">
<button onClick={selectAll} className="text-xs text-teal-600 hover:text-teal-800">
<div className="border border-warm-300 dark:border-warm-700 rounded shadow-lg bg-white dark:bg-warm-800">
<div className="flex gap-2 px-3 py-2 border-b border-warm-200 dark:border-warm-700">
<button onClick={selectAll} className="text-xs text-teal-600 dark:text-teal-400 hover:text-teal-800 dark:hover:text-teal-300">
All
</button>
<span className="text-xs text-warm-300">|</span>
<button onClick={selectNone} className="text-xs text-teal-600 hover:text-teal-800">
<span className="text-xs text-warm-300 dark:text-warm-600">|</span>
<button onClick={selectNone} className="text-xs text-teal-600 dark:text-teal-400 hover:text-teal-800 dark:hover:text-teal-300">
None
</button>
</div>
<div className="px-3 py-2 border-b border-warm-200">
<div className="px-3 py-2 border-b border-warm-200 dark:border-warm-700">
<input
type="text"
placeholder="Search categories..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
className="w-full px-2 py-1 text-sm border border-warm-300 rounded"
className="w-full px-2 py-1 text-sm border border-warm-300 dark:border-warm-700 rounded bg-white dark:bg-warm-900 dark:text-warm-200 dark:placeholder-warm-500"
/>
</div>
<div className="max-h-96 overflow-y-auto py-1">
@ -151,7 +151,7 @@ export default function POIPane({
return (
<div key={group.name}>
<div className="flex items-center gap-1 px-3 py-1.5 bg-warm-50 border-y border-warm-100">
<div className="flex items-center gap-1 px-3 py-1.5 bg-warm-50 dark:bg-warm-900 border-y border-warm-100 dark:border-warm-700">
<button
onClick={() => toggleCollapse(group.name)}
className="p-0.5 text-warm-400 hover:text-warm-600"
@ -178,9 +178,9 @@ export default function POIPane({
if (el) el.indeterminate = someInGroupSelected;
}}
onChange={() => toggleGroup(group.name)}
className="rounded"
className="rounded accent-teal-600"
/>
<span className="text-xs font-semibold text-warm-700">{group.name}</span>
<span className="text-xs font-semibold text-warm-700 dark:text-warm-300">{group.name}</span>
</label>
<span className="text-xs text-warm-400">
{groupSelected}/{group.categories.length}
@ -190,13 +190,13 @@ export default function POIPane({
group.categories.map((category) => (
<label
key={category}
className="flex items-center gap-2 px-3 pl-8 py-1.5 hover:bg-warm-50 cursor-pointer"
className="flex items-center gap-2 px-3 pl-8 py-1.5 hover:bg-warm-50 dark:hover:bg-warm-700 cursor-pointer dark:text-warm-300"
>
<input
type="checkbox"
checked={selectedCategories.has(category)}
onChange={() => toggleCategory(category)}
className="rounded"
className="rounded accent-teal-600"
/>
<span className="text-sm flex-1">{category}</span>
</label>
@ -210,17 +210,17 @@ export default function POIPane({
</div>
{selectedCount > 0 && (
<div className="p-3 bg-teal-50 rounded text-sm">
<div className="font-medium text-teal-900">
<div className="p-3 bg-teal-50 dark:bg-teal-900/30 rounded text-sm">
<div className="font-medium text-teal-900 dark:text-teal-300">
{poiCount.toLocaleString()} POI{poiCount !== 1 ? 's' : ''} visible
</div>
<div className="text-xs text-teal-700 mt-1">
<div className="text-xs text-teal-700 dark:text-teal-400 mt-1">
{selectedCount} categor{selectedCount !== 1 ? 'ies' : 'y'} selected
</div>
</div>
)}
<div className="p-3 bg-warm-100 rounded text-xs text-warm-600">
<div className="p-3 bg-warm-100 dark:bg-warm-800 rounded text-xs text-warm-600 dark:text-warm-400">
<p>Select categories to display POIs on the map.</p>
<p className="mt-2">Zoom in for better visibility of individual locations.</p>
</div>