Merge remote-tracking branch 'origin/polishing' into owen

frontend/src/App.vue

@@ -281,6 +281,14 @@ export default {
 	// color: var(--dark-grey-2);
 	// background-color: var(--light-grey-3) !important;
 
+	.input,
+	.textarea,
+	.select select {
+		background-color: var(--dark-grey);
+		border-color: var(--grey-3);
+		color: var(--white);
+	}
+
 	// &:last-of-type {
 	// 	background-color: var(--light-grey) !important;
 	// }

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/Modal.vue

@@ -105,24 +105,14 @@ p {
 	}
 }
 
-@media screen and (max-width: 600px) {
+@media screen and (max-width: 650px) {
 	.modal-card {
-		max-height: none;
-
-		.modal-card-body {
-			// padding: 0;
-		}
-
+		max-height: 100vh;
+		height: 100%;
 		.modal-card-head,
 		.modal-card-foot {
 			border-radius: 0;
 		}
 	}
 }
-
-@media screen and (max-height: 650px) {
-	.modal-card {
-		height: 100%;
-	}
-}
 </style>

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

@@ -631,25 +631,26 @@ export default {
 	}
 
 	.edit-playlist-modal.modal .modal-card-body .custom-modal-body {
-		.section {
-			background-color: transparent !important;
-		}
 		.left-section {
 			#playlist-info-section {
 				background-color: var(--dark-grey-3) !important;
 				border: 0;
 			}
 			.tabs-container {
+				background-color: transparent !important;
 				.tab-selection .button {
 					background: var(--dark-grey);
 					color: var(--white);
 				}
 				.tab {
 					background-color: var(--dark-grey-3) !important;
-					border: 0;
+					border: 0 !important;
 				}
 			}
 		}
+		.right-section .section {
+			border-radius: 5px;
+		}
 	}
 }
 

frontend/src/components/modals/EditSong/Tabs/Discogs.vue

@@ -304,6 +304,7 @@ export default {
 	.api-result .tracks .track:focus,
 	.selected-discogs-info {
 		background-color: var(--dark-grey-2) !important;
+		border: 0 !important;
 	}
 
 	.label,

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
@@ -1581,6 +1581,9 @@ export default {
 	#tabs-container {
 		background-color: var(--dark-grey-3) !important;
 		border: 0 !important;
+		.tab {
+			border: 0 !important;
+		}
 	}
 
 	#tabs-container #tab-selection .button {

frontend/src/components/modals/Report.vue

@@ -449,6 +449,10 @@ export default {
 			background-color: var(--dark-grey-3) !important;
 		}
 	}
+	.columns {
+		background-color: var(--dark-grey-3) !important;
+		border-radius: 5px;
+	}
 }
 
 .report-modal-inner-container {

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

@@ -2249,22 +2249,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>