From a1f48c274b9b8a3e2fe5ff5b0725d7e659358b65 Mon Sep 17 00:00:00 2001
From: Jen <45193617+jengu288@users.noreply.github.com>
Date: Thu, 25 Jan 2024 20:26:04 -0800
Subject: [PATCH] Modify icon color and dropshadow when button is clicked

---
 client/src/components/endRound/EndRound.vue            | 9 +++++++--
 client/src/components/promptResponse/VoteSkip.vue      | 8 +++++---
 client/src/components/responseMatching/DisputeIcon.vue | 9 +++++++--
 3 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/client/src/components/endRound/EndRound.vue b/client/src/components/endRound/EndRound.vue
index 2c29380..0ae2765 100644
--- a/client/src/components/endRound/EndRound.vue
+++ b/client/src/components/endRound/EndRound.vue
@@ -4,8 +4,11 @@
     <response-list :selectable="false" :height="45" :player-id="responsesId" />
     <player-chooser v-model="selectedId" class="w-50 w-lg-25 fs-4 mb-3" />
     <button
-      class="btn btn-orange w-75 w-lg-50 w-xl-25 fs-4 mb-3 position-relative"
-      :class="{ 'btn-blue': !pressedVote }"
+      class="btn btn-blue w-75 w-lg-50 w-xl-25 fs-4 mb-3 position-relative"
+      :class="{
+        'text-white shadow': !pressedVote,
+        'text-white-50 shadow-none': pressedVote
+      }"
       @click="sendVote">
       {{ hasNextRound ? $t('startNextRound') : $t('viewResults') }}
       <notification-count
@@ -63,6 +66,8 @@ export default defineComponent({
   },
   methods: {
     sendVote() {
+      this.pressedVote = !this.pressedVote
+
       new AudioWrap(ClickMp3).play()
       socket.emit('pollVote', 'startNextRound')
     },
diff --git a/client/src/components/promptResponse/VoteSkip.vue b/client/src/components/promptResponse/VoteSkip.vue
index 2727402..d80cef2 100644
--- a/client/src/components/promptResponse/VoteSkip.vue
+++ b/client/src/components/promptResponse/VoteSkip.vue
@@ -1,11 +1,13 @@
 <template>
   <a
     v-tooltip.right="$t('tooltip.voteSkip')"
-    class="btn btn-sm btn-orange text-white ratio-1x1 position-relative d-inline-flex justify-content-center align-items-center active"
-    :class="{ 'btn-blue': !pressedVote }"
+    class="btn btn-sm btn-blue ratio-1x1 position-relative d-inline-flex justify-content-center align-items-center"
+    :class="{
+      'text-white shadow': !pressedVote,
+      'text-white-50 shadow-none': pressedVote
+    }"
     @click="sendVote">
     <i class="bi-hand-thumbs-down fs-3 p-0 lh-sm" />
-
     <notification-count
       v-if="skipVoteCount"
       :width="22"
diff --git a/client/src/components/responseMatching/DisputeIcon.vue b/client/src/components/responseMatching/DisputeIcon.vue
index 514f6d1..ff8ca58 100644
--- a/client/src/components/responseMatching/DisputeIcon.vue
+++ b/client/src/components/responseMatching/DisputeIcon.vue
@@ -1,8 +1,11 @@
 <template>
   <button
     v-tooltip="{ title: $t('tooltip.dispute', { response }), placement }"
-    class="btn btn-sm btn-orange text-white ratio-1x1 position-relative d-inline-flex justify-content-center align-items-center"
-    :class="{ 'btn-blue': !pressedVote }"
+    class="btn btn-sm btn-blue ratio-1x1 position-relative d-inline-flex justify-content-center align-items-center"
+    :class="{
+      'text-white shadow': !pressedVote,
+      'text-white-50 shadow-none': pressedVote
+    }"
     :disabled="disabled"
     @click="sendVote">
     <i class="bi-hand-thumbs-down fs-5 lh-sm" />
@@ -54,6 +57,8 @@ export default defineComponent({
   },
   methods: {
     sendVote() {
+      this.pressedVote = !this.pressedVote
+
       new AudioWrap(ClickMp3).play()
       socket.emit('pollVote', 'sikeDispute')
     }