Updated discord user JSON to match output from API.

public/css/main.css

@@ -7,7 +7,6 @@
       "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
     --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
       "Courier New", monospace;
-    --color-gray-200: oklch(92.8% 0.006 264.531);
     --color-gray-300: oklch(87.2% 0.01 258.338);
     --color-black: #000;
     --color-white: #fff;
@@ -253,13 +252,6 @@
       margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
-  .space-y-4 {
-    :where(& > :not(:last-child)) {
-      --tw-space-y-reverse: 0;
-      margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
-      margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
-    }
-  }
   .space-x-4 {
     :where(& > :not(:last-child)) {
       --tw-space-x-reverse: 0;
@@ -287,9 +279,6 @@
   .bg-black {
     background-color: var(--color-black);
   }
-  .bg-gray-200 {
-    background-color: var(--color-gray-200);
-  }
   .bg-primary {
     background-color: var(--color-primary);
   }
@@ -305,18 +294,9 @@
   .p-4 {
     padding: calc(var(--spacing) * 4);
   }
-  .pt-4 {
-    padding-top: calc(var(--spacing) * 4);
-  }
-  .pb-4 {
-    padding-bottom: calc(var(--spacing) * 4);
-  }
   .text-center {
     text-align: center;
   }
-  .text-left {
-    text-align: left;
-  }
   .font-mono {
     font-family: var(--font-mono);
   }

src/components/UserInfo.vue

@@ -8,23 +8,23 @@ import { user_store } from '@/ts/user_info'
       <div class="md:min-w-fit md:min-h-fit md:max-w-fit md:max-h-fit max-w-32 max-h-32">
         <img
           class="fixed z-1 max-w-[96px] max-h-[96px] md:max-w-[128px] md:max-h-[128px]"
-          :src="user_store.Avatar_Decoration"
+          :src="user_store.avatar_decoration"
         />
         <img
           class="max-w-[96px] max-h-[96px] mask-clip-border rounded-full md:max-w-[128px] md:max-h-[128px] drop-shadow-accent drop-shadow-md border-8 border-accent"
-          :src="user_store.Avatar"
+          :src="user_store.avatar"
         />
       </div>
       <div class="w-full m-auto drop-shadow-md drop-shadow-accent text-accent">
         <p class="text-xl md:text-3xl">
-          {{ user_store.Global_Name }}
+          {{ user_store.global_name }}
         </p>
         <a
           class="ml-2 text-white text-md md:text-xl hover:text-gray-300"
-          :href="user_store.Id"
+          :href="user_store.id"
           target="_blank"
         >
-          @{{ user_store.Username }}
+          @{{ user_store.username }}
         </a>
       </div>
     </div>

src/ts/user_info.ts

@@ -1,11 +1,11 @@
 import { reactive } from 'vue'
 
 export const user_store = reactive({
-  Avatar_Decoration: '',
+  avatar_decoration: '',
-  Avatar: '',
+  avatar: '',
-  Id: '',
+  id: '',
-  Global_Name: '',
+  global_name: '',
-  Username: '',
+  username: '',
 })
 
 export function update_info() {
@@ -16,15 +16,17 @@ export function update_info() {
       res
         .json()
         .then((userjson) => {
-          user_store.Avatar_Decoration =
+          console.log(userjson)
+          user_store.avatar_decoration =
             'https://cdn.discordapp.com/avatar-decoration-presets/' +
-            userjson.Avatar_Decoration_Data.Asset +
+            userjson.avatar_decoration_data.asset +
             '.png'
-          user_store.Avatar =
+          console.log(user_store)
-            'https://cdn.discordapp.com/avatars/' + userjson.Id + '/' + userjson.Avatar + '.png'
+          user_store.avatar =
-          user_store.Id = 'https://discord.com/users/' + userjson.Id
+            'https://cdn.discordapp.com/avatars/' + userjson.id + '/' + userjson.avatar + '.png'
-          user_store.Global_Name = userjson.Global_Name
+          user_store.id = 'https://discord.com/users/' + userjson.id
-          user_store.Username = userjson.Username
+          user_store.global_name = userjson.global_name
+          user_store.username = userjson.username
         })
         .catch(() => {})
     })