- track selection on row click (js)

- left margin alignment for 'explicit' icon (css)
- softer alt colors in table (light theme) (css)
- more visible download icon hover color (css)

src/components/TracklistTab.vue

@@ -35,8 +35,8 @@
 			</thead>
 			<tbody>
 				<template v-if="type !== 'spotifyPlaylist'">
-					<template v-for="track in body">
+					<template v-for="(track, index) in body">
-						<tr v-if="track.type == 'track'">
+						<tr v-if="track.type == 'track'" @click="selectRow(index, track)">
 							<td class="table__cell--x-small table__cell--center">
 								<div class="table__cell-content table__cell-content--vertical-center">
 									<i
@@ -285,10 +285,14 @@ export default {
 			} else {
 				this.body = playlistTracks
 			}
+		},
+		selectRow(index, track) {
+			track.selected = !track.selected;
 		}
 	},
 	mounted() {
 		EventBus.$on('tracklistTab:reset', this.reset)
+		EventBus.$on('tracklistTab:selectRow', this.selectRow)
 
 		socket.on('show_album', this.showAlbum)
 		socket.on('show_playlist', this.showPlaylist)

src/styles/scss/base/_base.scss

@@ -22,9 +22,11 @@ html[data-theme='light'] {
 	--sidebar-link-bg: hsl(0, 0%, 24%);
 	--sidebar-link-bg-20: hsla(0, 0%, 24%, 0.2);
 	
+	--icon-hover: var(--accent-color);
+
 	--table-bg: hsl(0, 0%, 100%);
-	--table-zebra: hsl(0, 0%, 79%);
+	--table-zebra: hsl(0, 0%, 90%);
-	--table-highlight: hsl(0, 0%, 56%);
+	--table-highlight: hsl(0, 0%, 84%);
 }
 
 html[data-theme='dark'] {
@@ -40,6 +42,8 @@ html[data-theme='dark'] {
 	--sidebar-link-bg: hsl(0, 0%, 24%);
 	--sidebar-link-bg-20: hsla(0, 0%, 24%, 0.2);
 
+	--icon-hover: var(--accent-color);
+
 	--table-bg: hsl(0, 0%, 8%);
 	--table-zebra: hsl(0, 0%, 14%);
 	--table-highlight: hsl(0, 0%, 20%);
@@ -58,6 +62,8 @@ html[data-theme='purple'] {
 	--sidebar-link-bg: hsl(257, 70%, 17%);
 	--sidebar-link-bg-20: hsla(257, 70%, 17%, 0.2);
 
+	--icon-hover: hsl(186, 44%, 54%);
+
 	--table-bg: hsl(261, 74%, 6%);
 	--table-zebra: hsl(257, 61%, 10%);
 	--table-highlight: hsl(257, 66%, 27%);

src/styles/scss/globals/_globals.scss

@@ -142,6 +142,7 @@ i {
 	&.explicit_icon {
 		color: hsl(3, 100%, 59%);
 		margin-right: $explicit-separator;
+    margin-left: -3px;
 
 		&.explicit_icon--right {
 			margin-left: $explicit-separator;

src/styles/scss/globals/_tables.scss

@@ -9,6 +9,7 @@ $table-border-radius: 3px;
 	tbody {
 		tr:not(.table__row-no-highlight):hover {
 			background: var(--table-highlight);
+      cursor: default;
 		}
 	}
 
@@ -199,7 +200,7 @@ $table-border-radius: 3px;
 
 			&:hover {
 				i.material-icons {
-					color: var(--table-bg);
+					color: var(--icon-hover);
 				}
 			}
 		}