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

Update control room filter pill styling
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-20 16:20:54 +01:00
parent dd459aa381
commit 52c2aa0e9b
1 changed files with 17 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -344,8 +344,7 @@ export default function MobileEventControlRoomPage() {
const back = useBackNavigation(slug ? adminPath(`/mobile/events/${slug}`) : adminPath('/mobile/events')); const back = useBackNavigation(slug ? adminPath(`/mobile/events/${slug}`) : adminPath('/mobile/events'));
const infoBg = accentSoft; const infoBg = accentSoft;
const infoBorder = accent; const infoBorder = accent;
const activeFilterBg = accentSoft; const activeFilterBg = primary;
const activeFilterBorder = accent;
const saveControlRoomSettings = React.useCallback( const saveControlRoomSettings = React.useCallback(
async (nextSettings: ControlRoomSettings) => { async (nextSettings: ControlRoomSettings) => {
@@ -1418,13 +1417,16 @@ export default function MobileEventControlRoomPage() {
value={option.value} value={option.value}
borderRadius={999} borderRadius={999}
borderWidth={1} borderWidth={1}
borderColor={active ? activeFilterBorder : 'transparent'} borderColor="transparent"
backgroundColor={active ? activeFilterBg : 'transparent'} backgroundColor={active ? activeFilterBg : 'transparent'}
paddingVertical="$1.5" paddingVertical="$1.5"
paddingHorizontal="$3" paddingHorizontal="$3"
{...(active
? ({ style: { boxShadow: `0 8px 18px ${withAlpha(primary, 0.35)}` } } as any)
: {})}
> >
<XStack alignItems="center" space="$1.5"> <XStack alignItems="center" space="$1.5">
<Text fontSize="$xs" fontWeight="700" color={active ? primary : muted}> <Text fontSize="$xs" fontWeight="700" color={active ? '#fff' : muted}>
{t(option.labelKey, option.fallback)} {t(option.labelKey, option.fallback)}
</Text> </Text>
<XStack <XStack
@@ -1432,10 +1434,10 @@ export default function MobileEventControlRoomPage() {
paddingVertical="$0.5" paddingVertical="$0.5"
borderRadius={999} borderRadius={999}
borderWidth={1} borderWidth={1}
borderColor={active ? activeFilterBorder : border} borderColor={active ? 'transparent' : border}
backgroundColor={surface} backgroundColor={active ? withAlpha('#ffffff', 0.2) : surface}
> >
<Text fontSize={10} fontWeight="800" color={active ? primary : muted}> <Text fontSize={10} fontWeight="800" color={active ? '#fff' : muted}>
{count} {count}
</Text> </Text>
</XStack> </XStack>
@@ -1598,13 +1600,16 @@ export default function MobileEventControlRoomPage() {
value={option.value} value={option.value}
borderRadius={999} borderRadius={999}
borderWidth={1} borderWidth={1}
borderColor={active ? activeFilterBorder : 'transparent'} borderColor="transparent"
backgroundColor={active ? activeFilterBg : 'transparent'} backgroundColor={active ? activeFilterBg : 'transparent'}
paddingVertical="$1.5" paddingVertical="$1.5"
paddingHorizontal="$3" paddingHorizontal="$3"
{...(active
? ({ style: { boxShadow: `0 8px 18px ${withAlpha(primary, 0.35)}` } } as any)
: {})}
> >
<XStack alignItems="center" space="$1.5"> <XStack alignItems="center" space="$1.5">
<Text fontSize="$xs" fontWeight="700" color={active ? primary : muted}> <Text fontSize="$xs" fontWeight="700" color={active ? '#fff' : muted}>
{t(option.labelKey, option.fallback)} {t(option.labelKey, option.fallback)}
</Text> </Text>
<XStack <XStack
@@ -1612,10 +1617,10 @@ export default function MobileEventControlRoomPage() {
paddingVertical="$0.5" paddingVertical="$0.5"
borderRadius={999} borderRadius={999}
borderWidth={1} borderWidth={1}
borderColor={active ? activeFilterBorder : border} borderColor={active ? 'transparent' : border}
backgroundColor={surface} backgroundColor={active ? withAlpha('#ffffff', 0.2) : surface}
> >
<Text fontSize={10} fontWeight="800" color={active ? primary : muted}> <Text fontSize={10} fontWeight="800" color={active ? '#fff' : muted}>
{count} {count}
</Text> </Text>
</XStack> </XStack>