From feb04b036fb74eb6778ce5b827f69672a175197d Mon Sep 17 00:00:00 2001
From: pa <maplenagisa@gmail.com>
Date: Mon, 9 Mar 2026 18:17:37 +0900
Subject: [PATCH] replace inline styles with utility classes in dialogs

---
 src/components/AvatarInfo.vue                 |  2 +-
 .../dialogs/AvatarDialog/AvatarDialog.vue     |  5 +-
 .../AvatarDialog/SetAvatarStylesDialog.vue    |  2 +-
 .../GroupDialog/GallerySelectDialog.vue       |  2 +-
 .../dialogs/GroupDialog/GroupDialog.vue       | 14 +--
 .../GroupDialog/GroupDialogInfoTab.vue        | 21 ++--
 .../GroupDialog/GroupDialogMembersTab.vue     | 14 ++-
 .../GroupDialog/GroupDialogPhotosTab.vue      |  4 +-
 .../GroupDialog/GroupDialogPostsTab.vue       | 11 +--
 .../GroupMemberModerationBanImportDialog.vue  |  2 +-
 .../GroupDialog/GroupModerationBansTab.vue    | 23 ++---
 .../GroupDialog/GroupModerationInvitesTab.vue | 96 ++++++-------------
 .../GroupDialog/GroupModerationLogsTab.vue    | 19 +---
 .../GroupDialog/GroupModerationMembersTab.vue | 41 ++------
 .../InviteDialog/EditAndSendInviteDialog.vue  |  2 +-
 .../InviteDialog/SendInviteConfirmDialog.vue  |  2 +-
 .../PreviousInstancesInfoDialog.vue           |  2 +-
 .../PreviousInstancesListDialog.vue           |  2 +-
 .../UserDialogFavoriteWorldsTab.vue           |  2 +-
 .../UserDialog/UserDialogGroupsTab.vue        | 21 ++--
 .../dialogs/UserDialog/UserDialogInfoTab.vue  | 33 ++-----
 .../dialogs/UserDialog/UserSummaryHeader.vue  | 17 ++--
 .../WorldDialog/SetWorldTagsDialog.vue        | 15 +--
 .../dialogs/WorldDialog/WorldDialog.vue       |  6 +-
 .../Charts/components/InstanceActivity.vue    |  2 +-
 .../Favorites/dialogs/AvatarImportDialog.vue  |  4 +-
 .../Favorites/dialogs/FriendImportDialog.vue  | 16 ++--
 .../Favorites/dialogs/WorldImportDialog.vue   |  4 +-
 src/views/Login/Login.vue                     |  2 +-
 .../EditAndSendInviteResponseDialog.vue       |  2 +-
 .../SendInviteResponseConfirmDialog.vue       |  2 +-
 src/views/PlayerList/PlayerList.vue           |  3 +-
 .../components/PhotonEventTable.vue           |  5 +-
 src/views/Search/Search.vue                   | 11 +--
 .../Settings/dialogs/LaunchOptionsDialog.vue  |  2 +-
 .../dialogs/NotificationPositionDialog.vue    |  2 +-
 .../OpenSourceSoftwareNoticeDialog.vue        |  2 +-
 .../Settings/dialogs/VRChatConfigDialog.vue   |  2 +-
 .../Settings/dialogs/YouTubeApiDialog.vue     |  6 +-
 src/views/Tools/ScreenshotMetadata.vue        |  6 +-
 .../Tools/dialogs/EditInviteMessageDialog.vue |  2 +-
 .../dialogs/ExportDiscordNamesDialog.vue      |  8 +-
 src/views/Tools/dialogs/NoteExportDialog.vue  |  4 +-
 .../Tools/dialogs/RegistryBackupDialog.vue    |  6 +-
 44 files changed, 148 insertions(+), 301 deletions(-)

diff --git a/src/components/AvatarInfo.vue b/src/components/AvatarInfo.vue
index ae7f688a..fe78bc05 100644
--- a/src/components/AvatarInfo.vue
+++ b/src/components/AvatarInfo.vue
@@ -10,7 +10,7 @@
             <template #content>
                 <span class="truncate">{{ avatarTags }}</span>
             </template>
-            <span style="font-size: 12px" class="truncate text-muted-foreground">{{ avatarTags }}</span>
+            <span class="truncate text-xs text-muted-foreground">{{ avatarTags }}</span>
         </TooltipWrapper>
     </div>
 </template>
diff --git a/src/components/dialogs/AvatarDialog/AvatarDialog.vue b/src/components/dialogs/AvatarDialog/AvatarDialog.vue
index 2945531a..6d1bfdea 100644
--- a/src/components/dialogs/AvatarDialog/AvatarDialog.vue
+++ b/src/components/dialogs/AvatarDialog/AvatarDialog.vue
@@ -27,8 +27,7 @@
                         </div>
                         <div class="mt-1.5">
                             <span
-                                class="cursor-pointer x-grey"
-                                style="font-family: monospace"
+                                class="cursor-pointer x-grey font-mono"
                                 @click="showUserDialog(avatarDialog.ref.authorId)"
                                 v-text="avatarDialog.ref.authorName"></span>
                         </div>
@@ -158,7 +157,7 @@
                         <div style="margin-top: 6px">
                             <span
                                 v-show="avatarDialog.ref.name !== avatarDialog.ref.description"
-                                style="font-size: 12px"
+                                class="text-xs"
                                 v-text="avatarDialog.ref.description"></span>
                         </div>
                     </div>
diff --git a/src/components/dialogs/AvatarDialog/SetAvatarStylesDialog.vue b/src/components/dialogs/AvatarDialog/SetAvatarStylesDialog.vue
index b15e7e55..7be27e7b 100644
--- a/src/components/dialogs/AvatarDialog/SetAvatarStylesDialog.vue
+++ b/src/components/dialogs/AvatarDialog/SetAvatarStylesDialog.vue
@@ -58,7 +58,7 @@
 
                 <br />
 
-                <div style="font-size: 12px">{{ t('dialog.set_world_tags.author_tags') }}</div>
+                <div class="text-xs">{{ t('dialog.set_world_tags.author_tags') }}</div>
 
                 <InputGroupTextareaField
                     :model-value="setAvatarStylesDialog.authorTags"
diff --git a/src/components/dialogs/GroupDialog/GallerySelectDialog.vue b/src/components/dialogs/GroupDialog/GallerySelectDialog.vue
index 6f9596d6..193106d8 100644
--- a/src/components/dialogs/GroupDialog/GallerySelectDialog.vue
+++ b/src/components/dialogs/GroupDialog/GallerySelectDialog.vue
@@ -7,7 +7,7 @@
 
             <div>
                 <span>{{ t('dialog.gallery_select.gallery') }}</span>
-                <span class="ml-1.5 text-muted-foreground" style="font-size: 12px">{{ galleryTable.length }}/64</span>
+                <span class="ml-1.5 text-muted-foreground text-xs">{{ galleryTable.length }}/64</span>
                 <br />
                 <input
                     id="GalleryUploadButton"
diff --git a/src/components/dialogs/GroupDialog/GroupDialog.vue b/src/components/dialogs/GroupDialog/GroupDialog.vue
index 7426887c..6b393414 100644
--- a/src/components/dialogs/GroupDialog/GroupDialog.vue
+++ b/src/components/dialogs/GroupDialog/GroupDialog.vue
@@ -25,7 +25,7 @@
                             style="cursor: pointer"
                             v-text="groupDialog.ref.name"
                             @click="copyToClipboard(groupDialog.ref.name)"></span>
-                        <span class="group-discriminator x-grey mr-1.5" style="font-family: monospace; font-size: 12px">
+                        <span class="group-discriminator x-grey mr-1.5 font-mono text-xs">
                             {{ groupDialog.ref.shortCode }}.{{ groupDialog.ref.discriminator }}
                         </span>
                         <TooltipWrapper v-for="item in groupDialog.ref.$languages" :key="item.key" side="top">
@@ -39,8 +39,7 @@
                         </TooltipWrapper>
                         <div style="margin-top: 6px">
                             <span
-                                class="cursor-pointer x-grey"
-                                style="font-family: monospace"
+                                class="cursor-pointer x-grey font-mono"
                                 @click="showUserDialog(groupDialog.ref.ownerId)"
                                 v-text="groupDialog.ownerDisplayName"></span>
                         </div>
@@ -129,13 +128,8 @@
                         <div style="margin-top: 6px">
                             <pre
                                 v-show="groupDialog.ref.name !== groupDialog.ref.description"
-                                style="
-                                    font-family: inherit;
-                                    font-size: 12px;
-                                    white-space: pre-wrap;
-                                    max-height: 40vh;
-                                    overflow-y: auto;
-                                "
+                                class="text-xs font-[inherit]"
+                                style="white-space: pre-wrap; max-height: 40vh; overflow-y: auto"
                                 v-text="groupDialog.ref.description"></pre>
                         </div>
                     </div>
diff --git a/src/components/dialogs/GroupDialog/GroupDialogInfoTab.vue b/src/components/dialogs/GroupDialog/GroupDialogInfoTab.vue
index 0fb25311..86d44928 100644
--- a/src/components/dialogs/GroupDialog/GroupDialogInfoTab.vue
+++ b/src/components/dialogs/GroupDialog/GroupDialogInfoTab.vue
@@ -9,7 +9,7 @@
             loading="lazy" />
     </div>
     <div class="flex flex-wrap items-start px-2.5" style="max-height: none">
-        <span v-if="groupDialog.instances.length" style="font-size: 12px; font-weight: bold; margin: 6px">
+        <span v-if="groupDialog.instances.length" class="text-xs font-bold" style="margin: 6px">
             {{ t('dialog.group.info.instances') }}
         </span>
         <div v-for="room in groupDialog.instances" :key="room.tag" style="width: 100%">
@@ -71,15 +71,8 @@
                         loading="lazy" />
                 </div>
                 <pre
-                    class="text-xs"
-                    style="
-                        display: inline-block;
-                        vertical-align: top;
-                        font-family: inherit;
-                        font-size: 12px;
-                        white-space: pre-wrap;
-                        margin: 0;
-                    "
+                    class="text-xs font-[inherit]"
+                    style="display: inline-block; vertical-align: top; white-space: pre-wrap; margin: 0"
                     >{{ groupDialog.announcement.text || '-' }}</pre
                 >
                 <br />
@@ -146,11 +139,9 @@
         <div class="box-border flex items-center p-1.5 text-[13px] w-full cursor-default">
             <div class="flex-1 overflow-hidden">
                 <span class="block truncate font-medium leading-[18px]">{{ t('dialog.group.info.rules') }}</span>
-                <pre
-                    class="text-xs"
-                    style="font-family: inherit; font-size: 12px; white-space: pre-wrap; margin: 0 0.5em 0 0"
-                    >{{ groupDialog.ref.rules || '-' }}</pre
-                >
+                <pre class="text-xs font-[inherit] whitespace-pre-wrap mr-2 my-0 ml-0">{{
+                    groupDialog.ref.rules || '-'
+                }}</pre>
             </div>
         </div>
         <div class="box-border flex items-center p-1.5 text-[13px] w-full cursor-default">
diff --git a/src/components/dialogs/GroupDialog/GroupDialogMembersTab.vue b/src/components/dialogs/GroupDialog/GroupDialogMembersTab.vue
index 8afb9aa7..0022ffc5 100644
--- a/src/components/dialogs/GroupDialog/GroupDialogMembersTab.vue
+++ b/src/components/dialogs/GroupDialog/GroupDialogMembersTab.vue
@@ -1,11 +1,9 @@
 <template>
     <template v-if="groupDialog.visible">
-        <span
-            v-if="hasGroupPermission(groupDialog.ref, 'group-members-viewall')"
-            style="font-weight: bold; font-size: 16px"
-            >{{ t('dialog.group.members.all_members') }}</span
-        >
-        <span v-else style="font-weight: bold; font-size: 16px">{{ t('dialog.group.members.friends_only') }}</span>
+        <span v-if="hasGroupPermission(groupDialog.ref, 'group-members-viewall')" class="text-base font-bold">{{
+            t('dialog.group.members.all_members')
+        }}</span>
+        <span v-else class="text-base font-bold">{{ t('dialog.group.members.friends_only') }}</span>
         <div style="margin-top: 8px">
             <Button
                 class="rounded-full h-6 w-6"
@@ -24,10 +22,10 @@
                 @click="downloadAndSaveJson(`${groupDialog.id}_members`, groupDialog.members)">
                 <Download class="h-4 w-4" />
             </Button>
-            <span v-if="groupDialog.memberSearch.length" style="font-size: 14px; margin-left: 6px; margin-right: 6px"
+            <span v-if="groupDialog.memberSearch.length" class="text-sm mx-1.5"
                 >{{ groupDialog.memberSearchResults.length }}/{{ groupDialog.ref.memberCount }}</span
             >
-            <span v-else style="font-size: 14px; margin-left: 6px; margin-right: 6px"
+            <span v-else class="text-sm mx-1.5"
                 >{{ groupDialog.members.length }}/{{ groupDialog.ref.memberCount }}</span
             >
             <div
diff --git a/src/components/dialogs/GroupDialog/GroupDialogPhotosTab.vue b/src/components/dialogs/GroupDialog/GroupDialogPhotosTab.vue
index 3024206e..55d21ffe 100644
--- a/src/components/dialogs/GroupDialog/GroupDialogPhotosTab.vue
+++ b/src/components/dialogs/GroupDialog/GroupDialogPhotosTab.vue
@@ -17,9 +17,9 @@
             v-for="(gallery, index) in groupDialog.ref.galleries"
             :key="`label-${index}`"
             v-slot:[`label-${index}`]>
-            <span style="font-weight: bold; font-size: 16px" v-text="gallery.name" />
+            <span class="text-base font-bold" v-text="gallery.name" />
             <i class="x-status-icon" style="margin-left: 6px" :class="groupGalleryStatus(gallery)" />
-            <span class="text-muted-foreground" style="font-size: 12px; margin-left: 6px">{{
+            <span class="text-muted-foreground text-xs ml-1.5">{{
                 groupDialog.galleries[gallery.id] ? groupDialog.galleries[gallery.id].length : 0
             }}</span>
         </template>
diff --git a/src/components/dialogs/GroupDialog/GroupDialogPostsTab.vue b/src/components/dialogs/GroupDialog/GroupDialogPostsTab.vue
index 0ee4bc72..5863090f 100644
--- a/src/components/dialogs/GroupDialog/GroupDialogPostsTab.vue
+++ b/src/components/dialogs/GroupDialog/GroupDialogPostsTab.vue
@@ -32,15 +32,8 @@
                             loading="lazy" />
                     </div>
                     <pre
-                        class="text-xs"
-                        style="
-                            display: inline-block;
-                            vertical-align: top;
-                            font-family: inherit;
-                            font-size: 12px;
-                            white-space: pre-wrap;
-                            margin: 0;
-                        "
+                        class="text-xs font-[inherit]"
+                        style="display: inline-block; vertical-align: top; white-space: pre-wrap; margin: 0"
                         >{{ post.text || '-' }}</pre
                     >
                     <br />
diff --git a/src/components/dialogs/GroupDialog/GroupMemberModerationBanImportDialog.vue b/src/components/dialogs/GroupDialog/GroupMemberModerationBanImportDialog.vue
index b1e316d6..f0fec66a 100644
--- a/src/components/dialogs/GroupDialog/GroupMemberModerationBanImportDialog.vue
+++ b/src/components/dialogs/GroupDialog/GroupMemberModerationBanImportDialog.vue
@@ -53,7 +53,7 @@
                 <Button size="sm" variant="secondary" @click="errors = ''">
                     {{ t('dialog.group_member_moderation.import_bans_clear_errors') }}
                 </Button>
-                <pre class="mt-1.5" style="white-space: pre-wrap; font-size: 12px" v-text="errors"></pre>
+                <pre class="mt-1.5 text-xs" style="white-space: pre-wrap" v-text="errors"></pre>
             </template>
 
             <template v-if="resultMessage">
diff --git a/src/components/dialogs/GroupDialog/GroupModerationBansTab.vue b/src/components/dialogs/GroupDialog/GroupModerationBansTab.vue
index 4cf9514e..8b625f67 100644
--- a/src/components/dialogs/GroupDialog/GroupModerationBansTab.vue
+++ b/src/components/dialogs/GroupDialog/GroupModerationBansTab.vue
@@ -11,25 +11,16 @@
                     <Spinner v-if="loading" />
                     <RefreshCw v-else />
                 </Button>
-                <Button
-                    size="sm"
-                    variant="outline"
-                    @click="$emit('select-all', tableData.data)"
-                    >{{ t('dialog.group_member_moderation.select_all') }}</Button
-                >
-                <span style="font-size: 14px; margin-left: 6px; margin-right: 6px">{{
-                    tableData.data.length
-                }}</span>
+                <Button size="sm" variant="outline" @click="$emit('select-all', tableData.data)">{{
+                    t('dialog.group_member_moderation.select_all')
+                }}</Button>
+                <span class="text-sm mx-1.5">{{ tableData.data.length }}</span>
             </div>
 
             <div class="flex gap-2 items-center">
-                <Button
-                    variant="outline"
-                    size="sm"
-                    :disabled="!tableData.data.length"
-                    @click="$emit('export')"
-                    >{{ t('dialog.group_member_moderation.export_bans') }}</Button
-                >
+                <Button variant="outline" size="sm" :disabled="!tableData.data.length" @click="$emit('export')">{{
+                    t('dialog.group_member_moderation.export_bans')
+                }}</Button>
                 <Button
                     variant="outline"
                     size="sm"
diff --git a/src/components/dialogs/GroupDialog/GroupModerationInvitesTab.vue b/src/components/dialogs/GroupDialog/GroupModerationInvitesTab.vue
index 8d64d638..b5359ac1 100644
--- a/src/components/dialogs/GroupDialog/GroupModerationInvitesTab.vue
+++ b/src/components/dialogs/GroupDialog/GroupModerationInvitesTab.vue
@@ -1,47 +1,27 @@
 <template>
     <div style="margin-top: 8px">
-        <Button
-            class="rounded-full"
-            variant="outline"
-            size="icon-sm"
-            :disabled="loading"
-            @click="$emit('refresh')">
+        <Button class="rounded-full" variant="outline" size="icon-sm" :disabled="loading" @click="$emit('refresh')">
             <Spinner v-if="loading" />
             <RefreshCw v-else />
         </Button>
         <br />
         <TabsUnderline default-value="sent" :items="invitesTabs" :unmount-on-hide="false">
             <template #label-sent>
-                <span style="font-weight: bold; font-size: 16px">{{
-                    t('dialog.group_member_moderation.sent_invites')
-                }}</span>
-                <span class="text-muted-foreground" style="font-size: 12px; margin-left: 6px">{{
-                    invitesTable.data.length
-                }}</span>
+                <span class="text-base font-bold">{{ t('dialog.group_member_moderation.sent_invites') }}</span>
+                <span class="text-muted-foreground text-xs ml-1.5">{{ invitesTable.data.length }}</span>
             </template>
             <template #label-join>
-                <span style="font-weight: bold; font-size: 16px">{{
-                    t('dialog.group_member_moderation.join_requests')
-                }}</span>
-                <span class="text-muted-foreground" style="font-size: 12px; margin-left: 6px">{{
-                    joinRequestsTable.data.length
-                }}</span>
+                <span class="font-bold text-base">{{ t('dialog.group_member_moderation.join_requests') }}</span>
+                <span class="text-muted-foreground text-xs ml-1.5">{{ joinRequestsTable.data.length }}</span>
             </template>
             <template #label-blocked>
-                <span style="font-weight: bold; font-size: 16px">{{
-                    t('dialog.group_member_moderation.blocked_requests')
-                }}</span>
-                <span class="text-muted-foreground" style="font-size: 12px; margin-left: 6px">{{
-                    blockedTable.data.length
-                }}</span>
+                <span class="font-bold text-base">{{ t('dialog.group_member_moderation.blocked_requests') }}</span>
+                <span class="text-muted-foreground text-xs ml-1.5">{{ blockedTable.data.length }}</span>
             </template>
             <template #sent>
-                <Button
-                    size="sm"
-                    variant="outline"
-                    @click="$emit('select-all', invitesTable.data)"
-                    >{{ t('dialog.group_member_moderation.select_all') }}</Button
-                >
+                <Button size="sm" variant="outline" @click="$emit('select-all', invitesTable.data)">{{
+                    t('dialog.group_member_moderation.select_all')
+                }}</Button>
                 <DataTableLayout
                     style="margin-top: 8px"
                     :table="invitesTanstackTable"
@@ -49,21 +29,15 @@
                     :page-sizes="pageSizes"
                     :total-items="invitesTotalItems" />
                 <br />
-                <Button
-                    variant="outline"
-                    :disabled="inviteActionDisabled"
-                    @click="$emit('delete-sent-invite')"
-                    >{{ t('dialog.group_member_moderation.delete_sent_invite') }}</Button
-                >
+                <Button variant="outline" :disabled="inviteActionDisabled" @click="$emit('delete-sent-invite')">{{
+                    t('dialog.group_member_moderation.delete_sent_invite')
+                }}</Button>
             </template>
 
             <template #join>
-                <Button
-                    size="sm"
-                    variant="outline"
-                    @click="$emit('select-all', joinRequestsTable.data)"
-                    >{{ t('dialog.group_member_moderation.select_all') }}</Button
-                >
+                <Button size="sm" variant="outline" @click="$emit('select-all', joinRequestsTable.data)">{{
+                    t('dialog.group_member_moderation.select_all')
+                }}</Button>
                 <DataTableLayout
                     style="margin-top: 8px"
                     :table="joinRequestsTanstackTable"
@@ -85,21 +59,15 @@
                     @click="$emit('reject-invite-request')"
                     >{{ t('dialog.group_member_moderation.reject_join_requests') }}</Button
                 >
-                <Button
-                    variant="outline"
-                    :disabled="inviteActionDisabled"
-                    @click="$emit('block-join-request')"
-                    >{{ t('dialog.group_member_moderation.block_join_requests') }}</Button
-                >
+                <Button variant="outline" :disabled="inviteActionDisabled" @click="$emit('block-join-request')">{{
+                    t('dialog.group_member_moderation.block_join_requests')
+                }}</Button>
             </template>
 
             <template #blocked>
-                <Button
-                    size="sm"
-                    variant="outline"
-                    @click="$emit('select-all', blockedTable.data)"
-                    >{{ t('dialog.group_member_moderation.select_all') }}</Button
-                >
+                <Button size="sm" variant="outline" @click="$emit('select-all', blockedTable.data)">{{
+                    t('dialog.group_member_moderation.select_all')
+                }}</Button>
                 <DataTableLayout
                     style="margin-top: 8px"
                     :table="blockedTanstackTable"
@@ -107,30 +75,28 @@
                     :page-sizes="pageSizes"
                     :total-items="blockedTotalItems" />
                 <br />
-                <Button
-                    variant="outline"
-                    :disabled="inviteActionDisabled"
-                    @click="$emit('delete-blocked-request')"
-                    >{{ t('dialog.group_member_moderation.delete_blocked_requests') }}</Button
-                >
+                <Button variant="outline" :disabled="inviteActionDisabled" @click="$emit('delete-blocked-request')">{{
+                    t('dialog.group_member_moderation.delete_blocked_requests')
+                }}</Button>
             </template>
         </TabsUnderline>
     </div>
 </template>
 
 <script setup>
-    import { RefreshCw } from 'lucide-vue-next';
-    import { computed } from 'vue';
-    import { useI18n } from 'vue-i18n';
     import { Button } from '@/components/ui/button';
+    import { DataTableLayout } from '@/components/ui/data-table';
+    import { RefreshCw } from 'lucide-vue-next';
     import { Spinner } from '@/components/ui/spinner';
     import { TabsUnderline } from '@/components/ui/tabs';
-    import { DataTableLayout } from '@/components/ui/data-table';
+    import { computed } from 'vue';
     import { hasGroupPermission } from '@/shared/utils';
+    import { useI18n } from 'vue-i18n';
+    import { useVrcxVueTable } from '@/lib/table/useVrcxVueTable';
+
     import { createColumns as createInvitesColumns } from './groupMemberModerationInvitesColumns.jsx';
     import { createColumns as createJoinRequestsColumns } from './groupMemberModerationJoinRequestsColumns.jsx';
     import { createColumns as createBlockedColumns } from './groupMemberModerationBlockedColumns.jsx';
-    import { useVrcxVueTable } from '@/lib/table/useVrcxVueTable';
 
     const props = defineProps({
         loading: { type: Boolean, default: false },
diff --git a/src/components/dialogs/GroupDialog/GroupModerationLogsTab.vue b/src/components/dialogs/GroupDialog/GroupModerationLogsTab.vue
index f81c5709..ca74adf8 100644
--- a/src/components/dialogs/GroupDialog/GroupModerationLogsTab.vue
+++ b/src/components/dialogs/GroupDialog/GroupModerationLogsTab.vue
@@ -1,30 +1,19 @@
 <template>
     <div style="margin-top: 8px">
-        <Button
-            class="rounded-full"
-            variant="outline"
-            size="icon-sm"
-            :disabled="loading"
-            @click="$emit('refresh')">
+        <Button class="rounded-full" variant="outline" size="icon-sm" :disabled="loading" @click="$emit('refresh')">
             <Spinner v-if="loading" />
             <RefreshCw v-else />
         </Button>
-        <span style="font-size: 14px; margin-left: 6px; margin-right: 6px">{{
-            tableData.data.length
-        }}</span>
+        <span class="text-sm mx-1.5">{{ tableData.data.length }}</span>
         <br />
         <div style="display: flex; justify-content: space-between; align-items: center">
             <div>
                 <Select v-model="selectedAuditLogTypes" multiple>
                     <SelectTrigger style="margin: 8px 0; width: 250px">
-                        <SelectValue
-                            :placeholder="t('dialog.group_member_moderation.filter_type')" />
+                        <SelectValue :placeholder="t('dialog.group_member_moderation.filter_type')" />
                     </SelectTrigger>
                     <SelectContent>
-                        <SelectItem
-                            v-for="type in auditLogTypes"
-                            :key="type"
-                            :value="type">
+                        <SelectItem v-for="type in auditLogTypes" :key="type" :value="type">
                             {{ getAuditLogTypeName(type) }}
                         </SelectItem>
                     </SelectContent>
diff --git a/src/components/dialogs/GroupDialog/GroupModerationMembersTab.vue b/src/components/dialogs/GroupDialog/GroupModerationMembersTab.vue
index 29e75af5..10ce0c9f 100644
--- a/src/components/dialogs/GroupDialog/GroupModerationMembersTab.vue
+++ b/src/components/dialogs/GroupDialog/GroupModerationMembersTab.vue
@@ -1,28 +1,15 @@
 <template>
     <div class="mt-2">
-        <Button
-            class="rounded-full"
-            variant="outline"
-            size="icon-sm"
-            :disabled="loading"
-            @click="$emit('refresh')">
+        <Button class="rounded-full" variant="outline" size="icon-sm" :disabled="loading" @click="$emit('refresh')">
             <Spinner v-if="loading" />
             <RefreshCw v-else />
         </Button>
-        <span class="ml-1.5 mr-1.5" style="font-size: 14px">
-            {{ tableData.data.length }}/{{ groupRef.memberCount }}
-        </span>
+        <span class="ml-1.5 mr-1.5 text-sm"> {{ tableData.data.length }}/{{ groupRef.memberCount }} </span>
         <div class="mt-1.5" style="float: right">
             <span class="mr-1.5">{{ t('dialog.group.members.sort_by') }}</span>
             <DropdownMenu>
-                <DropdownMenuTrigger
-                    as-child
-                    :disabled="sortFilterDisabled">
-                    <Button
-                        size="sm"
-                        variant="outline"
-                        :disabled="sortFilterDisabled"
-                        @click.stop>
+                <DropdownMenuTrigger as-child :disabled="sortFilterDisabled">
+                    <Button size="sm" variant="outline" :disabled="sortFilterDisabled" @click.stop>
                         {{ t(memberSortOrder.name) }}
                         <ArrowDown class="ml-1.5" />
                     </Button>
@@ -38,14 +25,8 @@
             </DropdownMenu>
             <span class="ml-2 mr-1.5">{{ t('dialog.group.members.filter') }}</span>
             <DropdownMenu>
-                <DropdownMenuTrigger
-                    as-child
-                    :disabled="sortFilterDisabled">
-                    <Button
-                        size="sm"
-                        variant="outline"
-                        :disabled="sortFilterDisabled"
-                        @click.stop>
+                <DropdownMenuTrigger as-child :disabled="sortFilterDisabled">
+                    <Button size="sm" variant="outline" :disabled="sortFilterDisabled" @click.stop>
                         {{ t(memberFilter.name) }}
                         <ArrowDown class="ml-1.5" />
                     </Button>
@@ -58,9 +39,7 @@
                         {{ t(item.name) }}
                     </DropdownMenuItem>
                     <template v-for="role in groupRef.roles" :key="role.name">
-                        <DropdownMenuItem
-                            v-if="!role.defaultRole"
-                            @click="$emit('filter-change', role)">
+                        <DropdownMenuItem v-if="!role.defaultRole" @click="$emit('filter-change', role)">
                             {{ t(role.name) }}
                         </DropdownMenuItem>
                     </template>
@@ -125,11 +104,7 @@
     const { t } = useI18n();
 
     const sortFilterDisabled = computed(() =>
-        Boolean(
-            props.loading ||
-                props.memberSearch.length ||
-                !hasGroupPermission(props.groupRef, 'group-bans-manage')
-        )
+        Boolean(props.loading || props.memberSearch.length || !hasGroupPermission(props.groupRef, 'group-bans-manage'))
     );
 
     const columns = computed(() => createColumns(props.columnContext));
diff --git a/src/components/dialogs/InviteDialog/EditAndSendInviteDialog.vue b/src/components/dialogs/InviteDialog/EditAndSendInviteDialog.vue
index 0af84206..8a254662 100644
--- a/src/components/dialogs/InviteDialog/EditAndSendInviteDialog.vue
+++ b/src/components/dialogs/InviteDialog/EditAndSendInviteDialog.vue
@@ -11,7 +11,7 @@
                 <DialogTitle>{{ t('dialog.edit_send_invite_message.header') }}</DialogTitle>
             </DialogHeader>
 
-            <div style="font-size: 12px">
+            <div class="text-xs">
                 <span>{{ t('dialog.edit_send_invite_message.description') }}</span>
             </div>
 
diff --git a/src/components/dialogs/InviteDialog/SendInviteConfirmDialog.vue b/src/components/dialogs/InviteDialog/SendInviteConfirmDialog.vue
index d1bf5318..43eed656 100644
--- a/src/components/dialogs/InviteDialog/SendInviteConfirmDialog.vue
+++ b/src/components/dialogs/InviteDialog/SendInviteConfirmDialog.vue
@@ -11,7 +11,7 @@
                 <DialogTitle>{{ t('dialog.invite_message.header') }}</DialogTitle>
             </DialogHeader>
 
-            <div style="font-size: 12px">
+            <div class="text-xs">
                 <span>{{ t('dialog.invite_message.confirmation') }}</span>
             </div>
 
diff --git a/src/components/dialogs/PreviousInstancesDialog/PreviousInstancesInfoDialog.vue b/src/components/dialogs/PreviousInstancesDialog/PreviousInstancesInfoDialog.vue
index d7956938..68691b63 100644
--- a/src/components/dialogs/PreviousInstancesDialog/PreviousInstancesInfoDialog.vue
+++ b/src/components/dialogs/PreviousInstancesDialog/PreviousInstancesInfoDialog.vue
@@ -16,7 +16,7 @@
             :on-sort-change="handleSortChange">
             <template #toolbar>
                 <div style="display: flex; align-items: center; justify-content: space-between">
-                    <Location :location="location.tag" style="font-size: 14px" />
+                    <Location :location="location.tag" class="text-sm" />
                     <InputGroupField
                         v-model="search"
                         :placeholder="t('dialog.previous_instances.search_placeholder')"
diff --git a/src/components/dialogs/PreviousInstancesDialog/PreviousInstancesListDialog.vue b/src/components/dialogs/PreviousInstancesDialog/PreviousInstancesListDialog.vue
index 685dc205..3f108a77 100644
--- a/src/components/dialogs/PreviousInstancesDialog/PreviousInstancesListDialog.vue
+++ b/src/components/dialogs/PreviousInstancesDialog/PreviousInstancesListDialog.vue
@@ -16,7 +16,7 @@
             :on-sort-change="handleSortChange">
             <template #toolbar>
                 <div style="display: flex; align-items: center; justify-content: space-between">
-                    <span style="font-size: 14px" v-text="headerText"></span>
+                    <span class="text-sm" v-text="headerText"></span>
                     <InputGroupField
                         v-model="search"
                         :placeholder="t('dialog.previous_instances.search_placeholder')"
diff --git a/src/components/dialogs/UserDialog/UserDialogFavoriteWorldsTab.vue b/src/components/dialogs/UserDialog/UserDialogFavoriteWorldsTab.vue
index 952f5443..bfcfd432 100644
--- a/src/components/dialogs/UserDialog/UserDialogFavoriteWorldsTab.vue
+++ b/src/components/dialogs/UserDialog/UserDialogFavoriteWorldsTab.vue
@@ -26,7 +26,7 @@
                 v-slot:[`label-${index}`]>
                 <span>
                     <i class="x-status-icon" style="margin-right: 8px" :class="userFavoriteWorldsStatus(list[1])"> </i>
-                    <span style="font-weight: bold; font-size: 14px" v-text="list[0]"></span>
+                    <span class="font-bold text-sm" v-text="list[0]"></span>
                     <span style="font-size: 10px; margin-left: 6px"
                         >{{ list[2].length }}/{{ favoriteLimits.maxFavoritesPerGroup.world }}</span
                     >
diff --git a/src/components/dialogs/UserDialog/UserDialogGroupsTab.vue b/src/components/dialogs/UserDialog/UserDialogGroupsTab.vue
index cb5446f3..c2f584dd 100644
--- a/src/components/dialogs/UserDialog/UserDialogGroupsTab.vue
+++ b/src/components/dialogs/UserDialog/UserDialogGroupsTab.vue
@@ -14,14 +14,7 @@
                 t('dialog.user.groups.total_count', { count: userDialog.userGroups.groups.length })
             }}</span>
             <template v-if="userDialogGroupEditMode">
-                <span
-                    style="
-                        margin-left: 8px;
-
-                        font-size: 10px;
-                    "
-                    >{{ t('dialog.user.groups.hold_shift') }}</span
-                >
+                <span class="text-[10px]" style="margin-left: 8px">{{ t('dialog.user.groups.hold_shift') }}</span>
             </template>
         </div>
         <div style="display: flex; align-items: center">
@@ -240,8 +233,8 @@
         </template>
         <template v-else>
             <template v-if="userDialog.userGroups.ownGroups.length > 0">
-                <span style="font-weight: bold; font-size: 16px">{{ t('dialog.user.groups.own_groups') }}</span>
-                <span style="font-size: 12px; margin-left: 6px"
+                <span class="text-base font-bold">{{ t('dialog.user.groups.own_groups') }}</span>
+                <span class="text-xs ml-1.5"
                     >{{ userDialog.userGroups.ownGroups.length }}/{{
                         // @ts-ignore
                         cachedConfig?.constants?.GROUPS?.MAX_OWNED
@@ -281,8 +274,8 @@
                 </div>
             </template>
             <template v-if="userDialog.userGroups.mutualGroups.length > 0">
-                <span style="font-weight: bold; font-size: 16px">{{ t('dialog.user.groups.mutual_groups') }}</span>
-                <span style="font-size: 12px; margin-left: 6px">{{ userDialog.userGroups.mutualGroups.length }}</span>
+                <span class="text-base font-bold">{{ t('dialog.user.groups.mutual_groups') }}</span>
+                <span class="text-xs ml-1.5">{{ userDialog.userGroups.mutualGroups.length }}</span>
                 <div class="flex flex-wrap items-start" style="margin-top: 8px; margin-bottom: 16px; min-height: 60px">
                     <div
                         v-for="group in userDialog.userGroups.mutualGroups"
@@ -317,8 +310,8 @@
                 </div>
             </template>
             <template v-if="userDialog.userGroups.remainingGroups.length > 0">
-                <span style="font-weight: bold; font-size: 16px">{{ t('dialog.user.groups.groups') }}</span>
-                <span style="font-size: 12px; margin-left: 6px">
+                <span class="text-base font-bold">{{ t('dialog.user.groups.groups') }}</span>
+                <span class="text-xs ml-1.5">
                     {{ userDialog.userGroups.remainingGroups.length }}
                     <template v-if="currentUser.id === userDialog.id">
                         /
diff --git a/src/components/dialogs/UserDialog/UserDialogInfoTab.vue b/src/components/dialogs/UserDialog/UserDialogInfoTab.vue
index a1d89948..8f2c73cf 100644
--- a/src/components/dialogs/UserDialog/UserDialogInfoTab.vue
+++ b/src/components/dialogs/UserDialog/UserDialogInfoTab.vue
@@ -78,15 +78,8 @@
             <div class="flex-1 overflow-hidden" @click="isEditNoteAndMemoDialogVisible = true">
                 <span class="block truncate font-medium leading-[18px]">{{ t('dialog.user.info.note') }}</span>
                 <pre
-                    class="text-xs"
-                    style="
-                        font-family: inherit;
-                        font-size: 12px;
-                        white-space: pre-wrap;
-                        margin: 0 0.5em 0 0;
-                        max-height: 210px;
-                        overflow-y: auto;
-                    "
+                    class="text-xs font-[inherit]"
+                    style="white-space: pre-wrap; margin: 0 0.5em 0 0; max-height: 210px; overflow-y: auto"
                     >{{ userDialog.note }}</pre
                 >
             </div>
@@ -97,15 +90,8 @@
             <div class="flex-1 overflow-hidden" @click="isEditNoteAndMemoDialogVisible = true">
                 <span class="block truncate font-medium leading-[18px]">{{ t('dialog.user.info.memo') }}</span>
                 <pre
-                    class="text-xs"
-                    style="
-                        font-family: inherit;
-                        font-size: 12px;
-                        white-space: pre-wrap;
-                        margin: 0 0.5em 0 0;
-                        max-height: 210px;
-                        overflow-y: auto;
-                    "
+                    class="text-xs font-[inherit]"
+                    style="white-space: pre-wrap; margin: 0 0.5em 0 0; max-height: 210px; overflow-y: auto"
                     >{{ userDialog.memo }}</pre
                 >
             </div>
@@ -180,15 +166,8 @@
             <div class="flex-1 overflow-hidden">
                 <span class="block truncate font-medium leading-[18px]">{{ t('dialog.user.info.bio') }}</span>
                 <pre
-                    class="text-xs truncate"
-                    style="
-                        font-family: inherit;
-                        font-size: 12px;
-                        white-space: pre-wrap;
-                        margin: 0 0.5em 0 0;
-                        max-height: 210px;
-                        overflow-y: auto;
-                    "
+                    class="text-xs truncate font-[inherit]"
+                    style="white-space: pre-wrap; margin: 0 0.5em 0 0; max-height: 210px; overflow-y: auto"
                     >{{ bioCache.translated || userDialog.ref.bio || '-' }}</pre
                 >
                 <div style="float: right">
diff --git a/src/components/dialogs/UserDialog/UserSummaryHeader.vue b/src/components/dialogs/UserDialog/UserSummaryHeader.vue
index 07c86772..8e170e12 100644
--- a/src/components/dialogs/UserDialog/UserSummaryHeader.vue
+++ b/src/components/dialogs/UserDialog/UserSummaryHeader.vue
@@ -52,8 +52,8 @@
                         @click="copyUserDisplayName(userDialog.ref.displayName)"></span>
                     <TooltipWrapper v-if="userDialog.ref.pronouns" side="top" :content="t('dialog.user.pronouns')">
                         <span
-                            class="x-grey"
-                            style="margin-right: 6px; font-family: monospace; font-size: 12px"
+                            class="x-grey font-mono text-xs"
+                            style="margin-right: 6px"
                             v-text="userDialog.ref.pronouns"></span>
                     </TooltipWrapper>
                     <TooltipWrapper v-for="item in userDialog.ref.$languages" :key="item.key" side="top">
@@ -68,8 +68,8 @@
                     <template v-if="userDialog.ref.id === currentUser.id">
                         <br />
                         <span
-                            class="x-grey"
-                            style="margin-right: 8px; font-family: monospace; font-size: 12px; cursor: pointer"
+                            class="x-grey font-mono text-xs"
+                            style="margin-right: 8px; cursor: pointer"
                             v-text="currentUser.username"
                             @click="copyUserDisplayName(currentUser.username)"></span>
                     </template>
@@ -197,12 +197,9 @@
                                     <div style="display: block; width: 275px; word-break: normal">
                                         <span>{{ badge.badgeName }}</span>
                                         <br />
-                                        <span class="x-grey" style="font-size: 12px">{{ badge.badgeDescription }}</span>
+                                        <span class="x-grey text-xs">{{ badge.badgeDescription }}</span>
                                         <br />
-                                        <span
-                                            v-if="badge.assignedAt"
-                                            class="x-grey"
-                                            style="font-family: monospace; font-size: 12px">
+                                        <span v-if="badge.assignedAt" class="x-grey font-mono text-xs">
                                             {{ t('dialog.user.badges.assigned') }}:
                                             {{ formatDateFilter(badge.assignedAt, 'long') }}
                                         </span>
@@ -229,7 +226,7 @@
                     </TooltipWrapper>
                 </div>
                 <div>
-                    <span style="font-size: 12px" v-text="userDialog.ref.statusDescription"></span>
+                    <span class="text-xs" v-text="userDialog.ref.statusDescription"></span>
                 </div>
             </div>
 
diff --git a/src/components/dialogs/WorldDialog/SetWorldTagsDialog.vue b/src/components/dialogs/WorldDialog/SetWorldTagsDialog.vue
index e81d117e..06dcdb7d 100644
--- a/src/components/dialogs/WorldDialog/SetWorldTagsDialog.vue
+++ b/src/components/dialogs/WorldDialog/SetWorldTagsDialog.vue
@@ -19,14 +19,13 @@
                 <Checkbox v-model="setWorldTagsDialog.debugAllowed" />
                 <span>{{ t('dialog.set_world_tags.enable_debugging') }}</span>
             </label>
-            <div class="mt-2" style="font-size: 12px">{{ t('dialog.set_world_tags.author_tags') }}<br /></div>
+            <div class="mt-2 text-xs">{{ t('dialog.set_world_tags.author_tags') }}<br /></div>
             <InputGroupTextareaField
                 v-model="setWorldTagsDialog.authorTags"
                 :rows="2"
                 placeholder=""
-               
                 input-class="resize-none mt-2" />
-            <div class="mt-2" style="font-size: 12px">{{ t('dialog.set_world_tags.content_tags') }}<br /></div>
+            <div class="mt-2 text-xs">{{ t('dialog.set_world_tags.content_tags') }}<br /></div>
             <label class="inline-flex items-center gap-2">
                 <Checkbox v-model="setWorldTagsDialog.contentHorror" />
                 <span>{{ t('dialog.set_world_tags.content_horror') }}</span>
@@ -51,9 +50,7 @@
                 <Checkbox v-model="setWorldTagsDialog.contentSex" />
                 <span>{{ t('dialog.set_world_tags.content_sex') }}</span>
             </label>
-            <div class="mt-2" style="font-size: 12px">
-                {{ t('dialog.set_world_tags.default_content_settings') }}<br />
-            </div>
+            <div class="mt-2 text-xs">{{ t('dialog.set_world_tags.default_content_settings') }}<br /></div>
             <label class="inline-flex items-center gap-2">
                 <Checkbox v-model="setWorldTagsDialog.emoji" />
                 <span>{{ t('dialog.new_instance.content_emoji') }}</span>
@@ -178,6 +175,9 @@
         }
     );
 
+    /**
+     *
+     */
     function showSetWorldTagsDialog() {
         const D = setWorldTagsDialog.value;
 
@@ -249,6 +249,9 @@
         D.contentTags = contentTags.toString();
     }
 
+    /**
+     *
+     */
     function saveSetWorldTagsDialog() {
         const D = setWorldTagsDialog.value;
         const authorTags = D.authorTags.trim().split(',');
diff --git a/src/components/dialogs/WorldDialog/WorldDialog.vue b/src/components/dialogs/WorldDialog/WorldDialog.vue
index 4774f769..4b396500 100644
--- a/src/components/dialogs/WorldDialog/WorldDialog.vue
+++ b/src/components/dialogs/WorldDialog/WorldDialog.vue
@@ -32,8 +32,7 @@
                         </div>
                         <div class="mt-1.5">
                             <span
-                                class="cursor-pointer x-grey"
-                                style="font-family: monospace"
+                                class="cursor-pointer x-grey font-mono"
                                 @click="showUserDialog(worldDialog.ref.authorId)"
                                 v-text="worldDialog.ref.authorName" />
                         </div>
@@ -130,7 +129,8 @@
                         <div style="margin-top: 6px; display: flex; align-items: center">
                             <span
                                 v-show="worldDialog.ref.name !== worldDialog.ref.description"
-                                style="font-size: 12px; flex: 1; margin-right: 0.5em"
+                                class="text-xs"
+                                style="flex: 1; margin-right: 0.5em"
                                 >{{ translatedDescription || worldDialog.ref.description }}</span
                             >
                             <Button
diff --git a/src/views/Charts/components/InstanceActivity.vue b/src/views/Charts/components/InstanceActivity.vue
index 5f435f60..437d791f 100644
--- a/src/views/Charts/components/InstanceActivity.vue
+++ b/src/views/Charts/components/InstanceActivity.vue
@@ -7,7 +7,7 @@
                     <span class="shrink-0">{{ t('view.charts.instance_activity.header') }}</span>
                     <HoverCard>
                         <HoverCardTrigger as-child>
-                            <Info class="ml-1" style="font-size: 12px; opacity: 0.7" />
+                            <Info class="ml-1 text-xs opacity-70" />
                         </HoverCardTrigger>
                         <HoverCardContent side="bottom" align="start" class="w-75">
                             <div>
diff --git a/src/views/Favorites/dialogs/AvatarImportDialog.vue b/src/views/Favorites/dialogs/AvatarImportDialog.vue
index 812365cf..a7be277e 100644
--- a/src/views/Favorites/dialogs/AvatarImportDialog.vue
+++ b/src/views/Favorites/dialogs/AvatarImportDialog.vue
@@ -5,7 +5,7 @@
                 <DialogTitle>{{ t('dialog.avatar_import.header') }}</DialogTitle>
             </DialogHeader>
             <div style="display: flex; align-items: center; justify-content: space-between">
-                <div style="font-size: 12px">{{ t('dialog.avatar_import.description') }}</div>
+                <div class="text-xs">{{ t('dialog.avatar_import.description') }}</div>
                 <div style="display: flex; align-items: center">
                     <div v-if="avatarImportDialog.progress">
                         {{ t('dialog.avatar_import.process_progress') }} {{ avatarImportDialog.progress }} /
@@ -97,7 +97,7 @@
                 <h2 class="my-1.5 mx-0" style="font-weight: bold">
                     {{ t('dialog.avatar_import.errors') }}
                 </h2>
-                <pre style="white-space: pre-wrap; font-size: 12px" v-text="avatarImportDialog.errors"></pre>
+                <pre class="whitespace-pre-wrap text-xs" v-text="avatarImportDialog.errors"></pre>
             </template>
             <DataTableLayout
                 class="min-w-0 w-full"
diff --git a/src/views/Favorites/dialogs/FriendImportDialog.vue b/src/views/Favorites/dialogs/FriendImportDialog.vue
index cb036b18..6be2a04f 100644
--- a/src/views/Favorites/dialogs/FriendImportDialog.vue
+++ b/src/views/Favorites/dialogs/FriendImportDialog.vue
@@ -5,7 +5,7 @@
                 <DialogTitle>{{ t('dialog.friend_import.header') }}</DialogTitle>
             </DialogHeader>
             <div style="display: flex; align-items: center; justify-content: space-between">
-                <div style="font-size: 12px">{{ t('dialog.friend_import.description') }}</div>
+                <div class="text-xs">{{ t('dialog.friend_import.description') }}</div>
                 <div style="display: flex; align-items: center">
                     <div v-if="friendImportDialog.progress">
                         {{ t('dialog.friend_import.process_progress') }} {{ friendImportDialog.progress }} /
@@ -20,11 +20,7 @@
                     </Button>
                 </div>
             </div>
-            <InputGroupTextareaField
-                v-model="friendImportDialog.input"
-                :rows="10"
-               
-                input-class="resize-none mt-2" />
+            <InputGroupTextareaField v-model="friendImportDialog.input" :rows="10" input-class="resize-none mt-2" />
             <div>
                 <div class="mb-2">
                     <div class="flex items-center gap-2">
@@ -47,10 +43,10 @@
                             </SelectContent>
                         </Select>
 
-                        <Select class="ml-2"
+                        <Select
+                            class="ml-2"
                             :model-value="friendImportLocalFavoriteGroupSelection"
-                            @update:modelValue="handleFriendImportLocalGroupSelect"
-                           >
+                            @update:modelValue="handleFriendImportLocalGroupSelect">
                             <SelectTrigger size="sm">
                                 <SelectValue :placeholder="t('dialog.world_import.select_local_group_placeholder')" />
                             </SelectTrigger>
@@ -104,7 +100,7 @@
                     {{ t('dialog.friend_import.clear_errors') }}
                 </Button>
                 <h2 class="my-1.5 mx-0" style="font-weight: bold">{{ t('dialog.friend_import.errors') }}</h2>
-                <pre style="white-space: pre-wrap; font-size: 12px" v-text="friendImportDialog.errors"></pre>
+                <pre class="whitespace-pre-wrap text-xs" v-text="friendImportDialog.errors"></pre>
             </template>
             <DataTableLayout
                 class="min-w-0 w-full"
diff --git a/src/views/Favorites/dialogs/WorldImportDialog.vue b/src/views/Favorites/dialogs/WorldImportDialog.vue
index d00e5a9c..a4d4ae22 100644
--- a/src/views/Favorites/dialogs/WorldImportDialog.vue
+++ b/src/views/Favorites/dialogs/WorldImportDialog.vue
@@ -5,7 +5,7 @@
                 <DialogTitle>{{ t('dialog.world_import.header') }}</DialogTitle>
             </DialogHeader>
             <div style="display: flex; align-items: center; justify-content: space-between">
-                <div style="font-size: 12px">{{ t('dialog.world_import.description') }}</div>
+                <div class="text-xs">{{ t('dialog.world_import.description') }}</div>
                 <div style="display: flex; align-items: center">
                     <div v-if="worldImportDialog.progress">
                         {{ t('dialog.world_import.process_progress') }}
@@ -101,7 +101,7 @@
                 <h2 class="my-1.5 mx-0" style="font-weight: bold">
                     {{ t('dialog.world_import.errors') }}
                 </h2>
-                <pre style="white-space: pre-wrap; font-size: 12px" v-text="worldImportDialog.errors"></pre>
+                <pre class="whitespace-pre-wrap text-xs" v-text="worldImportDialog.errors"></pre>
             </template>
             <DataTableLayout
                 class="min-w-0 w-full"
diff --git a/src/views/Login/Login.vue b/src/views/Login/Login.vue
index a4b820cb..29958e30 100644
--- a/src/views/Login/Login.vue
+++ b/src/views/Login/Login.vue
@@ -132,7 +132,7 @@
             </div>
 
             <div class="x-legal-notice-container">
-                <div style="text-align: center; font-size: 12px">
+                <div class="text-center text-xs">
                     <p>
                         <a class="cursor-pointer" @click="openExternalLink('https://vrchat.com/home/password')">{{
                             t('view.login.forgotPassword')
diff --git a/src/views/Notifications/dialogs/EditAndSendInviteResponseDialog.vue b/src/views/Notifications/dialogs/EditAndSendInviteResponseDialog.vue
index e7d42ab7..5aea82eb 100644
--- a/src/views/Notifications/dialogs/EditAndSendInviteResponseDialog.vue
+++ b/src/views/Notifications/dialogs/EditAndSendInviteResponseDialog.vue
@@ -6,7 +6,7 @@
             <DialogHeader>
                 <DialogTitle>{{ t('dialog.edit_send_invite_response_message.header') }}</DialogTitle>
             </DialogHeader>
-            <div style="font-size: 12px">
+            <div class="text-xs">
                 <span>{{ t('dialog.edit_send_invite_response_message.description') }}</span>
             </div>
             <InputGroupTextareaField
diff --git a/src/views/Notifications/dialogs/SendInviteResponseConfirmDialog.vue b/src/views/Notifications/dialogs/SendInviteResponseConfirmDialog.vue
index 609653b7..2aabbf7e 100644
--- a/src/views/Notifications/dialogs/SendInviteResponseConfirmDialog.vue
+++ b/src/views/Notifications/dialogs/SendInviteResponseConfirmDialog.vue
@@ -6,7 +6,7 @@
             <DialogHeader>
                 <DialogTitle>{{ t('dialog.invite_response_message.header') }}</DialogTitle>
             </DialogHeader>
-            <div style="font-size: 12px">
+            <div class="text-xs">
                 <span>{{ t('dialog.invite_response_message.confirmation') }}</span>
             </div>
 
diff --git a/src/views/PlayerList/PlayerList.vue b/src/views/PlayerList/PlayerList.vue
index 3fe77718..d2c1ec44 100644
--- a/src/views/PlayerList/PlayerList.vue
+++ b/src/views/PlayerList/PlayerList.vue
@@ -36,8 +36,7 @@
                     </div>
                     <div>
                         <span
-                            class="cursor-pointer x-grey"
-                            style="font-family: monospace"
+                            class="cursor-pointer x-grey font-mono"
                             @click="showUserDialog(currentInstanceWorld.ref.authorId)"
                             v-text="currentInstanceWorld.ref.authorName"></span>
                     </div>
diff --git a/src/views/PlayerList/components/PhotonEventTable.vue b/src/views/PlayerList/components/PhotonEventTable.vue
index 773201d0..0c7d3caf 100644
--- a/src/views/PlayerList/components/PhotonEventTable.vue
+++ b/src/views/PlayerList/components/PhotonEventTable.vue
@@ -29,7 +29,7 @@
                 t('view.player_list.photon.chatbox_blacklist')
             }}</Button>
             <TooltipWrapper side="bottom" :content="t('view.player_list.photon.status_tooltip')">
-                <div style="display: inline-flex; align-items: center; font-size: 14px">
+                <div class="inline-flex items-center text-sm">
                     <span v-if="ipcEnabled && !photonEventIcon">🟢</span>
                     <span v-else-if="ipcEnabled">⚪</span>
                     <span v-else>🔴</span>
@@ -45,8 +45,7 @@
                     :table-style="tableStyle"
                     :page-sizes="pageSizes"
                     :total-items="currentTotal"
-                    :on-page-size-change="handleCurrentPageSizeChange"
-                    />
+                    :on-page-size-change="handleCurrentPageSizeChange" />
             </template>
             <template #previous>
                 <DataTableLayout
diff --git a/src/views/Search/Search.vue b/src/views/Search/Search.vue
index 9b8e0ae3..458d434b 100644
--- a/src/views/Search/Search.vue
+++ b/src/views/Search/Search.vue
@@ -180,7 +180,7 @@
                                     <RefreshCw v-else />
                                 </Button>
                             </TooltipWrapper>
-                            <span style="font-size: 14px; margin-left: 6px; margin-right: 6px">{{
+                            <span class="text-sm mx-1.5">{{
                                 t('view.search.avatar.result_count', {
                                     count: searchAvatarResults.length
                                 })
@@ -334,13 +334,8 @@
                                     <span v-text="group.name"></span>
                                     <span style="margin-left: 6px; font-weight: normal">({{ group.memberCount }})</span>
                                     <span
-                                        class="text-muted-foreground"
-                                        style="
-                                            margin-left: 6px;
-                                            font-weight: normal;
-                                            font-family: monospace;
-                                            font-size: 12px;
-                                        "
+                                        class="text-muted-foreground font-mono text-xs"
+                                        style="margin-left: 6px; font-weight: normal"
                                         >{{ group.shortCode }}.{{ group.discriminator }}</span
                                     >
                                 </span>
diff --git a/src/views/Settings/dialogs/LaunchOptionsDialog.vue b/src/views/Settings/dialogs/LaunchOptionsDialog.vue
index 50f72ab2..f4315211 100644
--- a/src/views/Settings/dialogs/LaunchOptionsDialog.vue
+++ b/src/views/Settings/dialogs/LaunchOptionsDialog.vue
@@ -4,7 +4,7 @@
             <DialogHeader>
                 <DialogTitle>{{ t('dialog.launch_options.header') }}</DialogTitle>
             </DialogHeader>
-            <div style="font-size: 12px">
+            <div class="text-xs">
                 {{ t('dialog.launch_options.description') }} <br />
                 {{ t('dialog.launch_options.example') }}
                 <div>--fps=144</div>
diff --git a/src/views/Settings/dialogs/NotificationPositionDialog.vue b/src/views/Settings/dialogs/NotificationPositionDialog.vue
index bb6143bf..1d1743f2 100644
--- a/src/views/Settings/dialogs/NotificationPositionDialog.vue
+++ b/src/views/Settings/dialogs/NotificationPositionDialog.vue
@@ -4,7 +4,7 @@
             <DialogHeader>
                 <DialogTitle>{{ t('dialog.notification_position.header') }}</DialogTitle>
             </DialogHeader>
-            <div style="font-size: 12px">
+            <div class="text-xs">
                 {{ t('dialog.notification_position.description') }}
             </div>
             <div class="relative mx-auto mt-4 size-75">
diff --git a/src/views/Settings/dialogs/OpenSourceSoftwareNoticeDialog.vue b/src/views/Settings/dialogs/OpenSourceSoftwareNoticeDialog.vue
index fa9f9a3e..8a9dee8c 100644
--- a/src/views/Settings/dialogs/OpenSourceSoftwareNoticeDialog.vue
+++ b/src/views/Settings/dialogs/OpenSourceSoftwareNoticeDialog.vue
@@ -11,7 +11,7 @@
 
                 <div class="mt-4" v-for="lib in openSourceSoftwareLicenses" :key="lib.name">
                     <p style="font-weight: bold">{{ lib.name }}</p>
-                    <pre style="font-size: 12px; white-space: pre-line">{{ lib.licenseText }}</pre>
+                    <pre class="text-xs whitespace-pre-line">{{ lib.licenseText }}</pre>
                 </div>
             </div>
         </DialogContent>
diff --git a/src/views/Settings/dialogs/VRChatConfigDialog.vue b/src/views/Settings/dialogs/VRChatConfigDialog.vue
index 14702af4..a8a21750 100644
--- a/src/views/Settings/dialogs/VRChatConfigDialog.vue
+++ b/src/views/Settings/dialogs/VRChatConfigDialog.vue
@@ -5,7 +5,7 @@
                 <DialogTitle>{{ t('dialog.config_json.header') }}</DialogTitle>
             </DialogHeader>
             <div>
-                <div style="font-size: 12px; word-break: keep-all">
+                <div class="text-xs break-keep">
                     {{ t('dialog.config_json.description1') }} <br />
                     {{ t('dialog.config_json.description2') }}
                 </div>
diff --git a/src/views/Settings/dialogs/YouTubeApiDialog.vue b/src/views/Settings/dialogs/YouTubeApiDialog.vue
index e1049fb5..939f9601 100644
--- a/src/views/Settings/dialogs/YouTubeApiDialog.vue
+++ b/src/views/Settings/dialogs/YouTubeApiDialog.vue
@@ -4,7 +4,7 @@
             <DialogHeader>
                 <DialogTitle>{{ t('dialog.youtube_api.header') }}</DialogTitle>
             </DialogHeader>
-            <div style="font-size: 12px">{{ t('dialog.youtube_api.description') }} <br /></div>
+            <div class="text-xs">{{ t('dialog.youtube_api.description') }} <br /></div>
 
             <InputGroupTextareaField
                 v-model="youTubeApiKey"
@@ -15,9 +15,7 @@
                 show-count />
 
             <DialogFooter>
-                <Button
-                    variant="outline"
-                    @click="openExternalLink('https://smashballoon.com/doc/youtube-api-key/')">
+                <Button variant="outline" @click="openExternalLink('https://smashballoon.com/doc/youtube-api-key/')">
                     {{ t('dialog.youtube_api.guide') }}
                 </Button>
                 <Button @click="testYouTubeApiKey">
diff --git a/src/views/Tools/ScreenshotMetadata.vue b/src/views/Tools/ScreenshotMetadata.vue
index 8443d5b4..8e3f0311 100644
--- a/src/views/Tools/ScreenshotMetadata.vue
+++ b/src/views/Tools/ScreenshotMetadata.vue
@@ -69,7 +69,7 @@
                 </Select>
             </div>
             <template v-if="screenshotMetadataDialog.searchIndex !== null">
-                <span class="ml-2" style="white-space: pre-wrap; font-size: 12px">{{
+                <span class="ml-2 whitespace-pre-wrap text-xs">{{
                     screenshotMetadataDialog.searchIndex + 1 + '/' + screenshotMetadataDialog.searchResults.length
                 }}</span>
             </template>
@@ -133,9 +133,7 @@
                 </Carousel>
             </div>
             <template v-if="screenshotMetadataDialog.metadata.error">
-                <pre
-                    style="white-space: pre-wrap; font-size: 12px"
-                    v-text="screenshotMetadataDialog.metadata.error"></pre>
+                <pre class="whitespace-pre-wrap text-xs" v-text="screenshotMetadataDialog.metadata.error"></pre>
                 <br />
             </template>
             <span v-for="user in screenshotMetadataDialog.metadata.players" :key="user.id" style="margin-top: 6px">
diff --git a/src/views/Tools/dialogs/EditInviteMessageDialog.vue b/src/views/Tools/dialogs/EditInviteMessageDialog.vue
index 11ad42ed..742c88a0 100644
--- a/src/views/Tools/dialogs/EditInviteMessageDialog.vue
+++ b/src/views/Tools/dialogs/EditInviteMessageDialog.vue
@@ -4,7 +4,7 @@
             <DialogHeader>
                 <DialogTitle>{{ t('dialog.edit_invite_message.header') }}</DialogTitle>
             </DialogHeader>
-            <div style="font-size: 12px">
+            <div class="text-xs">
                 <span>{{ t('dialog.edit_invite_message.description') }}</span>
                 <InputGroupTextareaField
                     v-model="message"
diff --git a/src/views/Tools/dialogs/ExportDiscordNamesDialog.vue b/src/views/Tools/dialogs/ExportDiscordNamesDialog.vue
index 62da1ad4..d65ffacb 100644
--- a/src/views/Tools/dialogs/ExportDiscordNamesDialog.vue
+++ b/src/views/Tools/dialogs/ExportDiscordNamesDialog.vue
@@ -4,14 +4,10 @@
             <DialogHeader>
                 <DialogTitle>{{ t('dialog.discord_names.header') }}</DialogTitle>
             </DialogHeader>
-            <div style="font-size: 12px">
+            <div class="text-xs">
                 {{ t('dialog.discord_names.description') }}
             </div>
-            <InputGroupTextareaField
-                v-model="discordNamesContent"
-                :rows="15"
-                readonly
-                input-class="resize-none mt-4" />
+            <InputGroupTextareaField v-model="discordNamesContent" :rows="15" readonly input-class="resize-none mt-4" />
         </DialogContent>
     </Dialog>
 </template>
diff --git a/src/views/Tools/dialogs/NoteExportDialog.vue b/src/views/Tools/dialogs/NoteExportDialog.vue
index 55200aaf..f1a78ba7 100644
--- a/src/views/Tools/dialogs/NoteExportDialog.vue
+++ b/src/views/Tools/dialogs/NoteExportDialog.vue
@@ -4,7 +4,7 @@
             <DialogHeader>
                 <DialogTitle>{{ t('dialog.note_export.header') }}</DialogTitle>
             </DialogHeader>
-            <div style="font-size: 12px">
+            <div class="text-xs">
                 {{ t('dialog.note_export.description1') }} <br />
                 {{ t('dialog.note_export.description2') }} <br />
                 {{ t('dialog.note_export.description3') }} <br />
@@ -36,7 +36,7 @@
                 <h2 class="m-0" style="font-weight: bold">
                     {{ t('dialog.note_export.errors') }}
                 </h2>
-                <pre style="white-space: pre-wrap; font-size: 12px" v-text="errors"></pre>
+                <pre class="whitespace-pre-wrap text-xs" v-text="errors"></pre>
             </template>
 
             <DataTableLayout
diff --git a/src/views/Tools/dialogs/RegistryBackupDialog.vue b/src/views/Tools/dialogs/RegistryBackupDialog.vue
index b30292c2..a41581fb 100644
--- a/src/views/Tools/dialogs/RegistryBackupDialog.vue
+++ b/src/views/Tools/dialogs/RegistryBackupDialog.vue
@@ -5,13 +5,11 @@
                 <DialogTitle>{{ t('dialog.registry_backup.header') }}</DialogTitle>
             </DialogHeader>
             <div class="mt-2">
-                <div style="display: flex; align-items: center; justify-content: space-between; font-size: 12px">
+                <div class="flex items-center justify-between text-xs">
                     <span class="name mr-6">{{ t('dialog.registry_backup.auto_backup') }}</span>
                     <Switch :model-value="vrcRegistryAutoBackup" @update:modelValue="setVrcRegistryAutoBackup" />
                 </div>
-                <div
-                    class="mt-1.5"
-                    style="display: flex; align-items: center; justify-content: space-between; font-size: 12px">
+                <div class="mt-1.5 flex items-center justify-between text-xs">
                     <span class="name mr-6">{{ t('dialog.registry_backup.ask_to_restore') }}</span>
                     <Switch :model-value="vrcRegistryAskRestore" @update:modelValue="setVrcRegistryAskRestore" />
                 </div>