replace some el-button

src/views/Settings/components/Tabs/AdvancedTab.vue

@@ -106,18 +106,18 @@
                 :long-label="true"
                 @change="setAvatarRemoteDatabase(!avatarRemoteDatabase)" />
             <div class="options-container-item">
-                <el-button size="small" :icon="User" @click="showAvatarProviderDialog">{{
+                <Button size="sm" variant="outline" @click="showAvatarProviderDialog">{{
                     t('view.settings.advanced.advanced.remote_database.avatar_database_provider')
-                }}</el-button>
+                }}</Button>
             </div>
         </div>
         <template v-if="!isLinux">
             <div class="options-container">
                 <span class="header">{{ t('view.settings.advanced.advanced.app_launcher.header') }}</span>
                 <br />
-                <el-button size="small" :icon="Folder" style="margin-top: 5px" @click="openShortcutFolder()">{{
+                <Button size="sm" variant="outline" style="margin-top: 5px" @click="openShortcutFolder()">{{
                     t('view.settings.advanced.advanced.app_launcher.folder')
-                }}</el-button>
+                }}</Button>
                 <simple-switch
                     :label="t('view.settings.advanced.advanced.remote_database.enable')"
                     :value="enableAppLauncher"
@@ -145,9 +145,9 @@
                 :long-label="true"
                 @change="changeYouTubeApi('VRCX_youtubeAPI')" />
             <div class="options-container-item">
-                <el-button size="small" :icon="CaretRight" @click="showYouTubeApiDialog">{{
+                <Button size="sm" variant="outline" @click="showYouTubeApiDialog">{{
                     t('view.settings.advanced.advanced.youtube_api.youtube_api_key')
-                }}</el-button>
+                }}</Button>
             </div>
         </div>
         <div class="options-container">
@@ -159,9 +159,9 @@
                 :long-label="true"
                 @change="changeTranslationAPI('VRCX_translationAPI')" />
             <div class="options-container-item">
-                <el-button size="small" @click="showTranslationApiDialog"
+                <Button size="sm" variant="outline" @click="showTranslationApiDialog"
                     ><i class="ri-translate-2" style="margin-right: 5px"></i
-                    >{{ t('view.settings.advanced.advanced.translation_api.translation_api_key') }}</el-button
+                    >{{ t('view.settings.advanced.advanced.translation_api.translation_api_key') }}</Button
                 >
             </div>
         </div>
@@ -192,17 +192,18 @@
                 :long-label="true"
                 @change="setShowConfirmationOnSwitchAvatar" />
             <div class="options-container-item">
-                <el-button
-                    size="small"
-                    :icon="Paperclip"
+                <Button
+                    size="sm"
+                    variant="outline"
+                    class="mr-2"
                     @click="openExternalLink('https://github.com/vrcx-team/VRCX/wiki/Launch-parameters-&-VRCX.json')"
-                    >{{ t('view.settings.advanced.advanced.launch_commands.docs') }}</el-button
+                    >{{ t('view.settings.advanced.advanced.launch_commands.docs') }}</Button
                 >
-                <el-button
-                    size="small"
-                    :icon="Paperclip"
+                <Button
+                    size="sm"
+                    variant="outline"
                     @click="openExternalLink('https://github.com/Myrkie/open-in-vrcx')"
-                    >{{ t('view.settings.advanced.advanced.launch_commands.website_userscript') }}</el-button
+                    >{{ t('view.settings.advanced.advanced.launch_commands.website_userscript') }}</Button
                 >
             </div>
         </div>
@@ -210,15 +211,15 @@
             <span class="header">{{ t('view.settings.advanced.advanced.cache_debug.header') }}</span>
             <br />
             <div class="options-container-item">
-                <el-button size="small" :icon="DeleteFilled" @click="clearVRCXCache">{{
+                <Button size="sm" variant="outline" class="mr-2" @click="clearVRCXCache">{{
                     t('view.settings.advanced.advanced.cache_debug.clear_cache')
-                }}</el-button>
-                <el-button size="small" :icon="Timer" @click="promptAutoClearVRCXCacheFrequency">{{
+                }}</Button>
+                <Button size="sm" variant="outline" class="mr-2" @click="promptAutoClearVRCXCacheFrequency">{{
                     t('view.settings.advanced.advanced.cache_debug.auto_clear_cache')
-                }}</el-button>
-                <el-button size="small" :icon="Refresh" @click="refreshCacheSize">{{
+                }}</Button>
+                <Button size="sm" variant="outline" @click="refreshCacheSize">{{
                     t('view.settings.advanced.advanced.cache_debug.refresh_cache')
-                }}</el-button>
+                }}</Button>
             </div>
 
             <simple-switch
@@ -263,17 +264,17 @@
                 </span>
             </div>
             <div class="options-container-item">
-                <el-button size="small" :icon="Tickets" @click="showConsole">{{
+                <Button size="sm" variant="outline" @click="showConsole">{{
                     t('view.settings.advanced.advanced.cache_debug.show_console')
-                }}</el-button>
+                }}</Button>
             </div>
         </div>
         <div class="options-container">
             <span class="sub-header">{{ t('view.settings.advanced.advanced.sqlite_table_size.header') }}</span>
             <div class="options-container-item">
-                <el-button size="small" :icon="Refresh" @click="getSqliteTableSizes">{{
+                <Button size="sm" variant="outline" @click="getSqliteTableSizes">{{
                     t('view.settings.advanced.advanced.sqlite_table_size.refresh')
-                }}</el-button>
+                }}</Button>
             </div>
             <div class="options-container-item">
                 <span class="name">
@@ -353,22 +354,14 @@
             <div class="header-bar">
                 <span class="header">{{ t('view.profile.config_json') }}</span>
                 <TooltipWrapper side="top" :content="t('view.profile.refresh_tooltip')">
-                    <el-button
-                        type="default"
-                        size="small"
-                        :icon="Refresh"
-                        circle
-                        style="margin-left: 5px"
-                        @click="refreshConfigTreeData()"></el-button>
+                    <Button class="rounded-full mr-2" size="icon-sm" variant="outline" @click="refreshConfigTreeData()">
+                        <RefreshCcw />
+                    </Button>
                 </TooltipWrapper>
                 <TooltipWrapper side="top" :content="t('view.profile.clear_results_tooltip')">
-                    <el-button
-                        type="default"
-                        size="small"
-                        :icon="Delete"
-                        circle
-                        style="margin-left: 5px"
-                        @click="configTreeData = {}"></el-button>
+                    <Button class="rounded-full" size="icon-sm" variant="outline" @click="configTreeData = {}">
+                        <Trash2
+                    /></Button>
                 </TooltipWrapper>
             </div>
             <vue-json-pretty
@@ -391,20 +384,9 @@
 </template>
 
 <script setup>
-    import {
-        CaretRight,
-        Delete,
-        DeleteFilled,
-        Folder,
-        Goods,
-        Operation,
-        Paperclip,
-        Refresh,
-        Tickets,
-        Timer,
-        User
-    } from '@element-plus/icons-vue';
+    import { Folder, Goods, Operation } from '@element-plus/icons-vue';
     import { computed, reactive, ref } from 'vue';
+    import { RefreshCcw, Trash2 } from 'lucide-vue-next';
     import { Button } from '@/components/ui/button';
     import { ButtonGroup } from '@/components/ui/button-group';
     import { storeToRefs } from 'pinia';

src/views/Settings/components/Tabs/AppearanceTab.vue

@@ -165,9 +165,9 @@
                 :value="compactTableMode"
                 @change="setCompactTableMode" />
             <div class="options-container-item">
-                <el-button size="small" :icon="Notebook" style="margin-right: 10px" @click="promptMaxTableSizeDialog">{{
+                <Button size="sm" variant="outline" @click="promptMaxTableSizeDialog">{{
                     t('view.settings.appearance.appearance.table_max_size')
-                }}</el-button>
+                }}</Button>
             </div>
         </div>
         <div class="options-container">
@@ -425,9 +425,9 @@
     } from '@/components/ui/tags-input';
     import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
     import { computed, onBeforeUnmount, ref, watch } from 'vue';
-    import { ArrowRight, Notebook } from '@element-plus/icons-vue';
     import { CheckIcon, ChevronDown } from 'lucide-vue-next';
     import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
+    import { ArrowRight } from '@element-plus/icons-vue';
     import { Button } from '@/components/ui/button';
     import { storeToRefs } from 'pinia';
     import { toast } from 'vue-sonner';

src/views/Settings/components/Tabs/GeneralTab.vue

@@ -35,12 +35,12 @@
         <div class="options-container">
             <span class="header">{{ t('view.settings.general.vrcx_updater.header') }}</span>
             <div class="options-container-item">
-                <el-button size="small" :icon="Document" @click="showChangeLogDialog">{{
+                <Button size="sm" variant="outline" class="mr-2" @click="showChangeLogDialog">{{
                     t('view.settings.general.vrcx_updater.change_log')
-                }}</el-button>
-                <el-button v-if="!noUpdater" size="small" :icon="Upload" @click="showVRCXUpdateDialog()">{{
+                }}</Button>
+                <Button size="sm" variant="outline" v-if="!noUpdater" @click="showVRCXUpdateDialog()">{{
                     t('view.settings.general.vrcx_updater.change_build')
-                }}</el-button>
+                }}</Button>
             </div>
             <div v-if="!noUpdater" class="options-container-item">
                 <span class="name">{{ t('view.settings.general.vrcx_updater.update_action') }}</span>
@@ -104,9 +104,9 @@
                 :tooltip="t('view.settings.general.application.disable_gpu_acceleration_tooltip')"
                 @change="setDisableVrOverlayGpuAcceleration" />
             <div class="options-container-item">
-                <el-button size="small" :icon="Connection" @click="promptProxySettings">{{
+                <Button size="sm" variant="outline" @click="promptProxySettings">{{
                     t('view.settings.general.application.proxy')
-                }}</el-button>
+                }}</Button>
             </div>
         </div>
         <div class="options-container">
@@ -291,9 +291,9 @@
                 <p>{{ t('view.settings.general.legal_notice.disclaimer2') }}</p>
             </div>
             <div class="options-container-item">
-                <el-button size="small" @click="openOSSDialog">{{
+                <Button size="sm" variant="outline" @click="openOSSDialog">{{
                     t('view.settings.general.legal_notice.open_source_software_notice')
-                }}</el-button>
+                }}</Button>
             </div>
         </div>
         <OpenSourceSoftwareNoticeDialog v-if="ossDialog" v-model:ossDialog="ossDialog" />
@@ -301,8 +301,9 @@
 </template>
 
 <script setup>
-    import { Connection, Document, InfoFilled, Upload } from '@element-plus/icons-vue';
     import { computed, defineAsyncComponent, ref } from 'vue';
+    import { Button } from '@/components/ui/button';
+    import { InfoFilled } from '@element-plus/icons-vue';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
 

src/views/Settings/components/Tabs/NotificationsTab.vue

@@ -3,9 +3,9 @@
         <div class="options-container" style="margin-top: 0">
             <span class="header">{{ t('view.settings.notifications.notifications.header') }}</span>
             <div class="options-container-item">
-                <el-button size="small" :icon="ChatSquare" @click="showNotyFeedFiltersDialog">{{
+                <Button size="sm" variant="outline" @click="showNotyFeedFiltersDialog">{{
                     t('view.settings.notifications.notifications.notification_filter')
-                }}</el-button>
+                }}</Button>
             </div>
         </div>
         <div class="options-container">
@@ -65,14 +65,14 @@
                         saveOpenVROption();
                     " />
                 <div class="options-container-item">
-                    <el-button
-                        size="small"
-                        :icon="Rank"
+                    <Button
+                        size="sm"
+                        variant="outline"
                         :disabled="!overlayNotifications || !openVR"
                         @click="showNotificationPositionDialog"
                         >{{
                             t('view.settings.notifications.notifications.steamvr_notifications.notification_position')
-                        }}</el-button
+                        }}</Button
                     >
                 </div>
             </template>
@@ -85,14 +85,14 @@
                 </div>
             </div>
             <div class="options-container-item">
-                <el-button
-                    size="small"
-                    :icon="Timer"
+                <Button
+                    size="sm"
+                    variant="outline"
                     :disabled="(!overlayNotifications || !openVR) && !xsNotifications"
                     @click="promptNotificationTimeout"
                     >{{
                         t('view.settings.notifications.notifications.steamvr_notifications.notification_timeout')
-                    }}</el-button
+                    }}</Button
                 >
             </div>
             <simple-switch
@@ -262,9 +262,9 @@
                     :placeholder="t('view.settings.notifications.notifications.text_to_speech.tts_test_placeholder')"
                     :rows="1"
                     style="width: 175px; display: inline-block"></el-input>
-                <el-button size="small" :icon="VideoPlay" style="margin-left: 10px" @click="testNotificationTTS">{{
+                <Button size="sm" variant="outline" style="margin-left: 10px" @click="testNotificationTTS">{{
                     t('view.settings.notifications.notifications.text_to_speech.play')
-                }}</el-button>
+                }}</Button>
             </div>
         </div>
         <NotificationPositionDialog v-model:isNotificationPositionDialogVisible="isNotificationPositionDialogVisible" />
@@ -274,8 +274,8 @@
 
 <script setup>
     import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
-    import { ChatSquare, Rank, Timer, VideoPlay } from '@element-plus/icons-vue';
     import { computed, ref } from 'vue';
+    import { Button } from '@/components/ui/button';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
 

src/views/Settings/components/Tabs/PicturesTab.vue

@@ -23,9 +23,9 @@
             :value="screenshotHelperCopyToClipboard"
             @change="setScreenshotHelperCopyToClipboard()"
             :long-label="true" />
-        <el-button size="small" :icon="Delete" @click="askDeleteAllScreenshotMetadata()">{{
+        <Button size="sm" variant="outline" @click="askDeleteAllScreenshotMetadata()">{{
             t('view.settings.advanced.advanced.delete_all_screenshot_metadata.button')
-        }}</el-button>
+        }}</Button>
     </div>
 
     <div class="options-container">
@@ -46,15 +46,15 @@
                 t('view.settings.advanced.advanced.user_generated_content.description')
             }}</span>
         </div>
-        <el-button size="small" :icon="Folder" @click="openUGCFolder()">{{
+        <Button size="sm" variant="outline" @click="openUGCFolder()">{{
             t('view.settings.advanced.advanced.user_generated_content.folder')
-        }}</el-button>
-        <el-button size="small" :icon="FolderOpened" @click="openUGCFolderSelector()">{{
+        }}</Button>
+        <Button size="sm" variant="outline" @click="openUGCFolderSelector()">{{
             t('view.settings.advanced.advanced.user_generated_content.set_folder')
-        }}</el-button>
-        <el-button size="small" :icon="Delete" @click="resetUGCFolder()" v-if="ugcFolderPath">{{
+        }}</Button>
+        <Button size="sm" variant="outline" @click="resetUGCFolder()" v-if="ugcFolderPath">{{
             t('view.settings.advanced.advanced.user_generated_content.reset_override')
-        }}</el-button>
+        }}</Button>
         <br />
         <br />
         <br />
@@ -101,7 +101,8 @@
 </template>
 
 <script setup>
-    import { Delete, Folder, FolderOpened, InfoFilled } from '@element-plus/icons-vue';
+    import { Button } from '@/components/ui/button';
+    import { InfoFilled } from '@element-plus/icons-vue';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
 

src/views/Settings/components/WristOverlaySettings.vue

@@ -2,12 +2,12 @@
     <div class="options-container" style="margin-top: 0">
         <span class="header">{{ t('view.settings.wrist_overlay.steamvr_wrist_overlay.header') }}</span>
         <div class="options-container-item">
-            <el-button
-                size="small"
-                :icon="Files"
+            <Button
+                size="sm"
+                variant="outline"
                 :disabled="!openVR || !overlayWrist"
                 @click="emit('open-feed-filters')"
-                >{{ t('view.settings.wrist_overlay.steamvr_wrist_overlay.wrist_feed_filters') }}</el-button
+                >{{ t('view.settings.wrist_overlay.steamvr_wrist_overlay.wrist_feed_filters') }}</Button
             >
         </div>
         <div class="options-container-item">
@@ -156,7 +156,7 @@
 </template>
 
 <script setup>
-    import { Files } from '@element-plus/icons-vue';
+    import { Button } from '@/components/ui/button';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';