versia-pub/frontend
2
0
Fork 0
mirror of https://github.com/versia-pub/frontend.git synced 2026-03-13 11:39: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/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>