replace some el-button

src/views/Tools/dialogs/GroupCalendarDialog.vue

@@ -9,13 +9,13 @@
         <template #header>
             <div class="dialog-title-container">
                 <span>{{ t('dialog.group_calendar.header') }}</span>
-                <el-button @click="toggleViewMode" type="primary" size="small" class="view-toggle-btn">
+                <Button size="sm" variant="outline" @click="toggleViewMode" class="view-toggle-btn">
                     {{
                         viewMode === 'timeline'
                             ? t('dialog.group_calendar.list_view')
                             : t('dialog.group_calendar.calendar_view')
                     }}
-                </el-button>
+                </Button>
             </div>
             <div class="featured-switch">
                 <span class="featured-switch-text">{{ t('dialog.group_calendar.featured_events') }}</span>
@@ -126,6 +126,7 @@
 <script setup>
     import { computed, onMounted, ref, watch } from 'vue';
     import { ArrowRight } from '@element-plus/icons-vue';
+    import { Button } from '@/components/ui/button';
     import { useI18n } from 'vue-i18n';
 
     import dayjs from 'dayjs';

src/views/Tools/dialogs/NoteExportDialog.vue

@@ -31,9 +31,9 @@
         </span>
 
         <template v-if="errors">
-            <el-button size="small" @click="errors = ''">
+            <Button size="sm" variant="outline" @click="errors = ''">
                 {{ t('dialog.note_export.clear_errors') }}
-            </el-button>
+            </Button>
             <h2 style="font-weight: bold; margin: 0">
                 {{ t('dialog.note_export.errors') }}
             </h2>
@@ -79,7 +79,7 @@
 
             <el-table-column :label="t('table.import.skip_export')" width="90" align="right">
                 <template #default="{ row }">
-                    <el-button text :icon="Close" size="small" @click="removeFromNoteExportTable(row)"></el-button>
+                    <Button size="sm" variant="ghost" @click="removeFromNoteExportTable(row)"></Button>
                 </template>
             </el-table-column>
         </DataTable>
@@ -87,8 +87,9 @@
 </template>
 
 <script setup>
-    import { Close, Loading } from '@element-plus/icons-vue';
     import { ref, watch } from 'vue';
+    import { Button } from '@/components/ui/button';
+    import { Loading } from '@element-plus/icons-vue';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
 

src/views/Tools/dialogs/ScreenshotMetadataDialog.vue

@@ -16,37 +16,40 @@
             }}</span>
             <br />
             <br />
-            <el-button size="small" :icon="FolderOpened" @click="getAndDisplayScreenshotFromFile">{{
+            <Button size="sm" variant="outline" class="mr-2" @click="getAndDisplayScreenshotFromFile">{{
                 t('dialog.screenshot_metadata.browse')
-            }}</el-button>
-            <el-button size="small" :icon="Picture" @click="getAndDisplayLastScreenshot">{{
+            }}</Button>
+            <Button size="sm" variant="outline" class="mr-2" @click="getAndDisplayLastScreenshot">{{
                 t('dialog.screenshot_metadata.last_screenshot')
-            }}</el-button>
-            <el-button
-                size="small"
-                :icon="CopyDocument"
+            }}</Button>
+            <Button
+                size="sm"
+                variant="outline"
+                class="mr-2"
                 @click="copyImageToClipboard(screenshotMetadataDialog.metadata.filePath)"
-                >{{ t('dialog.screenshot_metadata.copy_image') }}</el-button
+                >{{ t('dialog.screenshot_metadata.copy_image') }}</Button
             >
-            <el-button
-                size="small"
-                :icon="Folder"
+            <Button
+                size="sm"
+                variant="outline"
+                class="mr-2"
                 @click="openImageFolder(screenshotMetadataDialog.metadata.filePath)"
-                >{{ t('dialog.screenshot_metadata.open_folder') }}</el-button
+                >{{ t('dialog.screenshot_metadata.open_folder') }}</Button
             >
-            <el-button
+            <Button
+                size="sm"
+                variant="outline"
+                class="mr-2"
                 v-if="isLocalUserVrcPlusSupporter && screenshotMetadataDialog.metadata.filePath"
-                size="small"
-                :icon="Upload"
                 @click="uploadScreenshotToGallery"
-                >{{ t('dialog.screenshot_metadata.upload') }}</el-button
+                >{{ t('dialog.screenshot_metadata.upload') }}</Button
             >
-            <el-button
+            <Button
+                size="sm"
+                variant="outline"
                 v-if="screenshotMetadataDialog.metadata.filePath"
-                size="small"
-                :icon="Delete"
                 @click="deleteMetadata(screenshotMetadataDialog.metadata.filePath)"
-                >{{ t('dialog.screenshot_metadata.delete_metadata') }}</el-button
+                >{{ t('dialog.screenshot_metadata.delete_metadata') }}</Button
             >
             <br />
             <br />
@@ -157,9 +160,9 @@
 </template>
 
 <script setup>
-    import { CopyDocument, Delete, Folder, FolderOpened, Picture, Upload } from '@element-plus/icons-vue';
     import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
     import { reactive, ref, watch } from 'vue';
+    import { Button } from '@/components/ui/button';
     import { storeToRefs } from 'pinia';
     import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';