feat: code polishing

co-authored-by: JustTemmie <git@beaver.mom>
co-authored-by: SauceyRed <saucey@saucey.red>

components/Button.vue

@@ -21,11 +21,11 @@ const props = defineProps<{
 	background-color: #b35719;
 	color: #ffffff;
 
-	padding: 8px 18px;
+	padding: 0.7dvh 1.2dvw;
-	font-size: 18px;
+	font-size: 1.1em;
 	transition: background-color 0.2s;
 
-	border-radius: 12px;
+	border-radius: 0.7rem;
 	text-decoration: none;
 	display: inline-block;
 }
@@ -38,7 +38,7 @@ const props = defineProps<{
 	background-color: grey;
 }
 
-#button:hover {
+.button:hover {
 	background-color: #934410;
 }
 </style>

components/Settings/UserSettings/Account.vue

@@ -2,8 +2,8 @@
   <div>
     <h1>My Account</h1>
 
-    <div class="profile-and-user-data-fields">
+    <div class="profile-container">
-      <div class="user-data-fields">
+      <div class="user-data-fields" v-if="user">
         <p class="subtitle">AVATAR</p>
         <Button text="Change Avatar" :callback="changeAvatar" style="margin-right: 0.8dvw;"></Button>
         <Button text="Remove Avatar" :callback="removeAvatar" variant="neutral"></Button>
@@ -21,14 +21,14 @@
         <Button style="margin-top: 1dvh" text="Save Changes" :callback="saveChanges"></Button>
       </div>
 
-      <UserPopup :user=user class="profile-popup"></UserPopup>
+      <UserPopup v-if="user" :user="user" class="profile-popup"></UserPopup>
     </div>
 
-    <h2 style="margin-top: 8dvh">Password (and eventually authenticator)</h2>
+    <h2 style="margin-top: 8duservh">Password (and eventually authenticator)</h2>
     <Button text="Reset Password (tbd)" :callback=resetPassword></Button>
-
+    
     <h2>Account Deletion</h2>
-    <ButtonScary text="Delete Account (tbd)" :callback=deleteAccount></ButtonScary>
+    <Button text="Delete Account (tbd)" :callback=deleteAccount variant="scary"></Button>
 
   </div>
 </template>
@@ -39,20 +39,19 @@ import type { UserResponse } from '~/types/interfaces';
 
 const { fetchUser } = useAuth();
 
-const user_me = await fetchUser()
+const user: UserResponse | undefined = await fetchUser()
-if (user_me === undefined) {
+if (!user) {
   alert("could not fetch user info, aborting :(")
 }
 
-let userReference = Object.assign({}, user_me)
+let newPfpFile: File;
-const user: UserResponse = user_me!
-
-let newPfpFile: any = null
 
 const saveChanges = async () => {
+  if (!user) return;
+  
   const formData = new FormData()
   
-  if (newPfpFile !== null) {
+  if (newPfpFile) {
     formData.append("avatar", newPfpFile)
   }
   
@@ -70,7 +69,6 @@ const saveChanges = async () => {
       body: formData
     })
 
-    userReference = Object.assign({}, await fetchUser())
     alert('success!!')
   } catch (error: any) {
     if (error?.response?.status !== 200) {
@@ -86,7 +84,9 @@ const removeAvatar = async () => {
 }
 
 const changeAvatar = async () => {
-  let input = document.createElement('input');
+  if (!user) return;
+
+  const input = document.createElement('input');
   input.type = 'file';
   input.accept = 'image/*';
 
@@ -98,7 +98,7 @@ const changeAvatar = async () => {
       newPfpFile = file
       
       const reader = new FileReader();
-      reader.addEventListener("onload", (e: Event) => {
+      reader.addEventListener("onload", () => {
         if (reader.result && typeof reader.result === 'string') {
           user.avatar = reader.result;
         }
@@ -121,7 +121,7 @@ const deleteAccount = async () => {
 </script>
 
 <style scoped>
-.profile-and-user-data-fields {
+.profile-container {
   display: flex;
 }
 
@@ -139,7 +139,7 @@ const deleteAccount = async () => {
 
 .profile-data-input {
   min-width: 30dvw;
-  margin: 2px;
+  margin: 0.07dvh;
   padding: 0.1dvh 0.7dvw;
   height: 2.5em;
   font-size: 1em;

pages/settings.vue

@@ -6,7 +6,7 @@
         <ul>
           <div v-for="category in categories" :key="category.displayName">
             <h2>{{ category.displayName }}</h2>
-            <li v-for="page in category.pages" :key="page.displayName" @click="selectCategory(category, page)"
+            <li v-for="page in category.pages" :key="page.displayName" @click="selectCategory(page)"
               :class="{ 'sidebar-focus': selectedPage === page.displayName }">
               {{ page.displayName }}
             </li>
@@ -75,7 +75,7 @@ const categories = Object.values(settingsCategories);
 let currentPage = ref(categories[0].pages[0]);
 let selectedPage = ref(currentPage.value.displayName); // used to highlight the current channel
 
-const selectCategory = (_category: Category, page: Page) => {
+function selectCategory(page: Page) {
   currentPage.value = page;
   selectedPage.value = page.displayName;
 };
@@ -146,7 +146,7 @@ const selectCategory = (_category: Category, page: Page) => {
 }
 
 .spacer {
-  height: 2px;
+  height: 0.2dvh;
   display: block;
   margin: 0.8dvh 1dvw;
   background-color: #2c2e32;