Fix feedback star rating visibility in dark mode (selected stars in yellow)

Author: pavanputti

src/components/CommunityPortal/Activities/activityId/ActivityComments.jsx

@@ -609,18 +609,16 @@ function ActivityComments() {
 
   const renderStars = (rating, isInteractive = false, onRatingChange = null) => {
     return (
-      <div style={{ display: 'flex', gap: '2px' }}>
+      <div className={styles.feedbackStarsContainer}>
         {[1, 2, 3, 4, 5].map(star => (
           <button
             key={star}
             type="button"
+            className={`${styles.feedbackStarBtn} ${
+              star <= rating ? styles.feedbackStarSelected : ''
+            }`}
             style={{
-              fontSize: '1.2rem',
-              color: star <= rating ? '#ffc107' : '#ddd',
               cursor: isInteractive ? 'pointer' : 'default',
-              background: 'none',
-              border: 'none',
-              padding: 0,
             }}
             onClick={() => isInteractive && onRatingChange && onRatingChange(star)}
             disabled={!isInteractive}

src/components/CommunityPortal/Activities/activityId/ActivityComments.module.css

@@ -791,6 +791,23 @@
   flex: 1;
 }
 
+.feedbackStarsContainer {
+  display: flex;
+  gap: 2px;
+}
+
+.feedbackStarBtn {
+  font-size: 1.2rem;
+  background: none;
+  border: none;
+  padding: 0;
+  color: #ddd;
+}
+
+.feedbackStarBtn.feedbackStarSelected {
+  color: #ffc107;
+}
+
 .feedbackRatingLabel {
   font-size: 0.9rem;
   color: #666;
@@ -862,6 +879,16 @@
   color: #b8c5d1 !important;
 }
 
+:global(body.dark-mode) .feedbackStarBtn,
+:global(body.bm-dashboard-dark) .feedbackStarBtn {
+  color: #6b7c8a !important;
+}
+
+:global(body.dark-mode) .feedbackStarBtn.feedbackStarSelected,
+:global(body.bm-dashboard-dark) .feedbackStarBtn.feedbackStarSelected {
+  color: #ffc107 !important;
+}
+
 :global(body.dark-mode) .feedbackRatingText,
 :global(body.bm-dashboard-dark) .feedbackRatingText {
   color: #b8c5d1 !important;