From 52c2aa0e9b0e1ce891820dbc3a951075da6b554a Mon Sep 17 00:00:00 2001
From: Codex Agent <codex-agent@example.com>
Date: Tue, 20 Jan 2026 16:20:54 +0100
Subject: [PATCH] Update control room filter pill styling

---
 .../js/admin/mobile/EventControlRoomPage.tsx  | 29 +++++++++++--------
 1 file changed, 17 insertions(+), 12 deletions(-)

diff --git a/resources/js/admin/mobile/EventControlRoomPage.tsx b/resources/js/admin/mobile/EventControlRoomPage.tsx
index d37d68d..9187e8f 100644
--- a/resources/js/admin/mobile/EventControlRoomPage.tsx
+++ b/resources/js/admin/mobile/EventControlRoomPage.tsx
@@ -344,8 +344,7 @@ export default function MobileEventControlRoomPage() {
   const back = useBackNavigation(slug ? adminPath(`/mobile/events/${slug}`) : adminPath('/mobile/events'));
   const infoBg = accentSoft;
   const infoBorder = accent;
-  const activeFilterBg = accentSoft;
-  const activeFilterBorder = accent;
+  const activeFilterBg = primary;
 
   const saveControlRoomSettings = React.useCallback(
     async (nextSettings: ControlRoomSettings) => {
@@ -1418,13 +1417,16 @@ export default function MobileEventControlRoomPage() {
                             value={option.value}
                             borderRadius={999}
                             borderWidth={1}
-                            borderColor={active ? activeFilterBorder : 'transparent'}
+                            borderColor="transparent"
                             backgroundColor={active ? activeFilterBg : 'transparent'}
                             paddingVertical="$1.5"
                             paddingHorizontal="$3"
+                            {...(active
+                              ? ({ style: { boxShadow: `0 8px 18px ${withAlpha(primary, 0.35)}` } } as any)
+                              : {})}
                           >
                             <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)}
                               </Text>
                               <XStack
@@ -1432,10 +1434,10 @@ export default function MobileEventControlRoomPage() {
                                 paddingVertical="$0.5"
                                 borderRadius={999}
                                 borderWidth={1}
-                                borderColor={active ? activeFilterBorder : border}
-                                backgroundColor={surface}
+                                borderColor={active ? 'transparent' : border}
+                                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}
                                 </Text>
                               </XStack>
@@ -1598,13 +1600,16 @@ export default function MobileEventControlRoomPage() {
                             value={option.value}
                             borderRadius={999}
                             borderWidth={1}
-                            borderColor={active ? activeFilterBorder : 'transparent'}
+                            borderColor="transparent"
                             backgroundColor={active ? activeFilterBg : 'transparent'}
                             paddingVertical="$1.5"
                             paddingHorizontal="$3"
+                            {...(active
+                              ? ({ style: { boxShadow: `0 8px 18px ${withAlpha(primary, 0.35)}` } } as any)
+                              : {})}
                           >
                             <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)}
                               </Text>
                               <XStack
@@ -1612,10 +1617,10 @@ export default function MobileEventControlRoomPage() {
                                 paddingVertical="$0.5"
                                 borderRadius={999}
                                 borderWidth={1}
-                                borderColor={active ? activeFilterBorder : border}
-                                backgroundColor={surface}
+                                borderColor={active ? 'transparent' : border}
+                                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}
                                 </Text>
                               </XStack>