Improvements to dark mode

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

@@ -58,6 +58,12 @@ export default {
 };
 </script>
 
+<style lang="scss">
+.report-info-item .item-icon .profile-picture span {
+	font-size: 25px;
+}
+</style>
+
 <style lang="scss" scoped>
 .night-mode {
 	.report-info-item {

frontend/src/components/SearchQueryItem.vue

@@ -29,7 +29,8 @@
 					<div class="youtube-icon"></div>
 				</a>
 				<slot name="actions" />
-			</div>		</div>
+			</div>
+		</div>
 	</div>
 </template>
 

frontend/src/components/layout/MainHeader.vue

@@ -10,6 +10,7 @@
 		</div>
 
 		<span
+			v-if="loggedIn || !hideLoggedOut"
 			class="nav-toggle"
 			:class="{ 'is-active': isMobile }"
 			tabindex="0"

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

@@ -9,18 +9,18 @@
 			<div
 				:class="{
 					'view-only': !isEditable(),
-					'edit-playlist-modal-inner-container': true
+					'custom-modal-body': true
 				}"
 			>
-				<div id="first-column">
+				<div class="left-section">
 					<div id="playlist-info-section" class="section">
 						<h3>{{ playlist.displayName }}</h3>
 						<h5>Song Count: {{ playlist.songs.length }}</h5>
 						<h5>Duration: {{ totalLength() }}</h5>
 					</div>
 
-					<div id="tabs-container">
-						<div id="tab-selection">
+					<div class="tabs-container">
+						<div class="tab-selection">
 							<button
 								class="button is-default"
 								:class="{ selected: tab === 'settings' }"
@@ -77,7 +77,7 @@
 					</div>
 				</div>
 
-				<div id="second-column">
+				<div class="right-section">
 					<div id="rearrange-songs-section" class="section">
 						<div v-if="isEditable()">
 							<h4 class="section-title">Rearrange Songs</h4>
@@ -616,6 +616,29 @@ export default {
 	strong {
 		color: var(--light-grey-2);
 	}
+
+	.edit-playlist-modal.modal .modal-card-body .custom-modal-body {
+		.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 !important;
+				}
+			}
+		}
+		.right-section .section {
+			border-radius: 5px;
+		}
+	}
 }
 
 .menu-list li {
@@ -640,10 +663,10 @@ export default {
 	}
 }
 
-#tabs-container {
+.tabs-container {
 	// padding: 16px;
 
-	#tab-selection {
+	.tab-selection {
 		display: flex;
 		// overflow-x: auto;
 		margin: 24px 10px 0 10px;
@@ -678,7 +701,7 @@ export default {
 }
 
 .edit-playlist-modal {
-	.edit-playlist-modal-inner-container {
+	.custom-modal-body {
 		display: flex;
 		flex-wrap: wrap;
 		height: 100%;
@@ -687,7 +710,7 @@ export default {
 		&.view-only {
 			height: auto !important;
 
-			#first-column {
+			.left-section {
 				flex-basis: 100%;
 			}
 
@@ -721,7 +744,7 @@ export default {
 		width: 150px;
 	}
 
-	#first-column {
+	.left-section {
 		flex-basis: 550px;
 		height: 100%;
 		overflow-y: auto;
@@ -752,7 +775,7 @@ export default {
 		}
 	}
 
-	#second-column {
+	.right-section {
 		flex-basis: 650px;
 		height: 100%;
 		overflow-y: auto;

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/Tabs/Reports.vue

@@ -320,9 +320,14 @@ export default {
 	strong {
 		color: var(--light-grey-2);
 	}
+
+	.tabs-container .tab-selection .button {
+		background: var(--dark-grey) !important;
+		color: var(--white) !important;
+	}
 }
 
-.tabs-container {
+.reports-tab.tabs-container {
 	.tab-selection {
 		display: flex;
 		overflow-x: auto;

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

@@ -1580,6 +1580,15 @@ export default {
 	.player-footer,
 	#tabs-container {
 		background-color: var(--dark-grey-3) !important;
+		border: 0 !important;
+		.tab {
+			border: 0 !important;
+		}
+	}
+
+	#tabs-container #tab-selection .button {
+		background: var(--dark-grey) !important;
+		color: var(--white) !important;
 	}
 }
 

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

@@ -961,6 +961,13 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.night-mode {
+	.tabs-container .tab-selection .button {
+		background: var(--dark-grey) !important;
+		color: var(--white) !important;
+	}
+}
+
 .excluded-icon {
 	color: var(--red);
 }

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

@@ -360,6 +360,13 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.night-mode {
+	.tabs-container .tab-selection .button {
+		background: var(--dark-grey) !important;
+		color: var(--white) !important;
+	}
+}
+
 .songs {
 	.tabs-container {
 		.tab-selection {

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

@@ -680,8 +680,29 @@ export default {
 
 <style lang="scss" scoped>
 .night-mode {
-	#about-station-container {
-		background-color: var(--dark-grey-3) !important;
+	.manage-station-modal.modal .modal-card-body .custom-modal-body {
+		.left-section {
+			#about-station-container {
+				background-color: var(--dark-grey-3) !important;
+				border: 0;
+			}
+			.section {
+				background-color: transparent !important;
+			}
+			.tab-selection .button {
+				background: var(--dark-grey);
+				color: var(--white);
+			}
+			.tab {
+				background-color: var(--dark-grey-3);
+				border: 0;
+			}
+		}
+		.right-section .section,
+		#queue {
+			border-radius: 5px;
+			background-color: transparent !important;
+		}
 	}
 }
 
@@ -705,6 +726,10 @@ export default {
 		overflow-y: auto;
 		flex-grow: 1;
 
+		.section:first-child {
+			padding: 0 15px 15px !important;
+		}
+
 		#about-station-container {
 			padding: 20px;
 			display: flex;

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/components/modals/ViewReport.vue

@@ -269,7 +269,7 @@ export default {
 
 	.report-sub-items {
 		.report-sub-item {
-			border: 0.5px solid var(--black);
+			border: 1px solid var(--light-grey-3);
 			margin-top: -1px;
 			line-height: 24px;
 			display: flex;

frontend/src/pages/Admin/index.vue

@@ -240,6 +240,7 @@ export default {
 
 .main-container {
 	height: auto;
+	margin-bottom: 10px;
 }
 
 .tabs {

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

@@ -174,6 +174,11 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.night-mode #activity-items .activity-item {
+	background-color: var(--dark-grey-2) !important;
+	border: 0 !important;
+}
+
 #activity-items {
 	overflow: auto;
 	min-height: auto;