Implement Fluid Emerald app redesign

resources/js/components/ui/avatar/UserAvatar.vue

@@ -6,36 +6,30 @@ import {
     AvatarImage,
 } from "@/components/ui/avatar/index";
 import { usePage } from "@inertiajs/vue3";
-import { computed, PropType } from "vue";
-import { UserModel } from "@/types/models/user-model";
+import { computed } from "vue";
+import type { UserAvatarProps } from "@/types";
 
-const props = defineProps({
-    user: {
-        type: Object as PropType<UserModel>,
-    },
-    rounded: {
-        type: Boolean,
-        default: false,
-    },
-})
+const props = withDefaults(defineProps<UserAvatarProps>(), {
+    rounded: true,
+});
 
 const page = usePage();
 const auth = computed(() => page.props.auth);
 
-const user = computed(() => props.user ?? auth.value.user)
+const user = computed(() => props.user ?? auth.value.user);
 </script>
 
 <template>
-    <Avatar class="size-8 overflow-hidden" :class="rounded ? 'rounded-full' : 'rounded-lg'">
-        <AvatarImage
-            v-if="user.avatar"
-            :src="user.avatar"
-            :alt="user.name"
-        />
+    <Avatar
+        class="border-outline-variant bg-surface-container-high size-8 overflow-hidden border"
+        :class="rounded ? 'rounded-full' : 'rounded-lg'"
+    >
+        <AvatarImage v-if="user.avatar" :src="user.avatar" :alt="user.name" />
         <AvatarFallback
-            class="rounded-lg bg-neutral-200 font-semibold text-black dark:bg-neutral-700 dark:text-white"
+            class="bg-primary/12 text-on-primary-container text-xs font-bold dark:text-primary-fixed"
+            :class="rounded ? 'rounded-full' : 'rounded-lg'"
         >
-            {{ getInitials(auth.user?.name) }}
+            {{ getInitials(user.name) }}
         </AvatarFallback>
     </Avatar>
 </template>