update space page

src/app/note/components/base.tsx

@@ -20,7 +20,7 @@ export function NoteBase({ event }: { event: any }) {
 
 	return (
 		<NoteWrapper href={href} className="h-min w-full px-3 py-1.5">
-			<div className="rounded-md border border-zinc-800 bg-zinc-900 px-3 pt-3 shadow-input shadow-black/20">
+			<div className="rounded-md bg-zinc-900 px-5 pt-5">
 				{event.parent_id &&
 				(event.parent_id !== event.event_id || checkParentID) ? (
 					<NoteParent id={event.parent_id} />

src/app/note/components/metadata.tsx

@@ -5,6 +5,7 @@ import { RelayContext } from "@shared/relayProvider";
 
 import NoteZap from "@app/note/components/metadata/zap";
 import PlusIcon from "@shared/icons/plus";
+import ZapIcon from "@shared/icons/zap";
 import { Tooltip } from "@shared/tooltip";
 import { READONLY_RELAYS } from "@stores/constants";
 import { decode } from "light-bolt11-decoder";
@@ -66,10 +67,19 @@ export default function NoteMetadata({
 	});
 
 	return (
-		<div className="mt-4 flex h-12 items-center gap-4 border-t border-zinc-800/50">
-			<NoteReply id={id} replies={replies} />
-			<NoteRepost id={id} pubkey={eventPubkey} reposts={reposts} />
+		<div className="flex flex-col gap-2 mt-5">
 			<NoteZap zaps={zaps} />
+			<div className="inline-flex items-center gap-2 w-full h-10 border-t border-zinc-800">
+				<NoteReply id={id} replies={replies} />
+				<NoteRepost id={id} pubkey={eventPubkey} reposts={reposts} />
+				<button
+					type="button"
+					className="ml-auto inline-flex items-center gap-1 text-sm px-2 py-1 rounded bg-zinc-800 text-zinc-300 hover:text-orange-500 hover:bg-orange-100"
+				>
+					<ZapIcon className="w-4 h-4" />
+					Zap
+				</button>
+			</div>
 		</div>
 	);
 }

src/app/note/components/metadata/zap.tsx

@@ -11,13 +11,8 @@ export default function NoteZap({ zaps }: { zaps: number }) {
 
 	return (
 		<button type="button" className="group inline-flex items-center gap-1.5">
-			<ZapIcon
-				width={16}
-				height={16}
-				className="text-zinc-400 group-hover:text-orange-400"
-			/>
 			<span className="text-base leading-none text-zinc-400 group-hover:text-white">
-				{compactNumber.format(count)} sats
+				{compactNumber.format(count)} sats zapped
 			</span>
 		</button>
 	);

src/app/note/components/quoteRepost.tsx

@@ -12,9 +12,9 @@ export function NoteQuoteRepost({ event }: { event: any }) {
 			href={`/app/note?id=${rootID}`}
 			className="h-min w-full px-3 py-1.5"
 		>
-			<div className="rounded-md border border-zinc-800 bg-zinc-900 shadow-input shadow-black/20">
-				<div className="relative px-3 pb-5 pt-3">
-					<div className="absolute left-[28px] top-[20px] h-[70px] w-0.5 bg-gradient-to-t from-zinc-800 to-zinc-600" />
+			<div className="rounded-md bg-zinc-900">
+				<div className="relative px-5 pb-5 pt-5">
+					<div className="absolute left-[35px] top-[20px] h-[70px] w-0.5 bg-gradient-to-t from-zinc-800 to-zinc-600" />
 					<NoteRepostUser pubkey={event.pubkey} time={event.created_at} />
 				</div>
 				<RootNote id={rootID} fallback={event.content} />

src/app/note/components/rootNote.tsx

@@ -75,7 +75,7 @@ export const RootNote = memo(function RootNote({
 			<div
 				onClick={(e) => openNote(e)}
 				onKeyDown={(e) => openNote(e)}
-				className="flex flex-col px-3"
+				className="flex flex-col px-5"
 			>
 				<NoteDefaultUser
 					pubkey={parseFallback.pubkey}
@@ -96,7 +96,7 @@ export const RootNote = memo(function RootNote({
 		<div
 			onClick={(e) => openNote(e)}
 			onKeyDown={(e) => openNote(e)}
-			className="flex flex-col px-3"
+			className="flex flex-col px-5"
 		>
 			{data ? (
 				<>

src/app/note/components/skeleton.tsx

@@ -1,14 +1,14 @@
 export function NoteSkeleton() {
 	return (
 		<div className="flex h-min flex-col pb-3">
-			<div className="flex items-center gap-2.5">
-				<div className="relative h-9 w-9 shrink overflow-hidden rounded-md bg-zinc-700" />
+			<div className="flex items-center gap-3">
+				<div className="relative h-11 w-11 shrink overflow-hidden rounded-md bg-zinc-700" />
 				<div className="flex flex-col gap-0.5">
 					<div className="h-3 w-20 rounded-sm bg-zinc-700" />
 					<div className="h-2 w-12 rounded-sm bg-zinc-700" />
 				</div>
 			</div>
-			<div className="mt-3 animate-pulse pl-[46px]">
+			<div className="mt-3 animate-pulse pl-[49px]">
 				<div className="flex flex-col gap-1">
 					<div className="h-4 w-full rounded-sm bg-zinc-700" />
 					<div className="h-4 w-2/3 rounded-sm bg-zinc-700" />

src/app/note/components/user/default.tsx

@@ -30,7 +30,7 @@ export function NoteDefaultUser({
 				/>
 			</Popover.Button>
 			<div className="flex flex-wrap items-baseline gap-1">
-				<h5 className="text-base font-semibold leading-none">
+				<h5 className="max-w-[15rem] text-base font-semibold leading-none truncate">
 					{user?.nip05 || user?.name || shortenKey(pubkey)}
 				</h5>
 				<span className="leading-none text-zinc-500">·</span>

src/app/note/components/user/repost.tsx

@@ -30,13 +30,13 @@ export function NoteRepostUser({
 				/>
 			</Popover.Button>
 			<div className="flex flex-wrap items-baseline gap-1">
-				<h5 className="text-base font-semibold leading-none">
+				<h5 className="max-w-[10rem] text-base font-semibold leading-none truncate">
 					{user?.nip05 || user?.name || shortenKey(pubkey)}
-					<span className="bg-gradient-to-r from-fuchsia-300 via-orange-100 to-amber-300 bg-clip-text text-transparent">
-						{" "}
-						reposted
-					</span>
 				</h5>
+				<span className="font-semibold leading-none text-fuchsia-500">
+					{" "}
+					reposted
+				</span>
 				<span className="leading-none text-zinc-500">·</span>
 				<span className="leading-none text-zinc-500">
 					{dayjs().to(dayjs.unix(time), true)}