[Chat][Bug] DLP message icon style updates (#4765)

* Update DLP message styling

* Update packages/react-components browser test snapshots

---------

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

Author: AmyL219

change-beta/@azure-communication-react-e8d9231d-4347-4efd-bbec-7f8bc6145ca0.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "UI/UX",
+  "comment": "Update DLP message styling",
+  "packageName": "@azure/communication-react",
+  "email": "longamy@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-e8d9231d-4347-4efd-bbec-7f8bc6145ca0.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "UI/UX",
+  "comment": "Update DLP message styling",
+  "packageName": "@azure/communication-react",
+  "email": "longamy@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/src/components/ChatMessage/ChatMessageContent.tsx

@@ -23,6 +23,8 @@ import DOMPurify from 'dompurify';
 import { _AttachmentDownloadCardsStrings } from '../Attachment/AttachmentDownloadCards';
 /* @conditional-compile-remove(file-sharing-teams-interop) @conditional-compile-remove(file-sharing-acs) */
 import { AttachmentMetadata } from '@internal/acs-ui-common';
+/* @conditional-compile-remove(data-loss-prevention) */
+import { dataLossIconStyle } from '../styles/MessageThread.styles';
 
 type ChatMessageContentProps = {
   message: ChatMessage;
@@ -135,7 +137,7 @@ const MessageContentAsText = (props: ChatMessageContentProps): JSX.Element => {
  * @private
  */
 export const BlockedMessageContent = (props: BlockedMessageContentProps): JSX.Element => {
-  const Icon: JSX.Element = <FontIcon iconName={'DataLossPreventionProhibited'} />;
+  const Icon: JSX.Element = <FontIcon className={dataLossIconStyle} iconName={'DataLossPreventionProhibited'} />;
   const blockedMessage =
     props.message.warningText === undefined ? props.strings.blockedWarningText : props.message.warningText;
   const blockedMessageLink = props.message.link;

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

@@ -447,3 +447,9 @@ export const loadPreviousMessageButtonStyle = mergeStyles({
 export const DownIconStyle = mergeStyles({
   marginRight: '0.5em'
 });
+
+/** @private */
+export const dataLossIconStyle = mergeStyles({
+  width: '1.25rem',
+  height: '1.25rem'
+});