[bugfix] Center incoming call toast and modal button icons (#2386)

* Center incoming call toast button icons

* Center incoming call modal footer buttons

Author: edwardlee-msft

change/@internal-storybook-8431479d-7f71-4212-99da-62620f7baf55.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Center incoming call toast button icons",
+  "packageName": "@internal/storybook",
+  "email": "edwardlee@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/storybook/stories/CallComposite/components/IncomingCallAlert.tsx

@@ -6,8 +6,7 @@ import { CommunicationUserIdentifier } from '@azure/communication-common';
 import { CallClientState } from '@azure/communication-react';
 import { Stack, Text, TextField, IStackTokens, mergeStyles } from '@fluentui/react';
 import React, { useEffect, useRef, useState } from 'react';
-
-import { IncomingCallToast } from './IncomingCallAlert';
+import { IncomingCallToast } from '../../Examples/IncomingCallAlerts/components';
 
 export interface HomeScreenProps {
   callState: CallClientState;

packages/storybook/stories/CallComposite/components/SimpleInboundHomeScreen.tsx

@@ -12,7 +12,8 @@ import {
   incomingCallToastAvatarContainerStyle,
   incomingCallToastStyle,
   incomingCallModalLocalPreviewStyle,
-  incomingCallModalContainerStyle
+  incomingCallModalContainerStyle,
+  incomingCallModalDialogFooterStyle
 } from './styles/IncomingCallAlerts.styles';
 
 export type IncomingCallToastProps = {
@@ -57,12 +58,12 @@ export const IncomingCallToast = (props: IncomingCallToastProps): JSX.Element =>
         <DefaultButton
           className={incomingCallRejectButtonStyle}
           onClick={() => onClickReject()}
-          onRenderIcon={() => <CallEnd20Filled />}
+          onRenderIcon={() => <CallEnd20Filled style={{ display: 'flex' }} />}
         />
         <DefaultButton
           className={incomingCallAcceptButtonStyle}
           onClick={() => onClickAccept()}
-          onRenderIcon={() => <Call20Filled />}
+          onRenderIcon={() => <Call20Filled style={{ display: 'flex' }} />}
         />
       </Stack>
     </Stack>
@@ -153,15 +154,15 @@ export const IncomingCallModal = (props: IncomingCallModalProps): JSX.Element =>
           <Stack className={incomingCallModalLocalPreviewStyle}>{mediaGalleryLocalParticipant}</Stack>
         ) : null}
 
-        <DialogFooter>
+        <DialogFooter styles={incomingCallModalDialogFooterStyle}>
           <DefaultButton
             style={{ background: palette.neutralLighterAlt, border: 'none' }}
             onClick={() => onClickVideoToggle()}
             onRenderIcon={() =>
               showLocalVideo ? (
-                <Video20Filled primaryFill="currentColor" />
+                <Video20Filled primaryFill="currentColor" style={{ display: 'flex' }} />
               ) : (
-                <VideoOff20Filled primaryFill="currentColor" />
+                <VideoOff20Filled primaryFill="currentColor" style={{ display: 'flex' }} />
               )
             }
           />

packages/storybook/stories/Examples/IncomingCallAlerts/components/IncomingCallAlerts.tsx

@@ -1,7 +1,7 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 
-import { getTheme, mergeStyles } from '@fluentui/react';
+import { getTheme, IDialogFooterStyles, mergeStyles } from '@fluentui/react';
 const theme = getTheme();
 const palette = theme.palette;
 
@@ -61,3 +61,11 @@ export const incomingCallModalLocalPreviewStyle = mergeStyles({
     borderRadius: '0.25rem'
   }
 });
+
+export const incomingCallModalDialogFooterStyle: IDialogFooterStyles = {
+  action: {},
+  actions: {},
+  actionsRight: {
+    display: 'flex'
+  }
+};