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/RiskBandChip.vue

@@ -1,41 +1,37 @@
 <template>
-  <UBadge
-    :color="badgeColor"
-    :variant="variant"
-    :size="size"
-  >
+  <UBadge :color="badgeColor" :variant="variant" :size="size">
     {{ displayText }}
   </UBadge>
 </template>
 
 <script setup lang="ts">
-type RiskBand = 'Low' | 'Medium' | 'High'
+type RiskBand = "Low" | "Medium" | "High";
 
 interface Props {
-  risk: RiskBand
-  variant?: 'solid' | 'outline' | 'soft' | 'subtle'
-  size?: 'xs' | 'sm' | 'md' | 'lg'
+  risk: RiskBand;
+  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.risk) {
-    case 'Low':
-      return 'green'
-    case 'Medium':
-      return 'yellow'
-    case 'High':
-      return 'red'
+    case "Low":
+      return "green";
+    case "Medium":
+      return "yellow";
+    case "High":
+      return "red";
     default:
-      return 'gray'
+      return "neutral";
   }
-})
+});
 
 const displayText = computed(() => {
-  return `${props.risk} Risk`
-})
+  return `${props.risk} Risk`;
+});
 </script>