Match message thread color in composite to composite background (#2126)

* Add a background color to all composites

* Change files

* comment grammar fix

* Removing background color override in control bar

* updating comment

* Change files

* updating comment

* Update composite automation snapshots

* Update composite automation snapshots

* Update composite automation snapshots

* Update composite automation snapshots

* Update composite automation snapshots

* Un-memoizing classname

* Update composite automation snapshots

* Update composite automation snapshots

* Adding custom background to control bars in call and call withchat

* Update composite automation snapshots

* Adding background color to message thread in composite to match composite background

* Change files

* Update changelog

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

Author: anjulgarg

change/@internal-react-composites-cb2a0169-f171-4264-a126-c5bbd66d43b4.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Message thread background color in composites matches composite background color",
+  "packageName": "@internal/react-composites",
+  "email": "anjulgarg@live.com",
+  "dependentChangeType": "patch"
+}

packages/react-composites/src/composites/ChatComposite/ChatScreen.tsx

@@ -13,7 +13,8 @@ import {
   SendBox,
   SendBoxStylesProps,
   TypingIndicator,
-  TypingIndicatorStylesProps
+  TypingIndicatorStylesProps,
+  useTheme
 } from '@internal/react-components';
 import React, { useCallback, useEffect } from 'react';
 import { AvatarPersona, AvatarPersonaDataCallback } from '../common/AvatarPersona';
@@ -122,6 +123,8 @@ export const ChatScreen = (props: ChatScreenProps): JSX.Element => {
   const [downloadErrorMessage, setDownloadErrorMessage] = React.useState('');
 
   const adapter = useAdapter();
+  const theme = useTheme();
+
   useEffect(() => {
     // Initial data should be always fetched by the composite(or external caller) instead of the adapter
     adapter.fetchInitialData();
@@ -147,7 +150,11 @@ export const ChatScreen = (props: ChatScreenProps): JSX.Element => {
     [onFetchAvatarPersonaData]
   );
 
-  const messageThreadStyles = Object.assign({}, messageThreadChatCompositeStyles, styles?.messageThread);
+  const messageThreadStyles = Object.assign(
+    {},
+    messageThreadChatCompositeStyles(theme.semanticColors.bodyBackground),
+    styles?.messageThread
+  );
   const typingIndicatorStyles = Object.assign({}, styles?.typingIndicator);
   const sendBoxStyles = Object.assign({}, styles?.sendBox);
   const userId = toFlatCommunicationIdentifier(adapter.getState().userId);

packages/react-composites/src/composites/ChatComposite/styles/Chat.styles.ts

@@ -1,7 +1,7 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 
-import { IStyle, mergeStyles } from '@fluentui/react';
+import { IStyle, memoizeFunction, mergeStyles } from '@fluentui/react';
 import { MessageThreadStyles } from '@internal/react-components';
 
 const MESSAGE_THREAD_WIDTH = '41.25rem';
@@ -93,7 +93,12 @@ export const topicNameLabelStyle = mergeStyles({
 /**
  * @private
  */
-export const messageThreadChatCompositeStyles: MessageThreadStyles = { root: { maxWidth: MESSAGE_THREAD_WIDTH } };
+export const messageThreadChatCompositeStyles = memoizeFunction(
+  (background: string): MessageThreadStyles => ({
+    root: { maxWidth: MESSAGE_THREAD_WIDTH },
+    chatContainer: { background: background }
+  })
+);
 
 /**
  * @private