WIP

src/shared/notes/note.tsx

@@ -53,7 +53,7 @@ export function Note({ event, block }: Note) {
 								Lume isn't fully support this kind in newsfeed
 							</p>
 						</div>
-						<div className="markdown">
+						<div className="select-text whitespace-pre-line	break-words text-base text-zinc-100">
 							<p>{event.content}</p>
 						</div>
 					</div>
@@ -63,7 +63,7 @@ export function Note({ event, block }: Note) {
 
 	return (
 		<div className="h-min w-full px-3 py-1.5">
-			<div className="rounded-md bg-zinc-900 px-5 pt-5">
+			<div className="rounded-xl border-t border-zinc-800/50 bg-zinc-900 px-3 pt-3">
 				{renderParent}
 				<div className="flex flex-col">
 					<User

src/shared/notes/parent.tsx

@@ -32,7 +32,7 @@ export function NoteParent({
 										Lume isn't fully support this kind in newsfeed
 									</p>
 								</div>
-								<div className="markdown">
+								<div className="select-text whitespace-pre-line	break-words text-base text-zinc-100">
 									<p>{data.content || data.toString()}</p>
 								</div>
 							</div>

src/shared/notes/preview/image.tsx

@@ -10,7 +10,7 @@ export function ImagePreview({ urls }: { urls: string[] }) {
 							src={url}
 							fallback="https://void.cat/d/XTmrMkpid8DGLjv1AzdvcW"
 							alt="image"
-							className="h-auto w-full rounded-lg object-cover"
+							className="h-auto w-full border border-zinc-800/50 rounded-lg object-cover"
 						/>
 					</div>
 				))}

src/shared/notes/preview/link.tsx

@@ -20,7 +20,7 @@ export function LinkPreview({ urls }: { urls: string[] }) {
 				</div>
 			) : (
 				<a
-					className="flex flex-col rounded-lg border border-transparent hover:border-fuchsia-900"
+					className="flex flex-col rounded-lg border border-zinc-800/50 hover:border-fuchsia-900"
 					href={urls[0]}
 					target="_blank"
 					rel="noreferrer"

src/shared/notes/preview/video.tsx

@@ -4,9 +4,14 @@ export function VideoPreview({ urls }: { urls: string[] }) {
 	return (
 		<div className="relative mt-3 max-w-[420px] flex w-full flex-col gap-2">
 			{urls.map((url) => (
-				<div key={url} className="aspect-video">
-					<ReactPlayer url={url} width="100%" height="100%" />
-				</div>
+				<ReactPlayer
+					key={url}
+					url={url}
+					width="100%"
+					className="w-full h-auto border border-zinc-800/50 rounded-lg"
+					controls={true}
+					pip={true}
+				/>
 			))}
 		</div>
 	);

src/shared/notes/replies/list.tsx

@@ -29,8 +29,10 @@ export function RepliesList({ parent_id }: { parent_id: string }) {
 					<div className="px=3">
 						<div className="w-full flex items-center justify-center rounded-md bg-zinc-900">
 							<div className="py-6 flex flex-col items-center justify-center gap-2">
-								<EmptyIcon width={56} height={56} />
-								<p className="text-zinc-500 text-sm font-medium">No replies</p>
+								<h3 className="text-3xl">👋</h3>
+								<p className="leading-none text-zinc-400">
+									Share your thought on it...
+								</p>
 							</div>
 						</div>
 					</div>

src/shared/notes/repost.tsx

@@ -15,7 +15,8 @@ export function Repost({
 	const { status, data, isFetching } = useEvent(repostID);
 
 	return (
-		<div className="relative overflow-hidden flex flex-col mt-12">
+		<div className="relative flex flex-col mt-12">
+			<div className="absolute left-[18px] -top-10 h-[50px] w-0.5 bg-gradient-to-t from-zinc-800 to-zinc-600" />
 			{isFetching || status === "loading" ? (
 				<NoteSkeleton />
 			) : (
@@ -34,7 +35,7 @@ export function Repost({
 										Lume isn't fully support this kind in newsfeed
 									</p>
 								</div>
-								<div className="markdown">
+								<div className="select-text whitespace-pre-line	break-words text-base text-zinc-100">
 									<p>{data.content || data.toString()}</p>
 								</div>
 							</div>