Refine admin PWA dark theme controls

resources/js/admin/mobile/components/Primitives.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { Card, YStack, XStack, SizableText as Text, Tabs, Separator } from 'tamagui';
 import { Pressable } from '@tamagui/react-native-web-lite';
 import { useAdminTheme } from '../theme';
+import { BOTTOM_NAV_HEIGHT, BOTTOM_NAV_PADDING } from './BottomNav';
 import { withAlpha } from './colors';
 
 export function MobileCard({
@@ -393,7 +394,7 @@ export function FloatingActionButton({
       style={{
         position: 'fixed',
         right: 18,
-        bottom: 'calc(env(safe-area-inset-bottom, 0px) + 96px)',
+        bottom: `calc(env(safe-area-inset-bottom, 0px) + ${BOTTOM_NAV_HEIGHT + BOTTOM_NAV_PADDING + 12}px)`,
         zIndex: 60,
         transform: pressed ? 'scale(0.96)' : 'scale(1)',
         opacity: pressed ? 0.92 : 1,
@@ -434,7 +435,10 @@ export function ContentTabs({
   tabs: { value: string; label: string; content: React.ReactNode }[];
   header?: React.ReactNode;
 }) {
-  const { muted, text } = useAdminTheme();
+  const { muted, text, border, glassBorder, accentSoft, primary } = useAdminTheme();
+  const tabBorder = glassBorder ?? border;
+  const activeBg = accentSoft ?? withAlpha(primary, 0.18);
+  const activeBorder = withAlpha(primary, 0.45);
   return (
     <Tabs
       defaultValue={value}
@@ -444,11 +448,13 @@ export function ContentTabs({
       flexDirection="column"
       borderRadius="$4"
       borderWidth={1}
-      borderColor="$borderColor"
+      borderColor={tabBorder}
       overflow="hidden"
     >
       <Tabs.List separator={<Separator vertical />} disablePassBorderRadius="bottom">
-        {tabs.map((tab) => (
+        {tabs.map((tab) => {
+          const isActive = value === tab.value;
+          return (
           <Tabs.Tab
             key={tab.value}
             value={tab.value}
@@ -457,19 +463,23 @@ export function ContentTabs({
             paddingHorizontal="$3"
             alignItems="center"
             justifyContent="center"
+            borderWidth={1}
+            borderColor={isActive ? activeBorder : 'transparent'}
+            backgroundColor={isActive ? activeBg : 'transparent'}
             hoverStyle={{ backgroundColor: '$backgroundHover' }}
             pressStyle={{ backgroundColor: '$backgroundPress' }}
-            activeStyle={{ backgroundColor: '$backgroundPress' }}
+            activeStyle={{ backgroundColor: activeBg, borderColor: activeBorder }}
           >
             <Text
               fontSize="$sm"
-              fontWeight={value === tab.value ? '700' : '600'}
-              color={value === tab.value ? text : muted}
+              fontWeight={isActive ? '700' : '600'}
+              color={isActive ? text : muted}
             >
               {tab.label}
             </Text>
           </Tabs.Tab>
-        ))}
+        );
+        })}
       </Tabs.List>
 
       {header}