feat: add customizable className prop to TemplateDetailButton and update CardHeader to use it

Signed-off-by: Ladislav Vitásek <ladislav.vitasek@gendigital.com>

.changeset/social-seals-shout.md

@@ -0,0 +1,7 @@
+---
+'@backstage/plugin-scaffolder-react': patch
+---
+
+Detail icon - light theme - fix
+
+- Fixes the detail icon in light theme to be visible in proper color (same as favorite star).

plugins/scaffolder-react/src/next/components/TemplateCard/CardHeader.tsx

@@ -36,6 +36,9 @@ const useStyles = makeStyles<
     display: 'flex',
     justifyContent: 'space-between',
   },
+  detailIcon: {
+    color: ({ cardFontColor }) => cardFontColor,
+  },
 }));
 
 /**
@@ -67,7 +70,10 @@ export const CardHeader = (props: CardHeaderProps) => {
     <div className={styles.subtitleWrapper}>
       <div>{type}</div>
       <div>
-        <TemplateDetailButton template={props.template} />
+        <TemplateDetailButton
+          className={styles.detailIcon}
+          template={props.template}
+        />
         <FavoriteEntity
           entity={props.template}
           style={{ padding: 0, marginLeft: 6 }}

plugins/scaffolder-react/src/next/components/TemplateCard/TemplateDetailButton.tsx

@@ -30,10 +30,12 @@ import { useTranslationRef } from '@backstage/frontend-plugin-api';
 
 export interface TemplateDetailButtonProps {
   template: Entity;
+  className?: string;
 }
 
 export const TemplateDetailButton = ({
   template,
+  className,
 }: TemplateDetailButtonProps) => {
   const catalogEntityRoute = useRouteRef(entityRouteRef);
   const { t } = useTranslationRef(scaffolderReactTranslationRef);
@@ -48,14 +50,13 @@ export const TemplateDetailButton = ({
         aria-label={t('cardHeader.detailBtnTitle')}
         id={`viewDetail-${entityRef}`}
         style={{ padding: 0 }}
-        color="inherit"
       >
         <Typography component="span">
           <Link
             to={catalogEntityRoute(entityRouteParams(template))}
             style={{ display: 'flex', alignItems: 'center' }}
           >
-            <TemplateIcon />
+            <TemplateIcon className={className} />
           </Link>
         </Typography>
       </IconButton>