Modify icon color and dropshadow when button is clicked

ConorMurphy21 · Jan 26, 2024 · a1f48c2 · a1f48c2
1 parent 918f947
commit a1f48c2
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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')
     }