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

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>