From 4db42a2b29f22d523cecedec5c6c94352564b56e Mon Sep 17 00:00:00 2001
From: Enrico Ros <enrico.ros@gmail.com>
Date: Wed, 19 Nov 2025 12:01:17 -0800
Subject: [PATCH] StarIcons: improve

---
 src/common/components/StarIcons.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/common/components/StarIcons.tsx b/src/common/components/StarIcons.tsx
index 2a40cbe3c..cf9a6fd44 100644
--- a/src/common/components/StarIcons.tsx
+++ b/src/common/components/StarIcons.tsx
@@ -32,12 +32,17 @@ export const StarredNoXL2 = React.memo(function StarredNoXL2() {
   return <StarIcon sx={starIconStyles.starredNoXl2} />;
 });
 
-export const UnStarred = React.memo(function UnStarred() {
+const UnStarredNoXL2 = React.memo(function UnStarred() {
   return <StarBorderIcon />;
 })
 
 export const StarredState = React.memo(function StarredState({ isStarred }: { isStarred: boolean }) {
-  return isStarred ? <Starred /> : <UnStarred />;
+  return isStarred ? <Starred /> : <UnStarredNoXL2 />;
+});
+
+// have an unstyled that just returns StarIcon or StarBorderIcon and we can use with our own styles and props {...}
+export const StarIconUnstyled = React.memo(function StarIconUnstyled({ isStarred }: { isStarred: boolean }) {
+  return isStarred ? <StarIcon /> : <StarBorderIcon />;
 });