refactor: Renamed Confirm component to QuickConfirm

frontend/src/App.vue

@@ -921,7 +921,7 @@ img {
 	letter-spacing: 1px;
 }
 
-.tippy-box[data-theme~="confirm"] {
+.tippy-box[data-theme~="quickConfirm"] {
 	background-color: var(--dark-red);
 	border: 0;
 
@@ -1006,7 +1006,7 @@ img {
 			border-top-color: var(--white);
 		}
 	}
-	&[data-theme~="confirm"] > .tippy-arrow::before {
+	&[data-theme~="quickConfirm"] > .tippy-arrow::before {
 		border-top-color: var(--dark-red);
 	}
 }
@@ -1020,7 +1020,7 @@ img {
 			border-bottom-color: var(--white);
 		}
 	}
-	&[data-theme~="confirm"] > .tippy-arrow::before {
+	&[data-theme~="quickConfirm"] > .tippy-arrow::before {
 		border-bottom-color: var(--dark-red);
 	}
 }
@@ -1033,7 +1033,7 @@ img {
 			border-left-color: var(--white);
 		}
 	}
-	&[data-theme~="confirm"] > .tippy-arrow::before {
+	&[data-theme~="quickConfirm"] > .tippy-arrow::before {
 		border-left-color: var(--dark-red);
 	}
 }
@@ -1046,7 +1046,7 @@ img {
 			border-right-color: var(--white);
 		}
 	}
-	&[data-theme~="confirm"] > .tippy-arrow::before {
+	&[data-theme~="quickConfirm"] > .tippy-arrow::before {
 		border-right-color: var(--dark-red);
 	}
 }

frontend/src/components/Queue.vue

@@ -36,7 +36,7 @@
 							v-if="isAdminOnly() || isOwnerOnly()"
 							#tippyActions
 						>
-							<confirm
+							<quick-confirm
 								v-if="isOwnerOnly() || isAdminOnly()"
 								placement="left"
 								@confirm="removeFromQueue(element.youtubeId)"
@@ -47,7 +47,7 @@
 									v-tippy
 									>delete_forever</i
 								>
-							</confirm>
+							</quick-confirm>
 							<i
 								class="material-icons"
 								v-if="index > 0"
@@ -141,10 +141,10 @@ import draggable from "vuedraggable";
 import Toast from "toasters";
 
 import SongItem from "@/components/SongItem.vue";
-import Confirm from "@/components/Confirm.vue";
+import QuickConfirm from "@/components/QuickConfirm.vue";
 
 export default {
-	components: { draggable, SongItem, Confirm },
+	components: { draggable, SongItem, QuickConfirm },
 	props: {
 		sector: {
 			type: String,

frontend/src/components/Confirm.vue → frontend/src/components/QuickConfirm.vue

@@ -3,8 +3,8 @@
 		:interactive="true"
 		:touch="true"
 		:placement="placement"
-		theme="confirm"
-		ref="confirm"
+		theme="quickConfirm"
+		ref="quickConfirm"
 		trigger="click"
 		:append-to="body"
 		@hide="delayedHide()"

frontend/src/components/RunJobDropdown.vue

@@ -30,7 +30,7 @@
 
 		<template #content>
 			<div class="nav-dropdown-items" v-if="jobs.length > 0">
-				<confirm
+				<quick-confirm
 					v-for="(job, index) in jobs"
 					:key="`job-${index}`"
 					placement="top"
@@ -45,7 +45,7 @@
 						>
 						<p>{{ job.name }}</p>
 					</button>
-				</confirm>
+				</quick-confirm>
 			</div>
 			<p v-else class="no-jobs">No jobs available.</p>
 		</template>
@@ -56,11 +56,11 @@
 import { mapGetters } from "vuex";
 
 import Toast from "toasters";
-import Confirm from "@/components/Confirm.vue";
+import QuickConfirm from "@/components/QuickConfirm.vue";
 
 export default {
 	components: {
-		Confirm
+		QuickConfirm
 	},
 	props: {
 		jobs: {

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

@@ -130,7 +130,7 @@
 												v-tippy
 												>queue</i
 											>
-											<confirm
+											<quick-confirm
 												v-if="
 													userId ===
 														playlist.createdBy ||
@@ -152,7 +152,7 @@
 													v-tippy
 													>delete_forever</i
 												>
-											</confirm>
+											</quick-confirm>
 											<i
 												class="material-icons"
 												v-if="isEditable() && index > 0"
@@ -207,23 +207,23 @@
 				Download Playlist
 			</button>
 			<div class="right">
-				<confirm
+				<quick-confirm
 					v-if="playlist.type === 'station'"
 					@confirm="clearAndRefillStationPlaylist()"
 				>
 					<a class="button is-danger">
 						Clear and refill station playlist
 					</a>
-				</confirm>
-				<confirm
+				</quick-confirm>
+				<quick-confirm
 					v-if="playlist.type === 'genre'"
 					@confirm="clearAndRefillGenrePlaylist()"
 				>
 					<a class="button is-danger">
 						Clear and refill genre playlist
 					</a>
-				</confirm>
-				<confirm
+				</quick-confirm>
+				<quick-confirm
 					v-if="
 						isEditable() &&
 						!(
@@ -234,7 +234,7 @@
 					@confirm="removePlaylist()"
 				>
 					<a class="button is-danger"> Remove Playlist </a>
-				</confirm>
+				</quick-confirm>
 			</div>
 		</template>
 	</modal>
@@ -246,7 +246,7 @@ import draggable from "vuedraggable";
 import Toast from "toasters";
 
 import ws from "@/ws";
-import Confirm from "@/components/Confirm.vue";
+import QuickConfirm from "@/components/QuickConfirm.vue";
 import Modal from "../../Modal.vue";
 import SongItem from "../../SongItem.vue";
 
@@ -260,7 +260,7 @@ export default {
 	components: {
 		Modal,
 		draggable,
-		Confirm,
+		QuickConfirm,
 		SongItem,
 		Settings,
 		AddSongs,

frontend/src/components/modals/EditSong/index.vue

@@ -466,7 +466,7 @@
 						>
 							<i class="material-icons">check_circle</i>
 						</button>
-						<confirm
+						<quick-confirm
 							v-if="song.status === 'verified'"
 							placement="left"
 							@confirm="unverify(song._id)"
@@ -478,8 +478,8 @@
 							>
 								<i class="material-icons">cancel</i>
 							</button>
-						</confirm>
-						<confirm
+						</quick-confirm>
+						<quick-confirm
 							v-if="song.status !== 'hidden'"
 							placement="left"
 							@confirm="hide(song._id)"
@@ -491,7 +491,7 @@
 							>
 								<i class="material-icons">visibility_off</i>
 							</button>
-						</confirm>
+						</quick-confirm>
 						<button
 							v-if="song.status === 'hidden'"
 							class="button is-success"
@@ -501,7 +501,7 @@
 						>
 							<i class="material-icons">visibility</i>
 						</button>
-						<!-- <confirm placement="left" @confirm="remove(song._id)">
+						<!-- <quick-confirm placement="left" @confirm="remove(song._id)">
 						<button
 							class="button is-danger"
 							content="Remove Song"
@@ -509,7 +509,7 @@
 						>
 							<i class="material-icons">delete</i>
 						</button>
-					</confirm> -->
+					</quick-confirm> -->
 					</div>
 				</div>
 			</template>
@@ -542,7 +542,7 @@ import ws from "@/ws";
 import validation from "@/validation";
 import keyboardShortcuts from "@/keyboardShortcuts";
 
-import Confirm from "@/components/Confirm.vue";
+import QuickConfirm from "@/components/QuickConfirm.vue";
 import Modal from "../../Modal.vue";
 import FloatingBox from "../../FloatingBox.vue";
 import SaveButton from "../../SaveButton.vue";
@@ -557,7 +557,7 @@ export default {
 		Modal,
 		FloatingBox,
 		SaveButton,
-		Confirm,
+		QuickConfirm,
 		Discogs,
 		Reports,
 		Youtube,

frontend/src/components/modals/EditUser.vue

@@ -76,18 +76,18 @@
 				</div>
 			</template>
 			<template #footer>
-				<confirm @confirm="resendVerificationEmail()">
+				<quick-confirm @confirm="resendVerificationEmail()">
 					<a class="button is-warning"> Resend verification email </a>
-				</confirm>
-				<confirm @confirm="requestPasswordReset()">
+				</quick-confirm>
+				<quick-confirm @confirm="requestPasswordReset()">
 					<a class="button is-warning"> Request password reset </a>
-				</confirm>
-				<confirm @confirm="removeSessions()">
+				</quick-confirm>
+				<quick-confirm @confirm="removeSessions()">
 					<a class="button is-warning"> Remove all sessions </a>
-				</confirm>
-				<confirm @confirm="removeAccount()">
+				</quick-confirm>
+				<quick-confirm @confirm="removeAccount()">
 					<a class="button is-danger"> Remove account </a>
-				</confirm>
+				</quick-confirm>
 			</template>
 		</modal>
 	</div>
@@ -100,10 +100,10 @@ import Toast from "toasters";
 import validation from "@/validation";
 import ws from "@/ws";
 import Modal from "../Modal.vue";
-import Confirm from "@/components/Confirm.vue";
+import QuickConfirm from "@/components/QuickConfirm.vue";
 
 export default {
-	components: { Modal, Confirm },
+	components: { Modal, QuickConfirm },
 	props: {
 		userId: { type: String, default: "" },
 		sector: { type: String, default: "admin" }

frontend/src/components/modals/ManageStation/Tabs/Playlists.vue

@@ -113,7 +113,7 @@
 								v-tippy="{ theme: 'info' }"
 								>play_disabled</i
 							>
-							<confirm
+							<quick-confirm
 								v-if="
 									isPartyMode() &&
 									isSelected(featuredPlaylist._id)
@@ -129,8 +129,8 @@
 								>
 									stop
 								</i>
-							</confirm>
-							<confirm
+							</quick-confirm>
+							<quick-confirm
 								v-if="
 									isOwnerOrAdmin() &&
 									isPlaylistMode() &&
@@ -147,7 +147,7 @@
 								>
 									stop
 								</i>
-							</confirm>
+							</quick-confirm>
 							<i
 								v-if="
 									isPartyMode() &&
@@ -173,7 +173,7 @@
 								v-tippy
 								>play_arrow</i
 							>
-							<confirm
+							<quick-confirm
 								v-if="
 									isOwnerOrAdmin() &&
 									!isExcluded(featuredPlaylist._id)
@@ -188,8 +188,8 @@
 									v-tippy
 									>block</i
 								>
-							</confirm>
-							<confirm
+							</quick-confirm>
+							<quick-confirm
 								v-if="
 									isOwnerOrAdmin() &&
 									isExcluded(featuredPlaylist._id)
@@ -205,7 +205,7 @@
 								>
 									stop
 								</i>
-							</confirm>
+							</quick-confirm>
 							<i
 								v-if="featuredPlaylist.createdBy === myUserId"
 								@click="showPlaylist(featuredPlaylist._id)"
@@ -312,7 +312,7 @@
 								v-tippy="{ theme: 'info' }"
 								>play_disabled</i
 							>
-							<confirm
+							<quick-confirm
 								v-if="isPartyMode() && isSelected(playlist._id)"
 								@confirm="deselectPartyPlaylist(playlist._id)"
 							>
@@ -323,8 +323,8 @@
 								>
 									stop
 								</i>
-							</confirm>
-							<confirm
+							</quick-confirm>
+							<quick-confirm
 								v-if="
 									isOwnerOrAdmin() &&
 									isPlaylistMode() &&
@@ -339,7 +339,7 @@
 								>
 									stop
 								</i>
-							</confirm>
+							</quick-confirm>
 							<i
 								v-if="
 									isPartyMode() &&
@@ -365,7 +365,7 @@
 								v-tippy
 								>play_arrow</i
 							>
-							<confirm
+							<quick-confirm
 								v-if="
 									isOwnerOrAdmin() &&
 									!isExcluded(playlist._id)
@@ -378,8 +378,8 @@
 									v-tippy
 									>block</i
 								>
-							</confirm>
-							<confirm
+							</quick-confirm>
+							<quick-confirm
 								v-if="
 									isOwnerOrAdmin() && isExcluded(playlist._id)
 								"
@@ -392,7 +392,7 @@
 								>
 									stop
 								</i>
-							</confirm>
+							</quick-confirm>
 							<i
 								v-if="playlist.createdBy === myUserId"
 								@click="showPlaylist(playlist._id)"
@@ -529,7 +529,7 @@
 										v-tippy
 										>play_arrow</i
 									>
-									<confirm
+									<quick-confirm
 										v-if="
 											isPartyMode() &&
 											isSelected(element._id)
@@ -544,8 +544,8 @@
 											v-tippy
 											>stop</i
 										>
-									</confirm>
-									<confirm
+									</quick-confirm>
+									<quick-confirm
 										v-if="
 											isPlaylistMode() &&
 											isOwnerOrAdmin() &&
@@ -561,8 +561,8 @@
 											v-tippy
 											>stop</i
 										>
-									</confirm>
-									<confirm
+									</quick-confirm>
+									<quick-confirm
 										v-if="
 											isOwnerOrAdmin() &&
 											!isExcluded(element._id)
@@ -577,8 +577,8 @@
 											v-tippy
 											>block</i
 										>
-									</confirm>
-									<confirm
+									</quick-confirm>
+									<quick-confirm
 										v-if="
 											isOwnerOrAdmin() &&
 											isExcluded(element._id)
@@ -594,7 +594,7 @@
 										>
 											stop
 										</i>
-									</confirm>
+									</quick-confirm>
 									<i
 										@click="showPlaylist(element._id)"
 										class="material-icons edit-icon"
@@ -631,7 +631,7 @@
 						</template>
 
 						<template #actions>
-							<confirm
+							<quick-confirm
 								v-if="isOwnerOrAdmin()"
 								@confirm="deselectPartyPlaylist(playlist._id)"
 							>
@@ -642,8 +642,8 @@
 								>
 									stop
 								</i>
-							</confirm>
-							<confirm
+							</quick-confirm>
+							<quick-confirm
 								v-if="isOwnerOrAdmin()"
 								@confirm="blacklistPlaylist(playlist._id)"
 							>
@@ -653,7 +653,7 @@
 									v-tippy
 									>block</i
 								>
-							</confirm>
+							</quick-confirm>
 							<i
 								v-if="playlist.createdBy === myUserId"
 								@click="showPlaylist(playlist._id)"
@@ -703,7 +703,7 @@
 						</template>
 
 						<template #actions>
-							<confirm
+							<quick-confirm
 								v-if="isOwnerOrAdmin()"
 								@confirm="removeIncludedPlaylist(playlist._id)"
 							>
@@ -714,8 +714,8 @@
 								>
 									stop
 								</i>
-							</confirm>
-							<confirm
+							</quick-confirm>
+							<quick-confirm
 								v-if="isOwnerOrAdmin()"
 								@confirm="blacklistPlaylist(playlist._id)"
 							>
@@ -725,7 +725,7 @@
 									v-tippy
 									>block</i
 								>
-							</confirm>
+							</quick-confirm>
 							<i
 								v-if="playlist.createdBy === myUserId"
 								@click="showPlaylist(playlist._id)"
@@ -774,7 +774,7 @@
 						</template>
 
 						<template #actions>
-							<confirm
+							<quick-confirm
 								@confirm="removeExcludedPlaylist(playlist._id)"
 							>
 								<i
@@ -784,7 +784,7 @@
 									v-tippy
 									>stop</i
 								>
-							</confirm>
+							</quick-confirm>
 							<i
 								v-if="playlist.createdBy === userId"
 								@click="showPlaylist(playlist._id)"
@@ -817,14 +817,14 @@ import Toast from "toasters";
 import ws from "@/ws";
 
 import PlaylistItem from "@/components/PlaylistItem.vue";
-import Confirm from "@/components/Confirm.vue";
+import QuickConfirm from "@/components/QuickConfirm.vue";
 
 import SortablePlaylists from "@/mixins/SortablePlaylists.vue";
 
 export default {
 	components: {
 		PlaylistItem,
-		Confirm
+		QuickConfirm
 	},
 	mixins: [SortablePlaylists],
 	data() {

frontend/src/components/modals/ManageStation/index.vue

@@ -171,14 +171,14 @@
 				<span> Request Song </span>
 			</button>
 			<div v-if="isOwnerOrAdmin()" class="right">
-				<confirm @confirm="clearAndRefillStationQueue()">
+				<quick-confirm @confirm="clearAndRefillStationQueue()">
 					<a class="button is-danger">
 						Clear and refill station queue
 					</a>
-				</confirm>
-				<confirm @confirm="removeStation()">
+				</quick-confirm>
+				<quick-confirm @confirm="removeStation()">
 					<button class="button is-danger">Delete station</button>
-				</confirm>
+				</quick-confirm>
 			</div>
 		</template>
 	</modal>
@@ -189,7 +189,7 @@ import { mapState, mapGetters, mapActions } from "vuex";
 
 import Toast from "toasters";
 
-import Confirm from "@/components/Confirm.vue";
+import QuickConfirm from "@/components/QuickConfirm.vue";
 import Queue from "@/components/Queue.vue";
 import SongItem from "@/components/SongItem.vue";
 import Modal from "../../Modal.vue";
@@ -201,7 +201,7 @@ import Songs from "./Tabs/Songs.vue";
 export default {
 	components: {
 		Modal,
-		Confirm,
+		QuickConfirm,
 		Queue,
 		SongItem,
 		Settings,

frontend/src/components/modals/RemoveAccount.vue

@@ -162,12 +162,12 @@
 				</p>
 
 				<div class="content-box-inputs">
-					<confirm placement="right" @confirm="remove()">
+					<quick-confirm placement="right" @confirm="remove()">
 						<button class="button">
 							<i class="material-icons">delete</i>
 							&nbsp;Remove Account
 						</button>
-					</confirm>
+					</quick-confirm>
 				</div>
 			</div>
 		</template>
@@ -179,11 +179,11 @@ import { mapActions, mapGetters } from "vuex";
 
 import Toast from "toasters";
 
-import Confirm from "@/components/Confirm.vue";
+import QuickConfirm from "@/components/QuickConfirm.vue";
 import Modal from "../Modal.vue";
 
 export default {
-	components: { Modal, Confirm },
+	components: { Modal, QuickConfirm },
 	data() {
 		return {
 			name: "RemoveAccount",

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

@@ -39,11 +39,11 @@
 								>
 									Edit
 								</button>
-								<confirm @confirm="remove(news._id)">
+								<quick-confirm @confirm="remove(news._id)">
 									<button class="button is-danger">
 										Remove
 									</button>
-								</confirm>
+								</quick-confirm>
 							</div>
 						</td>
 					</tr>
@@ -66,12 +66,12 @@ import Toast from "toasters";
 
 import ws from "@/ws";
 
-import Confirm from "@/components/Confirm.vue";
+import QuickConfirm from "@/components/QuickConfirm.vue";
 import UserIdToUsername from "@/components/UserIdToUsername.vue";
 
 export default {
 	components: {
-		Confirm,
+		QuickConfirm,
 		UserIdToUsername,
 		EditNews: defineAsyncComponent(() =>
 			import("@/components/modals/EditNews.vue")

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

@@ -192,7 +192,7 @@
 								>
 									<i class="material-icons">check_circle</i>
 								</button>
-								<confirm
+								<quick-confirm
 									v-if="song.status === 'verified'"
 									placement="left"
 									@confirm="unverify(song._id)"
@@ -204,8 +204,8 @@
 									>
 										<i class="material-icons">cancel</i>
 									</button>
-								</confirm>
-								<confirm
+								</quick-confirm>
+								<quick-confirm
 									v-if="song.status !== 'hidden'"
 									placement="left"
 									@confirm="hide(song._id)"
@@ -219,7 +219,7 @@
 											>visibility_off</i
 										>
 									</button>
-								</confirm>
+								</quick-confirm>
 								<button
 									v-if="song.status === 'hidden'"
 									class="button is-success"
@@ -326,7 +326,7 @@ import keyboardShortcuts from "@/keyboardShortcuts";
 
 import UserIdToUsername from "@/components/UserIdToUsername.vue";
 import FloatingBox from "@/components/FloatingBox.vue";
-import Confirm from "@/components/Confirm.vue";
+import QuickConfirm from "@/components/QuickConfirm.vue";
 import RunJobDropdown from "@/components/RunJobDropdown.vue";
 
 import ScrollAndFetchHandler from "@/mixins/ScrollAndFetchHandler.vue";
@@ -349,7 +349,7 @@ export default {
 		),
 		UserIdToUsername,
 		FloatingBox,
-		Confirm,
+		QuickConfirm,
 		RunJobDropdown
 	},
 	mixins: [ScrollAndFetchHandler],

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

@@ -65,9 +65,9 @@
 							<a class="button is-info" @click="manage(station)"
 								>Manage</a
 							>
-							<confirm @confirm="removeStation(index)">
+							<quick-confirm @confirm="removeStation(index)">
 								<a class="button is-danger">Remove</a>
-							</confirm>
+							</quick-confirm>
 						</td>
 					</tr>
 				</tbody>
@@ -94,7 +94,7 @@ import { defineAsyncComponent } from "vue";
 
 import Toast from "toasters";
 import UserIdToUsername from "@/components/UserIdToUsername.vue";
-import Confirm from "@/components/Confirm.vue";
+import QuickConfirm from "@/components/QuickConfirm.vue";
 import RunJobDropdown from "@/components/RunJobDropdown.vue";
 import ws from "@/ws";
 
@@ -122,7 +122,7 @@ export default {
 			import("@/components/modals/CreateStation.vue")
 		),
 		UserIdToUsername,
-		Confirm,
+		QuickConfirm,
 		RunJobDropdown
 	},
 	data() {

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

@@ -108,7 +108,7 @@
 						>
 							theater_comedy
 						</i>
-						<confirm
+						<quick-confirm
 							placement="left"
 							@confirm="deleteMany(slotProps.item)"
 						>
@@ -119,7 +119,7 @@
 							>
 								delete_forever
 							</i>
-						</confirm>
+						</quick-confirm>
 					</div>
 				</template>
 				<!-- <template #bulk-actions-right="slotProps">
@@ -138,13 +138,13 @@ import { defineAsyncComponent } from "vue";
 import Toast from "toasters";
 import AdvancedTable from "@/components/AdvancedTable.vue";
 import UserIdToUsername from "@/components/UserIdToUsername.vue";
-import Confirm from "@/components/Confirm.vue";
+import QuickConfirm from "@/components/QuickConfirm.vue";
 
 export default {
 	components: {
 		AdvancedTable,
 		UserIdToUsername,
-		Confirm,
+		QuickConfirm,
 		EditSong: defineAsyncComponent(() =>
 			import("@/components/modals/EditSong")
 		),

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

@@ -19,7 +19,7 @@
 					:activity="activity"
 				>
 					<template #actions>
-						<confirm
+						<quick-confirm
 							v-if="userId === myUserId"
 							@confirm="hideActivity(activity._id)"
 						>
@@ -28,7 +28,7 @@
 									>visibility_off</i
 								>
 							</a>
-						</confirm>
+						</quick-confirm>
 					</template>
 				</activity-item>
 			</div>
@@ -45,10 +45,10 @@ import Toast from "toasters";
 
 import ActivityItem from "@/components/ActivityItem.vue";
 import ws from "@/ws";
-import Confirm from "@/components/Confirm.vue";
+import QuickConfirm from "@/components/QuickConfirm.vue";
 
 export default {
-	components: { ActivityItem, Confirm },
+	components: { ActivityItem, QuickConfirm },
 	props: {
 		userId: {
 			type: String,

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

@@ -66,12 +66,12 @@
 		<hr class="section-horizontal-rule" />
 
 		<div class="row">
-			<confirm @confirm="removeActivities()">
+			<quick-confirm @confirm="removeActivities()">
 				<a class="button is-warning">
 					<i class="material-icons icon-with-button">cancel</i>
 					Clear my activities
 				</a>
-			</confirm>
+			</quick-confirm>
 
 			<a class="button is-danger" @click="openModal('removeAccount')">
 				<i class="material-icons icon-with-button">delete</i>
@@ -88,13 +88,13 @@ import Toast from "toasters";
 import InputHelpBox from "@/components/InputHelpBox.vue";
 import SaveButton from "@/components/SaveButton.vue";
 import validation from "@/validation";
-import Confirm from "@/components/Confirm.vue";
+import QuickConfirm from "@/components/QuickConfirm.vue";
 
 export default {
 	components: {
 		InputHelpBox,
 		SaveButton,
-		Confirm
+		QuickConfirm
 	},
 	data() {
 		return {

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

@@ -125,18 +125,21 @@
 			<hr class="section-horizontal-rule" />
 
 			<div class="row">
-				<confirm v-if="isPasswordLinked" @confirm="unlinkPassword()">
+				<quick-confirm
+					v-if="isPasswordLinked"
+					@confirm="unlinkPassword()"
+				>
 					<a class="button is-danger">
 						<i class="material-icons icon-with-button">close</i>
 						Remove password
 					</a>
-				</confirm>
-				<confirm v-if="isGithubLinked" @confirm="unlinkGitHub()">
+				</quick-confirm>
+				<quick-confirm v-if="isGithubLinked" @confirm="unlinkGitHub()">
 					<a class="button is-danger">
 						<i class="material-icons icon-with-button">link_off</i>
 						Remove GitHub from account
 					</a>
-				</confirm>
+				</quick-confirm>
 			</div>
 
 			<div class="section-margin-bottom" />
@@ -150,14 +153,14 @@
 
 			<hr class="section-horizontal-rule" />
 			<div class="row">
-				<confirm @confirm="removeSessions()">
+				<quick-confirm @confirm="removeSessions()">
 					<a class="button is-warning">
 						<i class="material-icons icon-with-button"
 							>exit_to_app</i
 						>
 						Logout everywhere
 					</a>
-				</confirm>
+				</quick-confirm>
 			</div>
 		</div>
 	</div>
@@ -169,10 +172,10 @@ import { mapGetters, mapState } from "vuex";
 
 import InputHelpBox from "@/components/InputHelpBox.vue";
 import validation from "@/validation";
-import Confirm from "@/components/Confirm.vue";
+import QuickConfirm from "@/components/QuickConfirm.vue";
 
 export default {
-	components: { InputHelpBox, Confirm },
+	components: { InputHelpBox, QuickConfirm },
 	data() {
 		return {
 			apiDomain: "",

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

@@ -40,7 +40,7 @@
 								v-tippy
 								>play_arrow</i
 							>
-							<confirm
+							<quick-confirm
 								v-if="
 									station.type === 'community' &&
 									(isOwnerOrAdmin() || station.partyMode) &&
@@ -58,8 +58,8 @@
 									v-tippy
 									>stop</i
 								>
-							</confirm>
-							<confirm
+							</quick-confirm>
+							<quick-confirm
 								v-if="
 									station.type === 'community' &&
 									isOwnerOrAdmin() &&
@@ -73,7 +73,7 @@
 									v-tippy
 									>block</i
 								>
-							</confirm>
+							</quick-confirm>
 							<i
 								@click="edit(element._id)"
 								class="material-icons edit-icon"
@@ -107,10 +107,10 @@ import ws from "@/ws";
 
 import PlaylistItem from "@/components/PlaylistItem.vue";
 import SortablePlaylists from "@/mixins/SortablePlaylists.vue";
-import Confirm from "@/components/Confirm.vue";
+import QuickConfirm from "@/components/QuickConfirm.vue";
 
 export default {
-	components: { PlaylistItem, Confirm },
+	components: { PlaylistItem, QuickConfirm },
 	mixins: [SortablePlaylists],
 	computed: {
 		currentPlaylists() {