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

Refine admin PWA dark theme controls
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-02-04 13:50:59 +01:00
parent 239f55f9c5
commit 66c7131d79
22 changed files with 999 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
resources/js/admin/mobile/EventControlRoomPage.tsx
View File

@@ -251,9 +251,19 @@ function PhotoActionButton({
}
function PhotoStatusTag({ label }: { label: string }) {
const { textStrong } = useAdminTheme();
const badgeBg = withAlpha(textStrong, 0.14);
const badgeBorder = withAlpha(textStrong, 0.25);
return (
<XStack paddingHorizontal={6} paddingVertical={2} borderRadius={999} backgroundColor={withAlpha('#0f172a', 0.7)}>
<Text fontSize={9} fontWeight="700" color="#fff">
<XStack
paddingHorizontal={6}
paddingVertical={2}
borderRadius={999}
backgroundColor={badgeBg}
borderWidth={1}
borderColor={badgeBorder}
>
<Text fontSize={9} fontWeight="700" color={textStrong}>
{label}
</Text>
</XStack>
@@ -280,7 +290,9 @@ export default function MobileEventControlRoomPage() {
const isMember = user?.role === 'member';
const slug = slugParam ?? activeEvent?.slug ?? null;
const online = useOnlineStatus();
const { textStrong, text, muted, border, primary, danger, accent, surfaceMuted, surface } = useAdminTheme();
const { textStrong, text, muted, border, primary, danger, accent, accentSoft, surfaceMuted, surface } = useAdminTheme();
const activePillBg = accentSoft ?? withAlpha(primary, 0.18);
const activePillBorder = withAlpha(primary, 0.45);
const [activeTab, setActiveTab] = React.useState<'moderation' | 'live'>('moderation');
const [moderationPhotos, setModerationPhotos] = React.useState<TenantPhoto[]>([]);
@@ -1394,7 +1406,8 @@ export default function MobileEventControlRoomPage() {
value={option.value}
borderRadius="$4"
borderWidth={1}
borderColor={border}
borderColor={active ? activePillBorder : border}
backgroundColor={active ? activePillBg : 'transparent'}
paddingVertical="$2"
paddingHorizontal="$3"
width="auto"
@@ -1402,7 +1415,7 @@ export default function MobileEventControlRoomPage() {
flexShrink={0}
hoverStyle={{ backgroundColor: '$backgroundHover' }}
pressStyle={{ backgroundColor: '$backgroundPress' }}
activeStyle={{ backgroundColor: '$backgroundPress', borderColor: '$borderColorPress' }}
activeStyle={{ backgroundColor: activePillBg, borderColor: activePillBorder }}
>
<XStack alignItems="center" gap="$2">
<Text fontSize="$xs" fontWeight={active ? '700' : '600'} color={active ? text : muted}>
@@ -1564,21 +1577,22 @@ export default function MobileEventControlRoomPage() {
const count = liveCounts[option.value] ?? 0;
const active = option.value === liveStatusFilter;
return (
<ToggleGroup.Item
key={option.value}
value={option.value}
borderRadius="$4"
borderWidth={1}
borderColor={border}
paddingVertical="$2"
paddingHorizontal="$3"
width="auto"
minWidth="max-content"
flexShrink={0}
hoverStyle={{ backgroundColor: '$backgroundHover' }}
pressStyle={{ backgroundColor: '$backgroundPress' }}
activeStyle={{ backgroundColor: '$backgroundPress', borderColor: '$borderColorPress' }}
>
<ToggleGroup.Item
key={option.value}
value={option.value}
borderRadius="$4"
borderWidth={1}
borderColor={active ? activePillBorder : border}
backgroundColor={active ? activePillBg : 'transparent'}
paddingVertical="$2"
paddingHorizontal="$3"
width="auto"
minWidth="max-content"
flexShrink={0}
hoverStyle={{ backgroundColor: '$backgroundHover' }}
pressStyle={{ backgroundColor: '$backgroundPress' }}
activeStyle={{ backgroundColor: activePillBg, borderColor: activePillBorder }}
>
<XStack alignItems="center" gap="$2">
<Text fontSize="$xs" fontWeight={active ? '700' : '600'} color={active ? text : muted}>
{t(option.labelKey, option.fallback)}