k1nq/TREK
1
0
Fork 0
mirror of https://github.com/mauriceboe/TREK.git synced 2026-10-18 21:16:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(mobile): the pills and the badge above them on one ground

Browse Source 
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.
This commit is contained in:
Maurice
2026-09-13 20:41:14 +02:00
parent cbc28fad88
commit f8ce80da32
2 changed files with 6 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/mobile/screens/dashboard/MDashboard.tsx
+5 -1
View File
@@ -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 (
<span className="inline-flex items-center gap-1 rounded-full bg-white/[.28] px-[9px] py-[3px] font-geist text-[0.5625rem] font-bold tracking-[.07em] text-white uppercase backdrop-blur-[6px]">
<span className="inline-flex items-center gap-1 rounded-full bg-white/[.28] px-[9px] py-[3px] font-geist text-[0.5625rem] font-bold tracking-[.07em] text-white uppercase">
{icon}
{label}
</span>
client/src/mobile/screens/journey/MJourney.tsx
+1 -1
View File
@@ -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 (
<span className="inline-flex items-center gap-1 rounded-full bg-white/[.28] px-[9px] py-[3px] font-geist text-[0.5625rem] font-bold tracking-[.07em] uppercase backdrop-blur-[6px]">
<span className="inline-flex items-center gap-1 rounded-full bg-white/[.28] px-[9px] py-[3px] font-geist text-[0.5625rem] font-bold tracking-[.07em] uppercase">
{icon}
{label}
</span>