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

wip: update color palette

Browse Source
This commit is contained in:
Ren Amamiya
2023-10-10 08:25:31 +07:00
parent d20ee26e22
commit 043c1b1220
104 changed files with 747 additions and 753 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/shared/widgets/eventLoader.tsx
View File

@@ -42,29 +42,29 @@ export function EventLoader({ firstTime }: { firstTime: boolean }) {
return (
<div className="mb-3 px-3">
<div className="h-max w-full rounded-lg bg-zinc-100 p-3 dark:bg-zinc-900">
<div className="h-max w-full rounded-lg bg-neutral-100 p-3 dark:bg-neutral-900">
<div className="flex flex-col items-center gap-3">
{firstTime ? (
<div>
<span className="text-4xl">👋</span>
<h3 className="mt-2 font-semibold leading-tight text-zinc-100 dark:text-zinc-900">
<h3 className="mt-2 font-semibold leading-tight text-neutral-100 dark:text-neutral-900">
Hello, this is the first time you&apos;re using Lume
</h3>
<p className="text-sm text-zinc-500">
<p className="text-sm text-neutral-500">
Lume is downloading all events since the last 24 hours. It will auto
refresh when it done, please be patient
</p>
</div>
) : (
<div className="text-center">
<h3 className="font-semibold leading-tight text-zinc-500 dark:text-zinc-300">
<h3 className="font-semibold leading-tight text-neutral-500 dark:text-neutral-300">
Downloading all events while you&apos;re away...
</h3>
</div>
)}
<div className="flex h-1.5 w-full overflow-hidden rounded-full bg-zinc-200 dark:bg-zinc-800">
<div className="flex h-1.5 w-full overflow-hidden rounded-full bg-neutral-200 dark:bg-neutral-800">
<div
className="flex flex-col justify-center overflow-hidden bg-interor-600 transition-all duration-1000 ease-smooth"
className="flex flex-col justify-center overflow-hidden bg-blue-500 transition-all duration-1000 ease-smooth"
role="progressbar"
style={{ width: `${progress}%` }}
/>

8
src/shared/widgets/global/articles.tsx
View File

@@ -47,7 +47,7 @@ export function GlobalArticlesWidget({ params }: { params: Widget }) {
<div className="flex h-full w-full items-center justify-center ">
<div className="inline-flex flex-col items-center justify-center gap-2">
<LoaderIcon className="h-5 w-5 animate-spin text-black dark:text-white" />
<p className="text-sm font-medium text-zinc-500 dark:text-zinc-400">
<p className="text-sm font-medium text-neutral-500 dark:text-neutral-400">
Loading article...
</p>
</div>
@@ -57,17 +57,17 @@ export function GlobalArticlesWidget({ params }: { params: Widget }) {
<div className="flex flex-col items-center gap-4">
<img src="/ghost.png" alt="empty feeds" className="h-16 w-16" />
<div className="text-center">
<h3 className="font-semibold leading-tight text-zinc-900 dark:text-zinc-100">
<h3 className="font-semibold leading-tight text-neutral-900 dark:text-neutral-100">
Oops, it looks like there are no articles.
</h3>
<p className="text-zinc-500 dark:text-zinc-400">
<p className="text-neutral-500 dark:text-neutral-400">
You can close this widget
</p>
</div>
</div>
</div>
) : (
<VList className="scrollbar-none h-full">
<VList className="h-full scrollbar-none">
{data.map((item) => renderItem(item))}
<div className="h-16" />
</VList>

8
src/shared/widgets/global/files.tsx
View File

@@ -49,7 +49,7 @@ export function GlobalFilesWidget({ params }: { params: Widget }) {
<div className="flex h-full w-full items-center justify-center ">
<div className="inline-flex flex-col items-center justify-center gap-2">
<LoaderIcon className="h-5 w-5 animate-spin text-black dark:text-white" />
<p className="text-sm font-medium text-zinc-500 dark:text-zinc-400">
<p className="text-sm font-medium text-neutral-500 dark:text-neutral-400">
Loading file sharing event...
</p>
</div>
@@ -59,17 +59,17 @@ export function GlobalFilesWidget({ params }: { params: Widget }) {
<div className="flex flex-col items-center gap-4">
<img src="/ghost.png" alt="empty feeds" className="h-16 w-16" />
<div className="text-center">
<h3 className="font-semibold leading-tight text-zinc-900 dark:text-zinc-100">
<h3 className="font-semibold leading-tight text-neutral-900 dark:text-neutral-100">
Oops, it looks like there are no file sharing events.
</h3>
<p className="text-zinc-500 dark:text-zinc-400">
<p className="text-neutral-500 dark:text-neutral-400">
You can close this widget
</p>
</div>
</div>
</div>
) : (
<VList className="scrollbar-none h-full">
<VList className="h-full scrollbar-none">
{data.map((item) => renderItem(item))}
<div className="h-16" />
</VList>

8
src/shared/widgets/global/hashtag.tsx
View File

@@ -79,7 +79,7 @@ export function GlobalHashtagWidget({ params }: { params: Widget }) {
<div className="flex h-full w-full items-center justify-center">
<div className="inline-flex flex-col items-center justify-center gap-2">
<LoaderIcon className="h-5 w-5 animate-spin text-black dark:text-white" />
<p className="text-sm font-medium text-zinc-500 dark:text-zinc-400">
<p className="text-sm font-medium text-neutral-500 dark:text-neutral-400">
Loading event related to the hashtag {params.title}...
</p>
</div>
@@ -89,17 +89,17 @@ export function GlobalHashtagWidget({ params }: { params: Widget }) {
<div className="flex flex-col items-center gap-4">
<img src="/ghost.png" alt="empty feeds" className="h-16 w-16" />
<div className="text-center">
<h3 className="font-semibold leading-tight text-zinc-900 dark:text-zinc-100">
<h3 className="font-semibold leading-tight text-neutral-900 dark:text-neutral-100">
Oops, it looks like there are no events related to {params.title}.
</h3>
<p className="text-zinc-500 dark:text-zinc-400">
<p className="text-neutral-500 dark:text-neutral-400">
You can close this widget or try with other hashtag
</p>
</div>
</div>
</div>
) : (
<VList className="scrollbar-none h-full">
<VList className="h-full scrollbar-none">
{data.map((item) => renderItem(item))}
<div className="h-16" />
</VList>

16
src/shared/widgets/local/articles.tsx
View File

@@ -49,7 +49,7 @@ export function LocalArticlesWidget({ params }: { params: Widget }) {
<div className="flex h-full w-full items-center justify-center ">
<div className="inline-flex flex-col items-center justify-center gap-2">
<LoaderIcon className="h-5 w-5 animate-spin text-black dark:text-white" />
<p className="text-sm font-medium text-zinc-500 dark:text-zinc-400">
<p className="text-sm font-medium text-neutral-500 dark:text-neutral-400">
Loading article...
</p>
</div>
@@ -59,38 +59,38 @@ export function LocalArticlesWidget({ params }: { params: Widget }) {
<div className="flex flex-col items-center gap-4">
<img src="/ghost.png" alt="empty feeds" className="h-16 w-16" />
<div className="text-center">
<h3 className="font-semibold leading-tight text-zinc-900 dark:text-zinc-100">
<h3 className="font-semibold leading-tight text-neutral-900 dark:text-neutral-100">
Oops, it looks like there are no articles.
</h3>
<p className="text-zinc-500 dark:text-zinc-400">
<p className="text-neutral-500 dark:text-neutral-400">
You can close this widget
</p>
</div>
</div>
</div>
) : (
<VList className="scrollbar-none h-full">
<VList className="h-full scrollbar-none">
{dbEvents.map((item) => renderItem(item))}
<div className="flex items-center justify-center px-3 py-1.5">
{dbEvents.length > 0 ? (
<button
onClick={() => fetchNextPage()}
disabled={!hasNextPage || isFetchingNextPage}
className="inline-flex h-10 w-max items-center justify-center gap-2 rounded-full bg-interor-500 px-6 font-medium text-white hover:bg-interor-600 focus:outline-none"
className="inline-flex h-10 w-max items-center justify-center gap-2 rounded-full bg-blue-500 px-6 font-medium text-white hover:bg-blue-600 focus:outline-none"
>
{isFetchingNextPage ? (
<>
<span>Loading...</span>
<LoaderIcon className="h-5 w-5 animate-spin text-zinc-900 dark:text-zinc-100" />
<LoaderIcon className="h-5 w-5 animate-spin text-neutral-900 dark:text-neutral-100" />
</>
) : hasNextPage ? (
<>
<ArrowRightCircleIcon className="h-5 w-5 text-zinc-900 dark:text-zinc-100" />
<ArrowRightCircleIcon className="h-5 w-5 text-neutral-900 dark:text-neutral-100" />
<span>Load more</span>
</>
) : (
<>
<ArrowRightCircleIcon className="h-5 w-5 text-zinc-900 dark:text-zinc-100" />
<ArrowRightCircleIcon className="h-5 w-5 text-neutral-900 dark:text-neutral-100" />
<span>Nothing more to load</span>
</>
)}

16
src/shared/widgets/local/feeds.tsx
View File

@@ -85,7 +85,7 @@ export function LocalFeedsWidget({ params }: { params: Widget }) {
<div className="flex h-full w-full items-center justify-center">
<div className="inline-flex flex-col items-center justify-center gap-2">
<LoaderIcon className="h-5 w-5 animate-spin text-black dark:text-white" />
<p className="text-sm font-medium text-zinc-500 dark:text-zinc-400">
<p className="text-sm font-medium text-neutral-500 dark:text-neutral-400">
Loading newsfeed...
</p>
</div>
@@ -95,38 +95,38 @@ export function LocalFeedsWidget({ params }: { params: Widget }) {
<div className="flex flex-col items-center gap-4">
<img src="/ghost.png" alt="empty feeds" className="h-16 w-16" />
<div className="text-center">
<h3 className="font-semibold leading-tight text-zinc-900 dark:text-zinc-100">
<h3 className="font-semibold leading-tight text-neutral-900 dark:text-neutral-100">
Oops, it looks like there are no posts.
</h3>
<p className="text-zinc-500 dark:text-zinc-400">
<p className="text-neutral-500 dark:text-neutral-400">
You can close this widget
</p>
</div>
</div>
</div>
) : (
<VList className="scrollbar-none h-full">
<VList className="h-full scrollbar-none">
{dbEvents.map((item) => renderItem(item))}
<div className="flex items-center justify-center px-3 py-1.5">
{dbEvents.length > 0 ? (
<button
onClick={() => fetchNextPage()}
disabled={!hasNextPage || isFetchingNextPage}
className="inline-flex h-10 w-max items-center justify-center gap-2 rounded-full bg-interor-500 px-6 font-medium text-white hover:bg-interor-600 focus:outline-none"
className="inline-flex h-10 w-max items-center justify-center gap-2 rounded-full bg-blue-500 px-6 font-medium text-white hover:bg-blue-600 focus:outline-none"
>
{isFetchingNextPage ? (
<>
<span>Loading...</span>
<LoaderIcon className="h-5 w-5 animate-spin text-zinc-900 dark:text-zinc-100" />
<LoaderIcon className="h-5 w-5 animate-spin text-neutral-900 dark:text-neutral-100" />
</>
) : hasNextPage ? (
<>
<ArrowRightCircleIcon className="h-5 w-5 text-zinc-900 dark:text-zinc-100" />
<ArrowRightCircleIcon className="h-5 w-5 text-neutral-900 dark:text-neutral-100" />
<span>Load more</span>
</>
) : (
<>
<ArrowRightCircleIcon className="h-5 w-5 text-zinc-900 dark:text-zinc-100" />
<ArrowRightCircleIcon className="h-5 w-5 text-neutral-900 dark:text-neutral-100" />
<span>Nothing more to load</span>
</>
)}

16
src/shared/widgets/local/files.tsx
View File

@@ -49,7 +49,7 @@ export function LocalFilesWidget({ params }: { params: Widget }) {
<div className="flex h-full w-full items-center justify-center ">
<div className="inline-flex flex-col items-center justify-center gap-2">
<LoaderIcon className="h-5 w-5 animate-spin text-black dark:text-white" />
<p className="text-sm font-medium text-zinc-500 dark:text-zinc-400">
<p className="text-sm font-medium text-neutral-500 dark:text-neutral-400">
Loading file sharing event...
</p>
</div>
@@ -59,38 +59,38 @@ export function LocalFilesWidget({ params }: { params: Widget }) {
<div className="flex flex-col items-center gap-4">
<img src="/ghost.png" alt="empty feeds" className="h-16 w-16" />
<div className="text-center">
<h3 className="font-semibold leading-tight text-zinc-900 dark:text-zinc-100">
<h3 className="font-semibold leading-tight text-neutral-900 dark:text-neutral-100">
Oops, it looks like there are no file sharing events.
</h3>
<p className="text-zinc-500 dark:text-zinc-400">
<p className="text-neutral-500 dark:text-neutral-400">
You can close this widget
</p>
</div>
</div>
</div>
) : (
<VList className="scrollbar-none h-full">
<VList className="h-full scrollbar-none">
{dbEvents.map((item) => renderItem(item))}
<div className="flex items-center justify-center px-3 py-1.5">
{dbEvents.length > 0 ? (
<button
onClick={() => fetchNextPage()}
disabled={!hasNextPage || isFetchingNextPage}
className="inline-flex h-10 w-max items-center justify-center gap-2 rounded-full bg-interor-500 px-6 font-medium text-white hover:bg-interor-600 focus:outline-none"
className="inline-flex h-10 w-max items-center justify-center gap-2 rounded-full bg-blue-500 px-6 font-medium text-white hover:bg-blue-600 focus:outline-none"
>
{isFetchingNextPage ? (
<>
<span>Loading...</span>
<LoaderIcon className="h-5 w-5 animate-spin text-zinc-900 dark:text-zinc-100" />
<LoaderIcon className="h-5 w-5 animate-spin text-neutral-900 dark:text-neutral-100" />
</>
) : hasNextPage ? (
<>
<ArrowRightCircleIcon className="h-5 w-5 text-zinc-900 dark:text-zinc-100" />
<ArrowRightCircleIcon className="h-5 w-5 text-neutral-900 dark:text-neutral-100" />
<span>Load more</span>
</>
) : (
<>
<ArrowRightCircleIcon className="h-5 w-5 text-zinc-900 dark:text-zinc-100" />
<ArrowRightCircleIcon className="h-5 w-5 text-neutral-900 dark:text-neutral-100" />
<span>Nothing more to load</span>
</>
)}

16
src/shared/widgets/local/follows.tsx
View File

@@ -84,7 +84,7 @@ export function LocalFollowsWidget({ params }: { params: Widget }) {
<div className="flex h-full w-full items-center justify-center ">
<div className="inline-flex flex-col items-center justify-center gap-2">
<LoaderIcon className="h-5 w-5 animate-spin text-black dark:text-white" />
<p className="text-sm font-medium text-zinc-500 dark:text-zinc-400">
<p className="text-sm font-medium text-neutral-500 dark:text-neutral-400">
Loading post...
</p>
</div>
@@ -94,38 +94,38 @@ export function LocalFollowsWidget({ params }: { params: Widget }) {
<div className="flex flex-col items-center gap-4">
<img src="/ghost.png" alt="empty feeds" className="h-16 w-16" />
<div className="text-center">
<h3 className="font-semibold leading-tight text-zinc-900 dark:text-zinc-100">
<h3 className="font-semibold leading-tight text-neutral-900 dark:text-neutral-100">
Oops, it looks like there are no posts.
</h3>
<p className="text-zinc-500 dark:text-zinc-400">
<p className="text-neutral-500 dark:text-neutral-400">
You can close this widget
</p>
</div>
</div>
</div>
) : (
<VList className="scrollbar-none h-full">
<VList className="h-full scrollbar-none">
{dbEvents.map((item) => renderItem(item))}
<div className="flex items-center justify-center px-3 py-1.5">
{dbEvents.length > 0 ? (
<button
onClick={() => fetchNextPage()}
disabled={!hasNextPage || isFetchingNextPage}
className="inline-flex h-10 w-max items-center justify-center gap-2 rounded-full bg-interor-500 px-6 font-medium text-white hover:bg-interor-600 focus:outline-none"
className="inline-flex h-10 w-max items-center justify-center gap-2 rounded-full bg-blue-500 px-6 font-medium text-white hover:bg-blue-600 focus:outline-none"
>
{isFetchingNextPage ? (
<>
<span>Loading...</span>
<LoaderIcon className="h-5 w-5 animate-spin text-zinc-900 dark:text-zinc-100" />
<LoaderIcon className="h-5 w-5 animate-spin text-neutral-900 dark:text-neutral-100" />
</>
) : hasNextPage ? (
<>
<ArrowRightCircleIcon className="h-5 w-5 text-zinc-900 dark:text-zinc-100" />
<ArrowRightCircleIcon className="h-5 w-5 text-neutral-900 dark:text-neutral-100" />
<span>Load more</span>
</>
) : (
<>
<ArrowRightCircleIcon className="h-5 w-5 text-zinc-900 dark:text-zinc-100" />
<ArrowRightCircleIcon className="h-5 w-5 text-neutral-900 dark:text-neutral-100" />
<span>Nothing more to load</span>
</>
)}

12
src/shared/widgets/local/network.tsx
View File

@@ -106,14 +106,14 @@ export function LocalNetworkWidget() {
<div className="flex-1">
{status === 'loading' ? (
<div className="px-3 py-1.5">
<div className="rounded-xl bg-zinc-100 px-3 py-3 dark:bg-zinc-900">
<div className="rounded-xl bg-neutral-100 px-3 py-3 dark:bg-neutral-900">
<NoteSkeleton />
</div>
</div>
) : dbEvents.length === 0 ? (
<EventLoader firstTime={true} />
) : (
<VList className="scrollbar-none h-full">
<VList className="h-full scrollbar-none">
{!isFetched ? <EventLoader firstTime={false} /> : null}
{dbEvents.map((item) => renderItem(item))}
<div className="flex items-center justify-center px-3 py-1.5">
@@ -121,21 +121,21 @@ export function LocalNetworkWidget() {
<button
onClick={() => fetchNextPage()}
disabled={!hasNextPage || isFetchingNextPage}
className="inline-flex h-10 w-max items-center justify-center gap-2 rounded-full bg-interor-500 px-6 font-medium text-white hover:bg-interor-600 focus:outline-none"
className="inline-flex h-10 w-max items-center justify-center gap-2 rounded-full bg-blue-500 px-6 font-medium text-white hover:bg-blue-600 focus:outline-none"
>
{isFetchingNextPage ? (
<>
<span>Loading...</span>
<LoaderIcon className="h-5 w-5 animate-spin text-zinc-900 dark:text-zinc-100" />
<LoaderIcon className="h-5 w-5 animate-spin text-neutral-900 dark:text-neutral-100" />
</>
) : hasNextPage ? (
<>
<ArrowRightCircleIcon className="h-5 w-5 text-zinc-900 dark:text-zinc-100" />
<ArrowRightCircleIcon className="h-5 w-5 text-neutral-900 dark:text-neutral-100" />
<span>Load more</span>
</>
) : (
<>
<ArrowRightCircleIcon className="h-5 w-5 text-zinc-900 dark:text-zinc-100" />
<ArrowRightCircleIcon className="h-5 w-5 text-neutral-900 dark:text-neutral-100" />
<span>Nothing more to load</span>
</>
)}

6
src/shared/widgets/local/thread.tsx
View File

@@ -44,16 +44,16 @@ export function LocalThreadWidget({ params }: { params: Widget }) {
return (
<WidgetWrapper>
<TitleBar id={params.id} title={params.title} />
<div className="scrollbar-none h-full overflow-y-auto">
<div className="h-full overflow-y-auto scrollbar-none">
{status === 'loading' ? (
<div className="px-3 py-1.5">
<div className="rounded-xl bg-zinc-100 px-3 py-3 dark:bg-zinc-900">
<div className="rounded-xl bg-neutral-100 px-3 py-3 dark:bg-neutral-900">
<NoteSkeleton />
</div>
</div>
) : (
<div className="h-min w-full px-3">
<div className="rounded-xl bg-zinc-100 px-3 py-3 dark:bg-zinc-900">
<div className="rounded-xl bg-neutral-100 px-3 py-3 dark:bg-neutral-900">
<User pubkey={data.pubkey} time={data.created_at} variant="thread" />
<div className="mt-2">{renderKind(data)}</div>
<NoteActions

10
src/shared/widgets/local/user.tsx
View File

@@ -81,26 +81,26 @@ export function LocalUserWidget({ params }: { params: Widget }) {
return (
<WidgetWrapper>
<TitleBar id={params.id} title={params.title} />
<div className="scrollbar-none h-full overflow-y-auto">
<div className="h-full overflow-y-auto scrollbar-none">
<div className="px-3 pt-1.5">
<UserProfile pubkey={params.content} />
</div>
<div>
<h3 className="mb-3 mt-4 px-3 text-lg font-semibold text-zinc-900 dark:text-zinc-100">
<h3 className="mb-3 mt-4 px-3 text-lg font-semibold text-neutral-900 dark:text-neutral-100">
Latest posts
</h3>
<div className="flex h-full w-full flex-col justify-between gap-1.5 pb-10">
{status === 'loading' ? (
<div className="px-3 py-1.5">
<div className="rounded-xl bg-zinc-100 px-3 py-3 dark:bg-zinc-900">
<div className="rounded-xl bg-neutral-100 px-3 py-3 dark:bg-neutral-900">
<NoteSkeleton />
</div>
</div>
) : data.length === 0 ? (
<div className="px-3 py-1.5">
<div className="rounded-xl bg-zinc-100 px-3 py-6 dark:bg-zinc-900">
<div className="rounded-xl bg-neutral-100 px-3 py-6 dark:bg-neutral-900">
<div className="flex flex-col items-center gap-4">
<p className="text-center text-sm text-zinc-900 dark:text-zinc-100">
<p className="text-center text-sm text-neutral-900 dark:text-neutral-100">
No new post from 24 hours ago
</p>
</div>

6
src/shared/widgets/nostrBand/trendingAccounts.tsx
View File

@@ -40,7 +40,7 @@ export function TrendingAccountsWidget({ params }: { params: Widget }) {
<div className="flex h-full w-full items-center justify-center ">
<div className="inline-flex flex-col items-center justify-center gap-2">
<LoaderIcon className="h-5 w-5 animate-spin text-black dark:text-white" />
<p className="text-sm font-medium text-zinc-500 dark:text-zinc-300">
<p className="text-sm font-medium text-neutral-500 dark:text-neutral-300">
Loading trending accounts...
</p>
</div>
@@ -50,14 +50,14 @@ export function TrendingAccountsWidget({ params }: { params: Widget }) {
<div className="flex flex-col items-center gap-4">
<img src="/ghost.png" alt="empty feeds" className="h-16 w-16" />
<div className="text-center">
<h3 className="font-semibold leading-tight text-zinc-500 dark:text-zinc-300">
<h3 className="font-semibold leading-tight text-neutral-500 dark:text-neutral-300">
Sorry, an unexpected error has occurred.
</h3>
</div>
</div>
</div>
) : (
<VList className="scrollbar-none h-full">
<VList className="h-full scrollbar-none">
{data.map((item: Profile) => (
<NostrBandUserProfile key={item.pubkey} data={item} />
))}

6
src/shared/widgets/nostrBand/trendingNotes.tsx
View File

@@ -41,7 +41,7 @@ export function TrendingNotesWidget({ params }: { params: Widget }) {
<div className="flex h-full w-full items-center justify-center ">
<div className="inline-flex flex-col items-center justify-center gap-2">
<LoaderIcon className="h-5 w-5 animate-spin text-black dark:text-white" />
<p className="text-sm font-medium text-zinc-500 dark:text-zinc-300">
<p className="text-sm font-medium text-neutral-500 dark:text-neutral-300">
Loading trending posts...
</p>
</div>
@@ -51,14 +51,14 @@ export function TrendingNotesWidget({ params }: { params: Widget }) {
<div className="flex flex-col items-center gap-4">
<img src="/ghost.png" alt="empty feeds" className="h-16 w-16" />
<div className="text-center">
<h3 className="font-semibold leading-tight text-zinc-500 dark:text-zinc-300">
<h3 className="font-semibold leading-tight text-neutral-500 dark:text-neutral-300">
Sorry, an unexpected error has occurred.
</h3>
</div>
</div>
</div>
) : (
<VList className="scrollbar-none h-full">
<VList className="h-full scrollbar-none">
{data.map((item) => (
<NoteWrapper key={item.event.id} event={item.event}>
<TextNote content={item.event.content} />

26
src/shared/widgets/nostrBandUserProfile.tsx
View File

@@ -65,7 +65,7 @@ export function NostrBandUserProfile({ data }: { data: Profile }) {
if (!profile) {
return (
<div className="rounded-xl bg-zinc-100 px-5 py-5 dark:bg-zinc-900">
<div className="rounded-xl bg-neutral-100 px-5 py-5 dark:bg-neutral-900">
<p>Can&apos;t fetch profile</p>
</div>
);
@@ -73,7 +73,7 @@ export function NostrBandUserProfile({ data }: { data: Profile }) {
return (
<div className="h-min w-full px-3 pb-3">
<div className="rounded-xl bg-zinc-100 px-5 py-5 dark:bg-zinc-900">
<div className="rounded-xl bg-neutral-100 px-5 py-5 dark:bg-neutral-900">
<div className="flex items-center justify-between">
<div className="inline-flex items-center gap-2">
<Image
@@ -81,10 +81,10 @@ export function NostrBandUserProfile({ data }: { data: Profile }) {
className="h-11 w-11 shrink-0 rounded-lg object-cover"
/>
<div className="inline-flex flex-col">
<h3 className="max-w-[15rem] truncate font-semibold text-zinc-900 dark:text-zinc-100">
<h3 className="max-w-[15rem] truncate font-semibold text-neutral-900 dark:text-neutral-100">
{profile.display_name || profile.name}
</h3>
<p className="max-w-[10rem] truncate text-sm text-zinc-900 dark:text-zinc-100/50">
<p className="max-w-[10rem] truncate text-sm text-neutral-900 dark:text-neutral-100/50">
{profile.nip05 || shortenKey(data.pubkey)}
</p>
</div>
@@ -94,7 +94,7 @@ export function NostrBandUserProfile({ data }: { data: Profile }) {
<button
type="button"
onClick={() => unfollowUser(data.pubkey)}
className="inline-flex h-8 w-8 items-center justify-center rounded-md bg-zinc-200 text-zinc-900 backdrop-blur-xl hover:bg-interor-500 hover:text-white dark:bg-zinc-800 dark:text-zinc-100 dark:hover:text-white"
className="inline-flex h-8 w-8 items-center justify-center rounded-md bg-neutral-200 text-neutral-900 backdrop-blur-xl hover:bg-blue-600 hover:text-white dark:bg-neutral-800 dark:text-neutral-100 dark:hover:text-white"
>
<UnfollowIcon className="h-4 w-4" />
</button>
@@ -102,7 +102,7 @@ export function NostrBandUserProfile({ data }: { data: Profile }) {
<button
type="button"
onClick={() => followUser(data.pubkey)}
className="inline-flex h-8 w-8 items-center justify-center rounded-md bg-zinc-200 text-zinc-900 backdrop-blur-xl hover:bg-interor-500 hover:text-white dark:bg-zinc-800 dark:text-zinc-100 dark:hover:text-white"
className="inline-flex h-8 w-8 items-center justify-center rounded-md bg-neutral-200 text-neutral-900 backdrop-blur-xl hover:bg-blue-600 hover:text-white dark:bg-neutral-800 dark:text-neutral-100 dark:hover:text-white"
>
<FollowIcon className="h-4 w-4" />
</button>
@@ -110,7 +110,7 @@ export function NostrBandUserProfile({ data }: { data: Profile }) {
</div>
</div>
<div className="mt-2">
<p className="whitespace-pre-line break-words text-zinc-900 dark:text-zinc-100">
<p className="whitespace-pre-line break-words text-neutral-900 dark:text-neutral-100">
{profile.about || profile.bio}
</p>
</div>
@@ -120,30 +120,30 @@ export function NostrBandUserProfile({ data }: { data: Profile }) {
) : (
<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-900 dark:text-zinc-100">
<span className="font-semibold leading-none text-neutral-900 dark:text-neutral-100">
{userStats.stats[data.pubkey].followers_pubkey_count ?? 0}
</span>
<span className="text-sm leading-none text-zinc-900 dark:text-zinc-100/50">
<span className="text-sm leading-none text-neutral-900 dark:text-neutral-100/50">
Followers
</span>
</div>
<div className="inline-flex flex-col gap-1">
<span className="font-semibold leading-none text-zinc-900 dark:text-zinc-100">
<span className="font-semibold leading-none text-neutral-900 dark:text-neutral-100">
{userStats.stats[data.pubkey].pub_following_pubkey_count ?? 0}
</span>
<span className="text-sm leading-none text-zinc-900 dark:text-zinc-100/50">
<span className="text-sm leading-none text-neutral-900 dark:text-neutral-100/50">
Following
</span>
</div>
<div className="inline-flex flex-col gap-1">
<span className="font-semibold leading-none text-zinc-900 dark:text-zinc-100">
<span className="font-semibold leading-none text-neutral-900 dark:text-neutral-100">
{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-900 dark:text-zinc-100/50">
<span className="text-sm leading-none text-neutral-900 dark:text-neutral-100/50">
Zaps received
</span>
</div>

18
src/shared/widgets/other/learnNostr.tsx
View File

@@ -24,10 +24,10 @@ export function LearnNostrWidget({ params }: { params: Widget }) {
return (
<WidgetWrapper>
<TitleBar id={params.id} title="The Joy of Nostr" />
<div className="scrollbar-none h-full overflow-y-auto px-3 pb-20">
<div className="h-full overflow-y-auto px-3 pb-20 scrollbar-none">
{resources.map((resource, index) => (
<div key={index} className="mb-6">
<h3 className="mb-2 text-sm font-medium text-zinc-500 dark:text-zinc-400">
<h3 className="mb-2 text-sm font-medium text-neutral-500 dark:text-neutral-400">
{resource.title}
</h3>
<div className="flex flex-col gap-2">
@@ -37,24 +37,26 @@ export function LearnNostrWidget({ params }: { params: Widget }) {
key={index}
type="button"
onClick={() => open(item.id)}
className="flex items-center justify-between rounded-xl bg-zinc-100 px-4 py-3 hover:bg-zinc-200 dark:bg-zinc-900 dark:hover:bg-zinc-800"
className="flex items-center justify-between rounded-xl bg-neutral-100 px-4 py-3 hover:bg-neutral-200 dark:bg-neutral-900 dark:hover:bg-neutral-800"
>
<div className="flex flex-col items-start">
<h5 className="font-semibold text-zinc-900 dark:text-zinc-100">
<h5 className="font-semibold text-neutral-900 dark:text-neutral-100">
{item.title}
</h5>
{seens.has(item.id) ? (
<p className="text-sm text-green-500">Readed</p>
) : (
<p className="text-sm text-zinc-500 dark:text-zinc-400">Unread</p>
<p className="text-sm text-neutral-500 dark:text-neutral-400">
Unread
</p>
)}
</div>
<ArrowRightIcon className="h-5 w-5 text-zinc-100 dark:text-zinc-900" />
<ArrowRightIcon className="h-5 w-5 text-neutral-100 dark:text-neutral-900" />
</button>
))
) : (
<div className="flex h-14 items-center justify-center rounded-xl bg-zinc-100 px-3 py-3 dark:bg-zinc-900">
<p className="text-sm font-medium text-zinc-900 dark:text-zinc-100">
<div className="flex h-14 items-center justify-center rounded-xl bg-neutral-100 px-3 py-3 dark:bg-neutral-900">
<p className="text-sm font-medium text-neutral-900 dark:text-neutral-100">
More resources are coming, stay tuned.
</p>
</div>

12
src/shared/widgets/tmp/feeds.tsx
View File

@@ -44,7 +44,7 @@ export function XfeedsWidget({ params }: { params: Widget }) {
return (
<div className="flex h-full shrink-0 grow-0 basis-[400px] flex-col items-center justify-center">
<div className="w-full px-5">
<h3 className="mb-4 text-center font-semibold text-zinc-900 dark:text-zinc-100">
<h3 className="mb-4 text-center font-semibold text-neutral-900 dark:text-neutral-100">
Choose account you want to add to group feeds
</h3>
<div className="mb-0 flex flex-col gap-2">
@@ -53,16 +53,16 @@ export function XfeedsWidget({ params }: { params: Widget }) {
value={title}
onChange={(e) => setTitle(e.target.value)}
placeholder="Title"
className="relative h-11 w-full rounded-lg bg-zinc-200 px-3 py-1 text-zinc-900 !outline-none placeholder:text-zinc-500 dark:bg-zinc-800 dark:text-zinc-100 dark:placeholder:text-zinc-300"
className="relative h-11 w-full rounded-lg bg-neutral-200 px-3 py-1 text-neutral-900 !outline-none placeholder:text-neutral-500 dark:bg-neutral-800 dark:text-neutral-100 dark:placeholder:text-neutral-300"
/>
</div>
<div className="scrollbar-none flex h-[500px] w-full flex-col overflow-y-auto rounded-lg bg-zinc-200 py-2 dark:bg-zinc-800">
<div className="flex h-[500px] w-full flex-col overflow-y-auto rounded-lg bg-neutral-200 py-2 scrollbar-none dark:bg-neutral-800">
{db.account.network.map((item: string) => (
<button
key={item}
type="button"
onClick={() => toggleGroup(item)}
className="inline-flex transform items-center justify-between px-4 py-2 hover:bg-zinc-300 dark:hover:bg-zinc-700"
className="inline-flex transform items-center justify-between px-4 py-2 hover:bg-neutral-300 dark:hover:bg-neutral-700"
>
<User pubkey={item} variant="simple" />
{groups.includes(item) && (
@@ -78,7 +78,7 @@ export function XfeedsWidget({ params }: { params: Widget }) {
type="submit"
disabled={groups.length < 1}
onClick={submit}
className="inline-flex h-11 w-full items-center justify-between gap-2 rounded-lg bg-interor-500 px-6 font-medium leading-none text-white hover:bg-interor-600 focus:outline-none disabled:opacity-50"
className="inline-flex h-11 w-full items-center justify-between gap-2 rounded-lg bg-blue-500 px-6 font-medium leading-none text-white hover:bg-blue-600 focus:outline-none disabled:opacity-50"
>
<span className="w-5" />
<span>Add {groups.length} account to group feed</span>
@@ -87,7 +87,7 @@ export function XfeedsWidget({ params }: { params: Widget }) {
<button
type="button"
onClick={cancel}
className="inline-flex h-11 w-full items-center justify-center gap-2 rounded-lg px-6 font-medium leading-none text-zinc-900 hover:bg-zinc-200 focus:outline-none disabled:opacity-50 dark:text-zinc-100 dark:hover:bg-zinc-800"
className="inline-flex h-11 w-full items-center justify-center gap-2 rounded-lg px-6 font-medium leading-none text-neutral-900 hover:bg-neutral-200 focus:outline-none disabled:opacity-50 dark:text-neutral-100 dark:hover:bg-neutral-800"
>
Cancel
</button>

6
src/shared/widgets/tmp/hashtag.tsx
View File

@@ -72,7 +72,7 @@ export function XhashtagWidget({ params }: { params: Widget }) {
<input
{...register('hashtag', { required: true, minLength: 1 })}
placeholder="#bitcoin"
className="relative h-12 w-full rounded-lg bg-zinc-200 px-3 py-1 text-zinc-900 !outline-none placeholder:text-zinc-500 dark:bg-zinc-800 dark:text-zinc-100 dark:placeholder:text-zinc-300"
className="relative h-12 w-full rounded-lg bg-neutral-200 px-3 py-1 text-neutral-900 !outline-none placeholder:text-neutral-500 dark:bg-neutral-800 dark:text-neutral-100 dark:placeholder:text-neutral-300"
/>
<span className="text-sm text-red-400">
{errors.hashtag && <p>{errors.hashtag.message}</p>}
@@ -82,7 +82,7 @@ export function XhashtagWidget({ params }: { params: Widget }) {
<button
type="submit"
disabled={!isDirty || !isValid}
className="inline-flex h-11 w-full items-center justify-between gap-2 rounded-lg bg-interor-500 px-6 font-medium text-white hover:bg-interor-600 focus:outline-none disabled:opacity-50"
className="inline-flex h-11 w-full items-center justify-between gap-2 rounded-lg bg-blue-500 px-6 font-medium text-white hover:bg-blue-600 focus:outline-none disabled:opacity-50"
>
<span className="w-5" />
<span>Create</span>
@@ -91,7 +91,7 @@ export function XhashtagWidget({ params }: { params: Widget }) {
<button
type="button"
onClick={cancel}
className="inline-flex h-11 w-full items-center justify-center gap-2 rounded-lg px-6 font-medium leading-none text-zinc-900 hover:bg-zinc-200 focus:outline-none disabled:opacity-50 dark:text-zinc-100 dark:hover:bg-zinc-800"
className="inline-flex h-11 w-full items-center justify-center gap-2 rounded-lg px-6 font-medium leading-none text-neutral-900 hover:bg-neutral-200 focus:outline-none disabled:opacity-50 dark:text-neutral-100 dark:hover:bg-neutral-800"
>
Cancel
</button>

2
src/shared/widgets/wrapper.tsx
View File

@@ -21,7 +21,7 @@ export function WidgetWrapper({
minWidth={420}
minHeight={'100vh'}
className={twMerge(
'h-full border-r border-zinc-100 pb-10 dark:border-zinc-900',
'h-full border-r border-neutral-100 pb-10 dark:border-neutral-900',
className
)}
enable={{ right: true }}