From b6ef52e38c198f827a89769513bb13ad7491fbeb Mon Sep 17 00:00:00 2001
From: Ren Amamiya <123083837+reyamir@users.noreply.github.com>
Date: Mon, 8 May 2023 07:59:50 +0700
Subject: [PATCH] minor design fixes

---
 src/app/note/components/base.tsx         |  2 +-
 src/app/note/components/parent.tsx       |  4 ++--
 src/app/note/components/replies/form.tsx |  2 +-
 src/app/note/components/replies/item.tsx |  2 +-
 src/app/note/components/rootNote.tsx     |  2 +-
 src/app/note/components/user/default.tsx | 17 +++++++----------
 src/app/note/components/user/reply.tsx   |  2 +-
 src/app/note/components/user/repost.tsx  |  6 +++---
 src/app/note/pages/index.page.tsx        |  3 +--
 9 files changed, 18 insertions(+), 22 deletions(-)

diff --git a/src/app/note/components/base.tsx b/src/app/note/components/base.tsx
index 8be72505..c631cf34 100644
--- a/src/app/note/components/base.tsx
+++ b/src/app/note/components/base.tsx
@@ -15,7 +15,7 @@ export const NoteBase = ({ event }: { event: any }) => {
         {event.parent_id && event.parent_id !== event.event_id && <NoteParent id={event.parent_id} />}
         <div className="flex flex-col">
           <NoteDefaultUser pubkey={event.pubkey} time={event.created_at} />
-          <div className="mt-1 pl-[52px]">
+          <div className="mt-3 pl-[46px]">
             <NoteContent content={content} />
             <NoteMetadata id={event.event_id} eventPubkey={event.pubkey} />
           </div>
diff --git a/src/app/note/components/parent.tsx b/src/app/note/components/parent.tsx
index c40c89af..bfaa974c 100644
--- a/src/app/note/components/parent.tsx
+++ b/src/app/note/components/parent.tsx
@@ -39,11 +39,11 @@ export const NoteParent = memo(function NoteParent({ id }: { id: string }) {
 
   return (
     <div className="relative flex flex-col pb-6">
-      <div className="absolute left-[21px] top-0 h-full w-0.5 bg-gradient-to-t from-zinc-800 to-zinc-600"></div>
+      <div className="absolute left-[16px] top-0 h-full w-0.5 bg-gradient-to-t from-zinc-800 to-zinc-600"></div>
       {data ? (
         <>
           <NoteDefaultUser pubkey={data.pubkey} time={data.created_at} />
-          <div className="mt-1 pl-[52px]">
+          <div className="mt-3 pl-[46px]">
             <NoteContent content={content} />
             <NoteMetadata id={data.id} eventPubkey={data.pubkey} />
           </div>
diff --git a/src/app/note/components/replies/form.tsx b/src/app/note/components/replies/form.tsx
index 6079f5c5..b7fc5f94 100644
--- a/src/app/note/components/replies/form.tsx
+++ b/src/app/note/components/replies/form.tsx
@@ -36,7 +36,7 @@ export default function NoteReplyForm({ id }: { id: string }) {
   };
 
   return (
-    <div className="flex gap-3 px-3 py-4">
+    <div className="flex gap-2.5 px-3 py-4">
       <div>
         <div className="relative h-9 w-9 shrink-0 overflow-hidden rounded-md">
           <Image src={profile?.picture} alt={account?.pubkey} className="h-9 w-9 rounded-md object-cover" />
diff --git a/src/app/note/components/replies/item.tsx b/src/app/note/components/replies/item.tsx
index 532d7510..0a557643 100644
--- a/src/app/note/components/replies/item.tsx
+++ b/src/app/note/components/replies/item.tsx
@@ -9,7 +9,7 @@ export default function Reply({ data }: { data: any }) {
     <div className="flex h-min min-h-min w-full select-text flex-col px-3 py-3">
       <div className="flex flex-col">
         <NoteReplyUser pubkey={data.pubkey} time={data.created_at} />
-        <div className="-mt-[17px] pl-[48px]">
+        <div className="-mt-[18px] pl-[46px]">
           <NoteContent content={content} />
         </div>
       </div>
diff --git a/src/app/note/components/rootNote.tsx b/src/app/note/components/rootNote.tsx
index ceb01f02..0f38914b 100644
--- a/src/app/note/components/rootNote.tsx
+++ b/src/app/note/components/rootNote.tsx
@@ -76,7 +76,7 @@ export const RootNote = memo(function RootNote({ id, fallback }: { id: string; f
       {data ? (
         <>
           <NoteDefaultUser pubkey={data.pubkey} time={data.created_at} />
-          <div className="mt-1 pl-[52px]">
+          <div className="mt-3 pl-[46px]">
             <NoteContent content={content} />
             <NoteMetadata id={data.id} eventPubkey={data.pubkey} />
           </div>
diff --git a/src/app/note/components/user/default.tsx b/src/app/note/components/user/default.tsx
index 167b6711..0132c821 100644
--- a/src/app/note/components/user/default.tsx
+++ b/src/app/note/components/user/default.tsx
@@ -5,7 +5,6 @@ import { shortenKey } from '@lume/utils/shortenKey';
 
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
-import Skeleton from 'react-loading-skeleton';
 
 dayjs.extend(relativeTime);
 
@@ -13,21 +12,19 @@ export const NoteDefaultUser = ({ pubkey, time }: { pubkey: string; time: number
   const { user } = useProfile(pubkey);
 
   return (
-    <div className="group relative z-10 flex h-11 items-center gap-2">
-      <div className="h-11 w-11 shrink-0 overflow-hidden rounded-md bg-zinc-900">
+    <div className="group relative z-10 flex items-center gap-2.5">
+      <div className="h-9 w-9 shrink-0 overflow-hidden rounded-md bg-zinc-900">
         <Image
           src={`${IMGPROXY_URL}/rs:fit:100:100/plain/${user?.picture ? user.picture : DEFAULT_AVATAR}`}
           alt={pubkey}
-          className="h-11 w-11 rounded-md object-cover"
+          className="h-9 w-9 object-cover"
         />
       </div>
       <div className="flex w-full flex-1 items-start justify-between">
-        <div className="flex flex-col gap-1">
-          <div className="flex items-baseline gap-2">
-            <h5 className="text-sm font-semibold leading-none group-hover:underline">
-              {user?.display_name || user?.name || <Skeleton />}
-            </h5>
-          </div>
+        <div className="flex flex-col gap-0.5">
+          <h5 className="text-sm font-semibold leading-none group-hover:underline">
+            {user?.display_name || user?.name || <div className="h-3 w-20 animate-pulse rounded-sm bg-zinc-800"></div>}
+          </h5>
           <div className="flex items-baseline gap-1.5 text-sm leading-none text-zinc-500">
             <span>{user?.nip05 || shortenKey(pubkey)}</span>
             <span>•</span>
diff --git a/src/app/note/components/user/reply.tsx b/src/app/note/components/user/reply.tsx
index 99c196f4..16f1dd16 100644
--- a/src/app/note/components/user/reply.tsx
+++ b/src/app/note/components/user/reply.tsx
@@ -12,7 +12,7 @@ export default function NoteReplyUser({ pubkey, time }: { pubkey: string; time:
   const { user } = useProfile(pubkey);
 
   return (
-    <div className="group flex items-start gap-3">
+    <div className="group flex items-start gap-2.5">
       <div className="relative h-9 w-9 shrink-0 rounded-md">
         <Image
           src={`${IMGPROXY_URL}/rs:fit:100:100/plain/${user?.picture ? user.picture : DEFAULT_AVATAR}`}
diff --git a/src/app/note/components/user/repost.tsx b/src/app/note/components/user/repost.tsx
index 5579a34b..45ec0107 100644
--- a/src/app/note/components/user/repost.tsx
+++ b/src/app/note/components/user/repost.tsx
@@ -13,14 +13,14 @@ export const NoteRepostUser = ({ pubkey, time }: { pubkey: string; time: number
 
   return (
     <div className="group flex items-center gap-2">
-      <div className="relative h-11 w-11 shrink-0 overflow-hidden rounded-md bg-zinc-900">
+      <div className="relative h-9 w-9 shrink-0 overflow-hidden rounded-md bg-zinc-900">
         <Image
           src={`${IMGPROXY_URL}/rs:fit:100:100/plain/${user?.picture ? user.picture : DEFAULT_AVATAR}`}
           alt={pubkey}
-          className="h-11 w-11 rounded-md object-cover"
+          className="h-9 w-9 rounded-md object-cover"
         />
       </div>
-      <div className="flex items-baseline gap-2 text-sm">
+      <div className="flex items-baseline gap-1.5 text-sm">
         <h5 className="font-semibold leading-tight group-hover:underline">
           {user?.display_name || user?.name || <Skeleton />}
           <span className="bg-gradient-to-r from-fuchsia-300 via-orange-100 to-amber-300 bg-clip-text text-transparent">
diff --git a/src/app/note/pages/index.page.tsx b/src/app/note/pages/index.page.tsx
index 853d292b..e6019320 100644
--- a/src/app/note/pages/index.page.tsx
+++ b/src/app/note/pages/index.page.tsx
@@ -42,8 +42,7 @@ export function Page() {
     <div className="scrollbar-hide h-full w-full overflow-y-auto">
       <div className="p-3">
         <div className="relative w-full rounded-lg border border-zinc-800 bg-zinc-900 shadow-input shadow-black/20">
-          {error && <div>failed to load</div>}
-          {!data ? (
+          {!data && error ? (
             <div className="animated-pulse p-3">
               <div className="flex items-start gap-2">
                 <div className="relative h-11 w-11 shrink overflow-hidden rounded-md bg-zinc-700" />