From 714f75ce1230e9c49ee16336859c008fef4ed7a1 Mon Sep 17 00:00:00 2001
From: Radical <radical@radical.fun>
Date: Mon, 23 Jun 2025 19:59:52 +0200
Subject: [PATCH] feat: update button component

co-authored-by: JustTemmie <git@beaver.mom>
---
 components/Button.vue                        | 44 ++++++++++++++
 components/Buttons/Button.vue                | 43 --------------
 components/Buttons/ButtonScary.vue           | 43 --------------
 components/Settings/UserSettings/Account.vue | 13 ++---
 components/Settings/UserSettings/Privacy.vue |  2 +-
 components/UserPopup.vue                     |  2 +-
 pages/settings.vue                           | 61 ++++++++++----------
 7 files changed, 82 insertions(+), 126 deletions(-)
 create mode 100644 components/Button.vue
 delete mode 100644 components/Buttons/Button.vue
 delete mode 100644 components/Buttons/ButtonScary.vue

diff --git a/components/Button.vue b/components/Button.vue
new file mode 100644
index 0000000..1374344
--- /dev/null
+++ b/components/Button.vue
@@ -0,0 +1,44 @@
+<template>
+	<div @click="props.callback()" class="button" :class="props.variant + '-button'">
+		{{ props.text }}
+	</div>
+</template>
+
+<script lang="ts" setup>
+
+const props = defineProps<{
+	text: string,
+	callback: CallableFunction,
+	variant?: "normal" | "scary" | "neutral",
+}>();
+
+</script>
+
+<style scoped>
+.button {
+	cursor: pointer;
+
+	background-color: #b35719;
+	color: #ffffff;
+
+	padding: 8px 18px;
+	font-size: 18px;
+	transition: background-color 0.2s;
+
+	border-radius: 12px;
+	text-decoration: none;
+	display: inline-block;
+}
+
+.scary-button {
+	background-color: red;
+}
+
+.neutral-button {
+	background-color: grey;
+}
+
+#button:hover {
+	background-color: #934410;
+}
+</style>
\ No newline at end of file
diff --git a/components/Buttons/Button.vue b/components/Buttons/Button.vue
deleted file mode 100644
index 2544fbb..0000000
--- a/components/Buttons/Button.vue
+++ /dev/null
@@ -1,43 +0,0 @@
-<!--if you want a button with a different colour, you have to inline CSS or do something similar
-
-    <Button text="Reset Password" :callback=reset_password style="color: purple; background-color: blue"></Button>
-
-	if you have multiple buttons with the same style, feel free to make another component
-
-    this is because i couldn't find a way of dynamically taking in colours without using javascript
-	to update the colour during runtime, i REFUSE to do this due to performance -->
-
-<template>
-	<div id="button" @click="props.callback()">
-		{{ props.text }}
-	</div>
-</template>
-
-<script lang="ts" setup>
-const props = defineProps<{
-	text: string,
-	callback: CallableFunction,
-}>();
-
-</script>
-
-<style scoped>
-#button {
-	cursor: pointer;
-
-	background-color: #b35719;
-	color: #ffffff;
-
-	padding: 8px 18px;
-	font-size: 18px;
-	transition: background-color 0.2s;
-
-	border-radius: 12px;
-	text-decoration: none;
-	display: inline-block;
-}
-
-#button:hover {
-	background-color: #934410;
-}
-</style>
\ No newline at end of file
diff --git a/components/Buttons/ButtonScary.vue b/components/Buttons/ButtonScary.vue
deleted file mode 100644
index 1fa2c85..0000000
--- a/components/Buttons/ButtonScary.vue
+++ /dev/null
@@ -1,43 +0,0 @@
-<!--if you want a button with a different colour, you have to inline CSS or do something similar
-
-    <Button text="Reset Password" :callback=reset_password style="color: purple; background-color: blue"></Button>
-
-	if you have multiple buttons with the same style, feel free to make another component
-
-    this is because i couldn't find a way of dynamically taking in colours without using javascript
-	to update the colour during runtime, i REFUSE to do this due to performance -->
-
-<template>
-	<div id="button" @click="props.callback()">
-		{{ props.text }}
-	</div>
-</template>
-
-<script lang="ts" setup>
-const props = defineProps<{
-	text: string,
-	callback: CallableFunction,
-}>();
-
-</script>
-
-<style scoped>
-#button {
-	cursor: pointer;
-
-	background-color: #f02f2f;
-	color: #ffffff;
-
-	padding: 8px 18px;
-	font-size: 18px;
-	transition: background-color 0.2s;
-
-	border-radius: 12px;
-	text-decoration: none;
-	display: inline-block;
-}
-
-#button:hover {
-	background-color: #ff0000;
-}
-</style>
\ No newline at end of file
diff --git a/components/Settings/UserSettings/Account.vue b/components/Settings/UserSettings/Account.vue
index 120ceb3..5e883f5 100644
--- a/components/Settings/UserSettings/Account.vue
+++ b/components/Settings/UserSettings/Account.vue
@@ -6,7 +6,7 @@
       <div class="user-data-fields">
         <p class="subtitle">AVATAR</p>
         <Button text="Change Avatar" :callback="changeAvatar" style="margin-right: 0.8dvw;"></Button>
-        <Button text="Remove Avatar" :callback="removeAvatar" style="background-color: grey;"></Button>
+        <Button text="Remove Avatar" :callback="removeAvatar" variant="neutral"></Button>
         
         <label for="profile-display-name-input" class="subtitle">DISPLAY NAME</label>
         <input id="profile-display-name-input" class="profile-data-input" type="text" v-model="user.display_name" placeholder="Enter display name" />
@@ -34,8 +34,7 @@
 </template>
 
 <script lang="ts" setup>
-import Button from '~/components/Buttons/Button.vue';
-import ButtonScary from '~/components/Buttons/ButtonScary.vue';
+import Button from '~/components/Button.vue';
 import type { UserResponse } from '~/types/interfaces';
 
 const { fetchUser } = useAuth();
@@ -99,11 +98,11 @@ const changeAvatar = async () => {
       newPfpFile = file
       
       const reader = new FileReader();
-      reader.onload = (e) => {
-        if (e.target?.result && typeof e.target.result === 'string') {
-          user.avatar = e.target.result;
+      reader.addEventListener("onload", (e: Event) => {
+        if (reader.result && typeof reader.result === 'string') {
+          user.avatar = reader.result;
         }
-      };
+      });
       reader.readAsDataURL(file);
     }
   })
diff --git a/components/Settings/UserSettings/Privacy.vue b/components/Settings/UserSettings/Privacy.vue
index 1e1c2a1..0f1387d 100644
--- a/components/Settings/UserSettings/Privacy.vue
+++ b/components/Settings/UserSettings/Privacy.vue
@@ -5,7 +5,7 @@
 </template>
 
 <script lang="ts" setup>
-import Button from '~/components/Buttons/Button.vue';
+import Button from '~/components/Button.vue';
 </script>
 
 <style scoped>
diff --git a/components/UserPopup.vue b/components/UserPopup.vue
index 95f8816..092e7d5 100644
--- a/components/UserPopup.vue
+++ b/components/UserPopup.vue
@@ -10,7 +10,7 @@
         {{ props.user.username }}
         <span v-if="props.user.pronouns"> - {{ props.user.pronouns }}</span>
       </p>
-      <div id="about-me">
+      <div id="about-me" v-if="props.user.about">
         {{ props.user.about }}
       </div>
     </div>
diff --git a/pages/settings.vue b/pages/settings.vue
index 5890feb..c2e7cfd 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -4,20 +4,20 @@
       <div id="sidebar">
         <h4>(Search bar here)</h4>
         <ul>
-          <div v-for="category in categories" :key="category.display_name">
-            <h2>{{ category.display_name }}</h2>
-            <li v-for="page in category.pages" :key="page.display_name" @click="selectCategory(category, page)"
-              :class="{ 'sidebar-focus': selectedPage === page.display_name }">
-              {{ page.display_name }}
+          <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)"
+              :class="{ 'sidebar-focus': selectedPage === page.displayName }">
+              {{ page.displayName }}
             </li>
             <span class="spacer"></span>
           </div>
 
-          <ButtonScary text="Log Out" :callback=logout></ButtonScary>
+          <Button text="Log Out" :callback=logout variant="scary"></Button>
         </ul>
       </div>
-      <div id="sub_page">
-        <component :is="currentPage.page_data" />
+      <div id="sub-page">
+        <component :is="currentPage.pageData" />
       </div>
     </div>
   </div>
@@ -25,18 +25,17 @@
 
 
 <script lang="ts" setup>
-import { ref } from 'vue';
-import ButtonScary from '~/components/Buttons/ButtonScary.vue';
+import Button from '~/components/Button.vue';
 
 const { logout } = useAuth()
 
 interface Page {
-  display_name: string;
-  page_data: any; // is actually Component but TS is yelling at me :(
+  displayName: string;
+  pageData: any; // is actually Component but TS is yelling at me :(
 }
-
+  
 interface Category {
-  display_name: string;
+  displayName: string;
   pages: Page[];
 }
 
@@ -51,22 +50,22 @@ import Keybinds from '~/components/Settings/AppSettings/Keybinds.vue';
 import Language from '~/components/Settings/AppSettings/Language.vue';
 
 const settingsCategories = {
-  user_settings: {
-    display_name: "User Settings",
+  userSettings: {
+    displayName: "User Settings",
     pages: [
-      { display_name: "My Account", page_data: Account },
-      { display_name: "Privacy", page_data: Privacy },
-      { display_name: "Devices", page_data: Devices },
-      { display_name: "Connections", page_data: Connections },
+      { displayName: "My Account", pageData: Account },
+      { displayName: "Privacy", pageData: Privacy },
+      { displayName: "Devices", pageData: Devices },
+      { displayName: "Connections", pageData: Connections },
     ]
   },
-  app_settings: {
-    display_name: "App Settings",
+  appSettings: {
+    displayName: "App Settings",
     pages: [
-      { display_name: "Appearance", page_data: Appearance },
-      { display_name: "Notifications", page_data: Notifications },
-      { display_name: "Keybinds", page_data: Keybinds },
-      { display_name: "Language", page_data: Language },
+      { displayName: "Appearance", pageData: Appearance },
+      { displayName: "Notifications", pageData: Notifications },
+      { displayName: "Keybinds", pageData: Keybinds },
+      { displayName: "Language", pageData: Language },
     ]
   },
 };
@@ -74,11 +73,11 @@ const settingsCategories = {
 const categories = Object.values(settingsCategories);
 
 let currentPage = ref(categories[0].pages[0]);
-let selectedPage = ref(currentPage.value.display_name); // used to highlight the current channel
+let selectedPage = ref(currentPage.value.displayName); // used to highlight the current channel
 
 const selectCategory = (_category: Category, page: Page) => {
   currentPage.value = page;
-  selectedPage.value = page.display_name;
+  selectedPage.value = page.displayName;
 };
 
 </script>
@@ -109,7 +108,7 @@ const selectCategory = (_category: Category, page: Page) => {
 }
 
 #sidebar h2 {
-  font-size: 0.8rem;
+  font-size: 0.95em;
   padding: 0 0.8dvw;
 }
 
@@ -122,7 +121,7 @@ const selectCategory = (_category: Category, page: Page) => {
 #sidebar li {
   border-radius: 8px;
   padding: 0.8dvh 0.8dvw;
-  font-size: 1.1em;
+  font-size: 1.4em;
   cursor: pointer;
   transition: background-color 0.3s;
 }
@@ -135,7 +134,7 @@ const selectCategory = (_category: Category, page: Page) => {
   background-color: #40444b;
 }
 
-#sub_page {
+#sub-page {
   flex-grow: 1;
   min-width: 70dvw;
   max-width: 70dvw;