fix: theming fixes (avatar, reaction pill, force message alignment) (#3728)

## 🎯 Goal

A few small fixes for issues spotted during AI skill tests:
- `avatar` theming key wasn't used and had an outdated shape. It's
technically a breaking change, but since the shape is broken currently,
it should be fine
- Adds theme keys to fully style the reaction pill's selected and
pressed states (previously only the background could've been changed)
- Two small fix for `forceAlignMessages="'left'"` setting

## 🛠 Implementation details

<!-- Provide a description of the implementation -->

## 🎨 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: szuperaz

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

@@ -190,7 +190,7 @@ const MessageContentWithContext = (props: MessageContentPropsWithContext) => {
     let computedBottomRightRadius = components.messageBubbleRadiusGroupBottom;
     if (isBottomOrSingle) {
       // add relevant sharp corner (the "tail")
-      if (isMyMessage) {
+      if (alignment === 'right') {
         computedBottomRightRadius = components.messageBubbleRadiusTail;
       } else {
         computedBottomLeftRadius = components.messageBubbleRadiusTail;
@@ -208,14 +208,14 @@ const MessageContentWithContext = (props: MessageContentPropsWithContext) => {
 
     return style;
   }, [
+    alignment,
     backgroundColor,
     borderBottomLeftRadius,
     borderBottomRightRadius,
     borderRadius,
     borderTopLeftRadius,
     borderTopRightRadius,
     groupStyles,
-    isMyMessage,
   ]);
 
   const { setNativeScrollability } = useMessageListItemContext();

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

@@ -221,7 +221,7 @@ const MessageItemViewWithContext = (props: MessageItemViewPropsWithContext) => {
         <View
           style={[
             styles.contentContainer,
-            isMyMessage ? styles.rightAlignItems : styles.leftAlignItems,
+            alignment === 'right' ? styles.rightAlignItems : styles.leftAlignItems,
             isMessageErrorType ? errorContainer : {},
           ]}
           testID='message-components'

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

@@ -28,6 +28,8 @@ export const ReactionListItemWrapper = (props: ReactionListItemWrapperProps) =>
                 ? semantics.backgroundUtilityPressed
                 : semantics.reactionBg,
           },
+          selected && styles.containerSelected,
+          pressed && styles.containerPressed,
           style,
         ]}
         {...rest}
@@ -43,7 +45,7 @@ const useStyles = () => {
     theme: {
       semantics,
       messageItemView: {
-        reactionListItemWrapper: { wrapper, container },
+        reactionListItemWrapper: { wrapper, container, containerSelected, containerPressed },
       },
     },
   } = useTheme();
@@ -61,11 +63,17 @@ const useStyles = () => {
         gap: primitives.spacingXxs,
         ...container,
       },
+      containerPressed: {
+        ...containerPressed,
+      },
+      containerSelected: {
+        ...containerSelected,
+      },
       wrapper: {
         backgroundColor: semantics.reactionBg,
         borderRadius: primitives.radiusMax,
         ...wrapper,
       },
     });
-  }, [semantics, wrapper, container]);
+  }, [semantics, wrapper, container, containerSelected, containerPressed]);
 };

package/src/components/ui/Avatar/Avatar.tsx

@@ -85,7 +85,7 @@ export const Avatar = (props: AvatarProps) => {
 
 const useStyles = () => {
   const {
-    theme: { semantics },
+    theme: { avatar, semantics },
   } = useTheme();
   const { borderCoreOpacitySubtle } = semantics;
   return useMemo(
@@ -94,15 +94,19 @@ const useStyles = () => {
         border: {
           borderColor: borderCoreOpacitySubtle,
           borderWidth: 1,
+          ...avatar.border,
         },
         container: {
           alignItems: 'center',
           borderRadius: primitives.radiusMax,
           justifyContent: 'center',
           overflow: 'hidden',
+          ...avatar.container,
+        },
+        image: {
+          ...avatar.image,
         },
-        image: {},
       }),
-    [borderCoreOpacitySubtle],
+    [avatar.border, avatar.container, avatar.image, borderCoreOpacitySubtle],
   );
 };

package/src/components/ui/Avatar/AvatarGroup.tsx

@@ -11,7 +11,6 @@ import { UserAvatar, UserAvatarProps } from './UserAvatar';
 
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { PeopleIcon } from '../../../icons/users';
-import { primitives } from '../../../theme';
 import { BadgeCount, BadgeCountProps, OnlineIndicator, OnlineIndicatorProps } from '../Badge';
 
 export type AvatarGroupProps = {
@@ -217,7 +216,6 @@ const useUserAvatarGroupStyles = () => {
         userAvatarWrapper: {
           borderWidth: 2,
           borderColor: semantics.borderCoreInverse,
-          borderRadius: primitives.radiusMax,
         },
         onlineIndicatorWrapper: {
           position: 'absolute',

package/src/contexts/themeContext/utils/theme.ts

@@ -5,7 +5,6 @@ import {
   type TextStyle,
   type ViewStyle,
 } from 'react-native';
-import type { CircleProps } from 'react-native-svg';
 
 import type { IconProps } from '../../../icons/utils/base';
 import { primitives, lightSemantics, darkSemantics } from '../../../theme';
@@ -139,11 +138,9 @@ export type Theme = {
     speedChangeButtonText: TextStyle;
   };
   avatar: {
-    BASE_AVATAR_SIZE: number;
+    border: ViewStyle;
     container: ViewStyle;
     image: ImageStyle;
-    presenceIndicator: CircleProps;
-    presenceIndicatorContainer: ViewStyle;
   };
   avatarStack: {
     userAvatarWrapper: ViewStyle;
@@ -967,6 +964,8 @@ export type Theme = {
     reactionListItemWrapper: {
       wrapper: ViewStyle;
       container: ViewStyle;
+      containerSelected: ViewStyle;
+      containerPressed: ViewStyle;
     };
     reactionListTop: {
       container: ViewStyle;
@@ -1256,20 +1255,9 @@ export const defaultTheme: Theme = {
     speedChangeButtonText: {},
   },
   avatar: {
-    BASE_AVATAR_SIZE,
+    border: {},
     container: {},
-    image: {
-      borderRadius: 16,
-      height: 32,
-      width: 32,
-    },
-    presenceIndicator: {
-      cx: 6,
-      cy: 6,
-      r: 5,
-      strokeWidth: 2,
-    },
-    presenceIndicatorContainer: {},
+    image: {},
   },
   avatarStack: {
     userAvatarWrapper: {},
@@ -2062,6 +2050,8 @@ export const defaultTheme: Theme = {
     reactionListItemWrapper: {
       wrapper: {},
       container: {},
+      containerSelected: {},
+      containerPressed: {},
     },
     reactionListTop: {
       container: {},