From e04547be9c1619757ddf3a4ad1d8908b805ce677 Mon Sep 17 00:00:00 2001
From: QiShaoXuan <qishaoxuan777@gmail.com>
Date: Mon, 26 Dec 2022 15:13:48 +0800
Subject: [PATCH] fix: favorite button status error

---
 packages/app/src/components/page-list/index.tsx | 6 ++++++
 packages/app/src/components/page-list/styles.ts | 3 +++
 packages/app/src/ui/popper/Popper.tsx           | 4 +++-
 3 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/packages/app/src/components/page-list/index.tsx b/packages/app/src/components/page-list/index.tsx
index 53575a23f8..f63fa39944 100644
--- a/packages/app/src/components/page-list/index.tsx
+++ b/packages/app/src/components/page-list/index.tsx
@@ -23,6 +23,7 @@ import { useRouter } from 'next/router';
 import { useAppState } from '@/providers/app-state-provider/context';
 import { toast } from '@/ui/toast';
 import { usePageHelper } from '@/hooks/use-page-helper';
+import { useTheme } from '@/providers/themeProvider';
 
 const FavoriteTag = ({
   pageMeta: { favorite, id },
@@ -30,6 +31,7 @@ const FavoriteTag = ({
   pageMeta: PageMeta;
 }) => {
   const { toggleFavoritePage } = usePageHelper();
+  const { theme } = useTheme();
   return (
     <Tooltip
       content={favorite ? 'Favourited' : 'Favourite'}
@@ -43,6 +45,10 @@ const FavoriteTag = ({
           toggleFavoritePage(id);
           toast(!favorite ? 'Removed to Favourites' : 'Added to Favourites');
         }}
+        style={{
+          color: favorite ? theme.colors.primaryColor : theme.colors.iconColor,
+        }}
+        className="favorite-button"
       >
         {favorite ? (
           <FavouritedIcon data-testid="favourited-icon" />
diff --git a/packages/app/src/components/page-list/styles.ts b/packages/app/src/components/page-list/styles.ts
index 28cb0a2139..fcf80e813f 100644
--- a/packages/app/src/components/page-list/styles.ts
+++ b/packages/app/src/components/page-list/styles.ts
@@ -39,6 +39,9 @@ export const StyledTitleLink = styled.div(({ theme }) => {
 export const StyledTableRow = styled(TableRow)(() => {
   return {
     cursor: 'pointer',
+    '.favorite-button': {
+      display: 'none',
+    },
     '&:hover': {
       '.favorite-button': {
         display: 'flex',
diff --git a/packages/app/src/ui/popper/Popper.tsx b/packages/app/src/ui/popper/Popper.tsx
index 97987d9c0a..2ebf105881 100644
--- a/packages/app/src/ui/popper/Popper.tsx
+++ b/packages/app/src/ui/popper/Popper.tsx
@@ -117,7 +117,9 @@ export const Popper = ({
           },
           onPointerEnter: onPointerEnterHandler,
           onPointerLeave: onPointerLeaveHandler,
-          className: anchorClassName,
+          className: `${anchorClassName ? anchorClassName + ' ' : ''}${
+            children.props.className
+          }`,
         })}
         {content && (
           <BasicStyledPopper