From 7ae999684a5a9771da9c989aff74d9ae74937d03 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ladislav=20Vit=C3=A1sek?= <ladislav.vitasek@gendigital.com>
Date: Fri, 28 Mar 2025 15:54:48 +0100
Subject: [PATCH] feat: add customizable className prop to TemplateDetailButton
 and update CardHeader to use it
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Ladislav Vitásek <ladislav.vitasek@gendigital.com>
---
 .changeset/social-seals-shout.md                          | 7 +++++++
 .../src/next/components/TemplateCard/CardHeader.tsx       | 8 +++++++-
 .../next/components/TemplateCard/TemplateDetailButton.tsx | 5 +++--
 3 files changed, 17 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/social-seals-shout.md

diff --git a/.changeset/social-seals-shout.md b/.changeset/social-seals-shout.md
new file mode 100644
index 0000000000..b3c386b7cb
--- /dev/null
+++ b/.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).
diff --git a/plugins/scaffolder-react/src/next/components/TemplateCard/CardHeader.tsx b/plugins/scaffolder-react/src/next/components/TemplateCard/CardHeader.tsx
index 5e5c6fe8bf..edba47ac1a 100644
--- a/plugins/scaffolder-react/src/next/components/TemplateCard/CardHeader.tsx
+++ b/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 }}
diff --git a/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateDetailButton.tsx b/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateDetailButton.tsx
index 6ecfc2a1e9..0ac5a664e6 100644
--- a/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateDetailButton.tsx
+++ b/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>