soeren/fotospiel-app
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

Align admin mobile colors with Tamagui v2 tokens

Browse Source
This commit is contained in:
Codex Agent
2026-02-04 11:44:07 +01:00
parent 0eacb5646c
commit 56a39d0535
8 changed files with 60 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
resources/js/admin/mobile/components/MobileShell.tsx
View File

@@ -48,10 +48,14 @@ export function MobileShell({ title, subtitle, children, activeTab, onBack, head
const backgroundColor = theme.background;
const [isCompactHeader, setIsCompactHeader] = React.useState(false);
// --- DARK HEADER ---
const headerSurface = '#0F172A'; // Slate 900
const headerSurface = theme.surface;
const headerText = theme.text;
const headerMuted = theme.muted;
const actionSurface = theme.primary;
const actionBorder = 'rgba(255, 255, 255, 0.1)';
const actionBorder = theme.glassBorder;
const pillSurface = theme.glassSurface;
const pillSurfacePress = theme.glassSurfaceStrong;
const pillBorder = theme.glassBorder;
const [fallbackEvents, setFallbackEvents] = React.useState<TenantEvent[]>([]);
const [loadingEvents, setLoadingEvents] = React.useState(false);
@@ -144,7 +148,7 @@ export function MobileShell({ title, subtitle, children, activeTab, onBack, head
const EventContextPill = () => {
if (!effectiveActive || isEventsIndex || isCompactHeader) {
return (
<Text fontSize="$md" fontWeight="700" fontFamily="$display" color="white">
<Text fontSize="$md" fontWeight="700" fontFamily="$display" color={headerText}>
{pageTitle}
</Text>
);
@@ -158,7 +162,7 @@ export function MobileShell({ title, subtitle, children, activeTab, onBack, head
fontSize="$lg"
fontWeight="700"
fontFamily="$display"
color="white"
color={headerText}
numberOfLines={1}
ellipsizeMode="tail"
>
@@ -170,7 +174,7 @@ export function MobileShell({ title, subtitle, children, activeTab, onBack, head
return (
<Pressable onPress={() => setSwitcherOpen(true)} aria-label={t('header.eventSwitcher', 'Switch event')}>
<XStack
backgroundColor="rgba(255, 255, 255, 0.12)"
backgroundColor={pillSurface}
paddingHorizontal="$3"
paddingVertical="$1.5"
borderRadius={999}
@@ -178,20 +182,20 @@ export function MobileShell({ title, subtitle, children, activeTab, onBack, head
gap="$1.5"
maxWidth={220}
borderWidth={1}
borderColor="rgba(255, 255, 255, 0.08)"
pressStyle={{ backgroundColor: 'rgba(255, 255, 255, 0.2)' }}
borderColor={pillBorder}
pressStyle={{ backgroundColor: pillSurfacePress }}
>
<Text
fontSize="$sm"
fontWeight="700"
color="white"
color={headerText}
numberOfLines={1}
ellipsizeMode="tail"
flexShrink={1}
>
{displayName}
</Text>
<ChevronsUpDown size={14} color="rgba(255,255,255,0.6)" />
<ChevronsUpDown size={14} color={headerMuted} />
</XStack>
</Pressable>
);
@@ -200,7 +204,7 @@ export function MobileShell({ title, subtitle, children, activeTab, onBack, head
const headerBackButton = onBack ? (
<HeaderActionButton onPress={onBack} ariaLabel={t('actions.back', 'Back')}>
<XStack alignItems="center" gap="$1.5">
<ChevronLeft size={28} color="white" strokeWidth={2.5} />
<ChevronLeft size={28} color={headerText} strokeWidth={2.5} />
</XStack>
</HeaderActionButton>
) : (