diff --git a/examples/SampleApp/src/components/AddMembersBottomSheet.tsx b/examples/SampleApp/src/components/AddMembersBottomSheet.tsx index 3160b87d95..2a17faa594 100644 --- a/examples/SampleApp/src/components/AddMembersBottomSheet.tsx +++ b/examples/SampleApp/src/components/AddMembersBottomSheet.tsx @@ -12,13 +12,13 @@ import { SafeAreaView } from 'react-native-safe-area-context'; import { BottomSheetModal, Checkmark, - Close, StreamBottomSheetModalFlatList, UserAvatar, useStableCallback, useTheme, } from 'stream-chat-react-native'; +import { Close } from '../icons/Close'; import { CircleClose } from '../icons/CircleClose'; import { usePaginatedUsers } from '../hooks/usePaginatedUsers'; @@ -159,7 +159,7 @@ export const AddMembersBottomSheet = React.memo( const initialLoadComplete = initialResults !== null; - const emptyComponent = useMemo(() => { + const EmptyComponent = useCallback(() => { if (loading && !initialLoadComplete) { return ( @@ -248,7 +248,7 @@ export const AddMembersBottomSheet = React.memo( keyExtractor={keyExtractor} keyboardDismissMode='interactive' keyboardShouldPersistTaps='handled' - ListEmptyComponent={emptyComponent} + ListEmptyComponent={EmptyComponent} onEndReached={loadMore} renderItem={renderItem} contentContainerStyle={styles.listContent} diff --git a/examples/SampleApp/src/components/AllMembersBottomSheet.tsx b/examples/SampleApp/src/components/AllMembersBottomSheet.tsx index a482ad6f59..ea504a1046 100644 --- a/examples/SampleApp/src/components/AllMembersBottomSheet.tsx +++ b/examples/SampleApp/src/components/AllMembersBottomSheet.tsx @@ -3,7 +3,6 @@ import { Pressable, StyleSheet, Text, View } from 'react-native'; import { SafeAreaView } from 'react-native-safe-area-context'; import { BottomSheetModal, - Close, StreamBottomSheetModalFlatList, UserAdd, useStableCallback, @@ -12,6 +11,7 @@ import { import { ContactDetailBottomSheet } from './ContactDetailBottomSheet'; import { MemberListItem } from './MemberListItem'; +import { Close } from '../icons/Close'; import type { NativeStackNavigationProp } from '@react-navigation/native-stack'; import type { Channel, ChannelMemberResponse } from 'stream-chat'; diff --git a/examples/SampleApp/src/components/BottomTabs.tsx b/examples/SampleApp/src/components/BottomTabs.tsx index 7676c42353..684a1ea694 100644 --- a/examples/SampleApp/src/components/BottomTabs.tsx +++ b/examples/SampleApp/src/components/BottomTabs.tsx @@ -13,6 +13,7 @@ import type { BottomTabBarProps } from '@react-navigation/bottom-tabs'; import type { Route } from '@react-navigation/native'; import { DraftsTab } from '../icons/DraftsTab'; import { RemindersTab } from '../icons/ReminderTab'; +import { useLegacyColors } from '../theme/useLegacyColors'; const styles = StyleSheet.create({ notification: { @@ -84,11 +85,8 @@ type TabProps = Pick & { const Tab = (props: TabProps) => { const { navigation, state, route, index } = props; - const { - theme: { - colors: { black, grey }, - }, - } = useTheme(); + useTheme(); + const { black, grey } = useLegacyColors(); const tab = getTab(route.name); const isFocused = state.index === index; @@ -130,11 +128,8 @@ const Tab = (props: TabProps) => { export const BottomTabs: React.FC = (props) => { const { navigation, state } = props; - const { - theme: { - colors: { white }, - }, - } = useTheme(); + useTheme(); + const { white } = useLegacyColors(); const { bottom } = useSafeAreaInsets(); return ( diff --git a/examples/SampleApp/src/components/ChannelInfoOverlay.tsx b/examples/SampleApp/src/components/ChannelInfoOverlay.tsx index 705a9b8c77..6d920f1998 100644 --- a/examples/SampleApp/src/components/ChannelInfoOverlay.tsx +++ b/examples/SampleApp/src/components/ChannelInfoOverlay.tsx @@ -7,7 +7,6 @@ import Animated from 'react-native-reanimated'; import { CircleClose, Delete, - User, UserMinus, useTheme, useViewport, @@ -24,6 +23,8 @@ import { Archive } from '../icons/Archive'; import { useChannelInfoOverlayActions } from '../hooks/useChannelInfoOverlayActions'; import { SafeAreaView } from 'react-native-safe-area-context'; import { Pin } from '../icons/Pin.tsx'; +import { User } from '../icons/User'; +import { useLegacyColors } from '../theme/useLegacyColors'; import type { ConfirmationData } from './ConfirmationBottomSheet'; @@ -102,11 +103,9 @@ export const ChannelInfoOverlay = (props: ChannelInfoOverlayProps) => { const { channel, clientId, membership, navigation } = data || {}; const { - theme: { - colors: { accent_red, black, grey }, - semantics, - }, + theme: { semantics }, } = useTheme(); + const { accent_red, black, grey } = useLegacyColors(); // magic number 8 used as fontSize is 16 so assuming average character width of half const maxWidth = channel diff --git a/examples/SampleApp/src/components/ChatScreenHeader.tsx b/examples/SampleApp/src/components/ChatScreenHeader.tsx index 902de89b62..aa0be96dff 100644 --- a/examples/SampleApp/src/components/ChatScreenHeader.tsx +++ b/examples/SampleApp/src/components/ChatScreenHeader.tsx @@ -1,13 +1,14 @@ import React from 'react'; import { Image, StyleSheet, TouchableOpacity } from 'react-native'; import { CompositeNavigationProp, useNavigation } from '@react-navigation/native'; -import { useChatContext, useTheme } from 'stream-chat-react-native'; +import { useChatContext } from 'stream-chat-react-native'; import { RoundButton } from './RoundButton'; import { ScreenHeader } from './ScreenHeader'; import { useAppContext } from '../context/AppContext'; import { NewDirectMessageIcon } from '../icons/NewDirectMessageIcon'; +import { useLegacyColors } from '../theme/useLegacyColors'; import type { DrawerNavigationProp } from '@react-navigation/drawer'; import type { NativeStackNavigationProp } from '@react-navigation/native-stack'; @@ -29,11 +30,7 @@ type ChatScreenHeaderNavigationProp = CompositeNavigationProp< >; export const ChatScreenHeader: React.FC<{ title?: string }> = ({ title = 'Stream Chat' }) => { - const { - theme: { - colors: { accent_blue }, - }, - } = useTheme(); + const { accent_blue } = useLegacyColors(); const navigation = useNavigation(); const { chatClient } = useAppContext(); diff --git a/examples/SampleApp/src/components/ContactDetailBottomSheet.tsx b/examples/SampleApp/src/components/ContactDetailBottomSheet.tsx index 9dc7b95ab0..dbc56be219 100644 --- a/examples/SampleApp/src/components/ContactDetailBottomSheet.tsx +++ b/examples/SampleApp/src/components/ContactDetailBottomSheet.tsx @@ -4,7 +4,6 @@ import { SafeAreaView } from 'react-native-safe-area-context'; import { BottomSheetModal, CircleBan, - MessageIcon, useChatContext, useStableCallback, useTheme, @@ -13,6 +12,7 @@ import { import { ListItem } from './ListItem'; +import { Message } from '../icons/Message'; import { Mute } from '../icons/Mute'; import { getUserActivityStatus } from '../utils/getUserActivityStatus'; @@ -120,7 +120,7 @@ export const ContactDetailBottomSheet = React.memo( } + icon={} label='Send Direct Message' onPress={sendDirectMessage} /> diff --git a/examples/SampleApp/src/components/DraftsList.tsx b/examples/SampleApp/src/components/DraftsList.tsx index 4a7cc43013..78eaff35f2 100644 --- a/examples/SampleApp/src/components/DraftsList.tsx +++ b/examples/SampleApp/src/components/DraftsList.tsx @@ -11,6 +11,7 @@ import { useCallback, useEffect, useMemo } from 'react'; import dayjs from 'dayjs'; import { useIsFocused, useNavigation } from '@react-navigation/native'; import { ChannelResponse, DraftMessage, DraftResponse, MessageResponseBase } from 'stream-chat'; +import { useLegacyColors } from '../theme/useLegacyColors'; export type DraftItemProps = { type?: 'channel' | 'thread'; @@ -22,11 +23,8 @@ export type DraftItemProps = { }; export const DraftItem = ({ type, channel, date, message, thread }: DraftItemProps) => { - const { - theme: { - colors: { grey }, - }, - } = useTheme(); + useTheme(); + const { grey } = useLegacyColors(); const navigation = useNavigation(); const { client } = useChatContext(); const messagePreviewText = useMessagePreviewText({ message }); diff --git a/examples/SampleApp/src/components/EditGroupBottomSheet.tsx b/examples/SampleApp/src/components/EditGroupBottomSheet.tsx index 2f1d1988e8..4feb8400f5 100644 --- a/examples/SampleApp/src/components/EditGroupBottomSheet.tsx +++ b/examples/SampleApp/src/components/EditGroupBottomSheet.tsx @@ -13,11 +13,11 @@ import { BottomSheetModal, ChannelAvatar, Checkmark, - Close, useStableCallback, useTheme, } from 'stream-chat-react-native'; +import { Close } from '../icons/Close'; import type { Channel } from 'stream-chat'; type EditGroupBottomSheetProps = { diff --git a/examples/SampleApp/src/components/LocationSharing/CreateLocationModal.tsx b/examples/SampleApp/src/components/LocationSharing/CreateLocationModal.tsx index c675b4cc4e..427f5c7cd2 100644 --- a/examples/SampleApp/src/components/LocationSharing/CreateLocationModal.tsx +++ b/examples/SampleApp/src/components/LocationSharing/CreateLocationModal.tsx @@ -25,6 +25,7 @@ import { useTranslationContext, } from 'stream-chat-react-native'; import MapView, { MapMarker, Marker } from 'react-native-maps'; +import { useLegacyColors } from '../../theme/useLegacyColors'; type LiveLocationCreateModalProps = { visible: boolean; @@ -47,11 +48,8 @@ export const LiveLocationCreateModal = ({ const messageComposer = useMessageComposer(); const { width, height } = useWindowDimensions(); const { client } = useChatContext(); - const { - theme: { - colors: { accent_blue, grey, grey_whisper }, - }, - } = useTheme(); + useTheme(); + const { accent_blue, grey, grey_whisper } = useLegacyColors(); const { t } = useTranslationContext(); const mapRef = useRef(null); const markerRef = useRef(null); diff --git a/examples/SampleApp/src/components/LocationSharing/MessageLocation.tsx b/examples/SampleApp/src/components/LocationSharing/MessageLocation.tsx index 82c9d7511e..e64f42894f 100644 --- a/examples/SampleApp/src/components/LocationSharing/MessageLocation.tsx +++ b/examples/SampleApp/src/components/LocationSharing/MessageLocation.tsx @@ -16,6 +16,7 @@ import { } from 'stream-chat-react-native'; import MapView, { MapMarker, Marker } from 'react-native-maps'; import { SharedLocationResponse, StreamChat } from 'stream-chat'; +import { useLegacyColors } from '../../theme/useLegacyColors'; const MessageLocationFooter = ({ client, @@ -26,11 +27,8 @@ const MessageLocationFooter = ({ }) => { const { channel } = useChannelContext(); const { end_at, user_id } = shared_location; - const { - theme: { - colors: { grey }, - }, - } = useTheme(); + useTheme(); + const { grey } = useLegacyColors(); const liveLocationActive = end_at && new Date(end_at) > new Date(); const endedAtDate = end_at ? new Date(end_at) : null; const formattedEndedAt = endedAtDate ? endedAtDate.toLocaleString() : ''; @@ -79,12 +77,8 @@ const MessageLocationComponent = ({ const { width, height } = useWindowDimensions(); const aspect_ratio = width / height; - - const { - theme: { - colors: { accent_blue }, - }, - } = useTheme(); + useTheme(); + const { accent_blue } = useLegacyColors(); const region = useMemo(() => { const latitudeDelta = 0.1; diff --git a/examples/SampleApp/src/components/MenuDrawer.tsx b/examples/SampleApp/src/components/MenuDrawer.tsx index dba552fd1a..a8cf01effb 100644 --- a/examples/SampleApp/src/components/MenuDrawer.tsx +++ b/examples/SampleApp/src/components/MenuDrawer.tsx @@ -1,6 +1,6 @@ import React, { useCallback, useEffect, useState } from 'react'; import { Image, StyleSheet, Text, TouchableOpacity, Pressable, View } from 'react-native'; -import { Edit, User, useTheme } from 'stream-chat-react-native'; +import { Edit, useTheme } from 'stream-chat-react-native'; import { useAppContext } from '../context/AppContext'; import { SecretMenu } from './SecretMenu.tsx'; @@ -8,6 +8,8 @@ import { SecretMenu } from './SecretMenu.tsx'; import type { DrawerContentComponentProps } from '@react-navigation/drawer'; import { SafeAreaView } from 'react-native-safe-area-context'; import { Group } from '../icons/Group.tsx'; +import { User } from '../icons/User'; +import { useLegacyColors } from '../theme/useLegacyColors'; export const styles = StyleSheet.create({ avatar: { @@ -49,12 +51,8 @@ export const styles = StyleSheet.create({ export const MenuDrawer = ({ navigation }: DrawerContentComponentProps) => { const [secretMenuPressCounter, setSecretMenuPressCounter] = useState(0); const [secretMenuVisible, setSecretMenuVisible] = useState(false); - - const { - theme: { - colors: { black, grey, white }, - }, - } = useTheme(); + useTheme(); + const { black, grey, white } = useLegacyColors(); useEffect(() => { if (!secretMenuVisible && secretMenuPressCounter >= 7) { diff --git a/examples/SampleApp/src/components/MessageSearch/MessageSearchList.tsx b/examples/SampleApp/src/components/MessageSearch/MessageSearchList.tsx index ad2ec54ded..55a305a2a4 100644 --- a/examples/SampleApp/src/components/MessageSearch/MessageSearchList.tsx +++ b/examples/SampleApp/src/components/MessageSearch/MessageSearchList.tsx @@ -5,6 +5,7 @@ import dayjs from 'dayjs'; import calendar from 'dayjs/plugin/calendar'; import { Spinner, useTheme, useViewport, UserAvatar } from 'stream-chat-react-native'; import { DEFAULT_PAGINATION_LIMIT } from '../../utils/constants'; +import { useLegacyColors } from '../../theme/useLegacyColors'; import type { MessageResponse } from 'stream-chat'; @@ -72,10 +73,10 @@ export const MessageSearchList: React.FC = React.forward } = props; const { theme: { - colors: { black, grey, white_snow }, semantics, }, } = useTheme(); + const { black, grey, white_snow } = useLegacyColors(); const { vw } = useViewport(); const navigation = useNavigation>(); diff --git a/examples/SampleApp/src/components/NetworkDownIndicator.tsx b/examples/SampleApp/src/components/NetworkDownIndicator.tsx index 453b7e9972..3c46e49c06 100644 --- a/examples/SampleApp/src/components/NetworkDownIndicator.tsx +++ b/examples/SampleApp/src/components/NetworkDownIndicator.tsx @@ -1,6 +1,7 @@ import React from 'react'; import { StyleSheet, Text, View } from 'react-native'; import { Spinner, useTheme } from 'stream-chat-react-native'; +import { useLegacyColors } from '../theme/useLegacyColors'; const styles = StyleSheet.create({ networkDownContainer: { @@ -23,11 +24,8 @@ const styles = StyleSheet.create({ export const NetworkDownIndicator: React.FC<{ titleSize: 'small' | 'large' }> = ({ titleSize = 'small', }) => { - const { - theme: { - colors: { black }, - }, - } = useTheme(); + useTheme(); + const { black } = useLegacyColors(); return ( diff --git a/examples/SampleApp/src/components/NewDirectMessagingSendButton.tsx b/examples/SampleApp/src/components/NewDirectMessagingSendButton.tsx index 41b28767c9..8c89ab8f03 100644 --- a/examples/SampleApp/src/components/NewDirectMessagingSendButton.tsx +++ b/examples/SampleApp/src/components/NewDirectMessagingSendButton.tsx @@ -17,6 +17,7 @@ import { NewDirectMessagingScreenNavigationProp } from '../screens/NewDirectMess import { useUserSearchContext } from '../context/UserSearchContext'; import { useAppContext } from '../context/AppContext'; import { SendUp } from '../icons/SendUp'; +import { useLegacyColors } from '../theme/useLegacyColors'; type NewDirectMessagingSendButtonPropsWithContext = Pick< MessageInputContextValue, @@ -29,10 +30,10 @@ const SendButtonWithContext = (props: NewDirectMessagingSendButtonPropsWithConte const { disabled = false, giphyActive, sendMessage } = props; const { theme: { - colors: { accent_blue, grey_gainsboro }, messageComposer: { sendButton }, }, } = useTheme(); + const { accent_blue, grey_gainsboro } = useLegacyColors(); return ( ; @@ -8,10 +9,7 @@ type OverlayBackdropProps = { export const OverlayBackdrop = (props: OverlayBackdropProps): React.ReactNode => { const { style = {} } = props; - const { - theme: { - colors: { overlay }, - }, - } = useTheme(); + useTheme(); + const { overlay } = useLegacyColors(); return ; }; diff --git a/examples/SampleApp/src/components/Reminders/ReminderBanner.tsx b/examples/SampleApp/src/components/Reminders/ReminderBanner.tsx index e180d8da26..d649f8e904 100644 --- a/examples/SampleApp/src/components/Reminders/ReminderBanner.tsx +++ b/examples/SampleApp/src/components/Reminders/ReminderBanner.tsx @@ -6,17 +6,15 @@ import { useTranslationContext, useStateStore, } from 'stream-chat-react-native'; +import { useLegacyColors } from '../../theme/useLegacyColors'; const reminderStateSelector = (state: ReminderState) => ({ timeLeftMs: state.timeLeftMs, }); export const ReminderBanner = (item: ReminderResponse) => { - const { - theme: { - colors: { accent_blue, accent_red }, - }, - } = useTheme(); + useTheme(); + const { accent_blue, accent_red } = useLegacyColors(); const { t } = useTranslationContext(); const { message_id } = item; const reminder = useMessageReminder(message_id); diff --git a/examples/SampleApp/src/components/Reminders/ReminderItem.tsx b/examples/SampleApp/src/components/Reminders/ReminderItem.tsx index 06d47ff551..ff48704d41 100644 --- a/examples/SampleApp/src/components/Reminders/ReminderItem.tsx +++ b/examples/SampleApp/src/components/Reminders/ReminderItem.tsx @@ -12,6 +12,7 @@ import { } from 'stream-chat-react-native'; import { ReminderBanner } from './ReminderBanner'; import Swipeable from 'react-native-gesture-handler/ReanimatedSwipeable'; +import { useLegacyColors } from '../../theme/useLegacyColors'; export const ReminderItem = ( item: ReminderResponse & { onDeleteHandler?: (id: string) => void }, @@ -23,10 +24,10 @@ export const ReminderItem = ( const channelName = channel?.name ? channel.name : 'Channel'; const { theme: { - colors: { accent_red, white_smoke, grey_gainsboro }, semantics, }, } = useTheme(); + const { accent_red, white_smoke, grey_gainsboro } = useLegacyColors(); const messagePreviewText = useMessagePreviewText({ message }); const MessagePreviewIcon = useMessagePreviewIcon({ message }); diff --git a/examples/SampleApp/src/components/Reminders/RemindersList.tsx b/examples/SampleApp/src/components/Reminders/RemindersList.tsx index 348de0c3eb..ce1fc4255e 100644 --- a/examples/SampleApp/src/components/Reminders/RemindersList.tsx +++ b/examples/SampleApp/src/components/Reminders/RemindersList.tsx @@ -11,6 +11,7 @@ import { import { useChatContext, useTheme, useQueryReminders } from 'stream-chat-react-native'; import { ReminderResponse } from 'stream-chat'; import { ReminderItem } from './ReminderItem'; +import { useLegacyColors } from '../../theme/useLegacyColors'; const tabs = [ { key: 'all', title: 'All' }, @@ -29,11 +30,8 @@ const renderItem = ({ item }: { item: ReminderResponse }) => { const [selectedTab, setSelectedTab] = useState(tabs[0]); - const { - theme: { - colors: { accent_blue, grey_gainsboro }, - }, - } = useTheme(); + useTheme(); + const { accent_blue, grey_gainsboro } = useLegacyColors(); const { client } = useChatContext(); const { data, isLoading, loadNext } = useQueryReminders(); diff --git a/examples/SampleApp/src/components/RoundButton.tsx b/examples/SampleApp/src/components/RoundButton.tsx index 1e2c474a10..3cc44e09fc 100644 --- a/examples/SampleApp/src/components/RoundButton.tsx +++ b/examples/SampleApp/src/components/RoundButton.tsx @@ -1,6 +1,7 @@ import React, { PropsWithChildren } from 'react'; import { Platform, StyleSheet, TouchableOpacity } from 'react-native'; -import { useTheme } from 'stream-chat-react-native'; + +import { useLegacyColors } from '../theme/useLegacyColors'; const styles = StyleSheet.create({ container: { @@ -32,11 +33,7 @@ type RoundButtonProps = PropsWithChildren<{ export const RoundButton: React.FC = (props) => { const { children, disabled, onPress } = props; - const { - theme: { - colors: { black, icon_background }, - }, - } = useTheme(); + const { black, icon_background } = useLegacyColors(); return ( = (props) => { } = props; const { - theme: { - colors: { black, grey, white }, - semantics, - }, + theme: { semantics }, } = useTheme(); + const { black, grey, white } = useLegacyColors(); const insets = useSafeAreaInsets(); return ( diff --git a/examples/SampleApp/src/components/SecretMenu.tsx b/examples/SampleApp/src/components/SecretMenu.tsx index cfec27f07b..1658394754 100644 --- a/examples/SampleApp/src/components/SecretMenu.tsx +++ b/examples/SampleApp/src/components/SecretMenu.tsx @@ -14,13 +14,15 @@ import { StyleSheet, ScrollView, } from 'react-native'; -import { Close, Edit, Delete, ZIP, useTheme } from 'stream-chat-react-native'; +import { Edit, Delete, ZIP, useTheme } from 'stream-chat-react-native'; import { styles as menuDrawerStyles } from './MenuDrawer.tsx'; import AsyncStore from '../utils/AsyncStore.ts'; import { StreamChat } from 'stream-chat'; import { LabeledTextInput } from '../screens/AdvancedUserSelectorScreen.tsx'; +import { Close } from '../icons/Close.tsx'; import { Notification } from '../icons/Notification.tsx'; import { Folder } from '../icons/Folder.tsx'; +import { useLegacyColors } from '../theme/useLegacyColors.ts'; const isAndroid = Platform.OS === 'android'; @@ -274,11 +276,8 @@ export const SecretMenu = ({ const [selectedMessageOverlayBackdrop, setSelectedMessageOverlayBackdrop] = useState< MessageOverlayBackdropConfigItem['value'] | null >(null); - const { - theme: { - colors: { black, grey }, - }, - } = useTheme(); + useTheme(); + const { black, grey } = useLegacyColors(); const notificationConfigItems = useMemo( () => [ diff --git a/examples/SampleApp/src/components/ToastComponent/Toast.tsx b/examples/SampleApp/src/components/ToastComponent/Toast.tsx index 80fe1527c7..8bd79e6af7 100644 --- a/examples/SampleApp/src/components/ToastComponent/Toast.tsx +++ b/examples/SampleApp/src/components/ToastComponent/Toast.tsx @@ -3,6 +3,7 @@ import Animated, { Easing, SlideInDown, SlideOutDown } from 'react-native-reanim import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context'; import { useInAppNotificationsState, useTheme } from 'stream-chat-react-native'; import type { Notification, NotificationState } from 'stream-chat'; +import { useLegacyColors } from '../../theme/useLegacyColors'; const { width } = Dimensions.get('window'); @@ -17,11 +18,8 @@ export const Toast = () => { const { closeInAppNotification, notifications } = useInAppNotificationsState(); const { top } = useSafeAreaInsets(); - const { - theme: { - colors: { overlay, white_smoke }, - }, - } = useTheme(); + useTheme(); + const { overlay, white_smoke } = useLegacyColors(); // When offline, we upload pending attachments by cleaning up the previous upload, this results in a cancelled/aborted error from the server, so we filter out those notifications. const filteredNotifications = notifications.filter( diff --git a/examples/SampleApp/src/components/UserInfoOverlay.tsx b/examples/SampleApp/src/components/UserInfoOverlay.tsx index 8ac7ef9444..70074bbeab 100644 --- a/examples/SampleApp/src/components/UserInfoOverlay.tsx +++ b/examples/SampleApp/src/components/UserInfoOverlay.tsx @@ -15,9 +15,7 @@ import Animated, { withTiming, } from 'react-native-reanimated'; import { - MessageIcon, useChatContext, - User, useTheme, useViewport, UserAvatar, @@ -33,6 +31,9 @@ import { useUserInfoOverlayActions } from '../hooks/useUserInfoOverlayActions'; import { SafeAreaView } from 'react-native-safe-area-context'; import { UserMinus } from '../icons/UserMinus'; import { CircleClose } from '../icons/CircleClose'; +import { Message } from '../icons/Message'; +import { User } from '../icons/User'; +import { useLegacyColors } from '../theme/useLegacyColors'; import type { ConfirmationData } from './ConfirmationBottomSheet'; @@ -107,11 +108,9 @@ export const UserInfoOverlay = (props: UserInfoOverlayProps) => { const { channel, member } = data || {}; const { - theme: { - colors: { accent_red, black, grey, white }, - semantics, - }, + theme: { semantics }, } = useTheme(); + const { accent_red, black, grey, white } = useLegacyColors(); const offsetY = useSharedValue(0); const translateY = useSharedValue(0); @@ -313,7 +312,7 @@ export const UserInfoOverlay = (props: UserInfoOverlayProps) => { ]} > - + Message diff --git a/examples/SampleApp/src/components/UserSearch/SelectedUserTag.tsx b/examples/SampleApp/src/components/UserSearch/SelectedUserTag.tsx index 4ea60b956e..b6a62de741 100644 --- a/examples/SampleApp/src/components/UserSearch/SelectedUserTag.tsx +++ b/examples/SampleApp/src/components/UserSearch/SelectedUserTag.tsx @@ -1,9 +1,9 @@ import React from 'react'; import { Image, StyleSheet, Text, TouchableOpacity } from 'react-native'; -import { useTheme } from 'stream-chat-react-native'; import type { UserResponse } from 'stream-chat'; +import { useLegacyColors } from '../../theme/useLegacyColors'; const styles = StyleSheet.create({ tagContainer: { @@ -38,11 +38,7 @@ export const SelectedUserTag: React.FC = ({ onPress, tag, }) => { - const { - theme: { - colors: { black, grey_gainsboro }, - }, - } = useTheme(); + const { black, grey_gainsboro } = useLegacyColors(); return ( = ({ removeButton = true, user, }) => { - const { - theme: { - colors: { black, white_snow }, - }, - } = useTheme(); + useTheme(); + const { black, white_snow } = useLegacyColors(); return ( diff --git a/examples/SampleApp/src/components/UserSearch/UserSearchResults.tsx b/examples/SampleApp/src/components/UserSearch/UserSearchResults.tsx index 65dcdb0e6e..ba609f1cc4 100644 --- a/examples/SampleApp/src/components/UserSearch/UserSearchResults.tsx +++ b/examples/SampleApp/src/components/UserSearch/UserSearchResults.tsx @@ -9,15 +9,17 @@ import { } from 'react-native'; import dayjs from 'dayjs'; import Svg, { Defs, LinearGradient, Rect, Stop } from 'react-native-svg'; -import { Close, useTheme, useViewport, UserAvatar } from 'stream-chat-react-native'; +import { useTheme, useViewport, UserAvatar } from 'stream-chat-react-native'; import { useUserSearchContext } from '../../context/UserSearchContext'; import type { UserResponse } from 'stream-chat'; +import { Close } from '../../icons/Close'; import { Search } from '../../icons/Search'; import calendar from 'dayjs/plugin/calendar'; import { CheckSend } from '../../icons/CheckSend'; +import { useLegacyColors } from '../../theme/useLegacyColors'; dayjs.extend(calendar); @@ -92,20 +94,18 @@ export const UserSearchResults: React.FC = ({ }> >([]); const { - theme: { - colors: { - accent_blue, - bg_gradient_end, - bg_gradient_start, - black, - grey, - grey_gainsboro, - white_smoke, - white_snow, - }, - semantics, - }, + theme: { semantics }, } = useTheme(); + const { + accent_blue, + bg_gradient_end, + bg_gradient_start, + black, + grey, + grey_gainsboro, + white_smoke, + white_snow, + } = useLegacyColors(); const { vw } = useViewport(); const results = resultsProp || resultsContext; diff --git a/examples/SampleApp/src/icons/AddUser.tsx b/examples/SampleApp/src/icons/AddUser.tsx index 13995fdefd..7b741bf105 100644 --- a/examples/SampleApp/src/icons/AddUser.tsx +++ b/examples/SampleApp/src/icons/AddUser.tsx @@ -1,15 +1,11 @@ import React from 'react'; import Svg, { Path } from 'react-native-svg'; -import { useTheme } from 'stream-chat-react-native'; import { IconProps } from '../utils/base'; +import { useLegacyColors } from '../theme/useLegacyColors'; export const AddUser: React.FC = ({ fill, height, width }) => { - const { - theme: { - colors: { grey }, - }, - } = useTheme(); + const { grey } = useLegacyColors(); return ( diff --git a/examples/SampleApp/src/icons/Archive.tsx b/examples/SampleApp/src/icons/Archive.tsx index f32b37c58c..fcbf391591 100644 --- a/examples/SampleApp/src/icons/Archive.tsx +++ b/examples/SampleApp/src/icons/Archive.tsx @@ -1,15 +1,11 @@ import React from 'react'; import Svg, { Path } from 'react-native-svg'; -import { useTheme } from 'stream-chat-react-native'; import { IconProps } from '../utils/base'; +import { useLegacyColors } from '../theme/useLegacyColors'; export const Archive: React.FC = ({ height = 512, width = 512 }) => { - const { - theme: { - colors: { grey }, - }, - } = useTheme(); + const { grey } = useLegacyColors(); return ( diff --git a/examples/SampleApp/src/icons/BlockUser.tsx b/examples/SampleApp/src/icons/BlockUser.tsx index c8dc323fbf..08ccac6daf 100644 --- a/examples/SampleApp/src/icons/BlockUser.tsx +++ b/examples/SampleApp/src/icons/BlockUser.tsx @@ -1,15 +1,11 @@ import React from 'react'; import Svg, { Path } from 'react-native-svg'; -import { useTheme } from 'stream-chat-react-native'; import { IconProps } from '../utils/base'; +import { useLegacyColors } from '../theme/useLegacyColors'; export const BlockUser: React.FC = ({ height, width }) => { - const { - theme: { - colors: { grey }, - }, - } = useTheme(); + const { grey } = useLegacyColors(); return ( diff --git a/examples/SampleApp/src/icons/ChatsTab.tsx b/examples/SampleApp/src/icons/ChatsTab.tsx index f2c93d6c04..138892d84b 100644 --- a/examples/SampleApp/src/icons/ChatsTab.tsx +++ b/examples/SampleApp/src/icons/ChatsTab.tsx @@ -1,15 +1,11 @@ import React from 'react'; import Svg, { Path } from 'react-native-svg'; -import { useTheme } from 'stream-chat-react-native'; import { IconProps } from '../utils/base'; +import { useLegacyColors } from '../theme/useLegacyColors'; export const ChatsTab: React.FC = ({ active, height = 24, width = 24 }) => { - const { - theme: { - colors: { black, grey }, - }, - } = useTheme(); + const { black, grey } = useLegacyColors(); return ( = ({ fill, height, width }) => { - const { - theme: { - colors: { black }, - }, - } = useTheme(); + const { black } = useLegacyColors(); return ( diff --git a/examples/SampleApp/src/icons/CircleClose.tsx b/examples/SampleApp/src/icons/CircleClose.tsx index f2a574e62b..349a3126b6 100644 --- a/examples/SampleApp/src/icons/CircleClose.tsx +++ b/examples/SampleApp/src/icons/CircleClose.tsx @@ -1,15 +1,11 @@ import React from 'react'; import Svg, { G, Path } from 'react-native-svg'; -import { useTheme } from 'stream-chat-react-native'; import { IconProps } from '../utils/base'; +import { useLegacyColors } from '../theme/useLegacyColors'; export const CircleClose: React.FC = ({ height = 24, width = 24 }) => { - const { - theme: { - colors: { black }, - }, - } = useTheme(); + const { black } = useLegacyColors(); return ( diff --git a/examples/SampleApp/src/icons/Close.tsx b/examples/SampleApp/src/icons/Close.tsx index d698587e25..c94bf78205 100644 --- a/examples/SampleApp/src/icons/Close.tsx +++ b/examples/SampleApp/src/icons/Close.tsx @@ -1,22 +1,25 @@ import React from 'react'; import Svg, { Path } from 'react-native-svg'; -import { useTheme } from 'stream-chat-react-native'; import { IconProps } from '../utils/base'; +import { useLegacyColors } from '../theme/useLegacyColors'; -export const Close: React.FC = ({ height, width }) => { - const { - theme: { - colors: { black }, - }, - } = useTheme(); +export const Close: React.FC = ({ + fill, + height = 24, + pathFill, + stroke, + width = 24, +}) => { + const { black } = useLegacyColors(); + const color = pathFill ?? fill ?? stroke ?? black; return ( - + diff --git a/examples/SampleApp/src/icons/Contacts.tsx b/examples/SampleApp/src/icons/Contacts.tsx index f16ad9bfa9..3a5043c810 100644 --- a/examples/SampleApp/src/icons/Contacts.tsx +++ b/examples/SampleApp/src/icons/Contacts.tsx @@ -1,15 +1,11 @@ import React from 'react'; import Svg, { G, Path } from 'react-native-svg'; -import { useTheme } from 'stream-chat-react-native'; import { IconProps } from '../utils/base'; +import { useLegacyColors } from '../theme/useLegacyColors'; export const Contacts: React.FC = ({ fill, height = 24, scale = 1, width = 24 }) => { - const { - theme: { - colors: { black }, - }, - } = useTheme(); + const { black } = useLegacyColors(); return ( = ({ fill, height, width }) => { - const { - theme: { - colors: { black }, - }, - } = useTheme(); + const { black } = useLegacyColors(); return ( diff --git a/examples/SampleApp/src/icons/DownArrow.tsx b/examples/SampleApp/src/icons/DownArrow.tsx index 12508703bd..7bba594c3e 100644 --- a/examples/SampleApp/src/icons/DownArrow.tsx +++ b/examples/SampleApp/src/icons/DownArrow.tsx @@ -1,15 +1,11 @@ import React from 'react'; import Svg, { Path } from 'react-native-svg'; -import { useTheme } from 'stream-chat-react-native'; import { IconProps } from '../utils/base'; +import { useLegacyColors } from '../theme/useLegacyColors'; export const DownArrow: React.FC = ({ height, width }) => { - const { - theme: { - colors: { grey }, - }, - } = useTheme(); + const { grey } = useLegacyColors(); return ( diff --git a/examples/SampleApp/src/icons/DraftIcon.tsx b/examples/SampleApp/src/icons/DraftIcon.tsx index c54f4c7a0d..b6c4471a2f 100644 --- a/examples/SampleApp/src/icons/DraftIcon.tsx +++ b/examples/SampleApp/src/icons/DraftIcon.tsx @@ -1,15 +1,11 @@ import React from 'react'; import Svg, { Path } from 'react-native-svg'; -import { useTheme } from 'stream-chat-react-native'; import { IconProps } from '../utils/base'; +import { useLegacyColors } from '../theme/useLegacyColors'; export const DraftsIcon: React.FC = ({ height = 29, width = 30 }) => { - const { - theme: { - colors: { grey }, - }, - } = useTheme(); + const { grey } = useLegacyColors(); return ( = ({ active, height = 29, width = 30 }) => { - const { - theme: { - colors: { black, grey }, - }, - } = useTheme(); + const { black, grey } = useLegacyColors(); return ( = ({ height, width }) => { - const { - theme: { - colors: { accent_red, grey_gainsboro }, - }, - } = useTheme(); + const { accent_red, grey_gainsboro } = useLegacyColors(); return ( diff --git a/examples/SampleApp/src/icons/GoBack.tsx b/examples/SampleApp/src/icons/GoBack.tsx index 3683f9b1f9..a80911f687 100644 --- a/examples/SampleApp/src/icons/GoBack.tsx +++ b/examples/SampleApp/src/icons/GoBack.tsx @@ -1,15 +1,11 @@ import React from 'react'; import Svg, { Path } from 'react-native-svg'; -import { useTheme } from 'stream-chat-react-native'; import { IconProps } from '../utils/base'; +import { useLegacyColors } from '../theme/useLegacyColors'; export const GoBack: React.FC = ({ height = 24, width = 24 }) => { - const { - theme: { - colors: { black }, - }, - } = useTheme(); + const { black } = useLegacyColors(); return ( = ({ active, height = 24, width = 24 }) => { - const { - theme: { - colors: { black, grey }, - }, - } = useTheme(); + const { black, grey } = useLegacyColors(); return ( diff --git a/examples/SampleApp/src/icons/Message.tsx b/examples/SampleApp/src/icons/Message.tsx index 41a0fe682f..bc260ae164 100644 --- a/examples/SampleApp/src/icons/Message.tsx +++ b/examples/SampleApp/src/icons/Message.tsx @@ -1,14 +1,17 @@ import React from 'react'; -import Svg, { Path } from 'react-native-svg'; +import { Path, Svg } from 'react-native-svg'; + import { IconProps } from '../utils/base'; -export const Message = (props: IconProps) => { - const { height, width, ...rest } = props; +export const Message = ({ fill, height, pathFill, scale, stroke, width, ...rest }: IconProps) => { + const color = pathFill ?? fill ?? stroke ?? 'black'; + const size = scale ? 20 * scale : undefined; + return ( - + ); diff --git a/examples/SampleApp/src/icons/NewDirectMessageIcon.tsx b/examples/SampleApp/src/icons/NewDirectMessageIcon.tsx index 560d20b774..7d8bacafa5 100644 --- a/examples/SampleApp/src/icons/NewDirectMessageIcon.tsx +++ b/examples/SampleApp/src/icons/NewDirectMessageIcon.tsx @@ -1,15 +1,11 @@ import React from 'react'; import Svg, { G, Path } from 'react-native-svg'; -import { useTheme } from 'stream-chat-react-native'; import { IconProps } from '../utils/base'; +import { useLegacyColors } from '../theme/useLegacyColors'; export const NewDirectMessageIcon: React.FC = ({ active, color, height, width }) => { - const { - theme: { - colors: { black }, - }, - } = useTheme(); + const { black } = useLegacyColors(); return ( diff --git a/examples/SampleApp/src/icons/NewGroupIcon.tsx b/examples/SampleApp/src/icons/NewGroupIcon.tsx index 0d1d9467ba..a17f6f9512 100644 --- a/examples/SampleApp/src/icons/NewGroupIcon.tsx +++ b/examples/SampleApp/src/icons/NewGroupIcon.tsx @@ -1,15 +1,11 @@ import React from 'react'; import Svg, { G, Path } from 'react-native-svg'; -import { useTheme } from 'stream-chat-react-native'; import { IconProps } from '../utils/base'; +import { useLegacyColors } from '../theme/useLegacyColors'; export const NewGroupIcon: React.FC = ({ active, color, height, width }) => { - const { - theme: { - colors: { black }, - }, - } = useTheme(); + const { black } = useLegacyColors(); return ( diff --git a/examples/SampleApp/src/icons/Notification.tsx b/examples/SampleApp/src/icons/Notification.tsx index 21bd941c72..600513bf81 100644 --- a/examples/SampleApp/src/icons/Notification.tsx +++ b/examples/SampleApp/src/icons/Notification.tsx @@ -1,15 +1,11 @@ import React from 'react'; import Svg, { G, Path } from 'react-native-svg'; -import { useTheme } from 'stream-chat-react-native'; import { IconProps } from '../utils/base'; +import { useLegacyColors } from '../theme/useLegacyColors'; export const Notification: React.FC = ({ fill, height = 24, scale = 1, width = 24 }) => { - const { - theme: { - colors: { black }, - }, - } = useTheme(); + const { black } = useLegacyColors(); return ( = ({ active, height = 24, width = 24 }) => { - const { - theme: { - colors: { black, grey }, - }, - } = useTheme(); + const { black, grey } = useLegacyColors(); return ( diff --git a/examples/SampleApp/src/icons/RemoveUser.tsx b/examples/SampleApp/src/icons/RemoveUser.tsx index e49bebaea8..183437385e 100644 --- a/examples/SampleApp/src/icons/RemoveUser.tsx +++ b/examples/SampleApp/src/icons/RemoveUser.tsx @@ -1,15 +1,11 @@ import React from 'react'; import Svg, { Path } from 'react-native-svg'; -import { useTheme } from 'stream-chat-react-native'; import { IconProps } from '../utils/base'; +import { useLegacyColors } from '../theme/useLegacyColors'; export const RemoveUser: React.FC = ({ height, width }) => { - const { - theme: { - colors: { grey }, - }, - } = useTheme(); + const { grey } = useLegacyColors(); return ( diff --git a/examples/SampleApp/src/icons/RightArrow.tsx b/examples/SampleApp/src/icons/RightArrow.tsx index 0d3ae1def5..472a34e4f5 100644 --- a/examples/SampleApp/src/icons/RightArrow.tsx +++ b/examples/SampleApp/src/icons/RightArrow.tsx @@ -1,36 +1,31 @@ import React from 'react'; -import Svg, { Path } from 'react-native-svg'; -import { useTheme } from 'stream-chat-react-native'; +import { G, Path, Svg } from 'react-native-svg'; import { IconProps } from '../utils/base'; -export const RightArrow: React.FC = ({ height, width }) => { - const { - theme: { - colors: { accent_blue }, - }, - } = useTheme(); +export const RightArrow = ({ + fill, + height, + pathFill, + scale, + stroke, + width, + ...rest +}: IconProps) => { + const color = pathFill ?? fill ?? stroke ?? 'black'; + const size = scale ? 20 * scale : undefined; return ( - - - - + + + + ); }; diff --git a/examples/SampleApp/src/icons/Search.tsx b/examples/SampleApp/src/icons/Search.tsx index 37d7422a2a..13d2aac5ab 100644 --- a/examples/SampleApp/src/icons/Search.tsx +++ b/examples/SampleApp/src/icons/Search.tsx @@ -1,15 +1,11 @@ import React from 'react'; import Svg, { G, Path } from 'react-native-svg'; -import { useTheme } from 'stream-chat-react-native'; import { IconProps } from '../utils/base'; +import { useLegacyColors } from '../theme/useLegacyColors'; export const Search: React.FC = ({ fill, height = 24, scale = 1, width = 24 }) => { - const { - theme: { - colors: { black }, - }, - } = useTheme(); + const { black } = useLegacyColors(); return ( = ({ height = 24, width = 24 }) => { - const { - theme: { - colors: { black }, - }, - } = useTheme(); + const { black } = useLegacyColors(); return ( diff --git a/examples/SampleApp/src/icons/SignOut.tsx b/examples/SampleApp/src/icons/SignOut.tsx index 5d6aa6cd5a..cd89829396 100644 --- a/examples/SampleApp/src/icons/SignOut.tsx +++ b/examples/SampleApp/src/icons/SignOut.tsx @@ -1,15 +1,11 @@ import React from 'react'; import Svg, { G, Path } from 'react-native-svg'; -import { useTheme } from 'stream-chat-react-native'; import { IconProps } from '../utils/base'; +import { useLegacyColors } from '../theme/useLegacyColors'; export const SignOut: React.FC = ({ height, width }) => { - const { - theme: { - colors: { black }, - }, - } = useTheme(); + const { black } = useLegacyColors(); return ( diff --git a/examples/SampleApp/src/icons/StreamLogo.tsx b/examples/SampleApp/src/icons/StreamLogo.tsx index da9f9fa896..0ad8b8031a 100644 --- a/examples/SampleApp/src/icons/StreamLogo.tsx +++ b/examples/SampleApp/src/icons/StreamLogo.tsx @@ -1,15 +1,11 @@ import React from 'react'; import Svg, { Path } from 'react-native-svg'; -import { useTheme } from 'stream-chat-react-native'; import { IconProps } from '../utils/base'; +import { useLegacyColors } from '../theme/useLegacyColors'; export const StreamLogo: React.FC = ({ height = 40, width = 80 }) => { - const { - theme: { - colors: { accent_blue }, - }, - } = useTheme(); + const { accent_blue } = useLegacyColors(); return ( diff --git a/examples/SampleApp/src/icons/ThreadsTab.tsx b/examples/SampleApp/src/icons/ThreadsTab.tsx index 60def5304b..3f0f7e98f3 100644 --- a/examples/SampleApp/src/icons/ThreadsTab.tsx +++ b/examples/SampleApp/src/icons/ThreadsTab.tsx @@ -1,15 +1,11 @@ import React from 'react'; import Svg, { Path } from 'react-native-svg'; -import { useTheme } from 'stream-chat-react-native'; import { IconProps } from '../utils/base'; +import { useLegacyColors } from '../theme/useLegacyColors'; export const ThreadsTab: React.FC = ({ active, height = 24, width = 24 }) => { - const { - theme: { - colors: { black, grey }, - }, - } = useTheme(); + const { black, grey } = useLegacyColors(); return ( = ({ height, width }) => { - const { - theme: { - colors: { grey }, - }, - } = useTheme(); +export const User = ({ fill, height, pathFill, scale, stroke, width, ...rest }: IconProps) => { + const color = pathFill ?? fill ?? stroke ?? 'black'; + const size = scale ? 20 * scale : 20; return ( - + ); diff --git a/examples/SampleApp/src/screens/AdvancedUserSelectorScreen.tsx b/examples/SampleApp/src/screens/AdvancedUserSelectorScreen.tsx index 99a86d10f0..1bcc7dca54 100644 --- a/examples/SampleApp/src/screens/AdvancedUserSelectorScreen.tsx +++ b/examples/SampleApp/src/screens/AdvancedUserSelectorScreen.tsx @@ -4,6 +4,7 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context'; import { KeyboardCompatibleView, useTheme, version } from 'stream-chat-react-native'; import { useAppContext } from '../context/AppContext'; +import { useLegacyColors } from '../theme/useLegacyColors'; const styles = StyleSheet.create({ bottomContainer: { @@ -61,11 +62,8 @@ export const LabeledTextInput: React.FC = ({ onChangeText, value, }) => { - const { - theme: { - colors: { accent_blue, accent_red, black, grey, white_smoke }, - }, - } = useTheme(); + useTheme(); + const { accent_blue, accent_red, black, grey, white_smoke } = useLegacyColors(); const [borderColor, setBorderColor] = useState(white_smoke); const onFocus = () => { @@ -137,11 +135,8 @@ export const LabeledTextInput: React.FC = ({ export const AdvancedUserSelectorScreen: React.FC = () => { const { bottom } = useSafeAreaInsets(); - const { - theme: { - colors: { button_background, button_text, grey_gainsboro, white_snow }, - }, - } = useTheme(); + useTheme(); + const { button_background, button_text, grey_gainsboro, white_snow } = useLegacyColors(); const { loginUser } = useAppContext(); const [apiKey, setApiKey] = useState(''); diff --git a/examples/SampleApp/src/screens/ChannelFilesScreen.tsx b/examples/SampleApp/src/screens/ChannelFilesScreen.tsx index 5072e69f89..3a82eb3e5d 100644 --- a/examples/SampleApp/src/screens/ChannelFilesScreen.tsx +++ b/examples/SampleApp/src/screens/ChannelFilesScreen.tsx @@ -12,6 +12,7 @@ import { import { ScreenHeader } from '../components/ScreenHeader'; import { usePaginatedAttachments } from '../hooks/usePaginatedAttachments'; import { File } from '../icons/File'; +import { useLegacyColors } from '../theme/useLegacyColors'; import type { RouteProp } from '@react-navigation/native'; import type { Attachment } from 'stream-chat'; @@ -83,10 +84,10 @@ export const ChannelFilesScreen: React.FC = ({ const insets = useSafeAreaInsets(); const { theme: { - colors: { black, grey, white_snow }, semantics, }, } = useTheme(); + const { black, grey, white_snow } = useLegacyColors(); const [sections, setSections] = useState< Array<{ @@ -204,11 +205,8 @@ export const ChannelFilesScreen: React.FC = ({ }; const EmptyListComponent = () => { - const { - theme: { - colors: { black, grey, grey_gainsboro }, - }, - } = useTheme(); + useTheme(); + const { black, grey, grey_gainsboro } = useLegacyColors(); return ( diff --git a/examples/SampleApp/src/screens/ChannelImagesScreen.tsx b/examples/SampleApp/src/screens/ChannelImagesScreen.tsx index 793b7a00e7..5a75be6a47 100644 --- a/examples/SampleApp/src/screens/ChannelImagesScreen.tsx +++ b/examples/SampleApp/src/screens/ChannelImagesScreen.tsx @@ -23,6 +23,7 @@ import { import { ScreenHeader } from '../components/ScreenHeader'; import { usePaginatedAttachments } from '../hooks/usePaginatedAttachments'; import { Picture } from '../icons/Picture'; +import { useLegacyColors } from '../theme/useLegacyColors'; import type { RouteProp } from '@react-navigation/native'; @@ -74,11 +75,8 @@ export const ChannelImagesScreen: React.FC = ({ const { assets } = useStateStore(imageGalleryStateStore.state, selector); const { setOverlay } = useOverlayContext(); const { loading, loadMore, messages } = usePaginatedAttachments(channel, 'image'); - const { - theme: { - colors: { white }, - }, - } = useTheme(); + useTheme(); + const { white } = useLegacyColors(); const [stickyHeaderDate, setStickyHeaderDate] = useState( Dayjs(messages?.[0]?.created_at).format('MMM YYYY'), @@ -175,11 +173,8 @@ export const ChannelImagesScreen: React.FC = ({ }; const EmptyListComponent = () => { - const { - theme: { - colors: { black, grey, grey_gainsboro }, - }, - } = useTheme(); + useTheme(); + const { black, grey, grey_gainsboro } = useLegacyColors(); return ( diff --git a/examples/SampleApp/src/screens/ChannelListScreen.tsx b/examples/SampleApp/src/screens/ChannelListScreen.tsx index e088574079..5b2579dc7f 100644 --- a/examples/SampleApp/src/screens/ChannelListScreen.tsx +++ b/examples/SampleApp/src/screens/ChannelListScreen.tsx @@ -22,6 +22,7 @@ import { useStreamChatContext } from '../context/StreamChatContext'; import { Search } from '../icons/Search'; import { ChannelInfo } from '../icons/ChannelInfo.tsx'; import { CircleClose } from '../icons/CircleClose.tsx'; +import { useLegacyColors } from '../theme/useLegacyColors'; const styles = StyleSheet.create({ channelListContainer: { @@ -77,11 +78,8 @@ const HeaderNetworkDownIndicator = () => null; export const ChannelListScreen: React.FC = () => { const { chatClient } = useAppContext(); const navigation = useNavigation(); - const { - theme: { - colors: { black, grey, grey_gainsboro, grey_whisper, white, white_snow }, - }, - } = useTheme(); + useTheme(); + const { black, grey, grey_gainsboro, grey_whisper, white, white_snow } = useLegacyColors(); const { setChannel } = useStreamChatContext(); const searchInputRef = useRef(null); diff --git a/examples/SampleApp/src/screens/ChannelPinnedMessagesScreen.tsx b/examples/SampleApp/src/screens/ChannelPinnedMessagesScreen.tsx index 07998b45f7..f9e96b0dfc 100644 --- a/examples/SampleApp/src/screens/ChannelPinnedMessagesScreen.tsx +++ b/examples/SampleApp/src/screens/ChannelPinnedMessagesScreen.tsx @@ -7,6 +7,7 @@ import { usePaginatedPinnedMessages } from '../hooks/usePaginatedPinnedMessages' import { Message } from '../icons/Message'; import { MessageSearchList } from '../components/MessageSearch/MessageSearchList'; import { ScreenHeader } from '../components/ScreenHeader'; +import { useLegacyColors } from '../theme/useLegacyColors'; import type { RouteProp } from '@react-navigation/native'; @@ -76,11 +77,8 @@ export const ChannelPinnedMessagesScreen: React.FC { - const { - theme: { - colors: { white_snow }, - }, - } = useTheme(); + useTheme(); + const { white_snow } = useLegacyColors(); const { loading, loadMore, messages } = usePaginatedPinnedMessages(channel); const insets = useSafeAreaInsets(); return ( @@ -105,11 +103,8 @@ export const ChannelPinnedMessagesScreen: React.FC { - const { - theme: { - colors: { black, grey, grey_gainsboro }, - }, - } = useTheme(); + useTheme(); + const { black, grey, grey_gainsboro } = useLegacyColors(); return ( diff --git a/examples/SampleApp/src/screens/DraftScreen.tsx b/examples/SampleApp/src/screens/DraftScreen.tsx index 4f8d70ed54..4fe2348e8d 100644 --- a/examples/SampleApp/src/screens/DraftScreen.tsx +++ b/examples/SampleApp/src/screens/DraftScreen.tsx @@ -5,17 +5,15 @@ import { StyleSheet, View } from 'react-native'; import { useTheme } from 'stream-chat-react-native'; import { ChatScreenHeader } from '../components/ChatScreenHeader'; import { DraftsList } from '../components/DraftsList'; +import { useLegacyColors } from '../theme/useLegacyColors'; export type DraftsScreenProps = { navigation: NativeStackNavigationProp; }; export const DraftsScreen: React.FC = () => { - const { - theme: { - colors: { white_snow }, - }, - } = useTheme(); + useTheme(); + const { white_snow } = useLegacyColors(); return ( { const { channel } = useStreamChatContext(); const { end_at, user_id } = shared_location; - const { - theme: { - colors: { accent_blue, accent_red, grey }, - }, - } = useTheme(); + useTheme(); + const { accent_blue, accent_red, grey } = useLegacyColors(); const liveLocationActive = isLiveLocationStopped ? false : end_at && new Date(end_at) > new Date(); @@ -117,11 +115,8 @@ export const MapScreen = ({ route }: MapScreenProps) => { const { channel } = useStreamChatContext(); const mapRef = useRef(null); const markerRef = useRef(null); - const { - theme: { - colors: { accent_blue }, - }, - } = useTheme(); + useTheme(); + const { accent_blue } = useLegacyColors(); const { width, height } = useWindowDimensions(); const aspect_ratio = width / height; diff --git a/examples/SampleApp/src/screens/MentionsScreen.tsx b/examples/SampleApp/src/screens/MentionsScreen.tsx index c542e0f470..72d170797d 100644 --- a/examples/SampleApp/src/screens/MentionsScreen.tsx +++ b/examples/SampleApp/src/screens/MentionsScreen.tsx @@ -13,6 +13,7 @@ import type { NativeStackNavigationProp } from '@react-navigation/native-stack'; import type { BottomTabNavigatorParamList } from '../types'; import { useAppContext } from '../context/AppContext'; import { AtMentions } from '../icons/AtMentions'; +import { useLegacyColors } from '../theme/useLegacyColors'; const styles = StyleSheet.create({ container: { @@ -30,11 +31,8 @@ const styles = StyleSheet.create({ }); const EmptyMentionsSearchIndicator = () => { - const { - theme: { - colors: { grey, grey_gainsboro }, - }, - } = useTheme(); + useTheme(); + const { grey, grey_gainsboro } = useLegacyColors(); return ( @@ -49,11 +47,8 @@ export type MentionsScreenProps = { }; export const MentionsScreen: React.FC = () => { - const { - theme: { - colors: { white_snow }, - }, - } = useTheme(); + useTheme(); + const { white_snow } = useLegacyColors(); const { chatClient } = useAppContext(); const messageFilters = useMemo( () => ({ diff --git a/examples/SampleApp/src/screens/NewDirectMessagingScreen.tsx b/examples/SampleApp/src/screens/NewDirectMessagingScreen.tsx index ffa1e1180a..8b34499f14 100644 --- a/examples/SampleApp/src/screens/NewDirectMessagingScreen.tsx +++ b/examples/SampleApp/src/screens/NewDirectMessagingScreen.tsx @@ -1,21 +1,23 @@ import React, { useEffect, useRef, useState } from 'react'; import { Platform, StyleSheet, Text, TextInput, TouchableOpacity, View } from 'react-native'; +import { useFocusEffect } from '@react-navigation/native'; import { SafeAreaView } from 'react-native-safe-area-context'; import { Channel, MessageComposer, MessageList, - User, UserAdd, useTheme, } from 'stream-chat-react-native'; +import { User } from '../icons/User'; import { RoundButton } from '../components/RoundButton'; import { ScreenHeader } from '../components/ScreenHeader'; import { SelectedUserTag } from '../components/UserSearch/SelectedUserTag'; import { UserSearchResults } from '../components/UserSearch/UserSearchResults'; import { useAppContext } from '../context/AppContext'; import { useUserSearchContext } from '../context/UserSearchContext'; +import { useLegacyColors } from '../theme/useLegacyColors'; import type { NativeStackNavigationProp } from '@react-navigation/native-stack'; import type { Channel as StreamChatChannel } from 'stream-chat'; @@ -83,11 +85,7 @@ const styles = StyleSheet.create({ }); const EmptyMessagesIndicator = () => { - const { - theme: { - colors: { grey }, - }, - } = useTheme(); + const { grey } = useLegacyColors(); return ( = navigation, }) => { const { - theme: { - colors: { accent_blue, black, grey, white }, - semantics, - }, + theme: { semantics }, } = useTheme(); + const { accent_blue, black, grey, white } = useLegacyColors(); const { chatClient } = useAppContext(); const { @@ -148,6 +144,18 @@ export const NewDirectMessagingScreen: React.FC = // When selectedUsers are changed, initiate a channel with those users as members, // and set it as a channel on current screen. const selectedUsersLength = selectedUsers.length; + + useFocusEffect( + React.useCallback(() => { + if (selectedUsersLength === 0) { + currentChannel.current = undefined; + isDraft.current = true; + setFocusOnMessageInput(false); + setFocusOnSearchInput(true); + } + }, [selectedUsersLength]), + ); + useEffect(() => { const initChannel = async () => { if (!chatClient?.user?.id) { @@ -156,7 +164,10 @@ export const NewDirectMessagingScreen: React.FC = // If there are no selected users, then set dummy channel. if (selectedUsersLength === 0) { + currentChannel.current = undefined; + isDraft.current = true; setFocusOnMessageInput(false); + setFocusOnSearchInput(true); return; } diff --git a/examples/SampleApp/src/screens/NewGroupChannelAddMemberScreen.tsx b/examples/SampleApp/src/screens/NewGroupChannelAddMemberScreen.tsx index 8897f77c36..40d9f400e0 100644 --- a/examples/SampleApp/src/screens/NewGroupChannelAddMemberScreen.tsx +++ b/examples/SampleApp/src/screens/NewGroupChannelAddMemberScreen.tsx @@ -1,12 +1,14 @@ import React from 'react'; import { FlatList, StyleSheet, TextInput, TouchableOpacity, View } from 'react-native'; -import { ArrowRight, Search, useTheme } from 'stream-chat-react-native'; +import { Search, useTheme } from 'stream-chat-react-native'; +import { RightArrow } from '../icons/RightArrow'; import { ScreenHeader } from '../components/ScreenHeader'; import { UserGridItem } from '../components/UserSearch/UserGridItem'; import { UserSearchResults } from '../components/UserSearch/UserSearchResults'; import { useAppContext } from '../context/AppContext'; import { useUserSearchContext } from '../context/UserSearchContext'; +import { useLegacyColors } from '../theme/useLegacyColors'; import type { NativeStackNavigationProp } from '@react-navigation/native-stack'; @@ -50,15 +52,9 @@ type RightArrowButtonProps = { const RightArrowButton: React.FC = (props) => { const { disabled, onPress } = props; - const { - theme: { - colors: { accent_blue }, - }, - } = useTheme(); - return ( - + ); }; @@ -76,11 +72,9 @@ export const NewGroupChannelAddMemberScreen: React.FC = ({ navigation }) const { chatClient } = useAppContext(); const { - theme: { - colors: { black, grey, white }, - semantics, - }, + theme: { semantics }, } = useTheme(); + const { black, grey, white } = useLegacyColors(); const { onChangeSearchText, onFocusInput, removeUser, reset, searchText, selectedUsers } = useUserSearchContext(); diff --git a/examples/SampleApp/src/screens/NewGroupChannelAssignNameScreen.tsx b/examples/SampleApp/src/screens/NewGroupChannelAssignNameScreen.tsx index 270ce5e532..078ec9e760 100644 --- a/examples/SampleApp/src/screens/NewGroupChannelAssignNameScreen.tsx +++ b/examples/SampleApp/src/screens/NewGroupChannelAssignNameScreen.tsx @@ -8,6 +8,7 @@ import { ScreenHeader } from '../components/ScreenHeader'; import { UserSearchResults } from '../components/UserSearch/UserSearchResults'; import { useAppContext } from '../context/AppContext'; import { useUserSearchContext } from '../context/UserSearchContext'; +import { useLegacyColors } from '../theme/useLegacyColors'; import type { NativeStackNavigationProp } from '@react-navigation/native-stack'; @@ -86,10 +87,10 @@ export const NewGroupChannelAssignNameScreen: React.FC; }; export const RemindersScreen: React.FC = () => { - const { - theme: { - colors: { white_snow }, - }, - } = useTheme(); + useTheme(); + const { white_snow } = useLegacyColors(); return ( = ({ channel }) => { const { chatClient } = useAppContext(); const name = useChannelPreviewDisplayName(channel, 30); const navigation = useNavigation>(); - const { - theme: { - colors: { black, grey, grey_whisper, white_snow }, - }, - } = useTheme(); + useTheme(); + const { black, grey, grey_whisper, white_snow } = useLegacyColors(); const displayAvatar = getChannelPreviewDisplayAvatar(channel, chatClient); @@ -133,11 +131,8 @@ const CustomPreview: React.FC = ({ channel }) => { }; const EmptyListComponent = () => { - const { - theme: { - colors: { black, grey, grey_gainsboro }, - }, - } = useTheme(); + useTheme(); + const { black, grey, grey_gainsboro } = useLegacyColors(); return ( diff --git a/examples/SampleApp/src/screens/ThreadListScreen.tsx b/examples/SampleApp/src/screens/ThreadListScreen.tsx index c62c9a63d0..d83772df50 100644 --- a/examples/SampleApp/src/screens/ThreadListScreen.tsx +++ b/examples/SampleApp/src/screens/ThreadListScreen.tsx @@ -7,6 +7,7 @@ import type { NativeStackNavigationProp } from '@react-navigation/native-stack'; import type { BottomTabNavigatorParamList } from '../types'; import { useNavigation, useIsFocused } from '@react-navigation/native'; +import { useLegacyColors } from '../theme/useLegacyColors'; const styles = StyleSheet.create({ container: { @@ -28,11 +29,8 @@ export type ThreadsScreenProps = { }; export const ThreadListScreen: React.FC = () => { - const { - theme: { - colors: { white_snow }, - }, - } = useTheme(); + useTheme(); + const { white_snow } = useLegacyColors(); const navigation = useNavigation(); const isFocused = useIsFocused(); diff --git a/examples/SampleApp/src/screens/ThreadScreen.tsx b/examples/SampleApp/src/screens/ThreadScreen.tsx index dc7347ed9f..6fe9062294 100644 --- a/examples/SampleApp/src/screens/ThreadScreen.tsx +++ b/examples/SampleApp/src/screens/ThreadScreen.tsx @@ -28,6 +28,7 @@ import { NativeStackNavigationProp } from '@react-navigation/native-stack'; import { CustomAttachmentPickerSelectionBar } from '../components/AttachmentPickerSelectionBar.tsx'; import { MessageLocation } from '../components/LocationSharing/MessageLocation.tsx'; import { useAppContext } from '../context/AppContext.ts'; +import { useLegacyColors } from '../theme/useLegacyColors'; const selector = (nextValue: ThreadState) => ({ parentMessage: nextValue.parentMessage }) as const; @@ -80,9 +81,9 @@ export const ThreadScreen: React.FC = ({ const { theme: { semantics, - colors: { white }, }, } = useTheme(); + const { white } = useLegacyColors(); const { client: chatClient } = useChatContext(); const { t } = useTranslationContext(); const { setThread } = useStreamChatContext(); diff --git a/examples/SampleApp/src/screens/UserSelectorScreen.tsx b/examples/SampleApp/src/screens/UserSelectorScreen.tsx index 49296412b4..eea0c85c13 100644 --- a/examples/SampleApp/src/screens/UserSelectorScreen.tsx +++ b/examples/SampleApp/src/screens/UserSelectorScreen.tsx @@ -17,6 +17,7 @@ import { RightArrow } from '../icons/RightArrow'; import { StreamLogo } from '../icons/StreamLogo'; import { Settings } from '../icons/Settings'; import AsyncStore from '../utils/AsyncStore'; +import { useLegacyColors } from '../theme/useLegacyColors'; import type { NativeStackNavigationProp } from '@react-navigation/native-stack'; @@ -90,10 +91,10 @@ type Props = { export const UserSelectorScreen: React.FC = ({ navigation }) => { const { theme: { - colors: { black, grey, grey_gainsboro, grey_whisper, white_snow }, semantics, }, } = useTheme(); + const { black, grey, grey_gainsboro, grey_whisper, white_snow } = useLegacyColors(); const { switchUser } = useAppContext(); const { bottom } = useSafeAreaInsets(); diff --git a/examples/SampleApp/src/theme/useLegacyColors.ts b/examples/SampleApp/src/theme/useLegacyColors.ts new file mode 100644 index 0000000000..d863326207 --- /dev/null +++ b/examples/SampleApp/src/theme/useLegacyColors.ts @@ -0,0 +1,29 @@ +import { useMemo } from 'react'; +import { useTheme } from 'stream-chat-react-native'; + +export const useLegacyColors = () => { + const { + theme: { semantics }, + } = useTheme(); + + return useMemo( + () => ({ + accent_blue: semantics.accentPrimary, + accent_red: semantics.accentError, + bg_gradient_end: semantics.backgroundCoreSurface, + bg_gradient_start: semantics.backgroundCoreSurfaceSubtle, + black: semantics.textPrimary, + button_background: semantics.buttonPrimaryBg, + button_text: semantics.buttonPrimaryTextOnAccent, + grey: semantics.textSecondary, + grey_gainsboro: semantics.borderCoreDefault, + grey_whisper: semantics.backgroundCoreSurface, + icon_background: semantics.backgroundCoreApp, + overlay: semantics.badgeBgOverlay, + white: semantics.backgroundCoreApp, + white_smoke: semantics.backgroundCoreSurfaceSubtle, + white_snow: semantics.backgroundCoreApp, + }), + [semantics], + ); +}; diff --git a/examples/SampleApp/src/utils/base.tsx b/examples/SampleApp/src/utils/base.tsx index 7c50c2bfb5..c2b6c18feb 100644 --- a/examples/SampleApp/src/utils/base.tsx +++ b/examples/SampleApp/src/utils/base.tsx @@ -1,6 +1,7 @@ import React from 'react'; import Svg, { Path, PathProps, SvgProps } from 'react-native-svg'; -import { useTheme } from 'stream-chat-react-native'; + +import { useLegacyColors } from '../theme/useLegacyColors'; export type IconProps = Partial & Omit & { @@ -25,11 +26,7 @@ export type RootPathProps = { pathOpacity?: PathProps['opacity']; }; export const RootPath: React.FC = (props) => { - const { - theme: { - colors: { black }, - }, - } = useTheme(); + const { black } = useLegacyColors(); const { d, pathFill = black, pathOpacity } = props; return ; diff --git a/package/CHANGELOG.md b/package/CHANGELOG.md index 5956c9382b..df4c3d2843 100644 --- a/package/CHANGELOG.md +++ b/package/CHANGELOG.md @@ -3,7 +3,6 @@ ## [8.1.0](https://github.com/GetStream/stream-chat-react-native/compare/v8.0.0...v8.1.0) (2025-07-09) - ### Features * add reminders implementation ([#3141](https://github.com/GetStream/stream-chat-react-native/issues/3141)) ([11c3307](https://github.com/GetStream/stream-chat-react-native/commit/11c33075954be074a702ac84a96c83b6e299b9b5)) diff --git a/package/src/components/Attachment/Audio/PlayPauseButton.tsx b/package/src/components/Attachment/Audio/PlayPauseButton.tsx index 71d9f0d0f4..5786b02bda 100644 --- a/package/src/components/Attachment/Audio/PlayPauseButton.tsx +++ b/package/src/components/Attachment/Audio/PlayPauseButton.tsx @@ -2,8 +2,8 @@ import React, { useMemo } from 'react'; import { Pressable, PressableProps, StyleProp, StyleSheet, ViewStyle } from 'react-native'; import { useTheme } from '../../../contexts'; -import { Pause } from '../../../icons/Pause'; -import { Play } from '../../../icons/Play'; +import { Pause } from '../../../icons/pause-fill'; +import { Play } from '../../../icons/play-fill'; import { primitives } from '../../../theme'; import { buttonSizes } from '../../ui/Button/constants'; diff --git a/package/src/components/Attachment/FileIcon.tsx b/package/src/components/Attachment/FileIcon.tsx index 7925de0d8c..8e9157e1d8 100644 --- a/package/src/components/Attachment/FileIcon.tsx +++ b/package/src/components/Attachment/FileIcon.tsx @@ -2,16 +2,16 @@ import React from 'react'; import { useTheme } from '../../contexts/themeContext/ThemeContext'; -import { Audio } from '../../icons/Audio'; -import { Code } from '../../icons/Code'; -import { DOC } from '../../icons/DOC'; -import { OtherFileIcon } from '../../icons/OtherFileIcon'; -import { PDF } from '../../icons/PDF'; -import { Presentation } from '../../icons/Presentation'; -import { SpreadSheet } from '../../icons/SpreadSheet'; +import { Audio } from '../../icons/filetype-audio-xl'; +import { Code } from '../../icons/filetype-code-xl'; +import { ZIP } from '../../icons/filetype-compression-xl'; +import { OtherFileIcon } from '../../icons/filetype-other-xl'; +import { PDF } from '../../icons/filetype-pdf-xl'; +import { Presentation } from '../../icons/filetype-presentation-xl'; +import { SpreadSheet } from '../../icons/filetype-spreadsheet-xl'; +import { DOC } from '../../icons/filetype-text-xl'; +import { Video } from '../../icons/filetype-video-xl'; import type { IconProps } from '../../icons/utils/base'; -import { Video } from '../../icons/Video'; -import { ZIP } from '../../icons/ZIP'; // https://www.iana.org/assignments/media-types/media-types.xhtml#audio const audioFileTypes = [ diff --git a/package/src/components/Attachment/UrlPreview/URLPreview.tsx b/package/src/components/Attachment/UrlPreview/URLPreview.tsx index 20191513ce..fc7fd729be 100644 --- a/package/src/components/Attachment/UrlPreview/URLPreview.tsx +++ b/package/src/components/Attachment/UrlPreview/URLPreview.tsx @@ -24,7 +24,7 @@ import { useMessagesContext, } from '../../../contexts/messagesContext/MessagesContext'; import { useTheme } from '../../../contexts/themeContext/ThemeContext'; -import { Link } from '../../../icons/Link'; +import { Link } from '../../../icons/link'; import { primitives } from '../../../theme'; import { FileTypes } from '../../../types/types'; import { makeImageCompatibleUrl } from '../../../utils/utils'; diff --git a/package/src/components/Attachment/UrlPreview/URLPreviewCompact.tsx b/package/src/components/Attachment/UrlPreview/URLPreviewCompact.tsx index e94e848c2f..ed84992704 100644 --- a/package/src/components/Attachment/UrlPreview/URLPreviewCompact.tsx +++ b/package/src/components/Attachment/UrlPreview/URLPreviewCompact.tsx @@ -24,7 +24,7 @@ import { useMessagesContext, } from '../../../contexts/messagesContext/MessagesContext'; import { useTheme } from '../../../contexts/themeContext/ThemeContext'; -import { Link } from '../../../icons/Link'; +import { Link } from '../../../icons/link'; import { primitives } from '../../../theme'; import { FileTypes } from '../../../types/types'; import { makeImageCompatibleUrl } from '../../../utils/utils'; diff --git a/package/src/components/AttachmentPicker/components/AttachmentMediaPicker/AttachmentPickerItem.tsx b/package/src/components/AttachmentPicker/components/AttachmentMediaPicker/AttachmentPickerItem.tsx index e546d40409..bd4971bd5f 100644 --- a/package/src/components/AttachmentPicker/components/AttachmentMediaPicker/AttachmentPickerItem.tsx +++ b/package/src/components/AttachmentPicker/components/AttachmentMediaPicker/AttachmentPickerItem.tsx @@ -13,7 +13,7 @@ import { useMessageInputContext } from '../../../../contexts/messageInputContext import { useTheme } from '../../../../contexts/themeContext/ThemeContext'; import { useTranslationContext } from '../../../../contexts/translationContext/TranslationContext'; import { useViewport } from '../../../../hooks/useViewport'; -import { Plus } from '../../../../icons/Plus'; +import { Plus } from '../../../../icons/plus'; import { NativeHandlers } from '../../../../native'; import { primitives } from '../../../../theme'; import type { File } from '../../../../types/types'; diff --git a/package/src/components/AttachmentPicker/components/AttachmentTypePickerButton.tsx b/package/src/components/AttachmentPicker/components/AttachmentTypePickerButton.tsx index 85f9dcf4bc..5c93a80c4c 100644 --- a/package/src/components/AttachmentPicker/components/AttachmentTypePickerButton.tsx +++ b/package/src/components/AttachmentPicker/components/AttachmentTypePickerButton.tsx @@ -42,7 +42,7 @@ export const AttachmentTypePickerButton = ({ }: AttachmentTypePickerButtonProps) => { const { disableAttachmentPicker } = useAttachmentPickerContext(); const ButtonIcon = useCallback( - (props: IconProps) => Icon && , + (props: IconProps) => Icon && , [Icon], ); diff --git a/package/src/components/AutoCompleteInput/AutoCompleteSuggestionCommandIcon.tsx b/package/src/components/AutoCompleteInput/AutoCompleteSuggestionCommandIcon.tsx index 1102ce917a..c14a695f1d 100644 --- a/package/src/components/AutoCompleteInput/AutoCompleteSuggestionCommandIcon.tsx +++ b/package/src/components/AutoCompleteInput/AutoCompleteSuggestionCommandIcon.tsx @@ -5,8 +5,8 @@ import { CommandVariants } from 'stream-chat'; import { useTheme } from '../../contexts/themeContext/ThemeContext'; import { Flag, GiphyIcon, Mute, Sound, UserAdd, UserDelete } from '../../icons'; -import { Imgur } from '../../icons/Imgur'; -import { Lightning } from '../../icons/Lightning'; +import { Lightning } from '../../icons/bolt'; +import { Imgur } from '../../icons/imgur'; export const SuggestionCommandIcon = ({ name }: { name: CommandVariants }) => { const { diff --git a/package/src/components/AutoCompleteInput/AutoCompleteSuggestionHeader.tsx b/package/src/components/AutoCompleteInput/AutoCompleteSuggestionHeader.tsx index ce3a9fac2a..7c117f325b 100644 --- a/package/src/components/AutoCompleteInput/AutoCompleteSuggestionHeader.tsx +++ b/package/src/components/AutoCompleteInput/AutoCompleteSuggestionHeader.tsx @@ -3,7 +3,7 @@ import { StyleSheet, Text, View } from 'react-native'; import { useTheme } from '../../contexts/themeContext/ThemeContext'; -import { Smile } from '../../icons/Smile'; +import { Smile } from '../../icons/emoji'; import { primitives } from '../../theme'; export type AutoCompleteSuggestionHeaderProps = { diff --git a/package/src/components/ChannelList/hooks/useChannelActionItems.tsx b/package/src/components/ChannelList/hooks/useChannelActionItems.tsx index decbf22cf5..d2fe6342cd 100644 --- a/package/src/components/ChannelList/hooks/useChannelActionItems.tsx +++ b/package/src/components/ChannelList/hooks/useChannelActionItems.tsx @@ -12,8 +12,8 @@ import { useIsDirectChat } from './useIsDirectChat'; import { useTheme, useTranslationContext } from '../../../contexts'; import type { TranslationContextValue } from '../../../contexts/translationContext/TranslationContext'; -import { Archive, IconProps, Mute, BlockUser, Delete } from '../../../icons'; -import { ArrowBoxLeft } from '../../../icons/ArrowBoxLeft'; +import { Archive, IconProps, Mute, BlockUser, Delete, Sound } from '../../../icons'; +import { ArrowBoxLeft } from '../../../icons/leave'; export type ChannelActionHandler = () => Promise | void; @@ -92,15 +92,18 @@ export const buildDefaultChannelActionItems: BuildDefaultChannelActionItems = ( : muteActive ? unmuteChannel : muteChannel, - Icon: (props) => ( - - ), + Icon: (props) => + muteActive ? ( + + ) : ( + + ), id: 'mute', label: isDirectChat ? muteActive diff --git a/package/src/components/ChannelPreview/ChannelPreviewMessage.tsx b/package/src/components/ChannelPreview/ChannelPreviewMessage.tsx index c6a129d240..35d043cfa2 100644 --- a/package/src/components/ChannelPreview/ChannelPreviewMessage.tsx +++ b/package/src/components/ChannelPreview/ChannelPreviewMessage.tsx @@ -21,7 +21,7 @@ import { useChatContext } from '../../contexts/chatContext/ChatContext'; import { useTheme } from '../../contexts/themeContext/ThemeContext'; import { useTranslationContext } from '../../contexts/translationContext/TranslationContext'; -import { PollIcon } from '../../icons/PollIcon'; +import { PollIcon } from '../../icons/poll'; import { primitives } from '../../theme'; import { MessageStatusTypes } from '../../utils/utils'; import { ErrorBadge } from '../ui'; diff --git a/package/src/components/ChannelPreview/ChannelSwipableWrapper.tsx b/package/src/components/ChannelPreview/ChannelSwipableWrapper.tsx index 863d4c20ec..ef36ceb737 100644 --- a/package/src/components/ChannelPreview/ChannelSwipableWrapper.tsx +++ b/package/src/components/ChannelPreview/ChannelSwipableWrapper.tsx @@ -10,10 +10,11 @@ import type { ChannelDetailsBottomSheetProps } from './ChannelDetailsBottomSheet import { useTheme } from '../../contexts'; import { useSwipeRegistryContext } from '../../contexts/swipeableContext/SwipeRegistryContext'; -import { Archive, MenuPointHorizontal, Mute } from '../../icons'; +import { Archive, MenuPointHorizontal, Mute, Sound } from '../../icons'; import { GetChannelActionItems } from '../ChannelList/hooks/useChannelActionItems'; import { useChannelActionItems } from '../ChannelList/hooks/useChannelActionItems'; import { useChannelActionItemsById } from '../ChannelList/hooks/useChannelActionItemsById'; +import { useChannelMuteActive } from '../ChannelList/hooks/useChannelMuteActive'; import { useIsDirectChat } from '../ChannelList/hooks/useIsDirectChat'; import { BottomSheetModal, @@ -53,15 +54,18 @@ export const ChannelSwipableWrapper = ({ const styles = useStyles(); const isDirectChannel = useIsDirectChat(channel); + const muteActive = useChannelMuteActive(channel); const Icon = useCallback( () => isDirectChannel ? ( + ) : muteActive ? ( + ) : ( ), - [isDirectChannel, semantics.textOnAccent], + [isDirectChannel, muteActive, semantics.textOnAccent], ); const swipableActions = useMemo(() => { diff --git a/package/src/components/ImageGallery/components/ImageGalleryFooter.tsx b/package/src/components/ImageGallery/components/ImageGalleryFooter.tsx index 4b1d994e5e..43181f12ff 100644 --- a/package/src/components/ImageGallery/components/ImageGalleryFooter.tsx +++ b/package/src/components/ImageGallery/components/ImageGalleryFooter.tsx @@ -9,7 +9,7 @@ import { useTheme } from '../../../contexts/themeContext/ThemeContext'; import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext'; import { useStateStore } from '../../../hooks/useStateStore'; import { Share as ShareIconDefault } from '../../../icons'; -import { ImageGrid } from '../../../icons/ImageGrid'; +import { ImageGrid } from '../../../icons/gallery'; import { isFileSystemAvailable, isShareImageAvailable, NativeHandlers } from '../../../native'; import { ImageGalleryState } from '../../../state-store/image-gallery-state-store'; diff --git a/package/src/components/ImageGallery/components/ImageGalleryHeader.tsx b/package/src/components/ImageGallery/components/ImageGalleryHeader.tsx index 2dc59715dd..61421c363b 100644 --- a/package/src/components/ImageGallery/components/ImageGalleryHeader.tsx +++ b/package/src/components/ImageGallery/components/ImageGalleryHeader.tsx @@ -11,7 +11,7 @@ import { useOverlayContext } from '../../../contexts/overlayContext/OverlayConte import { useTheme } from '../../../contexts/themeContext/ThemeContext'; import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext'; import { useStateStore } from '../../../hooks/useStateStore'; -import { ChevronLeft } from '../../../icons/ChevronLeft'; +import { ChevronLeft } from '../../../icons/chevron-left'; import { ImageGalleryState } from '../../../state-store/image-gallery-state-store'; import { primitives } from '../../../theme'; diff --git a/package/src/components/ImageGallery/components/ImageGalleryVideoControl.tsx b/package/src/components/ImageGallery/components/ImageGalleryVideoControl.tsx index 36501e6121..9235e23ed4 100644 --- a/package/src/components/ImageGallery/components/ImageGalleryVideoControl.tsx +++ b/package/src/components/ImageGallery/components/ImageGalleryVideoControl.tsx @@ -6,8 +6,8 @@ import type { ImageGalleryVideoControlProps } from './types'; import { useTheme } from '../../../contexts/themeContext/ThemeContext'; import { useStateStore } from '../../../hooks/useStateStore'; -import { Pause } from '../../../icons/Pause'; -import { Play } from '../../../icons/Play'; +import { Pause } from '../../../icons/pause-fill'; +import { Play } from '../../../icons/play-fill'; import { IconProps } from '../../../icons/utils/base'; import { VideoPlayerState } from '../../../state-store/video-player'; import { primitives } from '../../../theme'; diff --git a/package/src/components/Message/MessageItemView/Headers/MessagePinnedHeader.tsx b/package/src/components/Message/MessageItemView/Headers/MessagePinnedHeader.tsx index 646dd10408..99c06bcec7 100644 --- a/package/src/components/Message/MessageItemView/Headers/MessagePinnedHeader.tsx +++ b/package/src/components/Message/MessageItemView/Headers/MessagePinnedHeader.tsx @@ -8,7 +8,7 @@ import { } from '../../../../contexts/messageContext/MessageContext'; import { useTheme } from '../../../../contexts/themeContext/ThemeContext'; import { useTranslationContext } from '../../../../contexts/translationContext/TranslationContext'; -import { Pin } from '../../../../icons/Pin'; +import { Pin } from '../../../../icons/pin'; import { primitives } from '../../../../theme'; import { useShouldUseOverlayStyles } from '../../hooks/useShouldUseOverlayStyles'; diff --git a/package/src/components/Message/MessageItemView/Headers/MessageSavedForLaterHeader.tsx b/package/src/components/Message/MessageItemView/Headers/MessageSavedForLaterHeader.tsx index 7cb41a6164..658f91c4fe 100644 --- a/package/src/components/Message/MessageItemView/Headers/MessageSavedForLaterHeader.tsx +++ b/package/src/components/Message/MessageItemView/Headers/MessageSavedForLaterHeader.tsx @@ -4,7 +4,7 @@ import { StyleSheet, Text, View } from 'react-native'; import { MessageContextValue } from '../../../../contexts/messageContext/MessageContext'; import { useTheme } from '../../../../contexts/themeContext/ThemeContext'; import { useTranslationContext } from '../../../../contexts/translationContext/TranslationContext'; -import { Bookmark } from '../../../../icons/Bookmark'; +import { Bookmark } from '../../../../icons/save'; import { primitives } from '../../../../theme'; import { useShouldUseOverlayStyles } from '../../hooks/useShouldUseOverlayStyles'; diff --git a/package/src/components/Message/MessageItemView/Headers/SentToChannelHeader.tsx b/package/src/components/Message/MessageItemView/Headers/SentToChannelHeader.tsx index d890cc94cf..15e775e975 100644 --- a/package/src/components/Message/MessageItemView/Headers/SentToChannelHeader.tsx +++ b/package/src/components/Message/MessageItemView/Headers/SentToChannelHeader.tsx @@ -13,7 +13,7 @@ import { useTheme } from '../../../../contexts/themeContext/ThemeContext'; import { useThreadContext } from '../../../../contexts/threadContext/ThreadContext'; import { useTranslationContext } from '../../../../contexts/translationContext/TranslationContext'; import { useStableCallback } from '../../../../hooks'; -import { ArrowUpRight } from '../../../../icons/ArrowUpRight'; +import { ArrowUpRight } from '../../../../icons/arrow-up-right'; import { primitives } from '../../../../theme'; import { useShouldUseOverlayStyles } from '../../hooks/useShouldUseOverlayStyles'; diff --git a/package/src/components/Message/MessageItemView/MessageDeleted.tsx b/package/src/components/Message/MessageItemView/MessageDeleted.tsx index 4325d9e6c7..be907db63d 100644 --- a/package/src/components/Message/MessageItemView/MessageDeleted.tsx +++ b/package/src/components/Message/MessageItemView/MessageDeleted.tsx @@ -11,7 +11,7 @@ import { } from '../../../contexts/messagesContext/MessagesContext'; import { useTheme } from '../../../contexts/themeContext/ThemeContext'; import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext'; -import { CircleBan } from '../../../icons/CircleBan'; +import { CircleBan } from '../../../icons/no-sign'; import { components, primitives } from '../../../theme'; type MessageDeletedComponentProps = { diff --git a/package/src/components/Message/MessageItemView/MessageError.tsx b/package/src/components/Message/MessageItemView/MessageError.tsx index b7a303fa19..794f8f5b77 100644 --- a/package/src/components/Message/MessageItemView/MessageError.tsx +++ b/package/src/components/Message/MessageItemView/MessageError.tsx @@ -1,7 +1,35 @@ -import React from 'react'; +import React, { useMemo } from 'react'; +import { View, StyleSheet } from 'react-native'; + +import { useTheme } from '../../../contexts'; +import { primitives } from '../../../theme'; import { ErrorBadge } from '../../ui/Badge/ErrorBadge'; export const MessageError = () => { - return ; + const styles = useStyles(); + + return ( + + + + ); +}; + +const useStyles = () => { + const { + theme: { semantics }, + } = useTheme(); + + return useMemo( + () => + StyleSheet.create({ + wrapper: { + borderRadius: primitives.radiusMax, + borderWidth: 2, + borderColor: semantics.badgeBorder, + }, + }), + [semantics], + ); }; diff --git a/package/src/components/Message/MessageItemView/MessageStatus.tsx b/package/src/components/Message/MessageItemView/MessageStatus.tsx index 80761846c7..a4a4ea650a 100644 --- a/package/src/components/Message/MessageItemView/MessageStatus.tsx +++ b/package/src/components/Message/MessageItemView/MessageStatus.tsx @@ -7,9 +7,9 @@ import { useMessageContext, } from '../../../contexts/messageContext/MessageContext'; import { useTheme } from '../../../contexts/themeContext/ThemeContext'; -import { Check } from '../../../icons/Check'; -import { CheckAll } from '../../../icons/CheckAll'; -import { Time } from '../../../icons/Time'; +import { Check } from '../../../icons/checkmark'; +import { CheckAll } from '../../../icons/checks'; +import { Time } from '../../../icons/clock'; import { primitives } from '../../../theme'; import { MessageStatusTypes } from '../../../utils/utils'; import { useShouldUseOverlayStyles } from '../hooks/useShouldUseOverlayStyles'; diff --git a/package/src/components/Message/hooks/useMessageActions.tsx b/package/src/components/Message/hooks/useMessageActions.tsx index 345e09af5a..f2b383e1fa 100644 --- a/package/src/components/Message/hooks/useMessageActions.tsx +++ b/package/src/components/Message/hooks/useMessageActions.tsx @@ -25,8 +25,9 @@ import { Mute, Pin, Resend, + Sound, ThreadReply, - // Unpin, + Unpin, UnreadIndicator, UserDelete, } from '../../../icons'; @@ -330,8 +331,7 @@ export const useMessageActions = ({ const unpinMessage: MessageActionType = { action: onTogglePinMessage, actionType: 'unpinMessage', - // TODO: V9: This icon does not exist yet, replace the old when when we get a new one - icon: , + icon: , title: t('Unpin from Conversation'), type: 'standard', }; @@ -339,7 +339,11 @@ export const useMessageActions = ({ const muteUser: MessageActionType = { action: onMuteUser, actionType: 'muteUser', - icon: , + icon: isMuted ? ( + + ) : ( + + ), title: isMuted ? t('Unmute User') : t('Mute User'), type: 'standard', }; diff --git a/package/src/components/MessageInput/StopMessageStreamingButton.tsx b/package/src/components/MessageInput/StopMessageStreamingButton.tsx index 84f698980e..7a7261669d 100644 --- a/package/src/components/MessageInput/StopMessageStreamingButton.tsx +++ b/package/src/components/MessageInput/StopMessageStreamingButton.tsx @@ -1,8 +1,9 @@ -import React from 'react'; -import { Pressable } from 'react-native'; +import React, { useMemo } from 'react'; +import { Pressable, StyleSheet } from 'react-native'; import { useTheme } from '../../contexts/themeContext/ThemeContext'; -import { CircleStop } from '../../icons'; +import { Stop } from '../../icons'; +import { primitives } from '../../theme'; export type StopMessageStreamingButtonProps = { /** Function that opens attachment options bottom sheet */ @@ -18,17 +19,36 @@ export const StopMessageStreamingButton = (props: StopMessageStreamingButtonProp messageComposer: { stopMessageStreamingButton, stopMessageStreamingIcon }, }, } = useTheme(); + const styles = useStyles(); return ( - + ); }; +const useStyles = () => { + const { + theme: { semantics }, + } = useTheme(); + + return useMemo( + () => + StyleSheet.create({ + stopStreamingButton: { + borderWidth: 1, + borderRadius: primitives.radiusMax, + borderColor: semantics.accentPrimary, + }, + }), + [semantics], + ); +}; + StopMessageStreamingButton.displayName = 'StopMessageStreamingButton{messageComposer}'; diff --git a/package/src/components/MessageInput/__tests__/__snapshots__/AttachButton.test.js.snap b/package/src/components/MessageInput/__tests__/__snapshots__/AttachButton.test.js.snap index 1eeb6eeca7..f9aa5b1f33 100644 --- a/package/src/components/MessageInput/__tests__/__snapshots__/AttachButton.test.js.snap +++ b/package/src/components/MessageInput/__tests__/__snapshots__/AttachButton.test.js.snap @@ -133,7 +133,7 @@ exports[`AttachButton should call handleAttachButtonPress when the button is cli strokeWidth={1.5} > @@ -384,11 +389,11 @@ exports[`AttachButton should call handleAttachButtonPress when the button is cli > @@ -697,11 +692,11 @@ exports[`AttachButton should call handleAttachButtonPress when the button is cli > @@ -1284,11 +1284,11 @@ exports[`AttachButton should render a enabled AttachButton 1`] = ` > @@ -1597,11 +1587,11 @@ exports[`AttachButton should render a enabled AttachButton 1`] = ` > @@ -2184,11 +2179,11 @@ exports[`AttachButton should render an disabled AttachButton 1`] = ` > @@ -2497,11 +2482,11 @@ exports[`AttachButton should render an disabled AttachButton 1`] = ` > @@ -248,15 +240,15 @@ exports[`SendButton should render a SendButton 1`] = ` > @@ -382,11 +379,11 @@ exports[`SendButton should render a SendButton 1`] = ` > @@ -695,11 +682,11 @@ exports[`SendButton should render a SendButton 1`] = ` > @@ -1146,15 +1125,15 @@ exports[`SendButton should render a disabled SendButton 1`] = ` > @@ -1280,11 +1264,11 @@ exports[`SendButton should render a disabled SendButton 1`] = ` > @@ -1593,11 +1567,11 @@ exports[`SendButton should render a disabled SendButton 1`] = ` > ); }; diff --git a/package/src/components/MessageInput/components/AudioRecorder/AudioRecordingButton.tsx b/package/src/components/MessageInput/components/AudioRecorder/AudioRecordingButton.tsx index 576edb84f2..d646fa133c 100644 --- a/package/src/components/MessageInput/components/AudioRecorder/AudioRecordingButton.tsx +++ b/package/src/components/MessageInput/components/AudioRecorder/AudioRecordingButton.tsx @@ -19,7 +19,7 @@ import { useTheme } from '../../../../contexts/themeContext/ThemeContext'; import { useTranslationContext } from '../../../../contexts/translationContext/TranslationContext'; import { useStableCallback } from '../../../../hooks'; import { useStateStore } from '../../../../hooks/useStateStore'; -import { Mic } from '../../../../icons/Mic'; +import { Mic } from '../../../../icons/voice'; import { NativeHandlers } from '../../../../native'; import { AudioRecorderManagerState } from '../../../../state-store/audio-recorder-manager'; import { primitives } from '../../../../theme'; diff --git a/package/src/components/MessageInput/components/AudioRecorder/AudioRecordingInProgress.tsx b/package/src/components/MessageInput/components/AudioRecorder/AudioRecordingInProgress.tsx index d6322ac8ce..1ef8c1bf76 100644 --- a/package/src/components/MessageInput/components/AudioRecorder/AudioRecordingInProgress.tsx +++ b/package/src/components/MessageInput/components/AudioRecorder/AudioRecordingInProgress.tsx @@ -9,7 +9,7 @@ import { } from '../../../../contexts/messageInputContext/MessageInputContext'; import { useTheme } from '../../../../contexts/themeContext/ThemeContext'; import { useStateStore } from '../../../../hooks/useStateStore'; -import { Mic } from '../../../../icons/Mic'; +import { Mic } from '../../../../icons/voice'; import { AudioRecorderManagerState } from '../../../../state-store/audio-recorder-manager'; import { primitives } from '../../../../theme'; diff --git a/package/src/components/MessageInput/components/AudioRecorder/AudioRecordingLockIndicator.tsx b/package/src/components/MessageInput/components/AudioRecorder/AudioRecordingLockIndicator.tsx index f0c9609027..72dbb9812f 100644 --- a/package/src/components/MessageInput/components/AudioRecorder/AudioRecordingLockIndicator.tsx +++ b/package/src/components/MessageInput/components/AudioRecorder/AudioRecordingLockIndicator.tsx @@ -4,9 +4,9 @@ import { StyleProp, StyleSheet, ViewStyle } from 'react-native'; import Animated, { LinearTransition } from 'react-native-reanimated'; import { useTheme } from '../../../../contexts/themeContext/ThemeContext'; -import { ChevronTop } from '../../../../icons/ChevronTop'; -import { Lock } from '../../../../icons/Lock'; -import { Unlock } from '../../../../icons/Unlock'; +import { ChevronTop } from '../../../../icons/chevron-down'; +import { Lock } from '../../../../icons/lock'; +import { Unlock } from '../../../../icons/unlock'; import { AudioRecorderManagerState } from '../../../../state-store/audio-recorder-manager'; import { primitives } from '../../../../theme'; diff --git a/package/src/components/MessageInput/components/AudioRecorder/AudioRecordingPreview.tsx b/package/src/components/MessageInput/components/AudioRecorder/AudioRecordingPreview.tsx index c048703b11..ae0fc18fb6 100644 --- a/package/src/components/MessageInput/components/AudioRecorder/AudioRecordingPreview.tsx +++ b/package/src/components/MessageInput/components/AudioRecorder/AudioRecordingPreview.tsx @@ -9,8 +9,8 @@ import { useStableCallback } from '../../../../hooks'; import { useAudioPlayer } from '../../../../hooks/useAudioPlayer'; import { useStateStore } from '../../../../hooks/useStateStore'; -import { Pause } from '../../../../icons/Pause'; -import { Play } from '../../../../icons/Play'; +import { Pause } from '../../../../icons/pause-fill'; +import { Play } from '../../../../icons/play-fill'; import { AudioPlayerState } from '../../../../state-store/audio-player'; import { AudioRecorderManagerState } from '../../../../state-store/audio-recorder-manager'; import { primitives } from '../../../../theme'; diff --git a/package/src/components/MessageInput/components/InputButtons/AttachButton.tsx b/package/src/components/MessageInput/components/InputButtons/AttachButton.tsx index 3f22f62d96..1466b2db6a 100644 --- a/package/src/components/MessageInput/components/InputButtons/AttachButton.tsx +++ b/package/src/components/MessageInput/components/InputButtons/AttachButton.tsx @@ -10,7 +10,7 @@ import { useMessageInputContext, } from '../../../../contexts/messageInputContext/MessageInputContext'; import { useStableCallback } from '../../../../hooks'; -import { Plus } from '../../../../icons/Plus'; +import { Plus } from '../../../../icons/plus'; import { Button } from '../../../ui/'; type AttachButtonPropsWithContext = Pick & diff --git a/package/src/components/MessageInput/components/LinkPreviewList.tsx b/package/src/components/MessageInput/components/LinkPreviewList.tsx index cf526745fb..9b379bbdc1 100644 --- a/package/src/components/MessageInput/components/LinkPreviewList.tsx +++ b/package/src/components/MessageInput/components/LinkPreviewList.tsx @@ -10,7 +10,7 @@ import { LinkPreviewsManager } from 'stream-chat'; import { AttachmentRemoveControl } from './AttachmentPreview/AttachmentRemoveControl'; import { useChatContext, useMessageComposer, useTheme } from '../../../contexts'; -import { Link } from '../../../icons/Link'; +import { Link } from '../../../icons/link'; import { components, primitives } from '../../../theme'; import { useLinkPreviews } from '../hooks/useLinkPreviews'; diff --git a/package/src/components/MessageInput/components/OutputButtons/EditButton.tsx b/package/src/components/MessageInput/components/OutputButtons/EditButton.tsx index 4fbd16500a..44a0d4be90 100644 --- a/package/src/components/MessageInput/components/OutputButtons/EditButton.tsx +++ b/package/src/components/MessageInput/components/OutputButtons/EditButton.tsx @@ -4,7 +4,7 @@ import { MessageInputContextValue, useMessageInputContext, } from '../../../../contexts/messageInputContext/MessageInputContext'; -import { Tick } from '../../../../icons/Tick'; +import { Tick } from '../../../../icons/checkmark'; import { Button } from '../../../ui'; export type EditButtonProps = Partial> & { diff --git a/package/src/components/MessageInput/components/OutputButtons/SendButton.tsx b/package/src/components/MessageInput/components/OutputButtons/SendButton.tsx index 4981413b67..38a1bc8403 100644 --- a/package/src/components/MessageInput/components/OutputButtons/SendButton.tsx +++ b/package/src/components/MessageInput/components/OutputButtons/SendButton.tsx @@ -4,7 +4,7 @@ import { MessageInputContextValue, useMessageInputContext, } from '../../../../contexts/messageInputContext/MessageInputContext'; -import { SendRight } from '../../../../icons/SendRight'; +import { SendRight } from '../../../../icons/send'; import { Button } from '../../../ui'; export type SendButtonProps = Partial> & { diff --git a/package/src/components/MessageInput/components/OutputButtons/index.tsx b/package/src/components/MessageInput/components/OutputButtons/index.tsx index e3b6b231ed..37b2cf9845 100644 --- a/package/src/components/MessageInput/components/OutputButtons/index.tsx +++ b/package/src/components/MessageInput/components/OutputButtons/index.tsx @@ -90,7 +90,7 @@ export const OutputButtonsWithContext = (props: OutputButtonsWithContextProps) = diff --git a/package/src/components/MessageList/ScrollToBottomButton.tsx b/package/src/components/MessageList/ScrollToBottomButton.tsx index d60ba57196..284f857842 100644 --- a/package/src/components/MessageList/ScrollToBottomButton.tsx +++ b/package/src/components/MessageList/ScrollToBottomButton.tsx @@ -4,7 +4,7 @@ import { StyleSheet, View } from 'react-native'; import Animated, { ZoomIn, ZoomOut } from 'react-native-reanimated'; import { useTheme } from '../../contexts/themeContext/ThemeContext'; -import { Down } from '../../icons/Down'; +import { Down } from '../../icons/arrow-up'; import { primitives } from '../../theme'; import { BadgeNotification } from '../ui'; import { Button } from '../ui/Button'; diff --git a/package/src/components/MessageList/UnreadMessagesNotification.tsx b/package/src/components/MessageList/UnreadMessagesNotification.tsx index b64fc3f95d..118334e785 100644 --- a/package/src/components/MessageList/UnreadMessagesNotification.tsx +++ b/package/src/components/MessageList/UnreadMessagesNotification.tsx @@ -8,8 +8,8 @@ import { import { useTheme } from '../../contexts/themeContext/ThemeContext'; import { useTranslationContext } from '../../contexts/translationContext/TranslationContext'; import { useStateStore } from '../../hooks/useStateStore'; -import { ArrowUp } from '../../icons/ArrowUp'; -import { NewClose } from '../../icons/NewClose'; +import { ArrowUp } from '../../icons/arrow-up'; +import { NewClose } from '../../icons/xmark'; import { ChannelUnreadStateStoreType } from '../../state-store/channel-unread-state'; import { primitives } from '../../theme'; import { Button } from '../ui'; diff --git a/package/src/components/MessageList/__tests__/__snapshots__/ScrollToBottomButton.test.js.snap b/package/src/components/MessageList/__tests__/__snapshots__/ScrollToBottomButton.test.js.snap index e08eca815d..e4b8d29aa5 100644 --- a/package/src/components/MessageList/__tests__/__snapshots__/ScrollToBottomButton.test.js.snap +++ b/package/src/components/MessageList/__tests__/__snapshots__/ScrollToBottomButton.test.js.snap @@ -144,13 +144,23 @@ exports[`ScrollToBottomButton should render the message notification and match s strokeWidth={1.5} > @@ -2432,15 +2424,15 @@ exports[`Thread should match thread snapshot 1`] = ` > @@ -2566,11 +2563,11 @@ exports[`Thread should match thread snapshot 1`] = ` > @@ -2879,11 +2866,11 @@ exports[`Thread should match thread snapshot 1`] = ` > diff --git a/package/src/components/UIComponents/Spinner.tsx b/package/src/components/UIComponents/Spinner.tsx index 831761fb9a..51546e8cc0 100644 --- a/package/src/components/UIComponents/Spinner.tsx +++ b/package/src/components/UIComponents/Spinner.tsx @@ -9,7 +9,7 @@ import Animated, { } from 'react-native-reanimated'; import { useTheme } from '../../contexts/themeContext/ThemeContext'; -import { Loading } from '../../icons/Loading'; +import { Loading } from '../../icons/loading'; export type SpinnerProps = { height?: number; @@ -46,7 +46,12 @@ export const Spinner = (props: SpinnerProps) => { return ( - + ); }; diff --git a/package/src/components/ui/Avatar/AvatarGroup.tsx b/package/src/components/ui/Avatar/AvatarGroup.tsx index 99ab1e9770..4c3f00109d 100644 --- a/package/src/components/ui/Avatar/AvatarGroup.tsx +++ b/package/src/components/ui/Avatar/AvatarGroup.tsx @@ -10,7 +10,7 @@ import { iconSizes } from './constants'; import { UserAvatar, UserAvatarProps } from './UserAvatar'; import { useTheme } from '../../../contexts/themeContext/ThemeContext'; -import { PeopleIcon } from '../../../icons/PeopleIcon'; +import { PeopleIcon } from '../../../icons/users'; import { primitives } from '../../../theme'; import { BadgeCount, BadgeCountProps, OnlineIndicator, OnlineIndicatorProps } from '../Badge'; diff --git a/package/src/components/ui/Avatar/UserAvatar.tsx b/package/src/components/ui/Avatar/UserAvatar.tsx index 2c0f60de77..c433395f4d 100644 --- a/package/src/components/ui/Avatar/UserAvatar.tsx +++ b/package/src/components/ui/Avatar/UserAvatar.tsx @@ -8,7 +8,7 @@ import { Avatar, AvatarProps } from './Avatar'; import { fontSizes, iconSizes, indicatorSizes, numberOfInitials } from './constants'; import { useTheme } from '../../../contexts/themeContext/ThemeContext'; -import { PeopleIcon } from '../../../icons/PeopleIcon'; +import { PeopleIcon } from '../../../icons/users'; import { getInitialsFromName, hashStringToNumber } from '../../../utils/utils'; import { OnlineIndicator } from '../Badge'; diff --git a/package/src/components/ui/Badge/ErrorBadge.tsx b/package/src/components/ui/Badge/ErrorBadge.tsx index 05112b382c..02de2a4fa0 100644 --- a/package/src/components/ui/Badge/ErrorBadge.tsx +++ b/package/src/components/ui/Badge/ErrorBadge.tsx @@ -2,7 +2,7 @@ import React, { useMemo } from 'react'; import { StyleProp, StyleSheet, View, ViewProps, ViewStyle } from 'react-native'; import { useTheme } from '../../../contexts/themeContext/ThemeContext'; -import { Exclamation } from '../../../icons/Exclamation'; +import { Exclamation } from '../../../icons/exclamation-mark-fill'; import { primitives } from '../../../theme'; const sizes = { @@ -20,21 +20,6 @@ const sizes = { }, }; -const iconSizes = { - xs: { - height: 8, - width: 2, - }, - sm: { - height: 9, - width: 2, - }, - md: { - height: 11, - width: 3, - }, -}; - export type ErrorBadgeProps = ViewProps & { /** * The size of the badge @@ -59,8 +44,8 @@ export const ErrorBadge = (props: ErrorBadgeProps) => { return ( diff --git a/package/src/components/ui/Badge/GiphyBadge.tsx b/package/src/components/ui/Badge/GiphyBadge.tsx index 2e38eebc12..7cca100bd2 100644 --- a/package/src/components/ui/Badge/GiphyBadge.tsx +++ b/package/src/components/ui/Badge/GiphyBadge.tsx @@ -2,7 +2,7 @@ import React, { useMemo } from 'react'; import { StyleSheet, Text, View } from 'react-native'; import { useTheme } from '../../../contexts/themeContext/ThemeContext'; -import { Giphy } from '../../../icons/Giphy'; +import { Giphy } from '../../../icons/giphy'; import { primitives } from '../../../theme'; export const GiphyBadge = () => { diff --git a/package/src/components/ui/Badge/ImgurBadge.tsx b/package/src/components/ui/Badge/ImgurBadge.tsx index 124de4763d..b78d1e7aba 100644 --- a/package/src/components/ui/Badge/ImgurBadge.tsx +++ b/package/src/components/ui/Badge/ImgurBadge.tsx @@ -2,7 +2,7 @@ import React, { useMemo } from 'react'; import { StyleSheet, Text, View } from 'react-native'; import { useTheme } from '../../../contexts/themeContext/ThemeContext'; -import { Imgur } from '../../../icons/Imgur'; +import { Imgur } from '../../../icons/imgur'; import { primitives } from '../../../theme'; export const ImgurBadge = () => { diff --git a/package/src/components/ui/Badge/RetryBadge.tsx b/package/src/components/ui/Badge/RetryBadge.tsx index 2b6876bca3..49e7d228b8 100644 --- a/package/src/components/ui/Badge/RetryBadge.tsx +++ b/package/src/components/ui/Badge/RetryBadge.tsx @@ -2,7 +2,7 @@ import React, { useMemo } from 'react'; import { StyleProp, StyleSheet, View, ViewProps, ViewStyle } from 'react-native'; import { useTheme } from '../../../contexts/themeContext/ThemeContext'; -import { RotateCircle } from '../../../icons/RotateCircle'; +import { Reload } from '../../../icons/refresh'; import { primitives } from '../../../theme'; const sizes = { @@ -50,7 +50,7 @@ export const RetryBadge = (props: RetryBadgeProps) => { const styles = useStyles(); return ( - - {LeftIcon ? ( - ({ diff --git a/package/src/components/ui/Input/Input.tsx b/package/src/components/ui/Input/Input.tsx index e63dad68d2..5ce67a2127 100644 --- a/package/src/components/ui/Input/Input.tsx +++ b/package/src/components/ui/Input/Input.tsx @@ -13,8 +13,8 @@ import { } from 'react-native'; import { useTheme } from '../../../contexts'; -import { Checkmark } from '../../../icons/Checkmark'; -import { InfoTooltip } from '../../../icons/InfoTooltip'; +import { Checkmark } from '../../../icons/checkmark-1'; +import { InfoTooltip } from '../../../icons/info'; import { primitives } from '../../../theme'; import { IconRenderer } from '../Button'; diff --git a/package/src/components/ui/VideoPlayIndicator.tsx b/package/src/components/ui/VideoPlayIndicator.tsx index 0c30dd0f67..da8258d598 100644 --- a/package/src/components/ui/VideoPlayIndicator.tsx +++ b/package/src/components/ui/VideoPlayIndicator.tsx @@ -2,7 +2,7 @@ import React, { useMemo } from 'react'; import { StyleSheet, View } from 'react-native'; import { useTheme } from '../../contexts/themeContext/ThemeContext'; -import { Play } from '../../icons/Play'; +import { Play } from '../../icons/play-fill'; import { primitives } from '../../theme'; const sizes = { diff --git a/package/src/hooks/messagePreview/useMessagePreviewIcon.tsx b/package/src/hooks/messagePreview/useMessagePreviewIcon.tsx index 88d40b5375..3136cc8f07 100644 --- a/package/src/hooks/messagePreview/useMessagePreviewIcon.tsx +++ b/package/src/hooks/messagePreview/useMessagePreviewIcon.tsx @@ -2,14 +2,14 @@ import { DraftMessage, LocalMessage, MessageResponse } from 'stream-chat'; import { useGroupedAttachments } from '../../hooks/messagePreview/useGroupedAttachments'; -import { CircleBan } from '../../icons/CircleBan'; -import { File } from '../../icons/File'; -import { Link } from '../../icons/Link'; -import { MapPin } from '../../icons/MapPin'; -import { Mic } from '../../icons/Mic'; -import { PhotoIcon } from '../../icons/PhotoIcon'; -import { PollIcon } from '../../icons/PollIcon'; -import { VideoIcon } from '../../icons/VideoIcon'; +import { File } from '../../icons/file'; +import { PhotoIcon } from '../../icons/image'; +import { Link } from '../../icons/link'; +import { MapPin } from '../../icons/location'; +import { CircleBan } from '../../icons/no-sign'; +import { PollIcon } from '../../icons/poll'; +import { VideoIcon } from '../../icons/video'; +import { Mic } from '../../icons/voice'; import { FileTypes } from '../../types/types'; export const useMessagePreviewIcon = ({ diff --git a/package/src/icons/Archive.tsx b/package/src/icons/Archive.tsx deleted file mode 100644 index c997610b1d..0000000000 --- a/package/src/icons/Archive.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import React from 'react'; -import Svg, { Path } from 'react-native-svg'; - -import { IconProps } from './utils/base'; - -export const Archive: React.FC = (props) => ( - - - -); diff --git a/package/src/icons/ArrowRight.tsx b/package/src/icons/ArrowRight.tsx deleted file mode 100644 index 5ee7f9bb26..0000000000 --- a/package/src/icons/ArrowRight.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; - -import { IconProps, RootPath, RootSvg } from './utils/base'; - -export const ArrowRight = (props: IconProps) => ( - - - - - -); diff --git a/package/src/icons/ArrowShareLeft.tsx b/package/src/icons/ArrowShareLeft.tsx deleted file mode 100644 index 1a39794f84..0000000000 --- a/package/src/icons/ArrowShareLeft.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import React from 'react'; - -import { Path, Svg } from 'react-native-svg'; - -import { IconProps } from './utils/base'; - -export const ArrowShareLeft = ({ height, width, ...rest }: IconProps) => ( - - - -); diff --git a/package/src/icons/ArrowUp.tsx b/package/src/icons/ArrowUp.tsx deleted file mode 100644 index e145126f94..0000000000 --- a/package/src/icons/ArrowUp.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import React from 'react'; -import Svg, { Path } from 'react-native-svg'; - -import { IconProps } from './utils/base'; - -export const ArrowUp = ({ height, width, ...rest }: IconProps) => ( - - - -); diff --git a/package/src/icons/ArrowUpRight.tsx b/package/src/icons/ArrowUpRight.tsx deleted file mode 100644 index d7cfd21239..0000000000 --- a/package/src/icons/ArrowUpRight.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react'; -import Svg, { Path } from 'react-native-svg'; - -import { IconProps } from './utils/base'; - -export const ArrowUpRight = ({ height = 16, width = 16, ...rest }: IconProps) => { - return ( - - - - ); -}; diff --git a/package/src/icons/Bell.tsx b/package/src/icons/Bell.tsx deleted file mode 100644 index 095472f198..0000000000 --- a/package/src/icons/Bell.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react'; -import Svg, { Path } from 'react-native-svg'; - -import { IconProps } from './utils/base'; - -export const Bell = ({ height = 16, width = 16, ...rest }: IconProps) => { - return ( - - - - ); -}; diff --git a/package/src/icons/BlockUser.tsx b/package/src/icons/BlockUser.tsx deleted file mode 100644 index 08504c5dcc..0000000000 --- a/package/src/icons/BlockUser.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; -import Svg, { Path } from 'react-native-svg'; - -import { IconProps } from './utils/base'; - -export const BlockUser = (props: IconProps) => { - return ( - - - - ); -}; diff --git a/package/src/icons/Bookmark.tsx b/package/src/icons/Bookmark.tsx deleted file mode 100644 index b2c6766bf3..0000000000 --- a/package/src/icons/Bookmark.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; - -import { Path, Svg } from 'react-native-svg'; - -import { IconProps } from './utils/base'; - -export const Bookmark = ({ height, width, ...rest }: IconProps) => ( - - - -); diff --git a/package/src/icons/Camera.tsx b/package/src/icons/Camera.tsx deleted file mode 100644 index 210ebd6953..0000000000 --- a/package/src/icons/Camera.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react'; - -import Svg, { Path } from 'react-native-svg'; - -import { IconProps } from './utils/base'; - -export const Camera = (props: IconProps) => ( - - - - -); diff --git a/package/src/icons/Check.tsx b/package/src/icons/Check.tsx deleted file mode 100644 index e932ddae5b..0000000000 --- a/package/src/icons/Check.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; - -import Svg, { Path } from 'react-native-svg'; - -import { IconProps } from './utils/base'; - -export const Check = ({ height, width, ...rest }: IconProps) => ( - - - -); diff --git a/package/src/icons/CheckAll.tsx b/package/src/icons/CheckAll.tsx deleted file mode 100644 index 38c66d8a6f..0000000000 --- a/package/src/icons/CheckAll.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; - -import Svg, { Path } from 'react-native-svg'; - -import { IconProps } from './utils/base'; - -export const CheckAll = ({ height, width, ...rest }: IconProps) => ( - - - -); diff --git a/package/src/icons/Checkmark.tsx b/package/src/icons/Checkmark.tsx deleted file mode 100644 index 50122a6dff..0000000000 --- a/package/src/icons/Checkmark.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; - -import { Path, Svg } from 'react-native-svg'; - -import { IconProps } from './utils/base'; - -export const Checkmark = ({ height, width, ...rest }: IconProps) => ( - - - -); diff --git a/package/src/icons/ChevronLeft.tsx b/package/src/icons/ChevronLeft.tsx deleted file mode 100644 index 151c67e970..0000000000 --- a/package/src/icons/ChevronLeft.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; - -import { Path, Svg } from 'react-native-svg'; - -import { IconProps } from './utils/base'; - -export const ChevronLeft = ({ height, width, ...rest }: IconProps) => ( - - - -); diff --git a/package/src/icons/CircleBan.tsx b/package/src/icons/CircleBan.tsx deleted file mode 100644 index 36bbabc37c..0000000000 --- a/package/src/icons/CircleBan.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import React from 'react'; - -import { Path, Svg } from 'react-native-svg'; - -import { IconProps } from './utils/base'; - -export const CircleBan = ({ height, width, ...rest }: IconProps) => ( - - - -); diff --git a/package/src/icons/CircleMinus.tsx b/package/src/icons/CircleMinus.tsx deleted file mode 100644 index d14a6d1009..0000000000 --- a/package/src/icons/CircleMinus.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import React from 'react'; - -import { Path, Svg } from 'react-native-svg'; - -import { IconProps } from './utils/base'; - -export const CircleMinus = ({ height, width, ...rest }: IconProps) => ( - - - -); diff --git a/package/src/icons/CircleStop.tsx b/package/src/icons/CircleStop.tsx deleted file mode 100644 index c69a47da2b..0000000000 --- a/package/src/icons/CircleStop.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react'; - -import { Path, Svg } from 'react-native-svg'; - -import { IconProps } from './utils/base'; - -type Props = IconProps & { - size: number; -}; - -export const CircleStop = ({ size, ...rest }: Props) => ( - - - -); diff --git a/package/src/icons/Close.tsx b/package/src/icons/Close.tsx deleted file mode 100644 index 77763dd95d..0000000000 --- a/package/src/icons/Close.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import React from 'react'; - -import { IconProps, RootPath, RootSvg } from './utils/base'; - -export const Close = (props: IconProps) => ( - - - -); diff --git a/package/src/icons/CommandsIcon.tsx b/package/src/icons/CommandsIcon.tsx deleted file mode 100644 index 3d507072b1..0000000000 --- a/package/src/icons/CommandsIcon.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import React from 'react'; - -import Svg, { Path } from 'react-native-svg'; - -import { IconProps } from './utils/base'; - -export const CommandsIcon = (props: IconProps) => ( - - - -); diff --git a/package/src/icons/Copy.tsx b/package/src/icons/Copy.tsx deleted file mode 100644 index 670d0a7a18..0000000000 --- a/package/src/icons/Copy.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; - -import Svg, { Path } from 'react-native-svg'; - -import { IconProps } from './utils/base'; - -export const Copy = (props: IconProps) => ( - - - -); diff --git a/package/src/icons/Cross.tsx b/package/src/icons/Cross.tsx deleted file mode 100644 index 761dec4ff8..0000000000 --- a/package/src/icons/Cross.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import React from 'react'; - -import { Path, Svg } from 'react-native-svg'; - -import { IconProps } from './utils/base'; - -export const Cross = ({ height, width, ...rest }: IconProps) => ( - - - -); diff --git a/package/src/icons/CurveLineLeftUp.tsx b/package/src/icons/CurveLineLeftUp.tsx deleted file mode 100644 index 62defd1caa..0000000000 --- a/package/src/icons/CurveLineLeftUp.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import React from 'react'; - -import Svg, { Path } from 'react-native-svg'; - -import { IconProps } from './utils/base'; - -export const CurveLineLeftUp = (props: IconProps) => ( - - - -); diff --git a/package/src/icons/Delete.tsx b/package/src/icons/Delete.tsx deleted file mode 100644 index 8ee1613715..0000000000 --- a/package/src/icons/Delete.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import React from 'react'; - -import Svg, { Path } from 'react-native-svg'; - -import { IconProps } from './utils/base'; - -export const Delete = ({ stroke, ...rest }: IconProps) => ( - - - -); diff --git a/package/src/icons/DotGrid.tsx b/package/src/icons/DotGrid.tsx deleted file mode 100644 index e4db359540..0000000000 --- a/package/src/icons/DotGrid.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import React from 'react'; - -import { Path, Svg } from 'react-native-svg'; - -import { IconProps } from './utils/base'; - -export const DotGrid = ({ height, width, ...rest }: IconProps) => ( - - - -); diff --git a/package/src/icons/Down.tsx b/package/src/icons/Down.tsx deleted file mode 100644 index ebfc919c47..0000000000 --- a/package/src/icons/Down.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; - -import { Path, Svg } from 'react-native-svg'; - -import { IconProps } from './utils/base'; - -export const Down = ({ height, width, ...rest }: IconProps) => ( - - - -); diff --git a/package/src/icons/DownloadArrow.tsx b/package/src/icons/DownloadArrow.tsx deleted file mode 100644 index 905ef7cbb4..0000000000 --- a/package/src/icons/DownloadArrow.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import React from 'react'; - -import { IconProps, RootPath, RootSvg } from './utils/base'; - -export const DownloadArrow = (props: IconProps) => ( - - - -); diff --git a/package/src/icons/Edit.tsx b/package/src/icons/Edit.tsx deleted file mode 100644 index 90d4117cd3..0000000000 --- a/package/src/icons/Edit.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import React from 'react'; - -import Svg, { Path } from 'react-native-svg'; - -import { IconProps } from './utils/base'; - -export const Edit = ({ height, width, ...rest }: IconProps) => ( - - - - -); diff --git a/package/src/icons/ErrorCircle.tsx b/package/src/icons/ErrorCircle.tsx deleted file mode 100644 index 358abc8f35..0000000000 --- a/package/src/icons/ErrorCircle.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import React from 'react'; - -import Svg, { Path } from 'react-native-svg'; - -import { IconProps } from './utils/base'; - -export const ErrorCircle = ({ height, width, ...rest }: IconProps) => ( - - - -); diff --git a/package/src/icons/Exclamation.tsx b/package/src/icons/Exclamation.tsx deleted file mode 100644 index b11fdd53a0..0000000000 --- a/package/src/icons/Exclamation.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react'; - -import { Path, Svg } from 'react-native-svg'; - -import { IconProps } from './utils/base'; - -export const Exclamation = ({ height, width, ...rest }: IconProps) => ( - - - - -); diff --git a/package/src/icons/ExclamationCircle.tsx b/package/src/icons/ExclamationCircle.tsx deleted file mode 100644 index d50e5f3fc6..0000000000 --- a/package/src/icons/ExclamationCircle.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import React from 'react'; - -import { Path, Svg } from 'react-native-svg'; - -import { IconProps } from './utils/base'; - -export const ExclamationCircle = ({ height, width, ...rest }: IconProps) => ( - - - -); diff --git a/package/src/icons/Eye.tsx b/package/src/icons/Eye.tsx deleted file mode 100644 index ca4cc38a78..0000000000 --- a/package/src/icons/Eye.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import React from 'react'; - -import { IconProps, RootPath, RootSvg } from './utils/base'; - -export const Eye = (props: IconProps) => ( - - - -); diff --git a/package/src/icons/File.tsx b/package/src/icons/File.tsx deleted file mode 100644 index f543f6ad6a..0000000000 --- a/package/src/icons/File.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import React from 'react'; - -import { Path, Svg } from 'react-native-svg'; - -import { IconProps } from './utils/base'; - -export const File = ({ height, width, ...rest }: IconProps) => ( - - - -); diff --git a/package/src/icons/FilePickerIcon.tsx b/package/src/icons/FilePickerIcon.tsx deleted file mode 100644 index 06055c879d..0000000000 --- a/package/src/icons/FilePickerIcon.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import React from 'react'; - -import Svg, { Path } from 'react-native-svg'; - -import { IconProps } from './utils/base'; - -export const FilePickerIcon = (props: IconProps) => ( - - - -); diff --git a/package/src/icons/Flag.tsx b/package/src/icons/Flag.tsx deleted file mode 100644 index 505631add3..0000000000 --- a/package/src/icons/Flag.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; - -import Svg, { Path } from 'react-native-svg'; - -import { IconProps } from './utils/base'; - -export const Flag = (props: IconProps) => ( - - - -); diff --git a/package/src/icons/Giphy.tsx b/package/src/icons/Giphy.tsx deleted file mode 100644 index 94576d2f8e..0000000000 --- a/package/src/icons/Giphy.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import React from 'react'; - -import { Path, Svg } from 'react-native-svg'; - -import { IconProps } from './utils/base'; - -export const Giphy = ({ height, width, ...rest }: IconProps) => ( - - - - - - - - - - -); diff --git a/package/src/icons/GiphyIcon.tsx b/package/src/icons/GiphyIcon.tsx deleted file mode 100644 index c28f6875e7..0000000000 --- a/package/src/icons/GiphyIcon.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import React from 'react'; - -import Svg, { Path } from 'react-native-svg'; - -import { IconProps } from './utils/base'; - -export const GiphyIcon = (props: IconProps) => ( - - - - - - - - - - -); diff --git a/package/src/icons/GiphyLightning.tsx b/package/src/icons/GiphyLightning.tsx deleted file mode 100644 index 4b8c02ce2d..0000000000 --- a/package/src/icons/GiphyLightning.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react'; - -import Svg, { Path } from 'react-native-svg'; - -import { IconProps } from './utils/base'; - -type Props = IconProps & { - size: number; -}; - -export const GiphyLightning = ({ size = 16, ...rest }: Props) => ( - - - -); diff --git a/package/src/icons/Grid.tsx b/package/src/icons/Grid.tsx deleted file mode 100644 index 4584ae45b9..0000000000 --- a/package/src/icons/Grid.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import React from 'react'; - -import { IconProps, RootPath, RootSvg } from './utils/base'; - -export const Grid = (props: IconProps) => ( - - - -); diff --git a/package/src/icons/GroupIcon.tsx b/package/src/icons/GroupIcon.tsx deleted file mode 100644 index 49c12eef76..0000000000 --- a/package/src/icons/GroupIcon.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; - -import { Path, Svg } from 'react-native-svg'; - -import { IconProps } from './utils/base'; - -export const GroupIcon = ({ height, width, ...rest }: IconProps) => ( - - - -); diff --git a/package/src/icons/ImageGrid.tsx b/package/src/icons/ImageGrid.tsx deleted file mode 100644 index c79cd509f1..0000000000 --- a/package/src/icons/ImageGrid.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import React from 'react'; - -import { Path, Svg } from 'react-native-svg'; - -import { IconProps } from './utils/base'; - -export const ImageGrid = ({ height, width, ...rest }: IconProps) => ( - - - - - - -); diff --git a/package/src/icons/Imgur.tsx b/package/src/icons/Imgur.tsx deleted file mode 100644 index 14c8a14979..0000000000 --- a/package/src/icons/Imgur.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import React from 'react'; - -import { Path, Rect, Svg } from 'react-native-svg'; - -import { IconProps } from './utils/base'; - -export const Imgur = ({ height, width, ...rest }: IconProps) => ( - - - - - -); diff --git a/package/src/icons/InfoTooltip.tsx b/package/src/icons/InfoTooltip.tsx deleted file mode 100644 index e7715e6de1..0000000000 --- a/package/src/icons/InfoTooltip.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import React from 'react'; - -import { Path, Svg } from 'react-native-svg'; - -import { IconProps } from './utils/base'; - -export const InfoTooltip = ({ height, width, ...rest }: IconProps) => ( - - - -); diff --git a/package/src/icons/Lightning.tsx b/package/src/icons/Lightning.tsx deleted file mode 100644 index 4f398808f9..0000000000 --- a/package/src/icons/Lightning.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import React from 'react'; - -import { Path, Svg } from 'react-native-svg'; - -import { IconProps } from './utils/base'; - -export const Lightning = ({ height, width, ...rest }: IconProps) => ( - - - -); diff --git a/package/src/icons/Link.tsx b/package/src/icons/Link.tsx deleted file mode 100644 index 4de2c85f1a..0000000000 --- a/package/src/icons/Link.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import React from 'react'; - -import { Path, Svg } from 'react-native-svg'; - -import { IconProps } from './utils/base'; - -export const Link = ({ height, width, ...rest }: IconProps) => ( - - - -); diff --git a/package/src/icons/Loading.tsx b/package/src/icons/Loading.tsx deleted file mode 100644 index 5aef623d9d..0000000000 --- a/package/src/icons/Loading.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import React from 'react'; -import { Defs, LinearGradient, Stop, StopProps } from 'react-native-svg'; - -import { IconProps, RootPath, RootSvg } from './utils/base'; - -type LoadingProps = IconProps & - Partial> & { - startColor?: StopProps['stopColor']; - stopColor?: StopProps['stopColor']; - }; - -export const Loading = (props: LoadingProps) => { - const { - height = 16, - startColor = '#0169F6', - stopColor = '#006CFF', - stopOpacity = 0.01, - viewBox = '0 0 16 16', - width = 16, - } = props; - return ( - - - - - - - - - - ); -}; diff --git a/package/src/icons/Lock.tsx b/package/src/icons/Lock.tsx deleted file mode 100644 index 5cb224fff8..0000000000 --- a/package/src/icons/Lock.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; - -import { Path, Svg } from 'react-native-svg'; - -import { IconProps } from './utils/base'; - -export const Lock = ({ height, width, ...rest }: IconProps) => ( - - - -); diff --git a/package/src/icons/Logo.tsx b/package/src/icons/Logo.tsx deleted file mode 100644 index b9d938f0b4..0000000000 --- a/package/src/icons/Logo.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; - -import { IconProps, RootPath, RootSvg } from './utils/base'; - -export const Logo = (props: IconProps) => { - const height = props.height || 40; - const width = props.width || 80; - return ( - - - - ); -}; diff --git a/package/src/icons/MapPin.tsx b/package/src/icons/MapPin.tsx deleted file mode 100644 index 532e437aa8..0000000000 --- a/package/src/icons/MapPin.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import React from 'react'; - -import { Path, Svg } from 'react-native-svg'; - -import { IconProps } from './utils/base'; - -export const MapPin = ({ height, width, ...rest }: IconProps) => ( - - - - -); diff --git a/package/src/icons/MenuPointHorizontal.tsx b/package/src/icons/MenuPointHorizontal.tsx deleted file mode 100644 index e76818cc7d..0000000000 --- a/package/src/icons/MenuPointHorizontal.tsx +++ /dev/null @@ -1,58 +0,0 @@ -import React from 'react'; - -import Svg, { Path } from 'react-native-svg'; - -import { IconProps } from './utils/base'; - -export const MenuPointHorizontal = (props: IconProps) => ( - - - - - - - - - - - -); diff --git a/package/src/icons/MessageBubbleEmpty.tsx b/package/src/icons/MessageBubbleEmpty.tsx deleted file mode 100644 index bef08edf75..0000000000 --- a/package/src/icons/MessageBubbleEmpty.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; - -import Svg, { Path } from 'react-native-svg'; - -import { IconProps } from './utils/base'; - -export const MessageBubbleEmpty = ({ height, width, ...props }: IconProps) => ( - - - -); diff --git a/package/src/icons/MessageFlag.tsx b/package/src/icons/MessageFlag.tsx deleted file mode 100644 index 3fa10a23ad..0000000000 --- a/package/src/icons/MessageFlag.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; - -import Svg, { Path } from 'react-native-svg'; - -import { IconProps } from './utils/base'; - -export const MessageFlag = (props: IconProps) => ( - - - -); diff --git a/package/src/icons/MessageIcon.tsx b/package/src/icons/MessageIcon.tsx deleted file mode 100644 index 1e5b864eaa..0000000000 --- a/package/src/icons/MessageIcon.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import React from 'react'; - -import { IconProps, RootPath, RootSvg } from './utils/base'; - -export const MessageIcon = (props: IconProps) => ( - - - -); diff --git a/package/src/icons/Mic.tsx b/package/src/icons/Mic.tsx deleted file mode 100644 index 2c20e5d10c..0000000000 --- a/package/src/icons/Mic.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; - -import { Path, Svg } from 'react-native-svg'; - -import { IconProps } from './utils/base'; - -export const Mic = ({ height, width, ...rest }: IconProps) => ( - - - -); diff --git a/package/src/icons/Minus.tsx b/package/src/icons/Minus.tsx deleted file mode 100644 index ccc8ecea15..0000000000 --- a/package/src/icons/Minus.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import React from 'react'; - -import Svg, { Path } from 'react-native-svg'; - -import { IconProps } from './utils/base'; - -export const Minus = ({ height, width, ...rest }: IconProps) => ( - - - -); diff --git a/package/src/icons/MoreEmojis.tsx b/package/src/icons/MoreEmojis.tsx deleted file mode 100644 index bb15425341..0000000000 --- a/package/src/icons/MoreEmojis.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; - -import Svg, { Path } from 'react-native-svg'; - -import { IconProps } from './utils/base'; - -export const MoreEmojis = (props: IconProps) => ( - - - -); diff --git a/package/src/icons/Mute.tsx b/package/src/icons/Mute.tsx deleted file mode 100644 index 47f0641e85..0000000000 --- a/package/src/icons/Mute.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import React from 'react'; - -import Svg, { Mask, Path } from 'react-native-svg'; - -import { IconProps } from './utils/base'; - -export const Mute = ({ height, width, ...rest }: IconProps) => ( - - - - - - - - - -); diff --git a/package/src/icons/NewClose.tsx b/package/src/icons/NewClose.tsx deleted file mode 100644 index d2bea91841..0000000000 --- a/package/src/icons/NewClose.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; - -import Svg, { Path } from 'react-native-svg'; - -import { IconProps } from './utils/base'; - -export const NewClose = ({ height, width, ...rest }: IconProps) => ( - - - -); diff --git a/package/src/icons/Pause.tsx b/package/src/icons/Pause.tsx deleted file mode 100644 index 0a238b131e..0000000000 --- a/package/src/icons/Pause.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react'; - -import { Path, Svg } from 'react-native-svg'; - -import { IconProps } from './utils/base'; - -export const Pause = ({ height, width, ...rest }: IconProps) => ( - - - - -); diff --git a/package/src/icons/PeopleIcon.tsx b/package/src/icons/PeopleIcon.tsx deleted file mode 100644 index 2d52bcd37e..0000000000 --- a/package/src/icons/PeopleIcon.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import React from 'react'; - -import { Path, Svg } from 'react-native-svg'; - -import { IconProps } from './utils/base'; - -export const PeopleIcon = ({ height, width, ...rest }: IconProps) => ( - - - - -); diff --git a/package/src/icons/PhotoIcon.tsx b/package/src/icons/PhotoIcon.tsx deleted file mode 100644 index 64adc45f9f..0000000000 --- a/package/src/icons/PhotoIcon.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import React from 'react'; - -import { Path, Svg } from 'react-native-svg'; - -import { IconProps } from './utils/base'; - -export const PhotoIcon = ({ height, width, ...rest }: IconProps) => ( - - - - -); diff --git a/package/src/icons/Picture.tsx b/package/src/icons/Picture.tsx deleted file mode 100644 index a00e23b6e1..0000000000 --- a/package/src/icons/Picture.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import React from 'react'; - -import Svg, { Path } from 'react-native-svg'; - -import { IconProps } from './utils/base'; - -// TODO V9: This SVG relies on path fill instead of stroke. We need to refactor how -// SVGs are resolved before we remove the hack of applying the pathFill -// directly. -export const Picture = (props: IconProps) => { - const { stroke, ...rest } = props; - return ( - - - - ); -}; diff --git a/package/src/icons/Pin.tsx b/package/src/icons/Pin.tsx deleted file mode 100644 index 82264c94d0..0000000000 --- a/package/src/icons/Pin.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; - -import { Path, Svg } from 'react-native-svg'; - -import { IconProps } from './utils/base'; - -export const Pin = ({ height, width, ...rest }: IconProps) => ( - - - -); diff --git a/package/src/icons/Play.tsx b/package/src/icons/Play.tsx deleted file mode 100644 index ae95118ce8..0000000000 --- a/package/src/icons/Play.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import React from 'react'; - -import { Path, Svg } from 'react-native-svg'; - -import { IconProps } from './utils/base'; - -export const Play = ({ height, width, ...rest }: IconProps) => ( - - - -); diff --git a/package/src/icons/Plus.tsx b/package/src/icons/Plus.tsx deleted file mode 100644 index 6205c0db40..0000000000 --- a/package/src/icons/Plus.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import React from 'react'; - -import Svg, { Path } from 'react-native-svg'; - -import { IconProps } from './utils/base'; - -export const Plus = ({ height, width, ...rest }: IconProps) => ( - - - -); diff --git a/package/src/icons/PollIcon.tsx b/package/src/icons/PollIcon.tsx deleted file mode 100644 index 9fbd190fd7..0000000000 --- a/package/src/icons/PollIcon.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; - -import { Path, Svg } from 'react-native-svg'; - -import { IconProps } from './utils/base'; - -export const PollIcon = ({ height, width, ...rest }: IconProps) => ( - - - -); diff --git a/package/src/icons/PollThumbnail.tsx b/package/src/icons/PollThumbnail.tsx deleted file mode 100644 index 47765a735c..0000000000 --- a/package/src/icons/PollThumbnail.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import React from 'react'; - -import Svg, { Path } from 'react-native-svg'; - -import { IconProps } from './utils/base'; - -export const PollThumbnail = (props: IconProps) => ( - - - -); diff --git a/package/src/icons/Recorder.tsx b/package/src/icons/Recorder.tsx deleted file mode 100644 index dc9dbd1272..0000000000 --- a/package/src/icons/Recorder.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react'; - -import Svg, { Path } from 'react-native-svg'; - -import { IconProps } from './utils/base'; - -export const Recorder = ({ ...props }: IconProps) => ( - - - -); diff --git a/package/src/icons/Refresh.tsx b/package/src/icons/Refresh.tsx deleted file mode 100644 index 4b8ab6ce58..0000000000 --- a/package/src/icons/Refresh.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import React from 'react'; - -import { IconProps, RootPath, RootSvg } from './utils/base'; - -export const Refresh = (props: IconProps) => ( - - - -); diff --git a/package/src/icons/Reload.tsx b/package/src/icons/Reload.tsx deleted file mode 100644 index b1d0c62b20..0000000000 --- a/package/src/icons/Reload.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; - -import { Path, Svg } from 'react-native-svg'; - -import { IconProps } from './utils/base'; - -export const Reload = ({ height, width, ...rest }: IconProps) => ( - - - -); diff --git a/package/src/icons/Resend.tsx b/package/src/icons/Resend.tsx deleted file mode 100644 index d5cd628aff..0000000000 --- a/package/src/icons/Resend.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; - -import Svg, { Path } from 'react-native-svg'; - -import { IconProps } from './utils/base'; - -export const Resend = (props: IconProps) => ( - - - -); diff --git a/package/src/icons/Retry.tsx b/package/src/icons/Retry.tsx new file mode 100644 index 0000000000..6043181414 --- /dev/null +++ b/package/src/icons/Retry.tsx @@ -0,0 +1,21 @@ +import React from 'react'; + +import Svg, { Path } from 'react-native-svg'; + +import { IconProps } from './utils/base'; + +export const Resend = ({ fill, height, pathFill, size, stroke, width, ...rest }: IconProps) => { + const color = stroke ?? pathFill ?? fill ?? 'black'; + + return ( + + + + ); +}; diff --git a/package/src/icons/RotateCircle.tsx b/package/src/icons/RotateCircle.tsx deleted file mode 100644 index 0d7e49d0f3..0000000000 --- a/package/src/icons/RotateCircle.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; - -import { Path, Svg } from 'react-native-svg'; - -import { IconProps } from './utils/base'; - -export const RotateCircle = ({ height, width, ...rest }: IconProps) => ( - - - -); diff --git a/package/src/icons/Search.tsx b/package/src/icons/Search.tsx deleted file mode 100644 index 9b8723df59..0000000000 --- a/package/src/icons/Search.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import React from 'react'; - -import Svg, { Path } from 'react-native-svg'; - -import { IconProps } from './utils/base'; - -export const Search = ({ height, width, ...props }: IconProps) => ( - - - -); diff --git a/package/src/icons/SendRight.tsx b/package/src/icons/SendRight.tsx deleted file mode 100644 index a01676cd4f..0000000000 --- a/package/src/icons/SendRight.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import React from 'react'; - -import Svg, { Path } from 'react-native-svg'; - -import { IconProps } from './utils/base'; - -export const SendRight = ({ height, width, ...rest }: IconProps) => ( - - - -); diff --git a/package/src/icons/Share.tsx b/package/src/icons/Share.tsx deleted file mode 100644 index b7ab400f3d..0000000000 --- a/package/src/icons/Share.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; - -import Svg, { Path } from 'react-native-svg'; - -import { IconProps } from './utils/base'; - -export const Share = ({ height, width, ...rest }: IconProps) => ( - - - -); diff --git a/package/src/icons/ShareRightArrow.tsx b/package/src/icons/ShareRightArrow.tsx deleted file mode 100644 index e8b7e3c9dd..0000000000 --- a/package/src/icons/ShareRightArrow.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react'; - -import { IconProps, RootPath, RootSvg } from './utils/base'; - -export const ShareRightArrow = (props: IconProps) => ( - - - -); diff --git a/package/src/icons/Smile.tsx b/package/src/icons/Smile.tsx deleted file mode 100644 index 650991f1dc..0000000000 --- a/package/src/icons/Smile.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import React from 'react'; - -import { IconProps, RootPath, RootSvg } from './utils/base'; - -export const Smile = (props: IconProps) => ( - - - - -); diff --git a/package/src/icons/Sound.tsx b/package/src/icons/Sound.tsx deleted file mode 100644 index 22741f62fe..0000000000 --- a/package/src/icons/Sound.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; - -import Svg, { Path } from 'react-native-svg'; - -import { IconProps } from './utils/base'; - -export const Sound = (props: IconProps) => ( - - - -); diff --git a/package/src/icons/SpreadSheet.tsx b/package/src/icons/SpreadSheet.tsx deleted file mode 100644 index f8069f0698..0000000000 --- a/package/src/icons/SpreadSheet.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import React from 'react'; - -import Svg, { Path } from 'react-native-svg'; - -import { IconProps } from './utils/base'; - -export const SpreadSheet = ({ height, width, ...rest }: IconProps) => ( - - - - - - -); diff --git a/package/src/icons/Stop.tsx b/package/src/icons/Stop.tsx deleted file mode 100644 index 99212dbf93..0000000000 --- a/package/src/icons/Stop.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import React from 'react'; - -import { Path, Svg } from 'react-native-svg'; - -import { IconProps } from './utils/base'; - -export const Stop = ({ height, width, ...rest }: IconProps) => ( - - - -); diff --git a/package/src/icons/ThreadReply.tsx b/package/src/icons/ThreadReply.tsx deleted file mode 100644 index 6de7d1eccc..0000000000 --- a/package/src/icons/ThreadReply.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; - -import Svg, { Path } from 'react-native-svg'; - -import { IconProps } from './utils/base'; - -export const ThreadReply = (props: IconProps) => ( - - - -); diff --git a/package/src/icons/Time.tsx b/package/src/icons/Time.tsx deleted file mode 100644 index 8f30c273fa..0000000000 --- a/package/src/icons/Time.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; - -import Svg, { Path } from 'react-native-svg'; - -import { IconProps } from './utils/base'; - -export const Time = ({ height, width, ...rest }: IconProps) => ( - - - -); diff --git a/package/src/icons/Trash.tsx b/package/src/icons/Trash.tsx deleted file mode 100644 index e628a402c0..0000000000 --- a/package/src/icons/Trash.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; - -import { Path, Svg } from 'react-native-svg'; - -import { IconProps } from './utils/base'; - -export const Trash = ({ height, width, ...rest }: IconProps) => ( - - - -); diff --git a/package/src/icons/Unlock.tsx b/package/src/icons/Unlock.tsx deleted file mode 100644 index 2a6fca9733..0000000000 --- a/package/src/icons/Unlock.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; - -import { Path, Svg } from 'react-native-svg'; - -import { IconProps } from './utils/base'; - -export const Unlock = ({ height, width, ...rest }: IconProps) => ( - - - -); diff --git a/package/src/icons/UnreadIndicator.tsx b/package/src/icons/UnreadIndicator.tsx deleted file mode 100644 index 7803a6bff3..0000000000 --- a/package/src/icons/UnreadIndicator.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react'; - -import Svg, { Path } from 'react-native-svg'; - -import { IconProps } from './utils/base'; - -type Props = IconProps; - -export const UnreadIndicator = (props: Props) => ( - - - -); diff --git a/package/src/icons/User.tsx b/package/src/icons/User.tsx deleted file mode 100644 index f86f30af0f..0000000000 --- a/package/src/icons/User.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import React from 'react'; - -import { IconProps, RootPath, RootSvg } from './utils/base'; - -export const User = (props: IconProps) => ( - - - -); diff --git a/package/src/icons/UserAdd.tsx b/package/src/icons/UserAdd.tsx deleted file mode 100644 index a8441421af..0000000000 --- a/package/src/icons/UserAdd.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; - -import Svg, { Path } from 'react-native-svg'; - -import { IconProps } from './utils/base'; - -export const UserAdd = (props: IconProps) => ( - - - -); diff --git a/package/src/icons/UserDelete.tsx b/package/src/icons/UserDelete.tsx deleted file mode 100644 index 192f0f56d6..0000000000 --- a/package/src/icons/UserDelete.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; - -import Svg, { Path } from 'react-native-svg'; - -import { IconProps } from './utils/base'; - -export const UserDelete = (props: IconProps) => ( - - - -); diff --git a/package/src/icons/VideoIcon.tsx b/package/src/icons/VideoIcon.tsx deleted file mode 100644 index bf0abae4ed..0000000000 --- a/package/src/icons/VideoIcon.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import React from 'react'; - -import { Path, Svg } from 'react-native-svg'; - -import { IconProps } from './utils/base'; - -export const VideoIcon = ({ height, width, ...rest }: IconProps) => ( - - - - -); diff --git a/package/src/icons/Warning.tsx b/package/src/icons/Warning.tsx deleted file mode 100644 index 0beba0bdce..0000000000 --- a/package/src/icons/Warning.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import React from 'react'; - -import { Path, Svg } from 'react-native-svg'; - -import { IconProps } from './utils/base'; - -export const Warning = ({ height, width, ...rest }: IconProps) => ( - - - -); diff --git a/package/src/icons/archive.tsx b/package/src/icons/archive.tsx new file mode 100644 index 0000000000..f2bde2f71e --- /dev/null +++ b/package/src/icons/archive.tsx @@ -0,0 +1,16 @@ +import React from 'react'; +import Svg, { Path } from 'react-native-svg'; + +import { IconProps } from './utils/base'; + +export const Archive: React.FC = ({ height, size, width, ...props }) => ( + + + +); diff --git a/package/src/icons/arrow-up-right.tsx b/package/src/icons/arrow-up-right.tsx new file mode 100644 index 0000000000..addc07ae2d --- /dev/null +++ b/package/src/icons/arrow-up-right.tsx @@ -0,0 +1,24 @@ +import React from 'react'; +import Svg, { Path } from 'react-native-svg'; + +import { IconProps } from './utils/base'; + +export const ArrowUpRight = ({ height, size, width, ...rest }: IconProps) => { + return ( + + + + ); +}; diff --git a/package/src/icons/arrow-up.tsx b/package/src/icons/arrow-up.tsx new file mode 100644 index 0000000000..dcb9fcdab8 --- /dev/null +++ b/package/src/icons/arrow-up.tsx @@ -0,0 +1,29 @@ +import React from 'react'; +import Svg, { Path } from 'react-native-svg'; + +import { IconProps } from './utils/base'; + +export const ArrowUp = ({ height, size, width, ...rest }: IconProps) => ( + + + +); + +export const Down = ({ height, size, width, ...rest }: IconProps) => ( + + + +); diff --git a/package/src/icons/audio.tsx b/package/src/icons/audio.tsx new file mode 100644 index 0000000000..0b10b4793c --- /dev/null +++ b/package/src/icons/audio.tsx @@ -0,0 +1,21 @@ +import React from 'react'; + +import Svg, { Path } from 'react-native-svg'; + +import { IconProps } from './utils/base'; + +export const Sound = ({ fill, height, pathFill, size, stroke, width, ...props }: IconProps) => { + const color = stroke ?? pathFill ?? fill ?? 'black'; + + return ( + + + + ); +}; diff --git a/package/src/icons/bell.tsx b/package/src/icons/bell.tsx new file mode 100644 index 0000000000..62a834d7ab --- /dev/null +++ b/package/src/icons/bell.tsx @@ -0,0 +1,24 @@ +import React from 'react'; +import Svg, { Path } from 'react-native-svg'; + +import { IconProps } from './utils/base'; + +export const Bell = ({ height, size, width, ...rest }: IconProps) => { + return ( + + + + ); +}; diff --git a/package/src/icons/bolt.tsx b/package/src/icons/bolt.tsx new file mode 100644 index 0000000000..57f222b9e6 --- /dev/null +++ b/package/src/icons/bolt.tsx @@ -0,0 +1,24 @@ +import React from 'react'; + +import { Path, Svg } from 'react-native-svg'; + +import { IconProps } from './utils/base'; + +export const Lightning = ({ fill, height, pathFill, size, stroke, width, ...rest }: IconProps) => { + const color = fill ?? pathFill ?? stroke ?? 'black'; + + return ( + + + + ); +}; diff --git a/package/src/icons/camera.tsx b/package/src/icons/camera.tsx new file mode 100644 index 0000000000..b94e8e59c6 --- /dev/null +++ b/package/src/icons/camera.tsx @@ -0,0 +1,26 @@ +import React from 'react'; + +import Svg, { Path } from 'react-native-svg'; + +import { IconProps } from './utils/base'; + +export const Camera = ({ height, size, width, ...props }: IconProps) => ( + + + + +); diff --git a/package/src/icons/checkmark-1.tsx b/package/src/icons/checkmark-1.tsx new file mode 100644 index 0000000000..dd49d24684 --- /dev/null +++ b/package/src/icons/checkmark-1.tsx @@ -0,0 +1,22 @@ +import React from 'react'; + +import Svg, { Path } from 'react-native-svg'; + +import { IconProps } from './utils/base'; + +export const Checkmark = ({ fill, height, pathFill, size, stroke, width, ...rest }: IconProps) => { + const color = stroke ?? pathFill ?? fill ?? 'black'; + + return ( + + + + ); +}; diff --git a/package/src/icons/checkmark.tsx b/package/src/icons/checkmark.tsx new file mode 100644 index 0000000000..d25d5c82ce --- /dev/null +++ b/package/src/icons/checkmark.tsx @@ -0,0 +1,24 @@ +import React from 'react'; + +import Svg, { Path } from 'react-native-svg'; + +import { IconProps } from './utils/base'; + +export const Check = ({ fill, height, pathFill, size, stroke, width, ...rest }: IconProps) => { + const color = stroke ?? pathFill ?? fill ?? 'black'; + + return ( + + + + ); +}; + +export const Tick = (props: IconProps) => ; diff --git a/package/src/icons/checks.tsx b/package/src/icons/checks.tsx new file mode 100644 index 0000000000..0ace17598c --- /dev/null +++ b/package/src/icons/checks.tsx @@ -0,0 +1,22 @@ +import React from 'react'; + +import Svg, { Path } from 'react-native-svg'; + +import { IconProps } from './utils/base'; + +export const CheckAll = ({ fill, height, pathFill, size, stroke, width, ...rest }: IconProps) => { + const color = stroke ?? pathFill ?? fill ?? 'black'; + + return ( + + + + ); +}; diff --git a/package/src/icons/ChevronTop.tsx b/package/src/icons/chevron-down.tsx similarity index 87% rename from package/src/icons/ChevronTop.tsx rename to package/src/icons/chevron-down.tsx index e1a933e196..76adf1d3e9 100644 --- a/package/src/icons/ChevronTop.tsx +++ b/package/src/icons/chevron-down.tsx @@ -7,7 +7,7 @@ import { IconProps } from './utils/base'; export const ChevronTop = ({ height, width, ...rest }: IconProps) => ( ( - +export const ChevronLeft = ({ height, size, width, ...rest }: IconProps) => ( + { + const color = stroke ?? pathFill ?? fill ?? 'black'; + + return ( + + + + ); +}; diff --git a/package/src/icons/command.tsx b/package/src/icons/command.tsx new file mode 100644 index 0000000000..12175debf0 --- /dev/null +++ b/package/src/icons/command.tsx @@ -0,0 +1,16 @@ +import React from 'react'; + +import Svg, { Path } from 'react-native-svg'; + +import { IconProps } from './utils/base'; + +export const CommandsIcon = ({ height, size, width, ...props }: IconProps) => ( + + + +); diff --git a/package/src/icons/copy.tsx b/package/src/icons/copy.tsx new file mode 100644 index 0000000000..d0dd02fbf4 --- /dev/null +++ b/package/src/icons/copy.tsx @@ -0,0 +1,17 @@ +import React from 'react'; + +import Svg, { Path } from 'react-native-svg'; + +import { IconProps } from './utils/base'; + +export const Copy = ({ height, size, width, ...props }: IconProps) => ( + + + +); diff --git a/package/src/icons/delete.tsx b/package/src/icons/delete.tsx new file mode 100644 index 0000000000..65ae0c8cf6 --- /dev/null +++ b/package/src/icons/delete.tsx @@ -0,0 +1,21 @@ +import React from 'react'; + +import Svg, { Path } from 'react-native-svg'; + +import { IconProps } from './utils/base'; + +export const Delete = ({ fill, height, pathFill, size, stroke, width, ...rest }: IconProps) => { + const color = stroke ?? pathFill ?? fill ?? 'black'; + + return ( + + + + ); +}; diff --git a/package/src/icons/edit.tsx b/package/src/icons/edit.tsx new file mode 100644 index 0000000000..0f4336ba5e --- /dev/null +++ b/package/src/icons/edit.tsx @@ -0,0 +1,21 @@ +import React from 'react'; + +import Svg, { Path } from 'react-native-svg'; + +import { IconProps } from './utils/base'; + +export const Edit = ({ fill, height, pathFill, size, stroke, width, ...rest }: IconProps) => { + const color = stroke ?? pathFill ?? fill ?? 'black'; + + return ( + + + + ); +}; diff --git a/package/src/icons/emoji-add-1.tsx b/package/src/icons/emoji-add-1.tsx new file mode 100644 index 0000000000..980fdb3589 --- /dev/null +++ b/package/src/icons/emoji-add-1.tsx @@ -0,0 +1,34 @@ +import React from 'react'; + +import Svg, { Path } from 'react-native-svg'; + +import { IconProps } from './utils/base'; + +export const MoreEmojis = ({ fill, height, pathFill, size, stroke, width, ...rest }: IconProps) => { + const color = pathFill ?? fill ?? stroke ?? 'black'; + + return ( + + + + + + + + ); +}; diff --git a/package/src/icons/emoji.tsx b/package/src/icons/emoji.tsx new file mode 100644 index 0000000000..2c1b324287 --- /dev/null +++ b/package/src/icons/emoji.tsx @@ -0,0 +1,30 @@ +import React from 'react'; + +import { Path, Svg } from 'react-native-svg'; + +import { IconProps } from './utils/base'; + +export const Smile = ({ fill, height, pathFill, size, stroke, width, ...rest }: IconProps) => { + const color = pathFill ?? fill ?? stroke ?? 'black'; + + return ( + + + + + + + ); +}; diff --git a/package/src/icons/exclamation-circle-fill.tsx b/package/src/icons/exclamation-circle-fill.tsx new file mode 100644 index 0000000000..d46bb64e69 --- /dev/null +++ b/package/src/icons/exclamation-circle-fill.tsx @@ -0,0 +1,26 @@ +import React from 'react'; + +import { Path, Svg } from 'react-native-svg'; + +import { IconProps } from './utils/base'; + +export const ExclamationCircle = ({ + fill, + height, + pathFill, + size, + stroke, + width, + ...rest +}: IconProps) => { + const color = fill ?? stroke ?? pathFill ?? 'black'; + + return ( + + + + ); +}; diff --git a/package/src/icons/exclamation-mark-fill.tsx b/package/src/icons/exclamation-mark-fill.tsx new file mode 100644 index 0000000000..7d857b0ee9 --- /dev/null +++ b/package/src/icons/exclamation-mark-fill.tsx @@ -0,0 +1,36 @@ +import React from 'react'; + +import { Path, Svg } from 'react-native-svg'; + +import { IconProps } from './utils/base'; + +export const Exclamation = ({ + fill, + height, + pathFill, + size, + stroke, + width, + ...rest +}: IconProps) => { + const color = pathFill ?? fill ?? stroke ?? 'black'; + + return ( + + + + + ); +}; diff --git a/package/src/icons/exclamation-triangle-fill.tsx b/package/src/icons/exclamation-triangle-fill.tsx new file mode 100644 index 0000000000..a5a70638a0 --- /dev/null +++ b/package/src/icons/exclamation-triangle-fill.tsx @@ -0,0 +1,20 @@ +import React from 'react'; + +import { Path, Svg } from 'react-native-svg'; + +import { IconProps } from './utils/base'; + +export const Warning = ({ fill, height, pathFill, size, stroke, width, ...rest }: IconProps) => { + const color = fill ?? stroke ?? pathFill ?? 'black'; + + return ( + + + + ); +}; diff --git a/package/src/icons/file.tsx b/package/src/icons/file.tsx new file mode 100644 index 0000000000..554d8cb51d --- /dev/null +++ b/package/src/icons/file.tsx @@ -0,0 +1,30 @@ +import React from 'react'; + +import { Path, Svg } from 'react-native-svg'; + +import { IconProps } from './utils/base'; + +export const File = ({ fill, height, pathFill, size, stroke, width, ...rest }: IconProps) => { + const color = stroke ?? pathFill ?? fill ?? 'black'; + + return ( + + + + ); +}; + +export const FilePickerIcon = (props: IconProps) => ; diff --git a/package/src/icons/Audio.tsx b/package/src/icons/filetype-audio-xl.tsx similarity index 85% rename from package/src/icons/Audio.tsx rename to package/src/icons/filetype-audio-xl.tsx index cd4c94bf42..cc85141135 100644 --- a/package/src/icons/Audio.tsx +++ b/package/src/icons/filetype-audio-xl.tsx @@ -5,30 +5,22 @@ import Svg, { Path } from 'react-native-svg'; import { IconProps } from './utils/base'; export const Audio = ({ height, width, ...rest }: IconProps) => ( - + - + ); diff --git a/package/src/icons/Code.tsx b/package/src/icons/filetype-code-xl.tsx similarity index 82% rename from package/src/icons/Code.tsx rename to package/src/icons/filetype-code-xl.tsx index d4e7ddb317..fd01bd02e8 100644 --- a/package/src/icons/Code.tsx +++ b/package/src/icons/filetype-code-xl.tsx @@ -5,30 +5,22 @@ import Svg, { Path } from 'react-native-svg'; import { IconProps } from './utils/base'; export const Code = ({ height, width, ...rest }: IconProps) => ( - + - + ); diff --git a/package/src/icons/ZIP.tsx b/package/src/icons/filetype-compression-xl.tsx similarity index 93% rename from package/src/icons/ZIP.tsx rename to package/src/icons/filetype-compression-xl.tsx index 6027cdf75d..4f4c27552b 100644 --- a/package/src/icons/ZIP.tsx +++ b/package/src/icons/filetype-compression-xl.tsx @@ -5,29 +5,21 @@ import Svg, { Path } from 'react-native-svg'; import { IconProps } from './utils/base'; export const ZIP = ({ height, width, ...rest }: IconProps) => ( - + - + ); diff --git a/package/src/icons/OtherFileIcon.tsx b/package/src/icons/filetype-other-xl.tsx similarity index 81% rename from package/src/icons/OtherFileIcon.tsx rename to package/src/icons/filetype-other-xl.tsx index 1f540175b6..3c976580cd 100644 --- a/package/src/icons/OtherFileIcon.tsx +++ b/package/src/icons/filetype-other-xl.tsx @@ -5,18 +5,12 @@ import Svg, { Path, Rect } from 'react-native-svg'; import { IconProps } from './utils/base'; export const OtherFileIcon = ({ height, width, ...rest }: IconProps) => ( - + - + diff --git a/package/src/icons/PDF.tsx b/package/src/icons/filetype-pdf-xl.tsx similarity index 96% rename from package/src/icons/PDF.tsx rename to package/src/icons/filetype-pdf-xl.tsx index 4e38db6b4e..20dc7c4080 100644 --- a/package/src/icons/PDF.tsx +++ b/package/src/icons/filetype-pdf-xl.tsx @@ -5,29 +5,21 @@ import Svg, { ClipPath, Defs, G, Path, Rect } from 'react-native-svg'; import { IconProps } from './utils/base'; export const PDF = ({ height, width, ...rest }: IconProps) => ( - + - - + + diff --git a/package/src/icons/Presentation.tsx b/package/src/icons/filetype-presentation-xl.tsx similarity index 81% rename from package/src/icons/Presentation.tsx rename to package/src/icons/filetype-presentation-xl.tsx index 65e0b67a6d..c567fa30da 100644 --- a/package/src/icons/Presentation.tsx +++ b/package/src/icons/filetype-presentation-xl.tsx @@ -5,30 +5,22 @@ import Svg, { Path } from 'react-native-svg'; import { IconProps } from './utils/base'; export const Presentation = ({ height, width, ...rest }: IconProps) => ( - + + - ); diff --git a/package/src/icons/filetype-spreadsheet-xl.tsx b/package/src/icons/filetype-spreadsheet-xl.tsx new file mode 100644 index 0000000000..bd49e3ed65 --- /dev/null +++ b/package/src/icons/filetype-spreadsheet-xl.tsx @@ -0,0 +1,26 @@ +import React from 'react'; + +import Svg, { Path } from 'react-native-svg'; + +import { IconProps } from './utils/base'; + +export const SpreadSheet = ({ height, width, ...rest }: IconProps) => ( + + + + + + +); diff --git a/package/src/icons/DOC.tsx b/package/src/icons/filetype-text-xl.tsx similarity index 96% rename from package/src/icons/DOC.tsx rename to package/src/icons/filetype-text-xl.tsx index b2238d4bf1..ab7e8d914d 100644 --- a/package/src/icons/DOC.tsx +++ b/package/src/icons/filetype-text-xl.tsx @@ -5,25 +5,18 @@ import Svg, { Path, Rect } from 'react-native-svg'; import { IconProps } from './utils/base'; export const DOC = ({ height, width, ...rest }: IconProps) => ( - + - + ); diff --git a/package/src/icons/Video.tsx b/package/src/icons/filetype-video-xl.tsx similarity index 80% rename from package/src/icons/Video.tsx rename to package/src/icons/filetype-video-xl.tsx index ea83c7ec4d..a8c69e028e 100644 --- a/package/src/icons/Video.tsx +++ b/package/src/icons/filetype-video-xl.tsx @@ -1,40 +1,33 @@ import React from 'react'; -import Svg, { Path } from 'react-native-svg'; +import Svg, { ClipPath, Defs, G, Path, Rect } from 'react-native-svg'; import { IconProps } from './utils/base'; export const Video = ({ height, width, ...rest }: IconProps) => ( - + - - - + + + + + + + + + ); diff --git a/package/src/icons/flag.tsx b/package/src/icons/flag.tsx new file mode 100644 index 0000000000..2a6b3fdb0e --- /dev/null +++ b/package/src/icons/flag.tsx @@ -0,0 +1,19 @@ +import React from 'react'; + +import Svg, { Path } from 'react-native-svg'; + +import { IconProps } from './utils/base'; + +export const Flag = ({ height, size, width, ...props }: IconProps) => ( + + + +); + +export const MessageFlag = (props: IconProps) => ; diff --git a/package/src/icons/gallery.tsx b/package/src/icons/gallery.tsx new file mode 100644 index 0000000000..393f54f8c4 --- /dev/null +++ b/package/src/icons/gallery.tsx @@ -0,0 +1,48 @@ +import React from 'react'; + +import { Path, Svg } from 'react-native-svg'; + +import { IconProps } from './utils/base'; + +export const ImageGrid = ({ fill, height, pathFill, size, stroke, width, ...rest }: IconProps) => { + const color = stroke ?? pathFill ?? fill ?? 'black'; + + return ( + + + + + + + ); +}; diff --git a/package/src/icons/giphy.tsx b/package/src/icons/giphy.tsx new file mode 100644 index 0000000000..d791eb1cb1 --- /dev/null +++ b/package/src/icons/giphy.tsx @@ -0,0 +1,34 @@ +import React from 'react'; + +import { Path, Rect, Svg } from 'react-native-svg'; + +import { IconProps } from './utils/base'; + +export const Giphy = ({ height, width, ...rest }: IconProps) => ( + + + + + + + + + + + +); + +export const GiphyIcon = (props: IconProps) => ; diff --git a/package/src/icons/image.tsx b/package/src/icons/image.tsx new file mode 100644 index 0000000000..e9d3821d84 --- /dev/null +++ b/package/src/icons/image.tsx @@ -0,0 +1,24 @@ +import React from 'react'; + +import Svg, { Path } from 'react-native-svg'; + +import { IconProps } from './utils/base'; + +export const Picture = (props: IconProps) => { + const { fill, height, pathFill, size, stroke, width, ...rest } = props; + const color = stroke ?? fill ?? pathFill ?? 'black'; + + return ( + + + + ); +}; + +export const PhotoIcon = (props: IconProps) => ; diff --git a/package/src/icons/imgur.tsx b/package/src/icons/imgur.tsx new file mode 100644 index 0000000000..833ade68ee --- /dev/null +++ b/package/src/icons/imgur.tsx @@ -0,0 +1,19 @@ +import React from 'react'; + +import { Path, Rect, Svg } from 'react-native-svg'; + +import { IconProps } from './utils/base'; + +export const Imgur = ({ height, width, ...rest }: IconProps) => ( + + + + + +); diff --git a/package/src/icons/index.ts b/package/src/icons/index.ts index 425c53c382..8bf4e6db69 100644 --- a/package/src/icons/index.ts +++ b/package/src/icons/index.ts @@ -1,64 +1,50 @@ export * from './utils/base'; -export * from './ArrowRight'; -export * from './Audio'; -export * from './Archive'; -export * from './BlockUser'; -export * from './Camera'; -export * from './Check'; -export * from './CheckAll'; -export * from './CircleStop'; -export * from './CircleBan'; -export * from './Close'; -export * from './Copy'; -export * from './CurveLineLeftUp'; -export * from './Delete'; -export * from './DOC'; -export * from './DownloadArrow'; -export * from './Edit'; -export * from './Eye'; -export * from './Flag'; -export * from './Grid'; -export * from './GiphyIcon'; -export * from './GiphyLightning'; -export * from './Loading'; -export * from './Logo'; -export * from './MessageFlag'; -export * from './MessageIcon'; -export * from './Mute'; -export * from './Pause'; -export * from './PDF'; -export * from './Picture'; -export * from './Pin'; -export * from './Play'; -export * from './Plus'; -export * from './Minus'; -export * from './Refresh'; -export * from './Resend'; -export * from './Search'; -export * from './SendRight'; -export * from './Share'; -export * from './ShareRightArrow'; -export * from './Smile'; -export * from './Sound'; -export * from './Stop'; -export * from './ThreadReply'; -export * from './Time'; +export * from './filetype-audio-xl'; +export * from './archive'; +export * from './no-sign'; +export * from './camera'; +export { Check } from './checkmark'; +export * from './checks'; +export * from './copy'; +export * from './reply'; +export * from './delete'; +export * from './filetype-text-xl'; +export * from './edit'; +export * from './flag'; +export { GiphyIcon } from './giphy'; +export * from './loading'; +export * from './mute'; +export * from './pause-fill'; +export * from './filetype-pdf-xl'; +export { Picture } from './image'; +export * from './pin'; +export * from './play-fill'; +export * from './plus'; +export * from './minus'; +export * from './Retry'; +export * from './search'; +export * from './send'; +export * from './share'; +export * from './emoji'; +export * from './audio'; +export * from './stop-fill'; +export * from './thread'; +export * from './clock'; export * from './Unknown'; -export * from './Recorder'; -export * from './User'; -export * from './UserAdd'; -export * from './UserDelete'; -export * from './Video'; -export * from './ZIP'; -export * from './MessageBubbleEmpty'; -export * from './MenuPointHorizontal'; -export * from './Reload'; -export * from './PollThumbnail'; -export * from './UnreadIndicator'; -export * from './FilePickerIcon'; -export * from './CommandsIcon'; -export * from './ArrowShareLeft'; -export * from './Bell'; -export * from './Bookmark'; -export * from './Checkmark'; +export * from './unpin'; +export * from './video-fill'; +export * from './user-add'; +export * from './user-remove'; +export * from './filetype-video-xl'; +export * from './filetype-compression-xl'; +export * from './message-bubble'; +export * from './more'; +export * from './refresh'; +export { PollThumbnail } from './poll'; +export * from './notification'; +export { FilePickerIcon } from './file'; +export * from './command'; +export * from './bell'; +export * from './save'; +export * from './checkmark-1'; diff --git a/package/src/icons/info.tsx b/package/src/icons/info.tsx new file mode 100644 index 0000000000..18d53f9269 --- /dev/null +++ b/package/src/icons/info.tsx @@ -0,0 +1,40 @@ +import React from 'react'; + +import { Path, Svg } from 'react-native-svg'; + +import { IconProps } from './utils/base'; + +export const InfoTooltip = ({ + fill, + height, + pathFill, + size, + stroke, + width, + ...rest +}: IconProps) => { + const color = fill ?? stroke ?? pathFill ?? 'black'; + + return ( + + + + + + ); +}; diff --git a/package/src/icons/ArrowBoxLeft.tsx b/package/src/icons/leave.tsx similarity index 65% rename from package/src/icons/ArrowBoxLeft.tsx rename to package/src/icons/leave.tsx index aa61fa3a02..c1b2dd0c8a 100644 --- a/package/src/icons/ArrowBoxLeft.tsx +++ b/package/src/icons/leave.tsx @@ -6,7 +6,7 @@ import { IconProps } from './utils/base'; export const ArrowBoxLeft: React.FC = (props) => ( ( + + + +); diff --git a/package/src/icons/loading.tsx b/package/src/icons/loading.tsx new file mode 100644 index 0000000000..5c3028357d --- /dev/null +++ b/package/src/icons/loading.tsx @@ -0,0 +1,40 @@ +import React from 'react'; +import { Path, StopProps } from 'react-native-svg'; + +import { IconProps, RootSvg } from './utils/base'; + +type LoadingProps = IconProps & + Partial> & { + startColor?: StopProps['stopColor']; + stopColor?: StopProps['stopColor']; + }; + +export const Loading = (props: LoadingProps) => { + const { + height = 16, + startColor, + stopColor, + stopOpacity = 0.3, + viewBox = '0 0 20 20', + width = 16, + } = props; + const baseColor = startColor ?? stopColor ?? '#006CFF'; + const accentColor = stopColor ?? startColor ?? '#006CFF'; + + return ( + + + + + ); +}; diff --git a/package/src/icons/location.tsx b/package/src/icons/location.tsx new file mode 100644 index 0000000000..e4f1c1b285 --- /dev/null +++ b/package/src/icons/location.tsx @@ -0,0 +1,34 @@ +import React from 'react'; + +import { Path, Svg } from 'react-native-svg'; + +import { IconProps } from './utils/base'; + +export const MapPin = ({ fill, height, pathFill, size, stroke, width, ...rest }: IconProps) => { + const color = stroke ?? pathFill ?? fill ?? 'black'; + + return ( + + + + + ); +}; diff --git a/package/src/icons/lock.tsx b/package/src/icons/lock.tsx new file mode 100644 index 0000000000..549dafe562 --- /dev/null +++ b/package/src/icons/lock.tsx @@ -0,0 +1,40 @@ +import React from 'react'; + +import { Path, Svg } from 'react-native-svg'; + +import { IconProps } from './utils/base'; + +export const Lock = ({ fill, height, pathFill, size, stroke, width, ...rest }: IconProps) => { + const color = stroke ?? pathFill ?? fill ?? 'black'; + + return ( + + + + + + ); +}; diff --git a/package/src/icons/message-bubble.tsx b/package/src/icons/message-bubble.tsx new file mode 100644 index 0000000000..c5ca2a40f0 --- /dev/null +++ b/package/src/icons/message-bubble.tsx @@ -0,0 +1,17 @@ +import React from 'react'; + +import Svg, { Path } from 'react-native-svg'; + +import { IconProps } from './utils/base'; + +export const MessageBubbleEmpty = ({ height, size, width, ...props }: IconProps) => ( + + + +); diff --git a/package/src/icons/minus-circle.tsx b/package/src/icons/minus-circle.tsx new file mode 100644 index 0000000000..ca62555fbd --- /dev/null +++ b/package/src/icons/minus-circle.tsx @@ -0,0 +1,34 @@ +import React from 'react'; + +import { Path, Svg } from 'react-native-svg'; + +import { IconProps } from './utils/base'; + +export const CircleMinus = ({ + fill, + height, + pathFill, + size, + stroke, + width, + ...rest +}: IconProps) => { + const color = stroke ?? pathFill ?? fill ?? 'black'; + + return ( + + + + ); +}; diff --git a/package/src/icons/minus.tsx b/package/src/icons/minus.tsx new file mode 100644 index 0000000000..c30cf8dc53 --- /dev/null +++ b/package/src/icons/minus.tsx @@ -0,0 +1,11 @@ +import React from 'react'; + +import Svg, { Path } from 'react-native-svg'; + +import { IconProps } from './utils/base'; + +export const Minus = ({ height, size, width, ...rest }: IconProps) => ( + + + +); diff --git a/package/src/icons/more.tsx b/package/src/icons/more.tsx new file mode 100644 index 0000000000..cd73971dbb --- /dev/null +++ b/package/src/icons/more.tsx @@ -0,0 +1,40 @@ +import React from 'react'; + +import Svg, { Path } from 'react-native-svg'; + +import { IconProps } from './utils/base'; + +export const MenuPointHorizontal = ({ + fill, + height, + pathFill, + size, + stroke, + width, + ...rest +}: IconProps) => { + const color = fill ?? stroke ?? pathFill ?? 'black'; + + return ( + + + + + + ); +}; diff --git a/package/src/icons/mute.tsx b/package/src/icons/mute.tsx new file mode 100644 index 0000000000..28fc1a5665 --- /dev/null +++ b/package/src/icons/mute.tsx @@ -0,0 +1,22 @@ +import React from 'react'; + +import Svg, { Path } from 'react-native-svg'; + +import { IconProps } from './utils/base'; + +export const Mute = ({ fill, height, pathFill, size, stroke, width, ...rest }: IconProps) => { + const color = stroke ?? pathFill ?? fill ?? 'black'; + + return ( + + + + ); +}; diff --git a/package/src/icons/no-sign.tsx b/package/src/icons/no-sign.tsx new file mode 100644 index 0000000000..2442600ec0 --- /dev/null +++ b/package/src/icons/no-sign.tsx @@ -0,0 +1,28 @@ +import React from 'react'; + +import { Path, Svg } from 'react-native-svg'; + +import { IconProps } from './utils/base'; + +export const CircleBan = ({ fill, height, pathFill, size, stroke, width, ...rest }: IconProps) => { + const color = stroke ?? pathFill ?? fill ?? 'black'; + + return ( + + + + ); +}; + +export const BlockUser = (props: IconProps) => ; diff --git a/package/src/icons/notification.tsx b/package/src/icons/notification.tsx new file mode 100644 index 0000000000..85159d0187 --- /dev/null +++ b/package/src/icons/notification.tsx @@ -0,0 +1,19 @@ +import React from 'react'; + +import Svg, { Path } from 'react-native-svg'; + +import { IconProps } from './utils/base'; + +type Props = IconProps; + +export const UnreadIndicator = (props: Props) => ( + + + +); diff --git a/package/src/icons/pause-fill.tsx b/package/src/icons/pause-fill.tsx new file mode 100644 index 0000000000..3ae0ba24fe --- /dev/null +++ b/package/src/icons/pause-fill.tsx @@ -0,0 +1,24 @@ +import React from 'react'; + +import { Path, Svg } from 'react-native-svg'; + +import { IconProps } from './utils/base'; + +export const Pause = ({ fill, height, pathFill, size, stroke, width, ...rest }: IconProps) => { + const color = fill ?? pathFill ?? stroke ?? 'black'; + + return ( + + + + ); +}; diff --git a/package/src/icons/pin.tsx b/package/src/icons/pin.tsx new file mode 100644 index 0000000000..06ffcaba71 --- /dev/null +++ b/package/src/icons/pin.tsx @@ -0,0 +1,27 @@ +import React from 'react'; + +import { Path, Svg } from 'react-native-svg'; + +import { IconProps } from './utils/base'; + +export const Pin = ({ fill, height, pathFill, size, stroke, width, ...rest }: IconProps) => { + const color = stroke ?? pathFill ?? fill ?? 'black'; + + return ( + + + + ); +}; diff --git a/package/src/icons/play-fill.tsx b/package/src/icons/play-fill.tsx new file mode 100644 index 0000000000..b92378cf45 --- /dev/null +++ b/package/src/icons/play-fill.tsx @@ -0,0 +1,14 @@ +import React from 'react'; + +import { Path, Svg } from 'react-native-svg'; + +import { IconProps } from './utils/base'; + +export const Play = ({ height, size, width, ...rest }: IconProps) => ( + + + +); diff --git a/package/src/icons/plus.tsx b/package/src/icons/plus.tsx new file mode 100644 index 0000000000..575ab0d49b --- /dev/null +++ b/package/src/icons/plus.tsx @@ -0,0 +1,11 @@ +import React from 'react'; + +import Svg, { Path } from 'react-native-svg'; + +import { IconProps } from './utils/base'; + +export const Plus = ({ height, size, width, ...rest }: IconProps) => ( + + + +); diff --git a/package/src/icons/poll.tsx b/package/src/icons/poll.tsx new file mode 100644 index 0000000000..ecf66c08bc --- /dev/null +++ b/package/src/icons/poll.tsx @@ -0,0 +1,31 @@ +import React from 'react'; + +import Svg, { Path } from 'react-native-svg'; + +import { IconProps } from './utils/base'; + +export const PollThumbnail = ({ + fill, + height, + pathFill, + size, + stroke, + width, + ...rest +}: IconProps) => { + const color = stroke ?? pathFill ?? fill ?? 'black'; + + return ( + + + + ); +}; + +export const PollIcon = (props: IconProps) => ; diff --git a/package/src/icons/refresh.tsx b/package/src/icons/refresh.tsx new file mode 100644 index 0000000000..203d207c7b --- /dev/null +++ b/package/src/icons/refresh.tsx @@ -0,0 +1,27 @@ +import React from 'react'; + +import { Path, Svg } from 'react-native-svg'; + +import { IconProps } from './utils/base'; + +export const Reload = ({ fill, height, pathFill, size, stroke, width, ...rest }: IconProps) => { + const color = stroke ?? pathFill ?? fill ?? 'black'; + + return ( + + + + ); +}; diff --git a/package/src/icons/reorder.tsx b/package/src/icons/reorder.tsx new file mode 100644 index 0000000000..8fd8ef999a --- /dev/null +++ b/package/src/icons/reorder.tsx @@ -0,0 +1,18 @@ +import React from 'react'; + +import { Path, Svg } from 'react-native-svg'; + +import { IconProps } from './utils/base'; + +export const DotGrid = ({ fill, height, pathFill, size, stroke, width }: IconProps) => { + const color = pathFill ?? fill ?? stroke ?? 'black'; + + return ( + + + + ); +}; diff --git a/package/src/icons/reply.tsx b/package/src/icons/reply.tsx new file mode 100644 index 0000000000..21cb2dcb54 --- /dev/null +++ b/package/src/icons/reply.tsx @@ -0,0 +1,19 @@ +import React from 'react'; + +import Svg, { Path } from 'react-native-svg'; + +import { IconProps } from './utils/base'; + +export const CurveLineLeftUp = (props: IconProps) => ( + + + +); + +export const ArrowShareLeft = (props: IconProps) => ; diff --git a/package/src/icons/save.tsx b/package/src/icons/save.tsx new file mode 100644 index 0000000000..0fb45fed1b --- /dev/null +++ b/package/src/icons/save.tsx @@ -0,0 +1,27 @@ +import React from 'react'; + +import { Path, Svg } from 'react-native-svg'; + +import { IconProps } from './utils/base'; + +export const Bookmark = ({ fill, height, pathFill, size, stroke, width, ...rest }: IconProps) => { + const color = stroke ?? pathFill ?? fill ?? 'black'; + + return ( + + + + ); +}; diff --git a/package/src/icons/search.tsx b/package/src/icons/search.tsx new file mode 100644 index 0000000000..88afed1030 --- /dev/null +++ b/package/src/icons/search.tsx @@ -0,0 +1,29 @@ +import React from 'react'; + +import Svg, { Path } from 'react-native-svg'; + +import { IconProps } from './utils/base'; + +export const Search = ({ fill, height, pathFill, size, stroke, width, ...rest }: IconProps) => { + const color = stroke ?? pathFill ?? fill ?? 'black'; + + return ( + + + + ); +}; diff --git a/package/src/icons/send.tsx b/package/src/icons/send.tsx new file mode 100644 index 0000000000..b4b6c9a8ef --- /dev/null +++ b/package/src/icons/send.tsx @@ -0,0 +1,29 @@ +import React from 'react'; + +import Svg, { Path } from 'react-native-svg'; + +import { IconProps } from './utils/base'; + +export const SendRight = ({ fill, height, pathFill, size, stroke, width, ...rest }: IconProps) => { + const color = stroke ?? pathFill ?? fill ?? 'black'; + + return ( + + + + ); +}; diff --git a/package/src/icons/share.tsx b/package/src/icons/share.tsx new file mode 100644 index 0000000000..831d2c144a --- /dev/null +++ b/package/src/icons/share.tsx @@ -0,0 +1,17 @@ +import React from 'react'; + +import Svg, { Path } from 'react-native-svg'; + +import { IconProps } from './utils/base'; + +export const Share = ({ height, width, ...rest }: IconProps) => ( + + + +); diff --git a/package/src/icons/stop-fill.tsx b/package/src/icons/stop-fill.tsx new file mode 100644 index 0000000000..bd1f20f778 --- /dev/null +++ b/package/src/icons/stop-fill.tsx @@ -0,0 +1,24 @@ +import React from 'react'; + +import { Path, Svg } from 'react-native-svg'; + +import { IconProps } from './utils/base'; + +export const Stop = ({ fill, height, pathFill, size, stroke, width, ...rest }: IconProps) => { + const color = fill ?? pathFill ?? stroke ?? 'black'; + + return ( + + + + ); +}; diff --git a/package/src/icons/thread.tsx b/package/src/icons/thread.tsx new file mode 100644 index 0000000000..fd59a106a0 --- /dev/null +++ b/package/src/icons/thread.tsx @@ -0,0 +1,29 @@ +import React from 'react'; + +import Svg, { Path } from 'react-native-svg'; + +import { IconProps } from './utils/base'; + +export const ThreadReply = ({ + fill, + height, + pathFill, + size, + stroke, + width, + ...rest +}: IconProps) => { + const color = stroke ?? pathFill ?? fill ?? 'black'; + + return ( + + + + ); +}; diff --git a/package/src/icons/unlock.tsx b/package/src/icons/unlock.tsx new file mode 100644 index 0000000000..d72051cf6b --- /dev/null +++ b/package/src/icons/unlock.tsx @@ -0,0 +1,32 @@ +import React from 'react'; + +import { Path, Svg } from 'react-native-svg'; + +import { IconProps } from './utils/base'; + +export const Unlock = ({ fill, height, pathFill, size, stroke, width, ...rest }: IconProps) => { + const color = stroke ?? pathFill ?? fill ?? 'black'; + + return ( + + + + + + ); +}; diff --git a/package/src/icons/unpin.tsx b/package/src/icons/unpin.tsx new file mode 100644 index 0000000000..099036bb85 --- /dev/null +++ b/package/src/icons/unpin.tsx @@ -0,0 +1,21 @@ +import React from 'react'; + +import { Path, Svg } from 'react-native-svg'; + +import { IconProps } from './utils/base'; + +export const Unpin = ({ fill, height, pathFill, size, stroke, width, ...rest }: IconProps) => { + const color = stroke ?? pathFill ?? fill ?? 'black'; + + return ( + + + + ); +}; diff --git a/package/src/icons/user-add.tsx b/package/src/icons/user-add.tsx new file mode 100644 index 0000000000..1abe698419 --- /dev/null +++ b/package/src/icons/user-add.tsx @@ -0,0 +1,21 @@ +import React from 'react'; + +import Svg, { Path } from 'react-native-svg'; + +import { IconProps } from './utils/base'; + +export const UserAdd = ({ fill, height, pathFill, size, stroke, width, ...rest }: IconProps) => { + const color = stroke ?? pathFill ?? fill ?? 'black'; + + return ( + + + + ); +}; diff --git a/package/src/icons/user-remove.tsx b/package/src/icons/user-remove.tsx new file mode 100644 index 0000000000..66acadf3a0 --- /dev/null +++ b/package/src/icons/user-remove.tsx @@ -0,0 +1,21 @@ +import React from 'react'; + +import Svg, { Path } from 'react-native-svg'; + +import { IconProps } from './utils/base'; + +export const UserDelete = ({ fill, height, pathFill, size, stroke, width, ...rest }: IconProps) => { + const color = stroke ?? pathFill ?? fill ?? 'black'; + + return ( + + + + ); +}; diff --git a/package/src/icons/users.tsx b/package/src/icons/users.tsx new file mode 100644 index 0000000000..fff2fdda11 --- /dev/null +++ b/package/src/icons/users.tsx @@ -0,0 +1,27 @@ +import React from 'react'; + +import { Path, Svg } from 'react-native-svg'; + +import { IconProps } from './utils/base'; + +export const PeopleIcon = ({ fill, height, pathFill, size, stroke, width, ...rest }: IconProps) => { + const color = stroke ?? pathFill ?? fill ?? 'black'; + + return ( + + + + ); +}; diff --git a/package/src/icons/utils/base.tsx b/package/src/icons/utils/base.tsx index 1b651c9165..64d6215014 100644 --- a/package/src/icons/utils/base.tsx +++ b/package/src/icons/utils/base.tsx @@ -9,13 +9,13 @@ export type IconProps = Partial & }; export const RootSvg = (props: IconProps) => { - const { children, height = 24, viewBox = '0 0 24 24', width = 24 } = props; + const { children, height, size, viewBox = '0 0 24 24', width } = props; return ( diff --git a/package/src/icons/video-fill.tsx b/package/src/icons/video-fill.tsx new file mode 100644 index 0000000000..be8d60394c --- /dev/null +++ b/package/src/icons/video-fill.tsx @@ -0,0 +1,25 @@ +import React from 'react'; + +import Svg, { ClipPath, Defs, G, Path, Rect } from 'react-native-svg'; + +import { IconProps } from './utils/base'; + +export const Recorder = ({ fill, height, pathFill, size, stroke, width, ...props }: IconProps) => { + const color = pathFill ?? fill ?? stroke ?? 'black'; + + return ( + + + + + + + + + + + ); +}; diff --git a/package/src/icons/video.tsx b/package/src/icons/video.tsx new file mode 100644 index 0000000000..819d4601dd --- /dev/null +++ b/package/src/icons/video.tsx @@ -0,0 +1,27 @@ +import React from 'react'; + +import { Path, Svg } from 'react-native-svg'; + +import { IconProps } from './utils/base'; + +export const VideoIcon = ({ fill, height, pathFill, size, stroke, width, ...rest }: IconProps) => { + const color = stroke ?? pathFill ?? fill ?? 'black'; + + return ( + + + + ); +}; diff --git a/package/src/icons/voice.tsx b/package/src/icons/voice.tsx new file mode 100644 index 0000000000..c530a69c71 --- /dev/null +++ b/package/src/icons/voice.tsx @@ -0,0 +1,27 @@ +import React from 'react'; + +import { Path, Svg } from 'react-native-svg'; + +import { IconProps } from './utils/base'; + +export const Mic = ({ fill, height, pathFill, size, stroke, width, ...rest }: IconProps) => { + const color = stroke ?? pathFill ?? fill ?? 'black'; + + return ( + + + + ); +}; diff --git a/package/src/icons/xmark-1.tsx b/package/src/icons/xmark-1.tsx new file mode 100644 index 0000000000..5b2d3f6b70 --- /dev/null +++ b/package/src/icons/xmark-1.tsx @@ -0,0 +1,27 @@ +import React from 'react'; + +import { Path, Svg } from 'react-native-svg'; + +import { IconProps } from './utils/base'; + +export const Cross = ({ fill, height, pathFill, size, stroke, width, ...rest }: IconProps) => { + const color = stroke ?? pathFill ?? fill ?? 'black'; + + return ( + + + + ); +}; diff --git a/package/src/icons/xmark.tsx b/package/src/icons/xmark.tsx new file mode 100644 index 0000000000..a92ff7f6bb --- /dev/null +++ b/package/src/icons/xmark.tsx @@ -0,0 +1,27 @@ +import React from 'react'; + +import Svg, { Path } from 'react-native-svg'; + +import { IconProps } from './utils/base'; + +export const NewClose = ({ fill, height, pathFill, size, stroke, width, ...rest }: IconProps) => { + const color = stroke ?? pathFill ?? fill ?? 'black'; + + return ( + + + + ); +}; diff --git a/package/src/state-store/__tests__/audio-player.test.ts b/package/src/state-store/__tests__/audio-player.test.ts index 4014c645ea..8321a7674f 100644 --- a/package/src/state-store/__tests__/audio-player.test.ts +++ b/package/src/state-store/__tests__/audio-player.test.ts @@ -60,7 +60,7 @@ describe('AudioPlayer', () => { (NativeHandlers as { Sound: unknown }).Sound = undefined; }); - it('initializes native playback through Sound.initializeSound', async () => { + it('initializes native playback through Sound.initializeaudio', async () => { const playerRef = createMockNativePlayerRef(); const initializeSound = jest.fn().mockResolvedValue(playerRef); (NativeHandlers as { Sound: unknown }).Sound = {