fix(Settings): css is now scoped, and styles are passed to child components (tabs) in Settings

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

backend/logic/actions/users.js

@@ -854,12 +854,12 @@ export default {
 					});
 				},
 
-				(avatar, next) => {
+				(newAvatarUrl, next) => {
 					userModel.updateOne(
 						{ _id: updatingUserId },
 						{
 							$set: {
-								avatar,
+								"avatar.url": newAvatarUrl,
 								"email.address": newEmail,
 								"email.verified": false,
 								"email.verificationToken": verificationToken

frontend/src/pages/Settings/index.vue

@@ -132,7 +132,7 @@ export default {
 };
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 @import "../../styles/global.scss";
 
 .night-mode {
@@ -155,7 +155,7 @@ export default {
 	}
 }
 
-.character-counter {
+/deep/ .character-counter {
 	display: flex;
 	justify-content: flex-end;
 	height: 0;
@@ -226,7 +226,7 @@ export default {
 		}
 	}
 
-	.content {
+	/deep/ .content {
 		margin: 24px 0;
 		height: fit-content;
 
@@ -249,11 +249,11 @@ export default {
 	}
 }
 
-.saved-changes-transition-enter-active {
+/deep/ .saved-changes-transition-enter-active {
 	transition: all 0.2s ease;
 }
 
-.saved-changes-transition-enter {
+/deep/ .saved-changes-transition-enter {
 	transform: translateX(20px);
 	opacity: 0;
 }

frontend/src/pages/Settings/tabs/Account.vue

@@ -184,6 +184,8 @@ export default {
 				this.userId,
 				email,
 				res => {
+					console.log(res);
+
 					if (res.status !== "success")
 						new Toast({ content: res.message, timeout: 8000 });
 					else {
@@ -204,11 +206,13 @@ export default {
 		},
 		changeUsername() {
 			const { username } = this.modifiedUser;
+
 			if (!validation.isLength(username, 2, 32))
 				return new Toast({
 					content: "Username must have between 2 and 32 characters.",
 					timeout: 8000
 				});
+
 			if (!validation.regex.azAZ09_.test(username))
 				return new Toast({
 					content: