wip: cross platform ui

This commit is contained in:
Ren Amamiya
2023-08-28 16:00:11 +07:00
parent 5a3207f878
commit c89e7e48ee
86 changed files with 376 additions and 416 deletions

View File

@@ -4,7 +4,7 @@ import { useNavigate } from 'react-router-dom';
import { User } from '@app/auth/components/user';
import { CancelIcon, PlusIcon } from '@shared/icons';
import { CancelIcon, StrangersIcon } from '@shared/icons';
import { compactNumber } from '@utils/number';
@@ -22,10 +22,10 @@ export function UnknownsModal({ data }: { data: string[] }) {
<Dialog.Trigger asChild>
<button
type="button"
className="inline-flex h-9 items-center gap-2.5 rounded-md px-2"
className="inline-flex h-10 items-center gap-2.5 rounded-md px-2"
>
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10">
<PlusIcon className="h-3 w-3 text-white" />
<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" />
</div>
<div>
<h5 className="text-white/50">
@@ -37,14 +37,14 @@ export function UnknownsModal({ data }: { data: string[] }) {
<Dialog.Portal className="relative z-10">
<Dialog.Overlay className="fixed inset-0 z-50 bg-black/80 backdrop-blur-xl" />
<Dialog.Content className="fixed inset-0 z-50 flex min-h-full items-center justify-center">
<div className="relative h-min w-full max-w-xl rounded-xl bg-white/10">
<div className="relative h-min w-full max-w-xl rounded-xl bg-white/10 backdrop-blur-xl">
<div className="h-min w-full shrink-0 border-b border-white/10 bg-white/5 px-5 py-5">
<div className="flex flex-col gap-1">
<div className="flex items-center justify-between">
<Dialog.Title className="text-lg font-semibold leading-none text-white">
{data.length} unknowns
</Dialog.Title>
<Dialog.Close className="inline-flex h-6 w-6 items-center justify-center rounded-md hover:bg-white/10">
<Dialog.Close className="inline-flex h-6 w-6 items-center justify-center rounded-md backdrop-blur-xl hover:bg-white/10">
<CancelIcon className="h-4 w-4 text-white/50" />
</Dialog.Close>
</div>
@@ -57,14 +57,14 @@ export function UnknownsModal({ data }: { data: string[] }) {
{data.map((pubkey) => (
<div
key={pubkey}
className="group flex items-center justify-between px-4 py-2 hover:bg-white/10"
className="group flex items-center justify-between px-4 py-2 backdrop-blur-xl hover:bg-white/10"
>
<User pubkey={pubkey} />
<div>
<button
type="button"
onClick={() => openChat(pubkey)}
className="hidden w-max rounded bg-white/10 px-3 py-1 text-sm font-medium hover:bg-fuchsia-500 group-hover:inline-flex"
className="hidden w-max rounded bg-white/10 px-3 py-1 text-sm font-medium backdrop-blur-xl hover:bg-fuchsia-500 group-hover:inline-flex"
>
Chat
</button>