use style variable for separator

app/components/team_list/index.tsx

@@ -3,10 +3,12 @@
 
 import {BottomSheetFlatList} from '@gorhom/bottom-sheet';
 import React, {useCallback, useMemo} from 'react';
-import {type ListRenderItemInfo, StyleSheet, View} from 'react-native';
+import {type ListRenderItemInfo, View} from 'react-native';
 import {FlatList} from 'react-native-gesture-handler'; // Keep the FlatList from gesture handler so it works well with bottom sheet
 
 import Loading from '@components/loading';
+import {useTheme} from '@context/theme';
+import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
 
 import TeamListItem from './team_list_item';
 
@@ -27,17 +29,19 @@ type Props = {
     separatorAfterFirstItem?: boolean;
 }
 
-const styles = StyleSheet.create({
-    container: {
-        flexGrow: 1,
-    },
-    contentContainer: {
-        marginBottom: 4,
-    },
-    separator: {
-        height: 1,
-        backgroundColor: 'rgba(0, 0, 0, 0.1)',
-    },
+const getStyleSheet = makeStyleSheetFromTheme((theme) => {
+    return {
+        container: {
+            flexGrow: 1,
+        },
+        contentContainer: {
+            marginBottom: 4,
+        },
+        separator: {
+            height: 1,
+            backgroundColor: changeOpacity(theme.centerChannelColor, 0.08),
+        },
+    };
 });
 
 const keyExtractor = (item: TeamModel) => item.id;
@@ -57,6 +61,8 @@ export default function TeamList({
     separatorAfterFirstItem = false,
 }: Props) {
     const List = useMemo(() => (type === 'FlatList' ? FlatList : BottomSheetFlatList), [type]);
+    const theme = useTheme();
+    const styles = getStyleSheet(theme);
 
     const renderTeam = useCallback(({item: t, index: i}: ListRenderItemInfo<Team|TeamModel>) => {
         let teamListItem = (
@@ -80,7 +86,7 @@ export default function TeamList({
             </>);
         }
         return teamListItem;
-    }, [textColor, iconTextColor, iconBackgroundColor, onPress, selectedTeamId, hideIcon, separatorAfterFirstItem]);
+    }, [textColor, iconTextColor, iconBackgroundColor, onPress, selectedTeamId, hideIcon, separatorAfterFirstItem, styles.separator]);
 
     let footer;
     if (loading) {