refactor(Settings): moved tab system to use TabQueryHandler mixin

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

frontend/src/App.vue

@@ -215,6 +215,10 @@ export default {
 	label {
 		color: $night-mode-text !important;
 	}
+
+	.content {
+		background-color: $night-mode-bg-secondary !important;
+	}
 }
 
 body.night-mode {
@@ -593,10 +597,13 @@ h4.section-title {
 	.universal-item-actions {
 		display: flex;
 		flex-direction: row;
-		flex-wrap: wrap;
 		margin-left: 10px;
 		justify-content: center;
 
+		@media screen and (max-width: 800px) {
+			flex-wrap: wrap;
+		}
+
 		i {
 			cursor: pointer;
 

frontend/src/main.js

@@ -157,8 +157,6 @@ lofig.get("serverDomain").then(serverDomain => {
 		);
 
 		socket.on("keep.event:user.preferences.changed", preferences => {
-			console.log("changed");
-
 			store.dispatch(
 				"user/preferences/changeAutoSkipDisliked",
 				preferences.autoSkipDisliked

frontend/src/pages/Profile.vue

@@ -855,7 +855,12 @@ export default {
 	.date-location-row i,
 	.date-location-row p,
 	.item .left-part .top-text,
-	.item .left-part .bottom-text {
+	.item .left-part .bottom-text,
+	.bottom-section
+		.content
+		.item.activity-item
+		.thumbnail
+		.activity-type-icon {
 		color: $light-grey;
 	}
 }

frontend/src/pages/Settings/index.vue

@@ -6,42 +6,38 @@
 			<h1 id="page-title">Settings</h1>
 			<div id="sidebar-with-content">
 				<div class="nav-links">
-					<router-link
-						:class="{ active: activeTab === 'profile' }"
-						to="#profile"
+					<a
+						:class="{ active: tab === 'profile' }"
+						@click="showTab('profile')"
 					>
 						Profile
-					</router-link>
-					<router-link
-						:class="{ active: activeTab === 'account' }"
-						to="#account"
+					</a>
+					<a
+						:class="{ active: tab === 'account' }"
+						@click="showTab('account')"
 					>
 						Account
-					</router-link>
-					<router-link
-						:class="{ active: activeTab === 'security' }"
-						to="#security"
+					</a>
+					<a
+						:class="{ active: tab === 'security' }"
+						@click="showTab('security')"
 					>
 						Security
-					</router-link>
-					<router-link
-						:class="{ active: activeTab === 'preferences' }"
-						to="#preferences"
+					</a>
+					<a
+						:class="{ active: tab === 'preferences' }"
+						@click="showTab('preferences')"
 					>
 						Preferences
-					</router-link>
+					</a>
 				</div>
-				<profile-settings
-					v-if="activeTab === 'profile'"
-				></profile-settings>
-				<account-settings
-					v-if="activeTab === 'account'"
-				></account-settings>
+				<profile-settings v-if="tab === 'profile'"></profile-settings>
+				<account-settings v-if="tab === 'account'"></account-settings>
 				<security-settings
-					v-if="activeTab === 'security'"
+					v-if="tab === 'security'"
 				></security-settings>
 				<preferences-settings
-					v-if="activeTab === 'preferences'"
+					v-if="tab === 'preferences'"
 				></preferences-settings>
 			</div>
 		</div>
@@ -53,6 +49,8 @@
 import { mapActions } from "vuex";
 import Toast from "toasters";
 
+import TabQueryHandler from "../../mixins/TabQueryHandler.vue";
+
 import MainHeader from "../../components/layout/MainHeader.vue";
 import MainFooter from "../../components/layout/MainFooter.vue";
 
@@ -72,61 +70,65 @@ export default {
 		ProfileSettings,
 		PreferencesSettings
 	},
+	mixins: [TabQueryHandler],
 	data() {
 		return {
-			activeTab: ""
+			tab: "profile"
 		};
 	},
 	mounted() {
-		if (this.$route.hash === "") {
-			this.$router.push("#profile");
-		} else {
-			this.activeTab = this.$route.hash.replace("#", "");
-			this.localNightmode = this.nightmode;
-
-			io.getSocket(socket => {
-				this.socket = socket;
-
-				this.socket.emit("users.findBySession", res => {
-					if (res.status === "success") {
-						this.setUser(res.data);
-					} else {
-						new Toast({
-							content: "You're not currently signed in.",
-							timeout: 3000
-						});
-					}
-				});
-
-				this.socket.on("event:user.linkPassword", () =>
-					this.updateOriginalUser({
-						property: "password",
-						value: true
-					})
-				);
-
-				this.socket.on("event:user.unlinkPassword", () =>
-					this.updateOriginalUser({
-						property: "password",
-						value: false
-					})
-				);
-
-				this.socket.on("event:user.linkGithub", () =>
-					this.updateOriginalUser({
-						property: "github",
-						value: true
-					})
-				);
-
-				this.socket.on("event:user.unlinkGithub", () =>
-					this.updateOriginalUser({
-						property: "github",
-						value: false
-					})
-				);
+		if (
+			this.$route.query.tab === "profile" ||
+			this.$route.query.tab === "security" ||
+			this.$route.query.tab === "account" ||
+			this.$route.query.tab === "preferences"
+		)
+			this.tab = this.$route.query.tab;
+
+		this.localNightmode = this.nightmode;
+
+		io.getSocket(socket => {
+			this.socket = socket;
+
+			this.socket.emit("users.findBySession", res => {
+				if (res.status === "success") {
+					this.setUser(res.data);
+				} else {
+					new Toast({
+						content: "You're not currently signed in.",
+						timeout: 3000
+					});
+				}
 			});
-		}
+
+			this.socket.on("event:user.linkPassword", () =>
+				this.updateOriginalUser({
+					property: "password",
+					value: true
+				})
+			);
+
+			this.socket.on("event:user.unlinkPassword", () =>
+				this.updateOriginalUser({
+					property: "password",
+					value: false
+				})
+			);
+
+			this.socket.on("event:user.linkGithub", () =>
+				this.updateOriginalUser({
+					property: "github",
+					value: true
+				})
+			);
+
+			this.socket.on("event:user.unlinkGithub", () =>
+				this.updateOriginalUser({
+					property: "github",
+					value: false
+				})
+			);
+		});
 	},
 	methods: mapActions("settings", ["updateOriginalUser", "setUser"])
 };
@@ -135,12 +137,6 @@ export default {
 <style lang="scss" scoped>
 @import "../../styles/global.scss";
 
-.night-mode {
-	.content {
-		background-color: $night-mode-bg-secondary !important;
-	}
-}
-
 /deep/ .character-counter {
 	display: flex;
 	justify-content: flex-end;

frontend/src/pages/Station/components/Sidebar/MyPlaylists.vue

@@ -221,6 +221,10 @@ export default {
 		background-color: $night-mode-bg-secondary !important;
 		border: 0 !important;
 	}
+
+	.draggable-list-ghost {
+		background-color: darken($night-mode-bg-secondary, 5%);
+	}
 }
 
 .nothing-here-text {
@@ -256,12 +260,6 @@ export default {
 	transition: transform 0.5s;
 }
 
-.night-mode {
-	.draggable-list-ghost {
-		background-color: darken($night-mode-bg-secondary, 5%);
-	}
-}
-
 .draggable-list-ghost {
 	opacity: 0.5;
 	background-color: darken(#fff, 5%);