feat: poll ui in message view

package/src/components/Message/MessageSimple/MessageContent.tsx

@@ -78,9 +78,8 @@ const styles = StyleSheet.create({
     position: 'absolute',
   },
   replyContainer: {
-    flexDirection: 'row',
-    paddingHorizontal: 8,
-    paddingTop: 8,
+    paddingHorizontal: primitives.spacingXs,
+    paddingTop: primitives.spacingXs,
   },
   rightAlignContent: {
     justifyContent: 'flex-end',

package/src/components/MessageInput/__tests__/__snapshots__/AttachButton.test.js.snap

@@ -32,6 +32,7 @@ exports[`AttachButton should call handleAttachButtonPress when the button is cli
               "height": 48,
               "width": 48,
             },
+            undefined,
           ]
         }
       >
@@ -385,6 +386,7 @@ exports[`AttachButton should render a enabled AttachButton 1`] = `
               "height": 48,
               "width": 48,
             },
+            undefined,
           ]
         }
       >
@@ -738,6 +740,7 @@ exports[`AttachButton should render an disabled AttachButton 1`] = `
               "height": 48,
               "width": 48,
             },
+            undefined,
           ]
         }
       >

package/src/components/MessageInput/__tests__/__snapshots__/SendButton.test.js.snap

@@ -31,6 +31,7 @@ exports[`SendButton should render a SendButton 1`] = `
               "height": 32,
               "width": 32,
             },
+            undefined,
           ]
         }
       >
@@ -381,6 +382,7 @@ exports[`SendButton should render a disabled SendButton 1`] = `
               "height": 32,
               "width": 32,
             },
+            undefined,
           ]
         }
       >

package/src/components/MessageList/__tests__/__snapshots__/ScrollToBottomButton.test.js.snap

@@ -45,6 +45,7 @@ exports[`ScrollToBottomButton should render the message notification and match s
             "height": 40,
             "width": 40,
           },
+          undefined,
         ]
       }
     >

package/src/components/Poll/Poll.tsx

@@ -15,6 +15,8 @@ import {
   useTranslationContext,
 } from '../../contexts';
 
+import { primitives } from '../../theme';
+
 export type PollProps = Pick<PollContextValue, 'poll' | 'message'> &
   Pick<MessagesContextValue, 'PollContent'>;
 
@@ -24,8 +26,10 @@ export type PollContentProps = {
 };
 
 export const PollHeader = () => {
+  const styles = useStyles();
   const { t } = useTranslationContext();
   const { enforceUniqueVote, isClosed, maxVotesAllowed, name } = usePollState();
+
   const subtitle = useMemo(() => {
     if (isClosed) {
       return t('Vote ended');
@@ -41,20 +45,17 @@ export const PollHeader = () => {
 
   const {
     theme: {
-      colors: { text_high_emphasis, text_low_emphasis },
       poll: {
         message: { header },
       },
     },
   } = useTheme();
 
   return (
-    <>
-      <Text style={[styles.headerTitle, { color: text_high_emphasis }, header.title]}>{name}</Text>
-      <Text style={[styles.headerSubtitle, { color: text_low_emphasis }, header.subtitle]}>
-        {subtitle}
-      </Text>
-    </>
+    <View style={styles.headerContainer}>
+      <Text style={[styles.headerTitle, header.title]}>{name}</Text>
+      <Text style={[styles.headerSubtitle, header.subtitle]}>{subtitle}</Text>
+    </View>
   );
 };
 
@@ -63,6 +64,7 @@ export const PollContent = ({
   PollHeader: PollHeaderOverride,
 }: PollContentProps) => {
   const { options } = usePollState();
+  const styles = useStyles();
 
   const {
     theme: {
@@ -98,9 +100,33 @@ export const Poll = ({ message, poll, PollContent: PollContentOverride }: PollPr
   </PollContextProvider>
 );
 
-const styles = StyleSheet.create({
-  container: { padding: 15, width: 270 },
-  headerSubtitle: { fontSize: 12, marginTop: 4 },
-  headerTitle: { fontSize: 16, fontWeight: '500' },
-  optionsWrapper: { marginTop: 12 },
-});
+const useStyles = () => {
+  const {
+    theme: { semantics },
+  } = useTheme();
+  return useMemo(() => {
+    return StyleSheet.create({
+      container: {
+        width: 256, // TODO: Fix this
+        padding: primitives.spacingMd,
+        gap: primitives.spacingLg,
+      },
+      headerContainer: { gap: primitives.spacingXxs },
+      headerSubtitle: {
+        color: semantics.chatTextIncoming,
+        fontSize: primitives.typographyFontSizeSm,
+        fontWeight: primitives.typographyFontWeightRegular,
+        lineHeight: primitives.typographyLineHeightTight,
+      },
+      headerTitle: {
+        color: semantics.chatTextIncoming,
+        fontSize: primitives.typographyFontSizeMd,
+        fontWeight: primitives.typographyFontWeightSemiBold,
+        lineHeight: primitives.typographyLineHeightNormal,
+      },
+      optionsWrapper: {
+        gap: primitives.spacingMd,
+      },
+    });
+  }, [semantics]);
+};

package/src/components/Poll/components/Button.tsx

@@ -1,43 +1,39 @@
 import React from 'react';
-import { Pressable, StyleSheet, Text } from 'react-native';
+import { StyleProp, ViewStyle } from 'react-native';
 
 import { LocalMessage, Poll, PollOption } from 'stream-chat';
 
-import { useTheme } from '../../../contexts';
+import { Button, ButtonProps } from '../../ui';
 
 export type PollButtonProps = {
   onPress?: ({ message, poll }: { message: LocalMessage; poll: Poll }) => void;
 };
 
 export type PollVoteButtonProps = {
   option: PollOption;
+  style?: StyleProp<ViewStyle>;
 } & Pick<PollButtonProps, 'onPress'>;
 
-export const GenericPollButton = ({ onPress, title }: { onPress?: () => void; title?: string }) => {
-  const {
-    theme: {
-      colors: { accent_dark_blue },
-      poll: {
-        button: { container, text },
-      },
-    },
-  } = useTheme();
+export type GenericPollButtonProps = Partial<ButtonProps>;
 
+export const GenericPollButton = ({
+  variant = 'secondary',
+  type = 'ghost',
+  onPress,
+  label,
+  style,
+  size = 'sm',
+  ...rest
+}: GenericPollButtonProps) => {
   return (
-    <Pressable
+    <Button
+      variant={variant}
+      type={type}
+      label={label}
       onPress={onPress}
-      style={({ pressed }) => [{ opacity: pressed ? 0.5 : 1 }, styles.container, container]}
-    >
-      <Text style={[styles.text, { color: accent_dark_blue }, text]}>{title}</Text>
-    </Pressable>
+      size={size}
+      style={style}
+      {...rest}
+    />
   );
 };
-
-const styles = StyleSheet.create({
-  container: {
-    alignItems: 'center',
-    marginHorizontal: 16,
-    paddingVertical: 11,
-  },
-  text: { fontSize: 16 },
-});

package/src/components/Poll/components/PollButtons.tsx

@@ -1,5 +1,5 @@
-import React, { useCallback, useState } from 'react';
-import { Modal } from 'react-native';
+import React, { useCallback, useMemo, useState } from 'react';
+import { Modal, StyleSheet, View } from 'react-native';
 
 import { GenericPollButton, PollButtonProps } from './Button';
 import { PollAnswersList } from './PollAnswersList';
@@ -9,7 +9,9 @@ import { PollAllOptions } from './PollOption';
 import { PollResults } from './PollResults';
 
 import { useChatContext, usePollContext, useTheme, useTranslationContext } from '../../../contexts';
+import { primitives } from '../../../theme';
 import { SafeAreaViewWrapper } from '../../UIComponents/SafeAreaViewWrapper';
+import { useIsPollCreatedByCurrentUser } from '../hook/useIsPollCreatedByCurrentUser';
 import { usePollState } from '../hooks/usePollState';
 
 export const ViewResultsButton = (props: PollButtonProps) => {
@@ -32,14 +34,20 @@ export const ViewResultsButton = (props: PollButtonProps) => {
       colors: { white },
     },
   } = useTheme();
+  const styles = useStyles();
 
   const onRequestClose = useCallback(() => {
     setShowResults(false);
   }, []);
 
   return (
     <>
-      <GenericPollButton onPress={onPressHandler} title={t('View Results')} />
+      <GenericPollButton
+        label={t('View Results')}
+        onPress={onPressHandler}
+        style={styles.viewResultsButton}
+        type='outline'
+      />
       {showResults ? (
         <Modal animationType='slide' onRequestClose={onRequestClose} visible={showResults}>
           <SafeAreaViewWrapper style={{ backgroundColor: white, flex: 1 }}>
@@ -83,7 +91,7 @@ export const ShowAllOptionsButton = (props: PollButtonProps) => {
       {options && options.length > 10 ? (
         <GenericPollButton
           onPress={onPressHandler}
-          title={t('See all {{count}} options', { count: options.length })}
+          label={t('See all {{count}} options', { count: options.length })}
         />
       ) : null}
       {showAllOptions ? (
@@ -129,7 +137,7 @@ export const ShowAllCommentsButton = (props: PollButtonProps) => {
       {answersCount && answersCount > 0 ? (
         <GenericPollButton
           onPress={onPressHandler}
-          title={t('View {{count}} comments', { count: answersCount })}
+          label={t('View {{count}} comments', { count: answersCount })}
         />
       ) : null}
       {showAnswers ? (
@@ -167,7 +175,7 @@ export const SuggestOptionButton = (props: PollButtonProps) => {
   return (
     <>
       {!isClosed && allowUserSuggestedOptions ? (
-        <GenericPollButton onPress={onPressHandler} title={t('Suggest an option')} />
+        <GenericPollButton onPress={onPressHandler} label={t('Suggest an option')} />
       ) : null}
       {showAddOptionDialog ? (
         <PollInputDialog
@@ -204,7 +212,7 @@ export const AddCommentButton = (props: PollButtonProps) => {
   return (
     <>
       {!isClosed && allowAnswers ? (
-        <GenericPollButton onPress={onPressHandler} title={t('Add a comment')} />
+        <GenericPollButton onPress={onPressHandler} label={t('Add a comment')} />
       ) : null}
       {showAddCommentDialog ? (
         <PollInputDialog
@@ -223,19 +231,50 @@ export const EndVoteButton = () => {
   const { t } = useTranslationContext();
   const { createdBy, endVote, isClosed } = usePollState();
   const { client } = useChatContext();
+  const styles = useStyles();
 
   return !isClosed && createdBy?.id === client.userID ? (
-    <GenericPollButton onPress={endVote} title={t('End Vote')} />
+    <GenericPollButton
+      label={t('End Vote')}
+      onPress={endVote}
+      style={styles.endVoteButton}
+      type='outline'
+    />
   ) : null;
 };
 
-export const PollButtons = () => (
-  <>
-    <ShowAllOptionsButton />
-    <ShowAllCommentsButton />
-    <SuggestOptionButton />
-    <AddCommentButton />
-    <ViewResultsButton />
-    <EndVoteButton />
-  </>
-);
+export const PollButtons = () => {
+  const styles = useStyles();
+  return (
+    <View style={styles.buttonsContainer}>
+      <ViewResultsButton />
+      <EndVoteButton />
+      <ShowAllOptionsButton />
+      <SuggestOptionButton />
+      <AddCommentButton />
+      <ShowAllCommentsButton />
+    </View>
+  );
+};
+
+const useStyles = () => {
+  const {
+    theme: { semantics },
+  } = useTheme();
+  const isPollCreatedByClient = useIsPollCreatedByCurrentUser();
+  return useMemo(() => {
+    return StyleSheet.create({
+      buttonsContainer: { gap: primitives.spacingXs },
+      endVoteButton: {
+        borderColor: isPollCreatedByClient
+          ? semantics.chatBorderOnChatOutgoing
+          : semantics.chatBorderOnChatIncoming,
+      },
+      viewResultsButton: {
+        borderColor: isPollCreatedByClient
+          ? semantics.chatBorderOnChatOutgoing
+          : semantics.chatBorderOnChatIncoming,
+      },
+    });
+  }, [semantics, isPollCreatedByClient]);
+};