Commit 7ac9989d authored by boojack's avatar boojack

fix(map): align dark mode map styling

parent 15d8ec10
import { timestampDate } from "@bufbuild/protobuf/wkt"; import { timestampDate } from "@bufbuild/protobuf/wkt";
import L, { DivIcon } from "leaflet"; import L, { DivIcon } from "leaflet";
import "leaflet.markercluster/dist/MarkerCluster.Default.css";
import "leaflet.markercluster/dist/MarkerCluster.css"; import "leaflet.markercluster/dist/MarkerCluster.css";
import { ArrowUpRightIcon, MapPinIcon } from "lucide-react"; import { ArrowUpRightIcon, MapPinIcon } from "lucide-react";
import { useEffect, useMemo } from "react"; import { useEffect, useMemo } from "react";
...@@ -97,7 +96,7 @@ const UserMemoMap = ({ creator, className }: Props) => { ...@@ -97,7 +96,7 @@ const UserMemoMap = ({ creator, className }: Props) => {
<MapContainer <MapContainer
center={defaultCenter} center={defaultCenter}
zoom={2} zoom={2}
className="h-full w-full z-0" className="h-full w-full z-0 !bg-muted"
scrollWheelZoom scrollWheelZoom
zoomControl={false} zoomControl={false}
attributionControl={false} attributionControl={false}
......
...@@ -68,10 +68,9 @@ const GlassButton = ({ icon, onClick, ariaLabel, title }: GlassButtonProps) => { ...@@ -68,10 +68,9 @@ const GlassButton = ({ icon, onClick, ariaLabel, title }: GlassButtonProps) => {
className={cn( className={cn(
"h-8 w-8 flex items-center justify-center rounded-lg", "h-8 w-8 flex items-center justify-center rounded-lg",
"cursor-pointer transition-all duration-200", "cursor-pointer transition-all duration-200",
"bg-white/80 backdrop-blur-md border border-white/30 shadow-lg", "border border-border/80 bg-background/88 text-foreground shadow-sm backdrop-blur-md",
"hover:bg-white/90 hover:scale-105 active:scale-95", "hover:scale-105 hover:bg-background hover:shadow-md active:scale-95",
"dark:bg-black/80 dark:border-white/10 dark:hover:bg-black/90", "focus:outline-none focus:ring-2 focus:ring-ring/60",
"focus:outline-none focus:ring-2 focus:ring-blue-500",
)} )}
> >
{icon} {icon}
...@@ -213,7 +212,7 @@ const LeafletMap = (props: MapProps) => { ...@@ -213,7 +212,7 @@ const LeafletMap = (props: MapProps) => {
return ( return (
<div className="memo-location-map relative isolate w-full overflow-hidden rounded-xl border border-border bg-background shadow-sm"> <div className="memo-location-map relative isolate w-full overflow-hidden rounded-xl border border-border bg-background shadow-sm">
<MapContainer <MapContainer
className="h-72 w-full" className="h-72 w-full !bg-muted"
center={position} center={position}
zoom={13} zoom={13}
scrollWheelZoom={false} scrollWheelZoom={false}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment