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

polish

Browse Source
This commit is contained in:
Ren Amamiya
2023-08-03 08:56:36 +07:00
parent babcd8698e
commit ae1e84655a
71 changed files with 908 additions and 1072 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/shared/avatarUploader.tsx
View File

@@ -26,9 +26,9 @@ export function AvatarUploader({ setPicture }: { setPicture: any }) {
className="inline-flex h-full w-full items-center justify-center bg-zinc-900/40"
>
{loading ? (
<LoaderIcon className="h-6 w-6 animate-spin text-zinc-100" />
<LoaderIcon className="h-6 w-6 animate-spin text-white" />
) : (
<PlusIcon className="h-6 w-6 text-zinc-100" />
<PlusIcon className="h-6 w-6 text-white" />
)}
</button>
);

4
src/shared/bannerUploader.tsx
View File

@@ -26,9 +26,9 @@ export function BannerUploader({ setBanner }: { setBanner: any }) {
className="inline-flex h-full w-full items-center justify-center bg-zinc-900/40"
>
{loading ? (
<LoaderIcon className="h-8 w-8 animate-spin text-zinc-100" />
<LoaderIcon className="h-8 w-8 animate-spin text-white" />
) : (
<PlusIcon className="h-8 w-8 text-zinc-100" />
<PlusIcon className="h-8 w-8 text-white" />
)}
</button>
);

6
src/shared/button.tsx
View File

@@ -20,15 +20,15 @@ export function Button({
break;
case 'publish':
preClass =
'w-min h-9 px-4 bg-fuchsia-500 rounded-md text-sm font-medium text-zinc-100 hover:bg-fuchsia-600';
'w-min h-9 px-4 bg-fuchsia-500 rounded-md text-sm font-medium text-white hover:bg-fuchsia-600';
break;
case 'large':
preClass =
'h-11 w-full bg-fuchsia-500 rounded-md font-medium text-zinc-100 hover:bg-fuchsia-600';
'h-11 w-full bg-fuchsia-500 rounded-md font-medium text-white hover:bg-fuchsia-600';
break;
case 'large-alt':
preClass =
'h-11 w-full bg-zinc-800 rounded-md font-medium text-zinc-300 border-t border-zinc-700/50 hover:bg-zinc-900';
'h-11 w-full bg-zinc-800 rounded-md font-medium text-white border-t border-zinc-700/50 hover:bg-zinc-900';
break;
default:
break;

4
src/shared/composer/mention/item.tsx
View File

@@ -17,12 +17,12 @@ export function MentionItem({ profile }: { profile: Profile }) {
/>
</div>
<div className="flex flex-col gap-px">
<h5 className="max-w-[15rem] text-sm font-medium leading-none text-zinc-100">
<h5 className="max-w-[15rem] text-sm font-medium leading-none text-white">
{profile.ident || (
<div className="h-3 w-20 animate-pulse rounded-sm bg-zinc-700" />
)}
</h5>
<span className="text-sm leading-none text-zinc-400">
<span className="text-sm leading-none text-white/50">
{displayNpub(profile.pubkey, 16)}
</span>
</div>

30
src/shared/editProfileModal.tsx
View File

@@ -178,7 +178,7 @@ export function EditProfileModal() {
<div className="flex items-center justify-between">
<Dialog.Title
as="h3"
className="text-lg font-semibold leading-none text-zinc-100"
className="text-lg font-semibold leading-none text-white"
>
Edit profile
</Dialog.Title>
@@ -197,13 +197,13 @@ export function EditProfileModal() {
type={'hidden'}
{...register('picture')}
value={picture}
className="shadow-input relative h-10 w-full rounded-lg border border-black/5 px-3 py-2 shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-zinc-100 dark:shadow-black/10 dark:placeholder:text-zinc-500"
className="shadow-input relative h-10 w-full rounded-lg border border-black/5 px-3 py-2 shadow-black/5 !outline-none placeholder:text-white/50 dark:bg-zinc-800 dark:text-white dark:shadow-black/10 dark:placeholder:text-zinc-500"
/>
<input
type={'hidden'}
{...register('banner')}
value={banner}
className="shadow-input relative h-10 w-full rounded-lg border border-black/5 px-3 py-2 shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-zinc-100 dark:shadow-black/10 dark:placeholder:text-zinc-500"
className="shadow-input relative h-10 w-full rounded-lg border border-black/5 px-3 py-2 shadow-black/5 !outline-none placeholder:text-white/50 dark:bg-zinc-800 dark:text-white dark:shadow-black/10 dark:placeholder:text-zinc-500"
/>
<div className="relative">
<div className="relative h-44 w-full bg-zinc-800">
@@ -235,7 +235,7 @@ export function EditProfileModal() {
<div className="flex flex-col gap-1">
<label
htmlFor="name"
className="text-sm font-semibold uppercase tracking-wider text-zinc-400"
className="text-sm font-semibold uppercase tracking-wider text-white/50"
>
Name
</label>
@@ -246,13 +246,13 @@ export function EditProfileModal() {
minLength: 4,
})}
spellCheck={false}
className="relative h-10 w-full rounded-lg bg-zinc-800 px-3 py-2 text-zinc-100 !outline-none placeholder:text-zinc-500"
className="relative h-10 w-full rounded-lg bg-zinc-800 px-3 py-2 text-white !outline-none placeholder:text-zinc-500"
/>
</div>
<div className="flex flex-col gap-1">
<label
htmlFor="nip05"
className="text-sm font-semibold uppercase tracking-wider text-zinc-400"
className="text-sm font-semibold uppercase tracking-wider text-white/50"
>
Lume ID / NIP-05
</label>
@@ -263,7 +263,7 @@ export function EditProfileModal() {
minLength: 4,
})}
spellCheck={false}
className="relative h-10 w-full rounded-lg bg-zinc-800 px-3 py-2 text-zinc-100 !outline-none placeholder:text-zinc-500"
className="relative h-10 w-full rounded-lg bg-zinc-800 px-3 py-2 text-white !outline-none placeholder:text-zinc-500"
/>
<div className="absolute right-2 top-1/2 -translate-y-1/2 transform">
{nip05.verified ? (
@@ -288,20 +288,20 @@ export function EditProfileModal() {
<div className="flex flex-col gap-1">
<label
htmlFor="about"
className="text-sm font-semibold uppercase tracking-wider text-zinc-400"
className="text-sm font-semibold uppercase tracking-wider text-white/50"
>
Bio
</label>
<textarea
{...register('about')}
spellCheck={false}
className="relative h-20 w-full resize-none rounded-lg bg-zinc-800 px-3 py-2 text-zinc-100 !outline-none placeholder:text-zinc-500"
className="relative h-20 w-full resize-none rounded-lg bg-zinc-800 px-3 py-2 text-white !outline-none placeholder:text-zinc-500"
/>
</div>
<div className="flex flex-col gap-1">
<label
htmlFor="website"
className="text-sm font-semibold uppercase tracking-wider text-zinc-400"
className="text-sm font-semibold uppercase tracking-wider text-white/50"
>
Website
</label>
@@ -309,13 +309,13 @@ export function EditProfileModal() {
type={'text'}
{...register('website', { required: false })}
spellCheck={false}
className="relative h-10 w-full rounded-lg bg-zinc-800 px-3 py-2 text-zinc-100 !outline-none placeholder:text-zinc-500"
className="relative h-10 w-full rounded-lg bg-zinc-800 px-3 py-2 text-white !outline-none placeholder:text-zinc-500"
/>
</div>
<div className="flex flex-col gap-1">
<label
htmlFor="website"
className="text-sm font-semibold uppercase tracking-wider text-zinc-400"
className="text-sm font-semibold uppercase tracking-wider text-white/50"
>
Lightning address
</label>
@@ -323,17 +323,17 @@ export function EditProfileModal() {
type={'text'}
{...register('lud16', { required: false })}
spellCheck={false}
className="relative h-10 w-full rounded-lg bg-zinc-800 px-3 py-2 text-zinc-100 !outline-none placeholder:text-zinc-500"
className="relative h-10 w-full rounded-lg bg-zinc-800 px-3 py-2 text-white !outline-none placeholder:text-zinc-500"
/>
</div>
<div>
<button
type="submit"
disabled={!isValid}
className="inline-flex h-11 w-full transform items-center justify-center gap-1 rounded-md bg-fuchsia-500 font-medium text-zinc-100 hover:bg-fuchsia-600 focus:outline-none active:translate-y-1 disabled:pointer-events-none disabled:opacity-50"
className="inline-flex h-11 w-full transform items-center justify-center gap-1 rounded-md bg-fuchsia-500 font-medium text-white hover:bg-fuchsia-600 focus:outline-none active:translate-y-1 disabled:pointer-events-none disabled:opacity-50"
>
{loading ? (
<LoaderIcon className="h-4 w-4 animate-spin text-black dark:text-zinc-100" />
<LoaderIcon className="h-4 w-4 animate-spin text-black dark:text-white" />
) : (
'Update'
)}

6
src/shared/mediaUploader.tsx
View File

@@ -29,19 +29,19 @@ export function MediaUploader({ setState }: { setState: any }) {
className="group inline-flex h-6 w-6 items-center justify-center rounded bg-zinc-700 hover:bg-zinc-600"
>
{loading ? (
<LoaderIcon className="h-4 w-4 animate-spin text-black dark:text-zinc-100" />
<LoaderIcon className="h-4 w-4 animate-spin text-black dark:text-white" />
) : (
<MediaIcon
width={14}
height={14}
className="text-zinc-400 group-hover:text-zinc-200"
className="text-white/50 group-hover:text-zinc-200"
/>
)}
</button>
</Tooltip.Trigger>
<Tooltip.Portal>
<Tooltip.Content
className="-left-10 select-none rounded-md bg-zinc-800/80 px-3.5 py-1.5 text-sm leading-none text-zinc-100 backdrop-blur-lg will-change-[transform,opacity] data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade"
className="-left-10 select-none rounded-md bg-zinc-800/80 px-3.5 py-1.5 text-sm leading-none text-white backdrop-blur-lg will-change-[transform,opacity] data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade"
sideOffset={5}
>
Upload media

8
src/shared/notes/actions/zap.tsx
View File

@@ -43,10 +43,10 @@ export function NoteZap({ id }: { id: string }) {
<Dialog.Content className="relative flex h-min w-full max-w-lg flex-col gap-2 rounded-lg border-t border-zinc-800/50 bg-zinc-900">
<div className="relative h-min w-full shrink-0 border-b border-zinc-800 px-5 py-3">
<div className="flex flex-col items-center gap-1.5">
<Dialog.Title className="font-medium leading-none text-zinc-100">
<Dialog.Title className="font-medium leading-none text-white">
Zap (Beta)
</Dialog.Title>
<Dialog.Description className="text-sm leading-none text-zinc-400">
<Dialog.Description className="text-sm leading-none text-white/50">
Send tip with Bitcoin via Lightning
</Dialog.Description>
</div>
@@ -178,10 +178,10 @@ export function NoteZap({ id }: { id: string }) {
<QRCodeSVG value={invoice} size={256} />
</div>
<div className="flex flex-col items-center gap-1">
<h3 className="text-lg font-medium leading-none text-zinc-100">
<h3 className="text-lg font-medium leading-none text-white">
Scan to pay
</h3>
<span className="text-center text-sm text-zinc-400">
<span className="text-center text-sm text-white/50">
You must use Bitcoin wallet which support Lightning
<br />
such as: Blue Wallet, Bitkit, Phoenix,...

2
src/shared/notes/kinds/repost.tsx
View File

@@ -26,7 +26,7 @@ export function Repost({ event }: { event: LumeEvent }) {
if (status === 'error') {
return (
<div className="flex items-center justify-center overflow-hidden rounded-xl border-t border-zinc-800/50 bg-zinc-900 px-3 py-3">
<p className="text-zinc-400">Failed to fetch</p>
<p className="text-white/50">Failed to fetch</p>
</div>
);
}

2
src/shared/notes/kinds/sub.tsx
View File

@@ -17,7 +17,7 @@ export function SubNote({ id, root }: { id: string; root?: string }) {
if (status === 'error') {
return (
<div className="mb-5 flex overflow-hidden rounded-xl bg-zinc-800 px-3 py-3">
<p className="text-zinc-400">Failed to fetch</p>
<p className="text-white/50">Failed to fetch</p>
</div>
);
}

2
src/shared/notes/kinds/unsupport.tsx
View File

@@ -21,7 +21,7 @@ export function NoteKindUnsupport({ event }: { event: LumeEvent }) {
Lume isn&apos;t fully support this kind
</p>
</div>
<div className="select-text whitespace-pre-line break-all text-zinc-100">
<div className="select-text whitespace-pre-line break-all text-white">
<p>{event.content.toString()}</p>
</div>
</div>

2
src/shared/notes/metadata.tsx
View File

@@ -69,7 +69,7 @@ export function NoteMetadata({ id }: { id: string }) {
<div className="mb-3 flex items-center gap-3">
<div className="mt-2h-6 w-11 shrink-0"></div>
<div className="mt-2 inline-flex h-6 items-center">
<LoaderIcon className="h-4 w-4 animate-spin text-zinc-100" />
<LoaderIcon className="h-4 w-4 animate-spin text-white" />
</div>
</div>
);

2
src/shared/notes/replies/list.tsx
View File

@@ -62,7 +62,7 @@ export function RepliesList({ id }: { id: string }) {
<div className="flex w-full items-center justify-center rounded-xl bg-white/10">
<div className="flex flex-col items-center justify-center gap-2 py-6">
<h3 className="text-3xl">👋</h3>
<p className="leading-none text-zinc-400">Share your thought on it...</p>
<p className="leading-none text-white/50">Share your thought on it...</p>
</div>
</div>
</div>

2
src/shared/notes/stats.tsx
View File

@@ -54,7 +54,7 @@ export function NoteStats({ id }: { id: string }) {
if (status === 'loading') {
return (
<div className="flex h-11 items-center">
<LoaderIcon className="h-4 w-4 animate-spin text-zinc-100" />
<LoaderIcon className="h-4 w-4 animate-spin text-white" />
</div>
);
}

4
src/shared/notes/users/repost.tsx
View File

@@ -21,13 +21,13 @@ export function RepostUser({ pubkey }: { pubkey: string }) {
className="relative z-20 inline-block h-6 w-6 rounded bg-white ring-1 ring-zinc-800"
/>
<div className="inline-flex items-baseline gap-1">
<h5 className="max-w-[18rem] truncate text-zinc-400">
<h5 className="max-w-[18rem] truncate text-white/50">
{user?.nip05?.toLowerCase() ||
user?.name ||
user?.display_name ||
shortenKey(pubkey)}
</h5>
<span className="text-zinc-400">reposted</span>
<span className="text-white/50">reposted</span>
</div>
</div>
);

6
src/shared/notification/modal.tsx
View File

@@ -63,7 +63,7 @@ export function NotificationModal({ pubkey }: { pubkey: string }) {
<div className="h-min w-full shrink-0 border-b border-white/10 bg-white/5 px-5 py-5">
<div className="flex flex-col gap-1">
<div className="flex items-center justify-between">
<Dialog.Title className="text-lg font-semibold leading-none text-zinc-100">
<Dialog.Title className="text-lg font-semibold leading-none text-white">
Notification
</Dialog.Title>
<Dialog.Close asChild>
@@ -75,7 +75,7 @@ export function NotificationModal({ pubkey }: { pubkey: string }) {
</button>
</Dialog.Close>
</div>
<Dialog.Description className="text-sm leading-tight text-zinc-400">
<Dialog.Description className="text-sm leading-tight text-white/50">
All things happen when you rest in 24 hours ago
</Dialog.Description>
</div>
@@ -83,7 +83,7 @@ export function NotificationModal({ pubkey }: { pubkey: string }) {
<div className="scrollbar-hide flex h-[500px] flex-col overflow-y-auto overflow-x-hidden pb-5">
{status === 'loading' ? (
<div className="inline-flex items-center justify-center px-4 py-3">
<LoaderIcon className="h-5 w-5 animate-spin text-black dark:text-zinc-100" />
<LoaderIcon className="h-5 w-5 animate-spin text-black dark:text-white" />
</div>
) : data.length < 1 ? (
<div className="flex h-full w-full flex-col items-center justify-center">

2
src/shared/notification/types/mention.tsx
View File

@@ -17,7 +17,7 @@ export function NotiMention({ event }: { event: NDKEvent }) {
<div className="flex items-start justify-between">
<div className="flex items-start gap-1">
<NotiUser pubkey={event.pubkey} />
<p className="leading-none text-zinc-400">reply your post</p>
<p className="leading-none text-white/50">reply your post</p>
</div>
<div>
<span className="leading-none text-zinc-500">{createdAt}</span>

2
src/shared/notification/types/reaction.tsx
View File

@@ -14,7 +14,7 @@ export function NotiReaction({ event }: { event: NDKEvent }) {
<div className="flex items-start justify-between">
<div className="flex items-start gap-1">
<NotiUser pubkey={event.pubkey} />
<p className="leading-none text-zinc-400">reacted {event.content}</p>
<p className="leading-none text-white/50">reacted {event.content}</p>
</div>
<div>
<span className="leading-none text-zinc-500">{createdAt}</span>

2
src/shared/notification/types/repost.tsx
View File

@@ -14,7 +14,7 @@ export function NotiRepost({ event }: { event: NDKEvent }) {
<div className="flex items-start justify-between">
<div className="flex items-start gap-1">
<NotiUser pubkey={event.pubkey} />
<p className="leading-none text-zinc-400">repost your post</p>
<p className="leading-none text-white/50">repost your post</p>
</div>
<div>
<span className="leading-none text-zinc-500">{createdAt}</span>

2
src/shared/protected.tsx
View File

@@ -14,7 +14,7 @@ export function Protected({ children }: { children: ReactNode }) {
if (status === 'loading') {
return (
<div className="flex h-full w-full items-center justify-center bg-black/90">
<LoaderIcon className="h-6 w-6 animate-spin text-zinc-100" />
<LoaderIcon className="h-6 w-6 animate-spin text-white" />
</div>
);
}

6
src/shared/user.tsx
View File

@@ -75,10 +75,7 @@ export function User({
</button>
</Popover.Trigger>
<div
className={twMerge(
'flex flex-1 items-baseline justify-between',
isRepost ? 'mt-4' : ''
)}
className={twMerge('flex flex-1 items-baseline gap-2', isRepost ? 'mt-4' : '')}
>
<h5
className={twMerge(
@@ -91,6 +88,7 @@ export function User({
user?.display_name ||
shortenKey(pubkey)}
</h5>
<span className="leading-none text-white/50">·</span>
<span className="leading-none text-white/50">{createdAt}</span>
</div>
</div>