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

UI: Change PWA header icon backgrounds to primary color
Some checks failed
linter / quality (push) Has been cancelled
Details
tests / ci (push) Has been cancelled
Details
tests / ui (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Codex Agent
2026-01-22 13:37:33 +01:00
parent 9d3c866562
commit 543b3015ca
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 { ChevronLeft, Bell, QrCode, ChevronsUpDown, Search } from 'lucide-react';
import { YStack, XStack } from '@tamagui/stacks';
@@ -15,7 +15,6 @@ import { useNotificationsBadge } from '../hooks/useNotificationsBadge';
import { useOnlineStatus } from '../hooks/useOnlineStatus';
import { resolveEventDisplayName } from '../../lib/events';
import { TenantEvent, getEvents } from '../../api';
import { withAlpha } from './colors';
import { setTabHistory } from '../lib/tabHistory';
import { loadPhotoQueue } from '../lib/photoModerationQueue';
import { countQueuedPhotoActions } from '../lib/queueStatus';
@@ -25,14 +24,13 @@ import { EventSwitcherSheet } from './EventSwitcherSheet';
type MobileShellProps = {
title?: string;
subtitle?: string;
children: React.ReactNode;
activeTab: NavKey;
onBack?: () => void;
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 { user } = useAuth();
const { go } = useMobileNav(activeEvent?.slug, activeTab);
@@ -49,9 +47,8 @@ export function MobileShell({ title, subtitle, children, activeTab, onBack, head
// --- DARK HEADER ---
const headerSurface = '#0F172A'; // Slate 900
const actionSurface = 'rgba(255, 255, 255, 0.1)';
const actionBorder = 'rgba(255, 255, 255, 0.05)';
const textColor = 'white';
const actionSurface = theme.primary;
const actionBorder = 'rgba(255, 255, 255, 0.1)';
const [fallbackEvents, setFallbackEvents] = React.useState<TenantEvent[]>([]);
const [loadingEvents, setLoadingEvents] = React.useState(false);
@@ -204,7 +201,7 @@ export function MobileShell({ title, subtitle, children, activeTab, onBack, head
</HeaderActionButton>
) : (
<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} />
</XStack>
</HeaderActionButton>
@@ -221,7 +218,7 @@ export function MobileShell({ title, subtitle, children, activeTab, onBack, head
width={36}
height={36}
borderRadius={10}
backgroundColor="rgba(255, 255, 255, 0.15)"
backgroundColor={actionSurface}
alignItems="center"
justifyContent="center"
>