@centreon/ui 26.10.0 → 26.10.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "26.10.0",
+  "version": "26.10.2",
   "description": "Centreon UI Components",
   "scripts": {
     "update:deps": "pnpx npm-check-updates -i --format group",

package/src/Form/CollapsibleGroup.tsx

@@ -95,7 +95,7 @@ const CollapsibleGroup = ({
         <ContainerComponent>
           <div
             className={
-              'snap-y flex flex-row justify-between w-full pl-3 pr-1 text-white items-center'
+              'snap-y flex flex-row justify-between w-full pl-3 pr-1 text-text-primary items-center'
             }
             data-testid={`${group?.name}-header`}
           >

package/src/Listing/Header/Cell/ListingHeaderCell.tsx

@@ -76,15 +76,15 @@ const ListingHeaderCell = ({
         height: dataStyle.header.height
       }}
     >
-      <div className="flex items-center h-full justify-between text-white p-0">
+      <div className="flex items-center h-full justify-between text-text-primary p-0">
         {column.sortable ? (
           <TableSortLabel
             active={sortField === columnSortField}
             aria-label={`Column ${column.label}`}
             classes={{
-              icon: 'text-white'
+              icon: 'text-text-primary'
             }}
-            className="text-white"
+            className="text-text-primary"
             direction={sortOrder || 'desc'}
             onClick={sort}
           >
@@ -99,7 +99,7 @@ const ListingHeaderCell = ({
         {columnConfiguration?.sortable && areColumnsEditable && (
           <DraggableIconButton
             {...props}
-            className={`p-0 ${isDragging ? 'cursor-grabbing' : 'cursor-grab'} text-white  opacity-0 hover:opacity-100 focus:opacity-100`}
+            className={`p-0 ${isDragging ? 'cursor-grabbing' : 'cursor-grab'} text-text-primary  opacity-0 hover:opacity-100 focus:opacity-100`}
             columnLabel={columnLabel}
           />
         )}

package/src/Listing/Header/Cell/SelectActionListingHeaderCell.tsx

@@ -35,7 +35,7 @@ const SelectActionListingHeaderCell = ({
     >
       <Checkbox
         checked={hasRows && selectedRowCount === rowCount}
-        className="text-white"
+        className="text-text-primary"
         indeterminate={
           hasRows && selectedRowCount > 0 && selectedRowCount < rowCount
         }
@@ -44,7 +44,7 @@ const SelectActionListingHeaderCell = ({
       />
       {not(isEmpty(predefinedRowsSelection)) ? (
         <PopoverMenu
-          className="text-white"
+          className="text-text-primary"
           icon={<ArrowDropDownIcon />}
           title={labelPredefinedRowsSelectionMenu}
         >
@@ -57,7 +57,7 @@ const SelectActionListingHeaderCell = ({
           )}
         </PopoverMenu>
       ) : (
-        <div className="text-white" />
+        <div className="text-text-primary" />
       )}
     </TableCell>
   );

package/src/ThemeProvider/palettes.ts

@@ -45,6 +45,7 @@ declare module '@mui/material/styles' {
       main: string;
     };
     statusBackground: StatusBackground;
+    tile: TypeTile;
   }
   interface StatusBackground {
     error: string;
@@ -64,6 +65,13 @@ declare module '@mui/material/styles' {
       main: string;
     };
     statusBackground: StatusBackground;
+    tile: TypeTile;
+  }
+
+  interface TypeTile {
+    background: string;
+    border: string;
+    borderHover: string;
   }
 
   interface TypeBackground {
@@ -179,7 +187,7 @@ export const lightPalette: PaletteOptions = {
   },
   background: {
     default: '#F4F4F4',
-    listingHeader: '#666666',
+    listingHeader: '#D9D9D9',
     panel: '#EDEDED',
     panelGroups: '#F5F5F5',
     paper: '#FFFFFF',
@@ -198,6 +206,8 @@ export const lightPalette: PaletteOptions = {
   divider: '#E3E3E3',
   error: {
     contrastText: '#000',
+    dark: '#B23333',
+    light: '#FF6E6E',
     main: '#FF4A4A'
   },
   header: {
@@ -267,9 +277,9 @@ export const lightPalette: PaletteOptions = {
   },
   primary: {
     contrastText: '#fff',
-    dark: '#255891',
-    light: '#cde7fc',
-    main: '#2E68AA'
+    dark: '#2A3575',
+    light: '#D8DCE9',
+    main: '#131D5A'
   },
   secondary: {
     contrastText: '#fff',
@@ -278,15 +288,17 @@ export const lightPalette: PaletteOptions = {
     main: '#C772D6'
   },
   statusBackground: {
-    error: '#FF6666',
+    error: '#FF6E6E',
     none: alpha('#2E68AA', 0.1),
     pending: '#1EBEB3',
-    success: '#88B922',
+    success: '#9FC74E',
     unknown: '#E3E3E3',
-    warning: '#FD9B27'
+    warning: '#FCC481'
   },
   success: {
     contrastText: '#000',
+    dark: '#5F8117',
+    light: '#9FC74E',
     main: '#88B922'
   },
   text: {
@@ -294,9 +306,14 @@ export const lightPalette: PaletteOptions = {
     primary: '#000000',
     secondary: '#666666'
   },
+  tile: {
+    background: '#FFFFFF',
+    border: '#E3E3E3',
+    borderHover: '#CCCCCC'
+  },
   warning: {
     contrastText: '#000',
-    dark: '#FC7E00',
+    dark: '#B16C1B',
     light: '#FCC481',
     main: '#FD9B27'
   }
@@ -342,7 +359,9 @@ export const darkPalette: PaletteOptions = {
   divider: '#666666',
   error: {
     contrastText: '#fff',
-    main: '#D60101'
+    dark: '#B23333',
+    light: '#FF6E6E',
+    main: '#FF4A4A'
   },
   header: {
     page: {
@@ -407,7 +426,7 @@ export const darkPalette: PaletteOptions = {
   mode: ThemeMode.dark,
   pending: {
     contrastText: '#fff',
-    main: '#118077'
+    main: '#1EBEB3'
   },
   primary: {
     contrastText: '#000',
@@ -420,25 +439,34 @@ export const darkPalette: PaletteOptions = {
     main: '#7C1FA2'
   },
   statusBackground: {
-    error: '#D60101',
+    error: '#FF4A4A',
     none: alpha('#2E68AA', 0.1),
-    pending: '#118077',
-    success: '#5F8118',
+    pending: '#1EBEB3',
+    success: '#88B922',
     unknown: '#666666',
-    warning: '#C55400'
+    warning: '#FD9B27'
   },
   success: {
     contrastText: '#fff',
-    main: '#5F8118'
+    dark: '#5F8117',
+    light: '#9FC74E',
+    main: '#88B922'
   },
   text: {
     disabled: '#666666',
     primary: '#FFFFFF',
     secondary: '#CCCCCC'
   },
+  tile: {
+    background: '#2E2E2E',
+    border: '#4A4A4A',
+    borderHover: '#6D6D6D'
+  },
   warning: {
     contrastText: '#fff',
-    main: '#C55400'
+    dark: '#B16C1B',
+    light: '#FCC481',
+    main: '#FD9B27'
   }
 };
 

package/src/ThemeProvider/tailwindcss.css

@@ -46,7 +46,7 @@
 
   /* Background colors */
   --color-background-default: #f4f4f4;
-  --color-background-listing-header: #666666;
+  --color-background-listing-header: #d9d9d9;
   --color-background-panel: #ededed;
   --color-background-panel-groups: #f5f5f5;
   --color-background-paper: #ffffff;
@@ -63,6 +63,8 @@
   /* Utility colors */
   --color-divider: #e3e3e3;
   --color-error-main: #ff4a4a;
+  --color-error-light: #ff6e6e;
+  --color-error-dark: #b23333;
 
   /* Header colors */
   --color-header-page-action-background-active: #1975d10f;
@@ -95,22 +97,29 @@
   --color-pending-main: #1ebeb3;
 
   /* Primary & Secondary colors */
-  --color-primary-main: #2e68aa;
-  --color-primary-light: #cde7fc;
-  --color-primary-dark: #255891;
+  --color-primary-main: #131d5a;
+  --color-primary-light: #d8dce9;
+  --color-primary-dark: #2a3575;
   --color-primary-contrastText: #fff;
   --color-secondary-main: #c772d6;
   --color-secondary-light: #e5a5f0;
   --color-secondary-dark: #ac28c1;
 
   /* Status colors */
-  --color-status-background-error: #ff6666;
+  --color-status-background-error: #ff6e6e;
   --color-status-background-none: --alpha(#2e68aa / 10%);
   --color-status-background-pending: #1ebeb3;
-  --color-status-background-success: #88b922;
+  --color-status-background-success: #9fc74e;
   --color-stauts-background-unknown: #e3e3e3;
-  --color-status-background-warning: #fd9b27;
+  --color-status-background-warning: #fcc481;
   --color-success-main: #88b922;
+  --color-success-light: #9fc74e;
+  --color-success-dark: #5f8117;
+
+  /* Tile container colors */
+  --color-tile-background: #ffffff;
+  --color-tile-border: #e3e3e3;
+  --color-tile-border-hover: #cccccc;
 
   /* Text colors */
   --color-text-disabled: #999999;
@@ -118,7 +127,7 @@
   --color-text-secondary: #666666;
   --color-warning-main: #fd9b27;
   --color-warning-light: #fcc481;
-  --color-warning-dark: #fc7e00;
+  --color-warning-dark: #b16c1b;
 
   /* Base colors */
   --color-white: #ffffff;
@@ -156,7 +165,9 @@
     --color-chip-success: #5f8118;
     --color-chip-warning: #c55400;
     --color-divider: #666666;
-    --color-error-main: #d60101;
+    --color-error-main: #ff4a4a;
+    --color-error-light: #ff6e6e;
+    --color-error-dark: #b23333;
     --color-header-page-action-background-active: #1975d10f;
     --color-header-page-action-background-default: #ffffff00;
     --color-header-page-action-color-active: #1976d2;
@@ -182,23 +193,30 @@
     --color-header-menu-item-color-active: #3e85d5;
     --color-header-menu-item-color-default: #f9fafb;
     --color-header-menu-item-color-hover: #ffffff;
-    --color-pending-main: #118077;
+    --color-pending-main: #1ebeb3;
     --color-primary-main: #6eaff8;
     --color-primary-light: #8bbff9;
     --color-primary-dark: #4974a5;
     --color-primary-contrastText: #000;
     --color-secondary-main: #7c1fa2;
-    --color-status-background-error: #d60101;
+    --color-status-background-error: #ff4a4a;
     --color-status-background-none: --alpha(#2e68aa / 10%);
-    --color-status-background-pending: #118077;
-    --color-status-background-success: #5f8118;
+    --color-status-background-pending: #1ebeb3;
+    --color-status-background-success: #88b922;
     --color-stauts-background-unknown: #666666;
-    --color-status-background-warning: #c55400;
-    --color-success-main: #5f8118;
+    --color-status-background-warning: #fd9b27;
+    --color-success-main: #88b922;
+    --color-success-light: #9fc74e;
+    --color-success-dark: #5f8117;
+    --color-tile-background: #2e2e2e;
+    --color-tile-border: #4a4a4a;
+    --color-tile-border-hover: #6d6d6d;
     --color-text-disabled: #666666;
     --color-text-primary: #ffffff;
     --color-text-secondary: #cccccc;
-    --color-warning-main: #c55400;
+    --color-warning-main: #fd9b27;
+    --color-warning-light: #fcc481;
+    --color-warning-dark: #b16c1b;
   }
 }
 

package/src/TopCounterElements/ResourceCounters.tsx

@@ -1,6 +1,5 @@
 import type { SeverityCode } from '@centreon/ui';
 
-import { Fragment } from 'react';
 import { Link } from 'react-router';
 import { makeStyles } from 'tss-react/mui';
 
@@ -8,29 +7,23 @@ import StatusCounter from './StatusCounter';
 
 const useStyles = makeStyles()((theme) => ({
   container: {
-    display: 'inline-block',
+    alignItems: 'center',
+    display: 'flex',
+    gap: theme.spacing(1),
     listStyle: 'none',
     margin: 0,
-    padding: 0,
-    [theme.breakpoints.down(1025)]: {
-      flexFlow: 'row wrap'
-    }
+    padding: 0
   },
   item: {
-    display: 'inline-block',
+    alignItems: 'center',
+    display: 'flex',
     margin: 0,
-    padding: 0,
-    paddingRight: theme.spacing(0.25)
+    padding: 0
   },
   link: {
+    alignItems: 'center',
+    display: 'flex',
     textDecoration: 'none'
-  },
-  splitter: {
-    display: 'none',
-    [theme.breakpoints.down(1025)]: {
-      display: 'block',
-      marginBottom: theme.spacing(0.25)
-    }
   }
 }));
 
@@ -38,6 +31,7 @@ export interface CounterProps {
   counters: Array<{
     ariaLabel: string;
     count: string | number;
+    detail?: string | number;
     onClick: (e: React.MouseEvent) => void;
     severityCode: SeverityCode;
     to: string;
@@ -50,20 +44,21 @@ export default ({ counters }: CounterProps): JSX.Element => {
   return (
     <ul className={classes.container}>
       {counters.map(
-        ({ to, ariaLabel, onClick, count, severityCode }, index) => (
-          <Fragment key={to.toString().replace(/\W/g, '')}>
-            {index === 2 && <li className={classes.splitter} />}
-            <li className={classes.item}>
-              <Link
-                aria-label={ariaLabel}
-                className={classes.link}
-                onClick={onClick}
-                to={to}
-              >
-                <StatusCounter count={count} severityCode={severityCode} />
-              </Link>
-            </li>
-          </Fragment>
+        ({ to, ariaLabel, onClick, count, detail, severityCode }) => (
+          <li className={classes.item} key={to.toString().replace(/\W/g, '')}>
+            <Link
+              aria-label={ariaLabel}
+              className={classes.link}
+              onClick={onClick}
+              to={to}
+            >
+              <StatusCounter
+                count={count}
+                detail={detail}
+                severityCode={severityCode}
+              />
+            </Link>
+          </li>
         )
       )}
     </ul>

package/src/TopCounterElements/StatusCounter.tsx

@@ -1,63 +1,72 @@
-import { Badge, Tooltip } from '@mui/material';
+import { Tooltip } from '@mui/material';
 
 import { getStatusColors, type SeverityCode } from '@centreon/ui';
 
 import numeral from 'numeral';
+import { isNil } from 'ramda';
 import { makeStyles } from 'tss-react/mui';
 
 export interface StyleProps {
   severityCode?: SeverityCode | null;
 }
 
-const useStyles = makeStyles<StyleProps>()((theme, { severityCode }) => ({
-  badge: {
-    background: severityCode
-      ? getStatusColors({ severityCode, theme })?.backgroundColor
-      : 'transparent',
-    borderRadius: theme.spacing(1.25),
-    color: theme.palette.common.black,
-    cursor: 'pointer',
-    fontSize: theme.typography.body2.fontSize,
-    fontWeight: theme.typography.fontWeightBold,
-    height: theme.spacing(2.125),
-    lineHeight: theme.spacing(2.125),
-    minWidth: theme.spacing(2.125),
-    position: 'relative',
-    right: 0,
-    top: 0,
-    transform: 'none'
-  }
-}));
+const useStyles = makeStyles<StyleProps>()((theme, { severityCode }) => {
+  const statusColors = severityCode
+    ? getStatusColors({ severityCode, theme })
+    : null;
+
+  return {
+    container: {
+      alignItems: 'center',
+      color: theme.palette.mode === 'dark' ? '#EAEEF7' : '#1B2233',
+      cursor: 'pointer',
+      display: 'inline-flex',
+      gap: '3px'
+    },
+    count: {
+      fontFamily: 'ui-monospace, "Roboto Mono", Menlo, monospace',
+      fontSize: '12px',
+      fontWeight: theme.typography.fontWeightMedium,
+      lineHeight: 1
+    },
+    dot: {
+      backgroundColor: statusColors?.backgroundColor ?? theme.palette.divider,
+      borderRadius: '50%',
+      flexShrink: 0,
+      height: '9px',
+      width: '9px'
+    }
+  };
+});
 
 export interface Props {
   className?: string;
   count: string | number;
+  detail?: string | number;
   severityCode?: SeverityCode | null;
 }
 
 const StatusCounter = ({
   severityCode = null,
   count,
+  detail,
   className
 }: Props): JSX.Element => {
   const { classes, cx } = useStyles({ severityCode });
-  const shouldDisableTooltip = Number(count) < 1000;
+  const hasDetail = !isNil(detail);
+  const shouldDisableTooltip = !hasDetail && Number(count) < 1000;
   const formattedCount = numeral(count).format('0.[0]a');
 
   return (
     <Tooltip
       disableHoverListener={shouldDisableTooltip}
       followCursor
-      title={count}
+      title={hasDetail ? detail : count}
     >
-      <Badge
-        badgeContent={formattedCount}
-        classes={{
-          badge: cx(classes.badge, className)
-        }}
-        max={Number.POSITIVE_INFINITY}
-        overlap="circular"
-      />
+      <span className={cx(classes.container, className)}>
+        <span className={classes.dot} />
+        <span className={classes.count}>{formattedCount}</span>
+      </span>
     </Tooltip>
   );
 };

package/src/TopCounterElements/TopCounterLayout.tsx

@@ -1,79 +1,48 @@
 import ExpandLessIcon from '@mui/icons-material/ExpandLess';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import type { SvgIconProps } from '@mui/material';
-import { Badge, ClickAwayListener } from '@mui/material';
+import { ClickAwayListener, Tooltip } from '@mui/material';
 
-import { ComponentType, useEffect, useState } from 'react';
+import type { ComponentType, MouseEvent } from 'react';
+import { useEffect, useState } from 'react';
+import { Link } from 'react-router';
 import { makeStyles } from 'tss-react/mui';
 
 import useCloseOnLegacyPage from './useCloseOnLegacyPage';
 
 const useStyles = makeStyles()((theme) => ({
-  button: {
-    '& > svg': {
-      height: '0.9em',
-      margin: `-${theme.spacing(0.5)}`,
-      [theme.breakpoints.down(1025)]: {
-        margin: `-${theme.spacing(0.5)}`
-      }
-    },
-    appearance: 'none',
-    background: 'none',
-    border: 0,
-    color: theme.palette.common.white,
-    cursor: 'pointer',
-    display: 'flex',
-
-    [theme.breakpoints.up(1025)]: {
-      alignItems: 'center',
-      flexFlow: 'row no-wrap',
-      marginTop: theme.spacing(0.5)
-    },
-
-    [theme.breakpoints.down(1025)]: {
-      alignItems: 'center',
-      flexFlow: 'column wrap',
-      order: 1
-    },
-
-    padding: '0'
-  },
   container: {
+    alignItems: 'center',
+    display: 'flex',
     position: 'relative'
   },
-  header: {
-    [theme.breakpoints.down(1025)]: {
-      display: 'flex',
-      flexFlow: 'row no-wrap'
-    }
-  },
-  iconWrapper: {
-    [theme.breakpoints.up(1025)]: {
-      position: 'absolute',
-      top: '0'
-    }
+  icon: {
+    '& > svg': {
+      display: 'block',
+      height: '16px',
+      width: '16px'
+    },
+    alignItems: 'center',
+    color: 'inherit',
+    display: 'inline-flex',
+    textDecoration: 'none'
   },
   indicators: {
+    alignItems: 'center',
+    display: 'inline-flex',
     lineHeight: 1,
     [theme.breakpoints.down(600)]: {
       display: 'none'
-    },
-    [theme.breakpoints.down(1025)]: {
-      flex: 'initial',
-      marginLeft: theme.spacing(0.5),
-      order: 2
-    },
-    [theme.breakpoints.up(1025)]: {
-      height: theme.spacing(2.5),
-      marginLeft: theme.spacing(3.75)
     }
   },
   subMenu: {
     backgroundColor: theme.palette.background.default,
+    borderRadius: theme.spacing(1),
     boxShadow: theme.shadows[3],
     boxSizing: 'border-box',
     left: 0,
     minWidth: theme.spacing(20),
+    overflow: 'hidden',
     position: 'absolute',
     textAlign: 'left',
     top: `calc(100% + ${theme.spacing(1.25)})`,
@@ -83,38 +52,53 @@ const useStyles = makeStyles()((theme) => ({
   subMenuOpen: {
     visibility: 'visible'
   },
-  textWrapper: {
+  tile: {
+    '& > svg': {
+      height: '16px',
+      width: '16px'
+    },
+    '&:hover': {
+      borderColor: theme.palette.tile.borderHover
+    },
     alignItems: 'center',
+    appearance: 'none',
+    background: theme.palette.tile.background,
+    border: `1px solid ${theme.palette.tile.border}`,
+    borderRadius: theme.spacing(1),
+    color: theme.palette.text.primary,
     display: 'inline-flex',
-    flex: '100%',
-    fontSize: theme.typography.body1.fontSize,
-    fontWeight: theme.typography.fontWeightBold,
-    lineHeight: '1',
-    whiteSpace: 'nowrap',
-    [theme.breakpoints.down(1025)]: {
-      display: 'none'
-    }
+    flexFlow: 'row nowrap',
+    gap: theme.spacing(1),
+    padding: '5px 9px'
+  },
+  tileButton: {
+    cursor: 'pointer'
   }
 }));
 
 interface TopCounterLayoutProps {
   Icon: ComponentType<SvgIconProps>;
+  iconLink?: string;
+  iconOnClick?: (e: MouseEvent<HTMLAnchorElement>) => void;
   renderIndicators: () => JSX.Element;
-  renderSubMenu: (params: { closeSubMenu: () => void }) => JSX.Element;
-  showPendingBadge?: boolean;
+  renderSubMenu?: (params: { closeSubMenu: () => void }) => JSX.Element;
   title: string;
+  tooltipDescription?: string;
 }
 
 const TopCounterLayout = ({
   Icon,
   title,
+  iconLink,
+  iconOnClick,
   renderIndicators,
   renderSubMenu,
-  showPendingBadge
+  tooltipDescription
 }: TopCounterLayoutProps): JSX.Element => {
   const { classes, cx } = useStyles();
   const [toggled, setToggled] = useState(false);
   const subMenuId = title.replace(/[^A-Za-z]/, '-');
+  const isExpandable = Boolean(renderSubMenu);
   useCloseOnLegacyPage({ setToggled });
 
   useEffect(() => {
@@ -137,6 +121,38 @@ const TopCounterLayout = ({
     };
   }, [toggled]);
 
+  const iconWithTooltip = (
+    <Tooltip
+      disableInteractive
+      enterDelay={500}
+      enterNextDelay={500}
+      placement="bottom"
+      title={tooltipDescription ?? title}
+    >
+      <Icon />
+    </Tooltip>
+  );
+
+  if (!isExpandable) {
+    return (
+      <div className={classes.tile}>
+        {iconLink ? (
+          <Link
+            aria-label={title}
+            className={classes.icon}
+            onClick={iconOnClick}
+            to={iconLink}
+          >
+            {iconWithTooltip}
+          </Link>
+        ) : (
+          <span className={classes.icon}>{iconWithTooltip}</span>
+        )}
+        <span className={classes.indicators}>{renderIndicators()}</span>
+      </div>
+    );
+  }
+
   return (
     <ClickAwayListener
       onClickAway={(): void => {
@@ -147,40 +163,27 @@ const TopCounterLayout = ({
       }}
     >
       <div className={classes.container}>
-        <div className={classes.header}>
-          <div className={classes.indicators}>{renderIndicators()}</div>
-          <button
-            aria-controls={`${subMenuId}-menu`}
-            aria-expanded={toggled}
-            aria-haspopup="true"
-            aria-label={title}
-            className={classes.button}
-            id={`${subMenuId}-button`}
-            onClick={(): void => setToggled(!toggled)}
-            type="button"
-          >
-            <span className={classes.iconWrapper}>
-              <Badge
-                anchorOrigin={{ horizontal: 'right', vertical: 'top' }}
-                color="pending"
-                invisible={!showPendingBadge}
-                overlap="circular"
-                variant="dot"
-              >
-                <Icon />
-              </Badge>
-            </span>
-            <span className={classes.textWrapper}>{title}</span>
-            {toggled ? <ExpandLessIcon /> : <ExpandMoreIcon />}
-          </button>
-        </div>
+        <button
+          aria-controls={`${subMenuId}-menu`}
+          aria-expanded={toggled}
+          aria-haspopup="true"
+          aria-label={title}
+          className={cx(classes.tile, classes.tileButton)}
+          id={`${subMenuId}-button`}
+          onClick={(): void => setToggled(!toggled)}
+          type="button"
+        >
+          <span className={classes.icon}>{iconWithTooltip}</span>
+          <span className={classes.indicators}>{renderIndicators()}</span>
+          {toggled ? <ExpandLessIcon /> : <ExpandMoreIcon />}
+        </button>
         <div
           aria-labelledby={`${subMenuId}-button`}
           className={cx(classes.subMenu, { [classes.subMenuOpen]: toggled })}
           id={`${subMenuId}-menu`}
           role="menu"
         >
-          {renderSubMenu({ closeSubMenu: () => setToggled(false) })}
+          {renderSubMenu?.({ closeSubMenu: () => setToggled(false) })}
         </div>
       </div>
     </ClickAwayListener>

package/src/TopCounterElements/index.tsx

@@ -1,6 +1,4 @@
 export * from './formaters';
 export type { CounterProps } from './ResourceCounters';
 export { default as TopCounterResourceCounters } from './ResourceCounters';
-export type { SubMenuProps } from './ResourceSubMenu';
-export { default as TopCounterResourceSubMenu } from './ResourceSubMenu';
 export { default as TopCounterLayout } from './TopCounterLayout';

package/src/components/CopyCommand/CopyCommand.styles.tsx

@@ -85,7 +85,7 @@ export const useCopyCommandStyle = makeStyles()((theme) => ({
   languageChip: {
     background: theme.palette.background.listingHeader,
     borderRadius: `0px ${theme.shape.borderRadius}px ${theme.shape.borderRadius}px ${theme.shape.borderRadius}px`,
-    color: theme.palette.common.white,
+    color: theme.palette.text.primary,
     fontSize: theme.typography.body2.fontSize,
     padding: `0px ${theme.spacing(0.5)}`,
     position: 'absolute',

package/src/utils/statuses.ts

@@ -25,14 +25,20 @@ export const getStatusColors = ({
 }: StatusColorProps): Colors => {
   const { palette } = theme;
 
+  // Typography color for status chips: text action primary (#000000) in light
+  // mode, paper (#212121) in dark mode, so it stays readable on the bright
+  // status backgrounds in both modes.
+  const chipTextColor =
+    palette.mode === 'dark' ? palette.background.paper : palette.text.primary;
+
   const colorMapping = {
     [SeverityCode.High]: {
       backgroundColor: theme.palette.statusBackground.error,
-      color: palette.error.contrastText
+      color: chipTextColor
     },
     [SeverityCode.Medium]: {
       backgroundColor: theme.palette.statusBackground.warning,
-      color: palette.warning.contrastText
+      color: chipTextColor
     },
     [SeverityCode.Low]: {
       backgroundColor: theme.palette.statusBackground.unknown,
@@ -40,11 +46,11 @@ export const getStatusColors = ({
     },
     [SeverityCode.Pending]: {
       backgroundColor: theme.palette.statusBackground.pending,
-      color: palette.text.primary
+      color: chipTextColor
     },
     [SeverityCode.OK]: {
       backgroundColor: theme.palette.statusBackground.success,
-      color: palette.text.primary
+      color: chipTextColor
     },
     [SeverityCode.None]: {
       backgroundColor: theme.palette.statusBackground.none,

package/src/TopCounterElements/ResourceSubMenu.tsx

@@ -1,110 +0,0 @@
-import { List, ListItem } from '@mui/material';
-
-import { getStatusColors, type SeverityCode } from '@centreon/ui';
-import { ThemeMode } from '@centreon/ui-context';
-
-import { equals } from 'ramda';
-import { Link } from 'react-router';
-import { makeStyles } from 'tss-react/mui';
-
-const useStyles = makeStyles()((theme) => ({
-  count: {
-    marginLeft: 'auto'
-  },
-  link: {
-    alignItems: 'center',
-    color: 'inherit',
-    display: 'flex',
-    flex: '100%',
-    padding: `0 ${theme.spacing(1)}`,
-    textDecoration: 'none'
-  },
-  status: {
-    alignItems: 'center',
-    display: 'flex'
-  },
-  statusCounter: {
-    borderRadius: '50%',
-    height: theme.spacing(1),
-    marginRight: theme.spacing(1),
-    width: theme.spacing(1)
-  },
-  submenu: {
-    fontSize: theme.typography.body2.fontSize,
-    padding: 0
-  },
-  submenuItem: {
-    '&:hover': {
-      background: equals(theme.palette.mode, ThemeMode.dark)
-        ? theme.palette.primary.dark
-        : theme.palette.primary.light,
-      color: equals(theme.palette.mode, ThemeMode.dark)
-        ? theme.palette.common.white
-        : theme.palette.primary.main
-    },
-    '&:not(:last-child)': {
-      borderBottom: `1px solid ${theme.palette.divider}`
-    }
-  }
-}));
-
-export interface SubMenuProps {
-  items: Array<{
-    countTestId?: string;
-    onClick: (e: React.MouseEvent) => void;
-    severityCode: SeverityCode;
-    submenuCount: string | number;
-    submenuTitle: string;
-    to: string;
-  }>;
-  onClose?: () => void;
-}
-
-const SubMenu = ({ items, onClose }: SubMenuProps): JSX.Element => {
-  const { classes, theme } = useStyles();
-
-  return (
-    <List className={classes.submenu}>
-      {items.map(
-        ({
-          onClick,
-          severityCode,
-          submenuTitle,
-          submenuCount,
-          countTestId,
-          to
-        }) => (
-          <ListItem
-            className={classes.submenuItem}
-            disableGutters
-            key={to}
-            onClick={onClose}
-          >
-            <Link
-              className={classes.link}
-              onClick={onClick}
-              role="menuitem"
-              to={to}
-            >
-              <span className={classes.status}>
-                <span
-                  className={classes.statusCounter}
-                  style={{
-                    backgroundColor: getStatusColors({ severityCode, theme })
-                      ?.backgroundColor
-                  }}
-                />
-                <span>{submenuTitle}</span>
-              </span>
-              <span className={classes.count} data-testid={countTestId}>
-                {submenuCount}
-              </span>
-            </Link>
-          </ListItem>
-        )
-      )}
-    </List>
-  );
-};
-
-export default SubMenu;