wip: port more component to new ui

src/app/trending/components/profile.tsx

@@ -58,21 +58,19 @@ export function Profile({ data }: { data: any }) {
     );
 
   return (
-    <div className="rounded-xl border-t border-zinc-800/50 bg-zinc-900 px-5 py-5">
+    <div className="rounded-xl bg-white/10 px-5 py-5">
       <div className="flex items-center justify-between">
         <div className="inline-flex items-center gap-2">
-          <div className="h-11 w-11 shrink-0">
-            <Image
-              src={profile.picture}
-              fallback={DEFAULT_AVATAR}
-              className="h-11 w-11 rounded-lg object-cover"
-            />
-          </div>
+          <Image
+            src={profile.picture}
+            fallback={DEFAULT_AVATAR}
+            className="h-11 w-11 shrink-0 rounded-lg object-cover"
+          />
           <div className="inline-flex flex-col gap-1">
-            <h3 className="max-w-[15rem] truncate font-semibold leading-none text-zinc-100">
+            <h3 className="max-w-[15rem] truncate font-semibold leading-none text-white">
               {profile.display_name || profile.name}
             </h3>
-            <p className="max-w-[10rem] truncate text-sm leading-none text-zinc-400">
+            <p className="max-w-[10rem] truncate text-sm leading-none text-white/50">
               {profile.nip05 || shortenKey(data.pubkey)}
             </p>
           </div>
@@ -81,15 +79,15 @@ export function Profile({ data }: { data: any }) {
           {socialStatus === 'loading' ? (
             <button
               type="button"
-              className="inline-flex h-8 w-8 items-center justify-center rounded-md bg-zinc-900 hover:bg-fuchsia-500"
+              className="inline-flex h-8 w-8 items-center justify-center rounded-md bg-white/10 hover:bg-fuchsia-500"
             >
-              <LoaderIcon className="h-4 w-4 animate-spin text-black dark:text-zinc-100" />
+              <LoaderIcon className="h-4 w-4 animate-spin text-white" />
             </button>
           ) : followed ? (
             <button
               type="button"
               onClick={() => unfollowUser(data.pubkey)}
-              className="inline-flex h-8 w-8 items-center justify-center rounded-md bg-zinc-800 text-zinc-400 hover:bg-fuchsia-500 hover:text-white"
+              className="inline-flex h-8 w-8 items-center justify-center rounded-md bg-white/10 text-white hover:bg-fuchsia-500 hover:text-white"
             >
               <UnfollowIcon className="h-4 w-4" />
             </button>
@@ -97,7 +95,7 @@ export function Profile({ data }: { data: any }) {
             <button
               type="button"
               onClick={() => followUser(data.pubkey)}
-              className="inline-flex h-8 w-8 items-center justify-center rounded-md bg-zinc-800 text-zinc-400 hover:bg-fuchsia-500 hover:text-white"
+              className="inline-flex h-8 w-8 items-center justify-center rounded-md bg-white/10 text-white hover:bg-fuchsia-500 hover:text-white"
             >
               <FollowIcon className="h-4 w-4" />
             </button>
@@ -105,7 +103,7 @@ export function Profile({ data }: { data: any }) {
         </div>
       </div>
       <div className="mt-2">
-        <p className="whitespace-pre-line break-words text-zinc-100">
+        <p className="whitespace-pre-line break-words text-white">
           {profile.about || profile.bio}
         </p>
       </div>
@@ -115,26 +113,26 @@ export function Profile({ data }: { data: any }) {
         ) : (
           <div className="flex w-full items-center gap-8">
             <div className="inline-flex flex-col gap-1">
-              <span className="font-semibold leading-none text-zinc-100">
+              <span className="font-semibold leading-none text-white">
                 {userStats.stats[data.pubkey].followers_pubkey_count ?? 0}
               </span>
-              <span className="text-sm leading-none text-zinc-400">Followers</span>
+              <span className="text-sm leading-none text-white/50">Followers</span>
             </div>
             <div className="inline-flex flex-col gap-1">
-              <span className="font-semibold leading-none text-zinc-100">
+              <span className="font-semibold leading-none text-white">
                 {userStats.stats[data.pubkey].pub_following_pubkey_count ?? 0}
               </span>
-              <span className="text-sm leading-none text-zinc-400">Following</span>
+              <span className="text-sm leading-none text-white/50">Following</span>
             </div>
             <div className="inline-flex flex-col gap-1">
-              <span className="font-semibold leading-none text-zinc-100">
+              <span className="font-semibold leading-none text-white">
                 {userStats.stats[data.pubkey].zaps_received
                   ? compactNumber.format(
                       userStats.stats[data.pubkey].zaps_received.msats / 1000
                     )
                   : 0}
               </span>
-              <span className="text-sm leading-none text-zinc-400">Zaps received</span>
+              <span className="text-sm leading-none text-white/50">Zaps received</span>
             </div>
           </div>
         )}

src/app/trending/components/trendingNotes.tsx

@@ -14,18 +14,18 @@ export function TrendingNotes() {
   });
 
   return (
-    <div className="flex w-[360px] shrink-0 flex-col border-r border-zinc-900">
+    <div className="scrollbar-hide relative h-full w-[400px] shrink-0 overflow-y-auto bg-white/10 pb-20">
       <TitleBar title="Trending Posts" />
-      <div className="scrollbar-hide flex h-full w-full flex-col justify-between gap-1.5 overflow-y-auto pb-20 pt-1.5">
+      <div className="h-full">
         {error && <p>Failed to fetch</p>}
         {status === 'loading' ? (
           <div className="px-3 py-1.5">
-            <div className="shadow-input rounded-md bg-zinc-900 px-3 py-3 shadow-black/20">
+            <div className="shadow-input rounded-md px-3 py-3">
               <NoteSkeleton />
             </div>
           </div>
         ) : (
-          <div className="relative flex w-full flex-col pt-1.5">
+          <div className="relative flex w-full flex-col">
             {data.notes.map((item) => (
               <NoteKind_1 key={item.id} event={item.event} skipMetadata={true} />
             ))}

src/app/trending/components/trendingProfiles.tsx

@@ -15,9 +15,9 @@ export function TrendingProfiles() {
   });
 
   return (
-    <div className="flex w-[360px] shrink-0 flex-col border-r border-zinc-900">
+    <div className="scrollbar-hide relative h-full w-[400px] shrink-0 overflow-y-auto bg-white/10 pb-20">
       <TitleBar title="Trending Profiles" />
-      <div className="scrollbar-hide flex h-full w-full flex-col justify-between gap-1.5 overflow-y-auto pb-20 pt-1.5">
+      <div className="h-full">
         {error && <p>Failed to fetch</p>}
         {status === 'loading' ? (
           <div className="px-3 py-1.5">
@@ -26,7 +26,7 @@ export function TrendingProfiles() {
             </div>
           </div>
         ) : (
-          <div className="relative flex w-full flex-col gap-3 px-3 pt-3">
+          <div className="relative flex w-full flex-col gap-3 px-3 pt-1.5">
             {data.profiles.map((item) => (
               <Profile key={item.pubkey} data={item} />
             ))}

src/app/trending/index.tsx

@@ -3,7 +3,7 @@ import { TrendingProfiles } from '@app/trending/components/trendingProfiles';
 
 export function TrendingScreen() {
   return (
-    <div className="scrollbar-hide flex h-full w-full flex-nowrap overflow-x-auto overflow-y-hidden">
+    <div className="scrollbar-hide flex h-full w-full flex-nowrap divide-x divide-white/5 overflow-x-auto overflow-y-hidden">
       <TrendingProfiles />
       <TrendingNotes />
     </div>