Move channel legend to bottom-left of map
Also added dark mode support for the legend overlay. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -230,14 +230,14 @@ export default function MapView({ restaurants, selected, onSelectRestaurant, onB
|
|||||||
/>
|
/>
|
||||||
</Map>
|
</Map>
|
||||||
{channelNames.length > 1 && (
|
{channelNames.length > 1 && (
|
||||||
<div className="absolute top-2 left-2 bg-white/90 rounded-lg shadow px-2.5 py-1.5 flex flex-wrap gap-x-3 gap-y-1 text-[11px] z-10">
|
<div className="absolute bottom-2 left-2 bg-white/90 dark:bg-gray-900/90 backdrop-blur-sm rounded-lg shadow px-2.5 py-1.5 flex flex-wrap gap-x-3 gap-y-1 text-[11px] z-10">
|
||||||
{channelNames.map((ch) => (
|
{channelNames.map((ch) => (
|
||||||
<div key={ch} className="flex items-center gap-1">
|
<div key={ch} className="flex items-center gap-1">
|
||||||
<span
|
<span
|
||||||
className="inline-block w-2.5 h-2.5 rounded-full border"
|
className="inline-block w-2.5 h-2.5 rounded-full border"
|
||||||
style={{ backgroundColor: channelColors[ch].border, borderColor: channelColors[ch].border }}
|
style={{ backgroundColor: channelColors[ch].border, borderColor: channelColors[ch].border }}
|
||||||
/>
|
/>
|
||||||
<span className="text-gray-700">{ch}</span>
|
<span className="text-gray-700 dark:text-gray-300">{ch}</span>
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user