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

@@ -1,54 +1,54 @@
 <template>
-  <UBadge
-    :color="badgeColor"
-    :variant="variant"
-    :size="size"
-  >
+  <UBadge :color="badgeColor" :variant="variant" :size="size">
     {{ displayText }}
   </UBadge>
 </template>
 
 <script setup lang="ts">
-type PayRelationship = 'FullyPaid' | 'Hybrid' | 'Supplemental' | 'VolunteerOrDeferred'
+type PayRelationship =
+  | "FullyPaid"
+  | "Hybrid"
+  | "Supplemental"
+  | "VolunteerOrDeferred";
 
 interface Props {
-  relationship: PayRelationship
-  variant?: 'solid' | 'outline' | 'soft' | 'subtle'
-  size?: 'xs' | 'sm' | 'md' | 'lg'
+  relationship: PayRelationship;
+  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.relationship) {
-    case 'FullyPaid':
-      return 'green'
-    case 'Hybrid':
-      return 'blue'
-    case 'Supplemental':
-      return 'yellow'
-    case 'VolunteerOrDeferred':
-      return 'gray'
+    case "FullyPaid":
+      return "green";
+    case "Hybrid":
+      return "blue";
+    case "Supplemental":
+      return "yellow";
+    case "VolunteerOrDeferred":
+      return "neutral";
     default:
-      return 'gray'
+      return "neutral";
   }
-})
+});
 
 const displayText = computed(() => {
   switch (props.relationship) {
-    case 'FullyPaid':
-      return 'Fully Paid'
-    case 'Hybrid':
-      return 'Hybrid'
-    case 'Supplemental':
-      return 'Supplemental'
-    case 'VolunteerOrDeferred':
-      return 'Volunteer'
+    case "FullyPaid":
+      return "Fully Paid";
+    case "Hybrid":
+      return "Hybrid";
+    case "Supplemental":
+      return "Supplemental";
+    case "VolunteerOrDeferred":
+      return "Volunteer";
     default:
-      return 'Unknown'
+      return "Unknown";
   }
-})
+});
 </script>