replace inline styles with utility classes in dialogs

2026-04-29 11:43:48 +02:00 · 2026-03-09 18:17:37 +09:00
parent e5500f47be
commit feb04b036f
44 changed files with 148 additions and 301 deletions
--- 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>
--- 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"
--- 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"
--- 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"
--- 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')
--- 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
--- 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>

--- 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>
--- 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
--- 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>
--- 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>
--- 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">
--- 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>
--- 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>
--- 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">
--- 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">
--- 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"
--- 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>
--- 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
--- 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>