Refine admin PWA dark theme controls

resources/js/admin/mobile/EventMembersPage.tsx

@@ -17,14 +17,16 @@ import toast from 'react-hot-toast';
 import { MobileSheet } from './components/Sheet';
 import { adminPath } from '../constants';
 import { useBackNavigation } from './hooks/useBackNavigation';
-import { useAdminTheme } from './theme';
+import { useAdminTheme, withAlpha } from './theme';
 
 export default function MobileEventMembersPage() {
   const { slug: slugParam } = useParams<{ slug?: string }>();
   const slug = slugParam ?? null;
   const navigate = useNavigate();
   const { t } = useTranslation('management');
-  const { textStrong, text, muted, border, primary, danger } = useAdminTheme();
+  const { textStrong, text, muted, border, primary, danger, accentSoft } = useAdminTheme();
+  const activePillBg = accentSoft ?? withAlpha(primary, 0.18);
+  const activePillBorder = withAlpha(primary, 0.45);
 
   const [members, setMembers] = React.useState<EventMember[]>([]);
   const [loading, setLoading] = React.useState(true);
@@ -243,22 +245,28 @@ export default function MobileEventMembersPage() {
             borderColor={border}
             backgroundColor="$background"
           >
-            {statusOptions.map((option) => (
+            {statusOptions.map((option) => {
+              const isActive = statusFilter === option.key;
+              return (
               <ToggleGroup.Item
                 key={option.key}
                 value={option.key}
                 borderRadius="$pill"
+                borderWidth={1}
+                borderColor={isActive ? activePillBorder : border}
+                backgroundColor={isActive ? activePillBg : 'transparent'}
                 paddingHorizontal="$3"
                 paddingVertical="$1.5"
                 width="auto"
                 minWidth="max-content"
                 flexShrink={0}
               >
-                <Text fontSize="$xs" fontWeight="600">
+                <Text fontSize="$xs" fontWeight={isActive ? '700' : '600'} color={isActive ? text : muted}>
                   {option.label}
                 </Text>
               </ToggleGroup.Item>
-            ))}
+              );
+            })}
           </ToggleGroup>
           <Text fontSize="$xs" fontWeight="700" color={muted}>
             {t('events.members.filters.roleLabel', 'Role')}
@@ -278,22 +286,28 @@ export default function MobileEventMembersPage() {
             borderColor={border}
             backgroundColor="$background"
           >
-            {roleOptions.map((option) => (
+            {roleOptions.map((option) => {
+              const isActive = roleFilter === option.key;
+              return (
               <ToggleGroup.Item
                 key={option.key}
                 value={option.key}
                 borderRadius="$pill"
+                borderWidth={1}
+                borderColor={isActive ? activePillBorder : border}
+                backgroundColor={isActive ? activePillBg : 'transparent'}
                 paddingHorizontal="$3"
                 paddingVertical="$1.5"
                 width="auto"
                 minWidth="max-content"
                 flexShrink={0}
               >
-                <Text fontSize="$xs" fontWeight="600">
+                <Text fontSize="$xs" fontWeight={isActive ? '700' : '600'} color={isActive ? text : muted}>
                   {option.label}
                 </Text>
               </ToggleGroup.Item>
-            ))}
+              );
+            })}
           </ToggleGroup>
         </YStack>
       ) : null}