fix: css night mode improvements, some other minor css fixes

Signed-off-by: Jonathan <theflametrooper@gmail.com>

frontend/src/components/Modal.vue

@@ -43,6 +43,34 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.night-mode {
+	.modal-card-head,
+	.modal-card-foot {
+		background-color: #222;
+		border-color: #333;
+	}
+
+	.modal-card-body {
+		background-color: #111 !important;
+	}
+
+	.modal-card-title {
+		color: #fff;
+	}
+
+	p,
+	label,
+	td,
+	h1,
+	h2,
+	h3,
+	h4,
+	h5,
+	h6 {
+		color: #ddd !important;
+	}
+}
+
 .modal-card {
 	width: 800px;
 	font-size: 16px;

frontend/src/components/layout/MainFooter.vue

@@ -2,7 +2,7 @@
 	<footer class="footer">
 		<div class="container">
 			<div class="content has-text-centered">
-				<p id="footer-social-icons">
+				<div id="footer-social-icons">
 					<a
 						class="icon"
 						:href="`${this.socialLinks.github}`"
@@ -35,22 +35,22 @@
 					>
 						<img src="/assets/social/discord.svg" />
 					</a>
-				</p>
+				</div>
 				<a href="/"
 					><img
 						id="footer-logo"
 						src="/assets/blue_wordmark.png"
 						alt="Musare"
 				/></a>
-				<p id="footer-links">
-					<router-link title="About Musare" to="/about">
-						About
-					</router-link>
-					<router-link title="The Musare Team" to="/team">
-						Team
-					</router-link>
-					<router-link title="News" to="/news"> News </router-link>
-				</p>
+				<div id="footer-links">
+					<router-link title="About Musare" to="/about"
+						>About</router-link
+					>
+					<router-link title="Musare Team" to="/team"
+						>Team</router-link
+					>
+					<router-link title="News" to="/news">News</router-link>
+				</div>
 				<p>© Copyright Musare 2015 - 2020</p>
 			</div>
 		</div>
@@ -87,7 +87,7 @@ export default {
 		background-color: #222;
 	}
 
-	footer.footer .socialIcons img {
+	footer.footer #footer-social-icons img {
 		filter: invert(1);
 	}
 }
@@ -137,10 +137,18 @@ export default {
 		}
 
 		a {
-			padding: 0 5px;
+			padding: 0 7px;
 			font-size: 18px;
 			color: $primary-color;
 
+			&:first-of-type {
+				padding: 0 7px 0 0;
+			}
+
+			&:last-of-type {
+				padding: 0 0 0 7px;
+			}
+
 			&:hover {
 				color: $primary-color;
 				text-decoration: underline;

frontend/src/components/modals/EditSong.vue

@@ -1549,6 +1549,26 @@ export default {
 <style lang="scss" scoped>
 @import "../../styles/global.scss";
 
+.night-mode {
+	.edit-section,
+	.api-section,
+	.api-result,
+	.player-footer {
+		background-color: #222 !important;
+	}
+
+	.api-result .tracks .track:hover,
+	.selected-discogs-info {
+		background-color: #333 !important;
+	}
+
+	.label,
+	p,
+	strong {
+		color: #ddd;
+	}
+}
+
 .modal-card-body > div {
 	display: flex;
 	height: 100%;

frontend/src/components/modals/EditStation.vue

@@ -1019,7 +1019,7 @@ export default {
 	}
 
 	.section {
-		background-color: #111 !important;
+		background-color: #222 !important;
 		border: 0 !important;
 	}
 

frontend/src/components/ui/PlaylistItem.vue

@@ -41,6 +41,12 @@ export default {
 <style lang="scss" scoped>
 @import "../../styles/global.scss";
 
+.night-mode {
+	.playlist p {
+		color: #ddd !important;
+	}
+}
+
 .playlist {
 	width: 100%;
 	height: 72px;

frontend/src/pages/Profile.vue

@@ -700,6 +700,7 @@ export default {
 				width: 70.5px;
 				height: 70.5px;
 				background-color: #000;
+				z-index: -1;
 
 				img {
 					opacity: 0.4;

frontend/src/pages/Station/AddSongToQueue.vue

@@ -362,12 +362,14 @@ export default {
 <style lang="scss" scoped>
 @import "../../styles/global.scss";
 
-tr td {
-	vertical-align: middle;
+.night-mode {
+	tr {
+		background-color: #222;
+	}
 }
 
-.song-thumbnail {
-	padding-left: 0;
+tr td {
+	vertical-align: middle;
 }
 
 .song-actions {