Merge branch 'dev' into dependabot-upgrades

Author: Mnickii

src/app/views/App.tsx

@@ -1,6 +1,5 @@
 import {
   FluentProvider,
-  teamsHighContrastTheme,
   Theme,
   webDarkTheme,
   webLightTheme
@@ -256,8 +255,7 @@ class App extends Component<IAppProps, IAppState> {
   public render() {
     const fluentV9Themes: Record<string, Theme> = {
       light: webLightTheme,
-      dark: webDarkTheme,
-      'high-contrast': teamsHighContrastTheme
+      dark: webDarkTheme
     };
     return (
       <FluentProvider theme={fluentV9Themes[this.props.appTheme]}>

src/app/views/main-header/settings/ThemeChooser.tsx

@@ -6,7 +6,7 @@ import { PopupsComponent } from '../../../services/context/popups-context';
 import { changeTheme } from '../../../services/slices/theme.slice';
 import { translateMessage } from '../../../utils/translate-messages';
 import { useIconOptionStyles, useRadioGroupStyles } from './ThemeChooser.styles';
-import { BrightnessHigh24Regular, WeatherMoon24Regular, DarkTheme24Regular} from '@fluentui/react-icons';
+import { BrightnessHigh24Regular, WeatherMoon24Regular} from '@fluentui/react-icons';
 
 const availableThemes = [
   {
@@ -18,11 +18,6 @@ const availableThemes = [
     key: 'dark',
     displayName: 'Dark',
     icon: <WeatherMoon24Regular />
-  },
-  {
-    key: 'high-contrast',
-    displayName: 'High Contrast',
-    icon: <DarkTheme24Regular />
   }
 ];
 

src/app/views/sidebar/Sidebar.styles.tsx

@@ -29,6 +29,15 @@ export const useSidebarStyles = makeStyles({
     maxWidth: '100%'
   },
   activeLeaf: {
-    backgroundColor: tokens.colorNeutralBackground3Hover
+    backgroundColor: tokens.colorNeutralBackground3Hover,
+    '@media (forced-colors: active)': {
+      backgroundColor: 'Highlight',
+      color: 'HighlightText',
+      forcedColorAdjust: 'none',
+      // Adding border for better visibility in high contrast mode
+      outlineWidth: '2px',
+      outlineStyle: 'solid',
+      outlineColor: 'ButtonText'
+    }
   }
 })

src/app/views/sidebar/history/History.styles.ts

@@ -9,6 +9,9 @@ export const useHistoryStyles = makeStyles({
     alignItems: 'center',
     gap: '2px'
   },
+  button: {
+    border: 'none'
+  },
   badgeContainer: {
     minWidth: '50px',
     display: 'inline-flex'

src/app/views/sidebar/history/History.tsx

@@ -34,9 +34,9 @@ import {
 } from '@fluentui/react-components';
 import {
   AddSquare20Regular,
-  ArrowDownloadRegular,
-  DeleteRegular,
-  MoreHorizontalRegular,
+  ArrowDownload20Regular,
+  Delete20Regular,
+  MoreHorizontal20Regular,
   SubtractSquare20Regular
 } from '@fluentui/react-icons';
 import React, { useEffect, useRef, useState } from 'react';
@@ -143,14 +143,15 @@ const GroupIcons = (props: AsideGroupIconsProps)=>{
     <Tooltip withArrow relationship="label" content={`${translateMessage('Export')} ${groupName} queries`}>
       <Button onClick={
         (e) => handleDownloadHistoryGroup(e,groupName, historyItems )}
-      appearance="subtle" icon={<ArrowDownloadRegular/>}></Button>
+      appearance="subtle" icon={<ArrowDownload20Regular/>} className={styles.button}></Button>
     </Tooltip>
     <Dialog open={open} onOpenChange={(_event, data) => setOpen(data.open)}>
       <DialogTrigger disableButtonEnhancement>
         <Tooltip withArrow relationship="label" content={`${translateMessage('Delete')} ${groupName} queries`}>
           <Button
             appearance="subtle"
-            icon={<DeleteRegular/>}
+            icon={<Delete20Regular/>}
+            className={styles.button}
             onClick={(e) => {
               e.stopPropagation();
               setOpen(true);
@@ -198,6 +199,7 @@ interface HistoryProps {
 const HistoryItems = (props: HistoryProps)=>{
   const dispatch = useAppDispatch();
   const sidebarStyles = useSidebarStyles();
+  const historyStyles = useHistoryStyles();
   const {groups, history} = props
   const shouldGenerateGroups = useRef(true);
   const [selectedItemKey, setSelectedItemKey] = useState<string | null>(null);
@@ -348,6 +350,7 @@ const HistoryItems = (props: HistoryProps)=>{
                             aria-label={translateMessage('Remove from collection')}
                             appearance='transparent'
                             icon={<SubtractSquare20Regular />}
+                            className={historyStyles.button}
                             onClick={ (e: React.MouseEvent<HTMLButtonElement>) => {
                               e.stopPropagation();
                               handleRemoveFromCollection(h);
@@ -365,6 +368,7 @@ const HistoryItems = (props: HistoryProps)=>{
                             aria-label={translateMessage('Add to collection')}
                             appearance='transparent'
                             icon={<AddSquare20Regular />}
+                            className={historyStyles.button}
                             onClick={(e:  React.MouseEvent<HTMLButtonElement>) => {
                               e.stopPropagation();
                               handleAddToCollection(h);
@@ -432,6 +436,7 @@ interface HistoryItemActionMenuProps {
 
 const HistoryItemActionMenu = (props: HistoryItemActionMenuProps)=>{
   const dispatch = useAppDispatch()
+  const historyStyles = useHistoryStyles()
   const {item} = props
 
   const handleExportQuery = (query: IHistoryItem)=>{
@@ -457,21 +462,28 @@ const HistoryItemActionMenu = (props: HistoryItemActionMenuProps)=>{
   }
   return <Menu>
     <MenuTrigger disableButtonEnhancement>
-      <Button  tabIndex={0} appearance='subtle' icon={<MoreHorizontalRegular/>}></Button>
+      <Button
+        tabIndex={0}
+        appearance='subtle'
+        icon={<MoreHorizontal20Regular />}
+        className={historyStyles.button}
+      ></Button>
     </MenuTrigger>
 
     <MenuPopover>
       <MenuList>
         <MenuGroup>
           <MenuGroupHeader>{translateMessage('actions')}</MenuGroupHeader>
-          <MenuItem icon={<ArrowDownloadRegular/>}
+          <MenuItem icon={<ArrowDownload20Regular/>}
+            className={historyStyles.button}
             onClick={(e) => {
               e.stopPropagation();
               handleExportQuery(item);
             }}>
             {translateMessage('Export')}
           </MenuItem>
-          <MenuItem icon={<DeleteRegular/>}
+          <MenuItem icon={<Delete20Regular/>}
+            className={historyStyles.button}
             onClick={(e) => {
               e.stopPropagation();
               handleDeleteQuery(item);

src/app/views/sidebar/resource-explorer/ResourceExplorer.tsx

@@ -191,6 +191,7 @@ const ResourceExplorer = () => {
               <Button
                 aria-label={translateMessage('Remove from collection')}
                 appearance='transparent'
+                className={resourceExplorerStyles.button}
                 icon={<SubtractSquare20Regular />}
                 onClick={handleRemoveFromCollection}
               />
@@ -205,6 +206,7 @@ const ResourceExplorer = () => {
                 aria-label={translateMessage('Add to collection')}
                 appearance='transparent'
                 aria-describedby='tooltip'
+                className={resourceExplorerStyles.button}
                 icon={<AddSquare20Regular />}
                 onClick={handleAddToCollection}
               />

src/app/views/sidebar/resource-explorer/resourceExplorerStyles.ts

@@ -41,11 +41,19 @@ export const useResourceExplorerStyles = makeStyles({
     display: 'flex',
     alignItems: 'center'
   },
+  button: {
+    border: 'none'
+  },
   treeItemLayout: {
     width: '100%',
     ':hover, :focus, :focus-visible, :focus-within': {
       backgroundColor: tokens.colorNeutralBackground3Hover,
-      color: tokens.colorNeutralForeground2BrandHover
+      color: tokens.colorNeutralForeground2BrandHover,
+      '@media (forced-colors: active)': {
+        backgroundColor: 'Highlight',
+        color: 'HighlightText',
+        forcedColorAdjust: 'none'
+      }
     },
     '> div.fui-TreeItemLayout__main': {
       width: '100%'
@@ -57,7 +65,12 @@ export const useResourceExplorerStyles = makeStyles({
     },
     '&:hover .actions, &:focus-within .actions, &:focus-visible .actions, &:focus .actions': {
       display: 'flex',
-      alignItems: 'center'
+      alignItems: 'center',
+      '@media (forced-colors: active)': {
+        backgroundColor: 'Highlight',
+        color: 'HighlightText',
+        forcedColorAdjust: 'none'
+      }
     }
   }
 });

src/app/views/sidebar/sample-queries/SampleQueries.styles.ts

@@ -1,5 +1,12 @@
 import { makeStyles, tokens } from '@fluentui/react-components';
-export const useStyles = makeStyles({
+
+const forcedColorsActiveStyles = {
+  '@media (forced-colors: active)': {
+    backgroundColor: 'Highlight',
+    color: 'HighlightText',
+    forcedColorAdjust: 'none'
+  }
+};export const useStyles = makeStyles({
   container: {
     marginTop: '8px'
   },
@@ -25,7 +32,23 @@ export const useStyles = makeStyles({
     maxHeight: 'calc(100vh - 100px)'
   },
   itemLayout: {
-    paddingLeft: tokens.spacingHorizontalXXL
+    paddingLeft: tokens.spacingHorizontalXXL,
+    '&:hover, &:focus, &:focus-visible, &:focus-within': {
+      '@media (forced-colors: active)': {
+        backgroundColor: 'Highlight',
+        color: 'HighlightText',
+        forcedColorAdjust: 'none'
+      }
+    }
+  },
+  branchItemLayout: {
+    '&:hover, &:focus, &:focus-visible, &:focus-within': {
+      '@media (forced-colors: active)': {
+        backgroundColor: 'Highlight',
+        color: 'HighlightText',
+        forcedColorAdjust: 'none'
+      }
+    }
   },
   focusableLink: {
     '&:focus, &:focus-visible': {

src/app/views/sidebar/sample-queries/SampleQueries.tsx

@@ -479,6 +479,7 @@ const Samples: React.FC<SamplesProps> = ({ queries, groups, searchValue }) => {
                 group.count + translateMessage('Resources')}
             >
               <TreeItemLayout
+                className={styles.branchItemLayout}
                 aside={
                   <Badge appearance='tint' color='informative' aria-label={group.count + translateMessage('Resources')}>
                     {group.count}

src/index.tsx

@@ -68,24 +68,15 @@ function setCurrentTheme(): void {
   applyCurrentTheme(currentTheme);
 }
 function getOSTheme(): string {
-  let currentSystemTheme: string;
-  const currentSystemThemeDark = window.matchMedia(
-    '(prefers-color-scheme: dark)'
-  );
-
-  const currentSystemThemeLight = window.matchMedia(
-    '(prefers-color-scheme: light)'
-  );
-
-  if (currentSystemThemeDark.matches === true) {
-    currentSystemTheme = 'dark';
-  } else if (currentSystemThemeLight.matches === true) {
-    currentSystemTheme = 'light';
-  } else {
-    currentSystemTheme = 'high-contrast';
+  const currentSystemThemeDark = window.matchMedia('(prefers-color-scheme: dark)');
+  const currentSystemThemeLight = window.matchMedia('(prefers-color-scheme: light)');
+  if (currentSystemThemeDark.matches) {
+    return 'dark';
+  } else if (currentSystemThemeLight.matches) {
+    return 'light';
   }
 
-  return currentSystemTheme;
+  return 'light';
 }
 
 function applyCurrentTheme(themeToApply: string): void {