From e52b31bf1a6f47564a7986328d4a10c605e37ac4 Mon Sep 17 00:00:00 2001
From: Dominic Villemure <doumvil@hotmail.com>
Date: Sun, 25 Aug 2024 10:51:55 -0400
Subject: [PATCH] Color to let the user know his reaction

---
 src/views/contents/Reaction.vue | 73 +++++++++++++++++++++++----------
 1 file changed, 52 insertions(+), 21 deletions(-)

diff --git a/src/views/contents/Reaction.vue b/src/views/contents/Reaction.vue
index 8d63ba6..7d97c69 100644
--- a/src/views/contents/Reaction.vue
+++ b/src/views/contents/Reaction.vue
@@ -251,7 +251,7 @@ function isMobileDevice() {
             @mouseleave="onMouseLeave"
             @click="reactToContent(REACTIONS.LIKE)"
         >
-          <v-icon>mdi-thumb-up-outline</v-icon>
+          <v-icon :class="{'active-icon': currentReaction === REACTIONS.LIKE}">mdi-thumb-up-outline</v-icon>
           {{ likeCount }}
         </v-btn>
       </template>
@@ -260,26 +260,52 @@ function isMobileDevice() {
           @mouseover="keepReactionMenuOpen"
           @mouseleave="hideReactions"
       >
-        <v-btn variant="plain" icon @click="reactToContent(REACTIONS.LOVE)">
-          <v-icon>mdi-heart-outline</v-icon>
-          {{ loveCount }}
-        </v-btn>
-        <v-btn variant="plain" icon @click="reactToContent(REACTIONS.HAHA)">
-          <v-icon>mdi-emoticon-excited-outline</v-icon>
-          {{ hahaCount }}
-        </v-btn>
-        <v-btn variant="plain" icon @click="reactToContent(REACTIONS.WOW)">
-          <v-icon>mdi-emoticon-happy-outline</v-icon>
-          {{ wowCount }}
-        </v-btn>
-        <v-btn variant="plain" icon @click="reactToContent(REACTIONS.SAD)">
-          <v-icon>mdi-emoticon-sad-outline</v-icon>
-          {{ sadCount }}
-        </v-btn>
-        <v-btn variant="plain" icon @click="reactToContent(REACTIONS.ANGRY)">
-          <v-icon>mdi-emoticon-angry-outline</v-icon>
-          {{ angryCount }}
-        </v-btn>
+          <v-btn 
+              variant="plain" 
+              @click="reactToContent(REACTIONS.DISLIKE)"
+          >
+            <v-icon :class="{'active-icon': currentReaction === REACTIONS.DISLIKE}">mdi-thumb-down-outline</v-icon>
+          </v-btn>
+        
+          <v-btn 
+              variant="plain" 
+              @click="reactToContent(REACTIONS.LOVE)"
+          >
+            <v-icon :class="{'active-icon': currentReaction === REACTIONS.LOVE}">mdi-heart-outline</v-icon>
+            {{ loveCount }}
+          </v-btn>
+        
+          <v-btn 
+              variant="plain" 
+              @click="reactToContent(REACTIONS.HAHA)"
+          >
+            <v-icon :class="{'active-icon': currentReaction === REACTIONS.HAHA}">mdi-emoticon-excited-outline</v-icon>
+            {{ hahaCount }}
+          </v-btn>
+        
+          <v-btn
+              variant="plain"
+              @click="reactToContent(REACTIONS.WOW)"
+          >
+            <v-icon :class="{'active-icon': currentReaction === REACTIONS.WOW}">mdi-emoticon-happy-outline</v-icon>
+            {{ wowCount }}
+          </v-btn>
+        
+          <v-btn
+              variant="plain"
+              @click="reactToContent(REACTIONS.SAD)"
+          >
+            <v-icon :class="{'active-icon': currentReaction === REACTIONS.SAD}">mdi-emoticon-sad-outline</v-icon>
+            {{ sadCount }}
+          </v-btn>
+        
+          <v-btn
+              variant="plain"
+              @click="reactToContent(REACTIONS.ANGRY)"
+          >
+            <v-icon :class="{'active-icon': currentReaction === REACTIONS.ANGRY}">mdi-emoticon-angry-outline</v-icon>
+            {{ angryCount }}
+          </v-btn>
       </v-card>
     </v-menu>
   </div>
@@ -293,4 +319,9 @@ function isMobileDevice() {
   margin-top: -35px;
   margin-left: 50px;
 }
+
+.active-icon {
+  color: blue;
+  stroke: blue;
+}
 </style>