feat: allow theming the container for pinned messages (#1867)

* feat: allow theming the container for pinned messages

* Update package/src/components/Message/Message.tsx

Co-authored-by: Santhosh Vaiyapuri <[email protected]>

Co-authored-by: Santhosh Vaiyapuri <[email protected]>

Author: madsroskar

package/src/components/Message/Message.tsx

@@ -282,7 +282,7 @@ const MessageWithContext = <
   const {
     theme: {
       colors: { bg_gradient_start, targetedMessageBackground },
-      messageSimple: { targetedMessageUnderlay },
+      messageSimple: { targetedMessageContainer, targetedMessageUnderlay },
     },
   } = useTheme();
 
@@ -698,7 +698,12 @@ const MessageWithContext = <
 
   return (
     <View
-      style={[message.pinned && { backgroundColor: targetedMessageBackground }]}
+      style={[
+        message.pinned && {
+          ...targetedMessageContainer,
+          backgroundColor: targetedMessageBackground,
+        },
+      ]}
       testID='message-wrapper'
     >
       <View

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

@@ -501,6 +501,7 @@ export type Theme = {
       statusContainer: ViewStyle;
       timeIcon: IconProps;
     };
+    targetedMessageContainer: ViewStyle;
     targetedMessageUnderlay: ViewStyle;
     videoThumbnail: {
       container: ViewStyle;
@@ -1042,6 +1043,7 @@ export const defaultTheme: Theme = {
         width: DEFAULT_STATUS_ICON_SIZE,
       },
     },
+    targetedMessageContainer: {},
     targetedMessageUnderlay: {},
     videoThumbnail: {
       container: {},