refactor: update app.vue and various components to enhance UI consistency, replace color classes for improved accessibility, and refine layout for better user experience

components/RestrictionChip.vue

@@ -1,39 +1,35 @@
 <template>
-  <UBadge
-    :color="badgeColor"
-    :variant="variant"
-    :size="size"
-  >
+  <UBadge :color="badgeColor" :variant="variant" :size="size">
     {{ displayText }}
   </UBadge>
 </template>
 
 <script setup lang="ts">
-type Restriction = 'Restricted' | 'General'
+type Restriction = "Restricted" | "General";
 
 interface Props {
-  restriction: Restriction
-  variant?: 'solid' | 'outline' | 'soft' | 'subtle'
-  size?: 'xs' | 'sm' | 'md' | 'lg'
+  restriction: Restriction;
+  variant?: "solid" | "outline" | "soft" | "subtle";
+  size?: "xs" | "sm" | "md" | "lg";
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  variant: 'subtle',
-  size: 'sm'
-})
+  variant: "subtle",
+  size: "sm",
+});
 
 const badgeColor = computed(() => {
   switch (props.restriction) {
-    case 'Restricted':
-      return 'orange'
-    case 'General':
-      return 'green'
+    case "Restricted":
+      return "orange";
+    case "General":
+      return "green";
     default:
-      return 'gray'
+      return "neutral";
   }
-})
+});
 
 const displayText = computed(() => {
-  return props.restriction
-})
+  return props.restriction;
+});
 </script>