Browse Source

Made it clearer that you have liked/disliked a song on stations

Owen Diffey 4 years ago
parent
commit
4c00e20d3e

+ 1 - 1
frontend/src/pages/Station/components/CurrentlyPlaying.vue

@@ -183,7 +183,7 @@ export default {
 			}
 
 			#report-icon {
-				background-color: #6b6a6a;
+				background-color: $grey;
 			}
 
 			#youtube-icon {

+ 15 - 0
frontend/src/pages/Station/index.vue

@@ -216,6 +216,10 @@
 										currentSong.likes !== -1 &&
 											currentSong.dislikes !== -1
 									"
+									:class="{
+										liked: liked,
+										disliked: disliked
+									}"
 								>
 									<!-- Like Song Button -->
 									<button
@@ -1860,6 +1864,17 @@ export default {
 							#dislike-song.disliked {
 								background-color: darken($red, 5%) !important;
 							}
+
+							&.liked #dislike-song,
+							&.disliked #like-song {
+								background-color: $grey !important;
+								&:hover {
+									background-color: darken(
+										$grey,
+										5%
+									) !important;
+								}
+							}
 						}
 					}
 				}

+ 1 - 0
frontend/src/styles/colors.scss

@@ -18,6 +18,7 @@ $white: hsl(0, 0%, 100%);
 $black: hsl(0, 0%, 0%);
 $light-grey: hsl(0, 0%, 96%);
 $light-grey-2: hsl(300, 2%, 76%);
+$grey: hsl(0, 0%, 42%);
 $dark-grey: hsl(0, 0%, 30%);
 $dark-grey-2: hsl(0, 0%, 20%);
 $dark-grey-3: hsl(0, 0%, 10%);