From af3dfd0bad1582565f227460fba52b8504fa8c4b Mon Sep 17 00:00:00 2001
From: Maurice <mauriceboe@icloud.com>
Date: Mon, 12 Oct 2026 21:14:28 +0000
Subject: [PATCH] fix(mobile): the new invite, version, gallery and time
 warning labels use the theme tokens and type tiers

---
 client/src/mobile/screens/collections/MCollInvites.tsx      | 4 ++--
 client/src/mobile/screens/dashboard/MUserMenu.tsx           | 2 +-
 client/src/mobile/screens/journey/MJourneyDetail.tsx        | 2 +-
 client/src/mobile/screens/trip/sheets/MReservationSheet.tsx | 2 +-
 4 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/client/src/mobile/screens/collections/MCollInvites.tsx b/client/src/mobile/screens/collections/MCollInvites.tsx
index 0509a2452..0e7dfa80b 100644
--- a/client/src/mobile/screens/collections/MCollInvites.tsx
+++ b/client/src/mobile/screens/collections/MCollInvites.tsx
@@ -25,8 +25,8 @@ export default function MCollInvites({ invites, onAccept, onDecline, t }: MCollI
           key={inv.collection_id}
           className="rounded-[18px] border border-[color:var(--m-gbr)] bg-[color:var(--m-glass)] p-[12px]"
         >
-          <div className="truncate text-[0.875rem] font-bold text-m-ink">{inv.name}</div>
-          <div className="mt-[2px] truncate font-geist text-[0.71875rem] text-m-muted">
+          <div className="truncate text-body font-bold text-m-ink">{inv.name}</div>
+          <div className="mt-[2px] truncate font-geist text-caption text-m-muted">
             {t('collections.invites.from')} {inv.from.username}
           </div>
           <div className="mt-3 flex items-center gap-2">
diff --git a/client/src/mobile/screens/dashboard/MUserMenu.tsx b/client/src/mobile/screens/dashboard/MUserMenu.tsx
index 94cf6d44e..da181b678 100644
--- a/client/src/mobile/screens/dashboard/MUserMenu.tsx
+++ b/client/src/mobile/screens/dashboard/MUserMenu.tsx
@@ -95,7 +95,7 @@ export default function MUserMenu({ open, onClose }: MUserMenuProps): React.Reac
         <>
           <div className="mx-2 my-1 h-px bg-[color:var(--m-rowbr)]" />
           <div className="flex justify-center pb-1 pt-[6px]">
-            <span className="inline-flex items-center gap-[5px] rounded-full bg-[color:var(--m-ic)] px-3 py-1 font-geist text-[0.625rem] font-bold text-m-muted">
+            <span className="inline-flex items-center gap-[5px] rounded-full bg-[color:var(--m-ic)] px-3 py-1 font-geist text-caption font-bold text-m-muted">
               <img src={dark ? '/text-light.svg' : '/text-dark.svg'} alt="TREK" className="h-[10px] opacity-50" />
               v{appVersion}
             </span>
diff --git a/client/src/mobile/screens/journey/MJourneyDetail.tsx b/client/src/mobile/screens/journey/MJourneyDetail.tsx
index 2c532c2a5..77b34d5ac 100644
--- a/client/src/mobile/screens/journey/MJourneyDetail.tsx
+++ b/client/src/mobile/screens/journey/MJourneyDetail.tsx
@@ -317,7 +317,7 @@ export default function MJourneyDetail() {
                       type="button"
                       onClick={() => setPhotoDeleteTarget(photo)}
                       aria-label={t('common.delete')}
-                      className="absolute end-[6px] top-[6px] flex h-7 w-7 items-center justify-center rounded-full bg-black/60 text-white backdrop-blur"
+                      className="absolute end-[6px] top-[6px] flex h-7 w-7 items-center justify-center rounded-full bg-[color:var(--overlay)] text-[color:var(--m-knob)] backdrop-blur"
                     >
                       <X size={13} />
                     </button>
diff --git a/client/src/mobile/screens/trip/sheets/MReservationSheet.tsx b/client/src/mobile/screens/trip/sheets/MReservationSheet.tsx
index 5b7b9b505..39662e4cf 100644
--- a/client/src/mobile/screens/trip/sheets/MReservationSheet.tsx
+++ b/client/src/mobile/screens/trip/sheets/MReservationSheet.tsx
@@ -253,7 +253,7 @@ export default function MReservationSheet({ planner, onOpenExpense }: MReservati
               </div>
             )}
             {endTimeBeforeStartTime && (
-              <div className="mt-[6px] text-[0.6875rem] text-[color:var(--m-st-pending)]">
+              <div className="mt-[6px] text-caption text-[color:var(--m-st-pending)]">
                 {t('reservations.validation.endTimeBeforeStartTime')}
               </div>
             )}