diff --git a/package/src/components/MessageInput/MessageComposer.tsx b/package/src/components/MessageInput/MessageComposer.tsx index 4e74adab7f..fb96e4895a 100644 --- a/package/src/components/MessageInput/MessageComposer.tsx +++ b/package/src/components/MessageInput/MessageComposer.tsx @@ -1,7 +1,6 @@ import React, { useEffect, useMemo } from 'react'; -import { Modal, StyleSheet, View } from 'react-native'; +import { StyleSheet, View } from 'react-native'; -import { GestureHandlerRootView } from 'react-native-gesture-handler'; import Animated, { Extrapolation, interpolate, @@ -52,9 +51,9 @@ import { MessageInputHeightState } from '../../state-store/message-input-height- import { primitives } from '../../theme'; import { transitions } from '../../utils/animations/transitions'; import { type TextInputOverrideComponent } from '../AutoCompleteInput/AutoCompleteInput'; +import { PollModal } from '../Poll/components/PollModal'; import { CreatePoll } from '../Poll/CreatePollContent'; import { PortalWhileClosingView } from '../UIComponents/PortalWhileClosingView'; -import { SafeAreaViewWrapper } from '../UIComponents/SafeAreaViewWrapper'; const useStyles = () => { const { @@ -67,16 +66,6 @@ const useStyles = () => { flexShrink: 1, minWidth: 0, }, - pollModalWrapper: { - alignItems: 'center', - flex: 1, - justifyContent: 'center', - backgroundColor: semantics.backgroundCoreElevation1, - }, - pollSafeArea: { - flex: 1, - backgroundColor: semantics.backgroundCoreElevation1, - }, container: { alignItems: 'center', flexDirection: 'row', @@ -457,23 +446,13 @@ const MessageComposerWithContext = (props: MessageComposerPropsWithContext) => { {showPollCreationDialog ? ( - - - - - - - - - + + + ) : null} ); diff --git a/package/src/components/Poll/components/CreatePollHeader.tsx b/package/src/components/Poll/components/CreatePollHeader.tsx index 33c91a4e5e..fe5d31086b 100644 --- a/package/src/components/Poll/components/CreatePollHeader.tsx +++ b/package/src/components/Poll/components/CreatePollHeader.tsx @@ -4,7 +4,7 @@ import { StyleSheet, Text, View } from 'react-native'; import { useTheme } from '../../../contexts/themeContext/ThemeContext'; import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext'; import { Check, IconProps } from '../../../icons'; -import { ArrowLeft } from '../../../icons/arrow-left'; +import { Cross } from '../../../icons/xmark-1'; import { primitives } from '../../../theme'; import { Button } from '../../ui'; import { useCanCreatePoll } from '../hooks/useCanCreatePoll'; @@ -43,9 +43,16 @@ export const CreatePollHeader = ({ const renderSendPollIcon = useCallback( (props: IconProps) => { - return ; + return ( + + ); }, - [semantics.textOnAccent], + [canCreatePoll, semantics.textOnAccent, semantics.textDisabled], ); return ( @@ -54,9 +61,9 @@ export const CreatePollHeader = ({ accessibilityLabelKey='a11y/Close poll creation' variant='secondary' onPress={onBackPressHandler} - type='ghost' + type='outline' size='md' - LeadingIcon={ArrowLeft} + LeadingIcon={Cross} iconOnly /> diff --git a/package/src/components/Poll/components/PollButtons.tsx b/package/src/components/Poll/components/PollButtons.tsx index 2fbb4298f1..cde38d1ffc 100644 --- a/package/src/components/Poll/components/PollButtons.tsx +++ b/package/src/components/Poll/components/PollButtons.tsx @@ -1,10 +1,10 @@ import React, { useCallback, useMemo } from 'react'; -import { Modal, StyleSheet, View } from 'react-native'; -import { GestureHandlerRootView } from 'react-native-gesture-handler'; +import { StyleSheet, View } from 'react-native'; import { GenericPollButton, PollButtonProps } from './Button'; import { PollAnswersList } from './PollAnswersList'; import { PollInputDialog } from './PollInputDialog'; +import { PollModal } from './PollModal'; import { PollModalHeader } from './PollModalHeader'; import { PollAllOptions } from './PollOption'; import { PollResults } from './PollResults'; @@ -12,7 +12,6 @@ import { PollResults } from './PollResults'; import { useChatContext, usePollContext, useTheme, useTranslationContext } from '../../../contexts'; import { primitives } from '../../../theme'; import { defaultPollOptionCount } from '../../../utils/constants'; -import { SafeAreaViewWrapper } from '../../UIComponents/SafeAreaViewWrapper'; import { useAddCommentOpen, useAllCommentsOpen, @@ -51,14 +50,10 @@ export const ViewResultsButton = (props: PollButtonProps) => { type='outline' /> {showResults ? ( - - - - - - - - + + + + ) : null} ); @@ -81,8 +76,6 @@ export const ShowAllOptionsButton = (props: PollButtonProps) => { openAllOptions(); }, [message, onPress, openAllOptions, poll]); - const styles = useStyles(); - return ( <> {options && options.length > defaultPollOptionCount ? ( @@ -92,14 +85,10 @@ export const ShowAllOptionsButton = (props: PollButtonProps) => { /> ) : null} {showAllOptions ? ( - - - - - - - - + + + + ) : null} ); @@ -122,8 +111,6 @@ export const ShowAllCommentsButton = (props: PollButtonProps) => { openAllComments(); }, [message, onPress, openAllComments, poll]); - const styles = useStyles(); - return ( <> {answersCount && answersCount > 0 ? ( @@ -133,14 +120,10 @@ export const ShowAllCommentsButton = (props: PollButtonProps) => { /> ) : null} {showAnswers ? ( - - - - - - - - + + + + ) : null} ); @@ -254,9 +237,6 @@ const useStyles = () => { return useMemo(() => { return StyleSheet.create({ buttonsContainer: { gap: primitives.spacingXs }, - modalRoot: { - flex: 1, - }, endVoteButton: { borderColor: isPollCreatedByClient ? semantics.chatBorderOnChatOutgoing @@ -267,10 +247,6 @@ const useStyles = () => { ? semantics.chatBorderOnChatOutgoing : semantics.chatBorderOnChatIncoming, }, - safeArea: { - backgroundColor: semantics.backgroundCoreElevation1, - flex: 1, - }, }); }, [semantics, isPollCreatedByClient]); }; diff --git a/package/src/components/Poll/components/PollInputDialog.tsx b/package/src/components/Poll/components/PollInputDialog.tsx index 2099aed082..dd74ebe8ce 100644 --- a/package/src/components/Poll/components/PollInputDialog.tsx +++ b/package/src/components/Poll/components/PollInputDialog.tsx @@ -72,19 +72,11 @@ export const PollInputDialog = ({ /> -