More tooltip stuff

frontend/src/App.vue

@@ -724,6 +724,11 @@ h4.section-title {
 			flex-wrap: wrap;
 		}
 
+		.action-dropdown-icon {
+			display: flex;
+			color: var(--primary-color);
+		}
+
 		.queue-actions {
 			display: flex;
 		}

frontend/src/components/modals/EditPlaylist/components/PlaylistSongItem.vue

@@ -51,7 +51,12 @@
 				trigger="click"
 			>
 				<template #trigger>
-					<i class="material-icons">more_horiz</i>
+					<i
+						class="material-icons action-dropdown-icon"
+						content="Song Options"
+						v-tippy
+						>more_horiz</i
+					>
 				</template>
 				<a
 					target="_blank"

frontend/src/components/ui/PlaylistItem.vue

@@ -6,7 +6,8 @@
 				<i
 					v-if="playlist.privacy === 'private'"
 					class="private-playlist-icon material-icons"
-					title="This playlist is not visible to other users."
+					content="This playlist is not visible to other users."
+					v-tippy
 					>lock</i
 				>
 			</p>

frontend/src/pages/Profile/index.vue

@@ -50,7 +50,12 @@
 					v-if="user.createdAt || user.location"
 				>
 					<div class="date" v-if="user.createdAt">
-						<i class="material-icons">calendar_today</i>
+						<i
+							class="material-icons"
+							content="Account Creation Date"
+							v-tippy
+							>calendar_today</i
+						>
 						<p>{{ user.createdAt }}</p>
 					</div>
 					<div class="location" v-if="user.location">

frontend/src/pages/Profile/tabs/Playlists.vue

@@ -54,12 +54,16 @@
 									v-if="myUserId === userId"
 									@click="showPlaylist(playlist._id)"
 									class="material-icons edit-icon"
+									content="Edit Playlist"
+									v-tippy
 									>edit</i
 								>
 								<i
 									v-else
 									@click="showPlaylist(playlist._id)"
 									class="material-icons view-icon"
+									content="View Playlist"
+									v-tippy
 									>visibility</i
 								>
 							</div>

frontend/src/pages/Profile/tabs/RecentActivity.vue

@@ -23,6 +23,8 @@
 							v-if="userId === myUserId"
 							href="#"
 							@click.prevent="hideActivity(activity._id)"
+							content="Hide Activity"
+							v-tippy
 						>
 							<i class="material-icons hide-icon"
 								>visibility_off</i

frontend/src/pages/Station/components/Sidebar/MyPlaylists.vue

@@ -27,6 +27,12 @@
 							"
 							@click="selectPlaylist(playlist._id)"
 							class="material-icons play-icon"
+							:content="
+								station.partyMode
+									? 'Request songs from this playlist'
+									: 'Play songs from this playlist'
+							"
+							v-tippy
 							>play_arrow</i
 						>
 						<i
@@ -36,6 +42,12 @@
 							"
 							@click="deselectPlaylist(playlist._id)"
 							class="material-icons stop-icon"
+							:content="
+								station.partyMode
+									? 'Stop requesting songs from this playlist'
+									: 'Stop playing songs from this playlist'
+							"
+							v-tippy
 							>stop</i
 						>
 						<i

frontend/src/pages/Station/components/Sidebar/Queue/QueueItem.vue

@@ -84,7 +84,12 @@
 					trigger="click"
 				>
 					<template #trigger>
-						<i class="material-icons">more_horiz</i>
+						<i
+							class="material-icons action-dropdown-icon"
+							content="Song Options"
+							v-tippy
+							>more_horiz</i
+						>
 					</template>
 					<a
 						target="_blank"

frontend/src/pages/Station/index.vue

@@ -1,5 +1,5 @@
 <template>
-	<div :style="'--primary-color: var(--' + station.theme + ')'">
+	<div>
 		<metadata v-if="exists && !loading" :title="`${station.displayName}`" />
 		<metadata v-else-if="!exists && !loading" :title="`Not found`" />
 
@@ -842,6 +842,7 @@ export default {
 
 		this.socket.on("event:station.themeUpdated", theme => {
 			this.station.theme = theme;
+			document.body.style.cssText = `--primary-color: var(--${theme})`;
 		});
 
 		this.socket.on("event:station.updateName", res => {
@@ -910,6 +911,8 @@ export default {
 		this.frontendDevMode = lofig.get("mode");
 	},
 	beforeDestroy() {
+		document.body.style.cssText = "";
+
 		/** Reset Songslist */
 		this.updateSongsList([]);
 
@@ -1552,6 +1555,8 @@ export default {
 							theme
 						});
 
+						document.body.style.cssText = `--primary-color: var(--${res.data.theme})`;
+
 						const currentSong = res.data.currentSong
 							? res.data.currentSong
 							: {};