Merge branch 'main' into settings-page

README.md

@@ -1,7 +1,5 @@
 # Nuxt Minimal Starter
 
-
-
 Look at the [Nuxt documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
 
 ## Setup

app.vue

@@ -9,31 +9,21 @@
 
 const banner = useState("banner", () => false);
 
-let currentTheme = "dark" // default theme
-const savedTheme = localStorage.getItem("selectedTheme");
-if (savedTheme) {
-	currentTheme = savedTheme;
-}
-
-const baseURL = useRuntimeConfig().app.baseURL;
-
-useHead({
-  link: [
-    {
-      rel: "stylesheet",
-      href: `${baseURL}themes/${currentTheme}.css`
-    }
-  ]
-})
 </script>
 
 <style>
+:root {
+  --background-color: rgb(30, 30, 30);
+  --main-text-color: rgb(190, 190, 190);
+  --outline-border: 1px solid rgb(150, 150, 150);
+}
+
 html,
 body {
   font-family: Arial, Helvetica, sans-serif;
   box-sizing: border-box;
-  color: var(--text-color);
+  color: rgb(190, 190, 190);
-  background-color: var(--chat-background-color);
+  background-color: rgb(30, 30, 30);
   margin: 0;
 }
 
@@ -50,15 +40,15 @@ a {
 }
 
 .bottom-border {
-	border-bottom: 1px solid var(--padding-color);
+	border-bottom: 1px solid rgb(70, 70, 70);
 }
 
 .left-border {
-	border-left: 1px solid var(--padding-color);
+	border-left: 1px solid rgb(70, 70, 70);
 }
 
 .right-border {
-	border-right: 1px solid var(--padding-color);
+	border-right: 1px solid rgb(70, 70, 70);
 }
 
 .rounded-corners {

components/Button.vue

@@ -18,8 +18,8 @@ const props = defineProps<{
 .button {
 	cursor: pointer;
 
-	background-color: var(--primary-color);
+	background-color: #b35719;
-	color: var(--text-color);
+	color: #ffffff;
 
 	padding: 0.7dvh 1.2dvw;
 	font-size: 1.1em;
@@ -30,22 +30,15 @@ const props = defineProps<{
 	display: inline-block;
 }
 
-.button:hover {
-	background-color: var(--primary-highlighted-color);
-}
-
 .scary-button {
 	background-color: red;
 }
-.scary-button:hover {
-	background-color: red;
-}
 
 .neutral-button {
-	background-color: var(--accent-color);
+	background-color: grey;
-}
-.neutral-button:hover {
-	background-color: var(--accent-highlighted-color);
 }
 
+.button:hover {
+	background-color: #934410;
+}
 </style>

components/Channel.vue

@@ -36,6 +36,6 @@ const isCurrentChannel = props.uuid == props.currentUuid;
 }
 
 .current-channel {
-	background-color: var(--sidebar-highlighted-background-color);
+	background-color: rgb(70, 70, 70);
 }
 </style>

components/CropPopup.vue

@@ -1,93 +0,0 @@
-<template>
-  <div id="fullscreen-container">
-    <div id="crop-preview">
-      <img ref="image" :src="imageSrc" style="min-height: 35dvh;">
-      <Button text="Crop" :callback="cropImage"></Button>
-      <Button text="Cancel" :callback="closePopup"></Button>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import Cropper from 'cropperjs';
-
-const props = defineProps({
-  imageSrc: String,
-  onCrop: Function,
-  onClose: Function,
-});
-
-const image = ref<HTMLImageElement | null>(null);
-const cropper = ref<Cropper | null>(null);
-
-watch(image, (newValue) => {
-  if (newValue) {
-    cropper.value = new Cropper(newValue)
-    const cropperCanvas = cropper.value.getCropperCanvas()
-    const cropperSelection = cropper.value.getCropperSelection()
-    
-    if (cropperCanvas) {
-      cropperCanvas.background = false
-    }
-
-    if (cropperSelection) {
-      cropperSelection.precise = true
-      cropperSelection.aspectRatio = 1
-      cropperSelection.initialCoverage = 1
-    }
-  }
-});
-
-async function cropImage() {
-  if (cropper) {
-    const selection = cropper.value?.getCropperSelection();
-    if (selection) {
-      const canvas = await selection.$toCanvas({width: 256, height: 256})
-
-      canvas.toBlob((blob) => {
-        if (blob && props.onCrop) {
-          const reader = new FileReader();
-          reader.addEventListener("load", () => {
-            if (reader.result && typeof reader.result === 'string') {
-              if (props.onCrop) {
-                props.onCrop(blob, reader.result)
-              }
-            }
-          });
-          const file = new File([blob], 'preview.png', { type: 'image/png' })
-          reader.readAsDataURL(file)
-        }
-      });
-    }
-  }
-}
-
-function closePopup() {
-  if (props.onClose) {
-    props.onClose();
-  }
-}
-</script>
-
-<style scoped>
-.button {
-  margin: 0.2em
-}
-
-#fullscreen-container {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 10;
-  background: rgba(0, 0, 0, 0.5);
-}
-
-#crop-preview {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-</style>

components/MemberEntry.vue

@@ -1,35 +0,0 @@
-<template>
-    <div class="member-item" @click="togglePopup" @blur="hidePopup" tabindex="0">
-        <img v-if="props.member.user.avatar" class="member-avatar" :src="props.member.user.avatar" :alt="props.member.user.display_name ?? props.member.user.username" />
-        <Icon v-else class="member-avatar" name="lucide:user" />
-        <span class="member-display-name">{{ props.member.user.display_name ?? props.member.user.username }}</span>
-        <UserPopup v-if="isPopupVisible" :user="props.member.user" id="profile-popup" />
-    </div>
-</template>
-
-<script lang="ts" setup>
-import { ref } from 'vue';
-import type { GuildMemberResponse } from '~/types/interfaces';
-import UserPopup from './UserPopup.vue';
-
-const props = defineProps<{
-    member: GuildMemberResponse
-}>();
-
-const isPopupVisible = ref(false);
-
-const togglePopup = () => {
-    isPopupVisible.value = false;
-    // isPopupVisible.value = !isPopupVisible.value;
-};
-
-const hidePopup = () => {
-    isPopupVisible.value = false;
-};
-</script>
-
-<style>
-.member-item {
-    position: relative; /* Set the position to relative for absolute positioning of the popup */
-}
-</style>

components/Message.vue

@@ -10,8 +10,6 @@
 					{{ username }}
 				</span>
 				<span class="message-date" :title="date.toString()">
-					<span v-if="getDayDifference(date, currentDate) === 1">Yesterday at</span>
-					<span v-else-if="getDayDifference(date, currentDate) > 1 ">{{ date.toLocaleDateString(undefined) }},</span>
 					{{ date.toLocaleTimeString(undefined, { timeStyle: "short" }) }}
 				</span>
 			</div>
@@ -51,7 +49,6 @@ const messageElement = ref<HTMLDivElement>();
 const dateHidden = ref<boolean>(true);
 
 const date = new Date(props.timestamp);
-const currentDate: Date = new Date()
 
 console.log("message:", props.text);
 console.log("author:", props.username);
@@ -77,17 +74,6 @@ onMounted(async () => {
 //	showHover.value = !showHover.value;
 //}
 
-function getDayDifference(date1: Date, date2: Date) {
-    const midnight1 = new Date(date1.getFullYear(), date1.getMonth(), date1.getDate());
-    const midnight2 = new Date(date2.getFullYear(), date2.getMonth(), date2.getDate());
-
-    const timeDifference = midnight2.getTime() - midnight1.getTime();
-
-    const dayDifference = timeDifference / (1000 * 60 * 60 * 24);
-
-    return Math.round(dayDifference);
-}
-
 </script>
 
 <style scoped>
@@ -95,14 +81,14 @@ function getDayDifference(date1: Date, date2: Date) {
 	text-align: left;
 	/* border: 1px solid lightcoral; */
 	display: grid;
-	grid-template-columns: 2rem 1fr;
+	grid-template-columns: 2dvw 1fr;
 	align-items: center;
 	column-gap: 1dvw;
 	width: 100%;
 }
 
 .message:hover {
-	background-color: var(--chat-highlighted-background-color);
+	background-color: rgb(20, 20, 20);
 }
 
 .normal-message {
@@ -143,11 +129,10 @@ function getDayDifference(date1: Date, date2: Date) {
 }
 
 .left-column {
-	min-width: 2rem;
 	display: flex;
-	justify-content: center;
 	text-align: center;
 	white-space: nowrap;
+	
 }
 
 .author-username {
@@ -157,7 +142,7 @@ function getDayDifference(date1: Date, date2: Date) {
 
 .message-date {
 	font-size: .7em;
-	color: var(--secondary-text-color);
+	color: rgb(150, 150, 150);
 	cursor: default;
 }
 

components/MessageArea.vue

@@ -158,12 +158,10 @@ if (accessToken && apiBase) {
 
 function sendMessage(e: Event) {
 	e.preventDefault();
-	const message = {
+	const text = messageInput.value;
-		message: messageInput.value
+	console.log("text:", text);
-	}
+	if (text) {
-	console.log("message:", message);
+		ws.send(text);
-	if (message.message) {
-		ws.send(JSON.stringify(message));
 		messageInput.value = "";
 		console.log("MESSAGE SENT!!!");
 	}
@@ -253,7 +251,7 @@ router.beforeEach((to, from, next) => {
 	flex-direction: column;
 	justify-content: center;
 	align-content: center;
-	border: 1px solid var(--padding-color);
+	border: 1px solid rgb(70, 70, 70);
 	padding-bottom: 1dvh;
 	padding-top: 1dvh;
 	margin-bottom: 1dvh;
@@ -268,7 +266,7 @@ router.beforeEach((to, from, next) => {
 
 #message-box-input {
 	width: 80%;
-	background-color: var(--sidebar-background-color);
+	background-color: rgb(50, 50, 50);
 	border: none;
 	color: inherit;
 	padding-left: 1dvw;
@@ -286,13 +284,11 @@ router.beforeEach((to, from, next) => {
 #submit-button {
 	background-color: inherit;
 	border: none;
-	color: var(--primary-color);
+	color: rgb(200, 200, 200);
-	transition: color 100ms;
 	font-size: 1.5em;
 }
 
 #submit-button:hover {
-	color: var(--primary-highlighted-color);
+	color: rgb(255, 255, 255);
-	cursor: pointer;
 }
 </style>

components/Settings/AppSettings/Appearance.vue

@@ -1,100 +1,14 @@
 <template>
   <div>
-    <h1>Appearance</h1>
+    <h1>hi</h1>
-    
+    <h5>TEST</h5>
-    <p class="subtitle">THEMES</p>
+    <h5>TEST</h5>
-    <div class="themes">
-      <div v-for="theme of themes" class="theme-preview-container">
-        <span class="theme-preview"
-          :title="theme.displayName"
-          :style="{background:`linear-gradient(${theme.previewGradient})`}"
-          @click="changeTheme(theme.id, theme.themeUrl)"
-        >
-          <span class="theme-title" :style="{color:`${theme.complementaryColor}`}">
-            {{ theme.displayName }}
-          </span>
-        </span>
-      </div>
-    </div>
-
-    <p class="subtitle">ICONS</p>
-    <div class="themes">
-    </div>
-
-
   </div>
 </template>
 
 <script lang="ts" setup>
-const runtimeConfig = useRuntimeConfig()
-const defaultThemes = runtimeConfig.public.defaultThemes
-const baseURL = runtimeConfig.app.baseURL;
-let themeLinkElement: HTMLLinkElement | null = null;
-
-const themes: Array<Theme> = []
-
-interface Theme {
-  id: string
-  displayName: string
-  previewGradient: string
-  complementaryColor: string
-  themeUrl: string
-}
-
-function changeTheme(id: string, url: string) {
-  if (themeLinkElement && themeLinkElement.getAttribute('href') === `${baseURL}themes/${url}`) {
-    return;
-  }
-
-  localStorage.setItem("selectedTheme", id);
-
-  // if the theme didn't originally load for some reason, create it
-  if (!themeLinkElement) {
-    themeLinkElement = document.createElement('link');
-    themeLinkElement.rel = 'stylesheet';
-    document.head.appendChild(themeLinkElement);
-  }
-
-  themeLinkElement.href = `${baseURL}themes/${url}`;
-}
-
-async function fetchThemes() {
-  for (const theme of defaultThemes) {
-    const themeConfig = await $fetch(`${baseURL}themes/${theme}.json`) as Theme
-    themeConfig.id = theme
-
-    themes.push(themeConfig)
-  }
-}
-
-await fetchThemes()
 </script>
 
 <style scoped>
-.themes {
-  display: flex;
-}
 
-.theme-preview-container {
-  margin: .5em;
-  width: 5em;
-  height: 5em;
-}
-
-.theme-preview {
-  width: 5em;
-  height: 5em;
-  border-radius: 100%;
-  border: .1em solid var(--primary-color);
-
-  display: inline-block;
-  text-align: center;
-  align-content: center;
-  cursor: pointer;
-}
-
-.theme-title {
-  font-size: .8em;
-  line-height: 5em; /* same height as the parent to centre it vertically */
-}
 </style>

components/Settings/UserSettings/Account.vue

@@ -1,16 +1,33 @@
 <template>
-  <div v-if="user">
+  <div>
-    <h1>Account</h1>
+    <h1>My Account</h1>
+
+    <div class="profile-container">
+      <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>
+        
+        <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" />
+        <label for="profile-username-input" class="subtitle">USERNAME</label>
+        <input id="profile-username-input" class="profile-data-input" type="text" v-model="user.username" placeholder="Enter username" />
+        <label for="profile-pronouns-input" class="subtitle">PRONOUNS</label>
+        <input id="profile-pronouns-input" class="profile-data-input" type="text" v-model="user.pronouns" placeholder="Enter pronouns" />
+        <label for="profile-about-me-input" class="subtitle">ABOUT ME</label>
+        <input id="profile-about-me-input" class="profile-data-input" type="text" v-model="user.about" placeholder="About me" />
 
-    <p class="subtitle">E-MAIL</p>
-    <input id="profile-about-me-input" class="profile-data-input" type="text" v-model="user.email" placeholder="john@example.org" />
         <br>
-    <Button text="Submit" :callback=changeEmail style="margin-top: .4em"></Button>
+        <Button style="margin-top: 1dvh" text="Save Changes" :callback="saveChanges"></Button>
+      </div>
 
-    <p class="subtitle">PASSWORD</p>
+      <UserPopup v-if="user" :user="user" class="profile-popup"></UserPopup>
-    <Button text="Reset Password" :callback=resetPassword></Button>
+    </div>
 
-    <p class="subtitle">ACCOUNT DELETION</p>
+    <h2 style="margin-top: 8duservh">Password (and eventually authenticator)</h2>
+    <Button text="Reset Password (tbd)" :callback=resetPassword></Button>
+    
+    <h2>Account Deletion</h2>
     <Button text="Delete Account (tbd)" :callback=deleteAccount variant="scary"></Button>
 
   </div>
@@ -27,13 +44,22 @@ if (!user) {
   alert("could not fetch user info, aborting :(")
 }
 
-async function changeEmail() {
+let newPfpFile: File;
+
+const saveChanges = async () => {
   if (!user) return;
   
-
   const formData = new FormData()
+  
+  if (newPfpFile) {
+    formData.append("avatar", newPfpFile)
+  }
+  
   const bytes = new TextEncoder().encode(JSON.stringify({
-    email: user.email,
+    display_name: user.display_name,
+    username: user.username,
+    pronouns: user.pronouns,
+    about: user.about,
   }));
   formData.append('json', new Blob([bytes], { type: 'application/json' }));
   
@@ -52,24 +78,60 @@ async function changeEmail() {
 };
 
 
-async function resetPassword () {
+const removeAvatar = async () => {
-  await fetchWithApi("/auth/reset-password", {
+  alert("TBD")
-    method: 'GET',
+  // await fetchWithApi(`/auth/reset-password`);
-    headers: {
-      'Content-Type': 'application/json',
-    },
-    query: {
-      identifier: user?.username
-    }
-  });
 }
 
-async function deleteAccount() {
+const changeAvatar = async () => {
+  if (!user) return;
+
+  const input = document.createElement('input');
+  input.type = 'file';
+  input.accept = 'image/*';
+
+  input.addEventListener("change", (e: Event) => {
+    if (input.files?.length && input.files.length > 0) {
+      const file = input.files[0];
+      if (!file) return;
+
+      newPfpFile = file
+      
+      const reader = new FileReader();
+      reader.addEventListener("onload", () => {
+        if (reader.result && typeof reader.result === 'string') {
+          user.avatar = reader.result;
+        }
+      });
+      reader.readAsDataURL(file);
+    }
+  })
+
+  input.click()
+}
+
+const resetPassword = async () => {
+  alert("TBD")
+  // await fetchWithApi(`/auth/reset-password`);
+}
+
+const deleteAccount = async () => {
   alert("TBD")
 }
 </script>
 
 <style scoped>
+.profile-container {
+  display: flex;
+}
+
+.subtitle {
+  display: block;
+  font-size: 0.8em;
+  font-weight: 800;
+  margin: 1.5dvh 0 0.5dvh 0.25dvw;
+}
+
 .user-data-fields {
   min-width: 35dvw;
   max-width: 35dvw;
@@ -83,7 +145,11 @@ async function deleteAccount() {
   font-size: 1em;
   border-radius: 8px;
   border: none;
-  color: var(--text-color);
+  color: white;
-  background-color: var(--accent-color);
+  background-color: #54361b;
+}
+
+.profile-popup {
+  margin-left: 2dvw;
 }
 </style>

components/Settings/UserSettings/Profile.vue

@@ -1,151 +0,0 @@
-<template>
-  <div>
-    <h1>Profile</h1>
-
-    <div class="profile-container">
-      <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>
-        
-        <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" />
-        <label for="profile-username-input" class="subtitle">USERNAME</label>
-        <input id="profile-username-input" class="profile-data-input" type="text" v-model="user.username" placeholder="Enter username" />
-        <label for="profile-pronouns-input" class="subtitle">PRONOUNS</label>
-        <input id="profile-pronouns-input" class="profile-data-input" type="text" v-model="user.pronouns" placeholder="Enter pronouns" />
-        <label for="profile-about-me-input" class="subtitle">ABOUT ME</label>
-        <input id="profile-about-me-input" class="profile-data-input" type="text" v-model="user.about" placeholder="About me" />
-
-        <Button style="margin-top: 2dvh" text="Save Changes" :callback="saveChanges"></Button>
-      </div>
-
-      <UserPopup v-if="user" :user="user" id="profile-popup"></UserPopup>
-
-    </div>
-  </div>
-  <CropPopup
-    v-if="isCropPopupVisible"
-    :imageSrc="cropImageSrc"
-    :onCrop="handleCrop"
-    :onClose="closeCropPopup"
-  />
-</template>
-
-<script lang="ts" setup>
-import type { UserResponse } from '~/types/interfaces';
-
-let newPfpFile: File;
-const isCropPopupVisible = ref(false);
-const cropImageSrc = ref("")
-;
-const { fetchUser } = useAuth();
-
-const user: UserResponse | undefined = await fetchUser()
-if (!user) {
-  alert("could not fetch user info, aborting :(")
-}
-
-async function saveChanges() {
-  if (!user) return;
-  
-  const formData = new FormData()
-  
-  if (newPfpFile) {
-    formData.append("avatar", newPfpFile)
-  }
-  
-  const bytes = new TextEncoder().encode(JSON.stringify({
-    display_name: user.display_name,
-    username: user.username,
-    pronouns: user.pronouns,
-    about: user.about,
-  }));
-  formData.append('json', new Blob([bytes], { type: 'application/json' }));
-  
-  try {
-    await fetchWithApi('/me', {
-      method: 'PATCH',
-      body: formData
-    })
-
-    alert('success!!')
-  } catch (error: any) {
-    if (error?.response?.status !== 200) {
-      alert(`error ${error?.response?.status} met whilst trying to update profile info\n"${error?.response._data?.message}"`)
-    }
-  }
-};
-
-
-async function removeAvatar() {
-  alert("TBD")
-  // await fetchWithApi(`/auth/reset-password`);
-}
-
-async function changeAvatar() {
-  if (!user) return;
-
-  const input = document.createElement('input');
-  input.type = 'file';
-  input.accept = 'image/*';
-
-  input.addEventListener("change", (e: Event) => {
-    if (input.files?.length && input.files.length > 0) {
-      const file = input.files[0];
-      if (!file) return;
-
-      const reader = new FileReader();
-      reader.addEventListener("load", () => {
-        if (reader.result && typeof reader.result === 'string') {
-          cropImageSrc.value = reader.result;
-          isCropPopupVisible.value = true;
-        }
-      });
-      reader.readAsDataURL(file);
-    }
-  })
-
-  input.click()
-}
-
-
-function handleCrop(blob: Blob, url: string) {
-  if (!user) return;
-
-  user.avatar = url;
-  newPfpFile = new File([blob], 'avatar.png', { type: 'image/png' })
-  closeCropPopup()
-}
-
-function closeCropPopup() {
-  isCropPopupVisible.value = false
-}
-</script>
-
-<style scoped>
-.profile-container {
-  display: flex;
-}
-
-.user-data-fields {
-  min-width: 35dvw;
-  max-width: 35dvw;
-}
-
-.profile-data-input {
-  min-width: 30dvw;
-  margin: 0.07dvh;
-  padding: 0.1dvh 0.7dvw;
-  height: 2.5em;
-  font-size: 1em;
-  border-radius: 8px;
-  border: none;
-  color: var(--text-color);
-  background-color: var(--accent-color);
-}
-
-#profile-popup {
-  margin-left: 2dvw;
-}
-</style>

components/UserArea.vue

@@ -1,20 +0,0 @@
-<template>
-	<div id="user-panel">
-		HELLO!!
-	</div>
-</template>
-
-<script lang="ts" setup>
-import type { UserResponse } from '~/types/interfaces';
-
-const props = defineProps<{
-	user: UserResponse,
-}>();
-
-</script>
-
-<style scoped>
-#user-panel {
-	width: 100%;
-}
-</style>

components/UserPopup.vue

@@ -1,9 +1,7 @@
 <template>
   <div id="profile-popup">
     <img v-if="props.user.avatar" id="avatar" :src="props.user.avatar" alt="profile avatar">
-    <Icon v-else id="avatar" name="lucide:user" />
+    <div id="cover-colour"></div>
-
-    <div id="cover-color"></div>
     <div id="main-body">
       <p id="display-name">
         <strong>{{ props.user.display_name }}</strong>
@@ -40,17 +38,17 @@ const props = defineProps<{
   flex-direction: column;
 }
 
-#cover-color {
+#cover-colour {
   border-radius: 12px 12px 0 0;
   min-height: 60px;
-  background-color: var(--primary-color);
+  background-color: #442505;
 }
 
 #main-body {
   border-radius: 0 0 12px 12px;
   padding: 12px;
   min-height: 280px;
-  background-color: var(--accent-color);
+  background-color: #4b3018;
   overflow-wrap: break-word;
   hyphens: manual;
 }
@@ -59,14 +57,12 @@ const props = defineProps<{
   width: 96px;
   height: 96px;
   border: 5px solid #4b3018;
-  background-color: var(--secondary-color);
   border-radius: 100%;
   position: absolute;
   left: 16px;
   top: 16px;
 }
 
-
 #display-name {
   margin-top: 60px;
   margin-bottom: 0;
@@ -79,7 +75,7 @@ const props = defineProps<{
 }
 
 #about-me {
-  background-color: var(--secondary-color);
+  background-color: #34200f;
   border-radius: 12px;
 
   margin-top: 32px;

composables/auth.ts

@@ -37,19 +37,13 @@ export const useAuth = () => {
     //await fetchUser();
   }
 
-  async function logout() {
+  async function logout(password: string) {
+    console.log("password:", password);
     console.log("access:", accessToken.value);
-
-    await fetchWithApi("/auth/logout", { method: "GET", credentials: "include" });
-    clearAuth();
-
-	return await navigateTo("/login");
-  }
-
-  async function revoke(password: string) {
     const hashedPass = await hashPassword(password);
+    console.log("hashed");
 
-    await fetchWithApi("/auth/revoke", {
+    const res = await fetchWithApi("/auth/revoke", {
       method: "POST",
       body:
       {
@@ -60,6 +54,10 @@ export const useAuth = () => {
     clearAuth();
   }
 
+  async function revoke() {
+    clearAuth();
+  }
+
   async function refresh() {
     console.log("refreshing");
     const res = await fetchWithApi("/auth/refresh", {

layouts/client.vue

@@ -8,17 +8,13 @@
 			</div>
 				<div id="left-column">
 			<NuxtLink id="home-button" href="/">
-				<img class="sidebar-icon" src="/public/icon.svg"/>
+				<Icon name="lucide:house" class="white" size="2rem" />
 			</NuxtLink>
 			<div id="servers-list">
 				<NuxtLink v-for="guild of guilds" :href="`/servers/${guild.uuid}`">
-					<img v-if="guild.icon" class="sidebar-icon" :src="guild.icon" :alt="guild.name"/>
+					<Icon name="lucide:server" class="white" size="2rem" />
-					<Icon v-else name="lucide:server" class="sidebar-icon white" :alt="guild.name" />
 				</NuxtLink>
 			</div>
-			<NuxtLink id="settings-menu" href="/settings">
-				<Icon name="lucide:settings" class="sidebar-icon white" alt="Settings menu" />
-			</NuxtLink>
 		</div>
 		<slot />
 	</div>
@@ -30,6 +26,48 @@ import type { GuildResponse } from '~/types/interfaces';
 const loading = useState("loading", () => false);
 
 const guilds: GuildResponse[] | undefined = await fetchWithApi("/me/guilds");
+
+//const servers = await fetchWithApi("/servers") as { uuid: string, name: string, description: string }[];
+//console.log("servers:", servers);
+const members = [
+	{
+		id: "3287484395",
+		displayName: "SauceyRed"
+	},
+	{
+		id: "3287484395",
+		displayName: "SauceyRed"
+	},
+	{
+		id: "3287484395",
+		displayName: "SauceyRed"
+	},
+	{
+		id: "3287484395",
+		displayName: "SauceyRed"
+	},
+	{
+		id: "3287484395",
+		displayName: "SauceyRed"
+	},
+	{
+		id: "3287484395",
+		displayName: "SauceyRed"
+	},
+	{
+		id: "3287484395",
+		displayName: "SauceyRed"
+	},
+	{
+		id: "3287484395",
+		displayName: "SauceyRed"
+	},
+	{
+		id: "3287484395",
+		displayName: "SauceyRed"
+	}
+];
+
 </script>
 
 <style>
@@ -58,13 +96,12 @@ const guilds: GuildResponse[] | undefined = await fetchWithApi("/me/guilds");
 	display: flex;
 	justify-content: space-evenly;
 	align-items: center;
-	background-color: var(--topbar-background-color);
 	padding-left: 5dvw;
 	padding-right: 5dvw;
 }
 
 #client-root>div:nth-child(-n+4) {
-	border-bottom: 1px solid var(--padding-color);
+	border-bottom: 1px solid rgb(70, 70, 70);
 }
 
 #__nuxt {
@@ -81,11 +118,6 @@ const guilds: GuildResponse[] | undefined = await fetchWithApi("/me/guilds");
 	padding-right: .5dvw;
 }
 
-.sidebar-icon {
-	width: 3rem;
-	height: 3rem;
-}
-
 #current-info {
 	grid-column: 2;
 	grid-row: 1;
@@ -97,27 +129,21 @@ const guilds: GuildResponse[] | undefined = await fetchWithApi("/me/guilds");
 	gap: 2dvh;
 	padding-left: .5dvw;
 	padding-right: .5dvw;
-	border-right: 1px solid var(--padding-color);
+	border-right: 1px solid rgb(70, 70, 70);
-	background-color: var(--sidebar-background-color);
 	padding-top: 1.5dvh;
 }
 
 #middle-left-column {
 	padding-left: 1dvw;
 	padding-right: 1dvw;
-	border-right: 1px solid var(--padding-color);
+	border-right: 1px solid rgb(70, 70, 70);
 }
 
 #home-button {
-	border-bottom: 1px solid var(--padding-color);
+	border-bottom: 1px solid rgb(70, 70, 70);
 	padding-bottom: 1dvh;
 }
 
-#settings-menu {
-	position: absolute;
-	bottom: .25dvh
-}
-
 #servers-list {
 	display: flex;
 	flex-direction: column;

nuxt.config.ts

@@ -27,12 +27,7 @@ export default defineNuxtConfig({
   runtimeConfig: {
     public: {
       apiVersion: 1,
-      messageGroupingMaxDifference: 300000,
+      messageGroupingMaxDifference: 300000
-      buildTimeString: new Date().toISOString(),
-      gitHash: process.env.GIT_SHORT_REV || "N/A",
-      defaultThemes: [
-        "light", "ash", "dark"
-      ]
     }
   },
   /* nitro: {

package.json

@@ -14,7 +14,6 @@
     "@nuxt/icon": "1.13.0",
     "@nuxt/image": "1.10.0",
     "@pinia/nuxt": "0.11.0",
-    "cropperjs": "^2.0.0",
     "dompurify": "^3.2.6",
     "marked": "^15.0.12",
     "nuxt": "^3.17.0",

pages/servers/[serverId]/channels/[channelId].vue

@@ -26,7 +26,11 @@
 		<MessageArea :channel-url="channelUrlPath" />
 		<div id="members-container">
 			<div id="members-list">
-				<MemberEntry v-for="member of members" :member="member" tabindex="0"/>
+				<div class="member-item" v-for="member of members" tabindex="0">
+					<img v-if="member.user.avatar" class="member-avatar" :src="member.user.avatar" :alt="member.user.display_name ?? member.user.username" />
+					<Icon v-else class="member-avatar" name="lucide:user" />
+					<span class="member-display-name">{{ member.user.display_name ?? member.user.username }}</span>
+				</div>
 			</div>
 		</div>
 	</NuxtLayout>
@@ -46,8 +50,7 @@ const channel = ref<ChannelResponse | undefined>();
 
 const showInvitePopup = ref(false);
 
-import UserPopup from "~/components/UserPopup.vue";
+import type { ChannelResponse, GuildResponse, MessageResponse } from "~/types/interfaces";
-import type { ChannelResponse, GuildMemberResponse, GuildResponse, MessageResponse } from "~/types/interfaces";
 
 //const servers = await fetchWithApi("/servers") as { uuid: string, name: string, description: string }[];
 //console.log("channelid: servers:", servers);
@@ -75,9 +78,6 @@ function toggleInvitePopup(e: Event) {
 	e.preventDefault();
 	showInvitePopup.value = !showInvitePopup.value;
 }
-
-function handleMemberClick(member: GuildMemberResponse) {
-}
 </script>
 
 <style>
@@ -85,22 +85,20 @@ function handleMemberClick(member: GuildMemberResponse) {
 #middle-left-column {
 	padding-left: 1dvw;
 	padding-right: 1dvw;
-	border-right: 1px solid var(--padding-color);
+	border-right: 1px solid rgb(70, 70, 70);
-	background-color: var(--sidebar-background-color);
 }
 
 #members-container {
 	padding-top: 1dvh;
 	padding-left: 1dvw;
 	padding-right: 1dvw;
-	border-left: 1px solid var(--padding-color);
+	border-left: 1px solid rgb(70, 70, 70);
 }
 
 #members-list {
 	display: flex;
 	flex-direction: column;
 	overflow-y: scroll;
-	max-height: 92dvh;
 	padding-left: 1dvw;
 	padding-right: 1dvw;
 	margin-top: 1dvh;
@@ -114,7 +112,7 @@ function handleMemberClick(member: GuildMemberResponse) {
 	gap: 1em;
 	align-items: center;
 	text-align: left;
-	cursor: pointer;
+	
 }
 
 #channels-list {

pages/settings.vue

@@ -2,8 +2,8 @@
   <div id="settings-page-container">
     <div id="settings-page">
       <div id="sidebar">
+        <h4>(Search bar here)</h4>
         <ul>
-          <!-- categories and dynamic settings pages -->
           <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(page)"
@@ -13,22 +13,7 @@
             <span class="spacer"></span>
           </div>
 
-          <p>
           <Button text="Log Out" :callback=logout variant="scary"></Button>
-          </p>
-          <span class="spacer"></span>
-
-          <p id="links-and-socials">
-            <NuxtLink href="https://git.gorb.app/gorb/frontend" title="Source"><Icon name="lucide:git-branch-plus" /></NuxtLink>
-            <NuxtLink href="https://docs.gorb.app" title="Backend Documentation"><Icon name="lucide:book-open-text" /></NuxtLink>
-          </p>
-          
-          <p style="font-size: .8em; color: var(--secondary-text-color)">
-            Version Hash: {{ appConfig.public.gitHash }}
-            <br>
-            Build Time: {{ appConfig.public.buildTimeString }}
-          </p>
-
         </ul>
       </div>
       <div id="sub-page">
@@ -40,8 +25,9 @@
 
 
 <script lang="ts" setup>
+import Button from '~/components/Button.vue';
+
 const { logout } = useAuth()
-const appConfig = useRuntimeConfig()
 
 interface Page {
   displayName: string;
@@ -53,7 +39,6 @@ interface Category {
   pages: Page[];
 }
 
-import Profile from '~/components/Settings/UserSettings/Profile.vue';
 import Account from '~/components/Settings/UserSettings/Account.vue';
 import Privacy from '~/components/Settings/UserSettings/Privacy.vue';
 import Devices from '~/components/Settings/UserSettings/Devices.vue';
@@ -68,8 +53,7 @@ const settingsCategories = {
   userSettings: {
     displayName: "User Settings",
     pages: [
-      { displayName: "Profile", pageData: Profile },
+      { displayName: "My Account", pageData: Account },
-      { displayName: "Account", pageData: Account },
       { displayName: "Privacy", pageData: Privacy },
       { displayName: "Devices", pageData: Devices },
       { displayName: "Connections", pageData: Connections },
@@ -96,16 +80,6 @@ function selectCategory(page: Page) {
   selectedPage.value = page.displayName;
 };
 
-// redirects to you privacy if you go to settings#privacy
-onMounted(() => {
-  const hash = window.location.hash.substring(1).toLowerCase();
-  const foundPage = categories.flatMap(category => category.pages).find(page => page.displayName.toLowerCase() === hash);
-
-  if (foundPage) {
-    currentPage.value = foundPage;
-    selectedPage.value = foundPage.displayName;
-  }
-});
 </script>
 
 <style scoped>
@@ -124,10 +98,10 @@ onMounted(() => {
 #sidebar {
   min-width: 25dvw;
   max-width: 25dvw;
-  background-color: var(--sidebar-background-color);
+  background-color: #2f3136;
-  color: var(--text-color);
+  color: white;
   padding: 1dvh 1dvw;
-  margin-left: 0;
+  margin-left: auto;
 
   overflow-y: auto;
   height: 100vh;
@@ -152,16 +126,12 @@ onMounted(() => {
   transition: background-color 0.3s;
 }
 
-#sidebar p {
-  margin: 2dvh 0.8dvw;
-}
-
 .sidebar-focus {
-  background-color: var(--sidebar-highlighted-background-color);
+  background-color: #383B41;
 }
 
 #sidebar li:hover {
-  background-color: var(--sidebar-highlighted-background-color);
+  background-color: #40444b;
 }
 
 #sub-page {
@@ -175,22 +145,15 @@ onMounted(() => {
   height: 100vh;
 }
 
-#links-and-socials * {
-  margin-right: 0.2em;
-}
-
 .spacer {
   height: 0.2dvh;
   display: block;
   margin: 0.8dvh 1dvw;
-  background-color: var(--padding-color);
+  background-color: #2c2e32;
 }
 
 /* applies to child pages too */
-:deep(.subtitle) {
+:deep(h5) {
-  display: block;
+  color: red;
-  font-size: 0.8em;
-  font-weight: 800;
-  margin: 4dvh 0 0.5dvh 0.25dvw;
 }
 </style>

pnpm-lock.yaml

@@ -20,9 +20,6 @@ importers:
       '@pinia/nuxt':
         specifier: 0.11.0
         version: 0.11.0(magicast@0.3.5)(pinia@3.0.2(typescript@5.8.3)(vue@3.5.13(typescript@5.8.3)))
-      cropperjs:
-        specifier: ^2.0.0
-        version: 2.0.0
       dompurify:
         specifier: ^3.2.6
         version: 3.2.6
@@ -208,39 +205,6 @@ packages:
     resolution: {integrity: sha512-Ir+AOibqzrIsL6ajt3Rz3LskB7OiMVHqltZmspbW/TJuTVuyOMirVqAkjfY6JISiLHgyNqicAC8AyHHGzNd/dA==}
     engines: {node: '>=0.1.90'}
 
-  '@cropper/element-canvas@2.0.0':
-    resolution: {integrity: sha512-GPtGJgSm92crJhhhwUsaMw3rz2KfJWWSz7kRAlufFEV/EHTP5+6r6/Z1BCGRna830i+Avqbm435XLOtA7PVJwA==}
-
-  '@cropper/element-crosshair@2.0.0':
-    resolution: {integrity: sha512-KfPfyrdeFvUC31Ws7ATtcalWWSaMtrC6bMoCipZhqbUOE7wZoL4ecDSL6BUOZxPa74awZUqfzirCDjHvheBfyw==}
-
-  '@cropper/element-grid@2.0.0':
-    resolution: {integrity: sha512-i78SQ0IJTLFveKX6P7svkfMYVdgHrQ8ZmmEw8keFy9n1ZVbK+SK0UHK5FNMRNI/gtVhKJOGEnK/zeyjUdj4Iyw==}
-
-  '@cropper/element-handle@2.0.0':
-    resolution: {integrity: sha512-ZJvW+0MkK9E8xYymGdoruaQn2kwjSHFpNSWinjyq6csuVQiCPxlX5ovAEDldmZ9MWePPtWEi3vLKQOo2Yb0T8g==}
-
-  '@cropper/element-image@2.0.0':
-    resolution: {integrity: sha512-9BxiTS/aHRmrjopaFQb9mQQXmx4ruhYHGkDZMVz24AXpMFjUY6OpqrWse/WjzD9tfhMFvEdu17b3VAekcAgpeg==}
-
-  '@cropper/element-selection@2.0.0':
-    resolution: {integrity: sha512-ensNnbIfJsJ8bhbJTH/RXtk2URFvTOO4TvfRk461n2FPEC588D7rwBmUJxQg74IiTi4y1JbCI+6j+4LyzYBLCQ==}
-
-  '@cropper/element-shade@2.0.0':
-    resolution: {integrity: sha512-jv/2bbNZnhU4W+T4G0c8ADocLIZvQFTXgCf2RFDNhI5UVxurzWBnDdb8Mx8LnVplnkTqO+xUmHZYve0CwgWo+Q==}
-
-  '@cropper/element-viewer@2.0.0':
-    resolution: {integrity: sha512-zY+3VRN5TvpM8twlphYtXw0tzJL2VgzeK7ufhL1BixVqOdRxwP13TprYIhqwGt9EW/SyJZUiaIu396T89kRX8A==}
-
-  '@cropper/element@2.0.0':
-    resolution: {integrity: sha512-lsthn0nQq73GExUE7Mg/ss6Q3RXADGDv055hxoLFwvl/wGHgy6ZkYlfLZ/VmgBHC6jDK5IgPBFnqrPqlXWSGBA==}
-
-  '@cropper/elements@2.0.0':
-    resolution: {integrity: sha512-PQkPo1nUjxLFUQuHYu+6atfHxpX9B41Xribao6wpvmvmNIFML6LQdNqqWYb6LyM7ujsu71CZdBiMT5oetjJVoQ==}
-
-  '@cropper/utils@2.0.0':
-    resolution: {integrity: sha512-cprLYr+7kK3faGgoOsTW9gIn5sefDr2KwOmgyjzIXk+8PLpW8FgFKEg5FoWfRD5zMAmkCBuX6rGKDK3VdUEGrg==}
-
   '@dabh/diagnostics@2.0.3':
     resolution: {integrity: sha512-hrlQOIi7hAfzsMqlGSFyVucrx38O+j6wiGOf//H2ecvIEqYN4ADBSS2iLMh5UFyDunCNniUIPk/q3riFv45xRA==}
 
@@ -1936,9 +1900,6 @@ packages:
     resolution: {integrity: sha512-onMB0OkDjkXunhdW9htFjEhqrD54+M94i6ackoUkjHKbRnXdyEyKRelp4nJ1kAz32+s27jP1FsebpJCVl0BsvA==}
     engines: {node: '>=18.0'}
 
-  cropperjs@2.0.0:
-    resolution: {integrity: sha512-TO2j0Qre01kPHbow4FuTrbdEB4jTmGRySxW49jyEIqlJZuEBfrvCTT0vC3eRB2WBXudDfKi1Onako6DKWKxeAQ==}
-
   cross-spawn@7.0.6:
     resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
     engines: {node: '>= 8'}
@@ -5004,72 +4965,6 @@ snapshots:
 
   '@colors/colors@1.6.0': {}
 
-  '@cropper/element-canvas@2.0.0':
-    dependencies:
-      '@cropper/element': 2.0.0
-      '@cropper/utils': 2.0.0
-
-  '@cropper/element-crosshair@2.0.0':
-    dependencies:
-      '@cropper/element': 2.0.0
-      '@cropper/utils': 2.0.0
-
-  '@cropper/element-grid@2.0.0':
-    dependencies:
-      '@cropper/element': 2.0.0
-      '@cropper/utils': 2.0.0
-
-  '@cropper/element-handle@2.0.0':
-    dependencies:
-      '@cropper/element': 2.0.0
-      '@cropper/utils': 2.0.0
-
-  '@cropper/element-image@2.0.0':
-    dependencies:
-      '@cropper/element': 2.0.0
-      '@cropper/element-canvas': 2.0.0
-      '@cropper/utils': 2.0.0
-
-  '@cropper/element-selection@2.0.0':
-    dependencies:
-      '@cropper/element': 2.0.0
-      '@cropper/element-canvas': 2.0.0
-      '@cropper/element-image': 2.0.0
-      '@cropper/utils': 2.0.0
-
-  '@cropper/element-shade@2.0.0':
-    dependencies:
-      '@cropper/element': 2.0.0
-      '@cropper/element-canvas': 2.0.0
-      '@cropper/element-selection': 2.0.0
-      '@cropper/utils': 2.0.0
-
-  '@cropper/element-viewer@2.0.0':
-    dependencies:
-      '@cropper/element': 2.0.0
-      '@cropper/element-canvas': 2.0.0
-      '@cropper/element-image': 2.0.0
-      '@cropper/element-selection': 2.0.0
-      '@cropper/utils': 2.0.0
-
-  '@cropper/element@2.0.0':
-    dependencies:
-      '@cropper/utils': 2.0.0
-
-  '@cropper/elements@2.0.0':
-    dependencies:
-      '@cropper/element': 2.0.0
-      '@cropper/element-canvas': 2.0.0
-      '@cropper/element-crosshair': 2.0.0
-      '@cropper/element-grid': 2.0.0
-      '@cropper/element-handle': 2.0.0
-      '@cropper/element-image': 2.0.0
-      '@cropper/element-selection': 2.0.0
-      '@cropper/element-shade': 2.0.0
-      '@cropper/element-viewer': 2.0.0
-
-  '@cropper/utils@2.0.0': {}
-
   '@dabh/diagnostics@2.0.3':
     dependencies:
       colorspace: 1.1.4
@@ -7000,11 +6895,6 @@ snapshots:
 
   croner@9.0.0: {}
 
-  cropperjs@2.0.0:
-    dependencies:
-      '@cropper/elements': 2.0.0
-      '@cropper/utils': 2.0.0
-
   cross-spawn@7.0.6:
     dependencies:
       path-key: 3.1.1

public/icon.svg

@@ -1,121 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   width="512"
-   height="512"
-   viewBox="0 0 512 512"
-   version="1.1"
-   id="svg1"
-   inkscape:version="1.4.2 (ebf0e940d0, 2025-05-08)"
-   sodipodi:docname="drawing.svg"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:svg="http://www.w3.org/2000/svg">
-  <sodipodi:namedview
-     id="namedview1"
-     pagecolor="#ffffff"
-     bordercolor="#000000"
-     borderopacity="0.25"
-     inkscape:showpageshadow="2"
-     inkscape:pageopacity="0.0"
-     inkscape:pagecheckerboard="0"
-     inkscape:deskcolor="#d1d1d1"
-     inkscape:document-units="px"
-     inkscape:zoom="0.35399828"
-     inkscape:cx="2.8248725"
-     inkscape:cy="731.64198"
-     inkscape:window-width="1440"
-     inkscape:window-height="863"
-     inkscape:window-x="0"
-     inkscape:window-y="0"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="layer1" />
-  <defs
-     id="defs1" />
-  <g
-     inkscape:label="Layer 1"
-     inkscape:groupmode="layer"
-     id="layer1"
-     transform="matrix(0.93746412,0,0,0.93746412,18.749279,18.749282)">
-    <g
-       id="g1543"
-       style="display:inline"
-       transform="matrix(3.7794744,0,0,3.7794744,-150.52528,-298.33565)">
-      <circle
-         style="fill:#000000;stroke-width:0.264583"
-         id="path60"
-         cx="106.78797"
-         cy="145.89536"
-         r="72.25267" />
-      <circle
-         style="fill:#f4741f;fill-opacity:1;stroke-width:0.257596"
-         id="path899"
-         cx="106.78797"
-         cy="145.89536"
-         r="65.485863" />
-    </g>
-    <g
-       id="g1460-1"
-       transform="matrix(4.1481001,0,0,4.1481002,45.149918,-354.52402)"
-       style="display:inline">
-      <circle
-         style="fill:#000000;fill-opacity:1;stroke-width:0.29496"
-         id="path1129-3"
-         cx="78.140816"
-         cy="136.65092"
-         r="17.372646" />
-      <circle
-         style="fill:#f4741f;fill-opacity:1;stroke-width:0.294225"
-         id="path1354-0"
-         cx="86.078323"
-         cy="136.65092"
-         r="11.576728" />
-    </g>
-    <g
-       id="g1460-1-3"
-       transform="matrix(4.1481001,0,0,4.1481002,-187.26754,-354.52402)"
-       style="display:inline">
-      <circle
-         style="fill:#000000;fill-opacity:1;stroke-width:0.29496"
-         id="path1129-3-4"
-         cx="78.140816"
-         cy="136.65092"
-         r="17.372646" />
-      <circle
-         style="fill:#f4741f;fill-opacity:1;stroke-width:0.294225"
-         id="path1354-0-6"
-         cx="86.078323"
-         cy="136.65092"
-         r="11.576728" />
-    </g>
-    <g
-       id="g3530"
-       transform="matrix(3.7794744,0,0,3.7794744,-150.52528,-294.3357)">
-      <path
-         style="fill:none;stroke:#000000;stroke-width:7;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-         d="m 106.78797,168.1205 c 0,0 -17.461156,15.02392 -28.153795,0.49121"
-         id="path1817" />
-      <path
-         style="fill:none;stroke:#000000;stroke-width:7;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-         d="m 106.78797,168.1205 c 0,0 17.46116,15.02392 28.15379,0.49121"
-         id="path1817-6" />
-      <path
-         style="fill:none;stroke:#000000;stroke-width:7;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-         d="m 106.78797,168.1205 -5.74494,-9.7603"
-         id="path2191"
-         sodipodi:nodetypes="cc" />
-      <path
-         style="fill:none;stroke:#000000;stroke-width:7;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-         d="m 106.78797,168.1205 5.74494,-9.7603"
-         id="path2191-6"
-         sodipodi:nodetypes="cc" />
-      <path
-         style="fill:none;stroke:#000000;stroke-width:7;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-         d="m 101.04303,158.3602 h 11.48988"
-         id="path2675"
-         sodipodi:nodetypes="cc" />
-    </g>
-  </g>
-</svg>

public/themes/ash.css

@@ -1,19 +0,0 @@
-:root {
-	--text-color: #f0e5e0;
-	--secondary-text-color: #e8e0db;
-
-	--chat-background-color: #2f2e2d;
-    --chat-highlighted-background-color: #3f3b38;
-	--sidebar-background-color: #3e3a37;
-	--sidebar-highlighted-background-color: #46423b;
-	--topbar-background-color: #3a3733;
-
-    --padding-color: #e0e0e0;
-    
-	--primary-color: #f07028;
-	--primary-highlighted-color: #f28f4b;
-	--secondary-color: #683820;
-	--secondary-highlighted-color: #885830;
-	--accent-color: #a04b24;
-	--accent-highlighted-color: #b86038;
-}

public/themes/ash.json

@@ -1,6 +0,0 @@
-{
-	"displayName": "Ash",
-	"previewGradient": "45deg, #2f2e2d, #46423b",
-	"complementaryColor": "white",
-	"themeUrl": "ash.css"
-}

public/themes/dark.css

@@ -1,19 +0,0 @@
-:root {
-	--text-color: #f7eee8;
-	--secondary-text-color: #f0e8e4;
-
-	--chat-background-color: #1f1e1d;
-    --chat-highlighted-background-color: #2f2b28;
-	--sidebar-background-color: #2e2a27;
-	--sidebar-highlighted-background-color: #36322b;
-	--topbar-background-color: #2a2723;
-
-    --padding-color: #484848;
-    
-	--primary-color: #f4741f;
-	--primary-highlighted-color: #f68a3f;
-	--secondary-color: #7c4018;
-	--secondary-highlighted-color: #8f5b2c;
-	--accent-color: #b35719;
-	--accent-highlighted-color: #c76a2e;
-}

public/themes/dark.json

@@ -1,6 +0,0 @@
-{
-	"displayName": "Dark",
-	"previewGradient": "45deg, #1f1e1d, #36322b",
-	"complementaryColor": "white",
-	"themeUrl": "dark.css"
-}

public/themes/light.css

@@ -1,19 +0,0 @@
-:root {
-	--text-color: #170f08;
-	--secondary-text-color: #2f2b28;
-
-    --chat-background-color: #f0ebe8;
-    --chat-highlighted-background-color: #e8e4e0;
-	--sidebar-background-color: #dbd8d4;
-	--sidebar-highlighted-background-color: #d4d0ca;
-	--topbar-background-color: #dfdbd6;
-
-    --padding-color: #484848;
-    
-    --primary-color: #df5f0b;
-    --primary-highlighted-color: #ef6812;
-    --secondary-color: #e8ac84;
-    --secondary-highlighted-color: #f8b68a;
-    --accent-color: #e68b4e;
-    --accent-highlighted-color: #f69254;
-}

public/themes/light.json

@@ -1,6 +0,0 @@
-{
-	"displayName": "Light",
-	"previewGradient": "45deg, #f0ebe8, #d4d0ca",
-	"complementaryColor": "black",
-	"themeUrl": "light.css"
-}

types/interfaces.ts

@@ -62,7 +62,7 @@ export interface UserResponse {
 	about: string | null,
 	email?: string,
 	email_verified?: boolean
-}
+  }
 
 export interface StatsResponse {
 	accounts: number,