diff --git a/change-beta/@azure-communication-react-fc1f9875-02b8-40f4-86fd-d9523d648b3b.json b/change-beta/@azure-communication-react-fc1f9875-02b8-40f4-86fd-d9523d648b3b.json new file mode 100644 index 00000000000..26220fa9fa7 --- /dev/null +++ b/change-beta/@azure-communication-react-fc1f9875-02b8-40f4-86fd-d9523d648b3b.json @@ -0,0 +1,9 @@ +{ + "type": "patch", + "area": "fix", + "workstream": "Background blur", + "comment": "Fix rendering issues in the video effects picker", + "packageName": "@azure/communication-react", + "email": "94866715+dmceachernmsft@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/change/@azure-communication-react-fc1f9875-02b8-40f4-86fd-d9523d648b3b.json b/change/@azure-communication-react-fc1f9875-02b8-40f4-86fd-d9523d648b3b.json new file mode 100644 index 00000000000..26220fa9fa7 --- /dev/null +++ b/change/@azure-communication-react-fc1f9875-02b8-40f4-86fd-d9523d648b3b.json @@ -0,0 +1,9 @@ +{ + "type": "patch", + "area": "fix", + "workstream": "Background blur", + "comment": "Fix rendering issues in the video effects picker", + "packageName": "@azure/communication-react", + "email": "94866715+dmceachernmsft@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/src/components/VideoEffects/VideoEffectsItem.styles.tsx b/packages/react-components/src/components/VideoEffects/VideoEffectsItem.styles.tsx index 213ec2f9c95..b60fab045e7 100644 --- a/packages/react-components/src/components/VideoEffects/VideoEffectsItem.styles.tsx +++ b/packages/react-components/src/components/VideoEffects/VideoEffectsItem.styles.tsx @@ -39,45 +39,19 @@ export const videoEffectsItemContainerStyles = (args: { cursor: args.disabled ? 'default' : 'pointer', height: VideoEffectsItemContainerHeight, width: VideoEffectsItemContainerWidth, - border: args.isSelected + outlineOffset: '-1px', + outline: args.isSelected ? `${borderActiveThickness} solid ${args.theme.palette.themePrimary}` : `${borderDefaultThickness} solid ${args.theme.palette.neutralQuaternaryAlt}`, - // Use :after to display a border element. This is used to prevent the background image - // resizing when the border thichkness is changed. We also want the border to be inside - // the frame of the container, i.e. we want it to expand inwards and not outwards when - // border thickness changes from hover/selection. - ':after': { - content: '""', + ':hover': { boxSizing: 'border-box', - height: VideoEffectsItemContainerBorderHeight, width: VideoEffectsItemContainerBorderWidth, - borderRadius: '0.25rem', - transform: 'translate(-1rem, -3.3rem)', - display: 'flex' - }, - ':hover': { - ':after': { - border: - args.disabled && !args.isSelected - ? `${borderDefaultThickness} solid ${args.theme.palette.neutralQuaternaryAlt}` - : `${borderActiveThickness} solid ${args.theme.palette.themePrimary}`, - transform: 'translate(-1rem, -3.3rem)' - } - }, - ':focus': { - ':after': { - outline: 'none', - transform: 'translate(-0.1rem, -0.2rem)', - ':hover': { - transform: 'translate(-0.1rem, -0.2rem)' - } - } - }, - ':active': { - ':after': { - outline: 'none', - transform: 'translate(-1rem, -3.3rem)' - } + height: VideoEffectsItemContainerBorderHeight, + outlineOffset: '-1px', + outline: + args.disabled && !args.isSelected + ? `${borderDefaultThickness} solid ${args.theme.palette.neutralQuaternaryAlt}` + : `${borderActiveThickness} solid ${args.theme.palette.themePrimary}` } } }; diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/VideoEffects.test.ts-snapshots/custom-video-effects-config-screen-pane-none-selected-Desktop-Chrome-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/VideoEffects.test.ts-snapshots/custom-video-effects-config-screen-pane-none-selected-Desktop-Chrome-linux.png index 270b4237efd..d292152e08c 100644 Binary files a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/VideoEffects.test.ts-snapshots/custom-video-effects-config-screen-pane-none-selected-Desktop-Chrome-linux.png and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/VideoEffects.test.ts-snapshots/custom-video-effects-config-screen-pane-none-selected-Desktop-Chrome-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/VideoEffects.test.ts-snapshots/custom-video-effects-config-screen-warning-camera-off-Desktop-Chrome-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/VideoEffects.test.ts-snapshots/custom-video-effects-config-screen-warning-camera-off-Desktop-Chrome-linux.png index fee2da94392..36aff2d1292 100644 Binary files a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/VideoEffects.test.ts-snapshots/custom-video-effects-config-screen-warning-camera-off-Desktop-Chrome-linux.png and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/VideoEffects.test.ts-snapshots/custom-video-effects-config-screen-warning-camera-off-Desktop-Chrome-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/VideoEffects.test.ts-snapshots/custom-video-effects-side-pane-none-selected-Desktop-Chrome-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/VideoEffects.test.ts-snapshots/custom-video-effects-side-pane-none-selected-Desktop-Chrome-linux.png index b0c942b140b..4ed79be8c7c 100644 Binary files a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/VideoEffects.test.ts-snapshots/custom-video-effects-side-pane-none-selected-Desktop-Chrome-linux.png and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/VideoEffects.test.ts-snapshots/custom-video-effects-side-pane-none-selected-Desktop-Chrome-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/VideoEffects.test.ts-snapshots/custom-video-effects-side-pane-warning-camera-off-Desktop-Chrome-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/VideoEffects.test.ts-snapshots/custom-video-effects-side-pane-warning-camera-off-Desktop-Chrome-linux.png index 0dc5a68bf17..ebc1c248184 100644 Binary files a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/VideoEffects.test.ts-snapshots/custom-video-effects-side-pane-warning-camera-off-Desktop-Chrome-linux.png and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/VideoEffects.test.ts-snapshots/custom-video-effects-side-pane-warning-camera-off-Desktop-Chrome-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/VideoEffects.test.ts-snapshots/video-effects-config-screen-blur-camera-on-Desktop-Chrome-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/VideoEffects.test.ts-snapshots/video-effects-config-screen-blur-camera-on-Desktop-Chrome-linux.png index 29a77def5a9..de9e52039f5 100644 Binary files a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/VideoEffects.test.ts-snapshots/video-effects-config-screen-blur-camera-on-Desktop-Chrome-linux.png and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/VideoEffects.test.ts-snapshots/video-effects-config-screen-blur-camera-on-Desktop-Chrome-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/VideoEffects.test.ts-snapshots/video-effects-config-screen-camera-on-custom-background-1-Desktop-Chrome-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/VideoEffects.test.ts-snapshots/video-effects-config-screen-camera-on-custom-background-1-Desktop-Chrome-linux.png index 2a123c78db6..b2d07a8bc0d 100644 Binary files a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/VideoEffects.test.ts-snapshots/video-effects-config-screen-camera-on-custom-background-1-Desktop-Chrome-linux.png and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/VideoEffects.test.ts-snapshots/video-effects-config-screen-camera-on-custom-background-1-Desktop-Chrome-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/VideoEffects.test.ts-snapshots/video-effects-config-screen-camera-on-custom-background-2-Desktop-Chrome-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/VideoEffects.test.ts-snapshots/video-effects-config-screen-camera-on-custom-background-2-Desktop-Chrome-linux.png index ff9f1a67046..fff0e9a22ba 100644 Binary files a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/VideoEffects.test.ts-snapshots/video-effects-config-screen-camera-on-custom-background-2-Desktop-Chrome-linux.png and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/VideoEffects.test.ts-snapshots/video-effects-config-screen-camera-on-custom-background-2-Desktop-Chrome-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/VideoEffects.test.ts-snapshots/video-effects-config-screen-pane-none-selected-Desktop-Chrome-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/VideoEffects.test.ts-snapshots/video-effects-config-screen-pane-none-selected-Desktop-Chrome-linux.png index 5a9e5f38d56..4e2a87f7f5c 100644 Binary files a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/VideoEffects.test.ts-snapshots/video-effects-config-screen-pane-none-selected-Desktop-Chrome-linux.png and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/VideoEffects.test.ts-snapshots/video-effects-config-screen-pane-none-selected-Desktop-Chrome-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/VideoEffects.test.ts-snapshots/video-effects-config-screen-warning-camera-off-Desktop-Chrome-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/VideoEffects.test.ts-snapshots/video-effects-config-screen-warning-camera-off-Desktop-Chrome-linux.png index de4abaf1933..ada2567eed6 100644 Binary files a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/VideoEffects.test.ts-snapshots/video-effects-config-screen-warning-camera-off-Desktop-Chrome-linux.png and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/VideoEffects.test.ts-snapshots/video-effects-config-screen-warning-camera-off-Desktop-Chrome-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/VideoEffects.test.ts-snapshots/video-effects-error-side-pane-open-Desktop-Chrome-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/VideoEffects.test.ts-snapshots/video-effects-error-side-pane-open-Desktop-Chrome-linux.png index ef7d2a008b8..87197d96ba8 100644 Binary files a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/VideoEffects.test.ts-snapshots/video-effects-error-side-pane-open-Desktop-Chrome-linux.png and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/VideoEffects.test.ts-snapshots/video-effects-error-side-pane-open-Desktop-Chrome-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/VideoEffects.test.ts-snapshots/video-effects-side-pane-blur-selected-camera-on-Desktop-Chrome-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/VideoEffects.test.ts-snapshots/video-effects-side-pane-blur-selected-camera-on-Desktop-Chrome-linux.png index c7d0c8383db..72b21943a89 100644 Binary files a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/VideoEffects.test.ts-snapshots/video-effects-side-pane-blur-selected-camera-on-Desktop-Chrome-linux.png and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/VideoEffects.test.ts-snapshots/video-effects-side-pane-blur-selected-camera-on-Desktop-Chrome-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/VideoEffects.test.ts-snapshots/video-effects-side-pane-camera-on-custom-background-1-Desktop-Chrome-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/VideoEffects.test.ts-snapshots/video-effects-side-pane-camera-on-custom-background-1-Desktop-Chrome-linux.png index 7b08cc9be56..69cb839aec2 100644 Binary files a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/VideoEffects.test.ts-snapshots/video-effects-side-pane-camera-on-custom-background-1-Desktop-Chrome-linux.png and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/VideoEffects.test.ts-snapshots/video-effects-side-pane-camera-on-custom-background-1-Desktop-Chrome-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/VideoEffects.test.ts-snapshots/video-effects-side-pane-camera-on-custom-background-2-Desktop-Chrome-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/VideoEffects.test.ts-snapshots/video-effects-side-pane-camera-on-custom-background-2-Desktop-Chrome-linux.png index 8bfc7de5eb9..da1261f7546 100644 Binary files a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/VideoEffects.test.ts-snapshots/video-effects-side-pane-camera-on-custom-background-2-Desktop-Chrome-linux.png and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/VideoEffects.test.ts-snapshots/video-effects-side-pane-camera-on-custom-background-2-Desktop-Chrome-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/VideoEffects.test.ts-snapshots/video-effects-side-pane-none-selected-Desktop-Chrome-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/VideoEffects.test.ts-snapshots/video-effects-side-pane-none-selected-Desktop-Chrome-linux.png index 5721f3d876b..fe44d7640ba 100644 Binary files a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/VideoEffects.test.ts-snapshots/video-effects-side-pane-none-selected-Desktop-Chrome-linux.png and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/VideoEffects.test.ts-snapshots/video-effects-side-pane-none-selected-Desktop-Chrome-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/VideoEffects.test.ts-snapshots/video-effects-side-pane-warning-camera-off-Desktop-Chrome-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/VideoEffects.test.ts-snapshots/video-effects-side-pane-warning-camera-off-Desktop-Chrome-linux.png index 2a7b2ca4f76..324b8fcc796 100644 Binary files a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/VideoEffects.test.ts-snapshots/video-effects-side-pane-warning-camera-off-Desktop-Chrome-linux.png and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/VideoEffects.test.ts-snapshots/video-effects-side-pane-warning-camera-off-Desktop-Chrome-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/VideoEffects.test.ts-snapshots/custom-video-effects-config-screen-pane-none-selected-Desktop-Chrome-linux.png b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/VideoEffects.test.ts-snapshots/custom-video-effects-config-screen-pane-none-selected-Desktop-Chrome-linux.png index 270b4237efd..d292152e08c 100644 Binary files a/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/VideoEffects.test.ts-snapshots/custom-video-effects-config-screen-pane-none-selected-Desktop-Chrome-linux.png and b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/VideoEffects.test.ts-snapshots/custom-video-effects-config-screen-pane-none-selected-Desktop-Chrome-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/VideoEffects.test.ts-snapshots/custom-video-effects-config-screen-warning-camera-off-Desktop-Chrome-linux.png b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/VideoEffects.test.ts-snapshots/custom-video-effects-config-screen-warning-camera-off-Desktop-Chrome-linux.png index fee2da94392..36aff2d1292 100644 Binary files a/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/VideoEffects.test.ts-snapshots/custom-video-effects-config-screen-warning-camera-off-Desktop-Chrome-linux.png and b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/VideoEffects.test.ts-snapshots/custom-video-effects-config-screen-warning-camera-off-Desktop-Chrome-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/VideoEffects.test.ts-snapshots/custom-video-effects-side-pane-none-selected-Desktop-Chrome-linux.png b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/VideoEffects.test.ts-snapshots/custom-video-effects-side-pane-none-selected-Desktop-Chrome-linux.png index b0c942b140b..f56784b3796 100644 Binary files a/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/VideoEffects.test.ts-snapshots/custom-video-effects-side-pane-none-selected-Desktop-Chrome-linux.png and b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/VideoEffects.test.ts-snapshots/custom-video-effects-side-pane-none-selected-Desktop-Chrome-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/VideoEffects.test.ts-snapshots/custom-video-effects-side-pane-warning-camera-off-Desktop-Chrome-linux.png b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/VideoEffects.test.ts-snapshots/custom-video-effects-side-pane-warning-camera-off-Desktop-Chrome-linux.png index db7cc47529f..74d5d7c8805 100644 Binary files a/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/VideoEffects.test.ts-snapshots/custom-video-effects-side-pane-warning-camera-off-Desktop-Chrome-linux.png and b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/VideoEffects.test.ts-snapshots/custom-video-effects-side-pane-warning-camera-off-Desktop-Chrome-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/VideoEffects.test.ts-snapshots/video-effects-config-screen-blur-camera-on-Desktop-Chrome-linux.png b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/VideoEffects.test.ts-snapshots/video-effects-config-screen-blur-camera-on-Desktop-Chrome-linux.png index 29a77def5a9..de9e52039f5 100644 Binary files a/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/VideoEffects.test.ts-snapshots/video-effects-config-screen-blur-camera-on-Desktop-Chrome-linux.png and b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/VideoEffects.test.ts-snapshots/video-effects-config-screen-blur-camera-on-Desktop-Chrome-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/VideoEffects.test.ts-snapshots/video-effects-config-screen-camera-on-custom-background-1-Desktop-Chrome-linux.png b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/VideoEffects.test.ts-snapshots/video-effects-config-screen-camera-on-custom-background-1-Desktop-Chrome-linux.png index c3285cd9a5c..b2d07a8bc0d 100644 Binary files a/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/VideoEffects.test.ts-snapshots/video-effects-config-screen-camera-on-custom-background-1-Desktop-Chrome-linux.png and b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/VideoEffects.test.ts-snapshots/video-effects-config-screen-camera-on-custom-background-1-Desktop-Chrome-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/VideoEffects.test.ts-snapshots/video-effects-config-screen-camera-on-custom-background-2-Desktop-Chrome-linux.png b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/VideoEffects.test.ts-snapshots/video-effects-config-screen-camera-on-custom-background-2-Desktop-Chrome-linux.png index dad1b4201b6..194f8a3f1ec 100644 Binary files a/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/VideoEffects.test.ts-snapshots/video-effects-config-screen-camera-on-custom-background-2-Desktop-Chrome-linux.png and b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/VideoEffects.test.ts-snapshots/video-effects-config-screen-camera-on-custom-background-2-Desktop-Chrome-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/VideoEffects.test.ts-snapshots/video-effects-config-screen-pane-none-selected-Desktop-Chrome-linux.png b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/VideoEffects.test.ts-snapshots/video-effects-config-screen-pane-none-selected-Desktop-Chrome-linux.png index 5a9e5f38d56..4e2a87f7f5c 100644 Binary files a/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/VideoEffects.test.ts-snapshots/video-effects-config-screen-pane-none-selected-Desktop-Chrome-linux.png and b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/VideoEffects.test.ts-snapshots/video-effects-config-screen-pane-none-selected-Desktop-Chrome-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/VideoEffects.test.ts-snapshots/video-effects-config-screen-warning-camera-off-Desktop-Chrome-linux.png b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/VideoEffects.test.ts-snapshots/video-effects-config-screen-warning-camera-off-Desktop-Chrome-linux.png index de4abaf1933..ada2567eed6 100644 Binary files a/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/VideoEffects.test.ts-snapshots/video-effects-config-screen-warning-camera-off-Desktop-Chrome-linux.png and b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/VideoEffects.test.ts-snapshots/video-effects-config-screen-warning-camera-off-Desktop-Chrome-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/VideoEffects.test.ts-snapshots/video-effects-error-side-pane-open-Desktop-Chrome-linux.png b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/VideoEffects.test.ts-snapshots/video-effects-error-side-pane-open-Desktop-Chrome-linux.png index 7512a14e3ba..87197d96ba8 100644 Binary files a/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/VideoEffects.test.ts-snapshots/video-effects-error-side-pane-open-Desktop-Chrome-linux.png and b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/VideoEffects.test.ts-snapshots/video-effects-error-side-pane-open-Desktop-Chrome-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/VideoEffects.test.ts-snapshots/video-effects-side-pane-blur-selected-camera-on-Desktop-Chrome-linux.png b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/VideoEffects.test.ts-snapshots/video-effects-side-pane-blur-selected-camera-on-Desktop-Chrome-linux.png index c7d0c8383db..72b21943a89 100644 Binary files a/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/VideoEffects.test.ts-snapshots/video-effects-side-pane-blur-selected-camera-on-Desktop-Chrome-linux.png and b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/VideoEffects.test.ts-snapshots/video-effects-side-pane-blur-selected-camera-on-Desktop-Chrome-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/VideoEffects.test.ts-snapshots/video-effects-side-pane-camera-on-custom-background-1-Desktop-Chrome-linux.png b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/VideoEffects.test.ts-snapshots/video-effects-side-pane-camera-on-custom-background-1-Desktop-Chrome-linux.png index 90b11f3adec..69cb839aec2 100644 Binary files a/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/VideoEffects.test.ts-snapshots/video-effects-side-pane-camera-on-custom-background-1-Desktop-Chrome-linux.png and b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/VideoEffects.test.ts-snapshots/video-effects-side-pane-camera-on-custom-background-1-Desktop-Chrome-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/VideoEffects.test.ts-snapshots/video-effects-side-pane-camera-on-custom-background-2-Desktop-Chrome-linux.png b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/VideoEffects.test.ts-snapshots/video-effects-side-pane-camera-on-custom-background-2-Desktop-Chrome-linux.png index 6496f097104..e16a00b7f5c 100644 Binary files a/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/VideoEffects.test.ts-snapshots/video-effects-side-pane-camera-on-custom-background-2-Desktop-Chrome-linux.png and b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/VideoEffects.test.ts-snapshots/video-effects-side-pane-camera-on-custom-background-2-Desktop-Chrome-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/VideoEffects.test.ts-snapshots/video-effects-side-pane-none-selected-Desktop-Chrome-linux.png b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/VideoEffects.test.ts-snapshots/video-effects-side-pane-none-selected-Desktop-Chrome-linux.png index 5721f3d876b..fe44d7640ba 100644 Binary files a/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/VideoEffects.test.ts-snapshots/video-effects-side-pane-none-selected-Desktop-Chrome-linux.png and b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/VideoEffects.test.ts-snapshots/video-effects-side-pane-none-selected-Desktop-Chrome-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/VideoEffects.test.ts-snapshots/video-effects-side-pane-warning-camera-off-Desktop-Chrome-linux.png b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/VideoEffects.test.ts-snapshots/video-effects-side-pane-warning-camera-off-Desktop-Chrome-linux.png index 2a7b2ca4f76..2b2e1913aea 100644 Binary files a/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/VideoEffects.test.ts-snapshots/video-effects-side-pane-warning-camera-off-Desktop-Chrome-linux.png and b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/VideoEffects.test.ts-snapshots/video-effects-side-pane-warning-camera-off-Desktop-Chrome-linux.png differ