fix(mobile): improve item separator background color

Update ItemSeparator components in entry-list and subscription modules to use a secondary system grouped background, ensuring consistent visual styling across different list views. Signed-off-by: Innei <[email protected]>
RSSNext · Feb 28, 2025 · 84b44b3 · 84b44b3
1 parent 7de1132
commit 84b44b3
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 15 deletions.
diff --git a/apps/mobile/src/modules/entry-list/ItemSeparator.tsx b/apps/mobile/src/modules/entry-list/ItemSeparator.tsx
@@ -1,22 +1,26 @@
 import { View } from "react-native"
 
 const el = (
-  <View
-    className="bg-opaque-separator mx-4 h-px"
-    style={{ transform: [{ scaleY: 0.5 }] }}
-    collapsable={false}
-  />
+  <View className="bg-secondary-system-grouped-background">
+    <View
+      className="bg-opaque-separator mx-4 h-px"
+      style={{ transform: [{ scaleY: 0.5 }] }}
+      collapsable={false}
+    />
+  </View>
 )
 
 export const ItemSeparator = () => {
   return el
 }
 const el2 = (
-  <View
-    className="bg-opaque-separator h-px w-full"
-    style={{ transform: [{ scaleY: 0.5 }] }}
-    collapsable={false}
-  />
+  <View className="bg-secondary-system-grouped-background">
+    <View
+      className="bg-opaque-separator h-px w-full"
+      style={{ transform: [{ scaleY: 0.5 }] }}
+      collapsable={false}
+    />
+  </View>
 )
 export const ItemSeparatorFullWidth = () => {
   return el2

diff --git a/apps/mobile/src/modules/subscription/ItemSeparator.tsx b/apps/mobile/src/modules/subscription/ItemSeparator.tsx
@@ -1,11 +1,13 @@
 import { View } from "react-native"
 
 const el = (
-  <View
-    className="bg-opaque-separator ml-12 h-px flex-1"
-    collapsable={false}
-    style={{ transform: [{ scaleY: 0.5 }] }}
-  />
+  <View className="bg-secondary-system-grouped-background">
+    <View
+      className="bg-opaque-separator ml-12 h-px flex-1"
+      collapsable={false}
+      style={{ transform: [{ scaleY: 0.5 }] }}
+    />
+  </View>
 )
 export const ItemSeparator = () => {
   return el

diff --git a/apps/mobile/src/modules/subscription/SubscriptionLists.tsx b/apps/mobile/src/modules/subscription/SubscriptionLists.tsx
@@ -58,6 +58,7 @@ export const SubscriptionList = ({ view }: { view: FeedViewType }) => {
           setRefreshing(false)
         })
       }}
+      className="bg-system-grouped-background"
       isRefetching={refreshing}
       ItemSeparatorComponent={ItemSeparator}
       data={data}