wip: port more component to new ui

This commit is contained in:
Ren Amamiya
2023-08-02 14:48:51 +07:00
parent a85bcf917b
commit babcd8698e
20 changed files with 410 additions and 559 deletions

View File

@@ -14,7 +14,6 @@ import { CancelIcon, LoaderIcon, PlusCircleIcon } from '@shared/icons';
import { MentionNote } from '@shared/notes';
import { useComposer } from '@stores/composer';
import { FULL_RELAYS } from '@stores/constants';
import { usePublish } from '@utils/hooks/usePublish';
import { useImageUploader } from '@utils/hooks/useUploader';
@@ -45,7 +44,7 @@ export function Composer() {
Image.configure({
HTMLAttributes: {
class:
'rounded-lg w-2/3 h-auto border border-zinc-800 outline outline-2 outline-offset-0 outline-zinc-700 ml-1',
'rounded-lg w-2/3 h-auto border border-white/10 outline outline-2 outline-offset-0 outline-white/20 ml-1',
},
}),
],
@@ -54,7 +53,7 @@ export function Composer() {
attributes: {
class: twMerge(
'scrollbar-hide markdown break-all max-h-[500px] overflow-y-auto outline-none pr-2',
`${reply.id ? '!min-h-42' : '!min-h-[100px]'}`
`${reply.id ? '!min-h-42' : '!min-h-[120px]'}`
),
},
},
@@ -88,13 +87,13 @@ export function Composer() {
if (reply.id && reply.pubkey) {
if (reply.root && reply.root.length > 1) {
tags = [
['e', reply.root, FULL_RELAYS[0], 'root'],
['e', reply.id, FULL_RELAYS[0], 'reply'],
['e', reply.root, 'wss://relayable.org', 'root'],
['e', reply.id, 'wss://relayable.org', 'reply'],
['p', reply.pubkey],
];
} else {
tags = [
['e', reply.id, FULL_RELAYS[0], 'reply'],
['e', reply.id, 'wss://relayable.org', 'reply'],
['p', reply.pubkey],
];
}
@@ -131,7 +130,7 @@ export function Composer() {
<div className="flex h-full flex-col px-4 pb-4">
<div className="flex h-full w-full gap-3">
<div className="flex w-8 shrink-0 items-center justify-center">
<div className="h-full w-[2px] bg-zinc-800" />
<div className="h-full w-[2px] bg-white/10" />
</div>
<div className="w-full">
<EditorContent
@@ -147,9 +146,9 @@ export function Composer() {
<button
type="button"
onClick={() => clearReply()}
className="absolute right-3 top-3 inline-flex h-6 w-6 items-center justify-center gap-2 rounded bg-zinc-800 px-2 hover:bg-zinc-700"
className="absolute right-3 top-3 inline-flex h-6 w-6 items-center justify-center rounded bg-white/10 px-2"
>
<CancelIcon className="h-4 w-4 text-zinc-100" />
<CancelIcon className="h-4 w-4 text-white" />
</button>
</div>
)}
@@ -159,15 +158,15 @@ export function Composer() {
<button
type="button"
onClick={() => uploadImage()}
className="inline-flex h-8 w-8 items-center justify-center rounded-md hover:bg-zinc-800"
className="inline-flex h-8 w-8 items-center justify-center rounded-md hover:bg-white/10"
>
<PlusCircleIcon className="h-5 w-5 text-zinc-500" />
<PlusCircleIcon className="h-5 w-5 text-white/50" />
</button>
<Button onClick={() => submit()} preset="publish">
{status === 'loading' ? (
<LoaderIcon className="h-4 w-4 animate-spin text-zinc-100" />
<LoaderIcon className="h-4 w-4 animate-spin text-white" />
) : (
'Publish'
'Postr'
)}
</Button>
</div>