reya/lume
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updated minor styles

Browse Source
This commit is contained in:
Ren Amamiya
2023-02-21 20:50:41 +07:00
parent 674377c11a
commit c9fa4252d5
7 changed files with 18 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/note/atoms/reaction.tsx
View File

@@ -70,11 +70,11 @@ export default function Reaction({
<button
onClick={(e) => handleReaction(e)}
className="group flex w-16 items-center gap-1.5 text-sm text-zinc-500">
<div className="rounded-lg p-1 group-hover:bg-zinc-800">
<div className="rounded-lg p-1 group-hover:bg-zinc-600">
{isReact ? (
<LikeSolidIcon className="h-5 w-5 text-red-500" />
) : (
<LikeIcon className="h-5 w-5" />
<LikeIcon className="h-5 w-5 group-hover:text-red-400" />
)}
</div>
<span>{reaction}</span>

4
src/components/note/atoms/reply.tsx
View File

@@ -14,8 +14,8 @@ export default function Reply({ eventID }: { eventID: string }) {
return (
<button className="group flex w-16 items-center gap-1.5 text-sm text-zinc-500">
<div className="rounded-lg p-1 group-hover:bg-zinc-800">
<ReplyIcon />
<div className="rounded-lg p-1 group-hover:bg-zinc-600">
<ReplyIcon className="h-5 w-5 group-hover:text-orange-400" />
</div>
<span>{events.length || 0}</span>
</button>

4
src/components/note/placeholder.tsx
View File

@@ -2,7 +2,7 @@ import { memo } from 'react';
export const Placeholder = memo(function Placeholder() {
return (
<div className="relative z-10 flex h-min animate-pulse select-text flex-col py-6 px-6">
<div className="relative z-10 flex h-min animate-pulse select-text flex-col py-4 px-6">
<div className="flex items-start gap-4">
<div className="relative h-11 w-11 shrink overflow-hidden rounded-full bg-zinc-700" />
<div className="flex w-full flex-1 items-start justify-between">
@@ -17,7 +17,7 @@ export const Placeholder = memo(function Placeholder() {
</div>
</div>
<div className="-mt-4 pl-[60px]">
<div className="flex flex-col gap-2">
<div className="flex flex-col gap-6">
<div className="h-16 w-full rounded bg-zinc-700" />
<div className="flex items-center gap-8">
<div className="h-4 w-12 rounded bg-zinc-700" />

12
src/components/note/single.tsx
View File

@@ -17,14 +17,20 @@ const DynamicContent = dynamic(() => import('@components/note/content'), {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
export const Single = memo(function Single({ event }: { event: any }) {
const openThread = () => {
console.log('ok');
};
return (
<div className="flex h-min min-h-min w-full select-text flex-col border-b border-zinc-800 py-6 px-6">
<div
onClick={() => openThread()}
className="flex h-min min-h-min w-full cursor-pointer select-text flex-col border-b border-zinc-800 py-4 px-6 hover:bg-zinc-800">
<div className="flex flex-col">
<User pubkey={event.pubkey} time={event.created_at} />
<div className="-mt-4 pl-[60px]">
<div className="flex flex-col gap-2">
<div className="flex flex-col gap-6">
<DynamicContent data={event.content} />
<div className="-ml-1 flex items-center gap-8">
<div className="relative z-10 -ml-1 flex items-center gap-8">
<Reply eventID={event.id} />
<Reaction eventID={event.id} eventPubkey={event.pubkey} />
</div>