From 3f76d0e8fdcc313d42c29c5aeec2715ec059f5aa Mon Sep 17 00:00:00 2001
From: Thomas Cardonne <thomas.cardonne@adevinta.com>
Date: Tue, 24 Sep 2024 23:55:58 +0200
Subject: [PATCH] fix(core-components): correct size and color of
 FavoriteToggle

Signed-off-by: Thomas Cardonne <thomas.cardonne@adevinta.com>
---
 .changeset/angry-mayflies-collect.md                       | 5 +++++
 .../components/FavoriteToggle/FavoriteToggle.stories.tsx   | 6 +++++-
 .../src/components/FavoriteToggle/FavoriteToggle.tsx       | 7 +++++--
 3 files changed, 15 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/angry-mayflies-collect.md

diff --git a/.changeset/angry-mayflies-collect.md b/.changeset/angry-mayflies-collect.md
new file mode 100644
index 0000000000..df49f98b33
--- /dev/null
+++ b/.changeset/angry-mayflies-collect.md
@@ -0,0 +1,5 @@
+---
+'@backstage/core-components': patch
+---
+
+Correct size of FavoriteToggle and inherit non-starred color from parent
diff --git a/packages/core-components/src/components/FavoriteToggle/FavoriteToggle.stories.tsx b/packages/core-components/src/components/FavoriteToggle/FavoriteToggle.stories.tsx
index cfe44b8728..e531e9b254 100644
--- a/packages/core-components/src/components/FavoriteToggle/FavoriteToggle.stories.tsx
+++ b/packages/core-components/src/components/FavoriteToggle/FavoriteToggle.stories.tsx
@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React from 'react';
+import React, { ComponentType, PropsWithChildren } from 'react';
 import { FavoriteToggle } from './FavoriteToggle';
 import {
   UnifiedThemeProvider,
@@ -21,10 +21,14 @@ import {
   createUnifiedTheme,
   palettes,
 } from '@backstage/theme';
+import { wrapInTestApp } from '@backstage/test-utils';
 
 export default {
   title: 'Core/FavoriteToggle',
   component: FavoriteToggle,
+  decorators: [
+    (Story: ComponentType<PropsWithChildren<{}>>) => wrapInTestApp(<Story />),
+  ],
 };
 
 export const Default = () => {
diff --git a/packages/core-components/src/components/FavoriteToggle/FavoriteToggle.tsx b/packages/core-components/src/components/FavoriteToggle/FavoriteToggle.tsx
index 8a517d27ea..ba7b4edb99 100644
--- a/packages/core-components/src/components/FavoriteToggle/FavoriteToggle.tsx
+++ b/packages/core-components/src/components/FavoriteToggle/FavoriteToggle.tsx
@@ -21,14 +21,16 @@ import { Theme, makeStyles } from '@material-ui/core/styles';
 import { StarIcon, UnstarredIcon } from '../../icons';
 
 const useStyles = makeStyles<Theme>(
-  theme => ({
+  () => ({
     icon: {
       color: '#f3ba37',
       cursor: 'pointer',
+      display: 'inline-flex',
     },
     iconBorder: {
-      color: theme.palette.text.primary,
+      color: 'inherit',
       cursor: 'pointer',
+      display: 'inline-flex',
     },
   }),
   { name: 'BackstageFavoriteToggleIcon' },
@@ -89,6 +91,7 @@ export function FavoriteToggle(
         aria-label={title}
         id={id}
         onClick={() => onChange(!value)}
+        color="inherit"
         {...iconButtonProps}
       >
         <FavoriteToggleIcon isFavorite={value} />