using theme.semanticColors.errorBackground to style background of failed messages

Author: mgamis-msft

packages/react-components/src/components/MessageThread.tsx

@@ -331,6 +331,7 @@ const memoizeAllMessages = memoizeFnAll(
     ) => JSX.Element,
     defaultChatMessageRenderer: (message: MessageProps) => JSX.Element,
     strings: MessageThreadStrings,
+    errorBackground: string,
     _attached?: boolean | string,
     statusToRender?: MessageStatus,
     participantCount?: number,
@@ -353,7 +354,7 @@ const memoizeAllMessages = memoizeFnAll(
       case 'chat': {
         const myChatMessageStyle =
           styles?.myChatMessageContainer || message.status === 'failed'
-            ? FailedMyChatMessageContainer
+            ? FailedMyChatMessageContainer(errorBackground)
             : defaultMyChatMessageContainer;
         const chatMessageStyle = styles?.chatMessageContainer || defaultChatMessageContainer;
         messageProps.messageContainerStyle = message.mine ? myChatMessageStyle : chatMessageStyle;
@@ -1011,6 +1012,8 @@ export const MessageThread = (props: MessageThreadProps): JSX.Element => {
     []
   );
 
+  const theme = useTheme();
+
   const messagesToDisplay = useMemo(
     () =>
       memoizeAllMessages((memoizedMessageFn) => {
@@ -1055,6 +1058,7 @@ export const MessageThread = (props: MessageThreadProps): JSX.Element => {
             defaultStatusRenderer,
             defaultChatMessageRenderer,
             strings,
+            theme.semanticColors.errorBackground,
             // Temporary solution to make sure we re-render if attach attribute is changed.
             // The proper fix should be in selector.
             message.messageType === 'chat' ? message.attached : undefined,
@@ -1079,6 +1083,7 @@ export const MessageThread = (props: MessageThreadProps): JSX.Element => {
       defaultStatusRenderer,
       defaultChatMessageRenderer,
       strings,
+      theme.semanticColors.errorBackground,
       participantCount,
       readCountForHoveredIndicator,
       onRenderMessage,
@@ -1091,8 +1096,6 @@ export const MessageThread = (props: MessageThreadProps): JSX.Element => {
     ]
   );
 
-  const theme = useTheme();
-
   const chatBody = useMemo(() => {
     return (
       <LiveAnnouncer>

packages/react-components/src/components/styles/MessageThread.styles.ts

@@ -102,10 +102,10 @@ export const defaultMyChatMessageContainer: ComponentSlotStyle = {
 /**
  * @private
  */
-export const FailedMyChatMessageContainer: ComponentSlotStyle = {
+export const FailedMyChatMessageContainer = (backgroundColor: string): ComponentSlotStyle => ({
   ...defaultChatItemMessageContainer,
-  backgroundColor: 'rgba(168, 0, 0, 0.2)'
-};
+  backgroundColor
+});
 
 /**
  * @private

packages/react-components/src/theming/themes.ts

@@ -54,7 +54,8 @@ export const lightTheme: PartialTheme & CallingTheme = {
     iconWhite: '#ffffff'
   },
   semanticColors: {
-    errorText: '#a80000'
+    errorText: '#a80000',
+    errorBackground: 'rgba(168, 0, 0, 0.2)'
   }
 };
 
@@ -95,6 +96,7 @@ export const darkTheme: PartialTheme & CallingTheme = {
     iconWhite: '#ffffff'
   },
   semanticColors: {
-    errorText: '#f1707b'
+    errorText: '#f1707b',
+    errorBackground: 'rgba(168, 0, 0, 0.2)'
   }
 };