replace some el-button

src/components/dialogs/AvatarDialog/SetAvatarStylesDialog.vue

@@ -68,15 +68,18 @@
         </template>
 
         <template #footer>
-            <el-button @click="closeSetAvatarStylesDialog">{{ t('dialog.set_avatar_styles.cancel') }}</el-button>
-            <el-button type="primary" @click="saveSetAvatarStylesDialog">
+            <Button variant="secondary" @click="closeSetAvatarStylesDialog">{{
+                t('dialog.set_avatar_styles.cancel')
+            }}</Button>
+            <Button @click="saveSetAvatarStylesDialog">
                 {{ t('dialog.set_avatar_styles.save') }}
-            </el-button>
+            </Button>
         </template>
     </el-dialog>
 </template>
 
 <script setup>
+    import { Button } from '@/components/ui/button';
     import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';
     import { watch } from 'vue';

src/components/dialogs/ChooseFavoriteGroupDialog.vue

@@ -3,59 +3,68 @@
         <div v-loading="loading">
             <span style="display: block; text-align: center">{{ t('dialog.favorite.vrchat_favorites') }}</span>
             <template v-if="favoriteDialog.currentGroup && favoriteDialog.currentGroup.key">
-                <el-button
-                    style="display: block; width: 100%; margin: 10px 0; white-space: initial; height: auto"
+                <Button
+                    variant="outline"
+                    style="width: 100%; white-space: initial"
+                    class="my-1"
                     @click="deleteFavoriteNoConfirm(favoriteDialog.objectId)">
-                    <el-icon style="margin-right: 5px"><Check /></el-icon>
-                    {{ favoriteDialog.currentGroup.displayName }} ({{ favoriteDialog.currentGroup.count }} /
+                    <Check />{{ favoriteDialog.currentGroup.displayName }} ({{ favoriteDialog.currentGroup.count }} /
                     {{ favoriteDialog.currentGroup.capacity }})
-                </el-button>
+                </Button>
             </template>
             <template v-else>
-                <el-button
+                <Button
+                    variant="outline"
                     v-for="group in groups"
                     :key="group.key"
-                    style="display: block; width: 100%; margin: 10px 0; white-space: initial; height: auto"
+                    style="width: 100%; white-space: initial"
+                    class="my-1"
                     @click="addFavorite(group)">
                     {{ group.displayName }} ({{ group.count }} / {{ group.capacity }})
-                </el-button>
+                </Button>
             </template>
         </div>
         <div v-if="favoriteDialog.type === 'world'" style="margin-top: 20px">
             <span style="display: block; text-align: center">{{ t('dialog.favorite.local_favorites') }}</span>
             <template v-for="group in localWorldFavoriteGroups" :key="group">
-                <el-button
+                <Button
+                    variant="outline"
                     v-if="hasLocalWorldFavorite(favoriteDialog.objectId, group)"
-                    style="display: block; width: 100%; margin: 10px 0; white-space: initial; height: auto"
+                    style="width: 100%; white-space: initial"
+                    class="my-1"
                     @click="removeLocalWorldFavorite(favoriteDialog.objectId, group)">
-                    <el-icon style="margin-right: 5px"><Check /></el-icon>
-                    {{ group }} ({{ localWorldFavGroupLength(group) }})
-                </el-button>
-                <el-button
+                    <Check />{{ group }} ({{ localWorldFavGroupLength(group) }})
+                </Button>
+                <Button
+                    variant="outline"
                     v-else
-                    style="display: block; width: 100%; margin: 10px 0; white-space: initial; height: auto"
+                    style="width: 100%; white-space: initial"
+                    class="my-1"
                     @click="addLocalWorldFavorite(favoriteDialog.objectId, group)">
                     {{ group }} ({{ localWorldFavGroupLength(group) }})
-                </el-button>
+                </Button>
             </template>
         </div>
         <div v-if="favoriteDialog.type === 'avatar'" style="margin-top: 20px">
-            <span style="display: block; text-align: center">{{ t('dialog.favorite.local_avatar_favorites') }}</span>
+            <span style="text-align: center">{{ t('dialog.favorite.local_avatar_favorites') }}</span>
             <template v-for="group in localAvatarFavoriteGroups" :key="group">
-                <el-button
+                <Button
+                    variant="outline"
                     v-if="hasLocalAvatarFavorite(favoriteDialog.objectId, group)"
-                    style="display: block; width: 100%; margin: 10px 0; white-space: initial; height: auto"
+                    style="width: 100%; white-space: initial"
+                    class="my-1"
                     @click="removeLocalAvatarFavorite(favoriteDialog.objectId, group)">
-                    <el-icon style="margin-right: 5px"><Check /></el-icon>
-                    {{ group }} ({{ localAvatarFavGroupLength(group) }})
-                </el-button>
-                <el-button
+                    <Check />{{ group }} ({{ localAvatarFavGroupLength(group) }})
+                </Button>
+                <Button
+                    variant="outline"
                     v-else
-                    style="display: block; width: 100%; margin: 10px 0; white-space: initial; height: auto"
+                    style="width: 100%; white-space: initial"
+                    class="my-1"
                     :disabled="!isLocalUserVrcPlusSupporter"
                     @click="addLocalAvatarFavorite(favoriteDialog.objectId, group)">
                     {{ group }} ({{ localAvatarFavGroupLength(group) }})
-                </el-button>
+                </Button>
             </template>
         </div>
     </el-dialog>
@@ -63,7 +72,8 @@
 
 <script setup>
     import { computed, nextTick, ref, watch } from 'vue';
-    import { Check } from '@element-plus/icons-vue';
+    import { Button } from '@/components/ui/button';
+    import { Check } from 'lucide-vue-next';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
 

src/components/dialogs/InviteDialog/EditAndSendInviteDialog.vue

@@ -21,17 +21,18 @@
             style="margin-top: 10px"></el-input>
 
         <template #footer>
-            <el-button @click="cancelEditAndSendInvite">
+            <Button variant="secondary" @click="cancelEditAndSendInvite">
                 {{ t('dialog.edit_send_invite_message.cancel') }}
-            </el-button>
-            <el-button type="primary" @click="saveEditAndSendInvite" :disabled="!editAndSendInviteDialog.newMessage">
+            </Button>
+            <Button @click="saveEditAndSendInvite" :disabled="!editAndSendInviteDialog.newMessage">
                 {{ t('dialog.edit_send_invite_message.send') }}
-            </el-button>
+            </Button>
         </template>
     </el-dialog>
 </template>
 
 <script setup>
+    import { Button } from '@/components/ui/button';
     import { storeToRefs } from 'pinia';
     import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';

src/components/dialogs/InviteDialog/InviteDialog.vue

@@ -9,22 +9,25 @@
         <div v-if="inviteDialog.visible" v-loading="inviteDialog.loading">
             <Location :location="inviteDialog.worldId" :link="false" />
             <br />
-            <el-button size="small" style="margin-top: 10px" @click="addSelfToInvite">{{
+            <Button size="sm" class="mr-2" variant="outline" style="margin-top: 10px" @click="addSelfToInvite">{{
                 t('dialog.invite.add_self')
-            }}</el-button>
-            <el-button
-                size="small"
+            }}</Button>
+            <Button
+                size="sm"
+                class="mr-2"
+                variant="outline"
                 :disabled="inviteDialog.friendsInInstance.length === 0"
                 style="margin-top: 10px"
                 @click="addFriendsInInstanceToInvite"
-                >{{ t('dialog.invite.add_friends_in_instance') }}</el-button
+                >{{ t('dialog.invite.add_friends_in_instance') }}</Button
             >
-            <el-button
-                size="small"
+            <Button
+                size="sm"
+                variant="outline"
                 :disabled="vipFriends.length === 0"
                 style="margin-top: 10px"
                 @click="addFavoriteFriendsToInvite"
-                >{{ t('dialog.invite.add_favorite_friends') }}</el-button
+                >{{ t('dialog.invite.add_favorite_friends') }}</Button
             >
 
             <div style="width: 100%; margin-top: 15px">
@@ -61,15 +64,16 @@
         </div>
 
         <template #footer>
-            <el-button :disabled="inviteDialog.loading || !inviteDialog.userIds.length" @click="showSendInviteDialog">{{
-                t('dialog.invite.invite_with_message')
-            }}</el-button>
-            <el-button
-                type="primary"
+            <Button
+                variant="secondary"
+                class="mr-2"
                 :disabled="inviteDialog.loading || !inviteDialog.userIds.length"
-                @click="sendInvite"
-                >{{ t('dialog.invite.invite') }}</el-button
+                @click="showSendInviteDialog"
+                >{{ t('dialog.invite.invite_with_message') }}</Button
             >
+            <Button :disabled="inviteDialog.loading || !inviteDialog.userIds.length" @click="sendInvite">{{
+                t('dialog.invite.invite')
+            }}</Button>
         </template>
         <SendInviteDialog
             v-model:sendInviteDialogVisible="sendInviteDialogVisible"
@@ -81,6 +85,7 @@
 
 <script setup>
     import { computed, ref } from 'vue';
+    import { Button } from '@/components/ui/button';
     import { Check as CheckIcon } from 'lucide-vue-next';
     import { ElMessageBox } from 'element-plus';
     import { storeToRefs } from 'pinia';

src/components/dialogs/LaunchDialog.vue

@@ -8,20 +8,23 @@
                     style="width: 230px"
                     @click="$event.target.tagName === 'INPUT' && $event.target.select()" />
                 <TooltipWrapper side="right" :content="t('dialog.launch.copy_tooltip')">
-                    <el-button
-                        size="small"
-                        :icon="CopyDocument"
-                        style="margin-left: 5px"
-                        circle
-                        @click="copyInstanceMessage(launchDialog.url)" />
+                    <Button
+                        class="rounded-full ml-1"
+                        size="icon-sm"
+                        variant="ghost"
+                        @click="copyInstanceMessage(launchDialog.url)"
+                        ><Copy
+                    /></Button>
                 </TooltipWrapper>
             </el-form-item>
             <el-form-item v-if="launchDialog.shortUrl">
                 <template #label>
-                    <span>{{ t('dialog.launch.short_url') }}</span>
-                    <TooltipWrapper side="top" :content="t('dialog.launch.short_url_notice')">
-                        <el-icon style="display: inline-block; margin-left: 5px"><Warning /></el-icon>
-                    </TooltipWrapper>
+                    <div class="flex items-center">
+                        <span>{{ t('dialog.launch.short_url') }}</span>
+                        <TooltipWrapper side="top" :content="t('dialog.launch.short_url_notice')">
+                            <el-icon style="display: inline-block; margin-left: 5px"><Warning /></el-icon>
+                        </TooltipWrapper>
+                    </div>
                 </template>
                 <el-input
                     v-model="launchDialog.shortUrl"
@@ -29,12 +32,13 @@
                     style="width: 230px"
                     @click="$event.target.tagName === 'INPUT' && $event.target.select()" />
                 <TooltipWrapper side="right" :content="t('dialog.launch.copy_tooltip')">
-                    <el-button
-                        size="small"
-                        :icon="CopyDocument"
-                        style="display: inline-block; margin-left: 5px"
-                        circle
-                        @click="copyInstanceMessage(launchDialog.shortUrl)" />
+                    <Button
+                        class="rounded-full ml-1"
+                        size="icon-sm"
+                        variant="ghost"
+                        @click="copyInstanceMessage(launchDialog.shortUrl)"
+                        ><Copy
+                    /></Button>
                 </TooltipWrapper>
             </el-form-item>
             <el-form-item :label="t('dialog.launch.location')">
@@ -44,12 +48,13 @@
                     style="width: 230px"
                     @click="$event.target.tagName === 'INPUT' && $event.target.select()" />
                 <TooltipWrapper side="right" :content="t('dialog.launch.copy_tooltip')">
-                    <el-button
-                        size="small"
-                        :icon="CopyDocument"
-                        style="display: inline-block; margin-left: 5px"
-                        circle
-                        @click="copyInstanceMessage(launchDialog.location)" />
+                    <Button
+                        class="rounded-full ml-1"
+                        size="icon-sm"
+                        variant="ghost"
+                        @click="copyInstanceMessage(launchDialog.location)"
+                        ><Copy
+                    /></Button>
                 </TooltipWrapper>
             </el-form-item>
         </el-form>
@@ -121,11 +126,12 @@
         DropdownMenuItem,
         DropdownMenuTrigger
     } from '@/components/ui/dropdown-menu';
-    import { CopyDocument, Warning } from '@element-plus/icons-vue';
     import { Button } from '@/components/ui/button';
     import { ButtonGroup } from '@/components/ui/button-group';
+    import { Copy } from 'lucide-vue-next';
     import { ElMessageBox } from 'element-plus';
     import { MoreHorizontal } from 'lucide-vue-next';
+    import { Warning } from '@element-plus/icons-vue';
     import { storeToRefs } from 'pinia';
     import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';

src/components/dialogs/ModerateGroupDialog.vue

@@ -39,21 +39,21 @@
             </div>
         </div>
         <template #footer>
-            <el-button
-                type="primary"
+            <Button
                 :disabled="!moderateGroupDialog.userId || !moderateGroupDialog.groupId"
                 @click="
                     showGroupMemberModerationDialog(moderateGroupDialog.groupId, moderateGroupDialog.userId);
                     moderateGroupDialog.visible = false;
                 ">
                 {{ t('dialog.moderate_group.moderation_tools') }}
-            </el-button>
+            </Button>
         </template>
     </el-dialog>
 </template>
 
 <script setup>
     import { computed, nextTick, ref, watch } from 'vue';
+    import { Button } from '@/components/ui/button';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
 

src/components/dialogs/SendBoopDialog.vue

@@ -61,17 +61,22 @@
         </div>
 
         <template #footer>
-            <el-button size="small" @click="showGalleryPage">{{ t('dialog.boop_dialog.emoji_manager') }}</el-button>
-            <el-button size="small" @click="closeDialog">{{ t('dialog.boop_dialog.cancel') }}</el-button>
-            <el-button size="small" :disabled="!sendBoopDialog.userId" @click="sendBoop">{{
+            <Button size="sm" variant="outline" class="mr-2" @click="showGalleryPage">{{
+                t('dialog.boop_dialog.emoji_manager')
+            }}</Button>
+            <Button size="sm" variant="secondary" class="mr-2" @click="closeDialog">{{
+                t('dialog.boop_dialog.cancel')
+            }}</Button>
+            <Button size="sm" :disabled="!sendBoopDialog.userId" @click="sendBoop">{{
                 t('dialog.boop_dialog.send')
-            }}</el-button>
+            }}</Button>
         </template>
     </el-dialog>
 </template>
 
 <script setup>
     import { computed, ref, watch } from 'vue';
+    import { Button } from '@/components/ui/button';
     import { Check as CheckIcon } from 'lucide-vue-next';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';

src/components/dialogs/UserDialog/EditNoteAndMemoDialog.vue

@@ -38,8 +38,8 @@
         </template>
         <template #footer>
             <div class="dialog-footer">
-                <el-button @click="cancel">Cancel</el-button>
-                <el-button type="primary" @click="saveChanges"> Confirm </el-button>
+                <Button variant="secondary" @click="cancel">Cancel</Button>
+                <Button @click="saveChanges"> Confirm </Button>
             </div>
         </template>
     </el-dialog>

src/components/dialogs/UserDialog/UserActionDropdown.vue

@@ -1,40 +1,29 @@
 <template>
-    <div style="flex: none">
+    <div style="flex: none" class="flex items-center">
         <template v-if="(currentUser.id !== userDialog.ref.id && userDialog.isFriend) || userDialog.isFavorite">
             <TooltipWrapper
                 v-if="userDialog.isFavorite"
                 side="top"
                 :content="t('dialog.user.actions.unfavorite_tooltip')">
-                <el-button
-                    type="warning"
-                    :icon="StarFilled"
-                    size="large"
-                    circle
-                    @click="userDialogCommand('Add Favorite')"></el-button>
+                <Button class="rounded-full" size="icon-lg" @click="userDialogCommand('Add Favorite')"><Star /></Button>
             </TooltipWrapper>
             <TooltipWrapper v-else side="top" :content="t('dialog.user.actions.favorite_tooltip')">
-                <el-button
-                    type="default"
-                    :icon="Star"
-                    size="large"
-                    circle
-                    @click="userDialogCommand('Add Favorite')"></el-button>
+                <Button class="rounded-full" size="icon-lg" variant="outline" @click="userDialogCommand('Add Favorite')"
+                    ><Star
+                /></Button>
             </TooltipWrapper>
         </template>
         <DropdownMenu>
             <DropdownMenuTrigger as-child>
-                <el-button
-                    :type="
-                        userDialog.incomingRequest || userDialog.outgoingRequest
-                            ? 'success'
-                            : userDialog.isBlock || userDialog.isMute
-                              ? 'danger'
-                              : 'default'
-                    "
-                    :icon="MoreFilled"
-                    size="large"
-                    circle
-                    style="margin-left: 5px"></el-button>
+                <div class="ml-2">
+                    <Button variant="outline" size="icon-lg" class="rounded-full">
+                        <Ellipsis />
+                        <span
+                            v-if="dotClass"
+                            class="absolute -right-0.5 -top-0.5 h-2.5 w-2.5 rounded-full ring-2 ring-background"
+                            :class="dotClass" />
+                    </Button>
+                </div>
             </DropdownMenuTrigger>
             <DropdownMenuContent>
                 <DropdownMenuItem @click="onCommand('Refresh')">
@@ -244,21 +233,20 @@
         Flag,
         Message,
         Microphone,
-        MoreFilled,
         Mute,
         Operation,
-        Picture,
         Plus,
         Pointer,
         Postcard,
         Refresh,
         Share,
-        Star,
-        StarFilled,
         SwitchButton,
         User,
         UserFilled
     } from '@element-plus/icons-vue';
+    import { MoreHorizontal as Ellipsis, Star } from 'lucide-vue-next';
+    import { Button } from '@/components/ui/button';
+    import { computed } from 'vue';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
 
@@ -285,6 +273,15 @@
     const { isGameRunning } = storeToRefs(useGameStore());
     const { lastLocation } = storeToRefs(useLocationStore());
 
+    const hasRequest = computed(() => userDialog.value.incomingRequest || userDialog.value.outgoingRequest);
+    const hasRisk = computed(() => userDialog.value.isBlock || userDialog.value.isMute);
+
+    const dotClass = computed(() => {
+        if (hasRequest.value) return 'bg-emerald-500';
+        if (hasRisk.value) return 'bg-destructive';
+        return null;
+    });
+
     function onCommand(command) {
         props.userDialogCommand(command);
     }

src/components/dialogs/VRCXUpdateDialog.vue

@@ -53,25 +53,26 @@
         </div>
 
         <template #footer>
-            <el-button v-if="updateInProgress" type="primary" @click="cancelUpdate">
+            <Button variant="secondary" class="mr-2" v-if="updateInProgress" @click="cancelUpdate">
                 {{ t('dialog.vrcx_updater.cancel') }}
-            </el-button>
-            <el-button
+            </Button>
+            <Button
+                variant="default"
                 v-if="VRCXUpdateDialog.release !== pendingVRCXInstall"
                 :disabled="updateInProgress"
-                type="primary"
                 @click="installVRCXUpdate">
                 {{ t('dialog.vrcx_updater.download') }}
-            </el-button>
-            <el-button v-if="!updateInProgress && pendingVRCXInstall" type="primary" @click="restartVRCX(true)">
+            </Button>
+            <Button variant="default" v-if="!updateInProgress && pendingVRCXInstall" @click="restartVRCX(true)">
                 {{ t('dialog.vrcx_updater.install') }}
-            </el-button>
+            </Button>
         </template>
     </el-dialog>
 </template>
 
 <script setup>
     import { nextTick, ref, watch } from 'vue';
+    import { Button } from '@/components/ui/button';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
 

src/components/dialogs/WorldDialog/SetWorldTagsDialog.vue

@@ -77,12 +77,12 @@
         </el-checkbox>
         <template #footer>
             <div style="display: flex">
-                <el-button @click="isVisible = false">
+                <Button variant="secondary" @click="isVisible = false">
                     {{ t('dialog.set_world_tags.cancel') }}
-                </el-button>
-                <el-button type="primary" @click="saveSetWorldTagsDialog">
+                </Button>
+                <Button @click="saveSetWorldTagsDialog">
                     {{ t('dialog.set_world_tags.save') }}
-                </el-button>
+                </Button>
             </div>
         </template>
     </el-dialog>
@@ -90,6 +90,7 @@
 
 <script setup>
     import { computed, ref, watch } from 'vue';
+    import { Button } from '@/components/ui/button';
     import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';