Refine admin PWA dark theme controls

resources/js/admin/mobile/NotificationsPage.tsx

@@ -22,7 +22,7 @@ import { useBackNavigation } from './hooks/useBackNavigation';
 import { groupNotificationsByScope, type NotificationScope, type NotificationGroup } from './lib/notificationGrouping';
 import { collectUnreadIds } from './lib/notificationUnread';
 import { formatRelativeTime } from './lib/relativeTime';
-import { useAdminTheme } from './theme';
+import { useAdminTheme, withAlpha } from './theme';
 
 type NotificationItem = {
   id: string;
@@ -337,7 +337,9 @@ export default function MobileNotificationsPage() {
   const [events, setEvents] = React.useState<TenantEvent[]>([]);
   const [showEventPicker, setShowEventPicker] = React.useState(false);
   const back = useBackNavigation(adminPath('/mobile/dashboard'));
-  const { text, muted, border, warningBg, warningText, infoBg, primary, danger, subtle } = useAdminTheme();
+  const { text, muted, border, warningBg, warningText, infoBg, primary, danger, subtle, accentSoft } = useAdminTheme();
+  const activePillBg = accentSoft ?? withAlpha(primary, 0.18);
+  const activePillBorder = withAlpha(primary, 0.45);
   const warningIcon = warningText;
   const infoIcon = primary;
   const errorText = danger;
@@ -587,11 +589,16 @@ export default function MobileNotificationsPage() {
           { key: 'events', label: t('notificationLogs.scope.events', 'Events') },
           { key: 'package', label: t('notificationLogs.scope.package', 'Package') },
           { key: 'general', label: t('notificationLogs.scope.general', 'General') },
-        ] as Array<{ key: NotificationScope | 'all'; label: string }>).map((filter) => (
+        ] as Array<{ key: NotificationScope | 'all'; label: string }>).map((filter) => {
+          const isActive = (scopeParam ?? 'all') === filter.key;
+          return (
           <ToggleGroup.Item
             key={filter.key}
             value={filter.key}
             borderRadius="$pill"
+            borderWidth={1}
+            borderColor={isActive ? activePillBorder : border}
+            backgroundColor={isActive ? activePillBg : 'transparent'}
             paddingVertical="$2"
             paddingHorizontal="$3"
             flexGrow={1}
@@ -599,11 +606,12 @@ export default function MobileNotificationsPage() {
             width="auto"
             minWidth="max-content"
           >
-            <Text fontSize="$xs" fontWeight="600" textAlign="center">
+            <Text fontSize="$xs" fontWeight={isActive ? '700' : '600'} textAlign="center" color={isActive ? text : muted}>
               {filter.label}
             </Text>
           </ToggleGroup.Item>
-        ))}
+          );
+        })}
       </ToggleGroup>
 
       {loading ? (