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

35
resources/js/admin/DevTenantSwitcher.tsx
View File

@@ -3,7 +3,8 @@ import { Loader2, PanelLeftClose, PanelRightOpen } from 'lucide-react';
import { XStack, YStack } from '@tamagui/stacks';
import { SizableText as Text } from '@tamagui/text';
import { Button } from '@tamagui/button';
import { useTheme } from '@tamagui/core';
import { useThemeName } from '@tamagui/core';
import { BOTTOM_NAV_HEIGHT, BOTTOM_NAV_PADDING } from './mobile/components/BottomNav';
const DEV_TENANT_KEYS = [
{ key: 'cust-standard-empty', label: 'Endkunde – Starter (kein Event)' },
@@ -28,7 +29,9 @@ type DevTenantSwitcherProps = {
export function DevTenantSwitcher({ bottomOffset = 16, variant = 'floating' }: DevTenantSwitcherProps) {
const helper = window.fotospielDemoAuth;
const theme = useTheme();
const themeName = useThemeName();
const themeLabel = String(themeName ?? '').toLowerCase();
const isDark = themeLabel.includes('dark') || themeLabel.includes('night');
const [loggingIn, setLoggingIn] = React.useState<string | null>(null);
const [collapsed, setCollapsed] = React.useState<boolean>(() => {
if (typeof window === 'undefined') {
@@ -94,12 +97,12 @@ export function DevTenantSwitcher({ bottomOffset = 16, variant = 'floating' }: D
return (
<YStack
borderWidth={1}
borderColor="rgba(234,179,8,0.5)"
backgroundColor="rgba(255,255,255,0.95)"
borderColor={isDark ? 'rgba(248,250,255,0.2)' : 'rgba(234,179,8,0.5)'}
backgroundColor={isDark ? 'rgba(15,23,42,0.95)' : 'rgba(255,255,255,0.95)'}
padding="$3"
gap="$2"
borderRadius="$4"
shadowColor="#f59e0b"
shadowColor={isDark ? 'rgba(2,6,23,0.7)' : '#f59e0b'}
shadowOpacity={0.25}
shadowRadius={14}
shadowOffset={{ width: 0, height: 8 }}
@@ -107,10 +110,10 @@ export function DevTenantSwitcher({ bottomOffset = 16, variant = 'floating' }: D
>
<XStack alignItems="center" justifyContent="space-between">
<XStack alignItems="center" gap="$2">
<Text fontSize={13} fontWeight="800" color="#92400e">
<Text fontSize={13} fontWeight="800" color={isDark ? '#F8FAFF' : '#92400e'}>
Demo tenants
</Text>
<Text fontSize={10} color="#a16207" textTransform="uppercase" letterSpacing={1}>
<Text fontSize={10} color={isDark ? 'rgba(248,250,255,0.7)' : '#a16207'} textTransform="uppercase" letterSpacing={1}>
Dev mode
</Text>
</XStack>
@@ -158,7 +161,7 @@ export function DevTenantSwitcher({ bottomOffset = 16, variant = 'floating' }: D
zIndex={1000}
onPress={() => setCollapsed(false)}
aria-label="Demo tenants anzeigen"
style={{ bottom: bottomOffset + 70 }}
style={{ bottom: bottomOffset + BOTTOM_NAV_HEIGHT + BOTTOM_NAV_PADDING }}
>
</Button>
);
@@ -172,23 +175,23 @@ export function DevTenantSwitcher({ bottomOffset = 16, variant = 'floating' }: D
maxWidth={320}
gap="$2"
borderWidth={1}
borderColor="rgba(234,179,8,0.5)"
backgroundColor="rgba(255,255,255,0.95)"
borderColor={isDark ? 'rgba(248,250,255,0.2)' : 'rgba(234,179,8,0.5)'}
backgroundColor={isDark ? 'rgba(15,23,42,0.95)' : 'rgba(255,255,255,0.95)'}
padding="$3"
borderRadius="$4"
shadowColor="#f59e0b"
shadowColor={isDark ? 'rgba(2,6,23,0.7)' : '#f59e0b'}
shadowOpacity={0.25}
shadowRadius={14}
shadowOffset={{ width: 0, height: 8 }}
pointerEvents="auto"
style={{ bottom: bottomOffset + 70 }}
style={{ bottom: bottomOffset + BOTTOM_NAV_HEIGHT + BOTTOM_NAV_PADDING }}
>
<XStack alignItems="center" justifyContent="space-between">
<XStack alignItems="center" gap="$2">
<Text fontSize={13} fontWeight="800" color="#92400e">
<Text fontSize={13} fontWeight="800" color={isDark ? '#F8FAFF' : '#92400e'}>
Demo tenants
</Text>
<Text fontSize={10} color="#a16207" textTransform="uppercase" letterSpacing={1}>
<Text fontSize={10} color={isDark ? 'rgba(248,250,255,0.7)' : '#a16207'} textTransform="uppercase" letterSpacing={1}>
Dev mode
</Text>
</XStack>
@@ -201,7 +204,7 @@ export function DevTenantSwitcher({ bottomOffset = 16, variant = 'floating' }: D
aria-label="Switcher minimieren"
/>
</XStack>
<Text fontSize={11} color="#a16207">
<Text fontSize={11} color={isDark ? 'rgba(248,250,255,0.7)' : '#a16207'}>
Select a seeded tenant to mint Sanctum PATs and jump straight into their admin space. Available only in development builds.
</Text>
<YStack gap="$1">
@@ -219,7 +222,7 @@ export function DevTenantSwitcher({ bottomOffset = 16, variant = 'floating' }: D
</Button>
))}
</YStack>
<Text fontSize={10} color="#a16207">
<Text fontSize={10} color={isDark ? 'rgba(248,250,255,0.7)' : '#a16207'}>
Console: <Text as="span" fontFamily="$mono">fotospielDemoAuth.loginAs('lumen')</Text>
</Text>
</YStack>