Added login required tooltips to station action buttons

frontend/src/App.vue

@@ -350,15 +350,19 @@ a {
 		padding: 7.5px 6px;
 		border-radius: 2px;
 		background-color: var(--dark-grey);
-		font-size: 0.9em;
+		font-size: 14px;
+		line-height: 24px;
+		text-transform: none;
 		color: var(--white);
 		content: attr(data-tooltip);
 		opacity: 0;
 		transition: all 0.2s ease-in-out 0.1s;
 		visibility: hidden;
+		z-index: 5;
 	}
 
-	&:hover:after {
+	&:hover:after,
+	&:focus:after {
 		opacity: 1;
 		visibility: visible;
 	}
@@ -416,6 +420,18 @@ a {
 	}
 }
 
+.tooltip-center {
+	&:after {
+		margin-left: 0;
+	}
+
+	&:hover {
+		&:after {
+			margin-left: 0;
+		}
+	}
+}
+
 .select {
 	&:after {
 		border-color: var(--primary-color);

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

@@ -43,6 +43,20 @@
 			<i class="material-icons icon-with-button">queue</i>
 			<span class="optional-desktop-only-text"> Add Song To Queue </span>
 		</button>
+		<button
+			class="button is-primary tab-actionable-button tooltip tooltip-top tooltip-center disabled"
+			v-if="
+				!loggedIn &&
+					((station.type === 'community' &&
+						station.partyMode &&
+						!station.locked) ||
+						station.type === 'official')
+			"
+			data-tooltip="Login to add songs to queue"
+		>
+			<i class="material-icons icon-with-button">queue</i>
+			<span class="optional-desktop-only-text"> Add Song To Queue </span>
+		</button>
 		<div
 			id="queue-locked"
 			v-if="station.type === 'community' && station.locked"
@@ -148,5 +162,9 @@ export default {
 		display: flex;
 		justify-content: center;
 	}
+
+	button.disabled {
+		filter: grayscale(0.4);
+	}
 }
 </style>

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

@@ -23,6 +23,13 @@
 			>
 				My Playlists
 			</button>
+			<button
+				v-else
+				class="button is-default tooltip tooltip-top tooltip-center"
+				data-tooltip="Login to manage playlists"
+			>
+				My Playlists
+			</button>
 		</div>
 		<queue class="tab" v-show="tab === 'queue'" />
 		<users class="tab" v-show="tab === 'users'" />

frontend/src/pages/Station/index.vue

@@ -51,7 +51,11 @@
 							<div id="video-container">
 								<div
 									id="stationPlayer"
-									style="width: 100%; height: 100%; min-height: 200px;"
+									style="
+										width: 100%;
+										height: 100%;
+										min-height: 200px;
+									"
 								/>
 								<div
 									class="player-cannot-autoplay"
@@ -114,6 +118,17 @@
 										>
 										{{ currentSong.skipVotes }}
 									</button>
+									<button
+										v-else
+										class="button is-primary tooltip tooltip-top disabled"
+										data-tooltip="Login to vote to skip songs"
+									>
+										<i
+											class="material-icons icon-with-button"
+											>skip_next</i
+										>
+										{{ currentSong.skipVotes }}
+									</button>
 								</div>
 								<div id="duration">
 									<p>
@@ -168,7 +183,7 @@
 									>
 										<!-- Like Song Button -->
 										<button
-											class="button is-success"
+											class="button is-success like-song"
 											id="like-song"
 											@click="toggleLike()"
 										>
@@ -181,7 +196,7 @@
 
 										<!-- Dislike Song Button -->
 										<button
-											class="button is-danger"
+											class="button is-danger dislike-song"
 											id="dislike-song"
 											@click="toggleDislike()"
 										>
@@ -235,6 +250,53 @@
 										/>
 									</div>
 								</div>
+								<div id="right-buttons" v-else>
+									<!-- Disabled Ratings (Like/Dislike) Buttons -->
+									<div
+										id="ratings"
+										v-if="
+											currentSong.likes !== -1 &&
+												currentSong.dislikes !== -1
+										"
+									>
+										<!-- Disabled Like Song Button -->
+										<button
+											class="button is-success tooltip tooltip-top disabled"
+											id="like-song"
+											data-tooltip="Login to like songs"
+										>
+											<i
+												class="material-icons icon-with-button"
+												>thumb_up_alt</i
+											>{{ currentSong.likes }}
+										</button>
+
+										<!-- Disabled Dislike Song Button -->
+										<button
+											class="button is-danger tooltip tooltip-top disabled"
+											id="dislike-song"
+											data-tooltip="Login to dislike songs"
+										>
+											<i
+												class="material-icons icon-with-button"
+												>thumb_down_alt</i
+											>{{ currentSong.dislikes }}
+										</button>
+									</div>
+									<!-- Disabled Add Song To Playlist Button & Dropdown -->
+									<div id="add-song-to-playlist">
+										<div class="control has-addons">
+											<button
+												class="button is-primary tooltip tooltip-top disabled"
+												data-tooltip="Login to add songs to playlist"
+											>
+												<i class="material-icons"
+													>queue</i
+												>
+											</button>
+										</div>
+									</div>
+								</div>
 							</div>
 						</div>
 						<p
@@ -1858,6 +1920,10 @@ export default {
 					.button:not(:first-of-type) {
 						margin-left: 5px;
 					}
+
+					.disabled {
+						filter: grayscale(0.4);
+					}
 				}
 
 				#duration {
@@ -1994,6 +2060,10 @@ export default {
 						&.disliked #like-song {
 							background-color: var(--grey) !important;
 						}
+						#like-song.disabled,
+						#dislike-song.disabled {
+							filter: grayscale(0.4);
+						}
 					}
 
 					#add-song-to-playlist {
@@ -2003,6 +2073,13 @@ export default {
 						.control {
 							width: fit-content;
 							margin-bottom: 0 !important;
+							button.disabled {
+								filter: grayscale(0.4);
+								border-radius: 3px;
+								&::after {
+									margin-right: 100%;
+								}
+							}
 						}
 					}
 				}