feat: poll screens redesign

package/src/components/AttachmentPicker/components/AttachmentPickerContent.tsx

@@ -175,16 +175,18 @@ 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,
           paddingHorizontal: primitives.spacingMd,
           paddingBottom: primitives.spacingMd,
         },
       }),
-    [semantics.textPrimary],
+    [semantics.composerBg, semantics.textPrimary],
   );
 };
 

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 (
     <View style={[styles.commandContainer, commandContainer]}>
       {name ? <AutoCompleteSuggestionCommandIcon name={name} /> : null}
-      <Text style={[styles.title, { color: black }, title]} testID='commands-item-title'>
+      <Text
+        style={[styles.title, { color: semantics.textPrimary }, title]}
+        testID='commands-item-title'
+      >
         {(name || '').replace(/^\w/, (char) => char.toUpperCase())}
       </Text>
-      <Text style={[styles.args, { color: grey }, argsStyle]} testID='commands-item-args'>
+      <Text
+        style={[styles.args, { color: semantics.textTertiary }, argsStyle]}
+        testID='commands-item-args'
+      >
         {`/${name} ${args}`}
       </Text>
     </View>

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'}
       />
     </Animated.View>
@@ -132,6 +131,8 @@ const useStyles = () => {
           borderColor: semantics.borderCoreDefault,
         },
         flatlist: {
+          backgroundColor: semantics.composerBg,
+          shadowColor: semantics.accentBlack,
           borderRadius: 8,
           elevation: 3,
           marginHorizontal: 8,

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)",

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,
           }
         }

package/src/components/MessageInput/MessageInput.tsx

@@ -418,10 +418,12 @@ const MessageInputWithContext = (props: MessageInputPropsWithContext) => {
                     <>
                       <MessageInputLeadingView />
 
-                      <AutoCompleteInput
-                        TextInputComponent={TextInputComponent}
-                        {...additionalTextInputProps}
-                      />
+                      <Animated.View layout={LinearTransition.duration(200)}>
+                        <AutoCompleteInput
+                          TextInputComponent={TextInputComponent}
+                          {...additionalTextInputProps}
+                        />
+                      </Animated.View>
                     </>
                   )}
 

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 ? (
-    <View style={styles.giphyContainer}>
+    <Animated.View
+      entering={ZoomIn.duration(200)}
+      exiting={ZoomOut.duration(200)}
+      style={styles.giphyContainer}
+    >
       <GiphyChip />
-    </View>
+    </Animated.View>
   ) : null;
 };
 

package/src/components/Poll/CreatePollContent.tsx

@@ -157,7 +157,7 @@ export const CreatePollContent = () => {
           <MultipleAnswersField />
           <View style={[styles.optionCard, anonymousPoll.wrapper]}>
             <View style={[styles.optionCardContent, anonymousPoll.optionCardContent]}>
-              <Text style={[styles.title, anonymousPoll.title]}>{t('Anonymous poll')}</Text>
+              <Text style={[styles.title, anonymousPoll.title]}>{t('Anonymous voting')}</Text>
               <Text style={[styles.description, anonymousPoll.description]}>Hide who voted</Text>
             </View>
 
@@ -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]);
 };

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');

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 (
-      <SendPoll
-        {...props}
-        height={18}
-        fill={semantics.textOnAccent}
-        width={18}
-        stroke={'none'}
-        strokeWidth={0}
-      />
-    );
-  };
+  const renderSendPollIcon = useCallback(
+    (props: IconProps) => {
+      return <Check {...props} height={18} stroke={semantics.textOnAccent} width={18} />;
+    },
+    [semantics.textOnAccent],
+  );
 
   return (
     <View style={[styles.headerContainer, headerContainer]}>

package/src/components/Poll/components/MultipleAnswersField.tsx

@@ -122,7 +122,7 @@ const useStyles = () => {
       optionCardWrapper: {
         gap: primitives.spacingMd,
       },
-      optionCardSwitch: {},
+      optionCardSwitch: { width: 64 },
     });
   }, [semantics]);
 };