fix: Use MD3 Outline Variant For Tab Borders

src/screens/browse/BrowseScreen.tsx

@@ -1,7 +1,6 @@
 import React, { useCallback, useMemo } from 'react';
 import { useWindowDimensions } from 'react-native';
 import { TabView, type TabBarProps } from 'react-native-tab-view';
-import Color from 'color';
 
 import { useSearch } from '@hooks';
 import { useTheme } from '@hooks/persisted';
@@ -77,11 +76,9 @@ const BrowseScreen = ({ navigation }: BrowseScreenProps) => {
       backgroundColor: theme.surface,
       elevation: 0,
       borderBottomWidth: 1,
-      borderBottomColor: Color(theme.isDark ? '#FFFFFF' : '#000000')
-        .alpha(0.12)
-        .string(),
+      borderBottomColor: theme.outlineVariant,
     }),
-    [theme.isDark, theme.surface],
+    [theme.outlineVariant, theme.surface],
   );
   const androidRipple = useMemo(
     () => ({ color: theme.rippleColor }),

src/screens/library/LibraryScreen.tsx

@@ -19,7 +19,6 @@ import {
   SceneRendererProps,
   TabView,
 } from 'react-native-tab-view';
-import Color from 'color';
 
 import {
   SearchbarV2,
@@ -201,14 +200,6 @@ const LibraryScreen = ({ navigation }: LibraryScreenProps) => {
 
   const searchLower = useMemo(() => searchText.toLowerCase(), [searchText]);
 
-  const tabBarBorderColor = useMemo(
-    () =>
-      Color(theme.isDark ? '#FFFFFF' : '#000000')
-        .alpha(0.12)
-        .string(),
-    [theme.isDark],
-  );
-
   const renderTabBar = useCallback(
     (props: SceneRendererProps & { navigationState: State }) => {
       return categories.length ? (
@@ -219,7 +210,7 @@ const LibraryScreen = ({ navigation }: LibraryScreenProps) => {
           style={[
             {
               backgroundColor: theme.surface,
-              borderBottomColor: tabBarBorderColor,
+              borderBottomColor: theme.outlineVariant,
             },
             styles.tabBar,
           ]}
@@ -236,7 +227,7 @@ const LibraryScreen = ({ navigation }: LibraryScreenProps) => {
       styles.tabBar,
       styles.tabBarIndicator,
       styles.tabStyle,
-      tabBarBorderColor,
+      theme.outlineVariant,
       theme.primary,
       theme.rippleColor,
       theme.secondary,

src/screens/library/components/LibraryBottomSheet/LibraryBottomSheet.tsx

@@ -8,7 +8,6 @@ import {
   ViewStyle,
 } from 'react-native';
 import { SceneMap, TabDescriptor, TabView } from 'react-native-tab-view';
-import color from 'color';
 
 import { useLibrarySettings, useTheme } from '@hooks/persisted';
 import { getString } from '@i18n/translations';
@@ -186,14 +185,6 @@ const LibraryBottomSheet: React.FC<LibraryBottomSheetProps> = ({
 
   const layout = useWindowDimensions();
 
-  const borderBottomColor = useMemo(
-    () =>
-      color(theme.isDark ? '#FFFFFF' : '#000000')
-        .alpha(0.12)
-        .string(),
-    [theme.isDark],
-  );
-
   const renderTabBar = useCallback(
     (props: any) => (
       <TopTabBar
@@ -202,7 +193,7 @@ const LibraryBottomSheet: React.FC<LibraryBottomSheetProps> = ({
         style={[
           {
             backgroundColor: theme.surfaceContainerLow ?? theme.surface,
-            borderBottomColor,
+            borderBottomColor: theme.outlineVariant,
           },
           styles.tabBar,
           style,
@@ -218,7 +209,7 @@ const LibraryBottomSheet: React.FC<LibraryBottomSheetProps> = ({
       theme.surfaceContainerLow,
       theme.onSurfaceVariant,
       theme.rippleColor,
-      borderBottomColor,
+      theme.outlineVariant,
       style,
     ],
   );

src/screens/novel/components/NovelBottomSheet.tsx

@@ -244,7 +244,7 @@ const ChaptersSettingsSheet = ({
       style={[
         {
           backgroundColor: theme.surfaceContainerLow ?? theme.surface,
-          borderBottomColor: theme.outline,
+          borderBottomColor: theme.outlineVariant,
         },
         styles.tabBar,
       ]}

src/screens/reader/components/ReaderBottomSheet/ReaderBottomSheet.tsx

@@ -224,7 +224,13 @@ const ReaderBottomSheetV2: React.FC<ReaderBottomSheetV2Props> = ({
       <TopTabBar
         {...props}
         indicatorStyle={{ backgroundColor: theme.primary }}
-        style={[styles.tabBar, { backgroundColor: tabHeaderColor }]}
+        style={[
+          styles.tabBar,
+          {
+            backgroundColor: tabHeaderColor,
+            borderBottomColor: theme.outlineVariant,
+          },
+        ]}
         inactiveColor={theme.onSurfaceVariant}
         activeColor={theme.primary}
         pressColor={Color(theme.primary).alpha(0.12).string()}

src/screens/settings/SettingsReaderScreen/SettingsReaderScreen.tsx

@@ -232,14 +232,6 @@ const SettingsReaderScreen = () => {
     [],
   );
 
-  const tabBarBorderColor = useMemo(
-    () =>
-      color(theme.isDark ? '#FFFFFF' : '#000000')
-        .alpha(0.12)
-        .string(),
-    [theme.isDark],
-  );
-
   const renderTabBar = useCallback(
     (props: TabBarProps<ReaderSettingsRoute>) => (
       <TopTabBar
@@ -248,7 +240,7 @@ const SettingsReaderScreen = () => {
           styles.tabBar,
           {
             backgroundColor: theme.surfaceContainerLow ?? theme.surface,
-            borderBottomColor: tabBarBorderColor,
+            borderBottomColor: theme.outlineVariant,
           },
         ]}
         indicatorStyle={{ backgroundColor: theme.primary }}
@@ -258,7 +250,7 @@ const SettingsReaderScreen = () => {
       />
     ),
     [
-      tabBarBorderColor,
+      theme.outlineVariant,
       theme.onSurfaceVariant,
       theme.primary,
       theme.rippleColor,