fix(mobile): standardize separator styles across components

Innei · Innei · commit fcd21b2a5381 · 2025-04-22T13:10:28.000+08:00
- Updated separator styles in various components to use a consistent class name for opacity.
- Removed dark mode specific classes to simplify styling.
- Adjusted padding and insets in the Recommendations component for better layout.

These changes enhance visual consistency and maintainability across the application.

Signed-off-by: Innei &lt;tukon479@gmail.com&gt;
diff --git a/apps/mobile/src/components/layouts/tabbar/Tabbar.tsx b/apps/mobile/src/components/layouts/tabbar/Tabbar.tsx
@@ -260,7 +260,7 @@ const TabBarBackground = () => {
         <ThemedBlurView style={styles.blurEffect} />
       </Animated.View>
       <Animated.View
-        className="bg-non-opaque-separator dark:bg-opaque-separator/50 absolute top-0 w-full"
+        className="bg-opaque-separator/50 absolute top-0 w-full"
         style={[
           separatorStyle,
           {
diff --git a/apps/mobile/src/components/ui/grouped/GroupedList.tsx b/apps/mobile/src/components/ui/grouped/GroupedList.tsx
@@ -87,10 +87,7 @@ export const GroupedInsetListCard: FC<
                 {!isLast &&
                   (NextSeparatorElement ?? (
                     <View
-                      className={cn(
-                        "bg-non-opaque-separator dark:bg-opaque-separator/70",
-                        isNavigationLink ? "ml-16" : "ml-4",
-                      )}
+                      className={cn("bg-opaque-separator/70", isNavigationLink ? "ml-16" : "ml-4")}
                       style={{ height: StyleSheet.hairlineWidth }}
                     />
                   ))}
diff --git a/apps/mobile/src/modules/discover/Recommendations.tsx b/apps/mobile/src/modules/discover/Recommendations.tsx
@@ -101,6 +101,7 @@ export const Recommendations = () => {
             {loadedTabIndex.has(index) && (
               <RecommendationTab
                 key={category}
+                insets={{ top: 44 + insets.top - 10, bottom: insets.bottom }}
                 contentContainerStyle={{
                   paddingTop: 44 + insets.top,
                   paddingBottom: insets.bottom,
@@ -118,9 +119,16 @@ export const Recommendations = () => {
 
 export const RecommendationTab: TabComponent<{
   contentContainerStyle?: ContentStyle
-
+  insets?: { top?: number; bottom?: number }
   reanimatedScrollY?: SharedValue<number>
-}> = ({ tab, isSelected, contentContainerStyle, reanimatedScrollY, ...rest }) => {
+}> = ({
+  tab,
+  isSelected,
+  contentContainerStyle,
+  reanimatedScrollY,
+  insets: customInsets,
+  ...rest
+}) => {
   const { data, isLoading } = useQuery({
     queryKey: ["rsshub-popular", "cache", tab.value],
     queryFn: () => fetchRsshubPopular(tab.value, "all").then((res) => res.data),
@@ -241,8 +249,8 @@ export const RecommendationTab: TabComponent<{
         contentContainerStyle={contentContainerStyle}
         scrollIndicatorInsets={{
           right: -2,
-          top: 0,
-          bottom: insets.bottom,
+          top: customInsets?.top ?? 0,
+          bottom: customInsets?.bottom ?? insets.bottom,
         }}
         removeClippedSubviews
       />
@@ -261,7 +269,8 @@ const ItemRenderer = ({
     // Rendering header
     return (
       <View className="border-b-opaque-separator mx-6 mb-1 mt-6 pb-1">
-        <Text className="text-label text-xl font-semibold">{item}</Text>
+        <Text className="text-label mb-4 text-xl font-semibold">{item}</Text>
+        <View className="bg-opaque-separator/30 mr-6 h-px" />
       </View>
     )
   } else {
diff --git a/apps/mobile/src/modules/discover/search-tabs/__base.tsx b/apps/mobile/src/modules/discover/search-tabs/__base.tsx
@@ -74,10 +74,7 @@ export function BaseSearchPageFlatList<T>({
 }
 
 const itemSeparator = (
-  <View
-    className="bg-opaque-separator dark:bg-opaque-separator/70 ml-16 h-px"
-    style={{ transform: [{ scaleY: 0.5 }] }}
-  />
+  <View className="bg-opaque-separator/70 ml-16 h-px" style={{ transform: [{ scaleY: 0.5 }] }} />
 )
 export const ItemSeparator = () => itemSeparator
 
diff --git a/apps/mobile/src/modules/entry-list/ItemSeparator.tsx b/apps/mobile/src/modules/entry-list/ItemSeparator.tsx
@@ -3,7 +3,7 @@ import { View } from "react-native"
 const el = (
   <View className="bg-system-background">
     <View
-      className="bg-opaque-separator dark:bg-opaque-separator/70 ml-4 h-px"
+      className="bg-opaque-separator/70 ml-4 h-px"
       style={{ transform: [{ scaleY: 0.5 }] }}
       collapsable={false}
     />
@@ -16,7 +16,7 @@ export const ItemSeparator = () => {
 const el2 = (
   <View className="bg-system-background">
     <View
-      className="bg-opaque-separator dark:bg-opaque-separator/70 h-px w-full"
+      className="bg-opaque-separator/70 h-px w-full"
       style={{ transform: [{ scaleY: 0.5 }] }}
       collapsable={false}
     />
diff --git a/apps/mobile/src/modules/player/PlayerTabBar.tsx b/apps/mobile/src/modules/player/PlayerTabBar.tsx
@@ -47,10 +47,7 @@ export function PlayerTabBar({ className }: { className?: string }) {
   return (
     <Animated.View
       style={animatedStyle}
-      className={cn(
-        "border-non-opaque-separator dark:border-opaque-separator/50 border-b-hairline px-2",
-        className,
-      )}
+      className={cn("border-opaque-separator/50 border-b-hairline px-2", className)}
     >
       <Pressable
         onPress={() => {
diff --git a/apps/mobile/src/modules/settings/routes/Actions.tsx b/apps/mobile/src/modules/settings/routes/Actions.tsx
@@ -135,7 +135,7 @@ const SaveRuleButton = ({ disabled }: { disabled?: boolean }) => {
 const ItemSeparatorComponent = () => {
   return (
     <View
-      className="bg-opaque-separator dark:bg-opaque-separator/70 ml-24 h-px flex-1"
+      className="bg-opaque-separator/70 ml-24 h-px flex-1"
       collapsable={false}
       style={{ transform: [{ scaleY: 0.5 }] }}
     />
diff --git a/apps/mobile/src/modules/settings/routes/ManageList.tsx b/apps/mobile/src/modules/settings/routes/ManageList.tsx
@@ -120,7 +120,7 @@ const ListImpl: React.FC<{ id: string }> = ({ id }) => {
 const SeparatorComponent = () => {
   return (
     <View
-      className="bg-non-opaque-separator dark:bg-opaque-separator/70 ml-16"
+      className="bg-opaque-separator/70 ml-16"
       style={{ height: StyleSheet.hairlineWidth }}
       collapsable={false}
     />
diff --git a/apps/mobile/src/modules/subscription/ItemSeparator.tsx b/apps/mobile/src/modules/subscription/ItemSeparator.tsx
@@ -8,7 +8,7 @@ const el = (
     style={{ marginHorizontal: GROUPED_LIST_MARGIN }}
   >
     <View
-      className="bg-opaque-separator dark:bg-opaque-separator/70 ml-12 h-px flex-1"
+      className="bg-opaque-separator/70 ml-12 h-px flex-1"
       collapsable={false}
       style={{ transform: [{ scaleY: 0.5 }] }}
     />
@@ -24,7 +24,7 @@ const el2 = (
     style={{ marginHorizontal: GROUPED_LIST_MARGIN }}
   >
     <View
-      className="bg-opaque-separator dark:bg-opaque-separator/70 ml-16 h-px flex-1"
+      className="bg-opaque-separator/70 ml-16 h-px flex-1"
       collapsable={false}
       style={{ transform: [{ scaleY: 0.5 }] }}
     />
diff --git a/apps/mobile/src/screens/(stack)/recommendation/RecommendationCategoryScreen.tsx b/apps/mobile/src/screens/(stack)/recommendation/RecommendationCategoryScreen.tsx
@@ -25,6 +25,7 @@ export const RecommendationCategoryScreen: NavigationControllerView<{
 
       <RecommendationTab
         isSelected
+        insets={{ top: defaultHeaderHeight }}
         reanimatedScrollY={reAnimatedScrollY}
         contentContainerStyle={{
           paddingTop: defaultHeaderHeight,

Original file line number	Diff line number	Diff line change
`@@ -260,7 +260,7 @@ const TabBarBackground = () => {`
`260`	`260`	`<ThemedBlurView style={styles.blurEffect} />`
`261`	`261`	`</Animated.View>`
`262`	`262`	`<Animated.View`
`263`		`- className="bg-non-opaque-separator dark:bg-opaque-separator/50 absolute top-0 w-full"`
	`263`	`+ className="bg-opaque-separator/50 absolute top-0 w-full"`
`264`	`264`	`style={[`
`265`	`265`	`separatorStyle,`
`266`	`266`	`{`
Original file line number	Diff line number	Diff line change
`@@ -74,10 +74,7 @@ export function BaseSearchPageFlatList<T>({`
`74`	`74`	`}`
`75`	`75`
`76`	`76`	`const itemSeparator = (`
`77`		`- <View`
`78`		`- className="bg-opaque-separator dark:bg-opaque-separator/70 ml-16 h-px"`
`79`		`- style={{ transform: [{ scaleY: 0.5 }] }}`
`80`		`- />`
	`77`	`+ <View className="bg-opaque-separator/70 ml-16 h-px" style={{ transform: [{ scaleY: 0.5 }] }} />`
`81`	`78`	`)`
`82`	`79`	`export const ItemSeparator = () => itemSeparator`
`83`	`80`