Fix: Default overlay on collections review panel

src/app/views/query-runner/request/permissions/PanelList.tsx

@@ -35,7 +35,7 @@ const PanelList = ({ messages,
   }
 
   const { consentedScopes, scopes, authToken,
-    permissionsPanelOpen } = useAppSelector((state) => state);
+    permissionsPanelOpen, theme: appTheme } = useAppSelector((state) => state);
   const { fullPermissions } = scopes.data;
   const [permissions, setPermissions] = useState<any []>([]);
   const [groups, setGroups] = useState<IGroup[]>([]);
@@ -117,8 +117,21 @@ const PanelList = ({ messages,
     });
   };
 
+  const isCurrentThemeDark = (): boolean => {
+    if (appTheme === 'dark' || appTheme === 'high-contrast') {
+      return true;
+    }
+    return false;
+  }
+
   const panelOverlayProps: IOverlayProps = {
-    isDarkThemed: true
+    styles: {
+      root: {
+        backgroundColor: isCurrentThemeDark() ? theme.palette.neutralLighter :
+          theme.palette.whiteTranslucent40,
+        opacity: '0.8'
+      }
+    }
   }
 
   const displayLoadingPermissionsText = () => {

src/app/views/sidebar/resource-explorer/panels/PathsReview.tsx

@@ -1,5 +1,5 @@
 import {
-  CommandBar, ICommandBarItemProps, Label, Panel, PanelType, PrimaryButton
+  CommandBar, getTheme, ICommandBarItemProps, IOverlayProps, Label, Panel, PanelType, PrimaryButton
 } from '@fluentui/react';
 import { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
@@ -21,12 +21,13 @@ export interface IPathsReview {
 
 const PathsReview = (props: IPathsReview) => {
   const dispatch: AppDispatch = useDispatch();
-  const { resources: { paths: items } } = useAppSelector(
+  const { resources: { paths: items }, theme } = useAppSelector(
     (state) => state
   );
   const { isOpen } = props;
   const headerText = translateMessage('Selected Resources') + ' ' + translateMessage('Preview');
   const [selectedItems, setSelectedItems] = useState<IResourceLink[]>([]);
+  const currentTheme = getTheme();
 
   const columns = [
     { key: 'url', name: 'URL', fieldName: 'url', minWidth: 300, maxWidth: 350, isResizable: true }
@@ -67,6 +68,23 @@ const PathsReview = (props: IPathsReview) => {
     setSelectedItems(content);
   };
 
+  const isCurrentThemeDark = (): boolean => {
+    if (theme === 'dark' || theme === 'high-contrast') {
+      return true;
+    }
+    return false;
+  }
+
+  const panelOverlayProps: IOverlayProps = {
+    styles: {
+      root: {
+        backgroundColor: isCurrentThemeDark() ? currentTheme.palette.neutralLighter :
+          currentTheme.palette.whiteTranslucent40,
+        opacity: '0.8'
+      }
+    }
+  }
+
   return (
     <>
       <Panel
@@ -76,6 +94,7 @@ const PathsReview = (props: IPathsReview) => {
         type={PanelType.large}
         onRenderFooterContent={renderFooterContent}
         closeButtonAriaLabel='Close'
+        overlayProps={panelOverlayProps}
       >
         <Label>
           <FormattedMessage id='Export list as a Postman collection message' />