Fix icon size of capability changed notification (#3541)

* Fix icon size of capability changed notification

* Change files

* Duplicate change files for beta release

Author: mgamis-msft

change-beta/@azure-communication-react-7e7839c5-f27e-469a-82e4-5adbe4bb2681.json

@@ -0,0 +1,9 @@
+{
+  "type": "none",
+  "area": "fix",
+  "workstream": "Capabilities",
+  "comment": "Fix icon size of capability changed notification",
+  "packageName": "@azure/communication-react",
+  "email": "79475487+mgamis-msft@users.noreply.github.com",
+  "dependentChangeType": "none"
+}

change/@azure-communication-react-7e7839c5-f27e-469a-82e4-5adbe4bb2681.json

@@ -0,0 +1,9 @@
+{
+  "type": "none",
+  "area": "fix",
+  "workstream": "Capabilities",
+  "comment": "Fix icon size of capability changed notification",
+  "packageName": "@azure/communication-react",
+  "email": "79475487+mgamis-msft@users.noreply.github.com",
+  "dependentChangeType": "none"
+}

packages/react-composites/src/composites/CallComposite/components/CapabilitiesChangedNotificationBar.tsx

@@ -69,7 +69,7 @@ export const CapabilitiesChangedNotificationBar = (props: CapabilitiesChangeNoti
         if (!message) {
           return null;
         }
-        const iconProps = getNotificationIconProps(notification);
+        const iconProps = getCustomMessageBarIconProps(notification);
         return (
           <MessageBar
             key={notification.capabilityName}
@@ -120,20 +120,27 @@ const getCapabilityChangedNotificationString = (
 };
 
 /* @conditional-compile-remove(capabilities) */
-const getNotificationIconProps = (notification: CapabalityChangedNotification): IIconProps | undefined => {
+const getCustomMessageBarIconProps = (notification: CapabalityChangedNotification): IIconProps | undefined => {
+  let iconName: string | undefined = undefined;
   switch (notification.capabilityName) {
     case 'turnVideoOn':
       if (notification.isPresent) {
-        return { iconName: 'ControlButtonCameraOn' };
+        iconName = 'ControlButtonCameraOn';
+      } else {
+        iconName = 'ControlButtonCameraProhibited';
       }
-      return { iconName: 'ControlButtonCameraProhibited' };
+      break;
     case 'unmuteMic':
       if (notification.isPresent) {
-        return { iconName: 'ControlButtonMicOn' };
+        iconName = 'ControlButtonMicOn';
+      } else {
+        iconName = 'ControlButtonMicProhibited';
       }
-      return { iconName: 'ControlButtonMicProhibited' };
+      break;
+    default:
+      return undefined;
   }
-  return undefined;
+  return { iconName, styles: { root: { '> *': { height: '1rem', width: '1rem' } } } };
 };
 
 /* @conditional-compile-remove(capabilities) */