corrected buttons scaling when active; started tests with Vue SFCs

src/js/modules/components/TestComponent.vue

@@ -0,0 +1,17 @@
+<template>
+	<div>Test</div>
+</template>
+
+<script>
+export default {
+	data: () => ({
+		test: 'super test'
+	}),
+	mounted() {
+		console.log('abcdefghi')
+	}
+}
+</script>
+
+<style>
+</style>

src/js/modules/components/settings-tab.js

@@ -1,8 +1,12 @@
 import Vue from 'vue'
 import { toast } from '../toasts.js'
 import { socket } from '../socket.js'
+import TestComponent from './TestComponent.vue'
 
 const SettingsTab = new Vue({
+	components: {
+		TestComponent
+	},
 	data: () => ({
 		settings: { tags: {} },
 		lastSettings: {},

src/js/modules/tabs.js

@@ -209,6 +209,7 @@ function changeTab(sidebarEl, section, tabName) {
 	for (i = 0; i < tablinks.length; i++) {
 		tablinks[i].classList.remove('active')
 	}
+
 	if (tabName == 'settings_tab' && main_selected != 'settings_tab') {
 		SettingsTab.settings = { ...SettingsTab.lastSettings }
 		SettingsTab.spotifyCredentials = { ...SettingsTab.lastCredentials }

src/styles/scss/globals/_globals.scss

@@ -112,7 +112,7 @@ button {
 
 	&:active {
 		background-color: var(--accent-color);
-		transform: scale(0.95);
+		transform: scale(0.98);
 	}
 
 	&:hover {