diff --git a/app/components/team_list/index.tsx b/app/components/team_list/index.tsx index 3e1540bf5d..f107812e13 100644 --- a/app/components/team_list/index.tsx +++ b/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) => { 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) {