replace inline styles with utility classes in dialogs

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"

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>

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

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

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>

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

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

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"

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 },

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>

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));