Merge pull request #29416 from Vity01/scaffolding-detail-button-color-fix

Scaffolding detail button color fix

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

@@ -35,6 +35,9 @@ const useStyles = makeStyles<
     display: 'flex',
     justifyContent: 'space-between',
   },
+  detailIcon: {
+    color: ({ cardFontColor }) => cardFontColor,
+  },
 }));
 
 /**
@@ -66,7 +69,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

@@ -29,10 +29,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);
@@ -47,14 +49,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>