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

UI: Change PWA header icon backgrounds to primary color

Browse Source
This commit is contained in:
Codex Agent
2026-01-22 13:37:33 +01:00
parent 3a81c0991b
commit 0a03ea71a1
1 changed files with 6 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,4 +1,4 @@
import React, { Suspense } from 'react'; import React from 'react';
import { useLocation, useNavigate } from 'react-router-dom'; import { useLocation, useNavigate } from 'react-router-dom';
import { ChevronLeft, Bell, QrCode, ChevronsUpDown, Search } from 'lucide-react'; import { ChevronLeft, Bell, QrCode, ChevronsUpDown, Search } from 'lucide-react';
import { YStack, XStack } from '@tamagui/stacks'; import { YStack, XStack } from '@tamagui/stacks';
@@ -15,7 +15,6 @@ import { useNotificationsBadge } from '../hooks/useNotificationsBadge';
import { useOnlineStatus } from '../hooks/useOnlineStatus'; import { useOnlineStatus } from '../hooks/useOnlineStatus';
import { resolveEventDisplayName } from '../../lib/events'; import { resolveEventDisplayName } from '../../lib/events';
import { TenantEvent, getEvents } from '../../api'; import { TenantEvent, getEvents } from '../../api';
import { withAlpha } from './colors';
import { setTabHistory } from '../lib/tabHistory'; import { setTabHistory } from '../lib/tabHistory';
import { loadPhotoQueue } from '../lib/photoModerationQueue'; import { loadPhotoQueue } from '../lib/photoModerationQueue';
import { countQueuedPhotoActions } from '../lib/queueStatus'; import { countQueuedPhotoActions } from '../lib/queueStatus';
@@ -25,14 +24,13 @@ import { EventSwitcherSheet } from './EventSwitcherSheet';
type MobileShellProps = { type MobileShellProps = {
title?: string; title?: string;
subtitle?: string;
children: React.ReactNode; children: React.ReactNode;
activeTab: NavKey; activeTab: NavKey;
onBack?: () => void; onBack?: () => void;
headerActions?: React.ReactNode; headerActions?: React.ReactNode;
}; };
export function MobileShell({ title, subtitle, children, activeTab, onBack, headerActions }: MobileShellProps) { export function MobileShell({ title, children, activeTab, onBack, headerActions }: MobileShellProps) {
const { events, activeEvent, selectEvent } = useEventContext(); const { events, activeEvent, selectEvent } = useEventContext();
const { user } = useAuth(); const { user } = useAuth();
const { go } = useMobileNav(activeEvent?.slug, activeTab); const { go } = useMobileNav(activeEvent?.slug, activeTab);
@@ -49,9 +47,8 @@ export function MobileShell({ title, subtitle, children, activeTab, onBack, head
// --- DARK HEADER --- // --- DARK HEADER ---
const headerSurface = '#0F172A'; // Slate 900 const headerSurface = '#0F172A'; // Slate 900
const actionSurface = 'rgba(255, 255, 255, 0.1)'; const actionSurface = theme.primary;
const actionBorder = 'rgba(255, 255, 255, 0.05)'; const actionBorder = 'rgba(255, 255, 255, 0.1)';
const textColor = 'white';
const [fallbackEvents, setFallbackEvents] = React.useState<TenantEvent[]>([]); const [fallbackEvents, setFallbackEvents] = React.useState<TenantEvent[]>([]);
const [loadingEvents, setLoadingEvents] = React.useState(false); const [loadingEvents, setLoadingEvents] = React.useState(false);
@@ -204,7 +201,7 @@ export function MobileShell({ title, subtitle, children, activeTab, onBack, head
</HeaderActionButton> </HeaderActionButton>
) : ( ) : (
<HeaderActionButton onPress={() => {}} ariaLabel="Search"> <HeaderActionButton onPress={() => {}} ariaLabel="Search">
<XStack width={36} height={36} borderRadius={10} alignItems="center" justifyContent="center"> <XStack width={36} height={36} borderRadius={10} backgroundColor={actionSurface} alignItems="center" justifyContent="center">
<Search size={22} color="rgba(255,255,255,0.8)" strokeWidth={2.5} /> <Search size={22} color="rgba(255,255,255,0.8)" strokeWidth={2.5} />
</XStack> </XStack>
</HeaderActionButton> </HeaderActionButton>
@@ -221,7 +218,7 @@ export function MobileShell({ title, subtitle, children, activeTab, onBack, head
width={36} width={36}
height={36} height={36}
borderRadius={10} borderRadius={10}
backgroundColor="rgba(255, 255, 255, 0.15)" backgroundColor={actionSurface}
alignItems="center" alignItems="center"
justifyContent="center" justifyContent="center"
> >