Highlight voted button in PostCard

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(