Added basic confirmation tooltips

frontend/src/App.vue

@@ -442,6 +442,20 @@ a {
 	}
 }
 
+.tippy-tooltip.confirm-theme {
+	background-color: var(--red);
+	padding: 5px 10px;
+	a {
+		color: var(--white);
+		font-size: 14px;
+		font-weight: 600;
+		&:hover,
+		&:focus {
+			filter: brightness(90%);
+		}
+	}
+}
+
 .tippy-tooltip.songActions-theme {
 	font-size: 14px;
 	padding: 5px 10px;
@@ -454,7 +468,8 @@ a {
 	}
 
 	.song-actions,
-	.addToPlaylistDropdown {
+	.addToPlaylistDropdown,
+	.song-actions > div {
 		display: inline-block;
 	}
 
@@ -511,6 +526,9 @@ a {
 			border-top-color: var(--light-grey-3);
 		}
 	}
+	&.confirm-theme .tippy-arrow {
+		border-top-color: var(--red);
+	}
 }
 .tippy-popper[x-placement^="bottom"] .tippy-tooltip {
 	&.songActions-theme,
@@ -519,6 +537,9 @@ a {
 			border-bottom-color: var(--light-grey-3);
 		}
 	}
+	&.confirm-theme .tippy-arrow {
+		border-bottom-color: var(--red);
+	}
 }
 .tippy-popper[x-placement^="left"] .tippy-tooltip {
 	&.songActions-theme,
@@ -527,6 +548,9 @@ a {
 			border-left-color: var(--light-grey-3);
 		}
 	}
+	&.confirm-theme .tippy-arrow {
+		border-left-color: var(--red);
+	}
 }
 .tippy-popper[x-placement^="right"] .tippy-tooltip {
 	&.songActions-theme,
@@ -535,6 +559,9 @@ a {
 			border-right-color: var(--light-grey-3);
 		}
 	}
+	&.confirm-theme .tippy-arrow {
+		border-right-color: var(--red);
+	}
 }
 
 .tippy-tooltip.addToPlaylist-theme {

frontend/src/components/modals/EditPlaylist.vue

@@ -266,22 +266,35 @@
 												v-tippy
 												>queue</i
 											>
-											<i
+											<tippy
 												v-if="
 													userId ===
 														playlist.createdBy ||
 														isEditable()
 												"
-												@click="
-													removeSongFromPlaylist(
-														song.songId
-													)
-												"
-												class="material-icons delete-icon"
-												content="Remove Song from Playlist"
-												v-tippy
-												>delete_forever</i
+												interactive="true"
+												placement="top"
+												theme="confirm"
+												trigger="click"
 											>
+												<template #trigger>
+													<i
+														class="material-icons delete-icon"
+														content="Remove Song from Playlist"
+														v-tippy
+														>delete_forever</i
+													>
+												</template>
+												<a
+													@click="
+														removeSongFromPlaylist(
+															song.songId
+														)
+													"
+												>
+													Confirm</a
+												>
+											</tippy>
 											<i
 												class="material-icons"
 												v-if="isEditable() && index > 0"
@@ -342,30 +355,46 @@
 				Download Playlist
 			</a>
 			<div class="right">
-				<a
-					class="button is-danger"
-					@click="clearAndRefillStationPlaylist()"
-					href="#"
+				<tippy
 					v-if="playlist.type === 'station'"
+					interactive="true"
+					placement="top"
+					theme="confirm"
+					trigger="click"
 				>
-					Clear and refill station playlist
-				</a>
-				<a
-					class="button is-danger"
-					@click="clearAndRefillGenrePlaylist()"
-					href="#"
+					<template #trigger>
+						<a class="button is-danger">
+							Clear and refill station playlist
+						</a>
+					</template>
+					<a @click="clearAndRefillStationPlaylist()"> Confirm </a>
+				</tippy>
+				<tippy
 					v-if="playlist.type === 'genre'"
+					interactive="true"
+					placement="top"
+					theme="confirm"
+					trigger="click"
 				>
-					Clear and refill genre playlist
-				</a>
-				<a
-					class="button is-danger"
-					@click="removePlaylist()"
-					href="#"
+					<template #trigger>
+						<a class="button is-danger">
+							Clear and refill genre playlist
+						</a>
+					</template>
+					<a @click="clearAndRefillGenrePlaylist()"> Confirm </a>
+				</tippy>
+				<tippy
 					v-if="isEditable()"
+					interactive="true"
+					placement="top"
+					theme="confirm"
+					trigger="click"
 				>
-					Remove Playlist
-				</a>
+					<template #trigger>
+						<a class="button is-danger"> Remove Playlist </a>
+					</template>
+					<a @click="removePlaylist()"> Confirm </a>
+				</tippy>
 			</div>
 		</div>
 	</modal>

frontend/src/components/modals/EditStation.vue

@@ -473,19 +473,31 @@
 		<template #footer>
 			<save-button ref="saveButton" @clicked="saveChanges()" />
 			<div class="right">
-				<button
-					class="button is-danger"
-					@click="clearAndRefillStationQueue()"
+				<tippy
+					interactive="true"
+					placement="top"
+					theme="confirm"
+					trigger="click"
 				>
-					Clear and refill station queue
-				</button>
-				<button
+					<template #trigger>
+						<a class="button is-danger">
+							Clear and refill station queue
+						</a>
+					</template>
+					<a @click="clearAndRefillStationQueue()"> Confirm </a>
+				</tippy>
+				<tippy
 					v-if="station && station.type === 'community'"
-					class="button is-danger"
-					@click="deleteStation()"
+					interactive="true"
+					placement="top"
+					theme="confirm"
+					trigger="click"
 				>
-					Delete station
-				</button>
+					<template #trigger>
+						<button class="button is-danger">Delete station</button>
+					</template>
+					<a @click="deleteStation()"> Confirm </a>
+				</tippy>
 			</div>
 		</template>
 	</modal>

frontend/src/pages/Admin/tabs/News.vue

@@ -31,12 +31,19 @@
 							>
 								Edit
 							</button>
-							<button
-								class="button is-danger"
-								@click="remove(news)"
+							<tippy
+								interactive="true"
+								placement="top"
+								theme="confirm"
+								trigger="click"
 							>
-								Remove
-							</button>
+								<template #trigger>
+									<button class="button is-danger">
+										Remove
+									</button>
+								</template>
+								<a @click="remove(news)"> Confirm</a>
+							</tippy>
 						</td>
 					</tr>
 				</tbody>
@@ -388,6 +395,10 @@ export default {
 
 td {
 	vertical-align: middle;
+
+	& > div {
+		display: inline-flex;
+	}
 }
 
 .is-info:focus {

frontend/src/pages/Admin/tabs/Stations.vue

@@ -61,12 +61,17 @@
 							<a class="button is-info" @click="edit(station)"
 								>Edit</a
 							>
-							<a
-								class="button is-danger"
-								href="#"
-								@click="removeStation(index)"
-								>Remove</a
+							<tippy
+								interactive="true"
+								placement="top"
+								theme="confirm"
+								trigger="click"
 							>
+								<template #trigger>
+									<a class="button is-danger">Remove</a>
+								</template>
+								<a @click="removeStation(index)"> Confirm</a>
+							</tippy>
 						</td>
 					</tr>
 				</tbody>
@@ -399,6 +404,10 @@ td {
 	word-wrap: break-word;
 	max-width: 10vw;
 	vertical-align: middle;
+
+	& > div {
+		display: inline-flex;
+	}
 }
 
 .is-info:focus {

frontend/src/pages/Admin/tabs/UnverifiedSongs.vue

@@ -102,14 +102,25 @@
 							>
 								<i class="material-icons">check_circle</i>
 							</button>
-							<button
-								class="button is-danger"
-								@click="hide(song._id, index)"
-								content="Hide Song"
-								v-tippy
+							<tippy
+								interactive="true"
+								placement="top"
+								theme="confirm"
+								trigger="click"
 							>
-								<i class="material-icons">visibility_off</i>
-							</button>
+								<template #trigger>
+									<button
+										class="button is-danger"
+										content="Hide Song"
+										v-tippy
+									>
+										<i class="material-icons"
+											>visibility_off</i
+										>
+									</button>
+								</template>
+								<a @click="hide(song._id, index)"> Confirm</a>
+							</tippy>
 						</td>
 					</tr>
 				</tbody>
@@ -368,6 +379,10 @@ export default {
 
 td {
 	vertical-align: middle;
+
+	& > div {
+		display: inline-flex;
+	}
 }
 
 #keyboardShortcutsHelper {

frontend/src/pages/Admin/tabs/VerifiedSongs.vue

@@ -123,14 +123,23 @@
 							>
 								<i class="material-icons">edit</i>
 							</button>
-							<button
-								class="button is-danger"
-								@click="remove(song._id, index)"
-								content="Unverify Song"
-								v-tippy
+							<tippy
+								interactive="true"
+								placement="top"
+								theme="confirm"
+								trigger="click"
 							>
-								<i class="material-icons">cancel</i>
-							</button>
+								<template #trigger>
+									<button
+										class="button is-danger"
+										content="Unverify Song"
+										v-tippy
+									>
+										<i class="material-icons">cancel</i>
+									</button>
+								</template>
+								<a @click="remove(song._id, index)"> Confirm</a>
+							</tippy>
 						</td>
 					</tr>
 				</tbody>
@@ -481,6 +490,10 @@ body {
 
 td {
 	vertical-align: middle;
+
+	& > div {
+		display: inline-flex;
+	}
 }
 
 #keyboardShortcutsHelper {

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

@@ -19,17 +19,22 @@
 					:activity="activity"
 				>
 					<div slot="actions">
-						<a
+						<tippy
 							v-if="userId === myUserId"
-							href="#"
-							@click.prevent="hideActivity(activity._id)"
-							content="Hide Activity"
-							v-tippy
+							interactive="true"
+							placement="top"
+							theme="confirm"
+							trigger="click"
 						>
-							<i class="material-icons hide-icon"
-								>visibility_off</i
-							>
-						</a>
+							<template #trigger>
+								<a content="Hide Activity" v-tippy>
+									<i class="material-icons hide-icon"
+										>visibility_off</i
+									>
+								</a>
+							</template>
+							<a @click="hideActivity(activity._id)"> Confirm</a>
+						</tippy>
 					</div>
 				</activity-item>
 			</div>

frontend/src/pages/Settings/tabs/Account.vue

@@ -2,9 +2,7 @@
 	<div class="content account-tab">
 		<h4 class="section-title">Change account details</h4>
 
-		<p class="section-description">
-			Keep these details up-to-date.
-		</p>
+		<p class="section-description">Keep these details up-to-date.</p>
 
 		<hr class="section-horizontal-rule" />
 
@@ -75,24 +73,36 @@
 
 		<hr class="section-horizontal-rule" />
 
-		<div>
-			<a
-				class="button is-warning"
-				href="#"
-				@click.prevent="removeActivities()"
+		<div class="row">
+			<tippy
+				interactive="true"
+				placement="top"
+				theme="confirm"
+				trigger="click"
 			>
-				<i class="material-icons icon-with-button">clear</i>
-				Clear my activities
-			</a>
-
-			<a
-				class="button is-danger"
-				href="#"
-				@click.prevent="removeAccount()"
+				<template #trigger>
+					<a class="button is-warning">
+						<i class="material-icons icon-with-button">clear</i>
+						Clear my activities
+					</a>
+				</template>
+				<a @click="removeActivities()"> Confirm</a>
+			</tippy>
+
+			<tippy
+				interactive="true"
+				placement="top"
+				theme="confirm"
+				trigger="click"
 			>
-				<i class="material-icons icon-with-button">delete</i>
-				Remove my account
-			</a>
+				<template #trigger>
+					<a class="button is-danger">
+						<i class="material-icons icon-with-button">delete</i>
+						Remove my account
+					</a>
+				</template>
+				<a @click="removeAccount()"> Confirm</a>
+			</tippy>
 		</div>
 	</div>
 </template>
@@ -292,4 +302,8 @@ export default {
 .control {
 	margin-bottom: 2px !important;
 }
+
+.row {
+	display: flex;
+}
 </style>

frontend/src/pages/Settings/tabs/Security.vue

@@ -96,25 +96,39 @@
 
 			<hr class="section-horizontal-rule" />
 
-			<div>
-				<a
+			<div class="row">
+				<tippy
 					v-if="isPasswordLinked"
-					class="button is-danger"
-					href="#"
-					@click.prevent="unlinkPassword()"
+					interactive="true"
+					placement="top"
+					theme="confirm"
+					trigger="click"
 				>
-					<i class="material-icons icon-with-button">close</i>
-					Remove password
-				</a>
-
-				<a
-					class="button is-danger"
-					href="#"
-					@click.prevent="unlinkGitHub()"
+					<template #trigger>
+						<a class="button is-danger">
+							<i class="material-icons icon-with-button">close</i>
+							Remove password
+						</a>
+					</template>
+					<a @click="unlinkPassword()"> Confirm</a>
+				</tippy>
+				<tippy
+					v-if="isGithubLinked"
+					interactive="true"
+					placement="top"
+					theme="confirm"
+					trigger="click"
 				>
-					<i class="material-icons icon-with-button">link_off</i>
-					Remove GitHub from account
-				</a>
+					<template #trigger>
+						<a class="button is-danger">
+							<i class="material-icons icon-with-button"
+								>link_off</i
+							>
+							Remove GitHub from account
+						</a>
+					</template>
+					<a @click="unlinkGitHub()"> Confirm</a>
+				</tippy>
 			</div>
 
 			<div class="section-margin-bottom" />
@@ -127,15 +141,24 @@
 			</p>
 
 			<hr class="section-horizontal-rule" />
-
-			<a
-				class="button is-warning"
-				href="#"
-				@click.prevent="removeSessions()"
-			>
-				<i class="material-icons icon-with-button">exit_to_app</i>
-				Log out everywhere
-			</a>
+			<div class="row">
+				<tippy
+					interactive="true"
+					placement="top"
+					theme="confirm"
+					trigger="click"
+				>
+					<template #trigger>
+						<a class="button is-warning">
+							<i class="material-icons icon-with-button"
+								>exit_to_app</i
+							>
+							Logout everywhere
+						</a>
+					</template>
+					<a @click="removeSessions()"> Confirm</a>
+				</tippy>
+			</div>
 		</div>
 	</div>
 </template>
@@ -249,4 +272,8 @@ export default {
 .control {
 	margin-bottom: 2px !important;
 }
+
+.row {
+	display: flex;
+}
 </style>

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

@@ -33,14 +33,26 @@
 						class="song-actions"
 						slot="actions"
 					>
-						<i
+						<tippy
 							v-if="isOwnerOnly() || isAdminOnly()"
-							class="material-icons delete-icon"
-							@click="removeFromQueue(song.songId)"
-							content="Remove Song from Queue"
-							v-tippy
-							>delete_forever</i
+							interactive="true"
+							placement="top"
+							theme="confirm"
+							trigger="click"
 						>
+							<template #trigger>
+								<i
+									class="material-icons delete-icon"
+									content="Remove Song from Queue"
+									v-tippy
+									@click.shift="removeFromQueue(song.songId)"
+									>delete_forever</i
+								>
+							</template>
+							<a @click="removeFromQueue(song.songId)">
+								Confirm
+							</a>
+						</tippy>
 						<i
 							class="material-icons"
 							v-if="index > 0"