versia-pub/frontend
2
0
Fork 0
mirror of https://github.com/versia-pub/frontend.git synced 2026-03-13 03:29:16 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Revert "feat: ♻️ Rename dark to background, refactor themes"

Browse source 
This reverts commit 842033c950.
This commit is contained in:
Jesse Wierzbinski 2024-07-22 01:23:29 +02:00
parent 842033c950
commit 518104f47b
No known key found for this signature in database
54 changed files with 230 additions and 244 deletions
Download patch file Download diff file Expand all files Collapse all files

4
components/social-elements/instance/Presentation.vue
View file

@ -1,7 +1,7 @@
<template>
<div class="flex flex-col p-10 gap-4 h-full">
<div
class="aspect-video shrink-0 w-full rounded ring-white/5 bg-background-800 shadow overflow-hidden ring-1 hover:ring-2 duration-100">
class="aspect-video shrink-0 w-full rounded ring-white/5 bg-dark-800 shadow overflow-hidden ring-1 hover:ring-2 duration-100">
<img class="object-cover w-full h-full duration-150 hover:scale-[102%] ease-in-out"
v-if="instance?.banner.url" alt="Instance banner" :src="instance.banner.url" />
</div>
@ -12,7 +12,7 @@
</div>
<div v-if="instance?.contact.account" class="flex flex-col gap-2 mt-auto">
<h2 class="text-text-200 font-semibold uppercase text-xs">Administrator</h2>
<h2 class="text-gray-200 font-semibold uppercase text-xs">Administrator</h2>
<SmallCard :account="instance.contact.account" />
</div>
</div>

4
components/social-elements/notes/attachment-dialog.vue
View file

@ -13,7 +13,7 @@
<Dialog.Content
class="w-screen h-screen flex !z-50 justify-center items-center flex-col overflow-hidden p-10 fixed inset-0">
<div class="w-full absolute inset-x-0 top-0 p-10 shrink text-text-400 flex flex-row gap-3">
<div class="w-full absolute inset-x-0 top-0 p-10 shrink text-gray-400 flex flex-row gap-3">
<a @click.stop :href="attachment?.url" target="_blank" download class="ml-auto">
<iconify-icon icon="tabler:download" width="1.5rem" height="1.5rem" />
<span class="sr-only">Close</span>
@ -32,7 +32,7 @@
:title="attachment.description ?? ''" />
</HeadlessTransitionChild>
<span @click.stop v-if="attachment?.description"
class="text-text-300 rounded mt-6 -mb-20 px-4 py-2 max-w-xl ring-1 ring-white/5 bg-background-900 max-h-40 overflow-y-auto">
class="text-gray-300 rounded mt-6 -mb-20 px-4 py-2 max-w-xl ring-1 ring-white/5 bg-dark-900 max-h-40 overflow-y-auto">
{{ attachment.description }}
</span>
</Dialog.Content>

15
components/social-elements/notes/attachment.vue
View file

@ -10,12 +10,12 @@
controls :alt="attachment.description ?? undefined" :src="attachment.url">
Your browser does not support the video tag.
</video>
<a v-else class="bg-background-800 w-full h-full rounded flex items-center justify-center"
:href="attachment.url" target="_blank" download>
<a v-else class="bg-dark-800 w-full h-full rounded flex items-center justify-center" :href="attachment.url"
target="_blank" download>
<div class="flex flex-col items-center gap-2 text-center max-w-56 overflow-hidden text-ellipsis">
<iconify-icon icon="tabler:file" width="none" class="size-10 text-text-300" />
<p class="text-text-300 text-sm font-mono">{{ getFilename(attachment.url) }}</p>
<p class="text-text-300 text-xs" v-if="attachment.meta?.length">{{
<iconify-icon icon="tabler:file" width="none" class="size-10 text-gray-300" />
<p class="text-gray-300 text-sm font-mono">{{ getFilename(attachment.url) }}</p>
<p class="text-gray-300 text-xs" v-if="attachment.meta?.length">{{
formatBytes(Number(attachment.meta?.length)) }}</p>
</div>
</a>
@ -25,12 +25,11 @@
strategy: 'fixed',
}" v-if="attachment.description">
<Popover.Trigger aria-hidden="true"
class="absolute top-2 right-2 p-1 bg-background-800 ring-1 ring-white/5 text-white text-xs rounded size-8">
class="absolute top-2 right-2 p-1 bg-dark-800 ring-1 ring-white/5 text-white text-xs rounded size-8">
<iconify-icon icon="tabler:alt" width="none" class="size-6" />
</Popover.Trigger>
<Popover.Positioner class="!z-10">
<Popover.Content
class="p-4 bg-background-400 rounded text-sm ring-1 ring-background-100 shadow-lg text-text-300">
<Popover.Content class="p-4 bg-dark-400 rounded text-sm ring-1 ring-dark-100 shadow-lg text-gray-300">
<Popover.Description>{{ attachment.description }}</Popover.Description>
</Popover.Content>
</Popover.Positioner>

12
components/social-elements/notes/header.vue
View file

@ -7,13 +7,13 @@
</NuxtLink>
<div class="flex flex-col items-start justify-around ml-4 grow overflow-hidden">
<div class="flex flex-row text-sm items-center justify-between w-full">
<NuxtLink :href="accountUrl" class="font-semibold text-text-200 line-clamp-1 break-all">
<NuxtLink :href="accountUrl" class="font-semibold text-gray-200 line-clamp-1 break-all">
<Skeleton :enabled="!note" :min-width="90" :max-width="170" shape="rect">
{{
note?.account.display_name }}
</Skeleton>
</NuxtLink>
<NuxtLink :href="noteUrl" class="text-text-300 ml-2 line-clamp-1 break-all shrink-0">
<NuxtLink :href="noteUrl" class="text-gray-300 ml-2 line-clamp-1 break-all shrink-0">
<Skeleton :enabled="!note" :min-width="50" :max-width="100" shape="rect">
{{ timeAgo }}
</Skeleton>
@ -31,20 +31,20 @@
</UserCard>
<div class="flex flex-col items-start justify-around ml-4 grow overflow-hidden">
<div class="flex flex-row items-center justify-between w-full">
<NuxtLink :href="accountUrl" class="font-semibold text-text-200 line-clamp-1 break-all">
<NuxtLink :href="accountUrl" class="font-semibold text-gray-200 line-clamp-1 break-all">
<Skeleton :enabled="!note" :min-width="90" :max-width="170" shape="rect">
{{
note?.account.display_name }}
</Skeleton>
</NuxtLink>
<NuxtLink :href="noteUrl" class="text-text-300 text-sm ml-2 line-clamp-1 break-all shrink-0"
<NuxtLink :href="noteUrl" class="text-gray-300 text-sm ml-2 line-clamp-1 break-all shrink-0"
:alt="fullTime" :title="fullTime">
<Skeleton :enabled="!note" :min-width="50" :max-width="100" shape="rect">
{{ timeAgo }}
</Skeleton>
</NuxtLink>
</div>
<span class="text-text-300 text-sm line-clamp-1 break-all w-full group">
<span class="text-gray-300 text-sm line-clamp-1 break-all w-full group">
<Skeleton :enabled="!note" :min-width="130" :max-width="250" shape="rect">
<span class="group-hover:hidden">
@{{
@ -52,7 +52,7 @@
}}</span>
<span @click="copyAccount" v-if="!hasCopied"
class="hidden select-none group-hover:flex cursor-pointer items-center gap-x-1">
<iconify-icon icon="tabler:clipboard" height="1rem" width="1rem" class="text-text-200"
<iconify-icon icon="tabler:clipboard" height="1rem" width="1rem" class="text-gray-200"
aria-hidden="true" />
Click to copy
</span>

2
components/social-elements/notes/mention.vue
View file

@ -1,6 +1,6 @@
<template>
<a :href="`/@${account.acct}`" target="_blank"
class="shrink break-all rounded bg-background-200 ring-1 ring-white/5 ring-inset text-primary-200 px-2 py-1 not-prose font-semibold cursor-pointer [&:not(:last-child)]:mr-1 duration-200 hover:bg-primary-600/30">
class="shrink break-all rounded bg-dark-200 ring-1 ring-white/5 ring-inset text-primary-200 px-2 py-1 not-prose font-semibold cursor-pointer [&:not(:last-child)]:mr-1 duration-200 hover:bg-primary-600/30">
<img class="size-[1em] rounded ring-1 ring-white/5 !inline align-middle mb-1 mr-1" :src="account.avatar"
:alt="`${account.acct}'s avatar'`" />
{{ account.display_name || account.acct }}

26
components/social-elements/notes/note.vue
View file

@ -1,6 +1,6 @@
<template>
<article
class="first:rounded-t last:rounded-b ring-1 relative ring-white/5 p-6 flex flex-col bg-background-800 hover:bg-background-700 duration-200">
class="first:rounded-t last:rounded-b ring-1 relative ring-white/5 p-6 flex flex-col bg-dark-800 hover:bg-dark-700 duration-200">
<!-- Overlay that blocks clicks for disabled notes -->
<div v-if="disabled" class="absolute z-10 inset-0 hover:cursor-not-allowed">
</div>
@ -18,36 +18,36 @@
:should-hide="shouldHide" />
<Skeleton class="!h-10 w-full mt-6" :enabled="!props.element || !loaded" v-if="!small || !showInteractions">
<div v-if="showInteractions"
class="mt-6 flex flex-row items-stretch disabled:*:opacity-70 [&>button]:max-w-28 disabled:*:cursor-not-allowed relative justify-around text-sm h-10 hover:enabled:[&>button]:bg-background-800 [&>button]:duration-200 [&>button]:rounded [&>button]:flex [&>button]:flex-1 [&>button]:flex-row [&>button]:items-center [&>button]:justify-center">
class="mt-6 flex flex-row items-stretch disabled:*:opacity-70 [&>button]:max-w-28 disabled:*:cursor-not-allowed relative justify-around text-sm h-10 hover:enabled:[&>button]:bg-dark-800 [&>button]:duration-200 [&>button]:rounded [&>button]:flex [&>button]:flex-1 [&>button]:flex-row [&>button]:items-center [&>button]:justify-center">
<button class="group" @click="outputtedNote && useEvent('note:reply', outputtedNote)"
:disabled="!identity">
<iconify-icon width="1.25rem" height="1.25rem" icon="tabler:arrow-back-up"
class="text-text-200 group-hover:group-enabled:text-blue-600" aria-hidden="true" />
<span class="text-text-400 mt-0.5 ml-2">{{ numberFormat(outputtedNote?.replies_count) }}</span>
class="text-gray-200 group-hover:group-enabled:text-blue-600" aria-hidden="true" />
<span class="text-gray-400 mt-0.5 ml-2">{{ numberFormat(outputtedNote?.replies_count) }}</span>
</button>
<button class="group" @click="likeFn" :disabled="!identity">
<iconify-icon width="1.25rem" height="1.25rem" icon="tabler:heart" v-if="!outputtedNote?.favourited"
class="size-5 text-text-200 group-hover:group-enabled:text-primary-600" aria-hidden="true" />
class="size-5 text-gray-200 group-hover:group-enabled:text-primary-600" aria-hidden="true" />
<iconify-icon width="1.25rem" height="1.25rem" icon="tabler:heart-filled" v-else
class="size-5 text-primary-600 group-hover:group-enabled:text-text-200" aria-hidden="true" />
<span class="text-text-400 mt-0.5 ml-2">{{ numberFormat(outputtedNote?.favourites_count) }}</span>
class="size-5 text-primary-600 group-hover:group-enabled:text-gray-200" aria-hidden="true" />
<span class="text-gray-400 mt-0.5 ml-2">{{ numberFormat(outputtedNote?.favourites_count) }}</span>
</button>
<button class="group" @click="reblogFn" :disabled="!identity">
<iconify-icon width="1.25rem" height="1.25rem" icon="tabler:repeat" v-if="!outputtedNote?.reblogged"
class="size-5 text-text-200 group-hover:group-enabled:text-green-600" aria-hidden="true" />
class="size-5 text-gray-200 group-hover:group-enabled:text-green-600" aria-hidden="true" />
<iconify-icon width="1.25rem" height="1.25rem" icon="tabler:repeat" v-else
class="size-5 text-green-600 group-hover:group-enabled:text-text-200" aria-hidden="true" />
<span class="text-text-400 mt-0.5 ml-2">{{ numberFormat(outputtedNote?.reblogs_count) }}</span>
class="size-5 text-green-600 group-hover:group-enabled:text-gray-200" aria-hidden="true" />
<span class="text-gray-400 mt-0.5 ml-2">{{ numberFormat(outputtedNote?.reblogs_count) }}</span>
</button>
<button class="group" @click="outputtedNote && useEvent('note:quote', outputtedNote)"
:disabled="!identity">
<iconify-icon width="1.25rem" height="1.25rem" icon="tabler:quote"
class="size-5 text-text-200 group-hover:group-enabled:text-blue-600" aria-hidden="true" />
<span class="text-text-400 mt-0.5 ml-2">{{ numberFormat(0) }}</span>
class="size-5 text-gray-200 group-hover:group-enabled:text-blue-600" aria-hidden="true" />
<span class="text-gray-400 mt-0.5 ml-2">{{ numberFormat(0) }}</span>
</button>
<AdaptiveDropdown>
<template #button>
<iconify-icon width="1.25rem" height="1.25rem" icon="tabler:dots" class="size-5 text-text-200"
<iconify-icon width="1.25rem" height="1.25rem" icon="tabler:dots" class="size-5 text-gray-200"
aria-hidden="true" />
<span class="sr-only">Open menu</span>
</template>

2
components/social-elements/notes/reply-header.vue
View file

@ -1,5 +1,5 @@
<template>
<NuxtLink :href="`/@${account?.acct}`" class="mb-4 flex flex-row gap-2 items-center text-text-300 opacity-70">
<NuxtLink :href="`/@${account?.acct}`" class="mb-4 flex flex-row gap-2 items-center text-gray-300 opacity-70">
<Skeleton :enabled="!account" shape="rect" class="!h-6" :min-width="40" :max-width="100" width-unit="%">
<iconify-icon icon="tabler:arrow-back-up" width="1.5rem" height="1.5rem" aria-hidden="true" />
<span class="shrink-0">Replying to</span>

8
components/social-elements/notifications/notif.vue
View file

@ -1,17 +1,17 @@
<template>
<div class="flex flex-col p-1 bg-background-400">
<div class="flex flex-col p-1 bg-dark-400">
<div class="px-4 pt-2 pb-3 flex flex-row gap-2 items-center">
<Skeleton :enabled="!element" shape="rect" class="!h-6" :min-width="40" :max-width="100" width-unit="%">
<iconify-icon :icon="icon" width="1.5rem" height="1.5rem" class="text-text-200" aria-hidden="true" />
<iconify-icon :icon="icon" width="1.5rem" height="1.5rem" class="text-gray-200" aria-hidden="true" />
<Avatar v-if="element?.account?.avatar" :src="element?.account.avatar"
:alt="`${element?.account.acct}'s avatar'`" class="h-6 w-6 shrink-0 rounded ring-1 ring-white/10" />
<span class="text-text-200 line-clamp-1"><strong v-html="display_name"></strong> {{ text
<span class="text-gray-200 line-clamp-1"><strong v-html="display_name"></strong> {{ text
}}</span>
</Skeleton>
</div>
<div>
<Note v-if="element?.status || !element" :element="element?.status" :small="true" />
<div v-else-if="element.account" class="p-6 ring-1 ring-white/5 bg-background-800">
<div v-else-if="element.account" class="p-6 ring-1 ring-white/5 bg-dark-800">
<SmallCard :account="element.account" />
</div>
<div v-if="element?.type === 'follow_request' && relationship?.requested_by"

30
components/social-elements/users/Account.vue
View file

@ -1,11 +1,11 @@
<template>
<div class="w-full ring-1 ring-inset ring-white/5 pb-10 bg-background-800">
<div class="w-full ring-1 ring-inset ring-white/5 pb-10 bg-dark-800">
<Avatar :src="account?.header" :alt="`${account?.acct}'s header image'`"
class="w-full aspect-[8/3] border-b border-white/10 bg-background-700 !rounded-none" />
class="w-full aspect-[8/3] border-b border-white/10 bg-dark-700 !rounded-none" />
<div class="flex items-start justify-between px-4 py-3">
<Avatar :src="account?.avatar" :alt="`${account?.acct}'s avatar'`"
class="h-32 w-32 -mt-[4.5rem] z-10 shrink-0 rounded ring-2 ring-background-800" />
class="h-32 w-32 -mt-[4.5rem] z-10 shrink-0 rounded ring-2 ring-dark-800" />
<div class="flex gap-x-2">
<Button theme="secondary" v-if="account && account?.id === identity?.account?.id">Edit Profile
@ -30,15 +30,15 @@
<div class="mt-2 px-4">
<h2
class="text-xl font-bold text-text-100 tracking-tight bg-gradient-to-r from-primary-300 via-purple-300 to-indigo-400 text-transparent bg-clip-text">
class="text-xl font-bold text-gray-100 tracking-tight bg-gradient-to-r from-primary-300 via-purple-300 to-indigo-400 text-transparent bg-clip-text">
<Skeleton :enabled="skeleton" :min-width="200" :max-width="350" class="h-6">
<span v-html="display_name"></span>
<iconify-icon v-if="account?.locked" icon="tabler:lock" width="1.25rem" height="1.25rem"
class="text-text-400 cursor-pointer align-text-top ml-1"
class="text-gray-400 cursor-pointer align-text-top ml-1"
title="This account manually approves its followers" />
</Skeleton>
</h2>
<span class="text-text-300 block mt-2">
<span class="text-gray-300 block mt-2">
<Skeleton :enabled="skeleton" :min-width="130" :max-width="250">@{{ account?.acct }}</Skeleton>
</span>
<div class="flex flex-row flex-wrap gap-4 mt-4" v-if="isDeveloper || visibleRoles.length > 0">
@ -59,27 +59,27 @@
<div class="mt-3 flex items-center space-x-4 px-4">
<div class="flex items-center space-x-1">
<Skeleton :enabled="skeleton" :min-width="150" :max-width="150" shape="rect">
<iconify-icon icon="tabler:calendar" width="1.25rem" height="1.25rem" class="text-text-400" />
<span class="text-text-400">Created {{ formattedJoin }}</span>
<iconify-icon icon="tabler:calendar" width="1.25rem" height="1.25rem" class="text-gray-400" />
<span class="text-gray-400">Created {{ formattedJoin }}</span>
</Skeleton>
</div>
<div v-if="account?.bot" class="flex items-center space-x-1">
<iconify-icon icon="tabler:robot" width="1.25rem" height="1.25rem" class="text-text-400" />
<span class="text-text-400">Bot</span>
<iconify-icon icon="tabler:robot" width="1.25rem" height="1.25rem" class="text-gray-400" />
<span class="text-gray-400">Bot</span>
</div>
</div>
<div class="mt-3 flex items-center space-x-4 px-4">
<div class="cursor-pointer hover:underline space-x-1">
<Skeleton :enabled="skeleton" :min-width="100" :max-width="150" shape="rect">
<span class="font-bold text-text-200">{{ account?.statuses_count }}</span>
<span class="text-text-400">Posts</span>
<span class="font-bold text-gray-200">{{ account?.statuses_count }}</span>
<span class="text-gray-400">Posts</span>
</Skeleton>
</div>
<div class="cursor-pointer hover:underline space-x-1">
<Skeleton :enabled="skeleton" :min-width="100" :max-width="150" shape="rect">
<span class="font-bold text-text-200">{{ account?.following_count }}</span>
<span class="text-text-400">Following</span>
<span class="font-bold text-gray-200">{{ account?.following_count }}</span>
<span class="text-gray-400">Following</span>
</Skeleton>
</div>
</div>
@ -87,7 +87,7 @@
<div v-if="!skeleton && fields && fields.length > 0" class="mt-4 px-4 flex-col flex space-y-3">
<div v-for="field of fields" :key="field.name ?? ''" class="flex flex-col gap-1">
<span class="text-primary-500 font-semibold" v-html="field.name"></span>
<span class="text-text-200 prose prose-invert break-all" v-html="field.value"></span>
<span class="text-gray-200 prose prose-invert break-all" v-html="field.value"></span>
</div>
</div>

2
components/social-elements/users/AccountActionsDropdown.vue
View file

@ -2,7 +2,7 @@
<AdaptiveDropdown>
<template #button>
<Button theme="secondary" class="h-full">
<iconify-icon width="unset" icon="tabler:dots" class="size-5 text-text-200" aria-hidden="true" />
<iconify-icon width="unset" icon="tabler:dots" class="size-5 text-gray-200" aria-hidden="true" />
<span class="sr-only">Open menu</span>
</Button>
</template>

4
components/social-elements/users/Badge.vue
View file

@ -1,7 +1,7 @@
<template>
<Tooltip.Root @update:open="(o) => open = o" :open="open" :open-delay="0">
<Tooltip.Trigger><span
class="inline-flex items-center px-2 py-1 gap-x-2 rounded text-sm font-medium bg-background-300 text-primary-200 ring-white/5 ring-1">
class="inline-flex items-center px-2 py-1 gap-x-2 rounded text-sm font-medium bg-dark-300 text-primary-200 ring-white/5 ring-1">
<svg viewBox="0 0 22 22" v-if="verified" aria-label="Verified account" role="img"
class="size-4 fill-primary-500">
<g>
@ -22,7 +22,7 @@
leave-active-class="transition ease-out duration-75" leave-from-class="transform opacity-100 scale-100"
leave-to-class="transform opacity-0 scale-95">
<Tooltip.Content v-if="open"
class="rounded px-4 py-2 text-sm bg-background-400 text-text-200 ring-1 ring-white/10 shadow-xl">
class="rounded px-4 py-2 text-sm bg-dark-400 text-gray-200 ring-1 ring-white/10 shadow-xl">
<svg viewBox="0 0 22 22" v-if="verified" aria-label="Verified account" role="img"
class="size-4 fill-primary-500 inline mb-0.5">
<g>

4
components/social-elements/users/SmallCard.vue
View file

@ -8,14 +8,14 @@
</Skeleton>
<div class="flex flex-col items-start justify-around ml-4 grow overflow-hidden">
<div class="flex flex-row items-center justify-between w-full">
<div class="font-semibold text-text-200 line-clamp-1 break-all">
<div class="font-semibold text-gray-200 line-clamp-1 break-all">
<Skeleton :enabled="!account" :min-width="90" :max-width="170" shape="rect">
{{
account?.display_name }}
</Skeleton>
</div>
</div>
<span class="text-text-400 text-sm line-clamp-1 break-all w-full">
<span class="text-gray-400 text-sm line-clamp-1 break-all w-full">
<Skeleton :enabled="!account" :min-width="130" :max-width="250" shape="rect">
@{{
account?.acct

30
components/social-elements/users/UserCard.vue
View file

@ -14,24 +14,24 @@
</Transition>
<HoverCard.Positioner>
<HoverCard.Content
class="bg-background-700 pb-4 w-96 z-20 overflow-y-auto rounded overflow-x-hidden ring-1 ring-white/20 shadow-xl max-h-[60vh] text-sm">
class="bg-dark-700 pb-4 w-96 z-20 overflow-y-auto rounded overflow-x-hidden ring-1 ring-white/20 shadow-xl max-h-[60vh] text-sm">
<Avatar :src="account.header" :alt="`${account.acct}'s header image'`"
class="w-full aspect-[8/3] border-b border-white/10 bg-background-700 !rounded-none" />
class="w-full aspect-[8/3] border-b border-white/10 bg-dark-700 !rounded-none" />
<div class="flex items-start justify-between px-4 py-3">
<Avatar :src="account.avatar" :alt="`${account.acct}'s avatar'`"
class="h-32 w-32 -mt-[4.5rem] z-10 shrink-0 rounded ring-2 ring-background-200" />
class="h-32 w-32 -mt-[4.5rem] z-10 shrink-0 rounded ring-2 ring-dark-200" />
</div>
<div class="mt-2 px-4">
<h2
class="text-xl font-bold text-text-100 tracking-tight bg-gradient-to-r from-primary-300 via-purple-300 to-indigo-400 text-transparent bg-clip-text">
class="text-xl font-bold text-gray-100 tracking-tight bg-gradient-to-r from-primary-300 via-purple-300 to-indigo-400 text-transparent bg-clip-text">
<span v-html="display_name"></span>
<iconify-icon v-if="account.locked" icon="tabler:lock" width="1.25rem" height="1.25rem"
class="text-text-400 cursor-pointer align-text-top ml-1"
class="text-gray-400 cursor-pointer align-text-top ml-1"
title="This account manually approves its followers" />
</h2>
<span class="text-text-300 block mt-2">
<span class="text-gray-300 block mt-2">
@{{ account.acct }}
</span>
<div class="flex flex-row flex-wrap gap-4 mt-4" v-if="isDeveloper || visibleRoles.length > 0">
@ -49,30 +49,30 @@
<div class="mt-3 flex items-center space-x-4 px-4">
<div class="flex items-center space-x-1">
<iconify-icon icon="tabler:calendar" width="1.25rem" height="1.25rem"
class="text-text-400" />
<span class="text-text-400">Created {{ formattedJoin }}</span>
class="text-gray-400" />
<span class="text-gray-400">Created {{ formattedJoin }}</span>
</div>
<div v-if="account.bot" class="flex items-center space-x-1">
<iconify-icon icon="tabler:robot" width="1.25rem" height="1.25rem" class="text-text-400" />
<span class="text-text-400">Bot</span>
<iconify-icon icon="tabler:robot" width="1.25rem" height="1.25rem" class="text-gray-400" />
<span class="text-gray-400">Bot</span>
</div>
</div>
<div class="mt-3 flex items-center space-x-4 px-4">
<div class="cursor-pointer hover:underline space-x-1">
<span class="font-bold text-text-200">{{ account.statuses_count }}</span>
<span class="text-text-400">Posts</span>
<span class="font-bold text-gray-200">{{ account.statuses_count }}</span>
<span class="text-gray-400">Posts</span>
</div>
<div class="cursor-pointer hover:underline space-x-1">
<span class="font-bold text-text-200">{{ account.following_count }}</span>
<span class="text-text-400">Following</span>
<span class="font-bold text-gray-200">{{ account.following_count }}</span>
<span class="text-gray-400">Following</span>
</div>
</div>
<div v-if="fields && fields.length > 0" class="mt-4 px-4 flex-col flex space-y-3">
<div v-for="field of fields" :key="field.name ?? ''" class="flex flex-col gap-1">
<span class="text-primary-500 font-semibold" v-html="field.name"></span>
<span class="text-text-200 prose prose-invert prose-sm break-all"
<span class="text-gray-200 prose prose-invert prose-sm break-all"
v-html="field.value"></span>
</div>
</div>