diff --git a/package/src/components/AttachmentPicker/components/AttachmentPickerContent.tsx b/package/src/components/AttachmentPicker/components/AttachmentPickerContent.tsx index 639751e1e6..1eedaf2351 100644 --- a/package/src/components/AttachmentPicker/components/AttachmentPickerContent.tsx +++ b/package/src/components/AttachmentPicker/components/AttachmentPickerContent.tsx @@ -175,8 +175,10 @@ const useCommandPickerStyle = () => { flexGrow: 1, paddingHorizontal: primitives.spacingXxs, paddingBottom: primitives.spacing2xl, + backgroundColor: semantics.composerBg, }, title: { + backgroundColor: semantics.composerBg, fontWeight: primitives.typographyFontWeightSemiBold, fontSize: primitives.typographyFontSizeMd, color: semantics.textPrimary, @@ -184,7 +186,7 @@ const useCommandPickerStyle = () => { paddingBottom: primitives.spacingMd, }, }), - [semantics.textPrimary], + [semantics.composerBg, semantics.textPrimary], ); }; diff --git a/package/src/components/AutoCompleteInput/AutoCompleteSuggestionItem.tsx b/package/src/components/AutoCompleteInput/AutoCompleteSuggestionItem.tsx index 24511820ae..7abe829c14 100644 --- a/package/src/components/AutoCompleteInput/AutoCompleteSuggestionItem.tsx +++ b/package/src/components/AutoCompleteInput/AutoCompleteSuggestionItem.tsx @@ -73,7 +73,7 @@ export const CommandSuggestionItem = (item: CommandSuggestion) => { const { args, name } = item; const { theme: { - colors: { black, grey }, + semantics, messageInput: { suggestions: { command: { args: argsStyle, container: commandContainer, title }, @@ -86,10 +86,16 @@ export const CommandSuggestionItem = (item: CommandSuggestion) => { return ( {name ? : null} - + {(name || '').replace(/^\w/, (char) => char.toUpperCase())} - + {`/${name} ${args}`} diff --git a/package/src/components/AutoCompleteInput/AutoCompleteSuggestionList.tsx b/package/src/components/AutoCompleteInput/AutoCompleteSuggestionList.tsx index feee1fe678..56b0226ca0 100644 --- a/package/src/components/AutoCompleteInput/AutoCompleteSuggestionList.tsx +++ b/package/src/components/AutoCompleteInput/AutoCompleteSuggestionList.tsx @@ -62,7 +62,6 @@ export const AutoCompleteSuggestionList = ({ const { theme: { - colors: { black, white }, messageInput: { container: { maxHeight }, }, @@ -106,7 +105,7 @@ export const AutoCompleteSuggestionList = ({ onEndReached={loadMore} onEndReachedThreshold={0.1} renderItem={renderItem} - style={[styles.flatlist, { backgroundColor: white, maxHeight, shadowColor: black }]} + style={[styles.flatlist, { maxHeight }]} testID={'auto-complete-suggestion-list'} /> @@ -132,6 +131,8 @@ const useStyles = () => { borderColor: semantics.borderCoreDefault, }, flatlist: { + backgroundColor: semantics.composerBg, + shadowColor: semantics.accentBlack, borderRadius: 8, elevation: 3, marginHorizontal: 8, diff --git a/package/src/components/Message/MessageSimple/__tests__/__snapshots__/MessageAvatar.test.js.snap b/package/src/components/Message/MessageSimple/__tests__/__snapshots__/MessageAvatar.test.js.snap index 3356718c66..9599074cc2 100644 --- a/package/src/components/Message/MessageSimple/__tests__/__snapshots__/MessageAvatar.test.js.snap +++ b/package/src/components/Message/MessageSimple/__tests__/__snapshots__/MessageAvatar.test.js.snap @@ -22,7 +22,7 @@ exports[`MessageAvatar should render message avatar 1`] = ` "width": 32, }, { - "backgroundColor": "#003a3f", + "backgroundColor": "#006970", }, { "borderColor": "rgba(255, 255, 255, 0.2)", diff --git a/package/src/components/Message/MessageSimple/__tests__/__snapshots__/MessageTextContainer.test.tsx.snap b/package/src/components/Message/MessageSimple/__tests__/__snapshots__/MessageTextContainer.test.tsx.snap index 3f3a5a8efc..95f08ee3e1 100644 --- a/package/src/components/Message/MessageSimple/__tests__/__snapshots__/MessageTextContainer.test.tsx.snap +++ b/package/src/components/Message/MessageSimple/__tests__/__snapshots__/MessageTextContainer.test.tsx.snap @@ -29,7 +29,7 @@ exports[`MessageTextContainer should render message text container 1`] = ` "alignItems": "flex-start", "flexDirection": "row", "flexWrap": "wrap", - "fontSize": 15, + "fontSize": 17, "justifyContent": "flex-start", "lineHeight": 20, "marginBottom": 8, @@ -41,7 +41,7 @@ exports[`MessageTextContainer should render message text container 1`] = ` style={ { "color": "#000000", - "fontSize": 15, + "fontSize": 17, "lineHeight": 20, } } diff --git a/package/src/components/MessageInput/MessageInput.tsx b/package/src/components/MessageInput/MessageInput.tsx index 0e6035cb47..eb93768733 100644 --- a/package/src/components/MessageInput/MessageInput.tsx +++ b/package/src/components/MessageInput/MessageInput.tsx @@ -418,10 +418,12 @@ const MessageInputWithContext = (props: MessageInputPropsWithContext) => { <> - + + + )} diff --git a/package/src/components/MessageInput/MessageInputLeadingView.tsx b/package/src/components/MessageInput/MessageInputLeadingView.tsx index a4e837a3d9..f28230c516 100644 --- a/package/src/components/MessageInput/MessageInputLeadingView.tsx +++ b/package/src/components/MessageInput/MessageInputLeadingView.tsx @@ -1,5 +1,7 @@ import React, { useEffect } from 'react'; -import { StyleSheet, View } from 'react-native'; +import { StyleSheet } from 'react-native'; + +import Animated, { ZoomIn, ZoomOut } from 'react-native-reanimated'; import { AttachmentManagerState } from 'stream-chat'; @@ -31,9 +33,13 @@ export const MessageInputLeadingView = () => { }, [textComposer, hasAttachments]); return command && !hasAttachments ? ( - + - + ) : null; }; diff --git a/package/src/components/Poll/CreatePollContent.tsx b/package/src/components/Poll/CreatePollContent.tsx index 6e2c9e532d..75eb97e370 100644 --- a/package/src/components/Poll/CreatePollContent.tsx +++ b/package/src/components/Poll/CreatePollContent.tsx @@ -157,7 +157,7 @@ export const CreatePollContent = () => { - {t('Anonymous poll')} + {t('Anonymous voting')} Hide who voted @@ -273,14 +273,14 @@ const useStyles = () => { alignItems: 'center', justifyContent: 'space-between', flexDirection: 'row', - backgroundColor: semantics.inputOptionCardBg, + backgroundColor: semantics.backgroundCoreSurfaceCard, padding: primitives.spacingMd, borderRadius: primitives.radiusLg, }, optionCardWrapper: { gap: primitives.spacingMd, }, - optionCardSwitch: {}, + optionCardSwitch: { width: 64 }, }); }, [semantics]); }; diff --git a/package/src/components/Poll/Poll.tsx b/package/src/components/Poll/Poll.tsx index 6493d069c5..b0e63bbd20 100644 --- a/package/src/components/Poll/Poll.tsx +++ b/package/src/components/Poll/Poll.tsx @@ -32,7 +32,7 @@ export const PollHeader = () => { const subtitle = useMemo(() => { if (isClosed) { - return t('Vote ended'); + return t('Poll has ended'); } if (enforceUniqueVote) { return t('Select one'); diff --git a/package/src/components/Poll/components/CreatePollHeader.tsx b/package/src/components/Poll/components/CreatePollHeader.tsx index 0b011f679c..c0e662c09a 100644 --- a/package/src/components/Poll/components/CreatePollHeader.tsx +++ b/package/src/components/Poll/components/CreatePollHeader.tsx @@ -1,9 +1,9 @@ -import React, { useMemo } from 'react'; +import React, { useCallback, useMemo } from 'react'; import { StyleSheet, Text, View } from 'react-native'; import { useTheme } from '../../../contexts/themeContext/ThemeContext'; import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext'; -import { IconProps, SendPoll } from '../../../icons'; +import { Check, IconProps } from '../../../icons'; import { NewCross } from '../../../icons/NewCross'; import { primitives } from '../../../theme'; import { Button } from '../../ui'; @@ -41,18 +41,12 @@ export const CreatePollHeader = ({ } = useTheme(); const styles = useStyles(); - const renderSendPollIcon = (props: IconProps) => { - return ( - - ); - }; + const renderSendPollIcon = useCallback( + (props: IconProps) => { + return ; + }, + [semantics.textOnAccent], + ); return ( diff --git a/package/src/components/Poll/components/MultipleAnswersField.tsx b/package/src/components/Poll/components/MultipleAnswersField.tsx index 5c3809f57c..2d28921637 100644 --- a/package/src/components/Poll/components/MultipleAnswersField.tsx +++ b/package/src/components/Poll/components/MultipleAnswersField.tsx @@ -122,7 +122,7 @@ const useStyles = () => { optionCardWrapper: { gap: primitives.spacingMd, }, - optionCardSwitch: {}, + optionCardSwitch: { width: 64 }, }); }, [semantics]); }; diff --git a/package/src/components/Poll/components/PollAnswersList.tsx b/package/src/components/Poll/components/PollAnswersList.tsx index e6c290985d..12ab7c1f89 100644 --- a/package/src/components/Poll/components/PollAnswersList.tsx +++ b/package/src/components/Poll/components/PollAnswersList.tsx @@ -1,5 +1,5 @@ import React, { useCallback, useMemo, useState } from 'react'; -import { FlatList, type FlatListProps, Pressable, StyleSheet, Text, View } from 'react-native'; +import { FlatList, type FlatListProps, StyleSheet, Text, View } from 'react-native'; import { PollAnswer, VotingVisibility } from 'stream-chat'; @@ -13,7 +13,9 @@ import { useTheme, useTranslationContext, } from '../../../contexts'; +import { primitives } from '../../../theme'; import { getDateString } from '../../../utils/i18n/getDateString'; +import { Button } from '../../ui'; import { UserAvatar } from '../../ui/Avatar/UserAvatar'; import { usePollAnswersPagination } from '../hooks/usePollAnswersPagination'; import { usePollState } from '../hooks/usePollState'; @@ -34,31 +36,15 @@ export const AnswerListAddCommentButton = (props: PollButtonProps) => { setShowAddCommentDialog(true); }, [message, onPress, poll]); - const { - theme: { - colors: { accent_dark_blue, bg_user }, - poll: { - answersList: { buttonContainer }, - button: { text }, - }, - }, - } = useTheme(); - return ( <> - [ - { opacity: pressed ? 0.5 : 1 }, - styles.addCommentButtonContainer, - { backgroundColor: bg_user }, - buttonContainer, - ]} - > - - {ownAnswer ? t('Update your comment') : t('Add a comment')} - - + /> {showAddCommentDialog ? ( setShowAddCommentDialog(false)} @@ -83,12 +69,12 @@ export const PollAnswerListItem = ({ answer }: { answer: PollAnswer }) => { const { theme: { - colors: { bg_user, black }, poll: { answersList: { item: itemStyle }, }, }, } = useTheme(); + const styles = useStyles(); const dateString = useMemo( () => @@ -107,20 +93,18 @@ export const PollAnswerListItem = ({ answer }: { answer: PollAnswer }) => { ); return ( - - - {answer.answer_text} - + + {answer.answer_text} {!isAnonymous && answer.user?.image ? ( - + ) : null} - + {isAnonymous ? t('Anonymous') : answer.user?.name} - {dateString} + {dateString} ); @@ -136,18 +120,19 @@ export const PollAnswersListContent = ({ const { hasNextPage, loadMore, pollAnswers } = usePollAnswersPagination(); const { theme: { - colors: { white }, poll: { - answersList: { container }, + answersList: { container, contentContainer }, }, }, } = useTheme(); + const styles = useStyles(); return ( - + `poll_answer_${item.id}`} + contentContainerStyle={[styles.contentContainer, contentContainer]} onEndReached={() => hasNextPage && loadMore()} renderItem={renderPollAnswerListItem} {...additionalFlatListProps} @@ -172,23 +157,54 @@ export const PollAnswersList = ({ ); -const styles = StyleSheet.create({ - addCommentButtonContainer: { - alignItems: 'center', - borderRadius: 12, - paddingHorizontal: 16, - paddingVertical: 18, - }, - addCommentButtonText: { fontSize: 16 }, - container: { flex: 1, margin: 16 }, - listItemAnswerText: { fontSize: 16, fontWeight: '500' }, - listItemContainer: { - borderRadius: 12, - marginBottom: 8, - paddingBottom: 20, - paddingHorizontal: 16, - paddingTop: 12, - }, - listItemInfoContainer: { flexDirection: 'row', justifyContent: 'space-between', marginTop: 24 }, - listItemUserInfoContainer: { alignItems: 'center', flexDirection: 'row' }, -}); +const useStyles = () => { + const { + theme: { semantics }, + } = useTheme(); + return useMemo( + () => + StyleSheet.create({ + addCommentButtonContainer: { + alignItems: 'center', + borderRadius: 12, + paddingHorizontal: 16, + paddingVertical: 18, + }, + contentContainer: { gap: primitives.spacingMd }, + addCommentButtonText: { fontSize: 16 }, + container: { + flex: 1, + padding: primitives.spacingMd, + backgroundColor: semantics.backgroundElevationElevation1, + }, + listItemAnswerText: { + fontSize: primitives.typographyFontSizeMd, + lineHeight: primitives.typographyLineHeightRelaxed, + fontWeight: primitives.typographyFontWeightSemiBold, + color: semantics.textPrimary, + }, + listItemContainer: { + borderRadius: primitives.radiusLg, + padding: primitives.spacingMd, + backgroundColor: semantics.backgroundCoreSurfaceCard, + }, + listItemInfoContainer: { + flexDirection: 'row', + justifyContent: 'space-between', + alignItems: 'center', + marginTop: 24, + }, + listItemInfoUserName: { + color: semantics.textPrimary, + fontSize: primitives.typographyFontSizeSm, + marginLeft: primitives.spacingXxs, + }, + listItemInfoDate: { + fontSize: primitives.typographyFontSizeSm, + color: semantics.textTertiary, + }, + listItemUserInfoContainer: { alignItems: 'center', flexDirection: 'row' }, + }), + [semantics], + ); +}; diff --git a/package/src/components/Poll/components/PollButtons.tsx b/package/src/components/Poll/components/PollButtons.tsx index 20b3dfbbb3..aa30911df2 100644 --- a/package/src/components/Poll/components/PollButtons.tsx +++ b/package/src/components/Poll/components/PollButtons.tsx @@ -29,11 +29,6 @@ export const ViewResultsButton = (props: PollButtonProps) => { setShowResults(true); }, [message, onPress, poll]); - const { - theme: { - colors: { white }, - }, - } = useTheme(); const styles = useStyles(); const onRequestClose = useCallback(() => { @@ -50,7 +45,7 @@ export const ViewResultsButton = (props: PollButtonProps) => { /> {showResults ? ( - + @@ -80,11 +75,7 @@ export const ShowAllOptionsButton = (props: PollButtonProps) => { setShowAllOptions(false); }, []); - const { - theme: { - colors: { white }, - }, - } = useTheme(); + const styles = useStyles(); return ( <> @@ -96,7 +87,7 @@ export const ShowAllOptionsButton = (props: PollButtonProps) => { ) : null} {showAllOptions ? ( - + @@ -122,11 +113,7 @@ export const ShowAllCommentsButton = (props: PollButtonProps) => { setShowAnswers(true); }, [message, onPress, poll]); - const { - theme: { - colors: { white }, - }, - } = useTheme(); + const styles = useStyles(); const onRequestClose = useCallback(() => { setShowAnswers(false); @@ -142,7 +129,7 @@ export const ShowAllCommentsButton = (props: PollButtonProps) => { ) : null} {showAnswers ? ( - + @@ -275,6 +262,10 @@ const useStyles = () => { ? semantics.chatBorderOnChatOutgoing : semantics.chatBorderOnChatIncoming, }, + safeArea: { + backgroundColor: semantics.backgroundElevationElevation1, + flex: 1, + }, }); }, [semantics, isPollCreatedByClient]); }; diff --git a/package/src/components/Poll/components/PollInputDialog.tsx b/package/src/components/Poll/components/PollInputDialog.tsx index 602e782542..b6e761bbcc 100644 --- a/package/src/components/Poll/components/PollInputDialog.tsx +++ b/package/src/components/Poll/components/PollInputDialog.tsx @@ -10,6 +10,8 @@ import { View, } from 'react-native'; +import Animated, { LinearTransition, ZoomIn } from 'react-native-reanimated'; + import { useTheme, useTranslationContext } from '../../../contexts'; export type PollInputDialogProps = { @@ -52,7 +54,11 @@ export const PollInputDialog = ({ behavior={Platform.OS === 'ios' ? 'padding' : 'height'} style={[styles.transparentContainer, transparentContainer]} > - + {title} {t('SEND')} - + ); diff --git a/package/src/components/Poll/components/PollModalHeader.tsx b/package/src/components/Poll/components/PollModalHeader.tsx index 9b8486a148..4e274d6852 100644 --- a/package/src/components/Poll/components/PollModalHeader.tsx +++ b/package/src/components/Poll/components/PollModalHeader.tsx @@ -1,8 +1,10 @@ -import React from 'react'; -import { Pressable, StyleSheet, Text, View } from 'react-native'; +import React, { useMemo } from 'react'; +import { StyleSheet, Text, View } from 'react-native'; import { useTheme } from '../../../contexts'; -import { Back } from '../../../icons'; +import { NewCross } from '../../../icons/NewCross'; +import { primitives } from '../../../theme'; +import { Button } from '../../ui'; export type PollModalHeaderProps = { onPress: () => void; @@ -12,31 +14,70 @@ export type PollModalHeaderProps = { export const PollModalHeader = ({ onPress, title }: PollModalHeaderProps) => { const { theme: { - colors: { black, text_high_emphasis, white }, poll: { modalHeader: { container, title: titleStyle }, }, }, } = useTheme(); + const styles = useStyles(); return ( - - ({ opacity: pressed ? 0.5 : 1 })}> - - - - {title} - + + +