fix: design ux improvements (#3596)

## 🎯 Goal

Fix a set of design regressions across poll headers, audio attachments,
message metadata, composer/header borders, bottom navigation and stacked
avatars so they match the current design token guidance and visual
specs.

  ## 🛠 Implementation details

- Updated Poll Results and Poll Creation headers to use a secondary
ghost icon only back button with the new `ArrowLeft` icon
- Added `ArrowLeft`, derived from the existing `ArrowUp` path with SVG
rotation, including RTL aware direction
- Fixed single audio attachments in quoted replies without captions so
they render directly on the message bubble surface instead of adding the
darker audio fill
- Preserved the filled audio background when the reply has a caption or
multiple attachments
- Updated composer/header separator borders to use
`semantics.borderCoreSubtle`
- Updated sent message footer spacing so the read receipt and timestamp
use `spacingXxs`
- Updated SampleApp bottom tabs to use
`semantics.backgroundCoreElevation1` and `semantics.borderCoreSubtle`
- Added visible semantic borders to `UserAvatarStack` avatars using
`semantics.borderCoreInverse`
- Added `theme.avatarStack.userAvatarWrapper` so the new avatar stack
style remains theme compliant


## 🎨 UI Changes

<!-- Add relevant screenshots -->

<details>
<summary>iOS</summary>


<table>
    <thead>
        <tr>
            <td>Before</td>
            <td>After</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <!--<img src="" /> -->
            </td>
            <td>
                <!--<img src="" /> -->
            </td>
        </tr>
    </tbody>
</table>
</details>


<details>
<summary>Android</summary>

<table>
    <thead>
        <tr>
            <td>Before</td>
            <td>After</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <!--<img src="" /> -->
            </td>
            <td>
                <!--<img src="" /> -->
            </td>
        </tr>
    </tbody>
</table>
</details>

## 🧪 Testing

<!-- Explain how this change can be tested (or why it can't be tested)
-->

## ☑️ Checklist

- [ ] I have signed the [Stream
CLA](https://docs.google.com/forms/d/e/1FAIpQLScFKsKkAJI7mhCr7K9rEIOpqIDThrWxuvxnwUq2XkHyG154vQ/viewform)
(required)
- [ ] PR targets the `develop` branch
- [ ] Documentation is updated
- [ ] New code is tested in main example apps, including all possible
scenarios
  - [ ] SampleApp iOS and Android
  - [ ] Expo iOS and Android

Author: isekovanic

examples/SampleApp/src/components/BottomTabs.tsx

@@ -27,7 +27,6 @@ const styles = StyleSheet.create({
     paddingVertical: 8,
   },
   tabListContainer: {
-    borderTopColor: 'rgba(0, 0, 0, 0.0677)',
     borderTopWidth: 1,
     flexDirection: 'row',
   },
@@ -128,16 +127,18 @@ const Tab = (props: TabProps) => {
 
 export const BottomTabs: React.FC<BottomTabBarProps> = (props) => {
   const { navigation, state } = props;
-  useTheme();
-  const { white } = useLegacyColors();
+  const {
+    theme: { semantics },
+  } = useTheme();
   const { bottom } = useSafeAreaInsets();
 
   return (
     <View
       style={[
         styles.tabListContainer,
         {
-          backgroundColor: white,
+          backgroundColor: semantics.backgroundCoreElevation1,
+          borderTopColor: semantics.borderCoreSubtle,
           paddingBottom: bottom,
         },
       ]}

package/src/components/Attachment/Attachment.tsx

@@ -219,9 +219,14 @@ const useAudioAttachmentStyles = () => {
   const {
     theme: { semantics },
   } = useTheme();
-  const { isMyMessage, messageHasOnlySingleAttachment } = useMessageContext();
-
-  const showBackgroundTransparent = messageHasOnlySingleAttachment;
+  const { isMyMessage, message, messageHasOnlySingleAttachment } = useMessageContext();
+
+  const messageHasSingleAttachment = message.attachments?.length === 1;
+  const messageHasCaption = !!message.text?.trim();
+  const messageIsQuotedReply = !!(message.quoted_message || message.quoted_message_id);
+  const showBackgroundTransparent =
+    messageHasOnlySingleAttachment ||
+    (messageIsQuotedReply && messageHasSingleAttachment && !messageHasCaption);
 
   return useMemo(() => {
     return StyleSheet.create({

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

@@ -11,14 +11,15 @@ import type { MessageContextValue } from '../../../contexts/messageContext/Messa
 import { MessageProvider } from '../../../contexts/messageContext/MessageContext';
 import type { MessagesContextValue } from '../../../contexts/messagesContext/MessagesContext';
 import { MessagesProvider } from '../../../contexts/messagesContext/MessagesContext';
-import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
+import { mergeThemes, ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
 import {
   generateAudioAttachment,
   generateFileAttachment,
   generateImageAttachment,
   generateVideoAttachment,
 } from '../../../mock-builders/generator/attachment';
 import { generateMessage } from '../../../mock-builders/generator/message';
+import { FileTypes } from '../../../types/types';
 
 import { ImageLoadingFailedIndicator } from '../../Attachment/ImageLoadingFailedIndicator';
 import { ImageLoadingIndicator } from '../../Attachment/ImageLoadingIndicator';
@@ -48,8 +49,11 @@ jest.mock('../../../hooks/usePendingAttachmentUpload', () => ({
   })),
 }));
 
-const getAttachmentComponent = (props: ComponentProps<typeof Attachment>) => {
-  const message = generateMessage();
+const getAttachmentComponent = (
+  props: ComponentProps<typeof Attachment>,
+  messageContextValue: Partial<MessageContextValue> = {},
+) => {
+  const message = messageContextValue.message ?? generateMessage();
   return (
     <ThemeProvider>
       <AudioPlayerProvider value={{ allowConcurrentAudioPlayback: false }}>
@@ -63,7 +67,9 @@ const getAttachmentComponent = (props: ComponentProps<typeof Attachment>) => {
             } as unknown as MessagesContextValue
           }
         >
-          <MessageProvider value={{ message } as unknown as MessageContextValue}>
+          <MessageProvider
+            value={{ message, ...messageContextValue } as unknown as MessageContextValue}
+          >
             <Attachment {...props} />
           </MessageProvider>
         </MessagesProvider>
@@ -79,6 +85,8 @@ const getWaveformBarCount = (root: ReactTestInstance) =>
   }).length;
 
 describe('Attachment', () => {
+  const lightTheme = mergeThemes({ scheme: 'light' });
+
   it('should render File component for "audio" type attachment', async () => {
     const attachment = generateAudioAttachment();
     const { getByTestId } = render(getAttachmentComponent({ attachment }));
@@ -122,6 +130,94 @@ describe('Attachment', () => {
     isSoundPackageAvailable.mockReturnValue(false);
   });
 
+  it('uses a transparent audio player background for quoted replies without captions', async () => {
+    const { isSoundPackageAvailable } = require('../../../native');
+    isSoundPackageAvailable.mockReturnValue(true);
+    const attachment = generateAudioAttachment({
+      duration: 10,
+      waveform_data: [0.2, 0.6, 0.4],
+    });
+    const quotedMessage = generateMessage();
+    const message = generateMessage({
+      attachments: [attachment],
+      quoted_message: quotedMessage,
+      quoted_message_id: quotedMessage.id,
+      text: '',
+    });
+
+    const { getByLabelText } = render(
+      getAttachmentComponent(
+        { attachment },
+        { isMyMessage: false, message, messageHasOnlySingleAttachment: false },
+      ),
+    );
+
+    await waitFor(() => {
+      const style = StyleSheet.flatten(getByLabelText('audio-attachment-preview').props.style);
+      expect(style.backgroundColor).toBe('transparent');
+    });
+    isSoundPackageAvailable.mockReturnValue(false);
+  });
+
+  it('keeps the audio player background for quoted replies with captions', async () => {
+    const { isSoundPackageAvailable } = require('../../../native');
+    isSoundPackageAvailable.mockReturnValue(true);
+    const attachment = generateAudioAttachment({
+      duration: 10,
+      type: FileTypes.VoiceRecording,
+      waveform_data: [0.2, 0.6, 0.4],
+    });
+    const quotedMessage = generateMessage();
+    const message = generateMessage({
+      attachments: [attachment],
+      quoted_message: quotedMessage,
+      quoted_message_id: quotedMessage.id,
+      text: 'caption',
+    });
+
+    const { getByLabelText } = render(
+      getAttachmentComponent(
+        { attachment },
+        { isMyMessage: false, message, messageHasOnlySingleAttachment: false },
+      ),
+    );
+
+    await waitFor(() => {
+      const style = StyleSheet.flatten(getByLabelText('audio-attachment-preview').props.style);
+      expect(style.backgroundColor).toBe(lightTheme.semantics.chatBgAttachmentIncoming);
+    });
+    isSoundPackageAvailable.mockReturnValue(false);
+  });
+
+  it('keeps the audio player background for quoted replies with multiple attachments and no captions', async () => {
+    const { isSoundPackageAvailable } = require('../../../native');
+    isSoundPackageAvailable.mockReturnValue(true);
+    const attachment = generateAudioAttachment({
+      duration: 10,
+      waveform_data: [0.2, 0.6, 0.4],
+    });
+    const quotedMessage = generateMessage();
+    const message = generateMessage({
+      attachments: [attachment, generateAudioAttachment()],
+      quoted_message: quotedMessage,
+      quoted_message_id: quotedMessage.id,
+      text: '',
+    });
+
+    const { getByLabelText } = render(
+      getAttachmentComponent(
+        { attachment },
+        { isMyMessage: false, message, messageHasOnlySingleAttachment: false },
+      ),
+    );
+
+    await waitFor(() => {
+      const style = StyleSheet.flatten(getByLabelText('audio-attachment-preview').props.style);
+      expect(style.backgroundColor).toBe(lightTheme.semantics.chatBgAttachmentIncoming);
+    });
+    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/ImageGallery/components/ImageGalleryFooter.tsx

@@ -200,7 +200,7 @@ const useStyles = () => {
         container: {
           backgroundColor: semantics.backgroundCoreElevation1,
           borderTopWidth: 1,
-          borderTopColor: semantics.borderCoreDefault,
+          borderTopColor: semantics.borderCoreSubtle,
           ...footer.container,
         },
         centerContainer: {

package/src/components/ImageGallery/components/ImageGalleryHeader.tsx

@@ -131,7 +131,7 @@ const useStyles = () => {
           flexDirection: 'row',
           justifyContent: 'space-between',
           borderBottomWidth: 1,
-          borderBottomColor: semantics.borderCoreDefault,
+          borderBottomColor: semantics.borderCoreSubtle,
           ...header.innerContainer,
         },
         rightContainer: {

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

@@ -198,7 +198,7 @@ const useStyles = () => {
         flexDirection: 'row',
         justifyContent: 'center',
         paddingVertical: primitives.spacingXxs,
-        gap: primitives.spacingXs,
+        gap: primitives.spacingXxs,
       },
       name: {
         flexShrink: 1,

package/src/components/MessageInput/MessageComposer.tsx

@@ -376,7 +376,7 @@ const MessageComposerWithContext = (props: MessageComposerPropsWithContext) => {
                     {
                       borderTopWidth: 1,
                       backgroundColor: semantics.backgroundCoreElevation1,
-                      borderColor: semantics.borderCoreDefault,
+                      borderTopColor: semantics.borderCoreSubtle,
                       // paddingBottom: BOTTOM_OFFSET,
                       paddingBottom:
                         selectedPicker && !isKeyboardVisible

package/src/components/MessageInput/SendMessageDisallowedIndicator.tsx

@@ -30,7 +30,7 @@ const useStyles = () => {
     return StyleSheet.create({
       container: {
         backgroundColor: semantics.backgroundCoreApp,
-        borderTopColor: semantics.borderCoreDefault,
+        borderTopColor: semantics.borderCoreSubtle,
         height: 48,
         ...container,
       },

package/src/components/MessageList/__tests__/__snapshots__/TypingIndicator.test.tsx.snap

@@ -81,7 +81,11 @@ exports[`TypingIndicator should match typing indicator snapshot 1`] = `
                     "borderColor": "rgba(26, 27, 37, 0.1)",
                     "borderWidth": 1,
                   },
-                  undefined,
+                  {
+                    "borderColor": "#ffffff",
+                    "borderRadius": 9999,
+                    "borderWidth": 2,
+                  },
                 ]
               }
               testID="avatar-image"
@@ -143,7 +147,11 @@ exports[`TypingIndicator should match typing indicator snapshot 1`] = `
                     "borderColor": "rgba(26, 27, 37, 0.1)",
                     "borderWidth": 1,
                   },
-                  undefined,
+                  {
+                    "borderColor": "#ffffff",
+                    "borderRadius": 9999,
+                    "borderWidth": 2,
+                  },
                 ]
               }
               testID="avatar-image"

package/src/components/Poll/components/CreatePollHeader.tsx

@@ -4,7 +4,7 @@ import { StyleSheet, Text, View } from 'react-native';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
 import { Check, IconProps } from '../../../icons';
-import { Cross } from '../../../icons/xmark-1';
+import { ArrowLeft } from '../../../icons/arrow-left';
 import { primitives } from '../../../theme';
 import { Button } from '../../ui';
 import { useCanCreatePoll } from '../hooks/useCanCreatePoll';
@@ -54,8 +54,9 @@ export const CreatePollHeader = ({
         accessibilityLabelKey='a11y/Close poll creation'
         variant='secondary'
         onPress={onBackPressHandler}
-        type='solid'
-        LeadingIcon={Cross}
+        type='ghost'
+        size='md'
+        LeadingIcon={ArrowLeft}
         iconOnly
       />