Refactor avatar components across the application to use the new UserAvatar component, replacing instances of the Avatar component for improved consistency and maintainability.

apps/dashboard/src/lib/features/course/components/exercise/mark-exercise-modal.svelte

@@ -14,6 +14,7 @@
   import * as Dialog from '@cio/ui/base/dialog';
   import { TextareaField } from '@cio/ui/custom/textarea-field';
   import { Button } from '@cio/ui/base/button';
+  import { UserAvatar } from '@cio/ui/custom/user-avatar';
 
   // import { useCompletion } from 'ai/svelte';
   // import { QUESTION_TYPE } from '$features/ui/question/constants';
@@ -330,10 +331,10 @@
             </p>
             {#if data.student}
               <div class="flex flex-row items-center justify-center rounded-md bg-gray-100 p-[6px] dark:bg-neutral-700">
-                <img
-                  alt={$t('course.navItem.submissions.grading_modal.student_avatar')}
-                  class="flex h-5 w-5 rounded-full"
+                <UserAvatar
                   src={data.student.avatarUrl}
+                  alt={$t('course.navItem.submissions.grading_modal.student_avatar')}
+                  class="h-5 w-5"
                 />
                 <p class="ml-2 line-clamp-1 text-sm font-semibold dark:text-white">
                   {data.student.fullname}

apps/dashboard/src/lib/features/course/components/exercise/submissions/individual.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { Spinner } from '@cio/ui/base/spinner';
   import { ExerciseQuestion } from '@cio/ui';
+  import { UserAvatar } from '@cio/ui/custom/user-avatar';
 
   import { submissions } from './store';
   import { questionnaire } from '../store';
@@ -17,9 +18,6 @@
 
   let { isLoading = $bindable(false) }: Props = $props();
 
-  const defaultImg =
-    'https://images.unsplash.com/photo-1599566150163-29194dcaad36?auto=format&fit=crop&q=60&w=800&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8YXZhdGFyc3xlbnwwfHwwfHx8Mg%3D%3D';
-
   let studentSelected = $state(0);
   const questionLabels = $derived(getExerciseQuestionLabels());
 
@@ -57,10 +55,10 @@
             studentSelected == i ? 'border-primary-700 border-[3px]' : ''
           }`}
         >
-          <img
-            src={student.groupmember?.profile.avatarUrl ? student.groupmember.profile.avatarUrl : defaultImg}
+          <UserAvatar
+            src={student.groupmember?.profile.avatarUrl}
             alt={$t('course.navItem.lessons.exercises.all_exercises.analytics.individual.student_avatar')}
-            class="m-1 max-h-10 w-10 rounded-full bg-white"
+            class="m-1 size-10"
           />
         </div>
         <p class="line-clamp-2 w-20 leading-4 whitespace-pre-wrap">