stream-chat-react-native-core 9.7.3 → 9.7.4

package/src/components/Attachment/Attachment.tsx

@@ -257,7 +257,7 @@ const useAudioAttachmentStyles = () => {
           : semantics.chatBorderOnChatIncoming,
       },
       durationText: {
-        color: semantics.chatTextIncoming,
+        color: isMyMessage ? semantics.chatTextOutgoing : semantics.chatTextIncoming,
         fontWeight: primitives.typographyFontWeightSemiBold,
       },
       leftContainer: {

package/src/components/Attachment/Audio/PlayPauseButton.tsx

@@ -65,7 +65,7 @@ const useStyles = () => {
         justifyContent: 'center',
         alignItems: 'center',
         borderWidth: 1,
-        borderColor: semantics.chatBorderOnChatIncoming,
+        borderColor: semantics.controlPlaybackToggleBorder,
       },
     });
   }, [semantics]);

package/src/components/Attachment/Audio/__tests__/PlayPauseButton.test.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+
+import { render, screen } from '@testing-library/react-native';
+
+import { mergeThemes, ThemeProvider } from '../../../../contexts/themeContext/ThemeContext';
+import { PlayPauseButton } from '../PlayPauseButton';
+
+describe('PlayPauseButton', () => {
+  const lightTheme = mergeThemes({ scheme: 'light' });
+
+  const renderButton = (containerStyle?: Record<string, unknown>) =>
+    render(
+      <ThemeProvider>
+        <PlayPauseButton
+          containerStyle={containerStyle}
+          isPlaying={false}
+          onPress={jest.fn()}
+          testID='play-pause-button'
+        />
+      </ThemeProvider>,
+    );
+
+  const borderColorOf = () => {
+    const style = screen.getByTestId('play-pause-button').props.style;
+    return StyleSheet.flatten(typeof style === 'function' ? style({ pressed: false }) : style)
+      ?.borderColor;
+  };
+
+  // This control also renders in the composer's attachment previews, which are
+  // not a message bubble - so it must not reach for a chat side token.
+  it('defaults to the neutral playback toggle border, not a chat bubble border', () => {
+    renderButton();
+
+    expect(borderColorOf()).toBe(lightTheme.semantics.controlPlaybackToggleBorder);
+    expect(borderColorOf()).not.toBe(lightTheme.semantics.chatBorderOnChatIncoming);
+  });
+
+  it('lets in-bubble callers override the border with the resolved chat side', () => {
+    renderButton({ borderColor: lightTheme.semantics.chatBorderOnChatOutgoing });
+
+    expect(borderColorOf()).toBe(lightTheme.semantics.chatBorderOnChatOutgoing);
+  });
+});

package/src/components/Attachment/UrlPreview/URLPreview.tsx

@@ -68,10 +68,6 @@ const URLPreviewWithContext = (props: URLPreviewPropsWithContext) => {
 
   const { icons } = useComponentsContext();
 
-  const {
-    theme: { semantics },
-  } = useTheme();
-
   const { image_url, og_scrape_url, text, thumb_url, title, type } = attachment;
 
   const {
@@ -156,7 +152,7 @@ const URLPreviewWithContext = (props: URLPreviewPropsWithContext) => {
           </Text>
         ) : null}
         <View style={[styles.linkPreview, linkPreview, stylesProp.linkPreview]}>
-          <icons.Link height={12} width={12} stroke={semantics.chatTextIncoming} />
+          <icons.Link height={12} width={12} stroke={styles.linkPreviewText.color} />
           <Text
             numberOfLines={1}
             style={[styles.linkPreviewText, linkPreviewText, stylesProp.linkPreviewText]}
@@ -267,13 +263,13 @@ const useStyles = () => {
           padding: primitives.spacingSm,
         },
         title: {
-          color: semantics.chatTextIncoming,
+          color: isMyMessage ? semantics.chatTextOutgoing : semantics.chatTextIncoming,
           fontSize: primitives.typographyFontSizeSm,
           fontWeight: primitives.typographyFontWeightSemiBold,
           lineHeight: primitives.typographyLineHeightTight,
         },
         description: {
-          color: semantics.chatTextIncoming,
+          color: isMyMessage ? semantics.chatTextOutgoing : semantics.chatTextIncoming,
           fontSize: primitives.typographyFontSizeXs,
           fontWeight: primitives.typographyFontWeightRegular,
           lineHeight: primitives.typographyLineHeightTight,
@@ -284,7 +280,7 @@ const useStyles = () => {
           gap: primitives.spacingXxs,
         },
         linkPreviewText: {
-          color: semantics.chatTextIncoming,
+          color: isMyMessage ? semantics.chatTextOutgoing : semantics.chatTextIncoming,
           fontSize: primitives.typographyFontSizeXs,
           fontWeight: primitives.typographyFontWeightRegular,
           lineHeight: primitives.typographyLineHeightTight,

package/src/components/Attachment/UrlPreview/URLPreviewCompact.tsx

@@ -64,10 +64,6 @@ const URLPreviewCompactWithContext = (props: URLPreviewCompactPropsWithContext)
 
   const { icons } = useComponentsContext();
 
-  const {
-    theme: { semantics },
-  } = useTheme();
-
   const { image_url, og_scrape_url, text, thumb_url, title: titleText, type } = attachment;
 
   const {
@@ -158,7 +154,7 @@ const URLPreviewCompactWithContext = (props: URLPreviewCompactPropsWithContext)
             </Text>
           ) : null}
           <View style={[styles.linkPreview, linkPreview, stylesProp.linkPreview]}>
-            <icons.Link height={12} width={12} stroke={semantics.chatTextIncoming} />
+            <icons.Link height={12} width={12} stroke={styles.linkPreviewText.color} />
             <Text
               numberOfLines={1}
               style={[styles.linkPreviewText, linkPreviewText, stylesProp.linkPreviewText]}
@@ -271,13 +267,13 @@ const useStyles = () => {
           flexShrink: 1,
         },
         title: {
-          color: semantics.chatTextIncoming,
+          color: isMyMessage ? semantics.chatTextOutgoing : semantics.chatTextIncoming,
           fontSize: primitives.typographyFontSizeSm,
           fontWeight: primitives.typographyFontWeightSemiBold,
           lineHeight: primitives.typographyLineHeightTight,
         },
         description: {
-          color: semantics.chatTextIncoming,
+          color: isMyMessage ? semantics.chatTextOutgoing : semantics.chatTextIncoming,
           fontSize: primitives.typographyFontSizeXs,
           fontWeight: primitives.typographyFontWeightRegular,
           lineHeight: primitives.typographyLineHeightTight,
@@ -288,7 +284,7 @@ const useStyles = () => {
           gap: primitives.spacingXxs,
         },
         linkPreviewText: {
-          color: semantics.chatTextIncoming,
+          color: isMyMessage ? semantics.chatTextOutgoing : semantics.chatTextIncoming,
           fontSize: primitives.typographyFontSizeXs,
           fontWeight: primitives.typographyFontWeightRegular,
           lineHeight: primitives.typographyLineHeightTight,

package/src/components/Attachment/UrlPreview/__tests__/URLPreview.test.tsx

@@ -0,0 +1,92 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+
+import { cleanup, render, screen, waitFor } from '@testing-library/react-native';
+
+import type { MessageContextValue } from '../../../../contexts/messageContext/MessageContext';
+import { MessageProvider } from '../../../../contexts/messageContext/MessageContext';
+import type { MessagesContextValue } from '../../../../contexts/messagesContext/MessagesContext';
+import { MessagesProvider } from '../../../../contexts/messagesContext/MessagesContext';
+import { mergeThemes, ThemeProvider } from '../../../../contexts/themeContext/ThemeContext';
+import { generateCardAttachment } from '../../../../mock-builders/generator/attachment';
+import { generateMessage } from '../../../../mock-builders/generator/message';
+import { URLPreview } from '../URLPreview';
+import { URLPreviewCompact } from '../URLPreviewCompact';
+
+const lightTheme = mergeThemes({ scheme: 'light' });
+
+/**
+ * Both URL preview variants resolve every text colour from the same
+ * incoming/outgoing pair, so the assertions are shared.
+ */
+describe.each([
+  ['URLPreview', URLPreview],
+  ['URLPreviewCompact', URLPreviewCompact],
+])('%s chat text side', (_name, Component) => {
+  const renderPreview = (messageContextValue: Partial<MessageContextValue> = {}) => {
+    const attachment = generateCardAttachment({ title: 'A title', text: 'A description' });
+
+    return render(
+      <ThemeProvider>
+        <MessagesProvider value={{} as unknown as MessagesContextValue}>
+          <MessageProvider
+            value={
+              {
+                message: generateMessage(),
+                ...messageContextValue,
+              } as unknown as MessageContextValue
+            }
+          >
+            <Component attachment={attachment} />
+          </MessageProvider>
+        </MessagesProvider>
+      </ThemeProvider>,
+    );
+  };
+
+  const colorOf = (text: string) => StyleSheet.flatten(screen.getByText(text).props.style)?.color;
+
+  afterEach(cleanup);
+
+  it('uses the outgoing chat text colour on our own message', async () => {
+    renderPreview({ isMyMessage: true });
+
+    await waitFor(() => {
+      expect(colorOf('A title')).toBe(lightTheme.semantics.chatTextOutgoing);
+    });
+    expect(colorOf('A description')).toBe(lightTheme.semantics.chatTextOutgoing);
+  });
+
+  it("uses the incoming chat text colour on another user's message", async () => {
+    renderPreview({ isMyMessage: false });
+
+    await waitFor(() => {
+      expect(colorOf('A title')).toBe(lightTheme.semantics.chatTextIncoming);
+    });
+    expect(colorOf('A description')).toBe(lightTheme.semantics.chatTextIncoming);
+  });
+
+  it('uses the outgoing attachment background on our own message', async () => {
+    renderPreview({ isMyMessage: true });
+
+    await waitFor(() => {
+      expect(StyleSheet.flatten(screen.getByTestId('card-attachment').props.style)).toEqual(
+        expect.objectContaining({
+          backgroundColor: lightTheme.semantics.chatBgAttachmentOutgoing,
+        }),
+      );
+    });
+  });
+
+  it('strokes the link icon with the same colour as the link text', async () => {
+    renderPreview({ isMyMessage: true });
+
+    // The URL text and its leading icon must not disagree on the side.
+    await waitFor(() => {
+      expect(screen.getByTestId('card-attachment')).toBeTruthy();
+    });
+
+    const linkIcon = screen.UNSAFE_getByProps({ stroke: lightTheme.semantics.chatTextOutgoing });
+    expect(linkIcon).toBeTruthy();
+  });
+});

package/src/components/Attachment/__tests__/Attachment.test.tsx

@@ -218,6 +218,54 @@ describe('Attachment', () => {
     isSoundPackageAvailable.mockReturnValue(false);
   });
 
+  it('uses the outgoing audio player background on our own message', async () => {
+    const { isSoundPackageAvailable } = require('../../../native');
+    isSoundPackageAvailable.mockReturnValue(true);
+    const attachment = generateAudioAttachment({ duration: 10, waveform_data: [0.2, 0.6] });
+    const message = generateMessage({ attachments: [attachment, generateAudioAttachment()] });
+
+    const { getByLabelText } = render(
+      getAttachmentComponent(
+        { attachment },
+        { isMyMessage: true, message, messageHasOnlySingleAttachment: false },
+      ),
+    );
+
+    await waitFor(() => {
+      const style = StyleSheet.flatten(getByLabelText('audio-attachment-preview').props.style);
+      expect(style.backgroundColor).toBe(lightTheme.semantics.chatBgAttachmentOutgoing);
+    });
+    isSoundPackageAvailable.mockReturnValue(false);
+  });
+
+  it('resolves the audio duration label colour from the message side', async () => {
+    const { isSoundPackageAvailable } = require('../../../native');
+    isSoundPackageAvailable.mockReturnValue(true);
+    const attachment = generateAudioAttachment({ duration: 10, waveform_data: [0.2, 0.6] });
+    const message = generateMessage({ attachments: [attachment] });
+
+    const { getByLabelText } = render(
+      getAttachmentComponent(
+        { attachment },
+        { isMyMessage: true, message, messageHasOnlySingleAttachment: false },
+      ),
+    );
+
+    // NOTE: `StableDurationLabel` applies its own `visibleStyle` last, which
+    // always sets `color` from the playback state - so this asserts the wiring
+    // reaching the label, not the final rendered pixel. See the reserve label.
+    await waitFor(() => {
+      expect(getByLabelText('Progress Duration').props.style).toEqual(
+        expect.arrayContaining([
+          expect.arrayContaining([
+            expect.objectContaining({ color: lightTheme.semantics.chatTextOutgoing }),
+          ]),
+        ]),
+      );
+    });
+    isSoundPackageAvailable.mockReturnValue(false);
+  });
+
   it('should render UrlPreview component if attachment has title_link or og_scrape_url', async () => {
     const attachment = generateImageAttachment({
       og_scrape_url: uuidv4(),

package/src/components/Message/MessageItemView/MessageItemView.tsx

@@ -171,7 +171,6 @@ const MessageItemViewWithContext = (props: MessageItemViewPropsWithContext) => {
 
   const {
     isMessageErrorType,
-    isMessageReceivedOrErrorType,
     isMessageTypeDeleted,
     isVeryLastMessage,
     messageGroupedSingleOrBottom,
@@ -200,7 +199,7 @@ const MessageItemViewWithContext = (props: MessageItemViewPropsWithContext) => {
     backgroundColor = 'transparent';
   } else if (hasStandaloneGiphyOrImgur) {
     backgroundColor = 'transparent';
-  } else if (isMessageReceivedOrErrorType) {
+  } else if (!isMyMessage) {
     backgroundColor = semantics.chatBgIncoming;
   }
 

package/src/components/Message/MessageItemView/__tests__/MessageTextContainer.test.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
-import { Text } from 'react-native';
+import { StyleSheet, Text } from 'react-native';
 
 import { cleanup, render, waitFor } from '@testing-library/react-native';
 
 import { WithComponents } from '../../../../contexts/componentsContext/ComponentsContext';
 import { OverlayProvider } from '../../../../contexts/overlayContext/OverlayProvider';
-import { ThemeProvider } from '../../../../contexts/themeContext/ThemeContext';
+import { mergeThemes, ThemeProvider } from '../../../../contexts/themeContext/ThemeContext';
 import { defaultTheme } from '../../../../contexts/themeContext/utils/theme';
 import { getOrCreateChannelApi } from '../../../../mock-builders/api/getOrCreateChannel';
 import { useMockedApis } from '../../../../mock-builders/api/useMockedApis';
@@ -22,6 +22,8 @@ import { MessageList } from '../../../MessageList/MessageList';
 import { MessageTextContainer } from '../MessageTextContainer';
 
 describe('MessageTextContainer', () => {
+  const lightTheme = mergeThemes({ scheme: 'light' });
+
   afterEach(cleanup);
 
   it('should render message text container', async () => {
@@ -110,4 +112,20 @@ describe('MessageTextContainer', () => {
       expect(getByText(message.i18n.no_text)).toBeTruthy();
     });
   });
+
+  it('renders our own message text with the outgoing chat text colour', async () => {
+    const message = generateMessage({ user: generateStaticUser(1) });
+
+    const { getByText } = render(
+      <ThemeProvider>
+        <MessageTextContainer isMyMessage message={message} />
+      </ThemeProvider>,
+    );
+
+    await waitFor(() => {
+      expect(StyleSheet.flatten(getByText(message.text as string).props.style)?.color).toBe(
+        lightTheme.semantics.chatTextOutgoing,
+      );
+    });
+  });
 });

package/src/components/Message/MessageItemView/__tests__/__snapshots__/MessageAuthor.test.tsx.snap

@@ -22,10 +22,10 @@ exports[`MessageAuthor should render message author 1`] = `
             "width": 32,
           },
           {
-            "backgroundColor": "#006970",
+            "backgroundColor": "#a9e4ea",
           },
           {
-            "borderColor": "rgba(255, 255, 255, 0.2)",
+            "borderColor": "rgba(26, 27, 37, 0.1)",
             "borderWidth": 1,
           },
           undefined,

package/src/components/MessageList/MessageFlashList.tsx

@@ -4,6 +4,7 @@ import {
   ScrollViewProps,
   StyleSheet,
   View,
+  useColorScheme,
   ViewabilityConfig,
   ViewToken,
 } from 'react-native';
@@ -401,11 +402,12 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
   const styles = useStyles();
 
   const myMessageThemeString = useMemo(() => JSON.stringify(myMessageTheme), [myMessageTheme]);
+  const scheme = useColorScheme();
 
   const modifiedTheme = useMemo(
-    () => mergeThemes({ style: myMessageTheme, theme }),
+    () => mergeThemes({ scheme, style: myMessageTheme, theme }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [myMessageThemeString, theme],
+    [myMessageThemeString, scheme, theme],
   );
 
   const { processedMessageList, rawMessageList, viewabilityChangedCallback } = useMessageList({

package/src/components/MessageList/MessageList.tsx

@@ -7,6 +7,7 @@ import {
   ScrollViewProps,
   StyleSheet,
   View,
+  useColorScheme,
   ViewabilityConfig,
   ViewToken,
 } from 'react-native';
@@ -394,11 +395,12 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
   });
 
   const myMessageThemeString = useMemo(() => JSON.stringify(myMessageTheme), [myMessageTheme]);
+  const scheme = useColorScheme();
 
   const modifiedTheme = useMemo(
-    () => mergeThemes({ style: myMessageTheme, theme }),
+    () => mergeThemes({ scheme, style: myMessageTheme, theme }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [myMessageThemeString, theme],
+    [myMessageThemeString, scheme, theme],
   );
 
   /**

package/src/components/Poll/Poll.tsx

@@ -6,6 +6,7 @@ import { PollOption as PollOptionClass } from 'stream-chat';
 import { PollOption, ShowAllOptionsButton } from './components';
 import { PollUIStateProvider } from './contexts/PollUIStateContext';
 
+import { useIsPollCreatedByCurrentUser } from './hook/useIsPollCreatedByCurrentUser';
 import { usePollState } from './hooks/usePollState';
 
 import {
@@ -105,6 +106,7 @@ const useStyles = () => {
   const {
     theme: { semantics },
   } = useTheme();
+  const isPollCreatedByClient = useIsPollCreatedByCurrentUser();
   return useMemo(() => {
     return StyleSheet.create({
       container: {
@@ -114,14 +116,14 @@ const useStyles = () => {
       },
       headerContainer: { gap: primitives.spacingXxs },
       headerSubtitle: {
-        color: semantics.chatTextIncoming,
+        color: isPollCreatedByClient ? semantics.chatTextOutgoing : semantics.chatTextIncoming,
         fontSize: primitives.typographyFontSizeSm,
         fontWeight: primitives.typographyFontWeightRegular,
         lineHeight: primitives.typographyLineHeightTight,
         textAlign: 'left',
       },
       headerTitle: {
-        color: semantics.chatTextIncoming,
+        color: isPollCreatedByClient ? semantics.chatTextOutgoing : semantics.chatTextIncoming,
         fontSize: primitives.typographyFontSizeMd,
         fontWeight: primitives.typographyFontWeightSemiBold,
         lineHeight: primitives.typographyLineHeightNormal,
@@ -131,5 +133,5 @@ const useStyles = () => {
         gap: primitives.spacingMd,
       },
     });
-  }, [semantics]);
+  }, [isPollCreatedByClient, semantics]);
 };

package/src/components/Poll/__tests__/Poll.test.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+
+import { render, screen } from '@testing-library/react-native';
+
+import {
+  OwnCapabilitiesProvider,
+  PollContextProvider,
+  ThemeProvider,
+  TranslationProvider,
+} from '../../../contexts';
+import { mergeThemes } from '../../../contexts/themeContext/ThemeContext';
+import { generateMessage } from '../../../mock-builders/generator/message';
+import { PollHeader } from '../Poll';
+
+const mockIsPollCreatedByCurrentUser = jest.fn();
+
+jest.mock('../hook/useIsPollCreatedByCurrentUser', () => ({
+  useIsPollCreatedByCurrentUser: () => mockIsPollCreatedByCurrentUser(),
+}));
+
+jest.mock('../hooks/usePollState', () => ({
+  usePollState: () => ({
+    enforceUniqueVote: true,
+    isClosed: false,
+    maxVotesAllowed: undefined,
+    name: 'A poll question',
+  }),
+}));
+
+describe('PollHeader chat text side', () => {
+  const lightTheme = mergeThemes({ scheme: 'light' });
+
+  const renderHeader = () =>
+    render(
+      <ThemeProvider>
+        <TranslationProvider value={{ t: (key: string) => key } as never}>
+          <OwnCapabilitiesProvider value={{} as never}>
+            <PollContextProvider
+              value={{ message: generateMessage(), poll: { data: {} } as never }}
+            >
+              <PollHeader />
+            </PollContextProvider>
+          </OwnCapabilitiesProvider>
+        </TranslationProvider>
+      </ThemeProvider>,
+    );
+
+  const colorOf = (text: string) => StyleSheet.flatten(screen.getByText(text).props.style)?.color;
+
+  afterEach(() => {
+    mockIsPollCreatedByCurrentUser.mockReset();
+  });
+
+  it('uses the outgoing chat text colour for our own poll', () => {
+    mockIsPollCreatedByCurrentUser.mockReturnValue(true);
+    renderHeader();
+
+    expect(colorOf('A poll question')).toBe(lightTheme.semantics.chatTextOutgoing);
+    expect(colorOf('Select one')).toBe(lightTheme.semantics.chatTextOutgoing);
+  });
+
+  it("uses the incoming chat text colour for another user's poll", () => {
+    mockIsPollCreatedByCurrentUser.mockReturnValue(false);
+    renderHeader();
+
+    expect(colorOf('A poll question')).toBe(lightTheme.semantics.chatTextIncoming);
+    expect(colorOf('Select one')).toBe(lightTheme.semantics.chatTextIncoming);
+  });
+});

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

@@ -10,6 +10,11 @@ export type PollButtonProps = {
 };
 
 export type PollVoteButtonProps = {
+  /**
+   * Render with the incoming chat tokens regardless of poll ownership. Set on
+   * surfaces that are not a message bubble, such as the full-options list.
+   */
+  forceIncoming?: boolean;
   option: PollOption;
   style?: StyleProp<ViewStyle>;
 } & Pick<PollButtonProps, 'onPress'>;

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

@@ -247,6 +247,8 @@ const useStyles = () => {
           ? semantics.chatBorderOnChatOutgoing
           : semantics.chatBorderOnChatIncoming,
       },
+      // NOTE: PollButtons only ever renders on the in-bubble surface (it is what
+      // opens the full-options modal), so it needs no `forceIncoming` handling.
     });
   }, [semantics, isPollCreatedByClient]);
 };

package/src/components/Poll/components/PollOption.tsx

@@ -92,7 +92,11 @@ export const PollAllOptions = ({
 export const PollOption = ({ option, showProgressBar = true, forceIncoming }: PollOptionProps) => {
   const { latestVotesByOption, voteCountsByOption, voteCount } = usePollState();
   const { t } = useTranslationContext();
-  const styles = useStyles();
+  const isPollCreatedByClient = useIsPollCreatedByCurrentUser();
+  // `forceIncoming` is set on the full-options surface, which is a neutral card
+  // rather than a bubble - so it wins over poll ownership.
+  const isIncoming = !isPollCreatedByClient || !!forceIncoming;
+  const styles = useStyles({ isIncoming });
 
   const relevantVotes = useMemo(
     () => latestVotesByOption?.[option.id] || [],
@@ -111,21 +115,17 @@ export const PollOption = ({ option, showProgressBar = true, forceIncoming }: Po
       semantics,
     },
   } = useTheme();
-  const isPollCreatedByClient = useIsPollCreatedByCurrentUser();
+  const unFilledColor = isIncoming
+    ? semantics.chatPollProgressTrackIncoming
+    : semantics.chatPollProgressTrackOutgoing;
 
-  const unFilledColor =
-    isPollCreatedByClient && !forceIncoming
-      ? semantics.chatPollProgressTrackOutgoing
-      : semantics.chatPollProgressTrackIncoming;
-
-  const filledColor =
-    isPollCreatedByClient && !forceIncoming
-      ? semantics.chatPollProgressFillOutgoing
-      : semantics.chatPollProgressFillIncoming;
+  const filledColor = isIncoming
+    ? semantics.chatPollProgressFillIncoming
+    : semantics.chatPollProgressFillOutgoing;
 
   return (
     <View style={[styles.container, container]}>
-      <VoteButton option={option} />
+      <VoteButton forceIncoming={forceIncoming} option={option} />
       <View style={[styles.info, info]}>
         <View style={[styles.header, header]}>
           <Text ellipsizeMode='tail' numberOfLines={2} style={[styles.text, text]}>
@@ -163,7 +163,7 @@ export const PollOption = ({ option, showProgressBar = true, forceIncoming }: Po
   );
 };
 
-export const VoteButton = ({ onPress, option }: PollVoteButtonProps) => {
+export const VoteButton = ({ forceIncoming, onPress, option }: PollVoteButtonProps) => {
   const { icons } = useComponentsContext();
   const { message, poll } = usePollContext();
   const { isClosed, ownVotesByOptionId } = usePollState();
@@ -172,7 +172,8 @@ export const VoteButton = ({ onPress, option }: PollVoteButtonProps) => {
     theme: { semantics },
   } = useTheme();
   const isPollCreatedByClient = useIsPollCreatedByCurrentUser();
-  const styles = useStyles();
+  const isIncoming = !isPollCreatedByClient || !!forceIncoming;
+  const styles = useStyles({ isIncoming });
 
   const {
     theme: {
@@ -212,9 +213,9 @@ export const VoteButton = ({ onPress, option }: PollVoteButtonProps) => {
         {
           borderWidth: hasVote ? 0 : 1,
           backgroundColor: hasVote ? semantics.accentPrimary : 'transparent',
-          borderColor: isPollCreatedByClient
-            ? semantics.chatBorderOnChatOutgoing
-            : semantics.chatBorderOnChatIncoming,
+          borderColor: isIncoming
+            ? semantics.chatBorderOnChatIncoming
+            : semantics.chatBorderOnChatOutgoing,
         },
         voteButtonContainer,
       ]}
@@ -224,7 +225,7 @@ export const VoteButton = ({ onPress, option }: PollVoteButtonProps) => {
   ) : null;
 };
 
-const useStyles = () => {
+const useStyles = ({ isIncoming }: { isIncoming: boolean }) => {
   const {
     theme: { semantics },
   } = useTheme();
@@ -242,7 +243,7 @@ const useStyles = () => {
         minWidth: 0,
       },
       text: {
-        color: semantics.chatTextIncoming,
+        color: isIncoming ? semantics.chatTextIncoming : semantics.chatTextOutgoing,
         flexGrow: 1,
         flexShrink: 1,
         fontSize: primitives.typographyFontSizeSm,
@@ -264,7 +265,7 @@ const useStyles = () => {
         minHeight: 20,
       },
       votesText: {
-        color: semantics.chatTextIncoming,
+        color: isIncoming ? semantics.chatTextIncoming : semantics.chatTextOutgoing,
         fontSize: primitives.typographyFontSizeXs,
         fontWeight: primitives.typographyFontWeightRegular,
         lineHeight: primitives.typographyLineHeightTight,
@@ -281,7 +282,7 @@ const useStyles = () => {
         width: 24,
       },
     });
-  }, [semantics]);
+  }, [isIncoming, semantics]);
 };
 
 const useAllOptionStyles = () => {