fix(global-header): Adjust the global header Stared Items icon color and visibility (#1340)

* fix(global-header): Adjust the global header starred items icon color and visibility

- Changed star icon color from orange to gold (#F3BA37) for better visibility
- Star icon now only appears on hover instead of being always visible
- Maintains consistent styling with table view starred items across the application

* fix(theme): Update API report for starred items color theme changes

---------

Co-authored-by: Mitesh Kumar <itsmiteshkumar98@gmail.com>

Author: lokanandaprabhu

workspaces/global-header/.changeset/fix-starred-items-icon-color-visibility.md

@@ -0,0 +1,9 @@
+---
+'@red-hat-developer-hub/backstage-plugin-global-header': patch
+---
+
+Fixes the global header starred items icon color and visibility:
+
+- Changed star icon color to use theme.rhdh.general.starredItemsColor for better visibility and customization
+- Star icon now only appears on hover instead of being always visible
+- Maintains consistent styling with table view starred items across the application

workspaces/global-header/plugins/global-header/src/components/HeaderDropdownComponent/StarredDropdown.test.tsx

@@ -122,4 +122,54 @@ describe('StarredDropdown', () => {
     fireEvent.click(screen.getByRole('button'));
     expect(handleOpen).toHaveBeenCalled();
   });
+
+  it('shows star icon only on hover via CSS', async () => {
+    (useStarredEntities as jest.Mock).mockReturnValue({
+      starredEntities: new Set(['component:default/my-entity']),
+      toggleStarredEntity: jest.fn(),
+      isStarredEntity: jest.fn(),
+    });
+
+    (useDropdownManager as jest.Mock).mockReturnValue({
+      anchorEl: document.createElement('div'), // Simulate open dropdown
+      handleOpen: jest.fn(),
+      handleClose: jest.fn(),
+    });
+
+    await renderInTestApp(<StarredDropdown />);
+
+    const starButton = screen.getByLabelText('Remove from list');
+
+    // Star should be hidden initially
+    expect(starButton).toHaveStyle('visibility: hidden');
+
+    // Star should have the star-icon class for CSS targeting
+    expect(starButton).toHaveClass('star-icon');
+  });
+
+  it('calls toggleStarredEntity when star icon is clicked', async () => {
+    const toggleStarredEntity = jest.fn();
+    (useStarredEntities as jest.Mock).mockReturnValue({
+      starredEntities: new Set(['component:default/my-entity']),
+      toggleStarredEntity,
+      isStarredEntity: jest.fn(),
+    });
+
+    (useDropdownManager as jest.Mock).mockReturnValue({
+      anchorEl: document.createElement('div'), // Simulate open dropdown
+      handleOpen: jest.fn(),
+      handleClose: jest.fn(),
+    });
+
+    await renderInTestApp(<StarredDropdown />);
+
+    // Star is always available for clicking, just hidden visually
+
+    const starButton = screen.getByLabelText('Remove from list');
+    fireEvent.click(starButton);
+
+    expect(toggleStarredEntity).toHaveBeenCalledWith(
+      'component:default/my-entity',
+    );
+  });
 });

workspaces/global-header/plugins/global-header/src/components/HeaderDropdownComponent/StarredDropdown.tsx

@@ -64,6 +64,7 @@ const StarredItem: FC<SectionComponentProps> = ({
   const { name, kind, namespace } = parseEntityRef(entityRef as string);
   const theme = useTheme();
   const { t } = useTranslation();
+  const rhdhPalette = (theme.palette as any).rhdh;
 
   return (
     <MenuItem
@@ -72,6 +73,11 @@ const StarredItem: FC<SectionComponentProps> = ({
       onClick={handleClose}
       disableRipple
       disableTouchRipple
+      sx={{
+        '&:hover .star-icon, &:focus-visible .star-icon': {
+          visibility: 'visible',
+        },
+      }}
     >
       {Icon && (
         <ListItemIcon sx={{ minWidth: 36 }}>
@@ -90,13 +96,18 @@ const StarredItem: FC<SectionComponentProps> = ({
       />
       <Tooltip title={t('starred.removeTooltip')}>
         <IconButton
+          className="star-icon"
           onClick={e => {
             e.preventDefault();
             e.stopPropagation();
             toggleStarredEntity(entityRef);
           }}
+          sx={{
+            visibility: 'hidden',
+            color: rhdhPalette?.general?.starredItemsColor ?? '#F3BA37',
+          }}
         >
-          <Star color="warning" />
+          <Star />
         </IconButton>
       </Tooltip>
     </MenuItem>

workspaces/theme/plugins/theme/report.api.md

@@ -87,6 +87,7 @@ export interface RHDHThemePalette {
         appBarBackgroundColor: string;
         appBarForegroundColor: string;
         appBarBackgroundImage: string;
+        starredItemsColor: string;
     };
     // (undocumented)
     primary: {

workspaces/theme/plugins/theme/src/darkTheme.ts

@@ -85,6 +85,8 @@ export const darkThemeOverrides: Partial<ThemeConfigPalette> = {
       appBarBackgroundColor: '#151515',
       appBarForegroundColor: '#ffffff',
       appBarBackgroundImage: 'none',
+
+      starredItemsColor: '#F3BA37',
     },
     primary: {
       main: '#92c5f9',

workspaces/theme/plugins/theme/src/lightTheme.ts

@@ -85,6 +85,8 @@ export const lightThemeOverrides: Partial<ThemeConfigPalette> = {
       appBarBackgroundColor: '#f2f2f2',
       appBarForegroundColor: '#1f1f1f',
       appBarBackgroundImage: 'none',
+
+      starredItemsColor: '#F3BA37',
     },
     primary: {
       main: '#0066CC',

workspaces/theme/plugins/theme/src/types.ts

@@ -55,6 +55,8 @@ export interface RHDHThemePalette {
     appBarBackgroundColor: string;
     appBarForegroundColor: string;
     appBarBackgroundImage: string;
+
+    starredItemsColor: string;
   };
 
   primary: {