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

wip: ui

Browse Source
This commit is contained in:
Ren Amamiya
2023-10-08 09:31:11 +07:00
parent cb91373d33
commit bce76bd41c
66 changed files with 216 additions and 214 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
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 border-t border-white/10 bg-white/20 p-3">
<div className="h-max w-full rounded-lg bg-zinc-100 p-3 dark:bg-zinc-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">
<h3 className="mt-2 font-semibold leading-tight text-zinc-100 dark:text-zinc-900">
Hello, this is the first time you&apos;re using Lume
</h3>
<p className="text-sm text-white/70">
<p className="text-sm text-zinc-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">
<h3 className="font-semibold leading-tight text-zinc-500">
Downloading all events while you&apos;re away...
</h3>
</div>
)}
<div className="flex h-1.5 w-full overflow-hidden rounded-full bg-white/20">
<div
className="flex flex-col justify-center overflow-hidden bg-fuchsia-500 transition-all duration-1000 ease-smooth"
className="flex flex-col justify-center overflow-hidden bg-interor-600 transition-all duration-1000 ease-smooth"
role="progressbar"
style={{ width: `${progress}%` }}
/>

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

@@ -72,7 +72,7 @@ export function LocalArticlesWidget({ params }: { params: Widget }) {
<button
onClick={() => fetchNextPage()}
disabled={!hasNextPage || isFetchingNextPage}
className="inline-flex h-10 w-max items-center justify-center gap-2 rounded-full bg-fuchsia-500 px-6 font-medium leading-none text-white hover:bg-fuchsia-600 focus:outline-none"
className="inline-flex h-10 w-max items-center justify-center gap-2 rounded-full bg-interor-500 px-6 font-medium leading-none text-white hover:bg-interor-600 focus:outline-none"
>
{isFetchingNextPage ? (
<>

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

@@ -108,7 +108,7 @@ export function LocalFeedsWidget({ params }: { params: Widget }) {
<button
onClick={() => fetchNextPage()}
disabled={!hasNextPage || isFetchingNextPage}
className="inline-flex h-10 w-max items-center justify-center gap-2 rounded-full bg-fuchsia-500 px-6 font-medium leading-none text-white hover:bg-fuchsia-600 focus:outline-none"
className="inline-flex h-10 w-max items-center justify-center gap-2 rounded-full bg-interor-500 px-6 font-medium leading-none text-white hover:bg-interor-600 focus:outline-none"
>
{isFetchingNextPage ? (
<>

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

@@ -74,7 +74,7 @@ export function LocalFilesWidget({ params }: { params: Widget }) {
<button
onClick={() => fetchNextPage()}
disabled={!hasNextPage || isFetchingNextPage}
className="inline-flex h-10 w-max items-center justify-center gap-2 rounded-full bg-fuchsia-500 px-6 font-medium leading-none text-white hover:bg-fuchsia-600 focus:outline-none"
className="inline-flex h-10 w-max items-center justify-center gap-2 rounded-full bg-interor-500 px-6 font-medium leading-none text-white hover:bg-interor-600 focus:outline-none"
>
{isFetchingNextPage ? (
<>

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

@@ -107,7 +107,7 @@ export function LocalFollowsWidget({ params }: { params: Widget }) {
<button
onClick={() => fetchNextPage()}
disabled={!hasNextPage || isFetchingNextPage}
className="inline-flex h-10 w-max items-center justify-center gap-2 rounded-full bg-fuchsia-500 px-6 font-medium leading-none text-white hover:bg-fuchsia-600 focus:outline-none"
className="inline-flex h-10 w-max items-center justify-center gap-2 rounded-full bg-interor-500 px-6 font-medium leading-none text-white hover:bg-interor-600 focus:outline-none"
>
{isFetchingNextPage ? (
<>

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

@@ -106,7 +106,7 @@ export function LocalNetworkWidget() {
<div className="flex-1">
{status === 'loading' ? (
<div className="px-3 py-1.5">
<div className="rounded-xl bg-white/10 px-3 py-3 backdrop-blur-xl">
<div className="rounded-xl bg-zinc-100 px-3 py-3 backdrop-blur-xl dark:bg-zinc-900">
<NoteSkeleton />
</div>
</div>
@@ -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-fuchsia-500 px-6 font-medium leading-none text-white hover:bg-fuchsia-600 focus:outline-none"
className="inline-flex h-10 w-max items-center justify-center gap-2 rounded-full bg-interor-500 px-6 font-medium hover:bg-interor-600 focus:outline-none"
>
{isFetchingNextPage ? (
<>
<span>Loading...</span>
<LoaderIcon className="h-5 w-5 animate-spin text-white" />
<LoaderIcon className="h-5 w-5 animate-spin text-zinc-900 dark:text-zinc-100" />
</>
) : hasNextPage ? (
<>
<ArrowRightCircleIcon className="h-5 w-5 text-white" />
<ArrowRightCircleIcon className="h-5 w-5 text-zinc-900 dark:text-zinc-100" />
<span>Load more</span>
</>
) : (
<>
<ArrowRightCircleIcon className="h-5 w-5 text-white" />
<ArrowRightCircleIcon className="h-5 w-5 text-zinc-900 dark:text-zinc-100" />
<span>Nothing more to load</span>
</>
)}

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

@@ -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-white/10 text-white backdrop-blur-xl 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 backdrop-blur-xl hover:bg-interor-500 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-white/10 text-white backdrop-blur-xl 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 backdrop-blur-xl hover:bg-interor-500 hover:text-white"
>
<FollowIcon className="h-4 w-4" />
</button>

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

@@ -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-fuchsia-500 px-6 font-medium leading-none text-white hover:bg-fuchsia-600 focus:outline-none disabled:opacity-50"
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"
>
<span className="w-5" />
<span>Add {groups.length} account to group feed</span>

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

@@ -62,7 +62,7 @@ export function XhashtagWidget({ params }: { params: Widget }) {
};
return (
<div className="flex h-full shrink-0 grow-0 basis-[400px] flex-col items-center justify-center bg-white/10 backdrop-blur-xl">
<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 text-lg font-semibold">
Enter hashtag you want to follow
@@ -72,7 +72,7 @@ export function XhashtagWidget({ params }: { params: Widget }) {
<input
{...register('hashtag', { required: true, minLength: 1 })}
placeholder="#bitcoin"
className="relative h-11 w-full rounded-lg bg-white/10 px-3 py-1 text-white !outline-none backdrop-blur-xl placeholder:text-white/50"
className="relative h-11 w-full rounded-lg bg-zinc-100 px-3 py-1 text-zinc-900 !outline-none backdrop-blur-xl placeholder:text-white/50 dark:bg-zinc-900 dark:text-zinc-100"
/>
<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-fuchsia-500 px-6 font-medium leading-none text-white hover:bg-fuchsia-600 focus:outline-none disabled:opacity-50"
className="inline-flex h-11 w-full items-center justify-between gap-2 rounded-lg bg-interor-500 px-6 font-medium text-zinc-900 hover:bg-interor-600 focus:outline-none disabled:opacity-50 dark:text-zinc-100"
>
<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 bg-white/10 px-6 font-medium leading-none text-white backdrop-blur-xl hover:bg-white/20 focus:outline-none disabled:opacity-50"
className="inline-flex h-11 w-full items-center justify-center gap-2 rounded-lg bg-zinc-100 px-6 font-medium leading-none text-zinc-900 backdrop-blur-xl hover:bg-white/20 focus:outline-none disabled:opacity-50 dark:bg-zinc-900 dark:text-zinc-100"
>
Cancel
</button>

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

@@ -20,10 +20,7 @@ export function WidgetWrapper({
}}
minWidth={420}
minHeight={'100vh'}
className={twMerge(
'relative shrink-0 grow-0 bg-white/10 backdrop-blur-xl',
className
)}
className={twMerge('relative shrink-0 grow-0', className)}
enable={{ right: true }}
>
{children}