Added dark mode styling to FloatingBox

frontend/src/components/FloatingBox.vue

@@ -1,7 +1,10 @@
 <template>
 	<div
 		ref="box"
-		class="box"
+		:class="{
+			'floating-box': true,
+			column
+		}"
 		:id="id"
 		v-if="shown"
 		:style="{
@@ -24,7 +27,8 @@
 <script>
 export default {
 	props: {
-		id: { type: String, default: null }
+		id: { type: String, default: null },
+		column: { type: Boolean, default: true }
 	},
 	data() {
 		return {
@@ -129,9 +133,18 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
-.box {
+<style lang="scss">
+.night-mode .floating-box {
+	background-color: var(--dark-grey-2) !important;
+	border: 0 !important;
+	.box-body b {
+		color: var(--light-grey-2) !important;
+	}
+}
+
+.floating-box {
 	background-color: var(--white);
+	color: var(--black);
 	position: fixed;
 	z-index: 10000000;
 	resize: both;
@@ -158,5 +171,13 @@ export default {
 			padding: 3px 6px;
 		}
 	}
+
+	&.column .box-body {
+		flex-flow: column;
+		span {
+			flex: 1;
+			display: block;
+		}
+	}
 }
 </style>

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

@@ -512,7 +512,7 @@
 				</div>
 			</template>
 		</modal>
-		<floating-box id="genreHelper" ref="genreHelper">
+		<floating-box id="genreHelper" ref="genreHelper" :column="false">
 			<template #body>
 				<span>Blues</span><span>Country</span><span>Disco</span
 				><span>Funk</span><span>Hip-Hop</span><span>Jazz</span

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

@@ -374,10 +374,6 @@ td {
 
 #keyboardShortcutsHelper {
 	.box-body {
-		b {
-			color: var(--black);
-		}
-
 		.biggest {
 			font-size: 18px;
 		}

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

@@ -404,10 +404,6 @@ td {
 
 #keyboardShortcutsHelper {
 	.box-body {
-		b {
-			color: var(--black);
-		}
-
 		.biggest {
 			font-size: 18px;
 		}

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

@@ -608,10 +608,6 @@ td {
 
 #keyboardShortcutsHelper {
 	.box-body {
-		b {
-			color: var(--black);
-		}
-
 		.biggest {
 			font-size: 18px;
 		}

frontend/src/pages/Station/index.vue

@@ -2253,22 +2253,6 @@ export default {
 		}
 	}
 }
-
-#player-debug-box {
-	.box-body {
-		// flex-direction: column;
-		flex-flow: column;
-
-		span {
-			flex: 1;
-			display: block;
-		}
-
-		b {
-			color: var(--black);
-		}
-	}
-}
 </style>
 
 <style lang="scss" scoped>