refactor css

src/app.css

@@ -35,309 +35,10 @@ html.dark .x-container {
     background: var(--sidebar);
 }
 
-.x-friend-list {
-    padding: 0 10px;
-    overflow: hidden auto;
-}
-
-.x-friend-group > .rotation-transition {
-    transition: transform 0.3s;
-}
-
-.x-dialog .x-friend-list {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: flex-start;
-    max-height: 300px;
-}
-
-.x-friend-list > .x-friend-group {
-    padding: 16px 0 5px;
-    font-size: 12px;
-}
-
-.x-friend-item {
-    box-sizing: border-box;
-    display: flex;
-    align-items: center;
-    padding: 6px;
-    font-size: 13px;
-    cursor: pointer;
-}
-
-.x-friend-item > .avatar {
-    position: relative;
-    display: inline-block;
-    flex: none;
-    width: 36px;
-    height: 36px;
-    margin-right: 10px;
-    background-color: transparent;
-}
-
-.x-friend-item > img.avatar,
-img.friends-list-avatar {
-    width: unset;
-    height: 22.5px;
-    margin-right: 0;
-    margin-left: 5px;
-    border-radius: 2px;
-}
-
-.x-friend-item > .avatar > img,
-.x-friend-item > .avatar > .avatar > img {
-    width: 100%;
-    height: 100%;
-    border-radius: 50%;
-    object-fit: cover;
-    background-color: transparent;
-}
-
-.x-friend-item .active img,
-.x-friend-item .offline img {
-    filter: grayscale(1);
-}
-
-.x-friend-item:hover .active img,
-.x-friend-item:hover .offline img {
-    filter: none;
-}
-
-.x-friend-item .status-icon.mobile img {
-    mask-image: url(/images/masks/usercutoutmobile.svg);
-}
-
-.x-friend-item .status-icon.mobile::after {
-    position: absolute;
-    right: -2px;
-    bottom: -0.5px;
-    width: 14px;
-    height: 14px;
-    content: '';
-    border-radius: 0px;
-    mask-image: url(/images/masks/phone.svg) !important;
-}
-
-.x-friend-item .status-icon img {
-    mask-image: url(/images/masks/usercutout.svg);
-}
-
-.x-friend-item .status-icon::after {
-    position: absolute;
-    right: 0.75px;
-    bottom: 0.75px;
-    width: 9px;
-    height: 9px;
-    content: '';
-    background: var(--status-offline);
-    border-radius: 50%;
-}
-
-.x-friend-item .status-icon.active::after {
-    background: var(--status-active);
-}
-
-.x-friend-item .status-icon.online::after {
-    background: var(--status-online);
-}
-
-.x-friend-item .status-icon.joinme::after {
-    background: var(--status-joinme);
-    mask-image: url(/images/masks/joinme.svg);
-}
-
-.x-friend-item .status-icon.askme::after {
-    background: var(--status-askme);
-    mask-image: url(/images/masks/askme.svg);
-}
-
-.x-friend-item .status-icon.busy::after {
-    background: var(--status-busy);
-    mask-image: url(/images/masks/busy.svg);
-}
-
-.x-friend-item .status-icon.offline::after {
-    background: var(--status-offline);
-}
-
-.x-friend-item > .detail {
-    flex: 1;
-    overflow: hidden;
-}
-
-.x-friend-item > .detail > .name,
-.x-friend-item > .detail > .extra {
-    display: block;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-.x-friend-item > .detail > .name {
-    font-weight: 500;
-    line-height: 18px;
-}
-
-.x-friend-item > .detail > .extra {
-    font-size: 12px;
-}
-
-.x-friend-item > .detail > .extra > span > span:first-child {
-    scale: 0.9;
-    margin-right: 2px;
-}
-
-.x-friend-item:hover {
-    border-radius: 8px;
-}
-
-.x-friend-item-no-hover:hover {
-    background: unset !important;
-}
-
-.x-friend-item-border:hover {
-    border-top-left-radius: 25px;
-    border-top-right-radius: 5px;
-    border-bottom-right-radius: 5px;
-    border-bottom-left-radius: 25px;
-}
-
-.x-dialog .x-friend-item {
-    width: 167px;
-}
-
-i.x-user-status,
-i.x-status-icon {
-    display: inline-block;
-    width: 10px;
-    height: 10px;
-    background: var(--status-offline-alt);
-    border-radius: 50%;
-}
-
-i.x-user-status.active {
-    background: var(--status-active);
-}
-
-i.x-user-status.online {
-    background: var(--status-online);
-}
-
-i.x-user-status.joinme {
-    background: var(--status-joinme);
-    mask-image: url(/images/masks/joinme.svg);
-}
-
-i.x-user-status.askme {
-    background: var(--status-askme);
-    mask-image: url(/images/masks/askme.svg);
-}
-
-i.x-user-status.busy {
-    background: var(--status-busy);
-    mask-image: url(/images/masks/busy.svg);
-}
-
-i.x-status-icon.green {
-    background: var(--status-online);
-}
-
-i.x-status-icon.blue {
-    background: var(--status-joinme);
-}
-
-i.x-status-icon.orange {
-    background: var(--status-askme);
-}
-
-i.x-status-icon.red {
-    background: var(--status-busy);
-}
-
-.x-tag-platform-pc {
-    color: var(--platform-pc);
-    border-color: var(--platform-pc) !important;
-}
-
-.x-tag-platform-quest {
-    color: var(--platform-quest);
-    border-color: var(--platform-quest) !important;
-}
-
-.x-tag-friend {
-    color: var(--color-amber-400);
-    border-color: var(--color-amber-400) !important;
-}
-
-.x-tag-age-verification {
-    color: #3b82f6;
-    border-color: #3b82f6 !important;
-}
-
-.x-tag-discord {
-    color: #7289da;
-    border-color: #7289da !important;
-}
-
-.x-tag-border-left {
-    border-left: 0.8px solid;
-    margin-left: 5px;
-    padding-left: 5px;
-    padding-bottom: 0.5px;
-}
-
-.options-container {
-    margin-top: 30px;
-    padding: 0 10px 10px 10px;
-}
-
-.options-container .header-bar {
-    display: flex;
-    align-items: center;
-}
-
-.options-container .header {
-    font-weight: bold;
-    font-size: 20px;
-}
-
-.options-container .sub-header {
-    font-weight: bold;
-    font-size: 15px;
-}
-
-.options-container-item {
-    font-size: 12px;
-    margin-top: 5px;
-    display: flex;
-    align-items: center;
-}
-
-.options-container-item .name {
-    display: inline-block;
-    width: 235px;
-}
-
 .x-app > .x-container {
     padding-top: 15px;
 }
 
-/* Bio diff */
-.x-text-removed {
-    text-decoration: line-through;
-    color: #ff0000;
-    background-color: rgba(255, 0, 0, 0.2);
-    padding: 2px 2px;
-    border-radius: 4px;
-}
-
-.x-text-added {
-    color: rgb(35, 188, 35);
-    background-color: rgba(76, 255, 80, 0.2);
-    padding: 2px 2px;
-    border-radius: 4px;
-}
-
 /*FIXME: this is a nasty temporary hack*/
 .force-pointer-on-hover a,
 .force-pointer-on-hover button,

src/components/InstanceActionBar.vue

@@ -80,11 +80,12 @@
                             <br /><br />
                         </template>
                         <span>
-                            <span class="x-tag-platform-pc">PC: </span>{{ instance?.platforms?.standalonewindows }}
+                            <span class="text-platform-pc border-platform-pc!">PC: </span
+                            >{{ instance?.platforms?.standalonewindows }}
                         </span>
-                        <br />
                         <span>
-                            <span class="x-tag-platform-quest">Android: </span>{{ instance?.platforms?.android }}
+                            <span class="text-platform-quest border-platform-quest!">Android: </span
+                            >{{ instance?.platforms?.android }}
                         </span>
                         <br />
                         <span><span>iOS: </span>{{ instance?.platforms?.ios }}</span>

src/components/dialogs/AvatarDialog/AvatarDialog.vue

@@ -44,36 +44,36 @@
                             </Badge>
                             <TooltipWrapper v-if="avatarDialog.isPC" side="top" content="PC">
                                 <Badge
-                                    class="x-tag-platform-pc"
+                                    class="text-platform-pc border-platform-pc!"
                                     variant="outline"
                                     style="margin-right: 5px; margin-top: 5px"
-                                    ><Monitor class="h-4 w-4 x-tag-platform-pc" />
+                                    ><Monitor class="h-4 w-4 text-platform-pc" />
                                     <span
                                         v-if="avatarDialog.platformInfo.pc"
-                                        :class="['x-grey', 'x-tag-platform-pc', 'x-tag-border-left']"
+                                        class="x-grey text-platform-pc border-l-[0.8px] border-solid ml-1.5 pl-1.5 pb-px"
                                         >{{ avatarDialog.platformInfo.pc.performanceRating }}</span
                                     >
                                     <span
                                         v-if="avatarDialog.fileAnalysis.standalonewindows?._fileSize"
-                                        :class="['x-grey', 'x-tag-platform-pc', 'x-tag-border-left']"
+                                        class="x-grey text-platform-pc border-l-[0.8px] border-solid ml-1.5 pl-1.5 pb-px"
                                         >{{ avatarDialog.fileAnalysis.standalonewindows._fileSize }}</span
                                     >
                                 </Badge>
                             </TooltipWrapper>
                             <TooltipWrapper v-if="avatarDialog.isQuest" side="top" content="Android">
                                 <Badge
-                                    class="x-tag-platform-quest"
+                                    class="text-platform-quest border-platform-quest!"
                                     variant="outline"
                                     style="margin-right: 5px; margin-top: 5px"
-                                    ><Smartphone class="h-4 w-4 x-tag-platform-quest" />
+                                    ><Smartphone class="h-4 w-4 text-platform-quest" />
                                     <span
                                         v-if="avatarDialog.platformInfo.android"
-                                        :class="['x-grey', 'x-tag-platform-quest', 'x-tag-border-left']"
+                                        class="x-grey text-platform-quest border-l-[0.8px] border-solid ml-1.5 pl-1.5 pb-px"
                                         >{{ avatarDialog.platformInfo.android.performanceRating }}</span
                                     >
                                     <span
                                         v-if="avatarDialog.fileAnalysis.android?._fileSize"
-                                        :class="['x-grey', 'x-tag-platform-quest', 'x-tag-border-left']"
+                                        class="x-grey text-platform-quest border-l-[0.8px] border-solid ml-1.5 pl-1.5 pb-px"
                                         >{{ avatarDialog.fileAnalysis.android._fileSize }}</span
                                     >
                                 </Badge>
@@ -86,22 +86,12 @@
                                     ><Apple class="h-4 w-4 text-platform-ios" />
                                     <span
                                         v-if="avatarDialog.platformInfo.ios"
-                                        :class="[
+                                        class="x-grey text-platform-ios border-platform-ios border-l-[0.8px] border-solid ml-1.5 pl-1.5 pb-px"
-                                            'x-grey',
-                                            'x-tag-border-left',
-                                            'text-platform-ios',
-                                            'border-platform-ios'
-                                        ]"
                                         >{{ avatarDialog.platformInfo.ios.performanceRating }}</span
                                     >
                                     <span
                                         v-if="avatarDialog.fileAnalysis.ios?._fileSize"
-                                        :class="[
+                                        class="x-grey text-platform-ios border-platform-ios border-l-[0.8px] border-solid ml-1.5 pl-1.5 pb-px"
-                                            'x-grey',
-                                            'x-tag-border-left',
-                                            'text-platform-ios',
-                                            'border-platform-ios'
-                                        ]"
                                         >{{ avatarDialog.fileAnalysis.ios._fileSize }}</span
                                     >
                                 </Badge>
@@ -120,12 +110,14 @@
                                 variant="outline"
                                 style="margin-right: 5px; margin-top: 5px"
                                 >{{ t('view.favorite.avatars.styles') }}
-                                <span v-if="avatarDialog.ref.styles.primary" :class="['x-grey', 'x-tag-border-left']">{{
+                                <span
-                                    avatarDialog.ref.styles.primary
+                                    v-if="avatarDialog.ref.styles.primary"
-                                }}</span>
+                                    class="x-grey border-l-[0.8px] border-solid ml-1.5 pl-1.5 pb-px"
+                                    >{{ avatarDialog.ref.styles.primary }}</span
+                                >
                                 <span
                                     v-if="avatarDialog.ref.styles.secondary"
-                                    :class="['x-grey', 'x-tag-border-left']"
+                                    class="x-grey border-l-[0.8px] border-solid ml-1.5 pl-1.5 pb-px"
                                     >{{ avatarDialog.ref.styles.secondary }}</span
                                 >
                             </Badge>
@@ -140,7 +132,9 @@
                                 variant="outline"
                                 style="margin-right: 5px; margin-top: 5px"
                                 >{{ t('dialog.avatar.tags.impostor') }}
-                                <span v-if="avatarDialog.imposterVersion" :class="['x-grey', 'x-tag-border-left']"
+                                <span
+                                    v-if="avatarDialog.imposterVersion"
+                                    class="x-grey border-l-[0.8px] border-solid ml-1.5 pl-1.5 pb-px"
                                     >v{{ avatarDialog.imposterVersion }}</span
                                 >
                             </Badge>

src/components/dialogs/UserDialog/UserSummaryHeader.vue

@@ -84,7 +84,7 @@
                         v-if="userDialog.ref.ageVerified && userDialog.ref.ageVerificationStatus"
                         side="top"
                         :content="t('dialog.user.tags.age_verified')">
-                        <Badge variant="outline" class="x-tag-age-verification">
+                        <Badge variant="outline" class="text-[#3b82f6] border-[#3b82f6]!">
                             <template v-if="userDialog.ref.ageVerificationStatus === '18+'">
                                 <IdCard class="h-4 w-4" /> 18+
                             </template>
@@ -97,7 +97,7 @@
                         v-if="userDialog.isFriend && userDialog.friend"
                         side="top"
                         :content="t('dialog.user.tags.friend_number')">
-                        <Badge variant="outline" class="x-tag-friend">
+                        <Badge variant="outline" class="text-amber-400 border-amber-400!">
                             <UserPlus class="h-4 w-4" />
                             {{ userDialog.ref.$friendNumber ? userDialog.ref.$friendNumber : '' }}
                         </Badge>
@@ -106,7 +106,7 @@
                         v-if="userDialog.mutualFriendCount"
                         side="top"
                         :content="t('dialog.user.tags.mutual_friends')">
-                        <Badge variant="outline" class="x-tag-mutual-friend border-zinc-500/50! dark:border-zinc-400!">
+                        <Badge variant="outline" class="border-zinc-500/50! dark:border-zinc-400!">
                             <Users class="h-4 w-4" />
                             {{ userDialog.mutualFriendCount }}
                         </Badge>
@@ -117,7 +117,7 @@
                         :content="t('dialog.user.tags.open_in_discord')">
                         <Badge
                             variant="outline"
-                            class="x-tag-discord cursor-pointer"
+                            class="text-[#7289da] border-[#7289da]! cursor-pointer"
                             @click="openDiscordProfile(userDialog.ref.discordId)">
                             <i class="ri-discord-line text-xs"></i>
                             {{ t('dialog.user.tags.discord') }}
@@ -134,13 +134,13 @@
                     </Badge>
 
                     <TooltipWrapper v-if="userDialog.ref.$platform === 'standalonewindows'" side="top" content="PC">
-                        <Badge variant="outline" class="x-tag-platform-pc">
+                        <Badge variant="outline" class="text-platform-pc border-platform-pc!">
-                            <Monitor class="m-0.5 x-tag-platform-pc" />
+                            <Monitor class="m-0.5 text-platform-pc" />
                         </Badge>
                     </TooltipWrapper>
                     <TooltipWrapper v-else-if="userDialog.ref.$platform === 'android'" side="top" content="Android">
-                        <Badge variant="outline" class="x-tag-platform-quest">
+                        <Badge variant="outline" class="text-platform-quest border-platform-quest!">
-                            <Smartphone class="m-0.5 x-tag-platform-quest" />
+                            <Smartphone class="m-0.5 text-platform-quest" />
                         </Badge>
                     </TooltipWrapper>
                     <TooltipWrapper v-else-if="userDialog.ref.$platform === 'ios'" side="top" content="iOS">
@@ -148,7 +148,7 @@
                             <Apple class="m-0.5 text-platform-ios" />
                         </Badge>
                     </TooltipWrapper>
-                    <Badge v-else-if="userDialog.ref.$platform" variant="outline" class="x-tag-platform-other">
+                    <Badge v-else-if="userDialog.ref.$platform" variant="outline" class="text-muted-foreground">
                         {{ userDialog.ref.$platform }}
                     </Badge>
 

src/components/dialogs/WorldDialog/WorldDialog.vue

@@ -55,13 +55,13 @@
                             </Badge>
                             <TooltipWrapper v-if="worldDialog.isPC" side="top" content="PC">
                                 <Badge
-                                    class="x-tag-platform-pc"
+                                    class="text-platform-pc border-platform-pc!"
                                     variant="outline"
                                     style="margin-right: 5px; margin-top: 5px">
-                                    <Monitor class="h-4 w-4 x-tag-platform-pc" />
+                                    <Monitor class="h-4 w-4 text-platform-pc" />
                                     <span
                                         v-if="worldDialog.fileAnalysis.standalonewindows?._fileSize"
-                                        :class="['x-grey', 'x-tag-platform-pc', 'x-tag-border-left']">
+                                        class="x-grey text-platform-pc border-l-[0.8px] border-solid ml-1.5 pl-1.5 pb-px">
                                         {{ worldDialog.fileAnalysis.standalonewindows._fileSize }}
                                     </span>
                                 </Badge>
@@ -69,13 +69,13 @@
 
                             <TooltipWrapper v-if="worldDialog.isQuest" side="top" content="Quest">
                                 <Badge
-                                    class="x-tag-platform-quest"
+                                    class="text-platform-quest border-platform-quest!"
                                     variant="outline"
                                     style="margin-right: 5px; margin-top: 5px">
-                                    <Smartphone class="h-4 w-4 x-tag-platform-quest" />
+                                    <Smartphone class="h-4 w-4 text-platform-quest" />
                                     <span
                                         v-if="worldDialog.fileAnalysis.android?._fileSize"
-                                        :class="['x-grey', 'x-tag-platform-quest', 'x-tag-border-left']">
+                                        class="x-grey text-platform-quest border-l-[0.8px] border-solid ml-1.5 pl-1.5 pb-px">
                                         {{ worldDialog.fileAnalysis.android._fileSize }}
                                     </span>
                                 </Badge>
@@ -89,12 +89,7 @@
                                     <Apple class="h-4 w-4 text-platform-ios" />
                                     <span
                                         v-if="worldDialog.fileAnalysis.ios?._fileSize"
-                                        :class="[
+                                        class="x-grey text-platform-ios border-platform-ios border-l-[0.8px] border-solid ml-1.5 pl-1.5 pb-px">
-                                            'x-grey',
-                                            'x-tag-border-left',
-                                            'text-platform-ios',
-                                            'border-platform-ios'
-                                        ]">
                                         {{ worldDialog.fileAnalysis.ios._fileSize }}
                                     </span>
                                 </Badge>

src/styles/globals.css

@@ -11,6 +11,8 @@
 @import './animated-emoji.css';
 @import './fonts.css';
 @import './noty.css';
+@import './status-icon.css';
+@import './options-container.css';
 
 @custom-variant dark (&:is(.dark *));
 

src/styles/options-container.css

@@ -0,0 +1,36 @@
+/*
+ * Options container layout styles.
+ * Used in Settings, Tools, and Charts views.
+ */
+
+.options-container {
+    margin-top: 30px;
+    padding: 0 10px 10px 10px;
+}
+
+.options-container .header-bar {
+    display: flex;
+    align-items: center;
+}
+
+.options-container .header {
+    font-weight: bold;
+    font-size: 20px;
+}
+
+.options-container .sub-header {
+    font-weight: bold;
+    font-size: 15px;
+}
+
+.options-container-item {
+    font-size: 12px;
+    margin-top: 5px;
+    display: flex;
+    align-items: center;
+}
+
+.options-container-item .name {
+    display: inline-block;
+    width: 235px;
+}

src/styles/status-icon.css

@@ -67,3 +67,60 @@
     border-radius: 0;
     mask-image: url(/images/masks/phone.svg) !important;
 }
+
+/* Inline status dot indicators (used in dialogs and sidebar) */
+i.x-user-status,
+i.x-status-icon {
+    display: inline-block;
+    width: 10px;
+    height: 10px;
+    background: var(--status-offline-alt);
+    border-radius: 50%;
+}
+
+/* Suppress the ::after pseudo-element on inline <i> status dots.
+   The ::after is for avatar containers (.status-icon divs), not for <i> dots
+   which display status via their own background property. */
+i.x-user-status::after,
+i.x-status-icon::after {
+    display: none;
+}
+
+i.x-user-status.active {
+    background: var(--status-active);
+}
+
+i.x-user-status.online {
+    background: var(--status-online);
+}
+
+i.x-user-status.joinme {
+    background: var(--status-joinme);
+    mask-image: url(/images/masks/joinme.svg);
+}
+
+i.x-user-status.askme {
+    background: var(--status-askme);
+    mask-image: url(/images/masks/askme.svg);
+}
+
+i.x-user-status.busy {
+    background: var(--status-busy);
+    mask-image: url(/images/masks/busy.svg);
+}
+
+i.x-status-icon.green {
+    background: var(--status-online);
+}
+
+i.x-status-icon.blue {
+    background: var(--status-joinme);
+}
+
+i.x-status-icon.orange {
+    background: var(--status-askme);
+}
+
+i.x-status-icon.red {
+    background: var(--status-busy);
+}

src/views/Charts/components/MutualFriends.vue

@@ -32,7 +32,7 @@
                         :close-on-select="true"
                         :deselect-on-reselect="true">
                         <template #item="{ item, selected }">
-                            <div class="x-friend-item flex w-full items-center">
+                            <div class="flex w-full items-center gap-2">
                                 <template v-if="item.user">
                                     <div :class="['avatar', userStatusClass(item.user)]">
                                         <img :src="userImage(item.user)" loading="lazy" />
@@ -172,7 +172,7 @@
                                             :search-placeholder="t('view.charts.mutual_friend.actions.go_to_friend')"
                                             :multiple="true">
                                             <template #item="{ item, selected }">
-                                                <div class="x-friend-item flex w-full items-center">
+                                                <div class="flex w-full items-center gap-2">
                                                     <template v-if="item.user">
                                                         <div :class="['avatar', userStatusClass(item.user)]">
                                                             <img :src="userImage(item.user)" loading="lazy" />

src/views/Login/Login.vue

@@ -103,13 +103,18 @@
                             <div
                                 v-for="user in savedCredentials"
                                 :key="user.user.id"
-                                class="x-friend-item hover:bg-muted rounded-xs"
+                                class="box-border flex items-center p-1.5 text-[13px] cursor-pointer hover:bg-muted rounded-xs"
                                 @click="clickSavedLogin(user)">
-                                <div class="avatar">
+                                <div class="relative inline-block flex-none size-9 mr-2.5">
-                                    <img :src="userImage(user.user)" loading="lazy" />
+                                    <img
+                                        class="size-full rounded-full object-cover"
+                                        :src="userImage(user.user)"
+                                        loading="lazy" />
                                 </div>
-                                <div class="detail">
+                                <div class="flex-1 overflow-hidden">
-                                    <span class="name" v-text="user.user.displayName"></span>
+                                    <span
+                                        class="block truncate font-medium leading-[18px]"
+                                        v-text="user.user.displayName"></span>
                                     <span class="block truncate text-xs" v-text="user.user.username"></span>
                                     <span class="block truncate text-xs" v-text="user.loginParams.endpoint"></span>
                                 </div>
@@ -210,11 +215,19 @@
         }
     });
 
+    /**
+     *
+     * @param userId
+     */
     async function clickDeleteSavedLogin(userId) {
         await deleteSavedLogin(userId);
         await updateSavedCredentials();
     }
 
+    /**
+     *
+     * @param user
+     */
     async function clickSavedLogin(user) {
         await relogin(user);
         await updateSavedCredentials();
@@ -227,6 +240,9 @@
         await updateSavedCredentials();
     });
 
+    /**
+     *
+     */
     async function updateSavedCredentials() {
         if (watchState.isLoggedIn) {
             return;
@@ -234,6 +250,9 @@
         savedCredentials.value = await getAllSavedCredentials();
     }
 
+    /**
+     *
+     */
     function postLoginRedirect() {
         const redirect = route.query.redirect;
         if (typeof redirect === 'string' && redirect.startsWith('/') && redirect !== '/login') {
@@ -340,7 +359,7 @@
         display: grid;
     }
 
-    .x-saved-account-list > .x-friend-item {
+    .x-saved-account-list > div {
         width: 100%;
     }
 

src/views/MyAvatars/components/MyAvatarCard.vue

@@ -166,10 +166,13 @@
 
                     <span class="text-muted-foreground">{{ t('dialog.avatar.info.platform') }}</span>
                     <div class="flex items-center gap-1">
-                        <Badge v-if="platformInfo.isPC" class="x-tag-platform-pc" variant="outline">
+                        <Badge v-if="platformInfo.isPC" class="text-platform-pc border-platform-pc!" variant="outline">
                             <Monitor class="h-3 w-3" />
                         </Badge>
-                        <Badge v-if="platformInfo.isQuest" class="x-tag-platform-quest" variant="outline">
+                        <Badge
+                            v-if="platformInfo.isQuest"
+                            class="text-platform-quest border-platform-quest!"
+                            variant="outline">
                             <Smartphone class="h-3 w-3" />
                         </Badge>
                         <Badge

src/views/PlayerList/PlayerList.vue

@@ -58,21 +58,27 @@
                             {{ t('dialog.world.tags.private') }}
                         </Badge>
                         <TooltipWrapper v-if="currentInstanceWorld.isPC" side="top" content="PC">
-                            <Badge class="x-tag-platform-pc" variant="outline" style="margin-right: 5px"
+                            <Badge
+                                class="text-platform-pc border-platform-pc!"
+                                variant="outline"
+                                style="margin-right: 5px"
                                 ><Monitor class="h-4 w-4" />
                                 <span
                                     v-if="currentInstanceWorld.fileAnalysis.standalonewindows?._fileSize"
-                                    :class="['x-grey', 'x-tag-platform-pc', 'x-tag-border-left']"
+                                    class="x-grey text-platform-pc border-l-[0.8px] border-solid ml-1.5 pl-1.5 pb-px"
                                     >{{ currentInstanceWorld.fileAnalysis.standalonewindows._fileSize }}</span
                                 >
                             </Badge>
                         </TooltipWrapper>
                         <TooltipWrapper v-if="currentInstanceWorld.isQuest" side="top" content="Android">
-                            <Badge class="x-tag-platform-quest" variant="outline" style="margin-right: 5px"
+                            <Badge
+                                class="text-platform-quest border-platform-quest!"
+                                variant="outline"
+                                style="margin-right: 5px"
                                 ><Smartphone class="h-4 w-4" />
                                 <span
                                     v-if="currentInstanceWorld.fileAnalysis.android?._fileSize"
-                                    :class="['x-grey', 'x-tag-platform-quest', 'x-tag-border-left']"
+                                    class="x-grey text-platform-quest border-l-[0.8px] border-solid ml-1.5 pl-1.5 pb-px"
                                     >{{ currentInstanceWorld.fileAnalysis.android._fileSize }}</span
                                 >
                             </Badge>
@@ -85,7 +91,7 @@
                                 ><Apple class="h-4 w-4 text-platform-ios" />
                                 <span
                                     v-if="currentInstanceWorld.fileAnalysis.ios?._fileSize"
-                                    :class="['x-grey', 'x-tag-border-left', 'text-platform-ios', 'border-platform-ios']"
+                                    class="x-grey text-platform-ios border-platform-ios border-l-[0.8px] border-solid ml-1.5 pl-1.5 pb-px"
                                     >{{ currentInstanceWorld.fileAnalysis.ios._fileSize }}</span
                                 >
                             </Badge>
@@ -118,9 +124,11 @@
                     </div>
                 </div>
                 <div style="display: flex; flex-direction: column; margin-left: 20px">
-                    <div class="x-friend-item" style="cursor: default">
+                    <div class="box-border flex items-center p-1.5 text-[13px] cursor-default">
-                        <div class="detail">
+                        <div class="flex-1 overflow-hidden">
-                            <span class="name">{{ t('dialog.world.info.capacity') }}</span>
+                            <span class="block truncate font-medium leading-[18px]">{{
+                                t('dialog.world.info.capacity')
+                            }}</span>
                             <span class="block truncate text-xs"
                                 >{{ commaNumber(currentInstanceWorld.ref.recommendedCapacity) }} ({{
                                     commaNumber(currentInstanceWorld.ref.capacity)
@@ -128,9 +136,11 @@
                             >
                         </div>
                     </div>
-                    <div class="x-friend-item" style="cursor: default">
+                    <div class="box-border flex items-center p-1.5 text-[13px] cursor-default">
-                        <div class="detail">
+                        <div class="flex-1 overflow-hidden">
-                            <span class="name">{{ t('dialog.world.info.last_updated') }}</span>
+                            <span class="block truncate font-medium leading-[18px]">{{
+                                t('dialog.world.info.last_updated')
+                            }}</span>
                             <span class="block truncate text-xs">{{
                                 formatDateFilter(
                                     currentInstanceWorld.fileAnalysis.standalonewindows?.created_at,
@@ -139,9 +149,11 @@
                             }}</span>
                         </div>
                     </div>
-                    <div class="x-friend-item" style="cursor: default">
+                    <div class="box-border flex items-center p-1.5 text-[13px] cursor-default">
-                        <div class="detail">
+                        <div class="flex-1 overflow-hidden">
-                            <span class="name">{{ t('dialog.world.info.created_at') }}</span>
+                            <span class="block truncate font-medium leading-[18px]">{{
+                                t('dialog.world.info.created_at')
+                            }}</span>
                             <span class="block truncate text-xs">{{
                                 formatDateFilter(currentInstanceWorld.ref.created_at, 'long')
                             }}</span>

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

@@ -76,10 +76,12 @@
         </div>
         <div class="options-container">
             <span class="header">{{ t('view.profile.game_info.header') }}</span>
-            <div class="x-friend-list" style="margin-top: 10px">
+            <div class="px-2.5 overflow-y-auto overflow-x-hidden" style="margin-top: 10px">
-                <div class="x-friend-item">
+                <div class="box-border flex items-center p-1.5 text-[13px] cursor-pointer">
-                    <div class="detail" @click="getVisits">
+                    <div class="flex-1 overflow-hidden" @click="getVisits">
-                        <span class="name">{{ t('view.profile.game_info.online_users') }}</span>
+                        <span class="block truncate font-medium leading-[18px]">{{
+                            t('view.profile.game_info.online_users')
+                        }}</span>
                         <span v-if="visits" class="block truncate text-xs">{{
                             t('view.profile.game_info.user_online', { count: visits })
                         }}</span>

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

@@ -2,31 +2,43 @@
     <div>
         <div class="options-container" style="margin-top: 0">
             <span class="header">{{ t('view.settings.general.general.header') }}</span>
-            <div class="x-friend-list" style="margin-top: 10px">
+            <div class="px-2.5 overflow-y-auto overflow-x-hidden" style="margin-top: 10px">
-                <div class="x-friend-item" style="cursor: default">
+                <div class="box-border flex items-center p-1.5 text-[13px] cursor-default">
-                    <div class="detail">
+                    <div class="flex-1 overflow-hidden">
-                        <span class="name">{{ t('view.settings.general.general.version') }}</span>
+                        <span class="block truncate font-medium leading-[18px]">{{
+                            t('view.settings.general.general.version')
+                        }}</span>
                         <span class="block truncate text-xs" v-text="appVersion"></span>
                     </div>
                 </div>
-                <div class="x-friend-item" @click="checkForVRCXUpdate">
+                <div class="box-border flex items-center p-1.5 text-[13px] cursor-pointer" @click="checkForVRCXUpdate">
-                    <div class="detail">
+                    <div class="flex-1 overflow-hidden">
-                        <span class="name">{{ t('view.settings.general.general.latest_app_version') }}</span>
+                        <span class="block truncate font-medium leading-[18px]">{{
+                            t('view.settings.general.general.latest_app_version')
+                        }}</span>
                         <span v-if="latestAppVersion" class="block truncate text-xs" v-text="latestAppVersion"></span>
                         <span v-else class="block truncate text-xs">{{
                             t('view.settings.general.general.latest_app_version_refresh')
                         }}</span>
                     </div>
                 </div>
-                <div class="x-friend-item" @click="openExternalLink(links.github)">
+                <div
-                    <div class="detail">
+                    class="box-border flex items-center p-1.5 text-[13px] cursor-pointer"
-                        <span class="name">{{ t('view.settings.general.general.repository_url') }}</span>
+                    @click="openExternalLink(links.github)">
+                    <div class="flex-1 overflow-hidden">
+                        <span class="block truncate font-medium leading-[18px]">{{
+                            t('view.settings.general.general.repository_url')
+                        }}</span>
                         <span v-once class="block truncate text-xs">{{ links.github }}</span>
                     </div>
                 </div>
-                <div class="x-friend-item" @click="openExternalLink(links.discord)">
+                <div
-                    <div class="detail">
+                    class="box-border flex items-center p-1.5 text-[13px] cursor-pointer"
-                        <span class="name">{{ t('view.settings.general.general.support') }}</span>
+                    @click="openExternalLink(links.discord)">
+                    <div class="flex-1 overflow-hidden">
+                        <span class="block truncate font-medium leading-[18px]">{{
+                            t('view.settings.general.general.support')
+                        }}</span>
                         <span v-once class="block truncate text-xs">{{ links.discord }}</span>
                     </div>
                 </div>

src/views/Tools/Gallery.vue

@@ -85,10 +85,9 @@
                     </ButtonGroup>
                     <br />
                     <div
-                        class="x-friend-item"
+                        class="inline-block mt-2.5 w-auto cursor-default"
                         v-for="image in galleryTable"
-                        :key="image.id"
+                        :key="image.id">
-                        style="display: inline-block; margin-top: 10px; width: unset; cursor: default">
                         <template v-if="image.versions && image.versions.length > 0">
                             <div
                                 class="h-[200px] w-[200px] rounded-[20px] overflow-hidden"
@@ -158,10 +157,9 @@
                     </ButtonGroup>
                     <br />
                     <div
-                        class="x-friend-item"
+                        class="inline-block mt-2.5 w-auto cursor-default"
                         v-for="image in VRCPlusIconsTable"
-                        :key="image.id"
+                        :key="image.id">
-                        style="display: inline-block; margin-top: 10px; width: unset; cursor: default">
                         <template v-if="image.versions && image.versions.length > 0"
                             ><div
                                 class="h-[200px] w-[200px] rounded-[20px] overflow-hidden"
@@ -295,11 +293,7 @@
                         </template>
                     </div>
                     <br />
-                    <div
+                    <div class="inline-block mt-2.5 w-auto cursor-default" v-for="image in emojiTable" :key="image.id">
-                        class="x-friend-item"
-                        v-for="image in emojiTable"
-                        :key="image.id"
-                        style="display: inline-block; margin-top: 10px; width: unset; cursor: default">
                         <template v-if="image.versions && image.versions.length > 0">
                             <div
                                 class="h-[200px] w-[200px] rounded-[20px] overflow-hidden cursor-pointer"
@@ -377,10 +371,9 @@
                     </ButtonGroup>
                     <br />
                     <div
-                        class="x-friend-item"
+                        class="inline-block mt-2.5 w-auto cursor-default"
                         v-for="image in stickerTable"
-                        :key="image.id"
+                        :key="image.id">
-                        style="display: inline-block; margin-top: 10px; width: unset; cursor: default">
                         <template v-if="image.versions && image.versions.length > 0">
                             <div
                                 class="h-[200px] w-[200px] rounded-[20px] overflow-hidden cursor-pointer"
@@ -452,11 +445,7 @@
                         </label>
                     </div>
                     <br />
-                    <div
+                    <div class="inline-block mt-2.5 w-auto cursor-default" v-for="image in printTable" :key="image.id">
-                        class="x-friend-item"
-                        v-for="image in printTable"
-                        :key="image.id"
-                        style="display: inline-block; margin-top: 10px; width: unset; cursor: default">
                         <div
                             class="h-[200px] w-[200px] rounded-[20px] overflow-hidden cursor-pointer"
                             @click="showFullscreenImageDialog(image.files.image, getPrintFileName(image))">
@@ -523,10 +512,9 @@
                     </div>
                     <br />
                     <div
-                        class="x-friend-item"
+                        class="inline-block mt-2.5 w-auto cursor-default"
                         v-for="item in inventoryTable"
-                        :key="item.id"
+                        :key="item.id">
-                        style="display: inline-block; margin-top: 10px; width: unset; cursor: default">
                         <div class="h-[200px] w-[200px] rounded-[20px] overflow-hidden cursor-default">
                             <img
                                 class="h-full w-full rounded-[15px] object-cover"
@@ -687,19 +675,35 @@
         galleryDialogVisible.value = false;
     });
 
+    /**
+     *
+     */
     function startUpload() {
         pendingUploads.value += 1;
     }
 
+    /**
+     *
+     */
     function finishUpload() {
         pendingUploads.value = Math.max(0, pendingUploads.value - 1);
     }
 
+    /**
+     *
+     */
     function goBack() {
         galleryDialogVisible.value = false;
         router.push({ name: 'tools' });
     }
 
+    /**
+     *
+     * @param file
+     * @param title
+     * @param aspectRatio
+     * @param handler
+     */
     function openCropDialog(file, title, aspectRatio, handler) {
         cropDialogTitle.value = title;
         cropDialogAspectRatio.value = aspectRatio;
@@ -708,6 +712,10 @@
         cropDialogOpen.value = true;
     }
 
+    /**
+     *
+     * @param blob
+     */
     async function onCropConfirm(blob) {
         if (!cropDialogUploadHandler.value) {
             return;
@@ -722,6 +730,10 @@
         }
     }
 
+    /**
+     *
+     * @param e
+     */
     function onFileChangeGallery(e) {
         const { file, clearInput } = handleImageUploadInput(e, {
             inputSelector: '#GalleryUploadButton',
@@ -752,10 +764,17 @@
         });
     }
 
+    /**
+     *
+     */
     function displayGalleryUpload() {
         document.getElementById('GalleryUploadButton').click();
     }
 
+    /**
+     *
+     * @param fileId
+     */
     function setProfilePicOverride(fileId) {
         if (!isLocalUserVrcPlusSupporter.value) {
             toast.error(t('message.vrcplus.required'));
@@ -778,6 +797,10 @@
             });
     }
 
+    /**
+     *
+     * @param fileId
+     */
     function compareCurrentProfilePic(fileId) {
         const currentProfilePicOverride = extractFileId(currentUser.value.profilePicOverride);
         if (fileId === currentProfilePicOverride) {
@@ -786,6 +809,10 @@
         return false;
     }
 
+    /**
+     *
+     * @param fileId
+     */
     function deleteGalleryImage(fileId) {
         miscRequest.deleteFile(fileId).then((args) => {
             const array = galleryTable.value;
@@ -801,6 +828,10 @@
         });
     }
 
+    /**
+     *
+     * @param e
+     */
     function onFileChangeVRCPlusIcon(e) {
         const { file, clearInput } = handleImageUploadInput(e, {
             inputSelector: '#VRCPlusIconUploadButton',
@@ -833,10 +864,17 @@
         });
     }
 
+    /**
+     *
+     */
     function displayVRCPlusIconUpload() {
         document.getElementById('VRCPlusIconUploadButton').click();
     }
 
+    /**
+     *
+     * @param fileId
+     */
     function setVRCPlusIcon(fileId) {
         if (!isLocalUserVrcPlusSupporter.value) {
             toast.error(t('message.vrcplus.required'));
@@ -859,6 +897,10 @@
             });
     }
 
+    /**
+     *
+     * @param userIcon
+     */
     function compareCurrentVRCPlusIcon(userIcon) {
         const currentUserIcon = extractFileId(currentUser.value.userIcon);
         if (userIcon === currentUserIcon) {
@@ -867,6 +909,10 @@
         return false;
     }
 
+    /**
+     *
+     * @param fileId
+     */
     function deleteVRCPlusIcon(fileId) {
         miscRequest.deleteFile(fileId).then((args) => {
             const array = VRCPlusIconsTable.value;
@@ -881,6 +927,10 @@
         });
     }
 
+    /**
+     *
+     * @param fileName
+     */
     function parseEmojiFileName(fileName) {
         // remove file extension
         fileName = fileName.replace(/\.[^/.]+$/, '');
@@ -904,6 +954,10 @@
         }
     }
 
+    /**
+     *
+     * @param e
+     */
     function onFileChangeEmoji(e) {
         const { file, clearInput } = handleImageUploadInput(e, {
             inputSelector: '#EmojiUploadButton',
@@ -950,10 +1004,17 @@
         });
     }
 
+    /**
+     *
+     */
     function displayEmojiUpload() {
         document.getElementById('EmojiUploadButton').click();
     }
 
+    /**
+     *
+     * @param fileId
+     */
     function deleteEmoji(fileId) {
         miscRequest.deleteFile(fileId).then((args) => {
             const array = emojiTable.value;
@@ -968,6 +1029,10 @@
         });
     }
 
+    /**
+     *
+     * @param e
+     */
     function onFileChangeSticker(e) {
         const { file, clearInput } = handleImageUploadInput(e, {
             inputSelector: '#StickerUploadButton',
@@ -1002,10 +1067,17 @@
         });
     }
 
+    /**
+     *
+     */
     function displayStickerUpload() {
         document.getElementById('StickerUploadButton').click();
     }
 
+    /**
+     *
+     * @param fileId
+     */
     function deleteSticker(fileId) {
         miscRequest.deleteFile(fileId).then((args) => {
             const array = stickerTable.value;
@@ -1021,6 +1093,10 @@
         });
     }
 
+    /**
+     *
+     * @param e
+     */
     function onFileChangePrint(e) {
         const { file, clearInput } = handleImageUploadInput(e, {
             inputSelector: '#PrintUploadButton',
@@ -1063,10 +1139,17 @@
         });
     }
 
+    /**
+     *
+     */
     function displayPrintUpload() {
         document.getElementById('PrintUploadButton').click();
     }
 
+    /**
+     *
+     * @param printId
+     */
     function deletePrint(printId) {
         vrcPlusImageRequest.deletePrint(printId).then((args) => {
             const array = printTable.value;
@@ -1080,6 +1163,10 @@
         });
     }
 
+    /**
+     *
+     * @param inventoryId
+     */
     async function consumeInventoryBundle(inventoryId) {
         try {
             await inventoryRequest.consumeInventoryBundle({
@@ -1104,6 +1191,9 @@
         // inventoryItemsCreated: 0
     }
 
+    /**
+     *
+     */
     async function redeemReward() {
         modalStore
             .prompt({