mirror of
https://github.com/versia-pub/frontend.git
synced 2026-03-13 03:29:16 +01:00
feat: ♻️ Rename dark to background, refactor themes
This commit is contained in:
Jesse Wierzbinski
parent
4f2c1901d1
commit
842033c950
54 changed files with 244 additions and 230 deletions
|
|
@ -2,20 +2,19 @@
|
|||
<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-gray-200 text-sm line-clamp-1 break-all">
|
||||
<div class="font-semibold text-text-200 text-sm line-clamp-1 break-all">
|
||||
{{
|
||||
identity.account.display_name }}
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-gray-400 text-xs line-clamp-1 break-all w-full">
|
||||
<span class="text-text-400 text-xs line-clamp-1 break-all w-full">
|
||||
Change account
|
||||
</span>
|
||||
</div>
|
||||
|
|
@ -28,7 +27,7 @@
|
|||
</template>
|
||||
<template #items>
|
||||
<div class="p-2">
|
||||
<h3 class="text-gray-400 text-xs text-center md:text-left uppercase font-semibold">Switch to account
|
||||
<h3 class="text-text-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]">
|
||||
|
|
@ -41,12 +40,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-gray-200 line-clamp-1 break-all">
|
||||
<div class="font-semibold text-text-200 line-clamp-1 break-all">
|
||||
{{
|
||||
identity.account.display_name }}
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-gray-400 text-sm line-clamp-1 break-all w-full">
|
||||
<span class="text-text-400 text-sm line-clamp-1 break-all w-full">
|
||||
@{{
|
||||
identity.account.acct
|
||||
}}
|
||||
|
|
@ -55,7 +54,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-gray-200" width="none" />
|
||||
<iconify-icon icon="tabler:logout" class="size-6 text-text-200" width="none" />
|
||||
</button>
|
||||
</div>
|
||||
</Menu.Item>
|
||||
|
|
|
|||
|
|
@ -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-dark-700 ring-1 ring-white/10 h-full overflow-y-auto w-full">
|
||||
class="bg-background-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-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">
|
||||
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">
|
||||
<iconify-icon icon="tabler:chevron-right"
|
||||
:class="['text-gray-200 duration-200', direction === 'left' ? open ? 'rotate-180' : 'rotate-0' : open ? 'rotate-0' : 'rotate-180']"
|
||||
:class="['text-text-200 duration-200', direction === 'left' ? open ? 'rotate-180' : 'rotate-0' : open ? 'rotate-0' : 'rotate-180']"
|
||||
aria-hidden="true" />
|
||||
</button>
|
||||
</aside>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<aside
|
||||
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"
|
||||
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"
|
||||
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-gray-300 text-xs uppercase opacity-0 group-hover:opacity-100 duration-200">
|
||||
<h3 class="font-semibold text-text-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-gray-300 text-xs uppercase opacity-0 group-hover:opacity-100 duration-200">
|
||||
<h3 class="font-semibold text-text-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-gray-300 text-xs uppercase opacity-0 group-hover:opacity-100 duration-200">
|
||||
class="font-semibold text-text-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-dark-500 font-mono px-1 flex flex-row ml-auto">
|
||||
<kbd class="text-xs font-semibold rounded bg-background-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-dark-900 ring-1 ring-white/10 text-gray-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-background-900 ring-1 ring-white/10 text-text-200', !!identity ? 'grid-cols-4' : 'grid-cols-3']">
|
||||
|
||||
<AdaptiveDropdown>
|
||||
<template #button>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
<template>
|
||||
<Tabs.Root v-model="tab">
|
||||
<Tabs.List class="flex flex-row p-4 gap-4 bg-dark-800 relative ring-1 ring-white/5 overflow-x-auto">
|
||||
<Tabs.List class="flex flex-row p-4 gap-4 bg-background-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-gray-300 w-[--width] top-0 rounded-b" />
|
||||
<Tabs.Indicator class="h-1 bg-text-300 w-[--width] top-0 rounded-b" />
|
||||
</Tabs.List>
|
||||
<Tabs.Content :value="page" v-for="page of SettingPages">
|
||||
<slot :name="page" />
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue