chore: Replace Thumbnail with Avatar (#12119)

app/javascript/dashboard/modules/contact/components/ContactDropdownItem.vue

@@ -1,38 +1,33 @@
-<script>
-import Thumbnail from '../../../components/widgets/Thumbnail.vue';
+<script setup>
+import Avatar from 'next/avatar/Avatar.vue';
 
-export default {
-  components: {
-    Thumbnail,
+defineProps({
+  name: {
+    type: String,
+    default: '',
   },
-  props: {
-    name: {
-      type: String,
-      default: '',
-    },
-    thumbnail: {
-      type: String,
-      default: '',
-    },
-    email: {
-      type: String,
-      default: '',
-    },
-    phoneNumber: {
-      type: String,
-      default: '',
-    },
-    identifier: {
-      type: [String, Number],
-      required: true,
-    },
+  thumbnail: {
+    type: String,
+    default: '',
   },
-};
+  email: {
+    type: String,
+    default: '',
+  },
+  phoneNumber: {
+    type: String,
+    default: '',
+  },
+  identifier: {
+    type: [String, Number],
+    required: true,
+  },
+});
 </script>
 
 <template>
   <div class="option-item--user">
-    <Thumbnail :src="thumbnail" size="28px" :username="name" />
+    <Avatar :src="thumbnail" :size="28" :name="name" rounded-full />
     <div class="option__user-data">
       <h5 class="option__title">
         {{ name }}

app/javascript/dashboard/modules/widget-preview/components/WidgetFooter.vue

@@ -2,7 +2,7 @@
 import { ref, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import ResizableTextArea from 'shared/components/ResizableTextArea.vue';
-import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
+import Avatar from 'next/avatar/Avatar.vue';
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
 
 const props = defineProps({
@@ -40,7 +40,7 @@ const getStatusText = computed(() => {
             {{ config.replyTime }}
           </div>
         </div>
-        <Thumbnail username="C" size="34px" />
+        <Avatar name="C" :size="34" rounded-full />
       </div>
       <button
         v-if="config.isDefaultScreen"