Skip to content

Commit 1fcdc7a

Browse files
MedformatikMedformatik
committed
fix: dark mode text colors and preview tile consistency in layer selector
Replace hardcoded light-mode colors (#202124, #3c4043) with MUI theme tokens (text.primary, text.secondary) in DesktopMorePanel. Extract shared LayerPreviewTile component to ensure consistent square preview rendering across desktop and mobile, fixing SVG overflow in mobile tiles.
1 parent 61aa6ec commit 1fcdc7a

5 files changed

Lines changed: 168 additions & 235 deletions

File tree

‎apps/web/src/components/map/layer-selector/DesktopMorePanel.tsx‎

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -82,13 +82,13 @@ export function DesktopMorePanel({ onClose }: DesktopMorePanelProps) {
8282
mb: 0.6,
8383
}}
8484
>
85-
<Typography sx={{ fontSize: 18, fontWeight: 700, color: "#202124", lineHeight: 1 }}>
85+
<Typography sx={{ fontSize: 18, fontWeight: 700, color: "text.primary", lineHeight: 1 }}>
8686
{t("mapDetails")}
8787
</Typography>
8888
<IconButton
8989
onClick={onClose}
9090
aria-label={t("closeMorePanel")}
91-
sx={{ color: "#202124", mt: -0.5 }}
91+
sx={{ color: "text.primary", mt: -0.5 }}
9292
>
9393
<CloseIcon sx={{ fontSize: 23 }} />
9494
</IconButton>
@@ -108,9 +108,11 @@ export function DesktopMorePanel({ onClose }: DesktopMorePanelProps) {
108108
))}
109109
</Box>
110110

111-
<Divider sx={{ my: 0.8, borderColor: "rgba(60,64,67,0.12)" }} />
111+
<Divider sx={{ my: 0.8 }} />
112112

113-
<Typography sx={{ fontSize: 16, fontWeight: 700, color: "#202124", lineHeight: 1, mb: 0.6 }}>
113+
<Typography
114+
sx={{ fontSize: 16, fontWeight: 700, color: "text.primary", lineHeight: 1, mb: 0.6 }}
115+
>
114116
{t("mapTools")}
115117
</Typography>
116118
<Box
@@ -161,9 +163,11 @@ export function DesktopMorePanel({ onClose }: DesktopMorePanelProps) {
161163
})}
162164
</Box>
163165

164-
<Divider sx={{ my: 0.8, borderColor: "rgba(60,64,67,0.12)" }} />
166+
<Divider sx={{ my: 0.8 }} />
165167

166-
<Typography sx={{ fontSize: 16, fontWeight: 700, color: "#202124", lineHeight: 1, mb: 0.6 }}>
168+
<Typography
169+
sx={{ fontSize: 16, fontWeight: 700, color: "text.primary", lineHeight: 1, mb: 0.6 }}
170+
>
167171
{t("mapType")}
168172
</Typography>
169173
<Box
@@ -195,11 +199,11 @@ export function DesktopMorePanel({ onClose }: DesktopMorePanelProps) {
195199
size="small"
196200
checked={globeView}
197201
onChange={() => setGlobeView(!globeView)}
198-
icon={<CheckBoxOutlineBlankIcon sx={{ fontSize: 19, color: "#202124" }} />}
202+
icon={<CheckBoxOutlineBlankIcon sx={{ fontSize: 19, color: "text.primary" }} />}
199203
checkedIcon={<CheckBoxIcon sx={{ fontSize: 19, color: "#0b7d8b" }} />}
200204
sx={{ p: 0.3 }}
201205
/>
202-
<Typography sx={{ fontSize: 12.5, color: "#202124" }}>{t("globeView")}</Typography>
206+
<Typography sx={{ fontSize: 12.5, color: "text.primary" }}>{t("globeView")}</Typography>
203207
</Box>
204208
</Box>
205209
</Box>

‎apps/web/src/components/map/layer-selector/DesktopMoreTile.tsx‎

Lines changed: 11 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,67 +1,27 @@
11
"use client";
22

3-
import Box from "@mui/material/Box";
4-
import ButtonBase from "@mui/material/ButtonBase";
5-
import Typography from "@mui/material/Typography";
3+
import { LayerPreviewTile } from "./LayerPreviewTile";
64
import type { DesktopMoreOption } from "./layerSelectorConfig";
75

86
export function DesktopMoreTile({
97
item,
108
label,
11-
labelWidth = 132,
9+
labelWidth = 96,
1210
onClick,
1311
}: {
1412
item: DesktopMoreOption;
1513
label: string;
1614
labelWidth?: number;
1715
onClick?: () => void;
1816
}) {
19-
const inner = (
20-
<Box
21-
sx={{
22-
minHeight: 76,
23-
display: "flex",
24-
flexDirection: "column",
25-
alignItems: "center",
26-
}}
27-
>
28-
<Box
29-
sx={{
30-
width: 48,
31-
height: 48,
32-
borderRadius: "14px",
33-
overflow: "hidden",
34-
border: item.selected ? "2px solid #0b7d8b" : "1px solid rgba(60,64,67,0.1)",
35-
boxShadow: item.selected
36-
? "0 0 0 1px rgba(11,125,139,0.22)"
37-
: "0 1px 3px rgba(0,0,0,0.06)",
38-
}}
39-
>
40-
{item.preview}
41-
</Box>
42-
<Typography
43-
sx={{
44-
mt: 0.58,
45-
fontSize: 12.5,
46-
color: item.selected ? "#0b7d8b" : "#3c4043",
47-
lineHeight: 1.2,
48-
whiteSpace: "pre-line",
49-
width: labelWidth,
50-
textAlign: "center",
51-
}}
52-
>
53-
{label}
54-
</Typography>
55-
</Box>
17+
return (
18+
<LayerPreviewTile
19+
preview={item.preview}
20+
label={label}
21+
selected={item.selected}
22+
size={48}
23+
labelWidth={labelWidth}
24+
onClick={onClick}
25+
/>
5626
);
57-
58-
if (onClick) {
59-
return (
60-
<ButtonBase onClick={onClick} sx={{ borderRadius: "14px" }}>
61-
{inner}
62-
</ButtonBase>
63-
);
64-
}
65-
66-
return inner;
6727
}

‎apps/web/src/components/map/layer-selector/DesktopQuickSelector.tsx‎

Lines changed: 33 additions & 134 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,8 @@ import Typography from "@mui/material/Typography";
1010
import { OVERLAY_REGISTRY, toggleOverlay, useLayerStore } from "@openmapx/core";
1111
import { useTranslations } from "next-intl";
1212
import type { MouseEvent } from "react";
13-
import { TEAL } from "@/lib/theme";
1413
import { TRAFFIC_MIN_ZOOM } from "../layers/trafficConfig";
14+
import { LayerPreviewTile } from "./LayerPreviewTile";
1515
import { globePreview } from "./layerPreviewSvgs";
1616
import { BASE_LAYER_OPTIONS, DETAIL_OPTIONS } from "./layerSelectorConfig";
1717

@@ -36,113 +36,44 @@ function DetailOptionTile({
3636
const disabled = option.key === "traffic" && trafficZoomTooLow;
3737
const highlighted = overlayActive && !disabled;
3838
const label = t(option.labelKey);
39-
const onClick = () => {
40-
if (disabled) return;
41-
if (option.overlayId) toggleOverlay(option.overlayId);
42-
};
4339

4440
return (
45-
<ButtonBase
46-
onClick={onClick}
47-
aria-label={t("toggleOverlay", { layer: label })}
48-
aria-disabled={disabled ? "true" : "false"}
49-
sx={{
50-
width: 72,
51-
minWidth: 72,
52-
borderRadius: "12px",
53-
p: 0.5,
54-
textAlign: "center",
55-
opacity: disabled ? 0.42 : 1,
56-
filter: disabled ? "grayscale(1)" : "none",
57-
cursor: disabled ? "not-allowed" : "pointer",
58-
}}
59-
>
60-
<Box sx={{ width: "100%", display: "flex", flexDirection: "column", alignItems: "center" }}>
61-
<Box
62-
sx={{
63-
width: 48,
64-
height: 48,
65-
borderRadius: "10px",
66-
overflow: "hidden",
67-
mb: 0.3,
68-
border: highlighted ? `2px solid ${TEAL}` : "2px solid transparent",
69-
}}
70-
>
71-
{option.preview}
72-
</Box>
73-
<Box sx={{ display: "flex", alignItems: "center", gap: 0.3 }}>
74-
<Box sx={{ display: "flex", color: highlighted ? TEAL : "text.secondary" }}>
75-
{option.icon}
76-
</Box>
77-
<Typography
78-
sx={{
79-
fontSize: 11,
80-
lineHeight: 1.15,
81-
color: highlighted ? TEAL : "text.secondary",
82-
fontWeight: highlighted ? 600 : 500,
83-
}}
84-
>
85-
{label}
86-
</Typography>
87-
</Box>
41+
<Box sx={{ width: 72, minWidth: 72, p: 0.5, display: "flex", justifyContent: "center" }}>
42+
<LayerPreviewTile
43+
preview={option.preview}
44+
label={label}
45+
selected={highlighted}
46+
icon={option.icon}
47+
disabled={disabled}
48+
onClick={() => {
49+
if (!disabled && option.overlayId) toggleOverlay(option.overlayId);
50+
}}
51+
>
8852
{disabled ? (
8953
<Typography sx={{ mt: 0.2, fontSize: 9, color: "text.secondary" }}>
9054
Zoom {TRAFFIC_MIN_ZOOM}+
9155
</Typography>
9256
) : null}
93-
</Box>
94-
</ButtonBase>
57+
</LayerPreviewTile>
58+
</Box>
9559
);
9660
}
9761

9862
function GlobeTile() {
9963
const t = useTranslations("layers");
10064
const globeView = useLayerStore((s) => s.globeView);
10165
const setGlobeView = useLayerStore((s) => s.setGlobeView);
102-
const label = t("globeView");
10366

10467
return (
105-
<ButtonBase
106-
onClick={() => setGlobeView(!globeView)}
107-
aria-label={label}
108-
sx={{
109-
width: 72,
110-
minWidth: 72,
111-
borderRadius: "12px",
112-
p: 0.5,
113-
textAlign: "center",
114-
}}
115-
>
116-
<Box sx={{ width: "100%", display: "flex", flexDirection: "column", alignItems: "center" }}>
117-
<Box
118-
sx={{
119-
width: 48,
120-
height: 48,
121-
borderRadius: "10px",
122-
overflow: "hidden",
123-
mb: 0.3,
124-
border: globeView ? `2px solid ${TEAL}` : "2px solid transparent",
125-
}}
126-
>
127-
{globePreview}
128-
</Box>
129-
<Box sx={{ display: "flex", alignItems: "center", gap: 0.3 }}>
130-
<Box sx={{ display: "flex", color: globeView ? TEAL : "text.secondary" }}>
131-
<PublicIcon sx={{ fontSize: 14 }} />
132-
</Box>
133-
<Typography
134-
sx={{
135-
fontSize: 11,
136-
lineHeight: 1.15,
137-
color: globeView ? TEAL : "text.secondary",
138-
fontWeight: globeView ? 600 : 500,
139-
}}
140-
>
141-
{label}
142-
</Typography>
143-
</Box>
144-
</Box>
145-
</ButtonBase>
68+
<Box sx={{ width: 72, minWidth: 72, p: 0.5, display: "flex", justifyContent: "center" }}>
69+
<LayerPreviewTile
70+
preview={globePreview}
71+
label={t("globeView")}
72+
selected={globeView}
73+
icon={<PublicIcon sx={{ fontSize: 14 }} />}
74+
onClick={() => setGlobeView(!globeView)}
75+
/>
76+
</Box>
14677
);
14778
}
14879

@@ -171,50 +102,18 @@ export function DesktopQuickSelector({
171102
const selected = option.id === activeLayer;
172103
const label = t(option.labelKey);
173104
return (
174-
<ButtonBase
105+
<Box
175106
key={option.id}
176-
onClick={() => setActiveLayer(option.id)}
177-
aria-label={t("useMap", { layer: label })}
178-
sx={{
179-
width: 72,
180-
minWidth: 72,
181-
borderRadius: "12px",
182-
p: 0.5,
183-
textAlign: "center",
184-
}}
107+
sx={{ width: 72, minWidth: 72, p: 0.5, display: "flex", justifyContent: "center" }}
185108
>
186-
<Box
187-
sx={{ width: "100%", display: "flex", flexDirection: "column", alignItems: "center" }}
188-
>
189-
<Box
190-
sx={{
191-
width: 48,
192-
height: 48,
193-
borderRadius: "10px",
194-
overflow: "hidden",
195-
mb: 0.3,
196-
border: selected ? `2px solid ${TEAL}` : "2px solid transparent",
197-
}}
198-
>
199-
{option.preview}
200-
</Box>
201-
<Box sx={{ display: "flex", alignItems: "center", gap: 0.3 }}>
202-
<Box sx={{ display: "flex", color: selected ? TEAL : "text.secondary" }}>
203-
{option.icon}
204-
</Box>
205-
<Typography
206-
sx={{
207-
fontSize: 11,
208-
lineHeight: 1.15,
209-
color: selected ? TEAL : "text.secondary",
210-
fontWeight: selected ? 600 : 500,
211-
}}
212-
>
213-
{label}
214-
</Typography>
215-
</Box>
216-
</Box>
217-
</ButtonBase>
109+
<LayerPreviewTile
110+
preview={option.preview}
111+
label={label}
112+
selected={selected}
113+
icon={option.icon}
114+
onClick={() => setActiveLayer(option.id)}
115+
/>
116+
</Box>
218117
);
219118
})}
220119

0 commit comments

Comments
 (0)