replace el-button

src/components/dialogs/AvatarDialog/AvatarDialog.vue

@@ -338,16 +338,17 @@
                                 accept="image/*"
                                 style="display: none"
                                 @change="onFileChangeAvatarGallery" />
-                            <el-button
+                            <Button
                                 v-if="avatarDialog.ref.authorId === currentUser.id"
+                                variant="outline"
+                                size="sm"
                                 :disabled="avatarDialog.galleryLoading"
-                                size="small"
-                                :icon="Upload"
-                                :loading="avatarDialog.galleryLoading"
-                                style="margin-left: 5px"
-                                @click="displayAvatarGalleryUpload"
-                                >{{ t('dialog.screenshot_metadata.upload') }}</el-button
-                            >
+                                class="ml-1"
+                                @click="displayAvatarGalleryUpload">
+                                <Spinner v-if="avatarDialog.galleryLoading" />
+                                <Upload v-else />
+                                {{ t('dialog.screenshot_metadata.upload') }}
+                            </Button>
                             <el-progress
                                 v-if="avatarDialog.galleryLoading"
                                 :show-text="false"
@@ -544,6 +545,7 @@
     import { computed, defineAsyncComponent, nextTick, ref, watch } from 'vue';
     import { Button } from '@/components/ui/button';
     import { ElMessageBox } from 'element-plus';
+    import { Spinner } from '@/components/ui/spinner';
     import { storeToRefs } from 'pinia';
     import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';

src/components/dialogs/AvatarDialog/ChangeAvatarImageDialog.vue

@@ -22,15 +22,15 @@
                 style="margin-bottom: 12px" />
             <span>{{ t('dialog.change_content_image.description') }}</span>
             <br />
-            <el-button
-                type="default"
-                size="small"
-                :icon="Upload"
-                :loading="changeAvatarImageDialogLoading"
+            <Button
+                variant="outline"
+                size="icon-sm"
                 :disabled="changeAvatarImageDialogLoading"
                 @click="uploadAvatarImage">
+                <Spinner v-if="changeAvatarImageDialogLoading" />
+                <Upload v-else />
                 {{ t('dialog.change_content_image.upload') }}
-            </el-button>
+            </Button>
             <br />
             <div class="x-change-image-item">
                 <img :src="previousImageUrl" class="img-size" loading="lazy" />
@@ -40,6 +40,8 @@
 </template>
 
 <script setup>
+    import { Button } from '@/components/ui/button';
+    import { Spinner } from '@/components/ui/spinner';
     import { Upload } from '@element-plus/icons-vue';
     import { ref } from 'vue';
     import { storeToRefs } from 'pinia';