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

2
components/avatars/avatar.vue
View file

@ -1,5 +1,5 @@
<template>
<div v-bind="$attrs" class="bg-background-700 overflow-hidden flex items-center justify-center">
<div v-bind="$attrs" class="bg-dark-700 overflow-hidden flex items-center justify-center">
<Skeleton :enabled="!imageLoaded" class="!h-full !w-full !rounded-none">
<img class="cursor-pointer ring-1 w-full h-full object-cover" :src="src" :alt="alt" />
</Skeleton>

4
components/composer/autocomplete-suggestbox.vue
View file

@ -2,7 +2,7 @@
<Transition enter-active-class="transition duration-300 ease-in-out" enter-from-class="opacity-0 scale-95"
enter-to-class="opacity-100 scale-100" leave-active-class="duration-200 ease-in-out"
leave-from-class="opacity-100 scale-100" leave-to-class="opacity-0 scale-95">
<div class="max-h-40 max-w-full rounded ring-1 ring-background-300 bg-background-800 fixed z-20" :style="{
<div class="max-h-40 max-w-full rounded ring-1 ring-dark-300 bg-dark-800 fixed z-20" :style="{
left: `${x}px`,
top: `${y}px`,
width: `${width}px`,
@ -11,7 +11,7 @@
<div v-for="(suggestion, index) in topSuggestions" :key="suggestion.key"
@click="emit('autocomplete', suggestion.key)"
:ref="el => { if (el) suggestionRefs[index] = el as Element }" :title="suggestion.key"
:class="['flex justify-center shrink-0 items-center size-12 p-2 hover:bg-background-900/70', index === selectedSuggestionIndex && 'bg-primary-500']">
:class="['flex justify-center shrink-0 items-center size-12 p-2 hover:bg-dark-900/70', index === selectedSuggestionIndex && 'bg-primary-500']">
<slot :suggestion="suggestion"></slot>
</div>
</OverlayScrollbarsComponent>

2
components/composer/button.vue
View file

@ -1,6 +1,6 @@
<template>
<button v-bind="$props"
:class="['rounded text-text-300 hover:bg-background-900/70 p-2 flex items-center justify-center duration-200', toggled && 'bg-primary-500/70 hover:bg-primary-900/70']">
:class="['rounded text-gray-300 hover:bg-dark-900/70 p-2 flex items-center justify-center duration-200', toggled && 'bg-primary-500/70 hover:bg-primary-900/70']">
<slot />
</button>
</template>

2
components/composer/composer.vue
View file

@ -10,7 +10,7 @@
<!-- Content warning textbox -->
<div v-if="cw" class="mb-4">
<input type="text" v-model="cwContent" placeholder="Add a content warning"
class="w-full p-2 mt-1 text-sm prose prose-invert bg-background-900 rounded focus:!ring-0 !ring-none !border-none !outline-none placeholder:text-zinc-500 appearance-none focus:!border-none focus:!outline-none"
class="w-full p-2 mt-1 text-sm prose prose-invert bg-dark-900 rounded focus:!ring-0 !ring-none !border-none !outline-none placeholder:text-zinc-500 appearance-none focus:!border-none focus:!outline-none"
aria-label="Content warning" />
</div>
<FileUploader v-model:files="files" ref="uploader" />

14
components/composer/file-uploader.vue
View file

@ -3,7 +3,7 @@
<input type="file" ref="fileInput" @change="handleFileInput" style="display: none" multiple />
<div class="flex flex-row gap-2 overflow-x-auto *:shrink-0 p-1 mb-4" v-if="files.length > 0">
<div v-for="(data) in files" :key="data.id" role="button" tabindex="0"
:class="['size-28 bg-background-800 rounded flex items-center relative justify-center ring-1 ring-white/20 overflow-hidden', data.progress !== 1.0 && 'animate-pulse']"
:class="['size-28 bg-dark-800 rounded flex items-center relative justify-center ring-1 ring-white/20 overflow-hidden', data.progress !== 1.0 && 'animate-pulse']"
@keydown.enter="removeFile(data.id)">
<template v-if="data.file.type.startsWith('image/')">
<img :src="createObjectURL(data.file)" class="w-full h-full object-cover cursor-default"
@ -17,15 +17,15 @@
</template>
<!-- Shadow on media to better see buttons -->
<div class="absolute inset-0 bg-black/70"></div>
<div class="absolute bottom-1 right-1 p-1 bg-background-800 text-white text-xs rounded cursor-default flex flex-row items-center gap-x-1"
<div class="absolute bottom-1 right-1 p-1 bg-dark-800 text-white text-xs rounded cursor-default flex flex-row items-center gap-x-1"
aria-label="File size">
{{ formatBytes(data.file.size) }}
<!-- Loader spinner -->
<iconify-icon v-if="data.progress < 1.0" icon="tabler:loader-2" width="none"
class="size-4 animate-spin text-primary-500" />
</div>
<button class="absolute top-1 right-1 p-1 bg-background-800 text-white text-xs rounded size-6"
role="button" tabindex="0" @pointerup="removeFile(data.id)" @keydown.enter="removeFile(data.id)">
<button class="absolute top-1 right-1 p-1 bg-dark-800 text-white text-xs rounded size-6" role="button"
tabindex="0" @pointerup="removeFile(data.id)" @keydown.enter="removeFile(data.id)">
<iconify-icon icon="tabler:x" width="none" class="size-4" />
</button>
<!-- Alt text editor -->
@ -33,15 +33,15 @@
strategy: 'fixed',
}" v-if="data.api_id" @update:open="o => !o && updateAltText(data.id, data.alt_text)">
<Popover.Trigger aria-hidden="true"
class="absolute top-1 left-1 p-1 bg-background-800 ring-1 ring-white/5 text-white text-xs rounded size-6">
class="absolute top-1 left-1 p-1 bg-dark-800 ring-1 ring-white/5 text-white text-xs rounded size-6">
<iconify-icon icon="tabler:alt" width="none" class="size-4" />
</Popover.Trigger>
<Popover.Positioner class="!z-[100]">
<Popover.Content
class="p-1 bg-background-400 rounded text-sm ring-1 ring-white/10 shadow-lg text-text-300 !min-w-72">
class="p-1 bg-dark-400 rounded text-sm ring-1 ring-white/10 shadow-lg text-gray-300 !min-w-72">
<textarea :disabled="data.progress < 1.0" @keydown.enter.stop v-model="data.alt_text"
placeholder="Add alt text"
class="w-full p-2 text-sm prose prose-invert bg-background-900 rounded focus:!ring-0 !ring-none !border-none !outline-none placeholder:text-zinc-500 appearance-none focus:!border-none focus:!outline-none" />
class="w-full p-2 text-sm prose prose-invert bg-dark-900 rounded focus:!ring-0 !ring-none !border-none !outline-none placeholder:text-zinc-500 appearance-none focus:!border-none focus:!outline-none" />
<Button theme="secondary" @click="updateAltText(data.id, data.alt_text)" class="w-full"
:loading="data.progress < 1.0">
<span>Edit</span>

2
components/composer/modal.client.vue
View file

@ -18,7 +18,7 @@
leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">
<Dialog.Content class="overflow-y-auto w-full max-h-full md:py-16">
<div
class="relative overflow-hidden max-w-xl mx-auto rounded-lg bg-background-700 ring-1 ring-background-800 text-left shadow-xl transition-all w-full">
class="relative overflow-hidden max-w-xl mx-auto rounded-lg bg-dark-700 ring-1 ring-dark-800 text-left shadow-xl transition-all w-full">
<Composer v-if="instance" :instance="instance as any" />
</div>
</Dialog.Content>

2
components/composer/suggestbox.vue
View file

@ -1,5 +1,5 @@
<template>
<div class="w-full max-w-full rounded ring-1 ring-background-300 bg-background-800 absolute z-20 flex flex-col">
<div class="w-full max-w-full rounded ring-1 ring-dark-300 bg-dark-800 absolute z-20 flex flex-col">
<slot />
</div>
</template>

4
components/dropdowns/AdaptiveDropdown.vue
View file

@ -17,9 +17,9 @@
leave-active-class="transition ease-out duration-75"
leave-from-class="transform opacity-100 scale-100" leave-to-class="transform opacity-0 scale-95">
<Menu.Content v-if="open"
:class="['z-20 mt-2 rounded overflow-hidden p-1 space-y-1 bg-background-700 shadow-lg ring-1 ring-white/10 focus:outline-none min-w-56', id]">
:class="['z-20 mt-2 rounded overflow-hidden p-1 space-y-1 bg-dark-700 shadow-lg ring-1 ring-white/10 focus:outline-none min-w-56', id]">
<div v-if="isSmallScreen" class="w-full py-2">
<div class="rounded-full h-1 bg-text-400 w-12 mx-auto"></div>
<div class="rounded-full h-1 bg-gray-400 w-12 mx-auto"></div>
</div>
<slot name="items"></slot>
</Menu.Content>

4
components/errors/ErrorBoundary.vue
View file

@ -2,9 +2,9 @@
<slot name="error" v-if="error" v-bind="{ error }">
<div id="error" class="grid min-h-screen place-items-center px-6 py-24 sm:py-32 lg:px-8">
<div class="text-center prose prose-invert max-w-md w-full">
<h1 class="mt-4 text-3xl font-bold tracking-tight text-text-100 sm:text-5xl">{{ error.title }}
<h1 class="mt-4 text-3xl font-bold tracking-tight text-gray-100 sm:text-5xl">{{ error.title }}
</h1>
<p class="mt-6 text-base leading-7 text-text-400" v-html="error.message"></p>
<p class="mt-6 text-base leading-7 text-gray-400" v-html="error.message"></p>
<div class="mt-10 grid grid-cols-2 gap-x-6 mx-auto max-w-md">
<Button theme="primary" class="w-full" @click="back">Go back</Button>
<a href="https://github.com/lysand-org/frontend/issues" target="_blank">

11
components/errors/noscript.vue
View file

@ -3,22 +3,21 @@ import SquarePattern from "../graphics/square-pattern.vue";
</script>
<template>
<div
class="grid min-h-screen place-items-center px-6 py-24 sm:py-32 lg:px-8 fixed inset-0 z-[1000000] bg-background-900">
<div class="grid min-h-screen place-items-center px-6 py-24 sm:py-32 lg:px-8 fixed inset-0 z-[1000000] bg-dark-900">
<SquarePattern />
<div class="prose prose-invert max-w-lg">
<h1 class="mt-4 text-3xl font-bold tracking-tight text-text-100 sm:text-5xl">JavaScript is disabled
<h1 class="mt-4 text-3xl font-bold tracking-tight text-gray-100 sm:text-5xl">JavaScript is disabled
</h1>
<p class="mt-6 text-base leading-7 text-text-400">
<p class="mt-6 text-base leading-7 text-gray-400">
This website requires JavaScript to function properly. Please enable JavaScript in your browser
settings.
</p>
<p class="mt-6 text-base leading-7 text-text-400">
<p class="mt-6 text-base leading-7 text-gray-400">
If you are using a browser that does not support JavaScript, please consider using a modern browser
like <a href="https://www.mozilla.org/firefox/new/" class="underline">Firefox</a> or <a
href="https://www.google.com/chrome/" class="underline">Chrome</a>.
</p>
<p class="mt-6 text-base leading-7 text-text-400">
<p class="mt-6 text-base leading-7 text-gray-400">
This application does not track you, collect user data, use cookies of any kind or send requests to
servers outside of your account's instance.
</p>

2
components/graphics/square-pattern.vue
View file

@ -6,7 +6,7 @@
patternUnits="userSpaceOnUse">
<path d="M.5 200V.5H200" fill="none"></path>
</pattern>
</defs><svg x="50%" y="-1" class="overflow-visible fill-text-800/20">
</defs><svg x="50%" y="-1" class="overflow-visible fill-gray-800/20">
<path d="M-200 0h201v201h-201Z M600 0h201v201h-201Z M-400 600h201v201h-201Z M200 800h201v201h-201Z"
stroke-width="0"></path>
</svg>

8
components/headers/greeting.vue
View file

@ -1,14 +1,14 @@
<template>
<div v-if="identity" class="bg-background-800 z-0 p-6 my-5 relative overflow-hidden rounded ring-1 ring-white/5">
<div v-if="identity" class="bg-dark-800 z-0 p-6 my-5 relative overflow-hidden rounded ring-1 ring-white/5">
<div class="sm:flex sm:items-center sm:justify-between gap-3">
<div class="sm:flex sm:space-x-5 grow">
<Avatar :src="identity.account.avatar"
class="mx-auto shrink-0 size-20 rounded overflow-hidden ring-1 ring-white/10"
:alt="'Your avatar'" />
<div
class="mt-4 text-center flex flex-col justify-center sm:mt-0 sm:text-left bg-background-800 py-2 px-4 rounded grow ring-1 ring-white/10">
<p class="text-sm font-medium text-text-300">Welcome back,</p>
<p class="text-xl font-bold text-text-50 sm:text-2xl line-clamp-1" v-html="display_name"></p>
class="mt-4 text-center flex flex-col justify-center sm:mt-0 sm:text-left bg-dark-800 py-2 px-4 rounded grow ring-1 ring-white/10">
<p class="text-sm font-medium text-gray-300">Welcome back,</p>
<p class="text-xl font-bold text-gray-50 sm:text-2xl line-clamp-1" v-html="display_name"></p>
</div>
</div>
</div>

2
components/inputs/label.vue
View file

@ -1,7 +1,7 @@
<template>
<div class="flex flex-row justify-between">
<label v-bind="$attrs"
class="select-none font-semibold text-base/6 disabled:opacity-50 sm:text-sm/6 text-text-100">
class="select-none font-semibold text-base/6 disabled:opacity-50 sm:text-sm/6 text-gray-100">
<slot />
</label>
<div :id="`${$attrs.for}-label-slot`"></div>

4
components/inputs/password-input.vue
View file

@ -2,7 +2,7 @@
<TextInput @input="e => content = (e.target as HTMLInputElement).value" v-bind="$attrs, $props" v-model="content"
:type="showPassword ? 'text' : 'password'" :spellcheck="false" />
<Progress.Root class="flex flex-row items-center gap-x-2" v-if="showStrength">
<Progress.Label class="text-xs text-text-300 font-semibold w-12">
<Progress.Label class="text-xs text-gray-300 font-semibold w-12">
{{ text }}
</Progress.Label>
<Progress.Track class="rounded-sm w-full h-2 duration-300" :style="{
@ -13,7 +13,7 @@
</Progress.Root>
<Teleport :to="`#${$attrs.id}-label-slot`" v-if="teleport">
<button type="button" @click="showPassword = !showPassword"
class="text-xs ml-auto block mt-2 font-semibold text-text-400">
class="text-xs ml-auto block mt-2 font-semibold text-gray-400">
<iconify-icon icon="tabler:eye" class="size-4 align-text-top" height="none" />
{{ showPassword ? "Hide password" : "Show password" }}
</button>

2
components/inputs/rich-textbox-input.vue
View file

@ -4,7 +4,7 @@
class="resize-none min-h-48 prose prose-invert w-full p-0 !ring-none !border-none !outline-none placeholder:text-zinc-500 bg-transparent appearance-none focus:!border-none focus:!outline-none disabled:cursor-not-allowed"
aria-label="Compose your message" :autofocus="true"></textarea>
<div v-if="maxCharacters"
:class="['absolute bottom-0 right-0 p-2 text-text-300 font-semibold text-xs', remainingCharacters < 0 && 'text-red-500']"
:class="['absolute bottom-0 right-0 p-2 text-gray-300 font-semibold text-xs', remainingCharacters < 0 && 'text-red-500']"
aria-live="polite">
{{ remainingCharacters }}
</div>

2
components/inputs/text-input.vue
View file

@ -1,5 +1,5 @@
<template>
<input :class="['block disabled:opacity-70 disabled:hover:cursor-wait w-full bg-background-500 rounded-md border-0 py-1.5 text-text-50 shadow-sm ring-1 ring-inset ring-white/10 placeholder:text-text-500 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6',
<input :class="['block disabled:opacity-70 disabled:hover:cursor-wait w-full bg-dark-500 rounded-md border-0 py-1.5 text-gray-50 shadow-sm ring-1 ring-inset ring-white/10 placeholder:text-gray-500 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6',
isInvalid && '!ring-red-600 ring-2']">
</template>

8
components/notifications/notifications-renderer.vue
View file

@ -2,7 +2,7 @@
<Teleport to="body">
<Toaster :toaster="toaster" v-slot="toast">
<Toast.Root
class="rounded-lg w-[calc(100vw-2rem)] sm:w-80 bg-background-500 duration-200 shadow-lg ring-1 ring-white/10 p-4 [&:nth-child(n+5)]:opacity-0 data-[stack]:!opacity-100 scale-[--scale,100%] translate-x-[--x] translate-y-[--y] z-[--z-index] will-change-transform">
class="rounded-lg w-[calc(100vw-2rem)] sm:w-80 bg-dark-500 duration-200 shadow-lg ring-1 ring-white/10 p-4 [&:nth-child(n+5)]:opacity-0 data-[stack]:!opacity-100 scale-[--scale,100%] translate-x-[--x] translate-y-[--y] z-[--z-index] will-change-transform">
<div class="grid grid-cols-[auto_1fr_auto]">
<div class="shrink-0 h-6 w-6">
<iconify-icon v-if="toast.type === 'success'" icon="tabler:check" height="none"
@ -15,13 +15,13 @@
class="h-6 w-6 text-blue-500" aria-hidden="true" />
</div>
<div class="ml-3 flex-1 pt-0.5 shrink-0 min-w-48">
<Toast.Title class="text-sm font-semibold text-text-50">{{ toast.title }}</Toast.Title>
<Toast.Description class="mt-1 text-sm text-text-400">{{
<Toast.Title class="text-sm font-semibold text-gray-50">{{ toast.title }}</Toast.Title>
<Toast.Description class="mt-1 text-sm text-gray-400">{{
toast.description }}</Toast.Description>
</div>
<div class="ml-4 flex shrink-0">
<Toast.CloseTrigger type="button" title="Close this notification"
class="inline-flex rounded-md text-text-400 hover:text-text-300 duration-200">
class="inline-flex rounded-md text-gray-400 hover:text-gray-300 duration-200">
<iconify-icon icon="tabler:x" class="h-5 w-5" aria-hidden="true" />
</Toast.CloseTrigger>
</div>

8
components/settings/oidc.vue
View file

@ -1,16 +1,16 @@
<template>
<!-- OIDC linked accounts manager -->
<div class="w-full ring-1 ring-white/5 pb-5 bg-background-800 rounded overflow-hidden">
<div class="w-full ring-1 ring-white/5 pb-5 bg-dark-800 rounded overflow-hidden">
<div class="px-4 py-4">
<h3 class="font-semibold text-text-300 text-xl">Linked accounts</h3>
<h3 class="font-semibold text-gray-300 text-xl">Linked accounts</h3>
</div>
<div class="px-4 py-3">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-1 xl:grid-cols-2 gap-4">
<div v-for="provider of ssoConfig?.providers" :key="provider.id"
class="flex items-center justify-between p-4 bg-background-700 rounded">
class="flex items-center justify-between p-4 bg-dark-700 rounded">
<div class="flex items-center gap-4">
<Avatar :src="provider.icon" :alt="provider.name" class="h-8 w-8" />
<span class="font-semibold text-text-300">{{ provider.name }}</span>
<span class="font-semibold text-gray-300">{{ provider.name }}</span>
</div>
<div>
<Button theme="primary" :loading="loading"

10
components/settings/profile-editor.vue
View file

@ -1,14 +1,14 @@
<template>
<div
class="w-full md:px-8 px-4 py-4 bg-background-700 grid justify-center lg:grid-cols-[minmax(auto,_36rem)_1fr] grid-cols-1 gap-4">
<form class="w-full ring-1 ring-inset ring-white/5 pb-5 bg-background-800 rounded overflow-hidden"
class="w-full md:px-8 px-4 py-4 bg-dark-700 grid justify-center lg:grid-cols-[minmax(auto,_36rem)_1fr] grid-cols-1 gap-4">
<form class="w-full ring-1 ring-inset ring-white/5 pb-5 bg-dark-800 rounded overflow-hidden"
@submit.prevent="save">
<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>
<div class="mt-2 px-4">
@ -19,7 +19,7 @@
<TextInput @input="acct = ($event.target as HTMLInputElement).value" :value="acct"
aria-label="Username" :disabled="loading" />
</div>
<p class="text-text-300 text-xs mt-2">
<p class="text-gray-300 text-xs mt-2">
Changing your username will break all links to your profile.
</p>
</div>

2
components/settings/renderer.vue
View file

@ -1,5 +1,5 @@
<template>
<div class="w-full px-8 py-4 bg-background-700 hover:bg-background-500 duration-100 h-full">
<div class="w-full px-8 py-4 bg-dark-700 hover:bg-dark-500 duration-100 h-full">
<div class="max-w-7xl mx-auto h-full">
<SettingBoolean v-if="setting.type === SettingType.Boolean" :id="id" />

2
components/settings/types/Boolean.vue
View file

@ -11,7 +11,7 @@
implemented
</p>
<p v-else :data-disabled="setting.notImplemented ? '' : undefined"
class="text-base/6 row-start-2 data-[disabled]:opacity-50 sm:text-sm/6 text-text-300">{{
class="text-base/6 row-start-2 data-[disabled]:opacity-50 sm:text-sm/6 text-gray-300">{{
setting.description }}
</p>
<Switch.Control :data-disabled="setting.notImplemented ? '' : undefined"

15
components/sidebars/account-picker.vue
View file

@ -2,19 +2,20 @@
<AdaptiveDropdown>
<template #button>
<slot>
<div class="rounded text-left flex flex-row gap-x-2 hover:scale-[95%] duration-100" v-if="identity">
<div class="rounded text-left flex flex-row gap-x-2 hover:scale-[95%] duration-100"
v-if="identity">
<div class="shrink-0">
<Avatar class="size-12 rounded ring-1 ring-white/5" :src="identity.account.avatar"
:alt="`${identity.account.acct}'s avatar'`" />
</div>
<div class="flex flex-col items-start p-1 justify-around grow overflow-hidden">
<div class="flex flex-row items-center justify-between w-full">
<div class="font-semibold text-text-200 text-sm line-clamp-1 break-all">
<div class="font-semibold text-gray-200 text-sm line-clamp-1 break-all">
{{
identity.account.display_name }}
</div>
</div>
<span class="text-text-400 text-xs line-clamp-1 break-all w-full">
<span class="text-gray-400 text-xs line-clamp-1 break-all w-full">
Change account
</span>
</div>
@ -27,7 +28,7 @@
</template>
<template #items>
<div class="p-2">
<h3 class="text-text-400 text-xs text-center md:text-left uppercase font-semibold">Switch to account
<h3 class="text-gray-400 text-xs text-center md:text-left uppercase font-semibold">Switch to account
</h3>
</div>
<div class="px-2 py-4 md:py-2 flex flex-col gap-3 max-w-[100vw]">
@ -40,12 +41,12 @@
<div data-part="item" class="flex flex-col items-start justify-around grow overflow-hidden"
@click="useEvent('identity:change', identity)">
<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">
{{
identity.account.display_name }}
</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">
@{{
identity.account.acct
}}
@ -54,7 +55,7 @@
<button data-part="item"
class="shrink-0 ml-6 size-12 ring-white/5 ring-1 flex items-center justify-center rounded"
@click="$emit('signOut', identity.id)">
<iconify-icon icon="tabler:logout" class="size-6 text-text-200" width="none" />
<iconify-icon icon="tabler:logout" class="size-6 text-gray-200" width="none" />
</button>
</div>
</Menu.Item>

6
components/sidebars/collapsible-aside.vue
View file

@ -2,13 +2,13 @@
<aside v-bind="$props" role="complementary" :aria-expanded="open ? 'true' : 'false'"
:class="['flex max-h-dvh overflow-hidden duration-200', open ? enterClass : leaveClass, direction === 'left' ? 'flex-row' : 'flex-row-reverse']">
<OverlayScrollbarsComponent :defer="true"
class="bg-background-700 ring-1 ring-white/10 h-full overflow-y-auto w-full">
class="bg-dark-700 ring-1 ring-white/10 h-full overflow-y-auto w-full">
<slot />
</OverlayScrollbarsComponent>
<button @click="open = !open" aria-label="Toggle sidebar"
class="h-full bg-background-700 hover:bg-background-400 hover:cursor-pointer duration-200 py-4 px-0.5 flex items-center justify-center w-4 shrink-0">
class="h-full bg-dark-700 hover:bg-dark-400 hover:cursor-pointer duration-200 py-4 px-0.5 flex items-center justify-center w-4 shrink-0">
<iconify-icon icon="tabler:chevron-right"
:class="['text-text-200 duration-200', direction === 'left' ? open ? 'rotate-180' : 'rotate-0' : open ? 'rotate-0' : 'rotate-180']"
:class="['text-gray-200 duration-200', direction === 'left' ? open ? 'rotate-180' : 'rotate-0' : open ? 'rotate-0' : 'rotate-180']"
aria-hidden="true" />
</button>
</aside>

12
components/sidebars/navigation.vue
View file

@ -1,6 +1,6 @@
<template>
<aside
class="fixed h-dvh z-10 md:flex hidden flex-col p-4 bg-background-800 gap-10 max-w-[80px] hover:max-w-72 w-full duration-200 group ring-1 ring-background-500"
class="fixed h-dvh z-10 md:flex hidden flex-col p-4 bg-dark-800 gap-10 max-w-[80px] hover:max-w-72 w-full duration-200 group ring-1 ring-dark-500"
aria-label="Navigation" role="complementary">
<NuxtLink href="/">
<img crossorigin="anonymous" class="size-11 rounded ring-1 ring-white/10 hover:scale-105 duration-200"
@ -8,7 +8,7 @@
</NuxtLink>
<div class="flex flex-col gap-3">
<h3 class="font-semibold text-text-300 text-xs uppercase opacity-0 group-hover:opacity-100 duration-200">
<h3 class="font-semibold text-gray-300 text-xs uppercase opacity-0 group-hover:opacity-100 duration-200">
Timelines</h3>
<NuxtLink v-for="timeline in visibleTimelines" :key="timeline.href" :to="timeline.href">
@ -21,7 +21,7 @@
</div>
<div class="flex flex-col gap-3 mt-auto">
<h3 class="font-semibold text-text-300 text-xs uppercase opacity-0 group-hover:opacity-100 duration-200">
<h3 class="font-semibold text-gray-300 text-xs uppercase opacity-0 group-hover:opacity-100 duration-200">
Account</h3>
<AccountPicker @sign-in="signIn().finally(() => loadingAuth = false)"
@ -39,13 +39,13 @@
</ButtonBase>
</NuxtLink>
<h3 v-if="identity"
class="font-semibold text-text-300 text-xs uppercase opacity-0 group-hover:opacity-100 duration-200">
class="font-semibold text-gray-300 text-xs uppercase opacity-0 group-hover:opacity-100 duration-200">
Posts</h3>
<ButtonBase v-if="identity" @click="compose" title="Open composer (shortcut: n)" theme="gradient"
class="!justify-start overflow-hidden">
<Icon icon="tabler:writing" class="!size-6" />
<span class="shrink-0 line-clamp-1">Compose</span>
<kbd class="text-xs font-semibold rounded bg-background-500 font-mono px-1 flex flex-row ml-auto">
<kbd class="text-xs font-semibold rounded bg-dark-500 font-mono px-1 flex flex-row ml-auto">
<iconify-icon icon="tabler:keyboard" height="1rem" width="1rem" class="inline" aria-hidden="true" />
<iconify-icon icon="tabler:letter-n-small" height="1rem" width="1rem" class="inline -mr-1"
aria-hidden="true" />
@ -61,7 +61,7 @@
</aside>
<!-- Mobile bottom navbar -->
<nav
:class="['fixed bottom-0 left-0 right-0 z-20 h-16 md:hidden grid gap-3 p-2 *:shadow-xl bg-background-900 ring-1 ring-white/10 text-text-200', !!identity ? 'grid-cols-4' : 'grid-cols-3']">
:class="['fixed bottom-0 left-0 right-0 z-20 h-16 md:hidden grid gap-3 p-2 *:shadow-xl bg-dark-900 ring-1 ring-white/10 text-gray-200', !!identity ? 'grid-cols-4' : 'grid-cols-3']">
<AdaptiveDropdown>
<template #button>

4
components/sidebars/settings-sidebar.vue
View file

@ -1,12 +1,12 @@
<template>
<Tabs.Root v-model="tab">
<Tabs.List class="flex flex-row p-4 gap-4 bg-background-800 relative ring-1 ring-white/5 overflow-x-auto">
<Tabs.List class="flex flex-row p-4 gap-4 bg-dark-800 relative ring-1 ring-white/5 overflow-x-auto">
<Tabs.Trigger :value="page" v-for="page of SettingPages" :as-child="true">
<ButtonBase class="capitalize hover:bg-white/5">
{{ page }}
</ButtonBase>
</Tabs.Trigger>
<Tabs.Indicator class="h-1 bg-text-300 w-[--width] top-0 rounded-b" />
<Tabs.Indicator class="h-1 bg-gray-300 w-[--width] top-0 rounded-b" />
</Tabs.List>
<Tabs.Content :value="page" v-for="page of SettingPages">
<slot :name="page" />

10
components/skeleton/Skeleton.vue
View file

@ -1,10 +1,10 @@
<template>
<div v-for="index of lines" :class="[
'duration-200 animate-pulse bg-background-100 [&:not(:first-child)]:mt-2',
shape === 'circle' ? 'rounded-full' : 'rounded',
['text', 'content'].includes(type) && 'h-[1em]',
props.class
]" v-if="enabled" :style="{
'duration-200 animate-pulse bg-dark-100 [&:not(:first-child)]:mt-2',
shape === 'circle' ? 'rounded-full' : 'rounded',
['text', 'content'].includes(type) && 'h-[1em]',
props.class
]" v-if="enabled" :style="{
width: getWidth(index, lines),
}">
</div>

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>

4
components/timelines/timeline.vue
View file

@ -13,13 +13,13 @@
</div>
<div v-if="hasReachedEnd && items.length > 0"
class="flex flex-col items-center justify-center gap-2 text-text-200 text-center p-10">
class="flex flex-col items-center justify-center gap-2 text-gray-200 text-center p-10">
<span class="text-lg font-semibold">You've scrolled so far, there's nothing left to show.</span>
<span class="text-sm">You can always go back and see what you missed.</span>
</div>
<div v-else-if="hasReachedEnd && items.length === 0"
class="flex flex-col items-center justify-center gap-2 text-text-200 text-center p-10">
class="flex flex-col items-center justify-center gap-2 text-gray-200 text-center p-10">
<span class="text-lg font-semibold">There's nothing to show here.</span>
<span class="text-sm">Either you're all caught up or there's nothing to show.</span>
</div>