From d78778566029d3d3f4efedd79c2bace43d6dbe8d Mon Sep 17 00:00:00 2001
From: LeonspaceX <xiezhengyang112022@163.com>
Date: Wed, 28 Jan 2026 18:33:59 +0800
Subject: [PATCH] Highlight voted button in PostCard

---
 front/src/components/PostCard.tsx | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/front/src/components/PostCard.tsx b/front/src/components/PostCard.tsx
index 16909e9..cf31cb4 100644
--- a/front/src/components/PostCard.tsx
+++ b/front/src/components/PostCard.tsx
@@ -163,6 +163,12 @@ const useStyles = makeStyles({
       boxShadow: 'none',
     },
   },
+  actionButtonActive: {
+    color: tokens.colorBrandForegroundLink,
+    '& svg': {
+      color: tokens.colorBrandForegroundLink,
+    },
+  },
   modalOverlay: {
     position: 'fixed',
     top: 0,
@@ -203,6 +209,7 @@ const PostCard = ({
   const { dispatchToast } = useToastController(toasterId);
   const [votes, setVotes] = React.useState({ upvotes, downvotes });
   const [hasVoted, setHasVoted] = React.useState(false);
+  const [voteChoice, setVoteChoice] = React.useState<'up' | 'down' | null>(null);
   const [showComments, setShowComments] = React.useState(false);
   const [showReportModal, setShowReportModal] = React.useState(false);
 
@@ -239,9 +246,10 @@ const PostCard = ({
       <CardFooter>
         <div className={styles.actions}>
           <Button
-            icon={<ArrowUp24Regular />}
+            icon={<ArrowUp24Regular primaryFill={voteChoice === 'up' ? tokens.colorBrandForegroundLink : undefined} />}
             appearance="transparent"
-            className={styles.actionButton}
+            className={`${styles.actionButton} ${voteChoice === 'up' ? styles.actionButtonActive : ''}`}
+            style={voteChoice === 'up' ? { color: tokens.colorBrandForegroundLink } : undefined}
             onClick={async () => {
               if (hasVoted) {
                 dispatchToast(
@@ -256,6 +264,7 @@ const PostCard = ({
                 await voteArticle(id, 'up');
                 setVotes(prev => ({ ...prev, upvotes: prev.upvotes + 1 }));
                 setHasVoted(true);
+                setVoteChoice('up');
               } catch (error) {
                 console.error('Failed to upvote:', error);
                 dispatchToast(
@@ -270,9 +279,10 @@ const PostCard = ({
             {votes.upvotes}
           </Button>
           <Button
-            icon={<ArrowDown24Regular />}
+            icon={<ArrowDown24Regular primaryFill={voteChoice === 'down' ? tokens.colorBrandForegroundLink : undefined} />}
             appearance="transparent"
-            className={styles.actionButton}
+            className={`${styles.actionButton} ${voteChoice === 'down' ? styles.actionButtonActive : ''}`}
+            style={voteChoice === 'down' ? { color: tokens.colorBrandForegroundLink } : undefined}
             onClick={async () => {
               if (hasVoted) {
                 dispatchToast(
@@ -287,6 +297,7 @@ const PostCard = ({
                 await voteArticle(id, 'down');
                 setVotes(prev => ({ ...prev, downvotes: prev.downvotes + 1 }));
                 setHasVoted(true);
+                setVoteChoice('down');
               } catch (error) {
                 console.error('Failed to downvote:', error);
                 dispatchToast(