Fix: Default overlay on collections review panel (#2377)

src/app/views/query-response/adaptive-cards/AdaptiveCard.tsx

@@ -106,7 +106,7 @@ const AdaptiveCard = (props: any) => {
  if(!child){ return; }
  if(child && child.tagName === 'BUTTON'){ return; }
 
- child.style.color = currentTheme.palette.whiteTranslucent40;
+ child.style.color = currentTheme.palette.black;
  if (child.children.length > 0) {
  // eslint-disable-next-line @typescript-eslint/prefer-for-of
  for (let i = 0; i < child.children.length; i++) {

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,17 @@ const PanelList = ({ messages,
  });
  };
 
+ const isCurrentThemeDark = (): boolean => {
+ return (appTheme === 'dark' || appTheme === 'high-contrast');
+ }
+
  const panelOverlayProps: IOverlayProps = {
- isDarkThemed: true
+ styles: {
+ root: {
+ backgroundColor: isCurrentThemeDark() ? theme.palette.blackTranslucent40 :
+ theme.palette.whiteTranslucent40
+ }
+ }
  }
 
  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,19 @@ const PathsReview = (props: IPathsReview) => {
  setSelectedItems(content);
  };
 
+ const isCurrentThemeDark = (): boolean => {
+ return (theme === 'dark' || theme === 'high-contrast');
+ }
+
+ const panelOverlayProps: IOverlayProps = {
+ styles: {
+ root: {
+ backgroundColor: isCurrentThemeDark() ? currentTheme.palette.blackTranslucent40 :
+ currentTheme.palette.whiteTranslucent40
+ }
+ }
+ }
+
  return (
  <>
  <Panel
@@ -76,6 +90,7 @@ const PathsReview = (props: IPathsReview) => {
  type={PanelType.large}
  onRenderFooterContent={renderFooterContent}
  closeButtonAriaLabel='Close'
+ overlayProps={panelOverlayProps}
  >
  <Label>
  <FormattedMessage id='Export list as a Postman collection message' />

src/themes/dark.ts

@@ -25,8 +25,7 @@ export const dark = {
  black: '#ffffff',
  white: '#070707',
  blueMid: '#6cb8f6',
- green: '#00a100',
- whiteTranslucent40: '#ffffff'
+ green: '#00a100'
  },
  semanticColors: {
  messageText: '#f3f2f1',

src/themes/high-contrast.ts

@@ -23,8 +23,8 @@ export const highContrast = {
  black: '#f8f8f8',
  white: '#000000',
  blueMid: '#6cb8f6',
- green: '#92c353',
- whiteTranslucent40: '#ffffff'
+ green: '#92c353'
+
  },
  semanticColors: {
  messageText: '#f4f4f4',

src/themes/light.ts

@@ -25,7 +25,6 @@ export const light = {
  black: '#1d1d1d',
  white: '#ffffff',
  blueMid: '#00188F',
- green: '#008000',
- whiteTranslucent40: '#ffffff'
+ green: '#008000'
  }
 };