From 7dfabd74287736d3d92db0606b8a0b496dc8cafb Mon Sep 17 00:00:00 2001
From: Khushal Agarwal <khushal.agarwal987@gmail.com>
Date: Wed, 11 Feb 2026 11:35:16 +0530
Subject: [PATCH 1/5] feat: poll ui in message view

---
 .../Message/MessageSimple/MessageContent.tsx  |   5 +-
 package/src/components/Poll/Poll.tsx          |  52 ++++--
 .../Poll/components/PollButtons.tsx           | 104 ++++++++---
 .../components/Poll/components/PollOption.tsx | 166 +++++++++++-------
 .../Poll/hook/useIsPollCreatedByClient.ts     |  13 ++
 .../ProgressControl/ProgressBar.tsx           |  52 ++++++
 .../ProgressControl/ProgressControl.tsx       |   4 +-
 .../src/components/ui/Avatar/AvatarStack.tsx  |   2 +-
 package/src/components/ui/Button/Button.tsx   |  18 +-
 .../src/contexts/themeContext/utils/theme.ts  |  22 ++-
 10 files changed, 319 insertions(+), 119 deletions(-)
 create mode 100644 package/src/components/Poll/hook/useIsPollCreatedByClient.ts
 create mode 100644 package/src/components/ProgressControl/ProgressBar.tsx

diff --git a/package/src/components/Message/MessageSimple/MessageContent.tsx b/package/src/components/Message/MessageSimple/MessageContent.tsx
index 86317a3700..9489e4953f 100644
--- a/package/src/components/Message/MessageSimple/MessageContent.tsx
+++ b/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',
diff --git a/package/src/components/Poll/Poll.tsx b/package/src/components/Poll/Poll.tsx
index dc64810994..6493d069c5 100644
--- a/package/src/components/Poll/Poll.tsx
+++ b/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,7 +45,6 @@ export const PollHeader = () => {
 
   const {
     theme: {
-      colors: { text_high_emphasis, text_low_emphasis },
       poll: {
         message: { header },
       },
@@ -49,12 +52,10 @@ export const PollHeader = () => {
   } = 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]);
+};
diff --git a/package/src/components/Poll/components/PollButtons.tsx b/package/src/components/Poll/components/PollButtons.tsx
index be1903b966..c951f33197 100644
--- a/package/src/components/Poll/components/PollButtons.tsx
+++ b/package/src/components/Poll/components/PollButtons.tsx
@@ -1,7 +1,7 @@
-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 { PollButtonProps } from './Button';
 import { PollAnswersList } from './PollAnswersList';
 import { PollInputDialog } from './PollInputDialog';
 import { PollModalHeader } from './PollModalHeader';
@@ -9,7 +9,10 @@ import { PollAllOptions } from './PollOption';
 import { PollResults } from './PollResults';
 
 import { useChatContext, usePollContext, useTheme, useTranslationContext } from '../../../contexts';
+import { primitives } from '../../../theme';
+import { Button } from '../../ui';
 import { SafeAreaViewWrapper } from '../../UIComponents/SafeAreaViewWrapper';
+import { useIsPollCreatedByClient } from '../hook/useIsPollCreatedByClient';
 import { usePollState } from '../hooks/usePollState';
 
 export const ViewResultsButton = (props: PollButtonProps) => {
@@ -32,6 +35,7 @@ export const ViewResultsButton = (props: PollButtonProps) => {
       colors: { white },
     },
   } = useTheme();
+  const styles = useStyles();
 
   const onRequestClose = useCallback(() => {
     setShowResults(false);
@@ -39,7 +43,14 @@ export const ViewResultsButton = (props: PollButtonProps) => {
 
   return (
     <>
-      <GenericPollButton onPress={onPressHandler} title={t('View Results')} />
+      <Button
+        variant='secondary'
+        type='outline'
+        label={t('View Results')}
+        onPress={onPressHandler}
+        size='sm'
+        style={styles.viewResultsButton}
+      />
       {showResults ? (
         <Modal animationType='slide' onRequestClose={onRequestClose} visible={showResults}>
           <SafeAreaViewWrapper style={{ backgroundColor: white, flex: 1 }}>
@@ -81,9 +92,12 @@ export const ShowAllOptionsButton = (props: PollButtonProps) => {
   return (
     <>
       {options && options.length > 10 ? (
-        <GenericPollButton
+        <Button
+          variant='secondary'
+          type='ghost'
           onPress={onPressHandler}
-          title={t('See all {{count}} options', { count: options.length })}
+          label={t('See all {{count}} options', { count: options.length })}
+          size='sm'
         />
       ) : null}
       {showAllOptions ? (
@@ -127,9 +141,12 @@ export const ShowAllCommentsButton = (props: PollButtonProps) => {
   return (
     <>
       {answersCount && answersCount > 0 ? (
-        <GenericPollButton
+        <Button
+          variant='secondary'
+          type='ghost'
           onPress={onPressHandler}
-          title={t('View {{count}} comments', { count: answersCount })}
+          label={t('View {{count}} comments', { count: answersCount })}
+          size='sm'
         />
       ) : null}
       {showAnswers ? (
@@ -167,7 +184,13 @@ export const SuggestOptionButton = (props: PollButtonProps) => {
   return (
     <>
       {!isClosed && allowUserSuggestedOptions ? (
-        <GenericPollButton onPress={onPressHandler} title={t('Suggest an option')} />
+        <Button
+          variant='secondary'
+          type='ghost'
+          onPress={onPressHandler}
+          label={t('Suggest an option')}
+          size='sm'
+        />
       ) : null}
       {showAddOptionDialog ? (
         <PollInputDialog
@@ -204,7 +227,13 @@ export const AddCommentButton = (props: PollButtonProps) => {
   return (
     <>
       {!isClosed && allowAnswers ? (
-        <GenericPollButton onPress={onPressHandler} title={t('Add a comment')} />
+        <Button
+          variant='secondary'
+          type='ghost'
+          onPress={onPressHandler}
+          label={t('Add a comment')}
+          size='sm'
+        />
       ) : null}
       {showAddCommentDialog ? (
         <PollInputDialog
@@ -223,19 +252,52 @@ 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')} />
+    <Button
+      variant='secondary'
+      type='outline'
+      label={t('End Vote')}
+      onPress={endVote}
+      size='sm'
+      style={styles.endVoteButton}
+    />
   ) : 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 = useIsPollCreatedByClient();
+  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]);
+};
diff --git a/package/src/components/Poll/components/PollOption.tsx b/package/src/components/Poll/components/PollOption.tsx
index 3a6ffc6f2a..f0bf88fd66 100644
--- a/package/src/components/Poll/components/PollOption.tsx
+++ b/package/src/components/Poll/components/PollOption.tsx
@@ -4,7 +4,7 @@ import { Pressable, ScrollViewProps, StyleSheet, Text, View } from 'react-native
 
 import { ScrollView } from 'react-native-gesture-handler';
 
-import { PollOption as PollOptionClass, PollVote } from 'stream-chat';
+import { PollOption as PollOptionClass, PollVote, UserResponse } from 'stream-chat';
 
 import { PollVoteButtonProps } from './Button';
 
@@ -17,7 +17,10 @@ import {
 } from '../../../contexts';
 
 import { Check } from '../../../icons';
-import { UserAvatar } from '../../ui/Avatar/UserAvatar';
+import { primitives } from '../../../theme';
+import { ProgressBar } from '../../ProgressControl/ProgressBar';
+import { UserAvatarStack } from '../../ui/Avatar/AvatarStack';
+import { useIsPollCreatedByClient } from '../hook/useIsPollCreatedByClient';
 import { usePollState } from '../hooks/usePollState';
 
 export type PollOptionProps = {
@@ -80,10 +83,11 @@ export const PollAllOptions = ({
 );
 
 export const PollOption = ({ option, showProgressBar = true }: PollOptionProps) => {
-  const { isClosed, latestVotesByOption, maxVotedOptionIds, voteCountsByOption } = usePollState();
+  const { latestVotesByOption, maxVotedOptionIds, voteCountsByOption } = usePollState();
+  const styles = useStyles();
 
   const relevantVotes = useMemo(
-    () => latestVotesByOption?.[option.id]?.slice(0, 2) || [],
+    () => latestVotesByOption?.[option.id] || [],
     [latestVotesByOption, option.id],
   );
   const maxVotes = useMemo(
@@ -95,55 +99,51 @@ export const PollOption = ({ option, showProgressBar = true }: PollOptionProps)
 
   const {
     theme: {
-      colors: { accent_dark_blue, accent_info, black, grey },
       poll: {
         message: {
-          option: {
-            container,
-            progressBar,
-            progressBarEmptyFill,
-            progressBarVotedFill,
-            progressBarWinnerFill,
-            text,
-            votesContainer,
-            wrapper,
-          },
+          option: { text, votesContainer, container, info, header, votesText },
         },
       },
+      semantics,
     },
   } = useTheme();
+  const isPollCreatedByClient = useIsPollCreatedByClient();
+
+  const unFilledColor = isPollCreatedByClient
+    ? semantics.chatPollProgressFillOutgoing
+    : semantics.chatPollProgressFillIncoming;
+
+  const filledColor = isPollCreatedByClient
+    ? semantics.chatPollProgressTrackOutgoing
+    : semantics.chatPollProgressTrackIncoming;
 
   return (
-    <View style={[styles.wrapper, wrapper]}>
-      <View style={[styles.container, container]}>
-        <VoteButton option={option} />
-        <Text style={[styles.text, { color: black }, text]}>{option.text}</Text>
-        <View style={[styles.votesContainer, votesContainer]}>
-          {relevantVotes.map((vote: PollVote) =>
-            vote.user ? <UserAvatar user={vote.user} size='xs' showBorder key={vote.id} /> : null,
-          )}
-          <Text style={{ color: black, marginLeft: 2 }}>{voteCountsByOption[option.id] || 0}</Text>
+    <View style={[styles.container, container]}>
+      <VoteButton option={option} />
+      <View style={[styles.info, info]}>
+        <View style={[styles.header, header]}>
+          <Text style={[styles.text, text]}>{option.text}</Text>
+          <View style={[styles.votesContainer, votesContainer]}>
+            <UserAvatarStack
+              users={relevantVotes.map((vote: PollVote) => vote.user as UserResponse)}
+              overlap={0.2}
+              maxVisible={3}
+              avatarSize='xs'
+            />
+
+            <Text style={[styles.votesText, votesText]}>{voteCountsByOption[option.id] || 0}</Text>
+          </View>
         </View>
-      </View>
-      {showProgressBar ? (
-        <View style={[styles.progressBar, progressBar]}>
-          <View
-            style={{
-              backgroundColor:
-                isClosed && maxVotedOptionIds.length === 1 && maxVotedOptionIds[0] === option.id
-                  ? progressBarWinnerFill || accent_info
-                  : progressBarVotedFill || accent_dark_blue,
-              flex: maxVotes > 0 ? votes / maxVotes : 0,
-            }}
-          />
-          <View
-            style={{
-              backgroundColor: progressBarEmptyFill || grey,
-              flex: maxVotes > 0 ? (maxVotes - votes) / maxVotes : 1,
-            }}
-          />
+        <View style={styles.progressBarContainer}>
+          {showProgressBar ? (
+            <ProgressBar
+              progress={votes / maxVotes}
+              filledColor={filledColor}
+              emptyColor={unFilledColor}
+            />
+          ) : null}
         </View>
-      ) : null}
+      </View>
     </View>
   );
 };
@@ -152,13 +152,17 @@ export const VoteButton = ({ onPress, option }: PollVoteButtonProps) => {
   const { message, poll } = usePollContext();
   const { isClosed, ownVotesByOptionId } = usePollState();
   const ownCapabilities = useOwnCapabilitiesContext();
+  const {
+    theme: { semantics },
+  } = useTheme();
+  const isPollCreatedByClient = useIsPollCreatedByClient();
+  const styles = useStyles();
 
   const {
     theme: {
-      colors: { accent_dark_blue, disabled },
       poll: {
         message: {
-          option: { voteButtonActive, voteButtonContainer, voteButtonInactive },
+          option: { voteButtonContainer },
         },
       },
     },
@@ -190,10 +194,11 @@ export const VoteButton = ({ onPress, option }: PollVoteButtonProps) => {
         { opacity: pressed ? 0.5 : 1 },
         styles.voteContainer,
         {
-          backgroundColor: hasVote ? voteButtonActive || accent_dark_blue : 'transparent',
-          borderColor: hasVote
-            ? voteButtonActive || accent_dark_blue
-            : voteButtonInactive || disabled,
+          borderWidth: hasVote ? 0 : 1,
+          backgroundColor: hasVote ? semantics.controlRadiocheckBgSelected : 'transparent',
+          borderColor: isPollCreatedByClient
+            ? semantics.chatBorderOnChatOutgoing
+            : semantics.chatBorderOnChatIncoming,
         },
         voteButtonContainer,
       ]}
@@ -203,6 +208,52 @@ export const VoteButton = ({ onPress, option }: PollVoteButtonProps) => {
   ) : null;
 };
 
+const useStyles = () => {
+  const {
+    theme: { semantics },
+  } = useTheme();
+  return useMemo(() => {
+    return StyleSheet.create({
+      container: {
+        flexDirection: 'row',
+        gap: primitives.spacingXs,
+        alignItems: 'center',
+      },
+      header: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+      },
+      text: {
+        color: semantics.chatTextIncoming,
+        fontSize: primitives.typographyFontSizeSm,
+        fontWeight: primitives.typographyFontWeightRegular,
+        lineHeight: primitives.typographyLineHeightTight,
+      },
+      info: {
+        flexGrow: 1,
+        gap: primitives.spacingXs,
+      },
+      votesContainer: { flexDirection: 'row', gap: primitives.spacingXs, alignItems: 'center' },
+      votesText: {
+        color: semantics.chatTextIncoming,
+        fontSize: primitives.typographyFontSizeXs,
+        fontWeight: primitives.typographyFontWeightRegular,
+        lineHeight: primitives.typographyLineHeightTight,
+      },
+      progressBarContainer: {
+        flex: 1,
+      },
+      voteContainer: {
+        borderRadius: primitives.radiusMax,
+        height: 24,
+        justifyContent: 'center',
+        alignItems: 'center',
+        width: 24,
+      },
+    });
+  }, [semantics]);
+};
+
 const styles = StyleSheet.create({
   allOptionsListContainer: {
     borderRadius: 12,
@@ -217,21 +268,4 @@ const styles = StyleSheet.create({
   },
   allOptionsTitleText: { fontSize: 16, fontWeight: '500' },
   allOptionsWrapper: { flex: 1, marginBottom: 16, padding: 16 },
-  container: { flexDirection: 'row' },
-  progressBar: { borderRadius: 4, flex: 1, flexDirection: 'row', height: 4, marginTop: 2 },
-  text: {
-    flex: 1,
-    fontSize: 16,
-    marginLeft: 4,
-  },
-  voteContainer: {
-    alignItems: 'center',
-    borderRadius: 18,
-    borderWidth: 1,
-    height: 18,
-    justifyContent: 'center',
-    width: 18,
-  },
-  votesContainer: { flexDirection: 'row', marginLeft: 4 },
-  wrapper: { marginTop: 8, paddingVertical: 8 },
 });
diff --git a/package/src/components/Poll/hook/useIsPollCreatedByClient.ts b/package/src/components/Poll/hook/useIsPollCreatedByClient.ts
new file mode 100644
index 0000000000..5d52935623
--- /dev/null
+++ b/package/src/components/Poll/hook/useIsPollCreatedByClient.ts
@@ -0,0 +1,13 @@
+import { useChatContext } from '../../../contexts';
+import { usePollState } from '../hooks/usePollState';
+
+/**
+ * React hook to check if the poll was created by the logged in client.
+ * @returns Whether the poll was created by the logged in client.
+ */
+export const useIsPollCreatedByClient = () => {
+  const { createdBy } = usePollState();
+  const { client } = useChatContext();
+
+  return createdBy?.id === client.userID;
+};
diff --git a/package/src/components/ProgressControl/ProgressBar.tsx b/package/src/components/ProgressControl/ProgressBar.tsx
new file mode 100644
index 0000000000..0a16d1470b
--- /dev/null
+++ b/package/src/components/ProgressControl/ProgressBar.tsx
@@ -0,0 +1,52 @@
+import React, { useMemo, useState } from 'react';
+import { ColorValue, StyleSheet, View } from 'react-native';
+
+import { useTheme } from '../../contexts';
+import { primitives } from '../../theme';
+
+const TRACK_HEIGHT = 8;
+
+export type ProgressBarProps = {
+  progress: number;
+  filledColor: ColorValue;
+  emptyColor: ColorValue;
+};
+export const ProgressBar = (props: ProgressBarProps) => {
+  const [width, setWidth] = useState<number>(0);
+  const { progress, filledColor, emptyColor } = props;
+  const styles = useStyles();
+  return (
+    <View
+      style={[styles.container, { backgroundColor: emptyColor }]}
+      onLayout={({ nativeEvent }) => {
+        setWidth(nativeEvent.layout.width);
+      }}
+    >
+      <View
+        style={[styles.filledStyle, { backgroundColor: filledColor, width: progress * width }]}
+      />
+    </View>
+  );
+};
+
+const useStyles = () => {
+  const {
+    theme: { semantics },
+  } = useTheme();
+  return useMemo(() => {
+    return StyleSheet.create({
+      container: {
+        borderRadius: primitives.radiusMax,
+        height: TRACK_HEIGHT,
+        alignItems: 'center',
+        flexDirection: 'row',
+        backgroundColor: semantics.chatWaveformBar,
+      },
+      filledStyle: {
+        backgroundColor: semantics.chatWaveformBarPlaying,
+        height: TRACK_HEIGHT,
+        borderRadius: primitives.radiusMax,
+      },
+    });
+  }, [semantics]);
+};
diff --git a/package/src/components/ProgressControl/ProgressControl.tsx b/package/src/components/ProgressControl/ProgressControl.tsx
index aedf14f996..c9dba29a05 100644
--- a/package/src/components/ProgressControl/ProgressControl.tsx
+++ b/package/src/components/ProgressControl/ProgressControl.tsx
@@ -132,7 +132,7 @@ const useStyles = () => {
   return useMemo(() => {
     return StyleSheet.create({
       container: {
-        borderRadius: primitives.radiusXxs,
+        borderRadius: primitives.radiusMax,
         height: TRACK_HEIGHT,
         alignItems: 'center',
         flexDirection: 'row',
@@ -140,7 +140,7 @@ const useStyles = () => {
       },
       filledStyle: {
         alignSelf: 'center',
-        borderRadius: 2,
+        borderRadius: primitives.radiusMax,
         height: TRACK_HEIGHT,
         backgroundColor: semantics.chatWaveformBarPlaying,
       },
diff --git a/package/src/components/ui/Avatar/AvatarStack.tsx b/package/src/components/ui/Avatar/AvatarStack.tsx
index 391e4058a8..1d7fee02f0 100644
--- a/package/src/components/ui/Avatar/AvatarStack.tsx
+++ b/package/src/components/ui/Avatar/AvatarStack.tsx
@@ -25,7 +25,7 @@ export const AvatarStack = (props: AvatarStackProps) => {
   const extraCount = items.length - visibleItems.length;
 
   if (extraCount > 0) {
-    visibleItems.push(<BadgeCount count={extraCount} size={avatarSize} />);
+    visibleItems.push(<BadgeCount count={extraCount} size={avatarSize === 'sm' ? 'md' : 'sm'} />);
   }
 
   const totalWidth = diameter + (visibleItems.length - 1) * visiblePortion;
diff --git a/package/src/components/ui/Button/Button.tsx b/package/src/components/ui/Button/Button.tsx
index 11f0d40d68..24b7e64174 100644
--- a/package/src/components/ui/Button/Button.tsx
+++ b/package/src/components/ui/Button/Button.tsx
@@ -1,5 +1,14 @@
 import React, { useMemo } from 'react';
-import { I18nManager, Pressable, PressableProps, StyleSheet, Text, View } from 'react-native';
+import {
+  I18nManager,
+  Pressable,
+  PressableProps,
+  StyleProp,
+  StyleSheet,
+  ViewStyle,
+  Text,
+  View,
+} from 'react-native';
 
 import { buttonPadding, buttonSizes } from './constants';
 import { useButtonStyles } from './hooks/useButtonStyles';
@@ -43,6 +52,11 @@ export type ButtonProps = PressableProps & {
    * Whether the button is only an icon.
    */
   iconOnly?: boolean;
+
+  /**
+   * The style of the button.
+   */
+  style?: StyleProp<ViewStyle>;
 };
 
 export const Button = ({
@@ -56,6 +70,7 @@ export const Button = ({
   label,
   onLayout,
   disabled = false,
+  style,
   ...rest
 }: ButtonProps) => {
   const {
@@ -82,6 +97,7 @@ export const Button = ({
           height: buttonSizes[size].height,
           width: iconOnly ? buttonSizes[size].width : undefined,
         },
+        style,
       ]}
       onLayout={onLayout}
     >
diff --git a/package/src/contexts/themeContext/utils/theme.ts b/package/src/contexts/themeContext/utils/theme.ts
index 6da4ec9a92..ea49e2ae35 100644
--- a/package/src/contexts/themeContext/utils/theme.ts
+++ b/package/src/contexts/themeContext/utils/theme.ts
@@ -815,14 +815,13 @@ export type Theme = {
       };
       option: {
         container: ViewStyle;
+        info: ViewStyle;
+        header: ViewStyle;
+        votesText: TextStyle;
+        progressBarContainer: ViewStyle;
         progressBar: ViewStyle;
-        progressBarEmptyFill: string;
-        progressBarVotedFill: string;
-        progressBarWinnerFill: string;
         text: TextStyle;
-        voteButtonActive: string;
         voteButtonContainer: ViewStyle;
-        voteButtonInactive: string;
         votesContainer: ViewStyle;
         wrapper: ViewStyle;
       };
@@ -1646,16 +1645,15 @@ export const defaultTheme: Theme = {
       },
       option: {
         container: {},
-        progressBar: {},
-        progressBarEmptyFill: '',
-        progressBarVotedFill: '',
-        progressBarWinnerFill: '',
+        info: {},
+        header: {},
         text: {},
-        voteButtonActive: '',
-        voteButtonContainer: {},
-        voteButtonInactive: '',
+        progressBarContainer: {},
+        progressBar: {},
         votesContainer: {},
+        votesText: {},
         wrapper: {},
+        voteButtonContainer: {},
       },
       optionsWrapper: {},
     },

From 6578a26218407d7faa8cba0171105c0f95a6582e Mon Sep 17 00:00:00 2001
From: Khushal Agarwal <khushal.agarwal987@gmail.com>
Date: Wed, 11 Feb 2026 17:41:27 +0530
Subject: [PATCH 2/5] fix: poll buttons refine

---
 .../src/components/Poll/components/Button.tsx | 46 +++++++++----------
 .../Poll/components/PollButtons.tsx           | 45 +++++-------------
 .../components/Poll/components/PollOption.tsx |  6 +--
 .../components/PollResults/PollResultItem.tsx |  2 +-
 ...nt.ts => useIsPollCreatedByCurrentUser.ts} |  2 +-
 5 files changed, 37 insertions(+), 64 deletions(-)
 rename package/src/components/Poll/hook/{useIsPollCreatedByClient.ts => useIsPollCreatedByCurrentUser.ts} (87%)

diff --git a/package/src/components/Poll/components/Button.tsx b/package/src/components/Poll/components/Button.tsx
index 533cc4dd61..b7a9a102bd 100644
--- a/package/src/components/Poll/components/Button.tsx
+++ b/package/src/components/Poll/components/Button.tsx
@@ -1,9 +1,9 @@
 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;
@@ -11,33 +11,29 @@ export type PollButtonProps = {
 
 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 },
-});
diff --git a/package/src/components/Poll/components/PollButtons.tsx b/package/src/components/Poll/components/PollButtons.tsx
index c951f33197..20b3dfbbb3 100644
--- a/package/src/components/Poll/components/PollButtons.tsx
+++ b/package/src/components/Poll/components/PollButtons.tsx
@@ -1,7 +1,7 @@
 import React, { useCallback, useMemo, useState } from 'react';
 import { Modal, StyleSheet, View } from 'react-native';
 
-import { PollButtonProps } from './Button';
+import { GenericPollButton, PollButtonProps } from './Button';
 import { PollAnswersList } from './PollAnswersList';
 import { PollInputDialog } from './PollInputDialog';
 import { PollModalHeader } from './PollModalHeader';
@@ -10,9 +10,8 @@ import { PollResults } from './PollResults';
 
 import { useChatContext, usePollContext, useTheme, useTranslationContext } from '../../../contexts';
 import { primitives } from '../../../theme';
-import { Button } from '../../ui';
 import { SafeAreaViewWrapper } from '../../UIComponents/SafeAreaViewWrapper';
-import { useIsPollCreatedByClient } from '../hook/useIsPollCreatedByClient';
+import { useIsPollCreatedByCurrentUser } from '../hook/useIsPollCreatedByCurrentUser';
 import { usePollState } from '../hooks/usePollState';
 
 export const ViewResultsButton = (props: PollButtonProps) => {
@@ -43,13 +42,11 @@ export const ViewResultsButton = (props: PollButtonProps) => {
 
   return (
     <>
-      <Button
-        variant='secondary'
-        type='outline'
+      <GenericPollButton
         label={t('View Results')}
         onPress={onPressHandler}
-        size='sm'
         style={styles.viewResultsButton}
+        type='outline'
       />
       {showResults ? (
         <Modal animationType='slide' onRequestClose={onRequestClose} visible={showResults}>
@@ -92,12 +89,9 @@ export const ShowAllOptionsButton = (props: PollButtonProps) => {
   return (
     <>
       {options && options.length > 10 ? (
-        <Button
-          variant='secondary'
-          type='ghost'
+        <GenericPollButton
           onPress={onPressHandler}
           label={t('See all {{count}} options', { count: options.length })}
-          size='sm'
         />
       ) : null}
       {showAllOptions ? (
@@ -141,12 +135,9 @@ export const ShowAllCommentsButton = (props: PollButtonProps) => {
   return (
     <>
       {answersCount && answersCount > 0 ? (
-        <Button
-          variant='secondary'
-          type='ghost'
+        <GenericPollButton
           onPress={onPressHandler}
           label={t('View {{count}} comments', { count: answersCount })}
-          size='sm'
         />
       ) : null}
       {showAnswers ? (
@@ -184,13 +175,7 @@ export const SuggestOptionButton = (props: PollButtonProps) => {
   return (
     <>
       {!isClosed && allowUserSuggestedOptions ? (
-        <Button
-          variant='secondary'
-          type='ghost'
-          onPress={onPressHandler}
-          label={t('Suggest an option')}
-          size='sm'
-        />
+        <GenericPollButton onPress={onPressHandler} label={t('Suggest an option')} />
       ) : null}
       {showAddOptionDialog ? (
         <PollInputDialog
@@ -227,13 +212,7 @@ export const AddCommentButton = (props: PollButtonProps) => {
   return (
     <>
       {!isClosed && allowAnswers ? (
-        <Button
-          variant='secondary'
-          type='ghost'
-          onPress={onPressHandler}
-          label={t('Add a comment')}
-          size='sm'
-        />
+        <GenericPollButton onPress={onPressHandler} label={t('Add a comment')} />
       ) : null}
       {showAddCommentDialog ? (
         <PollInputDialog
@@ -255,13 +234,11 @@ export const EndVoteButton = () => {
   const styles = useStyles();
 
   return !isClosed && createdBy?.id === client.userID ? (
-    <Button
-      variant='secondary'
-      type='outline'
+    <GenericPollButton
       label={t('End Vote')}
       onPress={endVote}
-      size='sm'
       style={styles.endVoteButton}
+      type='outline'
     />
   ) : null;
 };
@@ -284,7 +261,7 @@ const useStyles = () => {
   const {
     theme: { semantics },
   } = useTheme();
-  const isPollCreatedByClient = useIsPollCreatedByClient();
+  const isPollCreatedByClient = useIsPollCreatedByCurrentUser();
   return useMemo(() => {
     return StyleSheet.create({
       buttonsContainer: { gap: primitives.spacingXs },
diff --git a/package/src/components/Poll/components/PollOption.tsx b/package/src/components/Poll/components/PollOption.tsx
index f0bf88fd66..884d91edae 100644
--- a/package/src/components/Poll/components/PollOption.tsx
+++ b/package/src/components/Poll/components/PollOption.tsx
@@ -20,7 +20,7 @@ import { Check } from '../../../icons';
 import { primitives } from '../../../theme';
 import { ProgressBar } from '../../ProgressControl/ProgressBar';
 import { UserAvatarStack } from '../../ui/Avatar/AvatarStack';
-import { useIsPollCreatedByClient } from '../hook/useIsPollCreatedByClient';
+import { useIsPollCreatedByCurrentUser } from '../hook/useIsPollCreatedByCurrentUser';
 import { usePollState } from '../hooks/usePollState';
 
 export type PollOptionProps = {
@@ -107,7 +107,7 @@ export const PollOption = ({ option, showProgressBar = true }: PollOptionProps)
       semantics,
     },
   } = useTheme();
-  const isPollCreatedByClient = useIsPollCreatedByClient();
+  const isPollCreatedByClient = useIsPollCreatedByCurrentUser();
 
   const unFilledColor = isPollCreatedByClient
     ? semantics.chatPollProgressFillOutgoing
@@ -155,7 +155,7 @@ export const VoteButton = ({ onPress, option }: PollVoteButtonProps) => {
   const {
     theme: { semantics },
   } = useTheme();
-  const isPollCreatedByClient = useIsPollCreatedByClient();
+  const isPollCreatedByClient = useIsPollCreatedByCurrentUser();
   const styles = useStyles();
 
   const {
diff --git a/package/src/components/Poll/components/PollResults/PollResultItem.tsx b/package/src/components/Poll/components/PollResults/PollResultItem.tsx
index 63827928d6..994ece5de8 100644
--- a/package/src/components/Poll/components/PollResults/PollResultItem.tsx
+++ b/package/src/components/Poll/components/PollResults/PollResultItem.tsx
@@ -59,7 +59,7 @@ export const ShowAllVotesButton = (props: ShowAllVotesButtonProps) => {
       {ownCapabilities.queryPollVotes &&
       voteCountsByOption &&
       voteCountsByOption?.[option.id] > 5 ? (
-        <GenericPollButton onPress={onPressHandler} title={t('Show All')} />
+        <GenericPollButton onPress={onPressHandler} label={t('Show All')} />
       ) : null}
       {showAllVotes ? (
         <Modal
diff --git a/package/src/components/Poll/hook/useIsPollCreatedByClient.ts b/package/src/components/Poll/hook/useIsPollCreatedByCurrentUser.ts
similarity index 87%
rename from package/src/components/Poll/hook/useIsPollCreatedByClient.ts
rename to package/src/components/Poll/hook/useIsPollCreatedByCurrentUser.ts
index 5d52935623..9cb9d532e9 100644
--- a/package/src/components/Poll/hook/useIsPollCreatedByClient.ts
+++ b/package/src/components/Poll/hook/useIsPollCreatedByCurrentUser.ts
@@ -5,7 +5,7 @@ import { usePollState } from '../hooks/usePollState';
  * React hook to check if the poll was created by the logged in client.
  * @returns Whether the poll was created by the logged in client.
  */
-export const useIsPollCreatedByClient = () => {
+export const useIsPollCreatedByCurrentUser = () => {
   const { createdBy } = usePollState();
   const { client } = useChatContext();
 

From 53b0e40803ae9ef3e8ac328567d834f0268327e3 Mon Sep 17 00:00:00 2001
From: Khushal Agarwal <khushal.agarwal987@gmail.com>
Date: Wed, 11 Feb 2026 17:48:12 +0530
Subject: [PATCH 3/5] fix: poll progress bar refine

---
 .../ProgressControl/ProgressBar.tsx           | 28 +++++++++++--------
 1 file changed, 17 insertions(+), 11 deletions(-)

diff --git a/package/src/components/ProgressControl/ProgressBar.tsx b/package/src/components/ProgressControl/ProgressBar.tsx
index 0a16d1470b..347d868dfd 100644
--- a/package/src/components/ProgressControl/ProgressBar.tsx
+++ b/package/src/components/ProgressControl/ProgressBar.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from 'react';
+import React, { useMemo } from 'react';
 import { ColorValue, StyleSheet, View } from 'react-native';
 
 import { useTheme } from '../../contexts';
@@ -11,20 +11,26 @@ export type ProgressBarProps = {
   filledColor: ColorValue;
   emptyColor: ColorValue;
 };
-export const ProgressBar = (props: ProgressBarProps) => {
-  const [width, setWidth] = useState<number>(0);
-  const { progress, filledColor, emptyColor } = props;
+
+export const ProgressBar = ({ progress, filledColor, emptyColor }: ProgressBarProps) => {
   const styles = useStyles();
+
+  // clamp for safety
+  const value = Math.max(0, Math.min(progress, 1));
+  const unfilledValue = 1 - value;
+
   return (
-    <View
-      style={[styles.container, { backgroundColor: emptyColor }]}
-      onLayout={({ nativeEvent }) => {
-        setWidth(nativeEvent.layout.width);
-      }}
-    >
+    <View style={[styles.container, { backgroundColor: emptyColor }]}>
       <View
-        style={[styles.filledStyle, { backgroundColor: filledColor, width: progress * width }]}
+        style={[
+          styles.filledStyle,
+          {
+            backgroundColor: filledColor,
+            flex: value,
+          },
+        ]}
       />
+      <View style={{ flex: unfilledValue }} />
     </View>
   );
 };

From 69b26e5315266a2a77f9a1f69ac97c366b674d64 Mon Sep 17 00:00:00 2001
From: Khushal Agarwal <khushal.agarwal987@gmail.com>
Date: Wed, 11 Feb 2026 17:54:41 +0530
Subject: [PATCH 4/5] fix: tests

---
 .../__tests__/__snapshots__/AttachButton.test.js.snap  |  3 +++
 .../__tests__/__snapshots__/SendButton.test.js.snap    |  2 ++
 .../__snapshots__/ScrollToBottomButton.test.js.snap    |  1 +
 .../Thread/__tests__/__snapshots__/Thread.test.js.snap | 10 ++++++----
 4 files changed, 12 insertions(+), 4 deletions(-)

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 0f384672ee..99fa039df3 100644
--- a/package/src/components/MessageInput/__tests__/__snapshots__/AttachButton.test.js.snap
+++ b/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,
           ]
         }
       >
diff --git a/package/src/components/MessageInput/__tests__/__snapshots__/SendButton.test.js.snap b/package/src/components/MessageInput/__tests__/__snapshots__/SendButton.test.js.snap
index 364869e599..a954e7caff 100644
--- a/package/src/components/MessageInput/__tests__/__snapshots__/SendButton.test.js.snap
+++ b/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,
           ]
         }
       >
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 565c589967..e0d306f6eb 100644
--- a/package/src/components/MessageList/__tests__/__snapshots__/ScrollToBottomButton.test.js.snap
+++ b/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,
         ]
       }
     >
diff --git a/package/src/components/Thread/__tests__/__snapshots__/Thread.test.js.snap b/package/src/components/Thread/__tests__/__snapshots__/Thread.test.js.snap
index f8132a3a27..e2442685ff 100644
--- a/package/src/components/Thread/__tests__/__snapshots__/Thread.test.js.snap
+++ b/package/src/components/Thread/__tests__/__snapshots__/Thread.test.js.snap
@@ -452,7 +452,7 @@ exports[`Thread should match thread snapshot 1`] = `
                                             "overflow": "hidden",
                                           },
                                           {
-                                            "backgroundColor": "#E9EAED",
+                                            "backgroundColor": "#ebeef1",
                                             "borderBottomLeftRadius": 0,
                                             "borderBottomRightRadius": 16,
                                             "borderColor": "#ECEBEB",
@@ -828,7 +828,7 @@ exports[`Thread should match thread snapshot 1`] = `
                                             "overflow": "hidden",
                                           },
                                           {
-                                            "backgroundColor": "#E9EAED",
+                                            "backgroundColor": "#ebeef1",
                                             "borderBottomLeftRadius": 0,
                                             "borderBottomRightRadius": 16,
                                             "borderColor": "#ECEBEB",
@@ -1242,7 +1242,7 @@ exports[`Thread should match thread snapshot 1`] = `
                                             "overflow": "hidden",
                                           },
                                           {
-                                            "backgroundColor": "#E9EAED",
+                                            "backgroundColor": "#ebeef1",
                                             "borderBottomLeftRadius": 0,
                                             "borderBottomRightRadius": 16,
                                             "borderColor": "#ECEBEB",
@@ -1622,7 +1622,7 @@ exports[`Thread should match thread snapshot 1`] = `
                                             "overflow": "hidden",
                                           },
                                           {
-                                            "backgroundColor": "#E9EAED",
+                                            "backgroundColor": "#ebeef1",
                                             "borderBottomLeftRadius": 0,
                                             "borderBottomRightRadius": 16,
                                             "borderColor": "#ECEBEB",
@@ -1943,6 +1943,7 @@ exports[`Thread should match thread snapshot 1`] = `
                     "height": 48,
                     "width": 48,
                   },
+                  undefined,
                 ]
               }
             >
@@ -2192,6 +2193,7 @@ exports[`Thread should match thread snapshot 1`] = `
                           "height": 32,
                           "width": 32,
                         },
+                        undefined,
                       ]
                     }
                   >

From 1b3bf2b1150b448de9c0ea354247ec782e53a141 Mon Sep 17 00:00:00 2001
From: Khushal Agarwal <khushal.agarwal987@gmail.com>
Date: Wed, 11 Feb 2026 18:07:12 +0530
Subject: [PATCH 5/5] fix: tests

---
 .../Thread/__tests__/__snapshots__/Thread.test.js.snap    | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/package/src/components/Thread/__tests__/__snapshots__/Thread.test.js.snap b/package/src/components/Thread/__tests__/__snapshots__/Thread.test.js.snap
index e2442685ff..e51202cccb 100644
--- a/package/src/components/Thread/__tests__/__snapshots__/Thread.test.js.snap
+++ b/package/src/components/Thread/__tests__/__snapshots__/Thread.test.js.snap
@@ -452,7 +452,7 @@ exports[`Thread should match thread snapshot 1`] = `
                                             "overflow": "hidden",
                                           },
                                           {
-                                            "backgroundColor": "#ebeef1",
+                                            "backgroundColor": "#E9EAED",
                                             "borderBottomLeftRadius": 0,
                                             "borderBottomRightRadius": 16,
                                             "borderColor": "#ECEBEB",
@@ -828,7 +828,7 @@ exports[`Thread should match thread snapshot 1`] = `
                                             "overflow": "hidden",
                                           },
                                           {
-                                            "backgroundColor": "#ebeef1",
+                                            "backgroundColor": "#E9EAED",
                                             "borderBottomLeftRadius": 0,
                                             "borderBottomRightRadius": 16,
                                             "borderColor": "#ECEBEB",
@@ -1242,7 +1242,7 @@ exports[`Thread should match thread snapshot 1`] = `
                                             "overflow": "hidden",
                                           },
                                           {
-                                            "backgroundColor": "#ebeef1",
+                                            "backgroundColor": "#E9EAED",
                                             "borderBottomLeftRadius": 0,
                                             "borderBottomRightRadius": 16,
                                             "borderColor": "#ECEBEB",
@@ -1622,7 +1622,7 @@ exports[`Thread should match thread snapshot 1`] = `
                                             "overflow": "hidden",
                                           },
                                           {
-                                            "backgroundColor": "#ebeef1",
+                                            "backgroundColor": "#E9EAED",
                                             "borderBottomLeftRadius": 0,
                                             "borderBottomRightRadius": 16,
                                             "borderColor": "#ECEBEB",