Cherrypick Update small packages #2527

Author: dmceachernmsft

change-beta/@azure-communication-react-feca4467-684d-44f9-bdbc-9cc3aa16c16a.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Fix component styles to bring components back in line with designs after fluent updates.",
+  "packageName": "@azure/communication-react",
+  "email": "94866715+dmceachernmsft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-feca4467-684d-44f9-bdbc-9cc3aa16c16a.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Fix component styles to bring components back in line with designs after fluent updates.",
+  "packageName": "@azure/communication-react",
+  "email": "94866715+dmceachernmsft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

common/config/rush/pnpm-lock.yaml

@@ -15,6 +15,7 @@ import {
 } from '@fluentui/react';
 import { _formatString, _pxToRem } from '@internal/acs-ui-common';
 import {
+  iconBannerContainerStyles,
   iconContainerStyles,
   iconPrimaryStyles,
   linkTextStyles,
@@ -110,25 +111,31 @@ export interface DomainPermissionsStyles extends BaseCustomStyles {
   troubleshootingLink?: ILinkStyles;
 }
 
+/**
+ * spacing for the icons in the banner.
+ */
+const tokens = { childrenGap: '2rem' };
+
 /** @private */
 export const DomainPermissionsContainer = (props: DomainPermissionsContainerProps): JSX.Element => {
   const { appName, onTroubleshootingClick, onPrimaryButtonClick, strings } = props;
   const theme = useTheme();
+
   return (
     <Stack style={{ padding: '2rem', maxWidth: '25.375rem' }} aria-label={strings?.ariaLabel}>
-      <Stack horizontal style={{ paddingBottom: '1rem' }} horizontalAlign={'space-between'}>
+      <Stack styles={iconBannerContainerStyles} horizontal horizontalAlign={'center'} verticalFill tokens={tokens}>
         {props.cameraIconName && (
-          <Stack styles={iconContainerStyles} horizontalAlign={'center'}>
+          <Stack>
             <Icon styles={iconPrimaryStyles} iconName={props.cameraIconName}></Icon>
           </Stack>
         )}
         {props.connectorIconName && (
-          <Stack styles={iconContainerStyles} horizontalAlign={'center'}>
+          <Stack styles={iconContainerStyles} horizontal>
             <Icon styles={sparkleIconBackdropStyles(theme)} iconName={props.connectorIconName}></Icon>
           </Stack>
         )}
         {props.microphoneIconName && (
-          <Stack styles={iconContainerStyles} horizontalAlign={'center'}>
+          <Stack>
             <Icon styles={iconPrimaryStyles} iconName={props.microphoneIconName}></Icon>
           </Stack>
         )}

packages/react-components/src/components/DevicePermissions/DomainPermissionsScaffolding.tsx

@@ -9,11 +9,21 @@ import { _pxToRem } from '@internal/acs-ui-common';
  */
 export const iconContainerStyles: IStackStyles = {
   root: {
-    margin: 'auto',
+    marginTop: 'auto',
+    marginBottom: 'auto',
     position: 'relative'
   }
 };
 
+/**
+ * @internal
+ */
+export const iconBannerContainerStyles: IStackStyles = {
+  root: {
+    paddingBottom: '1rem'
+  }
+};
+
 /**
  * @internal
  */

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

@@ -54,7 +54,7 @@ export const sendIconStyle = mergeStyles({
  * @private
  */
 export const fileUploadCardsStyles = mergeStyles({
-  margin: '0.25rem',
+  margin: '0 0.25rem 0.25rem 0.25rem',
   maxHeight: '12.5rem',
   overflow: 'auto'
 });