mirror of
https://github.com/luminous-devs/lume.git
synced 2024-09-18 11:13:30 +00:00
ui consistent
This commit is contained in:
parent
c89e7e48ee
commit
f4b2458417
@ -24,15 +24,17 @@ export function ChatsListItem({ pubkey }: { pubkey: string }) {
|
|||||||
preventScrollReset={true}
|
preventScrollReset={true}
|
||||||
className={({ isActive }) =>
|
className={({ isActive }) =>
|
||||||
twMerge(
|
twMerge(
|
||||||
'inline-flex h-10 items-center gap-2.5 rounded-md px-2',
|
'flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 pl-4 pr-2',
|
||||||
isActive ? 'bg-white/10 text-white backdrop-blur-xl' : 'text-white/80'
|
isActive
|
||||||
|
? 'border-fuchsia-500 bg-white/5 text-white'
|
||||||
|
: 'border-transparent text-white/80'
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
<Image
|
<Image
|
||||||
src={user?.picture || user?.image}
|
src={user?.picture || user?.image}
|
||||||
alt={pubkey}
|
alt={pubkey}
|
||||||
className="h-7 w-7 shrink-0 rounded object-cover"
|
className="h-7 w-7 shrink-0 rounded"
|
||||||
/>
|
/>
|
||||||
<div className="inline-flex w-full flex-1 items-center justify-between">
|
<div className="inline-flex w-full flex-1 items-center justify-between">
|
||||||
<h5 className="max-w-[10rem] truncate">
|
<h5 className="max-w-[10rem] truncate">
|
||||||
|
@ -24,7 +24,7 @@ export function NewMessageModal() {
|
|||||||
<Dialog.Trigger asChild>
|
<Dialog.Trigger asChild>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className="inline-flex h-10 items-center gap-2.5 rounded-md px-2"
|
className="inline-flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 border-transparent pl-4 pr-2"
|
||||||
>
|
>
|
||||||
<div className="inline-flex h-7 w-7 shrink-0 items-center justify-center rounded bg-white/10 backdrop-blur-xl">
|
<div className="inline-flex h-7 w-7 shrink-0 items-center justify-center rounded bg-white/10 backdrop-blur-xl">
|
||||||
<PlusIcon className="h-4 w-4 text-white" />
|
<PlusIcon className="h-4 w-4 text-white" />
|
||||||
|
@ -22,7 +22,7 @@ export function UnknownsModal({ data }: { data: string[] }) {
|
|||||||
<Dialog.Trigger asChild>
|
<Dialog.Trigger asChild>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className="inline-flex h-10 items-center gap-2.5 rounded-md px-2"
|
className="inline-flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 border-transparent pl-4 pr-2"
|
||||||
>
|
>
|
||||||
<div className="inline-flex h-7 w-7 shrink-0 items-center justify-center rounded bg-white/10 backdrop-blur-xl">
|
<div className="inline-flex h-7 w-7 shrink-0 items-center justify-center rounded bg-white/10 backdrop-blur-xl">
|
||||||
<StrangersIcon className="h-4 w-4 text-white" />
|
<StrangersIcon className="h-4 w-4 text-white" />
|
||||||
|
@ -21,7 +21,7 @@ export function ComposerModal() {
|
|||||||
<Dialog.Trigger asChild>
|
<Dialog.Trigger asChild>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className="inline-flex h-10 w-full items-center justify-center gap-1.5 rounded-lg bg-white/20 from-fuchsia-200 via-red-200 to-orange-300 px-4 font-medium text-white hover:bg-fuchsia-500 hover:bg-gradient-to-r hover:text-black focus:outline-none active:translate-y-1"
|
className="inline-flex h-10 w-full items-center justify-center gap-1.5 rounded-lg bg-white/20 px-4 font-bold text-white hover:bg-fuchsia-500 focus:outline-none active:translate-y-1"
|
||||||
>
|
>
|
||||||
<ComposeIcon className="h-5 w-5" />
|
<ComposeIcon className="h-5 w-5" />
|
||||||
Postr
|
Postr
|
||||||
|
@ -1,8 +1,6 @@
|
|||||||
import { NavLink, Outlet, ScrollRestoration } from 'react-router-dom';
|
import { NavLink, Outlet, ScrollRestoration } from 'react-router-dom';
|
||||||
import { twMerge } from 'tailwind-merge';
|
import { twMerge } from 'tailwind-merge';
|
||||||
|
|
||||||
import { LumeBar } from '@shared/lumeBar';
|
|
||||||
|
|
||||||
export function SettingsLayout() {
|
export function SettingsLayout() {
|
||||||
return (
|
return (
|
||||||
<div className="flex h-screen w-screen">
|
<div className="flex h-screen w-screen">
|
||||||
@ -59,9 +57,6 @@ export function SettingsLayout() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="absolute bottom-3 left-0 w-full px-10">
|
|
||||||
<LumeBar />
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div className="h-full w-full flex-1 bg-black/90 backdrop-blur-xl">
|
<div className="h-full w-full flex-1 bg-black/90 backdrop-blur-xl">
|
||||||
<Outlet />
|
<Outlet />
|
||||||
|
@ -17,18 +17,20 @@ export function Navigation() {
|
|||||||
<div className="relative h-full w-[232px] bg-black/80">
|
<div className="relative h-full w-[232px] bg-black/80">
|
||||||
<div data-tauri-drag-region className="h-11 w-full" />
|
<div data-tauri-drag-region className="h-11 w-full" />
|
||||||
<div className="scrollbar-hide flex h-full flex-col gap-6 overflow-y-auto pb-32">
|
<div className="scrollbar-hide flex h-full flex-col gap-6 overflow-y-auto pb-32">
|
||||||
<div className="flex flex-col px-2">
|
<div className="flex flex-col pr-2">
|
||||||
<NavLink
|
<NavLink
|
||||||
to="/"
|
to="/"
|
||||||
preventScrollReset={true}
|
preventScrollReset={true}
|
||||||
className={({ isActive }) =>
|
className={({ isActive }) =>
|
||||||
twMerge(
|
twMerge(
|
||||||
'flex h-10 items-center gap-2.5 rounded-md px-2',
|
'flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 pl-4 pr-2',
|
||||||
isActive ? 'bg-white/5 text-white' : 'text-white/80'
|
isActive
|
||||||
|
? 'border-fuchsia-500 bg-white/5 text-white'
|
||||||
|
: 'border-transparent text-white/80'
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
<span className="inline-flex h-7 w-7 items-center justify-center rounded bg-white/10 backdrop-blur-xl">
|
<span className="inline-flex h-7 w-7 shrink-0 items-center justify-center rounded bg-white/10 backdrop-blur-xl">
|
||||||
<SpaceIcon className="h-4 w-4 text-white" />
|
<SpaceIcon className="h-4 w-4 text-white" />
|
||||||
</span>
|
</span>
|
||||||
Space
|
Space
|
||||||
@ -38,12 +40,14 @@ export function Navigation() {
|
|||||||
preventScrollReset={true}
|
preventScrollReset={true}
|
||||||
className={({ isActive }) =>
|
className={({ isActive }) =>
|
||||||
twMerge(
|
twMerge(
|
||||||
'flex h-10 items-center gap-2.5 rounded-md px-2',
|
'flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 pl-4 pr-2',
|
||||||
isActive ? 'bg-white/5 text-white' : 'text-white/80'
|
isActive
|
||||||
|
? 'border-fuchsia-500 bg-white/5 text-white'
|
||||||
|
: 'border-transparent text-white/80'
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
<span className="inline-flex h-7 w-7 items-center justify-center rounded bg-white/10 backdrop-blur-xl">
|
<span className="inline-flex h-7 w-7 shrink-0 items-center justify-center rounded bg-white/10 backdrop-blur-xl">
|
||||||
<BellIcon className="h-4 w-4 text-white" />
|
<BellIcon className="h-4 w-4 text-white" />
|
||||||
</span>
|
</span>
|
||||||
Notifications
|
Notifications
|
||||||
@ -53,21 +57,23 @@ export function Navigation() {
|
|||||||
preventScrollReset={true}
|
preventScrollReset={true}
|
||||||
className={({ isActive }) =>
|
className={({ isActive }) =>
|
||||||
twMerge(
|
twMerge(
|
||||||
'flex h-10 items-center gap-2.5 rounded-md px-2',
|
'flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 pl-4 pr-2',
|
||||||
isActive ? 'bg-white/5 text-white' : 'text-white/80'
|
isActive
|
||||||
|
? 'border-fuchsia-500 bg-white/5 text-white'
|
||||||
|
: 'border-transparent text-white/80'
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
<span className="inline-flex h-7 w-7 items-center justify-center rounded bg-white/10 backdrop-blur-xl">
|
<span className="inline-flex h-7 w-7 shrink-0 items-center justify-center rounded bg-white/10 backdrop-blur-xl">
|
||||||
<SettingsIcon className="h-4 w-4 text-white" />
|
<SettingsIcon className="h-4 w-4 text-white" />
|
||||||
</span>
|
</span>
|
||||||
Settings
|
Settings
|
||||||
</NavLink>
|
</NavLink>
|
||||||
</div>
|
</div>
|
||||||
<Collapsible.Root open={chats} onOpenChange={toggleChats}>
|
<Collapsible.Root open={chats} onOpenChange={toggleChats}>
|
||||||
<div className="flex flex-col gap-1 px-2">
|
<div className="flex flex-col gap-1 pr-2">
|
||||||
<Collapsible.Trigger asChild>
|
<Collapsible.Trigger asChild>
|
||||||
<button className="flex items-center gap-1 px-3">
|
<button className="flex items-center gap-1 pl-[20px] pr-4">
|
||||||
<div
|
<div
|
||||||
className={twMerge(
|
className={twMerge(
|
||||||
'inline-flex h-5 w-5 transform items-center justify-center transition-transform duration-150 ease-in-out',
|
'inline-flex h-5 w-5 transform items-center justify-center transition-transform duration-150 ease-in-out',
|
||||||
|
Loading…
Reference in New Issue
Block a user