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

update ui

Browse Source
This commit is contained in:
Ren Amamiya
2023-06-17 15:10:49 +07:00
parent c51eb0cf1d
commit 3cc24dc8c1
41 changed files with 102 additions and 194 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/auth/components/user.tsx
View File

@@ -17,7 +17,7 @@ export function User({ pubkey }: { pubkey: string }) {
/> />
</div> </div>
<div className="flex w-full flex-1 flex-col items-start text-start"> <div className="flex w-full flex-1 flex-col items-start text-start">
<span className="truncate font-medium leading-tight text-white"> <span className="truncate font-medium leading-tight text-zinc-100">
{user?.displayName || user?.name} {user?.displayName || user?.name}
</span> </span>
<span className="text-base leading-tight text-zinc-400"> <span className="text-base leading-tight text-zinc-400">

2
src/app/auth/layout.tsx
View File

@@ -18,7 +18,7 @@ export function LayoutOnboarding({ children }: { children: React.ReactNode }) {
}; };
return ( return (
<div className="h-screen w-screen bg-zinc-50 text-zinc-900 dark:bg-zinc-950 dark:text-white"> <div className="h-screen w-screen bg-zinc-50 text-zinc-900 dark:bg-zinc-950 dark:text-zinc-100">
<div className="flex h-screen w-full flex-col"> <div className="flex h-screen w-full flex-col">
<div <div
data-tauri-drag-region data-tauri-drag-region

12
src/app/auth/pages/create/index.page.tsx
View File

@@ -32,7 +32,7 @@ export function Page() {
<div className="flex h-full w-full items-center justify-center"> <div className="flex h-full w-full items-center justify-center">
<div className="mx-auto w-full max-w-md"> <div className="mx-auto w-full max-w-md">
<div className="mb-8 text-center"> <div className="mb-8 text-center">
<h1 className="text-xl font-semibold text-white"> <h1 className="text-xl font-semibold text-zinc-100">
Lume is auto-generated key for you Lume is auto-generated key for you
</h1> </h1>
</div> </div>
@@ -45,7 +45,7 @@ export function Page() {
<input <input
readOnly readOnly
value={npub} value={npub}
className="relative w-full rounded-lg border border-black/5 px-3.5 py-2.5 shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-white dark:shadow-black/10 dark:placeholder:text-zinc-600" className="relative w-full rounded-lg border border-black/5 px-3.5 py-2.5 shadow-input 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-600"
/> />
</div> </div>
</div> </div>
@@ -58,7 +58,7 @@ export function Page() {
readOnly readOnly
type={type} type={type}
value={nsec} value={nsec}
className="relative w-full rounded-lg border border-black/5 py-2.5 pl-3.5 pr-11 shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-white dark:shadow-black/10 dark:placeholder:text-zinc-600" className="relative w-full rounded-lg border border-black/5 py-2.5 pl-3.5 pr-11 shadow-input 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-600"
/> />
<button <button
type="button" type="button"
@@ -69,13 +69,13 @@ export function Page() {
<EyeOffIcon <EyeOffIcon
width={20} width={20}
height={20} height={20}
className="text-zinc-500 group-hover:text-white" className="text-zinc-500 group-hover:text-zinc-100"
/> />
) : ( ) : (
<EyeOnIcon <EyeOnIcon
width={20} width={20}
height={20} height={20}
className="text-zinc-500 group-hover:text-white" className="text-zinc-500 group-hover:text-zinc-100"
/> />
)} )}
</button> </button>
@@ -84,7 +84,7 @@ export function Page() {
<button <button
type="button" type="button"
onClick={() => submit()} onClick={() => submit()}
className="w-full transform rounded-lg bg-fuchsia-500 px-3.5 py-2.5 font-medium text-white shadow-button hover:bg-fuchsia-600 active:translate-y-1 disabled:cursor-not-allowed disabled:opacity-70" className="w-full transform rounded-lg bg-fuchsia-500 px-3.5 py-2.5 font-medium text-zinc-100 shadow-button hover:bg-fuchsia-600 active:translate-y-1 disabled:cursor-not-allowed disabled:opacity-70"
> >
<span>Continue →</span> <span>Continue →</span>
</button> </button>

12
src/app/auth/pages/create/step-2/index.page.tsx
View File

@@ -59,7 +59,7 @@ export function Page() {
<div className="flex h-full w-full items-center justify-center"> <div className="flex h-full w-full items-center justify-center">
<div className="mx-auto w-full max-w-md"> <div className="mx-auto w-full max-w-md">
<div className="mb-8 text-center"> <div className="mb-8 text-center">
<h1 className="text-xl font-semibold text-white"> <h1 className="text-xl font-semibold text-zinc-100">
Create your profile Create your profile
</h1> </h1>
</div> </div>
@@ -72,7 +72,7 @@ export function Page() {
type={"hidden"} type={"hidden"}
{...register("picture")} {...register("picture")}
value={image} value={image}
className="relative h-10 w-full rounded-lg border border-black/5 px-3 py-2 shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-white dark:shadow-black/10 dark:placeholder:text-zinc-500" className="relative h-10 w-full rounded-lg border border-black/5 px-3 py-2 shadow-input 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"
/> />
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-1">
<label className="text-base font-semibold uppercase tracking-wider text-zinc-400"> <label className="text-base font-semibold uppercase tracking-wider text-zinc-400">
@@ -101,7 +101,7 @@ export function Page() {
minLength: 4, minLength: 4,
})} })}
spellCheck={false} spellCheck={false}
className="relative h-10 w-full rounded-lg border border-black/5 px-3 py-2 shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-white dark:shadow-black/10 dark:placeholder:text-zinc-500" className="relative h-10 w-full rounded-lg border border-black/5 px-3 py-2 shadow-input 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"
/> />
</div> </div>
</div> </div>
@@ -113,7 +113,7 @@ export function Page() {
<textarea <textarea
{...register("bio")} {...register("bio")}
spellCheck={false} spellCheck={false}
className="relative h-20 w-full resize-none rounded-lg border border-black/5 px-3 py-2 shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-white dark:shadow-black/10 dark:placeholder:text-zinc-500" className="relative h-20 w-full resize-none rounded-lg border border-black/5 px-3 py-2 shadow-input 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"
/> />
</div> </div>
</div> </div>
@@ -121,11 +121,11 @@ export function Page() {
<button <button
type="submit" type="submit"
disabled={!isDirty || !isValid} disabled={!isDirty || !isValid}
className="inline-flex h-10 w-full transform items-center justify-center rounded-lg bg-fuchsia-500 px-3.5 font-medium text-white shadow-button hover:bg-fuchsia-600 active:translate-y-1 disabled:cursor-not-allowed disabled:opacity-70" className="inline-flex h-10 w-full transform items-center justify-center rounded-lg bg-fuchsia-500 px-3.5 font-medium text-zinc-100 shadow-button hover:bg-fuchsia-600 active:translate-y-1 disabled:cursor-not-allowed disabled:opacity-70"
> >
{loading ? ( {loading ? (
<svg <svg
className="h-4 w-4 animate-spin text-black dark:text-white" className="h-4 w-4 animate-spin text-black dark:text-zinc-100"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
fill="none" fill="none"
viewBox="0 0 24 24" viewBox="0 0 24 24"

6
src/app/auth/pages/create/step-3/index.page.tsx
View File

@@ -162,7 +162,7 @@ export function Page() {
<div className="flex h-full w-full items-center justify-center"> <div className="flex h-full w-full items-center justify-center">
<div className="mx-auto w-full max-w-md"> <div className="mx-auto w-full max-w-md">
<div className="mb-8 text-center"> <div className="mb-8 text-center">
<h1 className="text-xl font-semibold text-white"> <h1 className="text-xl font-semibold text-zinc-100">
Personalized your newsfeed Personalized your newsfeed
</h1> </h1>
</div> </div>
@@ -201,11 +201,11 @@ export function Page() {
<button <button
type="button" type="button"
onClick={() => submit()} onClick={() => submit()}
className="inline-flex h-10 w-full transform items-center justify-center rounded-lg bg-fuchsia-500 px-3.5 font-medium text-white shadow-button hover:bg-fuchsia-600 active:translate-y-1 disabled:cursor-not-allowed disabled:opacity-70" className="inline-flex h-10 w-full transform items-center justify-center rounded-lg bg-fuchsia-500 px-3.5 font-medium text-zinc-100 shadow-button hover:bg-fuchsia-600 active:translate-y-1 disabled:cursor-not-allowed disabled:opacity-70"
> >
{loading === true ? ( {loading === true ? (
<svg <svg
className="h-5 w-5 animate-spin text-white" className="h-5 w-5 animate-spin text-zinc-100"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
fill="none" fill="none"
viewBox="0 0 24 24" viewBox="0 0 24 24"

10
src/app/auth/pages/import/index.page.tsx
View File

@@ -57,7 +57,9 @@ export function Page() {
<div className="flex h-full w-full items-center justify-center"> <div className="flex h-full w-full items-center justify-center">
<div className="mx-auto w-full max-w-md"> <div className="mx-auto w-full max-w-md">
<div className="mb-8 text-center"> <div className="mb-8 text-center">
<h1 className="text-xl font-semibold text-white">Import your key</h1> <h1 className="text-xl font-semibold text-zinc-100">
Import your key
</h1>
</div> </div>
<div className="flex flex-col gap-4"> <div className="flex flex-col gap-4">
<form <form
@@ -70,7 +72,7 @@ export function Page() {
{...register("key", { required: true, minLength: 32 })} {...register("key", { required: true, minLength: 32 })}
type={"password"} type={"password"}
placeholder="Paste private key here..." placeholder="Paste private key here..."
className="relative w-full rounded-lg border border-black/5 px-3.5 py-2.5 text-center shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-white dark:shadow-black/10 dark:placeholder:text-zinc-500" className="relative w-full rounded-lg border border-black/5 px-3.5 py-2.5 text-center shadow-input 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"
/> />
</div> </div>
<span className="text-base text-red-400"> <span className="text-base text-red-400">
@@ -80,7 +82,7 @@ export function Page() {
<div className="flex h-9 items-center justify-center"> <div className="flex h-9 items-center justify-center">
{isSubmitting ? ( {isSubmitting ? (
<svg <svg
className="h-5 w-5 animate-spin text-white" className="h-5 w-5 animate-spin text-zinc-100"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
fill="none" fill="none"
viewBox="0 0 24 24" viewBox="0 0 24 24"
@@ -104,7 +106,7 @@ export function Page() {
<button <button
type="submit" type="submit"
disabled={!isDirty || !isValid} disabled={!isDirty || !isValid}
className="w-full transform rounded-lg bg-fuchsia-500 px-3.5 py-2.5 font-medium text-white shadow-button hover:bg-fuchsia-600 active:translate-y-1 disabled:cursor-not-allowed disabled:opacity-70" className="w-full transform rounded-lg bg-fuchsia-500 px-3.5 py-2.5 font-medium text-zinc-100 shadow-button hover:bg-fuchsia-600 active:translate-y-1 disabled:cursor-not-allowed disabled:opacity-70"
> >
<span className="drop-shadow-lg">Continue →</span> <span className="drop-shadow-lg">Continue →</span>
</button> </button>

4
src/app/auth/pages/import/step-2/index.page.tsx
View File

@@ -63,11 +63,11 @@ export function Page() {
<button <button
type="button" type="button"
onClick={() => submit()} onClick={() => submit()}
className="inline-flex h-10 w-full transform items-center justify-center rounded-lg bg-fuchsia-500 px-3.5 font-medium text-white shadow-button hover:bg-fuchsia-600 active:translate-y-1 disabled:cursor-not-allowed disabled:opacity-70" className="inline-flex h-10 w-full transform items-center justify-center rounded-lg bg-fuchsia-500 px-3.5 font-medium text-zinc-100 shadow-button hover:bg-fuchsia-600 active:translate-y-1 disabled:cursor-not-allowed disabled:opacity-70"
> >
{loading ? ( {loading ? (
<svg <svg
className="h-5 w-5 animate-spin text-black dark:text-white" className="h-5 w-5 animate-spin text-black dark:text-zinc-100"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
fill="none" fill="none"
viewBox="0 0 24 24" viewBox="0 0 24 24"

2
src/app/channel/components/blacklist.tsx
View File

@@ -18,7 +18,7 @@ export function ChannelBlackList({ blacklist }: { blacklist: any }) {
<MuteIcon <MuteIcon
width={16} width={16}
height={16} height={16}
className="text-zinc-400 group-hover:text-white" className="text-zinc-400 group-hover:text-zinc-100"
/> />
</Popover.Button> </Popover.Button>
<Transition <Transition

14
src/app/channel/components/createModal.tsx
View File

@@ -118,7 +118,7 @@ export function ChannelCreateModal() {
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<Dialog.Title <Dialog.Title
as="h3" as="h3"
className="text-lg font-semibold leading-none text-white" className="text-lg font-semibold leading-none text-zinc-100"
> >
Create channel Create channel
</Dialog.Title> </Dialog.Title>
@@ -149,7 +149,7 @@ export function ChannelCreateModal() {
type={"hidden"} type={"hidden"}
{...register("picture")} {...register("picture")}
value={image} value={image}
className="relative h-10 w-full rounded-lg border border-black/5 px-3 py-2 shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-white dark:shadow-black/10 dark:placeholder:text-zinc-500" className="relative h-10 w-full rounded-lg border border-black/5 px-3 py-2 shadow-input 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"
/> />
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-1">
<label className="text-sm font-medium uppercase tracking-wider text-zinc-400"> <label className="text-sm font-medium uppercase tracking-wider text-zinc-400">
@@ -178,7 +178,7 @@ export function ChannelCreateModal() {
minLength: 4, minLength: 4,
})} })}
spellCheck={false} spellCheck={false}
className="relative h-10 w-full rounded-lg border border-black/5 px-3 py-2 shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-white dark:shadow-black/10 dark:placeholder:text-zinc-500" className="relative h-10 w-full rounded-lg border border-black/5 px-3 py-2 shadow-input 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"
/> />
</div> </div>
</div> </div>
@@ -190,13 +190,13 @@ export function ChannelCreateModal() {
<textarea <textarea
{...register("about")} {...register("about")}
spellCheck={false} spellCheck={false}
className="relative h-20 w-full resize-none rounded-lg border border-black/5 px-3 py-2 shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-white dark:shadow-black/10 dark:placeholder:text-zinc-500" className="relative h-20 w-full resize-none rounded-lg border border-black/5 px-3 py-2 shadow-input 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"
/> />
</div> </div>
</div> </div>
<div className="flex h-20 items-center justify-between gap-1 rounded-lg bg-zinc-800 px-4 py-2"> <div className="flex h-20 items-center justify-between gap-1 rounded-lg bg-zinc-800 px-4 py-2">
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-1">
<span className="font-semibold leading-none text-white"> <span className="font-semibold leading-none text-zinc-100">
Encrypted Encrypted
</span> </span>
<p className="w-4/5 text-sm leading-none text-zinc-400"> <p className="w-4/5 text-sm leading-none text-zinc-400">
@@ -220,11 +220,11 @@ export function ChannelCreateModal() {
<button <button
type="submit" type="submit"
disabled={!isDirty || !isValid} disabled={!isDirty || !isValid}
className="inline-flex h-11 w-full transform items-center justify-center rounded-lg bg-fuchsia-500 font-medium text-white shadow-button active:translate-y-1 disabled:cursor-not-allowed disabled:opacity-30" className="inline-flex h-11 w-full transform items-center justify-center rounded-lg bg-fuchsia-500 font-medium text-zinc-100 shadow-button active:translate-y-1 disabled:cursor-not-allowed disabled:opacity-30"
> >
{loading ? ( {loading ? (
<svg <svg
className="h-4 w-4 animate-spin text-black dark:text-white" className="h-4 w-4 animate-spin text-black dark:text-zinc-100"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
fill="none" fill="none"
viewBox="0 0 24 24" viewBox="0 0 24 24"

2
src/app/channel/components/item.tsx
View File

@@ -14,7 +14,7 @@ export function ChannelsListItem({ data }: { data: any }) {
href={`/app/channel?id=${data.event_id}`} href={`/app/channel?id=${data.event_id}`}
className={twMerge( className={twMerge(
"inline-flex h-9 items-center gap-2.5 rounded-md px-2.5", "inline-flex h-9 items-center gap-2.5 rounded-md px-2.5",
pageID === data.event_id ? "bg-zinc-900 text-white" : "", pageID === data.event_id ? "bg-zinc-900 text-zinc-100" : "",
)} )}
> >
<div <div

2
src/app/channel/components/messages/form.tsx
View File

@@ -76,7 +76,7 @@ export function ChannelMessageForm({ channelID }: { channelID: string }) {
onClick={() => stopReply()} onClick={() => stopReply()}
className="inline-flex h-5 w-5 items-center justify-center rounded hover:bg-zinc-800" className="inline-flex h-5 w-5 items-center justify-center rounded hover:bg-zinc-800"
> >
<CancelIcon width={12} height={12} className="text-white" /> <CancelIcon width={12} height={12} className="text-zinc-100" />
</button> </button>
</div> </div>
</div> </div>

4
src/app/channel/components/messages/hideButton.tsx
View File

@@ -111,14 +111,14 @@ export function MessageHideButton({ id }: { id: string }) {
<button <button
type="button" type="button"
onClick={closeModal} onClick={closeModal}
className="inline-flex h-9 items-center justify-center rounded-md px-2 text-base font-medium text-zinc-400 hover:bg-zinc-800 hover:text-white" className="inline-flex h-9 items-center justify-center rounded-md px-2 text-base font-medium text-zinc-400 hover:bg-zinc-800 hover:text-zinc-100"
> >
Cancel Cancel
</button> </button>
<button <button
type="button" type="button"
onClick={() => hideMessage()} onClick={() => hideMessage()}
className="inline-flex h-9 items-center justify-center rounded-md bg-red-500 px-2 text-base font-medium text-white hover:bg-red-600" className="inline-flex h-9 items-center justify-center rounded-md bg-red-500 px-2 text-base font-medium text-zinc-100 hover:bg-red-600"
> >
Confirm Confirm
</button> </button>

4
src/app/channel/components/messages/item.tsx
View File

@@ -1,11 +1,11 @@
import { MessageHideButton } from "@app/channel/components/messages/hideButton"; import { MessageHideButton } from "@app/channel/components/messages/hideButton";
import { MessageMuteButton } from "@app/channel/components/messages/muteButton"; import { MessageMuteButton } from "@app/channel/components/messages/muteButton";
import { MessageReplyButton } from "@app/channel/components/messages/replyButton"; import { MessageReplyButton } from "@app/channel/components/messages/replyButton";
import { ChannelMessageUser } from "@app/channel/components/messages/user";
import { MentionNote } from "@shared/notes/mentions/note"; import { MentionNote } from "@shared/notes/mentions/note";
import { ImagePreview } from "@shared/notes/preview/image"; import { ImagePreview } from "@shared/notes/preview/image";
import { LinkPreview } from "@shared/notes/preview/link"; import { LinkPreview } from "@shared/notes/preview/link";
import { VideoPreview } from "@shared/notes/preview/video"; import { VideoPreview } from "@shared/notes/preview/video";
import { User } from "@shared/user";
import { parser } from "@utils/parser"; import { parser } from "@utils/parser";
import { LumeEvent } from "@utils/types"; import { LumeEvent } from "@utils/types";
@@ -15,7 +15,7 @@ export function ChannelMessageItem({ data }: { data: LumeEvent }) {
return ( return (
<div className="group relative flex h-min min-h-min w-full select-text flex-col px-5 py-3 hover:bg-black/20"> <div className="group relative flex h-min min-h-min w-full select-text flex-col px-5 py-3 hover:bg-black/20">
<div className="flex flex-col"> <div className="flex flex-col">
<ChannelMessageUser pubkey={data.pubkey} time={data.created_at} /> <User pubkey={data.pubkey} time={data.created_at} />
<div className="-mt-[20px] pl-[49px]"> <div className="-mt-[20px] pl-[49px]">
<p className="select-text whitespace-pre-line break-words text-base text-zinc-100"> <p className="select-text whitespace-pre-line break-words text-base text-zinc-100">
{content.parsed} {content.parsed}

4
src/app/channel/components/messages/muteButton.tsx
View File

@@ -111,14 +111,14 @@ export function MessageMuteButton({ pubkey }: { pubkey: string }) {
<button <button
type="button" type="button"
onClick={closeModal} onClick={closeModal}
className="inline-flex h-9 items-center justify-center rounded-md px-2 text-base font-medium text-zinc-400 hover:bg-zinc-800 hover:text-white" className="inline-flex h-9 items-center justify-center rounded-md px-2 text-base font-medium text-zinc-400 hover:bg-zinc-800 hover:text-zinc-100"
> >
Cancel Cancel
</button> </button>
<button <button
type="button" type="button"
onClick={() => muteUser()} onClick={() => muteUser()}
className="inline-flex h-9 items-center justify-center rounded-md bg-red-500 px-2 text-base font-medium text-white hover:bg-red-600" className="inline-flex h-9 items-center justify-center rounded-md bg-red-500 px-2 text-base font-medium text-zinc-100 hover:bg-red-600"
> >
Confirm Confirm
</button> </button>

54
src/app/channel/components/messages/user.tsx
View File

@@ -1,54 +0,0 @@
import { Image } from "@shared/image";
import { DEFAULT_AVATAR } from "@stores/constants";
import { useProfile } from "@utils/hooks/useProfile";
import { shortenKey } from "@utils/shortenKey";
import dayjs from "dayjs";
import relativeTime from "dayjs/plugin/relativeTime";
dayjs.extend(relativeTime);
export function ChannelMessageUser({
pubkey,
time,
}: {
pubkey: string;
time: number;
}) {
const { user, isError, isLoading } = useProfile(pubkey);
return (
<div className="flex items-start gap-3">
{isError || isLoading ? (
<>
<div className="relative h-11 w-11 shrink animate-pulse rounded-md bg-zinc-800" />
<div className="flex w-full flex-1 items-start justify-between">
<div className="flex items-baseline gap-2 text-base">
<div className="h-4 w-20 animate-pulse rounded bg-zinc-800" />
</div>
</div>
</>
) : (
<>
<div className="relative h-11 w-11 shrink-0 rounded-md">
<Image
src={user?.image || DEFAULT_AVATAR}
alt={pubkey}
className="h-11 w-11 rounded-md object-cover"
/>
</div>
<div className="flex w-full flex-1 items-start justify-between">
<div className="flex items-baseline gap-2 text-base">
<span className="max-w-[10rem] truncate font-semibold leading-none text-white">
{user?.nip05 || user?.name || shortenKey(pubkey)}
</span>
<span className="leading-none text-zinc-500">·</span>
<span className="leading-none text-zinc-500">
{dayjs().to(dayjs.unix(time))}
</span>
</div>
</div>
</>
)}
</div>
);
}

2
src/app/channel/components/mutedItem.tsx
View File

@@ -47,7 +47,7 @@ export function MutedItem({ data }: { data: any }) {
/> />
</div> </div>
<div className="flex w-full flex-1 flex-col items-start gap-0.5 text-start"> <div className="flex w-full flex-1 flex-col items-start gap-0.5 text-start">
<span className="truncate text-base font-medium leading-none text-white"> <span className="truncate text-base font-medium leading-none text-zinc-100">
{user?.displayName || user?.name || "Pleb"} {user?.displayName || user?.name || "Pleb"}
</span> </span>
<span className="text-base leading-none text-zinc-400"> <span className="text-base leading-none text-zinc-400">

4
src/app/chat/components/item.tsx
View File

@@ -27,7 +27,9 @@ export function ChatsListItem({ data }: { data: any }) {
href={`/app/chat?pubkey=${data.sender_pubkey}`} href={`/app/chat?pubkey=${data.sender_pubkey}`}
className={twMerge( className={twMerge(
"inline-flex h-9 items-center gap-2.5 rounded-md px-2.5", "inline-flex h-9 items-center gap-2.5 rounded-md px-2.5",
pagePubkey === data.sender_pubkey ? "bg-zinc-900 text-white" : "", pagePubkey === data.sender_pubkey
? "bg-zinc-900 text-zinc-100"
: "",
)} )}
> >
<div className="relative h-5 w-5 shrink-0 rounded"> <div className="relative h-5 w-5 shrink-0 rounded">

21
src/app/chat/components/messages/item.tsx
View File

@@ -1,12 +1,12 @@
import { ChatMessageUser } from "@app/chat/components/messages/user";
import { useDecryptMessage } from "@app/chat/hooks/useDecryptMessage"; import { useDecryptMessage } from "@app/chat/hooks/useDecryptMessage";
import { MentionNote } from "@shared/notes/mentions/note"; import { MentionNote } from "@shared/notes/mentions/note";
import { ImagePreview } from "@shared/notes/preview/image"; import { ImagePreview } from "@shared/notes/preview/image";
import { LinkPreview } from "@shared/notes/preview/link";
import { VideoPreview } from "@shared/notes/preview/video"; import { VideoPreview } from "@shared/notes/preview/video";
import { User } from "@shared/user";
import { parser } from "@utils/parser"; import { parser } from "@utils/parser";
import { memo } from "react";
export const ChatMessageItem = memo(function ChatMessageItem({ export function ChatMessageItem({
data, data,
userPubkey, userPubkey,
userPrivkey, userPrivkey,
@@ -26,11 +26,11 @@ export const ChatMessageItem = memo(function ChatMessageItem({
return ( return (
<div className="flex h-min min-h-min w-full select-text flex-col px-5 py-3 hover:bg-black/20"> <div className="flex h-min min-h-min w-full select-text flex-col px-5 py-3 hover:bg-black/20">
<div className="flex flex-col"> <div className="flex flex-col">
<ChatMessageUser pubkey={data.sender_pubkey} time={data.created_at} /> <User pubkey={data.sender_pubkey} time={data.created_at} />
<div className="-mt-[20px] pl-[49px]"> <div className="-mt-[20px] pl-[49px]">
<div className="whitespace-pre-line break-words text-base text-zinc-100 leading-tight"> <p className="select-text whitespace-pre-line break-words text-base text-zinc-100">
{content.parsed || ""} {content.parsed}
</div> </p>
{Array.isArray(content.images) && content.images.length ? ( {Array.isArray(content.images) && content.images.length ? (
<ImagePreview urls={content.images} /> <ImagePreview urls={content.images} />
) : ( ) : (
@@ -41,6 +41,11 @@ export const ChatMessageItem = memo(function ChatMessageItem({
) : ( ) : (
<></> <></>
)} )}
{Array.isArray(content.links) && content.links.length ? (
<LinkPreview urls={content.links} />
) : (
<></>
)}
{Array.isArray(content.notes) && content.notes.length ? ( {Array.isArray(content.notes) && content.notes.length ? (
content.notes.map((note: string) => ( content.notes.map((note: string) => (
<MentionNote key={note} id={note} /> <MentionNote key={note} id={note} />
@@ -52,4 +57,4 @@ export const ChatMessageItem = memo(function ChatMessageItem({
</div> </div>
</div> </div>
); );
}); }

51
src/app/chat/components/messages/user.tsx
View File

@@ -1,51 +0,0 @@
import { Image } from "@shared/image";
import { DEFAULT_AVATAR } from "@stores/constants";
import { useProfile } from "@utils/hooks/useProfile";
import { shortenKey } from "@utils/shortenKey";
import dayjs from "dayjs";
import relativeTime from "dayjs/plugin/relativeTime";
dayjs.extend(relativeTime);
export function ChatMessageUser({
pubkey,
time,
}: { pubkey: string; time: number }) {
const { user, isError, isLoading } = useProfile(pubkey);
return (
<div className="group flex items-start gap-3">
{isError || isLoading ? (
<>
<div className="relative h-11 w-11 shrink animate-pulse rounded-md bg-zinc-800" />
<div className="flex w-full flex-1 items-start justify-between">
<div className="flex items-baseline gap-2 text-base">
<div className="h-4 w-20 animate-pulse rounded bg-zinc-800" />
</div>
</div>
</>
) : (
<>
<div className="relative h-11 w-11 shrink rounded-md">
<Image
src={user?.image || DEFAULT_AVATAR}
alt={pubkey}
className="h-11 w-11 rounded-md object-cover"
/>
</div>
<div className="flex w-full flex-1 items-start justify-between">
<div className="flex items-baseline gap-2 text-base">
<span className="font-semibold leading-none text-zinc-200">
{user?.nip05 || user?.name || shortenKey(pubkey)}
</span>
<span className="leading-none text-zinc-500">·</span>
<span className="leading-none text-zinc-500">
{dayjs().to(dayjs.unix(time))}
</span>
</div>
</div>
</>
)}
</div>
);
}

2
src/app/chat/components/self.tsx
View File

@@ -26,7 +26,7 @@ export function ChatsListSelfItem({ data }: { data: any }) {
href={`/app/chat?pubkey=${data.pubkey}`} href={`/app/chat?pubkey=${data.pubkey}`}
className={twMerge( className={twMerge(
"inline-flex h-9 items-center gap-2.5 rounded-md px-2.5", "inline-flex h-9 items-center gap-2.5 rounded-md px-2.5",
pagePubkey === data.pubkey ? "bg-zinc-900 text-white" : "", pagePubkey === data.pubkey ? "bg-zinc-900 text-zinc-100" : "",
)} )}
> >
<div className="relative h-5 w-5 shrink-0 rounded"> <div className="relative h-5 w-5 shrink-0 rounded">

2
src/app/chat/components/sidebar.tsx
View File

@@ -4,7 +4,7 @@ import { useProfile } from "@utils/hooks/useProfile";
import { shortenKey } from "@utils/shortenKey"; import { shortenKey } from "@utils/shortenKey";
export function ChatSidebar({ pubkey }: { pubkey: string }) { export function ChatSidebar({ pubkey }: { pubkey: string }) {
const { user, isError, isLoading } = useProfile(pubkey); const { user } = useProfile(pubkey);
return ( return (
<div className="px-3 py-2"> <div className="px-3 py-2">

2
src/app/index/pages/index.page.tsx
View File

@@ -25,6 +25,6 @@ export function Page() {
}, [fetchAccount, fetchLastLogin, account, lastLogin]); }, [fetchAccount, fetchLastLogin, account, lastLogin]);
return ( return (
<div className="h-screen w-screen bg-zinc-50 text-zinc-900 dark:bg-black dark:text-white" /> <div className="h-screen w-screen bg-zinc-50 text-zinc-900 dark:bg-black dark:text-zinc-100" />
); );
} }

8
src/app/prefetch/pages/index.page.tsx
View File

@@ -158,7 +158,7 @@ export function Page() {
}, []); }, []);
return ( return (
<div className="h-screen w-screen bg-zinc-50 text-zinc-900 dark:bg-black dark:text-white"> <div className="h-screen w-screen bg-zinc-50 text-zinc-900 dark:bg-black dark:text-zinc-100">
<div className="relative h-full overflow-hidden"> <div className="relative h-full overflow-hidden">
<div <div
data-tauri-drag-region data-tauri-drag-region
@@ -166,9 +166,9 @@ export function Page() {
/> />
<div className="relative flex h-full flex-col items-center justify-center"> <div className="relative flex h-full flex-col items-center justify-center">
<div className="flex flex-col items-center gap-2"> <div className="flex flex-col items-center gap-2">
<LumeIcon className="h-16 w-16 text-black dark:text-white" /> <LumeIcon className="h-16 w-16 text-black dark:text-zinc-100" />
<div className="text-center"> <div className="text-center">
<h3 className="text-lg font-semibold leading-tight text-zinc-900 dark:text-white"> <h3 className="text-lg font-semibold leading-tight text-zinc-900 dark:text-zinc-100">
Here&apos;s an interesting fact: Here&apos;s an interesting fact:
</h3> </h3>
<p className="font-medium text-zinc-300 dark:text-zinc-600"> <p className="font-medium text-zinc-300 dark:text-zinc-600">
@@ -179,7 +179,7 @@ export function Page() {
</div> </div>
<div className="absolute bottom-16 left-1/2 -translate-x-1/2 transform"> <div className="absolute bottom-16 left-1/2 -translate-x-1/2 transform">
<svg <svg
className="h-5 w-5 animate-spin text-black dark:text-white" className="h-5 w-5 animate-spin text-black dark:text-zinc-100"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
fill="none" fill="none"
viewBox="0 0 24 24" viewBox="0 0 24 24"

10
src/app/space/components/addFeed.tsx
View File

@@ -76,7 +76,7 @@ export function AddFeedBlock({ parentState }: { parentState: any }) {
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<Dialog.Title <Dialog.Title
as="h3" as="h3"
className="text-lg font-semibold leading-none text-white" className="text-lg font-semibold leading-none text-zinc-100"
> >
Create image block Create image block
</Dialog.Title> </Dialog.Title>
@@ -115,7 +115,7 @@ export function AddFeedBlock({ parentState }: { parentState: any }) {
required: true, required: true,
})} })}
spellCheck={false} spellCheck={false}
className="relative h-10 w-full rounded-md border border-black/5 px-3 py-2 shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-white dark:shadow-black/10 dark:placeholder:text-zinc-500" className="relative h-10 w-full rounded-md border border-black/5 px-3 py-2 shadow-input 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"
/> />
</div> </div>
</div> </div>
@@ -130,7 +130,7 @@ export function AddFeedBlock({ parentState }: { parentState: any }) {
required: true, required: true,
})} })}
spellCheck={false} spellCheck={false}
className="relative h-10 w-full rounded-md border border-black/5 px-3 py-2 shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-white dark:shadow-black/10 dark:placeholder:text-zinc-500" className="relative h-10 w-full rounded-md border border-black/5 px-3 py-2 shadow-input 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"
/> />
</div> </div>
</div> </div>
@@ -138,11 +138,11 @@ export function AddFeedBlock({ parentState }: { parentState: any }) {
<button <button
type="submit" type="submit"
disabled={!isDirty || !isValid} disabled={!isDirty || !isValid}
className="inline-flex h-11 w-full transform items-center justify-center rounded-lg bg-fuchsia-500 font-medium text-white shadow-button active:translate-y-1 disabled:cursor-not-allowed disabled:opacity-30" className="inline-flex h-11 w-full transform items-center justify-center rounded-lg bg-fuchsia-500 font-medium text-zinc-100 shadow-button active:translate-y-1 disabled:cursor-not-allowed disabled:opacity-30"
> >
{loading ? ( {loading ? (
<svg <svg
className="h-4 w-4 animate-spin text-black dark:text-white" className="h-4 w-4 animate-spin text-black dark:text-zinc-100"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
fill="none" fill="none"
viewBox="0 0 24 24" viewBox="0 0 24 24"

10
src/app/space/components/addImage.tsx
View File

@@ -150,7 +150,7 @@ export function AddImageBlock({ parentState }: { parentState: any }) {
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<Dialog.Title <Dialog.Title
as="h3" as="h3"
className="text-lg font-semibold leading-none text-white" className="text-lg font-semibold leading-none text-zinc-100"
> >
Create image block Create image block
</Dialog.Title> </Dialog.Title>
@@ -182,7 +182,7 @@ export function AddImageBlock({ parentState }: { parentState: any }) {
type={"hidden"} type={"hidden"}
{...register("content")} {...register("content")}
value={image} value={image}
className="relative h-10 w-full rounded-lg border border-black/5 px-3 py-2 shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-white dark:shadow-black/10 dark:placeholder:text-zinc-500" className="relative h-10 w-full rounded-lg border border-black/5 px-3 py-2 shadow-input 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"
/> />
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-1">
<label className="text-sm font-medium uppercase tracking-wider text-zinc-400"> <label className="text-sm font-medium uppercase tracking-wider text-zinc-400">
@@ -195,7 +195,7 @@ export function AddImageBlock({ parentState }: { parentState: any }) {
required: true, required: true,
})} })}
spellCheck={false} spellCheck={false}
className="relative h-10 w-full rounded-md border border-black/5 px-3 py-2 shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-white dark:shadow-black/10 dark:placeholder:text-zinc-500" className="relative h-10 w-full rounded-md border border-black/5 px-3 py-2 shadow-input 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"
/> />
</div> </div>
</div> </div>
@@ -224,11 +224,11 @@ export function AddImageBlock({ parentState }: { parentState: any }) {
<button <button
type="submit" type="submit"
disabled={!isDirty || !isValid} disabled={!isDirty || !isValid}
className="inline-flex h-11 w-full transform items-center justify-center rounded-lg bg-fuchsia-500 font-medium text-white shadow-button active:translate-y-1 disabled:cursor-not-allowed disabled:opacity-30" className="inline-flex h-11 w-full transform items-center justify-center rounded-lg bg-fuchsia-500 font-medium text-zinc-100 shadow-button active:translate-y-1 disabled:cursor-not-allowed disabled:opacity-30"
> >
{loading ? ( {loading ? (
<svg <svg
className="h-4 w-4 animate-spin text-black dark:text-white" className="h-4 w-4 animate-spin text-black dark:text-zinc-100"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
fill="none" fill="none"
viewBox="0 0 24 24" viewBox="0 0 24 24"

2
src/renderer/_default.page.server.tsx
View File

@@ -35,7 +35,7 @@ export function render(pageContext: PageContextServer) {
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head> </head>
<body class="cursor-default select-none overflow-hidden font-sans antialiased bg-zinc-50 text-zinc-900 dark:bg-zinc-950 dark:text-white"> <body class="cursor-default select-none overflow-hidden font-sans antialiased bg-zinc-50 text-zinc-900 dark:bg-zinc-950 dark:text-zinc-100">
<div id="app">${dangerouslySkipEscape(pageHtml)}</div> <div id="app">${dangerouslySkipEscape(pageHtml)}</div>
</body> </body>
</html>`; </html>`;

2
src/renderer/layoutDefault.tsx
View File

@@ -1,6 +1,6 @@
export function LayoutDefault({ children }: { children: React.ReactNode }) { export function LayoutDefault({ children }: { children: React.ReactNode }) {
return ( return (
<div className="h-screen w-screen bg-zinc-50 text-zinc-900 dark:bg-black dark:text-white"> <div className="h-screen w-screen bg-zinc-50 text-zinc-900 dark:bg-black dark:text-zinc-100">
{children} {children}
</div> </div>
); );

4
src/shared/avatarUploader.tsx
View File

@@ -54,11 +54,11 @@ export function AvatarUploader({ valueState }: { valueState: any }) {
<button <button
onClick={() => openFileDialog()} onClick={() => openFileDialog()}
type="button" type="button"
className="inline-flex h-6 items-center justify-center rounded bg-zinc-900 px-3 text-base font-medium text-white ring-1 ring-zinc-800 hover:bg-zinc-700" className="inline-flex h-6 items-center justify-center rounded bg-zinc-900 px-3 text-base font-medium text-zinc-100 ring-1 ring-zinc-800 hover:bg-zinc-700"
> >
{loading ? ( {loading ? (
<svg <svg
className="h-4 w-4 animate-spin text-black dark:text-white" className="h-4 w-4 animate-spin text-black dark:text-zinc-100"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
fill="none" fill="none"
viewBox="0 0 24 24" viewBox="0 0 24 24"

2
src/shared/composer/imageUploader.tsx
View File

@@ -104,7 +104,7 @@ export function ImageUploader() {
> >
{loading ? ( {loading ? (
<svg <svg
className="h-4 w-4 animate-spin text-black dark:text-white" className="h-4 w-4 animate-spin text-black dark:text-zinc-100"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
fill="none" fill="none"
viewBox="0 0 24 24" viewBox="0 0 24 24"

2
src/shared/composer/modal.tsx
View File

@@ -29,7 +29,7 @@ export function ComposerModal() {
<button <button
type="button" type="button"
onClick={() => openModal()} onClick={() => openModal()}
className="inline-flex h-8 w-max items-center justify-center gap-1 rounded-md bg-fuchsia-500 px-2.5 text-sm font-medium text-white shadow-button hover:bg-fuchsia-600 focus:outline-none" className="inline-flex h-8 w-max items-center justify-center gap-1 rounded-md bg-fuchsia-500 px-2.5 text-sm font-medium text-zinc-100 shadow-button hover:bg-fuchsia-600 focus:outline-none"
> >
<ComposeIcon width={14} height={14} /> <ComposeIcon width={14} height={14} />
Compose Compose

4
src/shared/composer/types/post.tsx
View File

@@ -50,7 +50,7 @@ const ImagePreview = ({
onClick={() => Transforms.removeNodes(editor, { at: path })} onClick={() => Transforms.removeNodes(editor, { at: path })}
className="absolute right-2 top-2 inline-flex h-7 w-7 items-center justify-center gap-0.5 rounded bg-zinc-800 text-base font-medium text-zinc-400 shadow-mini-button hover:bg-zinc-700" className="absolute right-2 top-2 inline-flex h-7 w-7 items-center justify-center gap-0.5 rounded bg-zinc-800 text-base font-medium text-zinc-400 shadow-mini-button hover:bg-zinc-700"
> >
<TrashIcon width={14} height={14} className="text-white" /> <TrashIcon width={14} height={14} className="text-zinc-100" />
</button> </button>
</div> </div>
</figure> </figure>
@@ -130,7 +130,7 @@ export function Post({ pubkey, privkey }: { pubkey: string; privkey: string }) {
<button <button
type="button" type="button"
onClick={submit} onClick={submit}
className="inline-flex h-7 w-max items-center justify-center gap-1 rounded-md bg-fuchsia-500 px-3.5 text-base font-medium text-white shadow-button hover:bg-fuchsia-600" className="inline-flex h-7 w-max items-center justify-center gap-1 rounded-md bg-fuchsia-500 px-3.5 text-base font-medium text-zinc-100 shadow-button hover:bg-fuchsia-600"
> >
Post Post
</button> </button>

2
src/shared/composer/user.tsx
View File

@@ -15,7 +15,7 @@ export function User({ pubkey }: { pubkey: string }) {
loading="auto" loading="auto"
/> />
</div> </div>
<h5 className="text-base font-semibold leading-none text-white"> <h5 className="text-base font-semibold leading-none text-zinc-100">
{user?.nip05 || user?.name || ( {user?.nip05 || user?.name || (
<div className="h-3 w-20 animate-pulse rounded-sm bg-zinc-700" /> <div className="h-3 w-20 animate-pulse rounded-sm bg-zinc-700" />
)} )}

2
src/shared/mediaUploader.tsx
View File

@@ -64,7 +64,7 @@ export function MediaUploader({ setState }: { setState: any }) {
> >
{loading ? ( {loading ? (
<svg <svg
className="h-4 w-4 animate-spin text-black dark:text-white" className="h-4 w-4 animate-spin text-black dark:text-zinc-100"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
fill="none" fill="none"
viewBox="0 0 24 24" viewBox="0 0 24 24"

4
src/shared/multiAccounts.tsx
View File

@@ -31,7 +31,7 @@ export function MultiAccounts() {
<BellIcon <BellIcon
width={16} width={16}
height={16} height={16}
className="text-zinc-400 group-hover:text-white" className="text-zinc-400 group-hover:text-zinc-100"
/> />
</button> </button>
</div> </div>
@@ -56,7 +56,7 @@ export function MultiAccounts() {
<PlusIcon <PlusIcon
width={16} width={16}
height={16} height={16}
className="text-zinc-400 group-hover:text-white" className="text-zinc-400 group-hover:text-zinc-100"
/> />
</button> </button>
</div> </div>

8
src/shared/navigation.tsx
View File

@@ -33,7 +33,7 @@ export function Navigation() {
activeClassName="bg-zinc-900/50" activeClassName="bg-zinc-900/50"
> >
<span className="inline-flex h-5 w-5 items-center justify-center rounded bg-zinc-900"> <span className="inline-flex h-5 w-5 items-center justify-center rounded bg-zinc-900">
<SpaceIcon width={12} height={12} className="text-white" /> <SpaceIcon width={12} height={12} className="text-zinc-100" />
</span> </span>
<span className="font-medium">Spaces</span> <span className="font-medium">Spaces</span>
</ActiveLink> </ActiveLink>
@@ -43,7 +43,11 @@ export function Navigation() {
activeClassName="bg-zinc-900/50" activeClassName="bg-zinc-900/50"
> >
<span className="inline-flex h-5 w-5 items-center justify-center rounded bg-zinc-900"> <span className="inline-flex h-5 w-5 items-center justify-center rounded bg-zinc-900">
<TrendingIcon width={12} height={12} className="text-white" /> <TrendingIcon
width={12}
height={12}
className="text-zinc-100"
/>
</span> </span>
<span className="font-medium">Trending</span> <span className="font-medium">Trending</span>
</ActiveLink> </ActiveLink>

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

@@ -82,7 +82,7 @@ export function NoteMetadata({
<LoaderIcon <LoaderIcon
width={12} width={12}
height={12} height={12}
className="animate-spin text-black dark:text-white" className="animate-spin text-black dark:text-zinc-100"
/> />
</div> </div>
<div className="w-20 group inline-flex items-center gap-1.5"> <div className="w-20 group inline-flex items-center gap-1.5">
@@ -94,7 +94,7 @@ export function NoteMetadata({
<LoaderIcon <LoaderIcon
width={12} width={12}
height={12} height={12}
className="animate-spin text-black dark:text-white" className="animate-spin text-black dark:text-zinc-100"
/> />
</div> </div>
<div className="w-20 group inline-flex items-center gap-1.5"> <div className="w-20 group inline-flex items-center gap-1.5">
@@ -106,7 +106,7 @@ export function NoteMetadata({
<LoaderIcon <LoaderIcon
width={12} width={12}
height={12} height={12}
className="animate-spin text-black dark:text-white" className="animate-spin text-black dark:text-zinc-100"
/> />
</div> </div>
</> </>

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

@@ -29,7 +29,7 @@ export function NoteReply({
height={16} height={16}
className="text-zinc-400 group-hover:text-green-400" className="text-zinc-400 group-hover:text-green-400"
/> />
<span className="text-base leading-none text-zinc-400 group-hover:text-white"> <span className="text-base leading-none text-zinc-400 group-hover:text-zinc-100">
{compactNumber.format(replies)} {compactNumber.format(replies)}
</span> </span>
</button> </button>

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

@@ -51,7 +51,7 @@ export function NoteRepost({
height={16} height={16}
className="text-zinc-400 group-hover:text-blue-400" className="text-zinc-400 group-hover:text-blue-400"
/> />
<span className="text-base leading-none text-zinc-400 group-hover:text-white"> <span className="text-base leading-none text-zinc-400 group-hover:text-zinc-100">
{compactNumber.format(count)} {compactNumber.format(count)}
</span> </span>
</button> </button>

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

@@ -12,7 +12,7 @@ export function NoteZap({ zaps }: { zaps: number }) {
height={16} height={16}
className="text-zinc-400 group-hover:text-blue-400" className="text-zinc-400 group-hover:text-blue-400"
/> />
<span className="text-base leading-none text-zinc-400 group-hover:text-white"> <span className="text-base leading-none text-zinc-400 group-hover:text-zinc-100">
{compactNumber.format(zaps)} {compactNumber.format(zaps)}
</span> </span>
</button> </button>

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

@@ -40,7 +40,7 @@ export function NoteReplyForm({ id }: { id: string }) {
name="content" name="content"
onChange={(e) => setValue(e.target.value)} onChange={(e) => setValue(e.target.value)}
placeholder="Reply to this thread..." placeholder="Reply to this thread..."
className="relative h-20 w-full resize-none rounded-md px-5 py-5 text-base bg-transparent !outline-none placeholder:text-zinc-400 dark:text-white dark:placeholder:text-zinc-500" className="relative h-20 w-full resize-none rounded-md px-5 py-5 text-base bg-transparent !outline-none placeholder:text-zinc-400 dark:text-zinc-100 dark:placeholder:text-zinc-500"
spellCheck={false} spellCheck={false}
/> />
</div> </div>

4
src/shared/user.tsx
View File

@@ -32,7 +32,7 @@ export function User({
/> />
</Popover.Button> </Popover.Button>
<div className="flex flex-wrap items-baseline gap-1"> <div className="flex flex-wrap items-baseline gap-1">
<h5 className="max-w-[10rem] text-base font-semibold leading-none truncate"> <h5 className="text-zinc-200 max-w-[10rem] font-medium leading-none truncate">
{user?.nip05 || user?.name || shortenKey(pubkey)} {user?.nip05 || user?.name || shortenKey(pubkey)}
</h5> </h5>
{repost && ( {repost && (
@@ -75,7 +75,7 @@ export function User({
</span> </span>
</div> </div>
<div> <div>
<p className="line-clamp-3 text-base leading-tight text-white"> <p className="line-clamp-3 text-base leading-tight text-zinc-100">
{user?.about} {user?.about}
</p> </p>
</div> </div>