From f8ce80da324c0a257ac11a1af456aaeaa00aaa3c Mon Sep 17 00:00:00 2001 From: Maurice Date: Sun, 13 Sep 2026 20:41:14 +0200 Subject: [PATCH] fix(mobile): the pills and the badge above them on one ground Both are white at 28 percent, and they did not look it. The pills carried a backdrop blur of their own, and a second backdrop-filter inside the panel's own opens a new backdrop root, so the same colour composited darker one row down. The panel already blurs everything behind it. --- client/src/mobile/screens/dashboard/MDashboard.tsx | 6 +++++- client/src/mobile/screens/journey/MJourney.tsx | 2 +- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/client/src/mobile/screens/dashboard/MDashboard.tsx b/client/src/mobile/screens/dashboard/MDashboard.tsx index e52a5b4de..ccfbc3a79 100644 --- a/client/src/mobile/screens/dashboard/MDashboard.tsx +++ b/client/src/mobile/screens/dashboard/MDashboard.tsx @@ -418,10 +418,14 @@ function MSpotlightCard({ trip, t, onOpen, actions }: { * Set like the DAY x OF y badge above it, a size down. The three used to be * sentence case while the two badges over them were capitals, so the card had two * voices in the same corner. + * + * No backdrop blur of its own: the glass panel these sit on already blurs, and a + * second backdrop-filter inside one opens a new backdrop root, so the same + * white/.28 composited darker here than on the badge two rows up. */ function SpotlightPill({ icon, label }: { icon: React.ReactElement; label: string }): React.ReactElement { return ( - + {icon} {label} diff --git a/client/src/mobile/screens/journey/MJourney.tsx b/client/src/mobile/screens/journey/MJourney.tsx index 16622509b..d1f9bce6e 100644 --- a/client/src/mobile/screens/journey/MJourney.tsx +++ b/client/src/mobile/screens/journey/MJourney.tsx @@ -137,7 +137,7 @@ function HeroCard({ journey, onOpen }: { journey: JourneyListItem; onOpen: () => /** One fact about the journey, set like the spotlight trip's pills on the dashboard. */ function HeroPill({ icon, label }: { icon: React.ReactElement; label: string }) { return ( - + {icon} {label}