nostr/lume
1
0
Fork 0
mirror of https://github.com/luminous-devs/lume.git synced 2024-10-02 18:00:47 +00:00
Code Issues 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -4,7 +4,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Lume</title> <title>Lume</title>
</head> </head>
<body class="relative cursor-default select-none overflow-hidden font-sans antialiased h-screen w-screen text-black dark:text-white"> <body class="relative cursor-default select-none overflow-hidden font-sans antialiased h-screen w-screen text-neutral-950 dark:text-neutral-50">
<div id="root"></div> <div id="root"></div>
<script type="module" src="/src/main.jsx"></script> <script type="module" src="/src/main.jsx"></script>
</body> </body>

14
package.json
View File

@ -73,12 +73,12 @@
"react-markdown": "^8.0.7", "react-markdown": "^8.0.7",
"react-router-dom": "^6.16.0", "react-router-dom": "^6.16.0",
"react-string-replace": "^1.1.1", "react-string-replace": "^1.1.1",
"reactflow": "^11.9.2", "reactflow": "^11.9.3",
"remark-gfm": "^3.0.1", "remark-gfm": "^3.0.1",
"tailwind-scrollbar": "^3.0.5", "tailwind-scrollbar": "^3.0.5",
"tauri-controls": "^0.2.0", "tauri-controls": "^0.2.0",
"tippy.js": "^6.3.7", "tippy.js": "^6.3.7",
"virtua": "^0.9.1", "virtua": "^0.12.0",
"zustand": "^4.4.3" "zustand": "^4.4.3"
}, },
"devDependencies": { "devDependencies": {
@ -86,12 +86,12 @@
"@tauri-apps/cli": "2.0.0-alpha.14", "@tauri-apps/cli": "2.0.0-alpha.14",
"@trivago/prettier-plugin-sort-imports": "^4.2.0", "@trivago/prettier-plugin-sort-imports": "^4.2.0",
"@types/html-to-text": "^9.0.2", "@types/html-to-text": "^9.0.2",
"@types/node": "^20.8.3", "@types/node": "^20.8.4",
"@types/react": "^18.2.25", "@types/react": "^18.2.27",
"@types/react-dom": "^18.2.11", "@types/react-dom": "^18.2.12",
"@types/youtube-player": "^5.5.8", "@types/youtube-player": "^5.5.8",
"@typescript-eslint/eslint-plugin": "^6.7.4", "@typescript-eslint/eslint-plugin": "^6.7.5",
"@typescript-eslint/parser": "^6.7.4", "@typescript-eslint/parser": "^6.7.5",
"@vitejs/plugin-react-swc": "^3.4.0", "@vitejs/plugin-react-swc": "^3.4.0",
"autoprefixer": "^10.4.16", "autoprefixer": "^10.4.16",
"clsx": "^2.0.0", "clsx": "^2.0.0",

666
pnpm-lock.yaml
View File

File diff suppressed because it is too large Load Diff

50
src-tauri/Cargo.lock generated
View File

@ -88,9 +88,9 @@ dependencies = [
[[package]] [[package]]
name = "aho-corasick" name = "aho-corasick"
version = "1.1.1" version = "1.1.2"
source = "registry+https://github.com/rust-lang/crates.io-index" source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "ea5d730647d4fadd988536d06fecce94b7b4f2a7efdae548f1cf4b63205518ab" checksum = "b2969dcb958b36655471fc61f7e416fa76033bdd4bfed0678d8fee1e2d07a1f0"
dependencies = [ dependencies = [
"memchr", "memchr",
] ]
@ -305,7 +305,7 @@ dependencies = [
"cfg-if", "cfg-if",
"event-listener 3.0.0", "event-listener 3.0.0",
"futures-lite", "futures-lite",
"rustix 0.38.17", "rustix 0.38.18",
"windows-sys 0.48.0", "windows-sys 0.48.0",
] ]
@ -322,9 +322,9 @@ dependencies = [
[[package]] [[package]]
name = "async-signal" name = "async-signal"
version = "0.2.3" version = "0.2.4"
source = "registry+https://github.com/rust-lang/crates.io-index" source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "1079d27511f6c038736279421774ef4ad4bdd2e300825f4a48c4cc463a57cedf" checksum = "d2a5415b7abcdc9cd7d63d6badba5288b2ca017e3fbd4173b8f405449f1a2399"
dependencies = [ dependencies = [
"async-io", "async-io",
"async-lock", "async-lock",
@ -332,7 +332,7 @@ dependencies = [
"cfg-if", "cfg-if",
"futures-core", "futures-core",
"futures-io", "futures-io",
"rustix 0.38.17", "rustix 0.38.18",
"signal-hook-registry", "signal-hook-registry",
"slab", "slab",
"windows-sys 0.48.0", "windows-sys 0.48.0",
@ -1130,9 +1130,9 @@ dependencies = [
[[package]] [[package]]
name = "curl-sys" name = "curl-sys"
version = "0.4.66+curl-8.3.0" version = "0.4.67+curl-8.3.0"
source = "registry+https://github.com/rust-lang/crates.io-index" source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "70c44a72e830f0e40ad90dda8a6ab6ed6314d39776599a58a2e5e37fbc6db5b9" checksum = "3cc35d066510b197a0f72de863736641539957628c8a42e70e27c66849e77c34"
dependencies = [ dependencies = [
"cc", "cc",
"libc", "libc",
@ -1496,7 +1496,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "ef033ed5e9bad94e55838ca0ca906db0e043f517adda0c8b79c7a8c66c93c1b5" checksum = "ef033ed5e9bad94e55838ca0ca906db0e043f517adda0c8b79c7a8c66c93c1b5"
dependencies = [ dependencies = [
"cfg-if", "cfg-if",
"rustix 0.38.17", "rustix 0.38.18",
"windows-sys 0.48.0", "windows-sys 0.48.0",
] ]
@ -2544,9 +2544,9 @@ dependencies = [
[[package]] [[package]]
name = "json-patch" name = "json-patch"
version = "1.1.0" version = "1.2.0"
source = "registry+https://github.com/rust-lang/crates.io-index" source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "4f7765dccf8c39c3a470fc694efe322969d791e713ca46bc7b5c506886157572" checksum = "55ff1e1486799e3f64129f8ccad108b38290df9cd7015cd31bed17239f0789d6"
dependencies = [ dependencies = [
"serde", "serde",
"serde_json", "serde_json",
@ -3878,14 +3878,14 @@ dependencies = [
[[package]] [[package]]
name = "regex" name = "regex"
version = "1.9.6" version = "1.10.0"
source = "registry+https://github.com/rust-lang/crates.io-index" source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "ebee201405406dbf528b8b672104ae6d6d63e6d118cb10e4d51abbc7b58044ff" checksum = "d119d7c7ca818f8a53c300863d4f87566aac09943aef5b355bb83969dae75d87"
dependencies = [ dependencies = [
"aho-corasick", "aho-corasick",
"memchr", "memchr",
"regex-automata 0.3.9", "regex-automata 0.4.1",
"regex-syntax 0.7.5", "regex-syntax 0.8.0",
] ]
[[package]] [[package]]
@ -3899,13 +3899,13 @@ dependencies = [
[[package]] [[package]]
name = "regex-automata" name = "regex-automata"
version = "0.3.9" version = "0.4.1"
source = "registry+https://github.com/rust-lang/crates.io-index" source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "59b23e92ee4318893fa3fe3e6fb365258efbfe6ac6ab30f090cdcbb7aa37efa9" checksum = "465c6fc0621e4abc4187a2bda0937bfd4f722c2730b29562e19689ea796c9a4b"
dependencies = [ dependencies = [
"aho-corasick", "aho-corasick",
"memchr", "memchr",
"regex-syntax 0.7.5", "regex-syntax 0.8.0",
] ]
[[package]] [[package]]
@ -3916,9 +3916,9 @@ checksum = "f162c6dd7b008981e4d40210aca20b4bd0f9b60ca9271061b07f78537722f2e1"
[[package]] [[package]]
name = "regex-syntax" name = "regex-syntax"
version = "0.7.5" version = "0.8.0"
source = "registry+https://github.com/rust-lang/crates.io-index" source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "dbb5fb1acd8a1a18b3dd5be62d25485eb770e05afb408a9627d14d451bae12da" checksum = "c3cbb081b9784b07cceb8824c8583f86db4814d172ab043f3c23f7dc600bf83d"
[[package]] [[package]]
name = "reqwest" name = "reqwest"
@ -4065,9 +4065,9 @@ dependencies = [
[[package]] [[package]]
name = "rustix" name = "rustix"
version = "0.38.17" version = "0.38.18"
source = "registry+https://github.com/rust-lang/crates.io-index" source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "f25469e9ae0f3d0047ca8b93fc56843f38e6774f0914a107ff8b41be8be8e0b7" checksum = "5a74ee2d7c2581cd139b42447d7d9389b889bdaad3a73f1ebb16f2a3237bb19c"
dependencies = [ dependencies = [
"bitflags 2.4.0", "bitflags 2.4.0",
"errno", "errno",
@ -4233,9 +4233,9 @@ dependencies = [
[[package]] [[package]]
name = "semver" name = "semver"
version = "1.0.19" version = "1.0.20"
source = "registry+https://github.com/rust-lang/crates.io-index" source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "ad977052201c6de01a8ef2aa3378c4bd23217a056337d1d6da40468d267a4fb0" checksum = "836fa6a3e1e547f9a2c4040802ec865b5d85f4014efe00555d7090a3dcaa1090"
dependencies = [ dependencies = [
"serde", "serde",
] ]
@ -5535,7 +5535,7 @@ dependencies = [
"cfg-if", "cfg-if",
"fastrand 2.0.1", "fastrand 2.0.1",
"redox_syscall 0.3.5", "redox_syscall 0.3.5",
"rustix 0.38.17", "rustix 0.38.18",
"windows-sys 0.48.0", "windows-sys 0.48.0",
] ]

2
src/app.css
View File

@ -57,5 +57,5 @@ input::-ms-clear {
} }
.ProseMirror img.ProseMirror-selectednode { .ProseMirror img.ProseMirror-selectednode {
@apply outline-fuchsia-500; @apply outline-blue-500;
} }

2
src/app/auth/create/step-1.tsx
View File

@ -132,7 +132,7 @@ export function CreateStep1Screen() {
<button <button
type="button" type="button"
onClick={() => download()} onClick={() => download()}
className="inline-flex h-12 w-full items-center justify-center rounded-lg bg-interor-500 px-6 font-medium leading-none text-white hover:bg-interor-600 focus:outline-none" className="inline-flex h-12 w-full items-center justify-center rounded-lg bg-blue-500 px-6 font-medium leading-none text-white hover:bg-blue-600 focus:outline-none"
> >
{downloaded ? 'Downloaded' : 'Download account keys'} {downloaded ? 'Downloaded' : 'Download account keys'}
</button> </button>

2
src/app/auth/create/step-2.tsx
View File

@ -127,7 +127,7 @@ export function CreateStep2Screen() {
<button <button
type="submit" type="submit"
disabled={!isDirty || !isValid} disabled={!isDirty || !isValid}
className="inline-flex h-12 w-full items-center justify-between gap-2 rounded-lg border-t border-white/10 bg-interor-500 px-6 font-medium leading-none text-white hover:bg-interor-600 focus:outline-none" className="inline-flex h-12 w-full items-center justify-between gap-2 rounded-lg border-t border-white/10 bg-blue-500 px-6 font-medium leading-none text-white hover:bg-blue-600 focus:outline-none"
> >
{loading ? ( {loading ? (
<> <>

2
src/app/auth/create/step-3.tsx
View File

@ -150,7 +150,7 @@ export function CreateStep3Screen() {
<button <button
type="submit" type="submit"
disabled={!isDirty || !isValid} disabled={!isDirty || !isValid}
className="inline-flex h-12 w-full items-center justify-between gap-2 rounded-lg border-t border-white/10 bg-interor-500 px-6 font-medium leading-none text-white hover:bg-interor-600 focus:outline-none" className="inline-flex h-12 w-full items-center justify-between gap-2 rounded-lg border-t border-white/10 bg-blue-500 px-6 font-medium leading-none text-white hover:bg-blue-600 focus:outline-none"
> >
{loading ? ( {loading ? (
<> <>

2
src/app/auth/import/step-1.tsx
View File

@ -133,7 +133,7 @@ export function ImportStep1Screen() {
<button <button
type="submit" type="submit"
disabled={!isDirty || !isValid} disabled={!isDirty || !isValid}
className="inline-flex h-12 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" className="inline-flex h-12 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"
> >
{loading ? ( {loading ? (
<> <>

2
src/app/auth/import/step-2.tsx
View File

@ -127,7 +127,7 @@ export function ImportStep2Screen() {
<button <button
type="submit" type="submit"
disabled={!isDirty || !isValid} disabled={!isDirty || !isValid}
className="inline-flex h-12 w-full items-center justify-between gap-2 rounded-lg border-t border-white/10 bg-interor-500 px-6 font-medium leading-none text-white hover:bg-interor-600 focus:outline-none" className="inline-flex h-12 w-full items-center justify-between gap-2 rounded-lg border-t border-white/10 bg-blue-500 px-6 font-medium leading-none text-white hover:bg-blue-600 focus:outline-none"
> >
{loading ? ( {loading ? (
<> <>

2
src/app/auth/import/step-3.tsx
View File

@ -62,7 +62,7 @@ export function ImportStep3Screen() {
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
<button <button
type="button" type="button"
className="inline-flex h-12 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" className="inline-flex h-12 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"
onClick={() => submit()} onClick={() => submit()}
> >
{loading ? ( {loading ? (

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

@ -157,7 +157,7 @@ export function MigrateScreen() {
<button <button
type="submit" type="submit"
disabled={!isDirty || !isValid} disabled={!isDirty || !isValid}
className="mt-3 inline-flex h-11 w-full items-center justify-center rounded-md bg-interor-500 font-medium text-white hover:bg-interor-600 disabled:pointer-events-none disabled:opacity-50" className="mt-3 inline-flex h-11 w-full items-center justify-center rounded-md bg-blue-500 font-medium text-white hover:bg-blue-600 disabled:pointer-events-none disabled:opacity-50"
> >
{loading ? ( {loading ? (
<LoaderIcon className="h-4 w-4 animate-spin text-black dark:text-white" /> <LoaderIcon className="h-4 w-4 animate-spin text-black dark:text-white" />

4
src/app/auth/onboarding/step-1.tsx
View File

@ -76,7 +76,7 @@ export function OnboardStep1Screen() {
add them later. add them later.
</p> </p>
</div> </div>
<div className="scrollbar-none flex w-full flex-nowrap items-center gap-4 overflow-x-auto px-4"> <div className="flex w-full flex-nowrap items-center gap-4 overflow-x-auto px-4 scrollbar-none">
{status === 'loading' ? ( {status === 'loading' ? (
<div className="flex h-full w-full items-center justify-center"> <div className="flex h-full w-full items-center justify-center">
<LoaderIcon className="h-4 w-4 animate-spin text-white" /> <LoaderIcon className="h-4 w-4 animate-spin text-white" />
@ -109,7 +109,7 @@ export function OnboardStep1Screen() {
type="button" type="button"
onClick={submit} onClick={submit}
disabled={loading || follows.length === 0} disabled={loading || follows.length === 0}
className="inline-flex h-12 w-full items-center justify-between gap-2 rounded-lg border-t border-white/10 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-12 w-full items-center justify-between gap-2 rounded-lg border-t border-white/10 bg-blue-500 px-6 font-medium leading-none text-white hover:bg-blue-600 focus:outline-none disabled:opacity-50"
> >
{loading ? ( {loading ? (
<> <>

4
src/app/auth/onboarding/step-2.tsx
View File

@ -101,7 +101,7 @@ export function OnboardStep2Screen() {
</p> </p>
</div> </div>
<div className="flex flex-col gap-4"> <div className="flex flex-col gap-4">
<div className="scrollbar-none flex h-[450px] w-full flex-col divide-y divide-white/5 overflow-y-auto rounded-xl bg-white/20 backdrop-blur-xl"> <div className="flex h-[450px] w-full flex-col divide-y divide-white/5 overflow-y-auto rounded-xl bg-white/20 backdrop-blur-xl scrollbar-none">
{data.map((item: { hashtag: string }) => ( {data.map((item: { hashtag: string }) => (
<button <button
key={item.hashtag} key={item.hashtag}
@ -123,7 +123,7 @@ export function OnboardStep2Screen() {
type="button" type="button"
onClick={submit} onClick={submit}
disabled={loading || tags.size === 0 || tags.size > 3} disabled={loading || tags.size === 0 || tags.size > 3}
className="inline-flex h-12 w-full items-center justify-between gap-2 rounded-lg border-t border-white/10 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-12 w-full items-center justify-between gap-2 rounded-lg border-t border-white/10 bg-blue-500 px-6 font-medium leading-none text-white hover:bg-blue-600 focus:outline-none disabled:opacity-50"
> >
{loading ? ( {loading ? (
<> <>

6
src/app/auth/onboarding/step-3.tsx
View File

@ -105,14 +105,14 @@ export function OnboardStep3Screen() {
href="https://nostr.com/relays" href="https://nostr.com/relays"
target="_blank" target="_blank"
rel="noreferrer" rel="noreferrer"
className="text-fuchsia-500 underline" className="text-blue-500 underline"
> >
here (nostr.com) here (nostr.com)
</a> </a>
</p> </p>
</div> </div>
<div className="flex flex-col gap-4"> <div className="flex flex-col gap-4">
<div className="scrollbar-none relative flex h-[500px] w-full flex-col divide-y divide-white/10 overflow-y-auto rounded-xl bg-white/10 backdrop-blur-xl"> <div className="relative flex h-[500px] w-full flex-col divide-y divide-white/10 overflow-y-auto rounded-xl bg-white/10 backdrop-blur-xl scrollbar-none">
{status === 'loading' ? ( {status === 'loading' ? (
<div className="flex h-full w-full items-center justify-center"> <div className="flex h-full w-full items-center justify-center">
<LoaderIcon className="h-4 w-4 animate-spin text-white" /> <LoaderIcon className="h-4 w-4 animate-spin text-white" />
@ -158,7 +158,7 @@ export function OnboardStep3Screen() {
type="button" type="button"
disabled={loading} disabled={loading}
onClick={() => submit()} 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"
> >
{loading ? ( {loading ? (
<> <>

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

@ -159,7 +159,7 @@ export function ResetScreen() {
<button <button
type="submit" type="submit"
disabled={!isDirty || !isValid} disabled={!isDirty || !isValid}
className="inline-flex h-12 w-full items-center justify-center rounded-md bg-interor-500 font-medium text-white hover:bg-interor-600 disabled:pointer-events-none disabled:opacity-50" className="inline-flex h-12 w-full items-center justify-center rounded-md bg-blue-500 font-medium text-white hover:bg-blue-600 disabled:pointer-events-none disabled:opacity-50"
> >
{loading ? ( {loading ? (
<LoaderIcon className="h-4 w-4 animate-spin text-white" /> <LoaderIcon className="h-4 w-4 animate-spin text-white" />

4
src/app/auth/unlock.tsx
View File

@ -95,7 +95,7 @@ export function UnlockScreen() {
{...register('password', { required: true, minLength: 4 })} {...register('password', { required: true, minLength: 4 })}
type={showPassword ? 'text' : 'password'} type={showPassword ? 'text' : 'password'}
placeholder="Enter password" placeholder="Enter password"
className="relative h-12 w-full rounded-lg bg-zinc-300 py-1 text-center tracking-widest text-zinc-900 !outline-none backdrop-blur-xl placeholder:tracking-normal placeholder:text-zinc-500 dark:bg-zinc-800 dark:text-zinc-100 dark:placeholder:text-zinc-500" className="relative h-12 w-full rounded-lg bg-neutral-300 py-1 text-center tracking-widest text-neutral-900 !outline-none backdrop-blur-xl placeholder:tracking-normal placeholder:text-neutral-500 dark:bg-neutral-800 dark:text-neutral-100 dark:placeholder:text-neutral-500"
/> />
<button <button
type="button" type="button"
@ -113,7 +113,7 @@ export function UnlockScreen() {
<button <button
type="submit" type="submit"
disabled={!isDirty || !isValid} disabled={!isDirty || !isValid}
className="inline-flex h-10 w-full items-center justify-between gap-2 rounded-lg bg-interor-600 px-6 text-white hover:bg-interor-700 focus:outline-none disabled:opacity-50" className="inline-flex h-10 w-full items-center justify-between gap-2 rounded-lg bg-blue-500 px-6 text-white hover:bg-blue-600 focus:outline-none disabled:opacity-50"
> >
{loading ? ( {loading ? (
<> <>

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

@ -16,7 +16,7 @@ export function WelcomeScreen() {
<div className="inline-flex w-full flex-col items-center gap-3 px-4 pb-10"> <div className="inline-flex w-full flex-col items-center gap-3 px-4 pb-10">
<Link <Link
to="/auth/import" to="/auth/import"
className="inline-flex h-12 w-3/4 items-center justify-between gap-2 rounded-lg border-t border-white/10 bg-interor-500 px-4 font-medium leading-none text-white hover:bg-interor-600 focus:outline-none" className="inline-flex h-12 w-3/4 items-center justify-between gap-2 rounded-lg border-t border-white/10 bg-blue-500 px-4 font-medium leading-none text-white hover:bg-blue-600 focus:outline-none"
> >
<span className="w-5" /> <span className="w-5" />
<span>Login with private key</span> <span>Login with private key</span>

14
src/app/chats/chat.tsx
View File

@ -71,17 +71,17 @@ export function ChatScreen() {
return ( return (
<div className="h-full w-full p-3"> <div className="h-full w-full p-3">
<div className="rounded-lg bg-zinc-100 backdrop-blur-xl dark:bg-zinc-900"> <div className="rounded-lg bg-neutral-100 backdrop-blur-xl dark:bg-neutral-900">
<div className="flex h-full flex-col justify-between overflow-hidden"> <div className="flex h-full flex-col justify-between overflow-hidden">
<div className="flex h-16 shrink-0 items-center border-b border-zinc-200 px-3 dark:border-zinc-800"> <div className="flex h-16 shrink-0 items-center border-b border-neutral-200 px-3 dark:border-neutral-800">
<User pubkey={pubkey} variant="simple" /> <User pubkey={pubkey} variant="simple" />
</div> </div>
<div className="h-full w-full flex-1 px-3 py-3"> <div className="h-full w-full flex-1 px-3 py-3">
{status === 'loading' ? ( {status === 'loading' ? (
<div className="flex h-full w-full items-center justify-center"> <div className="flex h-full w-full items-center justify-center">
<div className="flex flex-col items-center gap-1.5"> <div className="flex flex-col items-center gap-1.5">
<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" />
<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 messages Loading messages
</p> </p>
</div> </div>
@ -89,17 +89,17 @@ export function ChatScreen() {
) : data.length === 0 ? ( ) : data.length === 0 ? (
<div className="absolute left-1/2 top-1/2 flex w-full -translate-x-1/2 -translate-y-1/2 transform flex-col gap-1 text-center"> <div className="absolute left-1/2 top-1/2 flex w-full -translate-x-1/2 -translate-y-1/2 transform flex-col gap-1 text-center">
<h3 className="mb-2 text-4xl">🙌</h3> <h3 className="mb-2 text-4xl">🙌</h3>
<p className="leading-none text-zinc-500 dark:text-zinc-300"> <p className="leading-none text-neutral-500 dark:text-neutral-300">
You two didn&apos;t talk yet, let&apos;s send first message You two didn&apos;t talk yet, let&apos;s send first message
</p> </p>
</div> </div>
) : ( ) : (
<VList ref={listRef} className="scrollbar-none h-full" mode="reverse"> <VList ref={listRef} className="h-full scrollbar-none" reverse>
{data.map((message) => renderItem(message))} {data.map((message) => renderItem(message))}
</VList> </VList>
)} )}
</div> </div>
<div className="shrink-0 rounded-b-lg border-t border-zinc-300 bg-zinc-200 p-3 backdrop-blur-xl dark:border-zinc-700 dark:bg-zinc-800"> <div className="shrink-0 rounded-b-lg border-t border-neutral-300 bg-neutral-200 p-3 backdrop-blur-xl dark:border-neutral-700 dark:bg-neutral-800">
<ChatForm <ChatForm
receiverPubkey={pubkey} receiverPubkey={pubkey}
userPubkey={db.account.pubkey} userPubkey={db.account.pubkey}

6
src/app/chats/components/chatForm.tsx
View File

@ -47,7 +47,7 @@ export function ChatForm({
return ( return (
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<MediaUploader setState={setValue} /> <MediaUploader setState={setValue} />
<div className="flex w-full items-center justify-between rounded-full bg-zinc-300 px-3 dark:bg-zinc-700"> <div className="flex w-full items-center justify-between rounded-full bg-neutral-300 px-3 dark:bg-neutral-700">
<input <input
value={value} value={value}
onChange={(e) => setValue(e.target.value)} onChange={(e) => setValue(e.target.value)}
@ -57,12 +57,12 @@ export function ChatForm({
autoCorrect="off" autoCorrect="off"
autoCapitalize="off" autoCapitalize="off"
placeholder="Message" placeholder="Message"
className="h-10 flex-1 resize-none bg-transparent px-3 text-zinc-900 placeholder:text-zinc-500 focus:outline-none dark:text-zinc-100 dark:placeholder:text-zinc-300" className="h-10 flex-1 resize-none bg-transparent px-3 text-neutral-900 placeholder:text-neutral-500 focus:outline-none dark:text-neutral-100 dark:placeholder:text-neutral-300"
/> />
<button <button
type="button" type="button"
onClick={submit} onClick={submit}
className="inline-flex shrink-0 items-center gap-1.5 text-sm font-medium text-zinc-500 dark:text-zinc-300" className="inline-flex shrink-0 items-center gap-1.5 text-sm font-medium text-neutral-500 dark:text-neutral-300"
> >
<EnterIcon className="h-5 w-5" /> <EnterIcon className="h-5 w-5" />
Send Send

8
src/app/chats/components/chatListItem.tsx
View File

@ -44,10 +44,10 @@ export const ChatListItem = memo(function ChatListItem({ event }: { event: NDKEv
preventScrollReset={true} preventScrollReset={true}
className={({ isActive }) => className={({ isActive }) =>
twMerge( twMerge(
'flex items-center gap-2.5 px-3 py-1.5 hover:bg-zinc-200 dark:hover:bg-zinc-800', 'flex items-center gap-2.5 px-3 py-1.5 hover:bg-neutral-200 dark:hover:bg-neutral-800',
isActive isActive
? 'bg-zinc-200 text-zinc-900 dark:bg-zinc-800 dark:text-zinc-100' ? 'bg-neutral-200 text-neutral-900 dark:bg-neutral-800 dark:text-neutral-100'
: 'text-zinc-500 dark:text-zinc-300' : 'text-neutral-500 dark:text-neutral-300'
) )
} }
> >
@ -69,7 +69,7 @@ export const ChatListItem = memo(function ChatListItem({ event }: { event: NDKEv
</Avatar.Fallback> </Avatar.Fallback>
</Avatar.Root> </Avatar.Root>
<div className="flex w-full flex-col"> <div className="flex w-full flex-col">
<div className="max-w-[10rem] truncate font-semibold text-zinc-900 dark:text-zinc-100"> <div className="max-w-[10rem] truncate font-semibold text-neutral-900 dark:text-neutral-100">
{user?.name || {user?.name ||
user?.display_name || user?.display_name ||
user?.displayName || user?.displayName ||

2
src/app/chats/components/mediaUploader.tsx
View File

@ -29,7 +29,7 @@ export function MediaUploader({
<button <button
type="button" type="button"
onClick={() => uploadMedia()} onClick={() => uploadMedia()}
className="group inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-zinc-300 text-zinc-500 hover:bg-zinc-400 dark:bg-zinc-700 dark:text-zinc-300 dark:hover:bg-zinc-600" className="group inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-neutral-300 text-neutral-500 hover:bg-neutral-400 dark:bg-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-600"
> >
{loading ? ( {loading ? (
<LoaderIcon className="h-4 w-4 animate-spin" /> <LoaderIcon className="h-4 w-4 animate-spin" />

8
src/app/chats/components/message.tsx
View File

@ -26,15 +26,15 @@ export function ChatMessage({
className={twMerge( className={twMerge(
'my-2 w-max max-w-[400px] rounded-t-xl px-3 py-3', 'my-2 w-max max-w-[400px] rounded-t-xl px-3 py-3',
self self
? 'ml-auto rounded-l-xl bg-interor-500' ? 'ml-auto rounded-l-xl bg-blue-500'
: 'rounded-r-xl bg-zinc-200 dark:bg-zinc-800' : 'rounded-r-xl bg-neutral-200 dark:bg-neutral-800'
)} )}
> >
{!richContent ? ( {!richContent ? (
<p className="text-zinc-900 dark:text-zinc-100">Decrypting...</p> <p className="text-neutral-900 dark:text-neutral-100">Decrypting...</p>
) : ( ) : (
<div> <div>
<p className="select-text whitespace-pre-line text-zinc-900 dark:text-zinc-100"> <p className="select-text whitespace-pre-line text-neutral-900 dark:text-neutral-100">
{richContent.parsed} {richContent.parsed}
</p> </p>
<div> <div>

4
src/app/chats/index.tsx
View File

@ -33,12 +33,12 @@ export function ChatsScreen() {
return ( return (
<div className="grid h-full w-full grid-cols-3"> <div className="grid h-full w-full grid-cols-3">
<div className="scrollbar-none col-span-1 h-full overflow-y-auto border-r border-white/5"> <div className="col-span-1 h-full overflow-y-auto border-r border-white/5 scrollbar-none">
<div <div
data-tauri-drag-region data-tauri-drag-region
className="flex h-11 w-full shrink-0 items-center border-b border-white/5 px-3" className="flex h-11 w-full shrink-0 items-center border-b border-white/5 px-3"
> >
<h3 className="bg-gradient-to-r from-fuchsia-200 via-red-200 to-orange-300 bg-clip-text font-semibold text-transparent"> <h3 className="bg-gradient-to-r from-blue-200 via-red-200 to-orange-300 bg-clip-text font-semibold text-transparent">
All chats All chats
</h3> </h3>
</div> </div>

2
src/app/explore/components/groupTitle.tsx
View File

@ -10,7 +10,7 @@ export const GroupTitle = memo(function GroupTitle({ pubkey }: { pubkey: string
} }
return ( return (
<h3 className="text-sm font-semibold text-fuchsia-500">{`${ <h3 className="text-sm font-semibold text-blue-500">{`${
user.name || user.display_name user.name || user.display_name
}'s network`}</h3> }'s network`}</h3>
); );

8
src/app/explore/components/userGroupNode.tsx
View File

@ -10,15 +10,15 @@ export function UserGroupNode({ data }) {
<Handle <Handle
type="target" type="target"
position={Position.Top} position={Position.Top}
className="h-2 w-5 rounded-full border-none !bg-fuchsia-400" className="h-2 w-5 rounded-full border-none !bg-blue-400"
/> />
<div className="relative mx-3 my-3 flex flex-col gap-1"> <div className="relative mx-3 my-3 flex flex-col gap-1">
{data.title ? ( {data.title ? (
<h3 className="text-sm font-semibold text-fuchsia-500">{data.title}</h3> <h3 className="text-sm font-semibold text-blue-500">{data.title}</h3>
) : ( ) : (
<GroupTitle pubkey={data.pubkey} /> <GroupTitle pubkey={data.pubkey} />
)} )}
<div className="grid grid-cols-5 gap-6 rounded-lg border border-fuchsia-500/50 bg-interor-500/10 p-4"> <div className="grid grid-cols-5 gap-6 rounded-lg border border-blue-500/50 bg-blue-500/10 p-4">
{data.list.map((user: string) => ( {data.list.map((user: string) => (
<UserWithDrawer key={user} pubkey={user} /> <UserWithDrawer key={user} pubkey={user} />
))} ))}
@ -27,7 +27,7 @@ export function UserGroupNode({ data }) {
<Handle <Handle
type="source" type="source"
position={Position.Bottom} position={Position.Bottom}
className="h-2 w-5 rounded-full border-none !bg-fuchsia-400" className="h-2 w-5 rounded-full border-none !bg-blue-400"
/> />
</> </>
); );

6
src/app/explore/components/userWithDrawer.tsx
View File

@ -97,7 +97,7 @@ export const UserWithDrawer = memo(function UserWithDrawer({
<button <button
type="button" type="button"
onClick={() => unfollowUser(pubkey)} onClick={() => unfollowUser(pubkey)}
className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-white/10 text-sm font-medium backdrop-blur-xl hover:bg-interor-500" className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-white/10 text-sm font-medium backdrop-blur-xl hover:bg-blue-600"
> >
Unfollow Unfollow
</button> </button>
@ -105,14 +105,14 @@ export const UserWithDrawer = memo(function UserWithDrawer({
<button <button
type="button" type="button"
onClick={() => followUser(pubkey)} onClick={() => followUser(pubkey)}
className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-white/10 text-sm font-medium backdrop-blur-xl hover:bg-interor-500" className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-white/10 text-sm font-medium backdrop-blur-xl hover:bg-blue-600"
> >
Follow Follow
</button> </button>
)} )}
<Link <Link
to={`/chats/${pubkey}`} to={`/chats/${pubkey}`}
className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-white/10 text-sm font-medium backdrop-blur-xl hover:bg-interor-500" className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-white/10 text-sm font-medium backdrop-blur-xl hover:bg-blue-600"
> >
Message Message
</Link> </Link>

2
src/app/notifications/components/mention.tsx
View File

@ -16,7 +16,7 @@ export function NotiMention({ event }: { event: NDKEvent }) {
<NotiUser pubkey={event.pubkey} /> <NotiUser pubkey={event.pubkey} />
<p className="leading-none text-white/50">has mention you · {createdAt}</p> <p className="leading-none text-white/50">has mention you · {createdAt}</p>
</div> </div>
<span className="hidden text-sm font-semibold text-fuchsia-500 group-hover:block"> <span className="hidden text-sm font-semibold text-blue-500 group-hover:block">
View View
</span> </span>
</div> </div>

2
src/app/notifications/components/reaction.tsx
View File

@ -18,7 +18,7 @@ export function NotiReaction({ event }: { event: NDKEvent }) {
reacted {event.content} · {createdAt} reacted {event.content} · {createdAt}
</p> </p>
</div> </div>
<span className="hidden text-sm font-semibold text-fuchsia-500 group-hover:block"> <span className="hidden text-sm font-semibold text-blue-500 group-hover:block">
View View
</span> </span>
</div> </div>

2
src/app/notifications/components/repost.tsx
View File

@ -24,7 +24,7 @@ export function NotiRepost({ event }: { event: NDKEvent }) {
· {createdAt} · {createdAt}
</p> </p>
</div> </div>
<span className="hidden text-sm font-semibold text-fuchsia-500 group-hover:block"> <span className="hidden text-sm font-semibold text-blue-500 group-hover:block">
View View
</span> </span>
</div> </div>

2
src/app/nwc/components/alby.tsx
View File

@ -121,7 +121,7 @@ export function NWCAlby() {
<button <button
type="button" type="button"
onClick={() => initAlby()} onClick={() => initAlby()}
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"
> >
{isLoading ? ( {isLoading ? (
<> <>

2
src/app/nwc/components/other.tsx
View File

@ -139,7 +139,7 @@ export function NWCOther() {
<button <button
type="submit" type="submit"
disabled={!isDirty || !isValid} 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 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"
> >
{isLoading ? ( {isLoading ? (
<> <>

6
src/app/nwc/index.tsx
View File

@ -71,7 +71,7 @@ export function NWCScreen() {
<a <a
href="https://github.com/getAlby/nips/blob/7-wallet-connect-patch/47.md" href="https://github.com/getAlby/nips/blob/7-wallet-connect-patch/47.md"
target="_blank" target="_blank"
className="text-fuchsia-300" className="text-blue-300"
rel="noreferrer" rel="noreferrer"
> >
the specs (NIP47) the specs (NIP47)
@ -99,7 +99,7 @@ export function NWCScreen() {
href="https://www.mutinywallet.com/" href="https://www.mutinywallet.com/"
target="_blank" target="_blank"
rel="noreferrer" rel="noreferrer"
className="text-fuchsia-300" className="text-blue-300"
> >
website website
</a> </a>
@ -110,7 +110,7 @@ export function NWCScreen() {
href="https://apps.umbrel.com/app/alby-nostr-wallet-connect" href="https://apps.umbrel.com/app/alby-nostr-wallet-connect"
target="_blank" target="_blank"
rel="noreferrer" rel="noreferrer"
className="text-fuchsia-300" className="text-blue-300"
> >
website website
</a> </a>

6
src/app/relays/components/relayForm.tsx
View File

@ -40,9 +40,9 @@ export function RelayForm() {
return ( return (
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-1">
<div className="flex h-10 items-center justify-between rounded-lg bg-zinc-200 pr-1.5 dark:bg-zinc-800"> <div className="flex h-10 items-center justify-between rounded-lg bg-neutral-200 pr-1.5 dark:bg-neutral-800">
<input <input
className="h-full w-full bg-transparent pl-3 pr-1.5 text-zinc-900 placeholder:text-zinc-600 focus:outline-none dark:text-zinc-100 dark:placeholder:text-zinc-400" className="h-full w-full bg-transparent pl-3 pr-1.5 text-neutral-900 placeholder:text-neutral-600 focus:outline-none dark:text-neutral-100 dark:placeholder:text-neutral-400"
type="url" type="url"
placeholder="wss://" placeholder="wss://"
spellCheck={false} spellCheck={false}
@ -55,7 +55,7 @@ export function RelayForm() {
<button <button
type="button" type="button"
onClick={() => createRelay()} onClick={() => createRelay()}
className="inline-flex h-6 w-6 items-center justify-center rounded bg-interor-500 text-white hover:bg-interor-600" className="inline-flex h-6 w-6 items-center justify-center rounded bg-blue-500 text-white hover:bg-blue-600"
> >
<PlusIcon className="h-4 w-4" /> <PlusIcon className="h-4 w-4" />
</button> </button>

24
src/app/relays/components/relayList.tsx
View File

@ -44,32 +44,32 @@ export function RelayList() {
}; };
return ( return (
<div className="col-span-2 border-r border-zinc-100 dark:border-zinc-900"> <div className="col-span-2 border-r border-neutral-100 dark:border-neutral-900">
{status === 'loading' ? ( {status === 'loading' ? (
<div className="flex h-full w-full items-center justify-center pb-10"> <div className="flex h-full w-full items-center justify-center pb-10">
<div className="inline-flex flex-col items-center justify-center gap-2"> <div className="inline-flex flex-col items-center justify-center gap-2">
<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" />
<p>Loading relay...</p> <p>Loading relay...</p>
</div> </div>
</div> </div>
) : ( ) : (
<VList className="scrollbar-none mt-20 h-full"> <VList className="mt-20 h-full scrollbar-none">
<div className="inline-flex h-16 w-full items-center border-b border-zinc-100 px-3 dark:border-zinc-900"> <div className="inline-flex h-16 w-full items-center border-b border-neutral-100 px-3 dark:border-neutral-900">
<h3 className="bg-gradient-to-r from-fuchsia-200 via-red-200 to-orange-300 bg-clip-text font-semibold text-transparent"> <h3 className="bg-gradient-to-r from-blue-200 via-red-200 to-orange-300 bg-clip-text font-semibold text-transparent">
All relays used by your follows All relays used by your follows
</h3> </h3>
</div> </div>
{[...data].map(([key, value]) => ( {[...data].map(([key, value]) => (
<div <div
key={key} key={key}
className="flex h-14 w-full items-center justify-between border-b border-zinc-100 px-3 dark:border-zinc-900" className="flex h-14 w-full items-center justify-between border-b border-neutral-100 px-3 dark:border-neutral-900"
> >
<div className="inline-flex items-center gap-2 divide-x divide-zinc-100 dark:divide-zinc-900"> <div className="inline-flex items-center gap-2 divide-x divide-neutral-100 dark:divide-neutral-900">
<div className="inline-flex items-center gap-2"> <div className="inline-flex items-center gap-2">
<button <button
type="button" type="button"
onClick={() => inspectRelay(key)} onClick={() => inspectRelay(key)}
className="inline-flex h-6 items-center justify-center gap-1 rounded bg-zinc-200 px-1.5 text-sm font-medium text-zinc-900 hover:bg-zinc-300 dark:bg-zinc-800 dark:text-zinc-100 dark:hover:bg-zinc-700" className="inline-flex h-6 items-center justify-center gap-1 rounded bg-neutral-200 px-1.5 text-sm font-medium text-neutral-900 hover:bg-neutral-300 dark:bg-neutral-800 dark:text-neutral-100 dark:hover:bg-neutral-700"
> >
<ShareIcon className="h-3 w-3" /> <ShareIcon className="h-3 w-3" />
Inspect Inspect
@ -77,16 +77,16 @@ export function RelayList() {
<button <button
type="button" type="button"
onClick={() => connectRelay(key)} onClick={() => connectRelay(key)}
className="inline-flex h-6 w-6 items-center justify-center rounded text-zinc-900 hover:bg-zinc-200 dark:text-zinc-100 dark:hover:bg-zinc-800" className="inline-flex h-6 w-6 items-center justify-center rounded text-neutral-900 hover:bg-neutral-200 dark:text-neutral-100 dark:hover:bg-neutral-800"
> >
<PlusIcon className="h-3 w-3" /> <PlusIcon className="h-3 w-3" />
</button> </button>
</div> </div>
<div className="inline-flex items-center gap-2 pl-3"> <div className="inline-flex items-center gap-2 pl-3">
<span className="text-sm font-semibold text-zinc-500 dark:text-zinc-400"> <span className="text-sm font-semibold text-neutral-500 dark:text-neutral-400">
Relay:{' '} Relay:{' '}
</span> </span>
<span className="max-w-[200px] truncate text-sm font-medium text-zinc-900 dark:text-zinc-100"> <span className="max-w-[200px] truncate text-sm font-medium text-neutral-900 dark:text-neutral-100">
{key} {key}
</span> </span>
</div> </div>
@ -96,7 +96,7 @@ export function RelayList() {
<User key={item} pubkey={item} variant="stacked" /> <User key={item} pubkey={item} variant="stacked" />
))} ))}
{value.length > 4 ? ( {value.length > 4 ? (
<div className="inline-flex h-8 w-8 items-center justify-center rounded-full bg-zinc-200 text-zinc-900 ring-1 ring-zinc-300 dark:bg-zinc-800 dark:text-zinc-100 dark:ring-zinc-700"> <div className="inline-flex h-8 w-8 items-center justify-center rounded-full bg-neutral-200 text-neutral-900 ring-1 ring-neutral-300 dark:bg-neutral-800 dark:text-neutral-100 dark:ring-neutral-700">
<span className="text-xs font-medium">+{value.length}</span> <span className="text-xs font-medium">+{value.length}</span>
</div> </div>
) : null} ) : null}

8
src/app/relays/components/userRelay.tsx
View File

@ -34,7 +34,7 @@ export function UserRelay() {
{data.map((item) => ( {data.map((item) => (
<div <div
key={item} key={item}
className="group flex h-10 items-center justify-between rounded-lg bg-zinc-200 pl-3 pr-1.5 dark:bg-zinc-800" className="group flex h-10 items-center justify-between rounded-lg bg-neutral-200 pl-3 pr-1.5 dark:bg-neutral-800"
> >
<div className="inline-flex items-center gap-2.5"> <div className="inline-flex items-center gap-2.5">
{relayUrls.includes(item) ? ( {relayUrls.includes(item) ? (
@ -48,16 +48,16 @@ export function UserRelay() {
<span className="relative inline-flex h-2 w-2 rounded-full bg-red-500"></span> <span className="relative inline-flex h-2 w-2 rounded-full bg-red-500"></span>
</span> </span>
)} )}
<p className="max-w-[20rem] truncate text-sm font-medium text-zinc-900 dark:text-zinc-100"> <p className="max-w-[20rem] truncate text-sm font-medium text-neutral-900 dark:text-neutral-100">
{item} {item}
</p> </p>
</div> </div>
<button <button
type="button" type="button"
onClick={() => removeRelay(item)} onClick={() => removeRelay(item)}
className="hidden h-6 w-6 items-center justify-center rounded hover:bg-zinc-300 group-hover:inline-flex dark:hover:bg-zinc-700" className="hidden h-6 w-6 items-center justify-center rounded group-hover:inline-flex hover:bg-neutral-300 dark:hover:bg-neutral-700"
> >
<CancelIcon className="h-4 w-4 text-zinc-900 dark:text-zinc-100" /> <CancelIcon className="h-4 w-4 text-neutral-900 dark:text-neutral-100" />
</button> </button>
</div> </div>
))} ))}

4
src/app/relays/index.tsx
View File

@ -6,8 +6,8 @@ export function RelaysScreen() {
<div className="grid h-full w-full grid-cols-3"> <div className="grid h-full w-full grid-cols-3">
<RelayList /> <RelayList />
<div className="col-span-1"> <div className="col-span-1">
<div className="inline-flex h-16 w-full items-center border-b border-zinc-100 px-3 dark:border-zinc-900"> <div className="inline-flex h-16 w-full items-center border-b border-neutral-100 px-3 dark:border-neutral-900">
<h3 className="font-semibold text-zinc-900 dark:text-zinc-100"> <h3 className="font-semibold text-neutral-900 dark:text-neutral-100">
Connected relays Connected relays
</h3> </h3>
</div> </div>

8
src/app/relays/relay.tsx
View File

@ -79,7 +79,7 @@ export function RelayScreen() {
<a <a
href={`mailto:${resolvedRelay.contact}`} href={`mailto:${resolvedRelay.contact}`}
target="_blank" target="_blank"
className="underline after:content-['_↗'] hover:text-fuchsia-500" className="underline after:content-['_↗'] hover:text-blue-500"
rel="noreferrer" rel="noreferrer"
> >
mailto:{resolvedRelay.contact} mailto:{resolvedRelay.contact}
@ -92,7 +92,7 @@ export function RelayScreen() {
href={resolvedRelay.software} href={resolvedRelay.software}
target="_blank" target="_blank"
rel="noreferrer" rel="noreferrer"
className="underline after:content-['_↗'] hover:text-fuchsia-500" className="underline after:content-['_↗'] hover:text-blue-500"
> >
{getSoftwareName(resolvedRelay.software) + {getSoftwareName(resolvedRelay.software) +
' - ' + ' - ' +
@ -110,7 +110,7 @@ export function RelayScreen() {
href={`https://nips.be/${item}`} href={`https://nips.be/${item}`}
target="_blank" target="_blank"
rel="noreferrer" rel="noreferrer"
className="inline-flex aspect-square h-full w-full items-center justify-center rounded-lg bg-white/10 text-sm font-medium hover:bg-interor-500" className="inline-flex aspect-square h-full w-full items-center justify-center rounded-lg bg-white/10 text-sm font-medium hover:bg-blue-600"
> >
{item} {item}
</a> </a>
@ -145,7 +145,7 @@ export function RelayScreen() {
href={resolvedRelay.payments_url} href={resolvedRelay.payments_url}
target="_blank" target="_blank"
rel="noreferrer" rel="noreferrer"
className="inline-flex h-10 w-full items-center justify-center rounded-lg bg-interor-500 text-sm font-medium hover:bg-interor-600" className="inline-flex h-10 w-full items-center justify-center rounded-lg bg-blue-500 text-sm font-medium hover:bg-blue-600"
> >
Open payment website Open payment website
</a> </a>

4
src/app/settings/account.tsx
View File

@ -71,7 +71,7 @@ export function AccountSettingsScreen() {
<button <button
type="button" type="button"
onClick={() => showPrivkey()} onClick={() => showPrivkey()}
className="group absolute right-2 top-1/2 -translate-y-1/2 transform rounded p-1 hover:bg-zinc-700" className="group absolute right-2 top-1/2 -translate-y-1/2 transform rounded p-1 hover:bg-neutral-700"
> >
{privType === 'password' ? ( {privType === 'password' ? (
<EyeOffIcon <EyeOffIcon
@ -103,7 +103,7 @@ export function AccountSettingsScreen() {
<button <button
type="button" type="button"
onClick={() => showNsec()} onClick={() => showNsec()}
className="group absolute right-2 top-1/2 -translate-y-1/2 transform rounded p-1 hover:bg-zinc-700" className="group absolute right-2 top-1/2 -translate-y-1/2 transform rounded p-1 hover:bg-neutral-700"
> >
{privType === 'password' ? ( {privType === 'password' ? (
<EyeOffIcon <EyeOffIcon

2
src/app/settings/components/autoStart.tsx
View File

@ -2,7 +2,7 @@ export function AutoStartSetting() {
return ( return (
<div className="inline-flex items-center justify-between px-5 py-4"> <div className="inline-flex items-center justify-between px-5 py-4">
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-1">
<span className="font-medium leading-none text-zinc-200">Auto start</span> <span className="font-medium leading-none text-neutral-200">Auto start</span>
<span className="text-sm leading-none text-white/50">Auto start at login</span> <span className="text-sm leading-none text-white/50">Auto start at login</span>
</div> </div>
</div> </div>

6
src/app/settings/components/cacheTime.tsx
View File

@ -12,7 +12,7 @@ export function CacheTimeSetting() {
return ( return (
<div className="inline-flex items-center justify-between px-5 py-4"> <div className="inline-flex items-center justify-between px-5 py-4">
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-1">
<span className="font-medium leading-none text-zinc-200"> <span className="font-medium leading-none text-neutral-200">
Cache time (milliseconds) Cache time (milliseconds)
</span> </span>
<span className="text-sm leading-none text-white/50"> <span className="text-sm leading-none text-white/50">
@ -25,12 +25,12 @@ export function CacheTimeSetting() {
onChange={(e) => setTime(e.currentTarget.value)} onChange={(e) => setTime(e.currentTarget.value)}
autoCapitalize="none" autoCapitalize="none"
autoCorrect="none" autoCorrect="none"
className="h-8 w-24 rounded-md bg-zinc-800 px-2 text-right font-medium text-zinc-300 focus:outline-none" className="h-8 w-24 rounded-md bg-neutral-800 px-2 text-right font-medium text-neutral-300 focus:outline-none"
/> />
<button <button
type="button" type="button"
onClick={() => update()} onClick={() => update()}
className="inline-flex h-8 w-8 items-center justify-center rounded-md bg-zinc-800 font-medium hover:bg-interor-500" className="inline-flex h-8 w-8 items-center justify-center rounded-md bg-neutral-800 font-medium hover:bg-blue-600"
> >
<CheckCircleIcon className="h-4 w-4 text-white" /> <CheckCircleIcon className="h-4 w-4 text-white" />
</button> </button>

4
src/app/settings/components/dataPath.tsx
View File

@ -15,13 +15,13 @@ export function DataPath() {
return ( return (
<div className="inline-flex items-center justify-between px-5 py-4"> <div className="inline-flex items-center justify-between px-5 py-4">
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-1">
<span className="font-medium leading-none text-zinc-200">App data path</span> <span className="font-medium leading-none text-neutral-200">App data path</span>
<span className="text-sm leading-none text-white/50"> <span className="text-sm leading-none text-white/50">
Where the local data is stored Where the local data is stored
</span> </span>
</div> </div>
<div className="inline-flex items-center gap-2"> <div className="inline-flex items-center gap-2">
<span className="font-medium text-zinc-300">{path}</span> <span className="font-medium text-neutral-300">{path}</span>
</div> </div>
</div> </div>
); );

4
src/app/settings/components/version.tsx
View File

@ -15,13 +15,13 @@ export function VersionSetting() {
return ( return (
<div className="inline-flex items-center justify-between px-5 py-4"> <div className="inline-flex items-center justify-between px-5 py-4">
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-1">
<span className="font-medium leading-none text-zinc-200">Version</span> <span className="font-medium leading-none text-neutral-200">Version</span>
<span className="text-sm leading-none text-white/50"> <span className="text-sm leading-none text-white/50">
You&apos;re using latest version You&apos;re using latest version
</span> </span>
</div> </div>
<div className="inline-flex items-center gap-2"> <div className="inline-flex items-center gap-2">
<span className="font-medium text-zinc-300">{version}</span> <span className="font-medium text-neutral-300">{version}</span>
</div> </div>
</div> </div>
); );

6
src/app/space/components/toggle.tsx
View File

@ -9,17 +9,17 @@ export function ToggleWidgetList() {
const setWidget = useWidgets((state) => state.setWidget); const setWidget = useWidgets((state) => state.setWidget);
return ( return (
<div className="flex h-full w-[420px] items-center justify-center border-r border-zinc-100 dark:border-zinc-900"> <div className="flex h-full w-[420px] items-center justify-center border-r border-neutral-100 dark:border-neutral-900">
<div className="relative"> <div className="relative">
<div className="absolute -top-44 left-1/2 -translate-x-1/2 transform"> <div className="absolute -top-44 left-1/2 -translate-x-1/2 transform">
<HandArrowDownIcon className="text-zinc-100 dark:text-zinc-900" /> <HandArrowDownIcon className="text-neutral-100 dark:text-neutral-900" />
</div> </div>
<button <button
type="button" type="button"
onClick={() => onClick={() =>
setWidget(db, { kind: WidgetKinds.tmp.list, title: '', content: '' }) setWidget(db, { kind: WidgetKinds.tmp.list, title: '', content: '' })
} }
className="inline-flex h-9 items-center gap-2 rounded-full bg-zinc-200 px-3 text-zinc-900 hover:bg-zinc-300 dark:bg-zinc-800 dark:text-zinc-100 dark:hover:bg-zinc-700" className="inline-flex h-9 items-center gap-2 rounded-full bg-neutral-200 px-3 text-neutral-900 hover:bg-neutral-300 dark:bg-neutral-800 dark:text-neutral-100 dark:hover:bg-neutral-700"
> >
<PlusIcon className="h-4 w-4 text-white" /> <PlusIcon className="h-4 w-4 text-white" />
<p className="text-sm font-semibold leading-none">Add widget</p> <p className="text-sm font-semibold leading-none">Add widget</p>

50
src/app/space/components/widgetList.tsx
View File

@ -33,22 +33,34 @@ export function WidgetList({ params }: { params: Widget }) {
(kind: number) => { (kind: number) => {
switch (kind) { switch (kind) {
case WidgetKinds.tmp.xfeed: case WidgetKinds.tmp.xfeed:
return <GroupFeedsIcon className="h-5 w-5 text-zinc-900 dark:text-zinc-100" />; return (
<GroupFeedsIcon className="h-5 w-5 text-neutral-900 dark:text-neutral-100" />
);
case WidgetKinds.local.follows: case WidgetKinds.local.follows:
return <FollowsIcon className="h-5 w-5 text-zinc-900 dark:text-zinc-100" />; return (
<FollowsIcon className="h-5 w-5 text-neutral-900 dark:text-neutral-100" />
);
case WidgetKinds.local.files: case WidgetKinds.local.files:
case WidgetKinds.global.files: case WidgetKinds.global.files:
return <FileIcon className="h-5 w-5 text-zinc-900 dark:text-zinc-100" />; return <FileIcon className="h-5 w-5 text-neutral-900 dark:text-neutral-100" />;
case WidgetKinds.local.articles: case WidgetKinds.local.articles:
case WidgetKinds.global.articles: case WidgetKinds.global.articles:
return <ArticleIcon className="h-5 w-5 text-zinc-900 dark:text-zinc-100" />; return (
<ArticleIcon className="h-5 w-5 text-neutral-900 dark:text-neutral-100" />
);
case WidgetKinds.tmp.xhashtag: case WidgetKinds.tmp.xhashtag:
return <HashtagIcon className="h-5 w-4 text-zinc-900 dark:text-zinc-100" />; return (
<HashtagIcon className="h-5 w-4 text-neutral-900 dark:text-neutral-100" />
);
case WidgetKinds.nostrBand.trendingAccounts: case WidgetKinds.nostrBand.trendingAccounts:
case WidgetKinds.nostrBand.trendingNotes: case WidgetKinds.nostrBand.trendingNotes:
return <TrendingIcon className="h-5 w-4 text-zinc-900 dark:text-zinc-100" />; return (
<TrendingIcon className="h-5 w-4 text-neutral-900 dark:text-neutral-100" />
);
case WidgetKinds.other.learnNostr: case WidgetKinds.other.learnNostr:
return <ThreadsIcon className="h-5 w-4 text-zinc-900 dark:text-zinc-100" />; return (
<ThreadsIcon className="h-5 w-4 text-neutral-900 dark:text-neutral-100" />
);
default: default:
return null; return null;
} }
@ -60,15 +72,15 @@ export function WidgetList({ params }: { params: Widget }) {
(row: WidgetGroup, index: number) => { (row: WidgetGroup, index: number) => {
return ( return (
<div key={index} className="flex flex-col gap-2"> <div key={index} className="flex flex-col gap-2">
<h3 className="text-sm font-semibold text-zinc-500 dark:text-zinc-300"> <h3 className="text-sm font-semibold text-neutral-500 dark:text-neutral-300">
{row.title} {row.title}
</h3> </h3>
<div className="flex flex-col divide-y divide-zinc-200 overflow-hidden rounded-xl bg-zinc-100 dark:divide-zinc-800 dark:bg-zinc-900"> <div className="flex flex-col divide-y divide-neutral-200 overflow-hidden rounded-xl bg-neutral-100 dark:divide-neutral-800 dark:bg-neutral-900">
{row.data.map((item, index) => ( {row.data.map((item, index) => (
<button <button
onClick={() => openWidget(item)} onClick={() => openWidget(item)}
key={index} key={index}
className="group flex items-center gap-2.5 px-4 hover:bg-zinc-200 dark:hover:bg-zinc-800" className="group flex items-center gap-2.5 px-4 hover:bg-neutral-200 dark:hover:bg-neutral-800"
> >
{item.icon ? ( {item.icon ? (
<div className="h-10 w-10 shrink-0 rounded-md"> <div className="h-10 w-10 shrink-0 rounded-md">
@ -79,15 +91,15 @@ export function WidgetList({ params }: { params: Widget }) {
/> />
</div> </div>
) : ( ) : (
<div className="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-md bg-zinc-200 group-hover:bg-zinc-300 dark:bg-zinc-800 dark:group-hover:bg-zinc-700"> <div className="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-md bg-neutral-200 group-hover:bg-neutral-300 dark:bg-neutral-800 dark:group-hover:bg-neutral-700">
{renderIcon(item.kind)} {renderIcon(item.kind)}
</div> </div>
)} )}
<div className="inline-flex h-16 w-full flex-col items-start justify-center"> <div className="inline-flex h-16 w-full flex-col items-start justify-center">
<h5 className="line-clamp-1 text-sm font-medium text-zinc-900 dark:text-zinc-100"> <h5 className="line-clamp-1 text-sm font-medium text-neutral-900 dark:text-neutral-100">
{item.title} {item.title}
</h5> </h5>
<p className="line-clamp-1 text-xs text-zinc-500 dark:text-zinc-300"> <p className="line-clamp-1 text-xs text-neutral-500 dark:text-neutral-300">
{item.description} {item.description}
</p> </p>
</div> </div>
@ -101,22 +113,22 @@ export function WidgetList({ params }: { params: Widget }) {
); );
return ( return (
<div className="h-full w-[420px] border-r border-zinc-100 dark:border-zinc-900"> <div className="h-full w-[420px] border-r border-neutral-100 dark:border-neutral-900">
<TitleBar id={params.id} title="Add widget" /> <TitleBar id={params.id} title="Add widget" />
<div className="scrollbar-none h-full overflow-y-auto pb-20"> <div className="h-full overflow-y-auto pb-20 scrollbar-none">
<div className="flex flex-col gap-6 px-3"> <div className="flex flex-col gap-6 px-3">
{DefaultWidgets.map((row: WidgetGroup, index: number) => {DefaultWidgets.map((row: WidgetGroup, index: number) =>
renderItem(row, index) renderItem(row, index)
)} )}
<div className="border-t border-zinc-200 pt-6 dark:border-zinc-800"> <div className="border-t border-neutral-200 pt-6 dark:border-neutral-800">
<button <button
type="button" type="button"
disabled disabled
className="inline-flex h-14 w-full items-center justify-center gap-2.5 rounded-xl bg-zinc-100 text-sm font-medium text-zinc-900 dark:bg-zinc-900 dark:text-zinc-100" className="inline-flex h-14 w-full items-center justify-center gap-2.5 rounded-xl bg-neutral-100 text-sm font-medium text-neutral-900 dark:bg-neutral-900 dark:text-neutral-100"
> >
Build your own widget{' '} Build your own widget{' '}
<div className="-rotate-3 transform-gpu rounded-md border border-zinc-300 bg-zinc-200 px-1.5 py-1 dark:border-zinc-700 dark:bg-zinc-800"> <div className="-rotate-3 transform-gpu rounded-md border border-neutral-300 bg-neutral-200 px-1.5 py-1 dark:border-neutral-700 dark:bg-neutral-800">
<span className="bg-gradient-to-t from-fuchsia-200 via-red-200 to-orange-300 bg-clip-text text-xs text-transparent"> <span className="bg-gradient-to-t from-blue-200 via-red-200 to-orange-300 bg-clip-text text-xs text-transparent">
Coming soon Coming soon
</span> </span>
</div> </div>

4
src/app/space/index.tsx
View File

@ -86,10 +86,10 @@ export function SpaceScreen() {
return ( return (
<div className="h-full w-full"> <div className="h-full w-full">
<VList className="scrollbar-none h-full w-full" horizontal> <VList className="h-full w-full scrollbar-none" horizontal>
{!widgets ? ( {!widgets ? (
<div className="flex h-full w-full flex-col items-center justify-center"> <div className="flex h-full w-full flex-col items-center justify-center">
<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" />
</div> </div>
) : ( ) : (
widgets.map((widget) => renderItem(widget)) widgets.map((widget) => renderItem(widget))

6
src/app/splash.tsx
View File

@ -50,12 +50,12 @@ export function SplashScreen() {
}, [ndk, db.account]); }, [ndk, db.account]);
return ( return (
<div className="bg-zinc-50 dark:bg-zinc-950 relative flex h-screen w-screen items-center justify-center"> <div className="relative flex h-screen w-screen items-center justify-center bg-neutral-50 dark:bg-neutral-950">
<div data-tauri-drag-region className="absolute left-0 top-0 z-10 h-16 w-full" /> <div data-tauri-drag-region className="absolute left-0 top-0 z-10 h-16 w-full" />
<div className="flex min-h-0 w-full flex-1 items-center justify-center px-8"> <div className="flex min-h-0 w-full flex-1 items-center justify-center px-8">
<div className="flex flex-col items-center justify-center gap-6"> <div className="flex flex-col items-center justify-center gap-6">
<LoaderIcon className="text-zinc-950 dark:text-zinc-50 h-6 w-6 animate-spin" /> <LoaderIcon className="h-6 w-6 animate-spin text-neutral-950 dark:text-neutral-50" />
<h3 className="text-zinc-950 dark:text-zinc-50 text-lg font-medium leading-none"> <h3 className="text-lg font-medium leading-none text-neutral-950 dark:text-neutral-50">
{!ndk ? 'Connecting...' : 'Syncing...'} {!ndk ? 'Connecting...' : 'Syncing...'}
</h3> </h3>
</div> </div>

34
src/app/users/components/modal.tsx
View File

@ -138,7 +138,7 @@ export function EditProfileModal() {
<Dialog.Trigger asChild> <Dialog.Trigger asChild>
<button <button
type="button" type="button"
className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-zinc-200 text-sm font-medium text-zinc-900 backdrop-blur-xl hover:bg-interor-500 hover:text-zinc-100 dark:bg-zinc-800 dark:text-zinc-100 dark:hover:bg-interor-500 dark:hover:text-zinc-100" className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-neutral-200 text-sm font-medium text-neutral-900 backdrop-blur-xl hover:bg-blue-600 hover:text-neutral-100 dark:bg-neutral-800 dark:text-neutral-100 dark:hover:bg-blue-600 dark:hover:text-neutral-100"
> >
Edit profile Edit profile
</button> </button>
@ -146,13 +146,13 @@ export function EditProfileModal() {
<Dialog.Portal> <Dialog.Portal>
<Dialog.Overlay className="fixed inset-0 z-50 bg-white dark:bg-black" /> <Dialog.Overlay className="fixed inset-0 z-50 bg-white dark:bg-black" />
<Dialog.Content className="fixed inset-0 z-50 flex min-h-full items-center justify-center"> <Dialog.Content className="fixed inset-0 z-50 flex min-h-full items-center justify-center">
<div className="relative h-min w-full max-w-xl rounded-xl bg-zinc-100 dark:bg-zinc-900"> <div className="relative h-min w-full max-w-xl rounded-xl bg-neutral-100 dark:bg-neutral-900">
<div className="h-min w-full shrink-0 rounded-t-xl border-b border-zinc-200 px-5 py-5 dark:border-zinc-800"> <div className="h-min w-full shrink-0 rounded-t-xl border-b border-neutral-200 px-5 py-5 dark:border-neutral-800">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<Dialog.Title className="text-lg font-semibold leading-none text-zinc-900 dark:text-zinc-100"> <Dialog.Title className="text-lg font-semibold leading-none text-neutral-900 dark:text-neutral-100">
Edit profile Edit profile
</Dialog.Title> </Dialog.Title>
<Dialog.Close className="inline-flex h-6 w-6 items-center justify-center rounded-md text-zinc-900 hover:bg-zinc-200 dark:text-zinc-100 dark:hover:bg-zinc-800"> <Dialog.Close className="inline-flex h-6 w-6 items-center justify-center rounded-md text-neutral-900 hover:bg-neutral-200 dark:text-neutral-100 dark:hover:bg-neutral-800">
<CancelIcon className="h-4 w-4" /> <CancelIcon className="h-4 w-4" />
</Dialog.Close> </Dialog.Close>
</div> </div>
@ -181,7 +181,7 @@ export function EditProfileModal() {
<Image <Image
src={picture} src={picture}
alt="user's avatar" alt="user's avatar"
className="h-14 w-14 rounded-lg object-cover ring-2 ring-zinc-900" className="h-14 w-14 rounded-lg object-cover ring-2 ring-neutral-900"
/> />
<div className="absolute left-1/2 top-1/2 z-10 h-full w-full -translate-x-1/2 -translate-y-1/2 transform"> <div className="absolute left-1/2 top-1/2 z-10 h-full w-full -translate-x-1/2 -translate-y-1/2 transform">
<AvatarUploader setPicture={setPicture} /> <AvatarUploader setPicture={setPicture} />
@ -193,7 +193,7 @@ export function EditProfileModal() {
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-1">
<label <label
htmlFor="name" htmlFor="name"
className="text-sm font-semibold uppercase tracking-wider text-zinc-500 dark:text-zinc-400" className="text-sm font-semibold uppercase tracking-wider text-neutral-500 dark:text-neutral-400"
> >
Name Name
</label> </label>
@ -204,13 +204,13 @@ export function EditProfileModal() {
minLength: 4, minLength: 4,
})} })}
spellCheck={false} spellCheck={false}
className="relative h-11 w-full rounded-lg bg-zinc-200 px-3 py-1 text-zinc-900 !outline-none backdrop-blur-xl placeholder:text-zinc-500 dark:bg-zinc-800 dark:text-zinc-100" className="relative h-11 w-full rounded-lg bg-neutral-200 px-3 py-1 text-neutral-900 !outline-none backdrop-blur-xl placeholder:text-neutral-500 dark:bg-neutral-800 dark:text-neutral-100"
/> />
</div> </div>
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-1">
<label <label
htmlFor="nip05" htmlFor="nip05"
className="text-sm font-semibold uppercase tracking-wider text-zinc-500 dark:text-zinc-400" className="text-sm font-semibold uppercase tracking-wider text-neutral-500 dark:text-neutral-400"
> >
NIP-05 NIP-05
</label> </label>
@ -221,7 +221,7 @@ export function EditProfileModal() {
minLength: 4, minLength: 4,
})} })}
spellCheck={false} spellCheck={false}
className="relative h-11 w-full rounded-lg bg-zinc-200 px-3 py-1 text-zinc-900 !outline-none backdrop-blur-xl placeholder:text-zinc-500 dark:bg-zinc-800 dark:text-zinc-100" className="relative h-11 w-full rounded-lg bg-neutral-200 px-3 py-1 text-neutral-900 !outline-none backdrop-blur-xl placeholder:text-neutral-500 dark:bg-neutral-800 dark:text-neutral-100"
/> />
<div className="absolute right-2 top-1/2 -translate-y-1/2 transform"> <div className="absolute right-2 top-1/2 -translate-y-1/2 transform">
{nip05.verified ? ( {nip05.verified ? (
@ -246,20 +246,20 @@ export function EditProfileModal() {
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-1">
<label <label
htmlFor="about" htmlFor="about"
className="text-sm font-semibold uppercase tracking-wider text-zinc-500 dark:text-zinc-400" className="text-sm font-semibold uppercase tracking-wider text-neutral-500 dark:text-neutral-400"
> >
Bio Bio
</label> </label>
<textarea <textarea
{...register('about')} {...register('about')}
spellCheck={false} spellCheck={false}
className="relative h-20 w-full resize-none rounded-lg bg-zinc-200 px-3 py-2 text-zinc-900 !outline-none backdrop-blur-xl placeholder:text-zinc-500 dark:bg-zinc-800 dark:text-zinc-100" className="relative h-20 w-full resize-none rounded-lg bg-neutral-200 px-3 py-2 text-neutral-900 !outline-none backdrop-blur-xl placeholder:text-neutral-500 dark:bg-neutral-800 dark:text-neutral-100"
/> />
</div> </div>
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-1">
<label <label
htmlFor="website" htmlFor="website"
className="text-sm font-semibold uppercase tracking-wider text-zinc-500 dark:text-zinc-400" className="text-sm font-semibold uppercase tracking-wider text-neutral-500 dark:text-neutral-400"
> >
Website Website
</label> </label>
@ -267,13 +267,13 @@ export function EditProfileModal() {
type={'text'} type={'text'}
{...register('website', { required: false })} {...register('website', { required: false })}
spellCheck={false} spellCheck={false}
className="relative h-11 w-full rounded-lg bg-zinc-200 px-3 py-1 text-zinc-900 !outline-none backdrop-blur-xl placeholder:text-zinc-500 dark:bg-zinc-800 dark:text-zinc-100" className="relative h-11 w-full rounded-lg bg-neutral-200 px-3 py-1 text-neutral-900 !outline-none backdrop-blur-xl placeholder:text-neutral-500 dark:bg-neutral-800 dark:text-neutral-100"
/> />
</div> </div>
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-1">
<label <label
htmlFor="website" htmlFor="website"
className="text-sm font-semibold uppercase tracking-wider text-zinc-500 dark:text-zinc-400" className="text-sm font-semibold uppercase tracking-wider text-neutral-500 dark:text-neutral-400"
> >
Lightning address Lightning address
</label> </label>
@ -281,14 +281,14 @@ export function EditProfileModal() {
type={'text'} type={'text'}
{...register('lud16', { required: false })} {...register('lud16', { required: false })}
spellCheck={false} spellCheck={false}
className="relative h-11 w-full rounded-lg bg-zinc-200 px-3 py-1 text-zinc-900 !outline-none backdrop-blur-xl placeholder:text-zinc-500 dark:bg-zinc-800 dark:text-zinc-100" className="relative h-11 w-full rounded-lg bg-neutral-200 px-3 py-1 text-neutral-900 !outline-none backdrop-blur-xl placeholder:text-neutral-500 dark:bg-neutral-800 dark:text-neutral-100"
/> />
</div> </div>
<div> <div>
<button <button
type="submit" type="submit"
disabled={!isValid} disabled={!isValid}
className="inline-flex h-11 w-full transform items-center justify-center gap-1 rounded-lg bg-interor-500 font-medium text-white hover:bg-interor-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-lg bg-blue-500 font-medium text-white hover:bg-blue-600 focus:outline-none active:translate-y-1 disabled:pointer-events-none disabled:opacity-50"
> >
{loading ? ( {loading ? (
<LoaderIcon className="h-4 w-4 animate-spin text-black dark:text-white" /> <LoaderIcon className="h-4 w-4 animate-spin text-black dark:text-white" />

20
src/app/users/components/profile.tsx
View File

@ -58,36 +58,36 @@ export function UserProfile({ pubkey }: { pubkey: string }) {
className="h-full w-full object-cover" className="h-full w-full object-cover"
/> />
) : ( ) : (
<div className="h-full w-full bg-zinc-100 dark:bg-zinc-900" /> <div className="h-full w-full bg-neutral-100 dark:bg-neutral-900" />
)} )}
</div> </div>
<div className="-mt-7 flex w-full flex-col items-center px-5"> <div className="-mt-7 flex w-full flex-col items-center px-5">
<Image <Image
src={user.picture || user.image} src={user.picture || user.image}
alt={pubkey} alt={pubkey}
className="h-14 w-14 rounded-lg ring-2 ring-zinc-100 dark:ring-zinc-900" className="h-14 w-14 rounded-lg ring-2 ring-neutral-100 dark:ring-neutral-900"
/> />
<div className="mt-2 flex flex-1 flex-col gap-6"> <div className="mt-2 flex flex-1 flex-col gap-6">
<div className="flex flex-col items-center gap-1"> <div className="flex flex-col items-center gap-1">
<div className="inline-flex flex-col items-center"> <div className="inline-flex flex-col items-center">
<h5 className="text-center text-xl font-semibold text-zinc-900 dark:text-zinc-100"> <h5 className="text-center text-xl font-semibold text-neutral-900 dark:text-neutral-100">
{user.name || user.display_name || user.displayName || 'No name'} {user.name || user.display_name || user.displayName || 'No name'}
</h5> </h5>
{user.nip05 ? ( {user.nip05 ? (
<NIP05 <NIP05
pubkey={pubkey} pubkey={pubkey}
nip05={user?.nip05} nip05={user?.nip05}
className="max-w-[15rem] truncate text-sm text-zinc-500 dark:text-zinc-400" className="max-w-[15rem] truncate text-sm text-neutral-500 dark:text-neutral-400"
/> />
) : ( ) : (
<span className="max-w-[15rem] truncate text-sm text-zinc-500 dark:text-zinc-400"> <span className="max-w-[15rem] truncate text-sm text-neutral-500 dark:text-neutral-400">
{displayNpub(pubkey, 16)} {displayNpub(pubkey, 16)}
</span> </span>
)} )}
</div> </div>
<div className="flex flex-col gap-6"> <div className="flex flex-col gap-6">
{user.about || user.bio ? ( {user.about || user.bio ? (
<p className="mt-2 max-w-[500px] select-text break-words text-center text-zinc-900 dark:text-zinc-100"> <p className="mt-2 max-w-[500px] select-text break-words text-center text-neutral-900 dark:text-neutral-100">
{user.about || user.bio} {user.about || user.bio}
</p> </p>
) : ( ) : (
@ -101,7 +101,7 @@ export function UserProfile({ pubkey }: { pubkey: string }) {
<button <button
type="button" type="button"
onClick={() => unfollowUser(pubkey)} onClick={() => unfollowUser(pubkey)}
className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-zinc-200 text-sm font-medium text-zinc-900 backdrop-blur-xl hover:bg-interor-500 hover:text-zinc-100 dark:bg-zinc-800 dark:text-zinc-100 dark:hover:bg-interor-500 dark:hover:text-zinc-100" className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-neutral-200 text-sm font-medium text-neutral-900 backdrop-blur-xl hover:bg-blue-600 hover:text-neutral-100 dark:bg-neutral-800 dark:text-neutral-100 dark:hover:bg-blue-600 dark:hover:text-neutral-100"
> >
Unfollow Unfollow
</button> </button>
@ -109,20 +109,20 @@ export function UserProfile({ pubkey }: { pubkey: string }) {
<button <button
type="button" type="button"
onClick={() => followUser(pubkey)} onClick={() => followUser(pubkey)}
className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-zinc-200 text-sm font-medium text-zinc-900 backdrop-blur-xl hover:bg-interor-500 hover:text-zinc-100 dark:bg-zinc-800 dark:text-zinc-100 dark:hover:bg-interor-500 dark:hover:text-zinc-100" className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-neutral-200 text-sm font-medium text-neutral-900 backdrop-blur-xl hover:bg-blue-600 hover:text-neutral-100 dark:bg-neutral-800 dark:text-neutral-100 dark:hover:bg-blue-600 dark:hover:text-neutral-100"
> >
Follow Follow
</button> </button>
)} )}
<Link <Link
to={`/chats/${pubkey}`} to={`/chats/${pubkey}`}
className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-zinc-200 text-sm font-medium text-zinc-900 backdrop-blur-xl hover:bg-interor-500 hover:text-zinc-100 dark:bg-zinc-800 dark:text-zinc-100 dark:hover:bg-interor-500 dark:hover:text-zinc-100" className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-neutral-200 text-sm font-medium text-neutral-900 backdrop-blur-xl hover:bg-blue-600 hover:text-neutral-100 dark:bg-neutral-800 dark:text-neutral-100 dark:hover:bg-blue-600 dark:hover:text-neutral-100"
> >
Message Message
</Link> </Link>
{db.account.pubkey === pubkey && ( {db.account.pubkey === pubkey && (
<> <>
<span className="mx-2 inline-flex h-4 w-px bg-zinc-200 dark:bg-zinc-800" /> <span className="mx-2 inline-flex h-4 w-px bg-neutral-200 dark:bg-neutral-800" />
<EditProfileModal /> <EditProfileModal />
</> </>
)} )}

18
src/app/users/components/stats.tsx
View File

@ -16,7 +16,7 @@ export function UserStats({ pubkey }: { pubkey: string }) {
if (status === 'loading') { if (status === 'loading') {
return ( return (
<div className="flex w-full items-center justify-center"> <div className="flex w-full items-center justify-center">
<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" />
</div> </div>
); );
} }
@ -28,38 +28,38 @@ export function UserStats({ pubkey }: { pubkey: string }) {
return ( return (
<div className="flex w-full items-center justify-center gap-10"> <div className="flex w-full items-center justify-center gap-10">
<div className="inline-flex flex-col items-center gap-1"> <div className="inline-flex flex-col items-center 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">
{compactNumber.format(data.stats[pubkey].followers_pubkey_count) ?? 0} {compactNumber.format(data.stats[pubkey].followers_pubkey_count) ?? 0}
</span> </span>
<span className="text-sm leading-none text-zinc-500 dark:text-zinc-400"> <span className="text-sm leading-none text-neutral-500 dark:text-neutral-400">
Followers Followers
</span> </span>
</div> </div>
<div className="inline-flex flex-col items-center gap-1"> <div className="inline-flex flex-col items-center 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">
{compactNumber.format(data.stats[pubkey].pub_following_pubkey_count) ?? 0} {compactNumber.format(data.stats[pubkey].pub_following_pubkey_count) ?? 0}
</span> </span>
<span className="text-sm leading-none text-zinc-500 dark:text-zinc-400"> <span className="text-sm leading-none text-neutral-500 dark:text-neutral-400">
Following Following
</span> </span>
</div> </div>
<div className="inline-flex flex-col items-center gap-1"> <div className="inline-flex flex-col items-center 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">
{data.stats[pubkey].zaps_received {data.stats[pubkey].zaps_received
? compactNumber.format(data.stats[pubkey].zaps_received.msats / 1000) ? compactNumber.format(data.stats[pubkey].zaps_received.msats / 1000)
: 0} : 0}
</span> </span>
<span className="text-sm leading-none text-zinc-500 dark:text-zinc-400"> <span className="text-sm leading-none text-neutral-500 dark:text-neutral-400">
Zaps received Zaps received
</span> </span>
</div> </div>
<div className="inline-flex flex-col items-center gap-1"> <div className="inline-flex flex-col items-center 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">
{data.stats[pubkey].zaps_sent {data.stats[pubkey].zaps_sent
? compactNumber.format(data.stats[pubkey].zaps_sent.msats / 1000) ? compactNumber.format(data.stats[pubkey].zaps_sent.msats / 1000)
: 0} : 0}
</span> </span>
<span className="text-sm leading-none text-zinc-500 dark:text-zinc-400"> <span className="text-sm leading-none text-neutral-500 dark:text-neutral-400">
Zaps sent Zaps sent
</span> </span>
</div> </div>

6
src/app/users/index.tsx
View File

@ -68,7 +68,7 @@ export function UserScreen() {
); );
return ( return (
<div className="scrollbar-none relative h-full w-full overflow-y-auto"> <div className="relative h-full w-full overflow-y-auto scrollbar-none">
<div data-tauri-drag-region className="absolute left-0 top-0 h-11 w-full" /> <div data-tauri-drag-region className="absolute left-0 top-0 h-11 w-full" />
<UserProfile pubkey={pubkey} /> <UserProfile pubkey={pubkey} />
<div className="mt-6 h-full w-full border-t border-white/5 px-1.5"> <div className="mt-6 h-full w-full border-t border-white/5 px-1.5">
@ -84,9 +84,9 @@ export function UserScreen() {
</div> </div>
) : data.length === 0 ? ( ) : data.length === 0 ? (
<div className="px-3 py-1.5"> <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"> <div className="flex flex-col items-center gap-4">
<p className="text-center text-sm font-medium text-zinc-900 dark:text-zinc-100"> <p className="text-center text-sm font-medium text-neutral-900 dark:text-neutral-100">
User doesn&apos;t have any posts in the last 48 hours. User doesn&apos;t have any posts in the last 48 hours.
</p> </p>
</div> </div>

4
src/shared/accounts/active.tsx
View File

@ -55,14 +55,14 @@ export function ActiveAccount() {
} }
return ( return (
<div className="flex flex-col gap-1 rounded-lg bg-zinc-100 p-1 hover:bg-zinc-200 dark:bg-zinc-900 dark:hover:bg-zinc-800"> <div className="flex flex-col gap-1 rounded-lg bg-neutral-100 p-1 hover:bg-neutral-200 dark:bg-neutral-900 dark:hover:bg-neutral-800">
<Link to={`/users/${db.account.pubkey}`} className="relative inline-block"> <Link to={`/users/${db.account.pubkey}`} className="relative inline-block">
<Image <Image
src={user?.picture || user?.image} src={user?.picture || user?.image}
alt={db.account.npub} alt={db.account.npub}
className="aspect-square h-full w-full rounded-md" className="aspect-square h-full w-full rounded-md"
/> />
<span className="absolute bottom-0 right-0 block h-2 w-2 rounded-full bg-green-400 ring-2 ring-zinc-50 dark:ring-zinc-950" /> <span className="absolute bottom-0 right-0 block h-2 w-2 rounded-full bg-green-400 ring-2 ring-neutral-50 dark:ring-neutral-950" />
</Link> </Link>
<div className="inline-flex items-center justify-center rounded-md"> <div className="inline-flex items-center justify-center rounded-md">
<HorizontalDotsIcon className="h-4 w-4" /> <HorizontalDotsIcon className="h-4 w-4" />

6
src/shared/button.tsx
View File

@ -16,15 +16,15 @@ export function Button({
switch (preset) { switch (preset) {
case 'small': case 'small':
preClass = preClass =
'w-min h-9 px-4 bg-white/10 backdrop-blur-xl rounded-md text-sm font-medium text-white hover:bg-interor-500'; 'w-min h-9 px-4 bg-white/10 backdrop-blur-xl rounded-md text-sm font-medium text-white hover:bg-blue-600';
break; break;
case 'publish': case 'publish':
preClass = preClass =
'w-min h-9 px-4 bg-interor-500 rounded-md text-sm font-medium text-white hover:bg-interor-600'; 'w-min h-9 px-4 bg-blue-500 rounded-md text-sm font-medium text-white hover:bg-blue-600';
break; break;
case 'large': case 'large':
preClass = preClass =
'h-11 w-full bg-interor-500 rounded-lg font-medium text-white hover:bg-interor-600'; 'h-11 w-full bg-blue-500 rounded-lg font-medium text-white hover:bg-blue-600';
break; break;
case 'large-alt': case 'large-alt':
preClass = preClass =

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

@ -124,7 +124,7 @@ export function Composer() {
autoCorrect="off" autoCorrect="off"
autoCapitalize="off" autoCapitalize="off"
className={twMerge( className={twMerge(
'scrollbar-none markdown max-h-[500px] overflow-y-auto break-all pr-2 outline-none', 'markdown max-h-[500px] overflow-y-auto break-all pr-2 outline-none scrollbar-none',
expand ? 'min-h-[500px]' : reply.id ? 'min-h-min' : 'min-h-[120px]' expand ? 'min-h-[500px]' : reply.id ? 'min-h-min' : 'min-h-[120px]'
)} )}
/> />
@ -150,7 +150,7 @@ export function Composer() {
<button <button
onClick={() => submit()} onClick={() => submit()}
disabled={editor && editor.isEmpty} disabled={editor && editor.isEmpty}
className="inline-flex h-10 w-20 items-center justify-center rounded-lg bg-interor-500 px-2 font-semibold hover:bg-interor-600 disabled:opacity-50" className="inline-flex h-10 w-20 items-center justify-center rounded-lg bg-blue-500 px-2 font-semibold hover:bg-blue-600 disabled:opacity-50"
> >
{loading === true ? ( {loading === true ? (
<LoaderIcon className="h-5 w-5 animate-spin text-white" /> <LoaderIcon className="h-5 w-5 animate-spin text-white" />

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

@ -28,7 +28,7 @@ export function ComposerModal() {
<Dialog.Trigger asChild> <Dialog.Trigger asChild>
<button <button
type="button" type="button"
className="flex aspect-square h-full w-full items-center justify-center rounded-lg bg-zinc-300 hover:bg-interor-600 dark:bg-zinc-700 dark:hover:bg-interor-600" className="flex aspect-square h-full w-full items-center justify-center rounded-lg bg-neutral-300 hover:bg-blue-600 dark:bg-neutral-700 dark:hover:bg-blue-600"
> >
<ComposeIcon className="h-5 w-5 text-black dark:text-white" /> <ComposeIcon className="h-5 w-5 text-black dark:text-white" />
</button> </button>
@ -38,15 +38,15 @@ export function ComposerModal() {
<Dialog.Content className="fixed inset-0 z-50 flex min-h-full items-center justify-center"> <Dialog.Content className="fixed inset-0 z-50 flex min-h-full items-center justify-center">
<div <div
className={twMerge( className={twMerge(
'relative h-min w-full rounded-xl bg-zinc-100 dark:bg-zinc-900', 'relative h-min w-full rounded-xl bg-neutral-100 dark:bg-neutral-900',
expand ? 'max-w-4xl' : 'max-w-2xl' expand ? 'max-w-4xl' : 'max-w-2xl'
)} )}
> >
<div className="flex items-center justify-between px-4 py-4"> <div className="flex items-center justify-between px-4 py-4">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<ComposerUser pubkey={db.account.pubkey} /> <ComposerUser pubkey={db.account.pubkey} />
<ChevronRightIcon className="h-4 w-4 text-zinc-400 dark:text-zinc-600" /> <ChevronRightIcon className="h-4 w-4 text-neutral-400 dark:text-neutral-600" />
<div className="inline-flex h-7 w-max items-center justify-center gap-0.5 rounded bg-zinc-200 pl-3 pr-1.5 text-sm font-medium text-zinc-900 dark:bg-zinc-800 dark:text-zinc-100"> <div className="inline-flex h-7 w-max items-center justify-center gap-0.5 rounded bg-neutral-200 pl-3 pr-1.5 text-sm font-medium text-neutral-900 dark:bg-neutral-800 dark:text-neutral-100">
New Post New Post
<ChevronDownIcon className="h-4 w-4" /> <ChevronDownIcon className="h-4 w-4" />
</div> </div>
@ -55,11 +55,11 @@ export function ComposerModal() {
<button <button
type="button" type="button"
onClick={() => toggleExpand()} onClick={() => toggleExpand()}
className="inline-flex h-10 w-10 items-center justify-center rounded-lg text-zinc-400 hover:bg-zinc-200 hover:text-zinc-500 dark:text-zinc-600 dark:hover:bg-zinc-800 dark:hover:text-zinc-400" className="inline-flex h-10 w-10 items-center justify-center rounded-lg text-neutral-400 hover:bg-neutral-200 hover:text-neutral-500 dark:text-neutral-600 dark:hover:bg-neutral-800 dark:hover:text-neutral-400"
> >
<ExpandIcon className="h-5 w-5" /> <ExpandIcon className="h-5 w-5" />
</button> </button>
<Dialog.Close className="inline-flex h-10 w-10 items-center justify-center rounded-lg text-zinc-400 hover:bg-zinc-200 hover:text-zinc-500 dark:text-zinc-600 dark:hover:bg-zinc-800 dark:hover:text-zinc-400"> <Dialog.Close className="inline-flex h-10 w-10 items-center justify-center rounded-lg text-neutral-400 hover:bg-neutral-200 hover:text-neutral-500 dark:text-neutral-600 dark:hover:bg-neutral-800 dark:hover:text-neutral-400">
<CancelIcon className="h-5 w-5" /> <CancelIcon className="h-5 w-5" />
</Dialog.Close> </Dialog.Close>
</div> </div>

2
src/shared/layouts/app.tsx
View File

@ -5,7 +5,7 @@ import { Navigation } from '@shared/navigation';
export function AppLayout() { export function AppLayout() {
return ( return (
<div className="flex h-screen w-screen flex-col bg-zinc-50 dark:bg-zinc-950"> <div className="flex h-screen w-screen flex-col bg-neutral-50 dark:bg-neutral-950">
<WindowTitlebar /> <WindowTitlebar />
<div className="flex h-full min-h-0 w-full"> <div className="flex h-full min-h-0 w-full">
<div data-tauri-drag-region className="h-full w-[64px] shrink-0 pt-2"> <div data-tauri-drag-region className="h-full w-[64px] shrink-0 pt-2">

4
src/shared/layouts/auth.tsx
View File

@ -3,9 +3,9 @@ import { WindowTitlebar } from 'tauri-controls';
export function AuthLayout() { export function AuthLayout() {
return ( return (
<div className="relative h-screen w-screen bg-zinc-50 dark:bg-zinc-950"> <div className="relative h-screen w-screen bg-neutral-50 dark:bg-neutral-950">
<WindowTitlebar /> <WindowTitlebar />
<div className="bg-zinc-50 dark:bg-zinc-950"> <div className="bg-neutral-50 dark:bg-neutral-950">
<Outlet /> <Outlet />
</div> </div>
</div> </div>

6
src/shared/layouts/settings.tsx
View File

@ -8,7 +8,7 @@ export function SettingsLayout() {
<div className="flex h-screen w-screen"> <div className="flex h-screen w-screen">
<div className="relative flex h-full w-[232px] flex-col"> <div className="relative flex h-full w-[232px] flex-col">
<div data-tauri-drag-region className="h-11 w-full shrink-0" /> <div data-tauri-drag-region className="h-11 w-full shrink-0" />
<div className="scrollbar-none flex h-full flex-1 flex-col gap-2 overflow-y-auto pb-32"> <div className="flex h-full flex-1 flex-col gap-2 overflow-y-auto pb-32 scrollbar-none">
<div className="inline-flex items-center gap-2 border-l-2 border-transparent pl-4"> <div className="inline-flex items-center gap-2 border-l-2 border-transparent pl-4">
<Link <Link
to="/" to="/"
@ -27,7 +27,7 @@ export function SettingsLayout() {
twMerge( twMerge(
'flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 pl-4 pr-2', 'flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 pl-4 pr-2',
isActive isActive
? 'border-fuchsia-500 bg-white/5 text-white' ? 'border-blue-500 bg-white/5 text-white'
: 'border-transparent text-white/80' : 'border-transparent text-white/80'
) )
} }
@ -43,7 +43,7 @@ export function SettingsLayout() {
twMerge( twMerge(
'flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 pl-4 pr-2', 'flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 pl-4 pr-2',
isActive isActive
? 'border-fuchsia-500 bg-white/5 text-white' ? 'border-blue-500 bg-white/5 text-white'
: 'border-transparent text-white/80' : 'border-transparent text-white/80'
) )
} }

2
src/shared/logout.tsx
View File

@ -54,7 +54,7 @@ export function Logout() {
<button <button
type="button" type="button"
onClick={() => logout()} onClick={() => logout()}
className="inline-flex h-9 items-center justify-center rounded-md bg-white/10 px-4 text-sm font-medium leading-none text-white outline-none hover:bg-interor-500" className="inline-flex h-9 items-center justify-center rounded-md bg-white/10 px-4 text-sm font-medium leading-none text-white outline-none hover:bg-blue-600"
> >
Logout Logout
</button> </button>

2
src/shared/navigation.tsx
View File

@ -126,7 +126,7 @@ export function Navigation() {
<ComposerModal /> <ComposerModal />
<Link <Link
to="/nwc" to="/nwc"
className="flex aspect-square h-full w-full items-center justify-center rounded-lg bg-zinc-100 hover:bg-interor-600 dark:bg-zinc-900 dark:hover:bg-interor-600" className="flex aspect-square h-full w-full items-center justify-center rounded-lg bg-neutral-100 hover:bg-blue-600 dark:bg-neutral-900 dark:hover:bg-blue-600"
> >
<NwcIcon className="h-5 w-5" /> <NwcIcon className="h-5 w-5" />
</Link> </Link>

4
src/shared/notes/actions.tsx
View File

@ -45,7 +45,7 @@ export function NoteActions({
to={`/notes/text/${id}`} to={`/notes/text/${id}`}
className="group inline-flex h-7 w-7 items-center justify-center" className="group inline-flex h-7 w-7 items-center justify-center"
> >
<FocusIcon className="h-5 w-5 text-white/80 group-hover:text-fuchsia-400" /> <FocusIcon className="h-5 w-5 text-white/80 group-hover:text-blue-400" />
</Link> </Link>
</Tooltip.Trigger> </Tooltip.Trigger>
<Tooltip.Portal> <Tooltip.Portal>
@ -68,7 +68,7 @@ export function NoteActions({
} }
className="group inline-flex h-7 w-7 items-center justify-center" className="group inline-flex h-7 w-7 items-center justify-center"
> >
<ThreadIcon className="h-5 w-5 text-white/80 group-hover:text-fuchsia-400" /> <ThreadIcon className="h-5 w-5 text-white/80 group-hover:text-blue-400" />
</button> </button>
</Tooltip.Trigger> </Tooltip.Trigger>
<Tooltip.Portal> <Tooltip.Portal>

4
src/shared/notes/actions/more.tsx
View File

@ -30,9 +30,9 @@ export function MoreActions({ id, pubkey }: { id: string; pubkey: string }) {
<DropdownMenu.Trigger asChild> <DropdownMenu.Trigger asChild>
<button <button
type="button" type="button"
className="group ml-auto inline-flex h-7 w-7 items-center justify-center text-zinc-500 dark:text-zinc-300" className="group ml-auto inline-flex h-7 w-7 items-center justify-center text-neutral-500 dark:text-neutral-300"
> >
<HorizontalDotsIcon className="h-5 w-5 group-hover:text-interor-600" /> <HorizontalDotsIcon className="h-5 w-5 group-hover:text-blue-500" />
</button> </button>
</DropdownMenu.Trigger> </DropdownMenu.Trigger>
</Tooltip.Trigger> </Tooltip.Trigger>

2
src/shared/notes/actions/reaction.tsx
View File

@ -62,7 +62,7 @@ export function NoteReaction({ id, pubkey }: { id: string; pubkey: string }) {
<Popover.Trigger asChild> <Popover.Trigger asChild>
<button <button
type="button" type="button"
className="group inline-flex h-7 w-7 items-center justify-center text-zinc-500 dark:text-zinc-300" className="group inline-flex h-7 w-7 items-center justify-center text-neutral-500 dark:text-neutral-300"
> >
{reaction ? ( {reaction ? (
<img src={getReactionImage(reaction)} alt={reaction} className="h-6 w-6" /> <img src={getReactionImage(reaction)} alt={reaction} className="h-6 w-6" />

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

@ -21,7 +21,7 @@ export function NoteReply({
<button <button
type="button" type="button"
onClick={() => setReply(id, pubkey, root)} onClick={() => setReply(id, pubkey, root)}
className="group inline-flex h-7 w-7 items-center justify-center text-zinc-500 dark:text-zinc-300" className="group inline-flex h-7 w-7 items-center justify-center text-neutral-500 dark:text-neutral-300"
> >
<ReplyIcon className="h-5 w-5 group-hover:text-green-500" /> <ReplyIcon className="h-5 w-5 group-hover:text-green-500" />
</button> </button>

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

@ -44,7 +44,7 @@ export function NoteRepost({ id, pubkey }: { id: string; pubkey: string }) {
<AlertDialog.Trigger asChild> <AlertDialog.Trigger asChild>
<button <button
type="button" type="button"
className="group inline-flex h-7 w-7 items-center justify-center text-zinc-500 dark:text-zinc-300" className="group inline-flex h-7 w-7 items-center justify-center text-neutral-500 dark:text-neutral-300"
> >
<RepostIcon <RepostIcon
className={twMerge( className={twMerge(
@ -84,7 +84,7 @@ export function NoteRepost({ id, pubkey }: { id: string; pubkey: string }) {
<button <button
type="button" type="button"
onClick={() => submit()} onClick={() => submit()}
className="inline-flex h-9 w-28 items-center justify-center rounded-md bg-white/10 text-sm font-medium leading-none text-white outline-none hover:bg-interor-500" className="inline-flex h-9 w-28 items-center justify-center rounded-md bg-white/10 text-sm font-medium leading-none text-white outline-none hover:bg-blue-600"
> >
{isLoading ? ( {isLoading ? (
<LoaderIcon className="h-4 w-4 animate-spin text-white" /> <LoaderIcon className="h-4 w-4 animate-spin text-white" />

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

@ -93,7 +93,7 @@ export function NoteZap({ id, pubkey }: { id: string; pubkey: string }) {
<Dialog.Trigger asChild> <Dialog.Trigger asChild>
<button <button
type="button" type="button"
className="group inline-flex h-7 w-7 items-center justify-center text-zinc-500 dark:text-zinc-300" className="group inline-flex h-7 w-7 items-center justify-center text-neutral-500 dark:text-neutral-300"
> >
<ZapIcon className="h-5 w-5 group-hover:text-orange-400" /> <ZapIcon className="h-5 w-5 group-hover:text-orange-400" />
</button> </button>
@ -186,7 +186,7 @@ export function NoteZap({ id, pubkey }: { id: string; pubkey: string }) {
<button <button
type="button" type="button"
onClick={() => createZapRequest()} onClick={() => createZapRequest()}
className="inline-flex h-11 w-full items-center justify-center rounded-lg bg-interor-500 px-4 font-medium text-white hover:bg-interor-600" className="inline-flex h-11 w-full items-center justify-center rounded-lg bg-blue-500 px-4 font-medium text-white hover:bg-blue-600"
> >
{isCompleted ? ( {isCompleted ? (
<p>Successfully tipped</p> <p>Successfully tipped</p>
@ -210,7 +210,7 @@ export function NoteZap({ id, pubkey }: { id: string; pubkey: string }) {
<button <button
type="button" type="button"
onClick={() => createZapRequest()} onClick={() => createZapRequest()}
className="inline-flex h-11 w-full items-center justify-center rounded-lg bg-interor-500 px-4 font-medium hover:bg-interor-600" className="inline-flex h-11 w-full items-center justify-center rounded-lg bg-blue-500 px-4 font-medium hover:bg-blue-600"
> >
<p>Create Lightning invoice</p> <p>Create Lightning invoice</p>
</button> </button>

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

@ -63,7 +63,7 @@ export function ChildNote({ id, root }: { id: string; root?: string }) {
<div className="mb-1 select-text rounded-lg bg-white/5 p-1.5 text-sm"> <div className="mb-1 select-text rounded-lg bg-white/5 p-1.5 text-sm">
Lume cannot find this post with your current relays, but you can view it Lume cannot find this post with your current relays, but you can view it
via njump.me.{' '} via njump.me.{' '}
<Link to={noteLink} className="text-fuchsia-500"> <Link to={noteLink} className="text-blue-500">
Learn more Learn more
</Link> </Link>
</div> </div>

1
src/shared/notes/index.ts
View File

@ -23,5 +23,6 @@ export * from './skeleton';
export * from './actions'; export * from './actions';
export * from './mentions/hashtag'; export * from './mentions/hashtag';
export * from './mentions/boost'; export * from './mentions/boost';
export * from './mentions/invoice';
export * from './stats'; export * from './stats';
export * from './wrapper'; export * from './wrapper';

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

@ -61,7 +61,7 @@ export function FileNote(props: { event?: NDKEvent }) {
<Link <Link
to={url} to={url}
target="_blank" target="_blank"
className="break-all font-normal text-fuchsia-500 hover:text-fuchsia-600" className="break-all font-normal text-blue-500 hover:text-blue-500"
> >
{url} {url}
</Link> </Link>

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

@ -65,7 +65,7 @@ export function Repost({
<div <div
className={twMerge( className={twMerge(
'relative flex flex-col gap-1 overflow-hidden rounded-xl px-3 py-3', 'relative flex flex-col gap-1 overflow-hidden rounded-xl px-3 py-3',
!lighter ? 'bg-zinc-100 dark:bg-zinc-900' : 'bg-transparent' !lighter ? 'bg-neutral-100 dark:bg-neutral-900' : 'bg-transparent'
)} )}
> >
<User pubkey={event.pubkey} time={event.created_at} variant="repost" /> <User pubkey={event.pubkey} time={event.created_at} variant="repost" />
@ -104,7 +104,7 @@ export function Repost({
<div <div
className={twMerge( className={twMerge(
'relative overflow-hidden rounded-xl px-3 py-3', 'relative overflow-hidden rounded-xl px-3 py-3',
!lighter ? 'bg-zinc-100 dark:bg-zinc-900' : 'bg-transparent' !lighter ? 'bg-neutral-100 dark:bg-neutral-900' : 'bg-transparent'
)} )}
> >
<div className="relative flex flex-col"> <div className="relative flex flex-col">
@ -123,7 +123,7 @@ export function Repost({
<div className="mb-1 select-text rounded-lg bg-white/5 p-1.5 text-sm"> <div className="mb-1 select-text rounded-lg bg-white/5 p-1.5 text-sm">
Lume cannot find this post with your current relays, but you can view Lume cannot find this post with your current relays, but you can view
it via njump.me.{' '} it via njump.me.{' '}
<Link to={noteLink} className="text-fuchsia-500"> <Link to={noteLink} className="text-blue-500">
Learn more Learn more
</Link> </Link>
</div> </div>
@ -142,7 +142,7 @@ export function Repost({
<div <div
className={twMerge( className={twMerge(
'relative flex flex-col gap-1 overflow-hidden rounded-xl px-3 py-3', 'relative flex flex-col gap-1 overflow-hidden rounded-xl px-3 py-3',
!lighter ? 'bg-zinc-100 dark:bg-zinc-900' : 'bg-transparent' !lighter ? 'bg-neutral-100 dark:bg-neutral-900' : 'bg-transparent'
)} )}
> >
<User pubkey={event.pubkey} time={event.created_at} variant="repost" /> <User pubkey={event.pubkey} time={event.created_at} variant="repost" />

8
src/shared/notes/kinds/text.tsx
View File

@ -6,6 +6,7 @@ import {
Boost, Boost,
Hashtag, Hashtag,
ImagePreview, ImagePreview,
Invoice,
LinkPreview, LinkPreview,
MentionNote, MentionNote,
MentionUser, MentionUser,
@ -21,7 +22,7 @@ export function TextNote(props: { content?: string }) {
return ( return (
<div> <div>
<ReactMarkdown <ReactMarkdown
className="prose prose-zinc max-w-none select-text dark:prose-invert prose-headings:mb-1 prose-headings:mt-3 prose-p:mb-0 prose-p:mt-0 prose-p:last:mb-0 prose-a:font-normal prose-a:text-interor-500 hover:prose-a:text-interor-600 prose-blockquote:mb-1 prose-blockquote:mt-1 prose-blockquote:border-l-[2px] prose-blockquote:border-interor-500 prose-blockquote:pl-2 prose-pre:whitespace-pre-wrap prose-pre:break-words prose-pre:break-all prose-pre:bg-white/10 prose-ol:m-0 prose-ol:mb-1 prose-ul:mb-1 prose-ul:mt-1 prose-img:mb-2 prose-img:mt-3 prose-hr:mx-0 prose-hr:my-2" className="prose prose-neutral max-w-none select-text leading-normal dark:prose-invert prose-headings:mb-1 prose-headings:mt-3 prose-p:mb-0 prose-p:mt-0 prose-p:last:mb-0 prose-a:font-normal prose-a:text-blue-500 prose-blockquote:mb-1 prose-blockquote:mt-1 prose-blockquote:border-l-[2px] prose-blockquote:border-blue-500 prose-blockquote:pl-2 prose-pre:whitespace-pre-wrap prose-pre:break-words prose-pre:break-all prose-pre:bg-white/10 prose-ol:m-0 prose-ol:mb-1 prose-ul:mb-1 prose-ul:mt-1 prose-img:mb-2 prose-img:mt-3 prose-hr:mx-0 prose-hr:my-2 hover:prose-a:text-blue-500"
remarkPlugins={[remarkGfm]} remarkPlugins={[remarkGfm]}
disallowedElements={['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'pre', 'code']} disallowedElements={['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'pre', 'code']}
unwrapDisallowed={true} unwrapDisallowed={true}
@ -36,7 +37,7 @@ export function TextNote(props: { content?: string }) {
return ( return (
<div> <div>
<ReactMarkdown <ReactMarkdown
className="prose prose-zinc max-w-none select-text dark:prose-invert prose-headings:mb-1 prose-headings:mt-3 prose-p:mb-0 prose-p:mt-0 prose-p:last:mb-0 prose-a:font-normal prose-a:text-interor-500 hover:prose-a:text-interor-600 prose-blockquote:mb-1 prose-blockquote:mt-1 prose-blockquote:border-l-[2px] prose-blockquote:border-interor-500 prose-blockquote:pl-2 prose-pre:whitespace-pre-wrap prose-pre:break-words prose-pre:break-all prose-pre:bg-white/10 prose-ol:m-0 prose-ol:mb-1 prose-ul:mb-1 prose-ul:mt-1 prose-img:mb-2 prose-img:mt-3 prose-hr:mx-0 prose-hr:my-2" className="prose prose-neutral max-w-none select-text leading-normal dark:prose-invert prose-headings:mb-1 prose-headings:mt-3 prose-p:mb-0 prose-p:mt-0 prose-p:last:mb-0 prose-a:font-normal prose-a:text-blue-500 prose-blockquote:mb-1 prose-blockquote:mt-1 prose-blockquote:border-l-[2px] prose-blockquote:border-blue-500 prose-blockquote:pl-2 prose-pre:whitespace-pre-wrap prose-pre:break-words prose-pre:break-all prose-pre:bg-white/10 prose-ol:m-0 prose-ol:mb-1 prose-ul:mb-1 prose-ul:mt-1 prose-img:mb-2 prose-img:mt-3 prose-hr:mx-0 prose-hr:my-2 hover:prose-a:text-blue-500"
remarkPlugins={[remarkGfm]} remarkPlugins={[remarkGfm]}
components={{ components={{
a: ({ href }) => { a: ({ href }) => {
@ -60,6 +61,9 @@ export function TextNote(props: { content?: string }) {
if (key.startsWith('boost')) { if (key.startsWith('boost')) {
return <Boost boost={key.replace('boost-', '')} />; return <Boost boost={key.replace('boost-', '')} />;
} }
if (key.startsWith('lnbc')) {
return <Invoice invoice={key.replace('lnbc-', '')} />;
}
}, },
}} }}
disallowedElements={['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'pre', 'code']} disallowedElements={['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'pre', 'code']}

8
src/shared/notes/kinds/unknown.tsx
View File

@ -3,15 +3,15 @@ import { NDKEvent } from '@nostr-dev-kit/ndk';
export function UnknownNote(props: { event?: NDKEvent }) { export function UnknownNote(props: { event?: NDKEvent }) {
return ( return (
<div className="mt-2 flex w-full flex-col gap-2"> <div className="mt-2 flex w-full flex-col gap-2">
<div className="inline-flex flex-col rounded-md bg-zinc-200 px-2 py-2 dark:bg-zinc-800"> <div className="inline-flex flex-col rounded-md bg-neutral-200 px-2 py-2 dark:bg-neutral-800">
<span className="text-sm font-medium text-zinc-500 dark:text-zinc-400"> <span className="text-sm font-medium text-neutral-500 dark:text-neutral-400">
Kind: {props.event.kind} Kind: {props.event.kind}
</span> </span>
<p className="text-sm text-zinc-800 dark:text-zinc-200"> <p className="text-sm text-neutral-800 dark:text-neutral-200">
Unsupport kind on newsfeed Unsupport kind on newsfeed
</p> </p>
</div> </div>
<div className="select-text whitespace-pre-line break-all text-zinc-800 dark:text-zinc-200"> <div className="select-text whitespace-pre-line break-all text-neutral-800 dark:text-neutral-200">
<p>{props.event.content.toString()}</p> <p>{props.event.content.toString()}</p>
</div> </div>
</div> </div>

4
src/shared/notes/mentions/boost.tsx
View File

@ -1,5 +1,3 @@
export function Boost({ boost }: { boost: string }) { export function Boost({ boost }: { boost: string }) {
return ( return <span className="break-words text-blue-400 hover:text-blue-500">{boost}</span>;
<span className="break-words text-fuchsia-400 hover:text-fuchsia-500">{boost}</span>
);
} }

2
src/shared/notes/mentions/hashtag.tsx
View File

@ -24,7 +24,7 @@ export function Hashtag({ tag }: { tag: string }) {
content: tag.replace('#', ''), content: tag.replace('#', ''),
}) })
} }
className="break-all text-interor-500 hover:text-interor-600" className="break-all text-blue-500 hover:text-blue-500"
> >
{tag} {tag}
</span> </span>

9
src/shared/notes/mentions/invoice.tsx Normal file
View File

@ -0,0 +1,9 @@
import { QRCodeSVG } from 'qrcode.react';
export function Invoice({ invoice }: { invoice: string }) {
return (
<div className="mt-2 flex items-center rounded-lg bg-neutral-200 p-2 dark:bg-neutral-800">
<QRCodeSVG value={invoice} includeMargin={true} className="rounded-lg" />
</div>
);
}

2
src/shared/notes/mentions/note.tsx
View File

@ -71,7 +71,7 @@ export const MentionNote = memo(function MentionNote({ id }: { id: string }) {
<div className="mb-1 select-text rounded-lg bg-white/5 p-1.5 text-sm"> <div className="mb-1 select-text rounded-lg bg-white/5 p-1.5 text-sm">
Lume cannot find this post with your current relays, but you can view it via Lume cannot find this post with your current relays, but you can view it via
njump.me.{' '} njump.me.{' '}
<Link to={noteLink} className="text-fuchsia-500"> <Link to={noteLink} className="text-blue-500">
Learn more Learn more
</Link> </Link>
</div> </div>

2
src/shared/notes/mentions/user.tsx
View File

@ -30,7 +30,7 @@ export const MentionUser = memo(function MentionUser({ pubkey }: { pubkey: strin
content: pubkey, content: pubkey,
}) })
} }
className="break-words text-interor-500 hover:text-interor-600" className="break-words text-blue-500 hover:text-blue-500"
> >
{'@' + {'@' +
(user?.name || (user?.name ||

8
src/shared/notes/preview/link.tsx
View File

@ -31,7 +31,7 @@ export function LinkPreview({ urls }: { urls: string[] }) {
<p className="text-sm text-white/50"> <p className="text-sm text-white/50">
Can&apos;t fetch open graph, click to open webpage Can&apos;t fetch open graph, click to open webpage
</p> </p>
<span className="text-sm leading-none text-zinc-900 dark:text-zinc-100"> <span className="text-sm leading-none text-neutral-900 dark:text-neutral-100">
{domain.hostname} {domain.hostname}
</span> </span>
</div> </div>
@ -48,15 +48,15 @@ export function LinkPreview({ urls }: { urls: string[] }) {
/> />
)} )}
<div className="flex flex-col gap-1 border-t border-white/5 px-3 py-3"> <div className="flex flex-col gap-1 border-t border-white/5 px-3 py-3">
<h5 className="line-clamp-1 text-base font-semibold text-zinc-900 dark:text-zinc-100"> <h5 className="line-clamp-1 text-base font-semibold text-neutral-900 dark:text-neutral-100">
{data.title} {data.title}
</h5> </h5>
{data.description && ( {data.description && (
<p className="line-clamp-3 break-all text-sm text-zinc-500 dark:text-zinc-400"> <p className="line-clamp-3 break-all text-sm text-neutral-500 dark:text-neutral-400">
{data.description} {data.description}
</p> </p>
)} )}
<span className="mt-2.5 text-sm text-zinc-500 dark:text-zinc-400"> <span className="mt-2.5 text-sm text-neutral-500 dark:text-neutral-400">
{domain.hostname} {domain.hostname}
</span> </span>
</div> </div>

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

@ -7,7 +7,7 @@ export function Reply({ event, root }: { event: NDKEventWithReplies; root?: stri
return ( return (
<div className="relative h-min w-full"> <div className="relative h-min w-full">
{event?.replies?.length > 0 && ( {event?.replies?.length > 0 && (
<div className="absolute -left-3 top-0 h-[calc(100%-1.2rem)] w-px bg-gradient-to-t from-fuchsia-200 via-red-200 to-orange-300" /> <div className="absolute -left-3 top-0 h-[calc(100%-1.2rem)] w-px bg-gradient-to-t from-blue-200 via-red-200 to-orange-300" />
)} )}
<div className="relative z-10"> <div className="relative z-10">
<div className="relative flex flex-col"> <div className="relative flex flex-col">

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

@ -61,23 +61,23 @@ export function NoteStats({ id }: { id: string }) {
return ( return (
<div className="mt-3 flex w-full flex-wrap gap-2"> <div className="mt-3 flex w-full flex-wrap gap-2">
<div className="flex flex-1 flex-col rounded-lg bg-zinc-100 px-3 py-2 dark:bg-zinc-900"> <div className="flex flex-1 flex-col rounded-lg bg-neutral-100 px-3 py-2 dark:bg-neutral-900">
<div className="text-lg font-semibold text-zinc-900 dark:text-zinc-100"> <div className="text-lg font-semibold text-neutral-900 dark:text-neutral-100">
{compactNumber.format(data.reactions)} {compactNumber.format(data.reactions)}
</div> </div>
<div className="text-sm text-zinc-500 dark:text-zinc-300">Reactions</div> <div className="text-sm text-neutral-500 dark:text-neutral-300">Reactions</div>
</div> </div>
<div className="flex flex-1 flex-col rounded-lg bg-zinc-100 px-3 py-2 dark:bg-zinc-900"> <div className="flex flex-1 flex-col rounded-lg bg-neutral-100 px-3 py-2 dark:bg-neutral-900">
<div className="text-lg font-semibold text-zinc-900 dark:text-zinc-100"> <div className="text-lg font-semibold text-neutral-900 dark:text-neutral-100">
{compactNumber.format(data.reposts)} {compactNumber.format(data.reposts)}
</div> </div>
<div className="text-sm text-zinc-500 dark:text-zinc-300">Reposts</div> <div className="text-sm text-neutral-500 dark:text-neutral-300">Reposts</div>
</div> </div>
<div className="flex flex-1 flex-col rounded-lg bg-zinc-100 px-3 py-2 dark:bg-zinc-900"> <div className="flex flex-1 flex-col rounded-lg bg-neutral-100 px-3 py-2 dark:bg-neutral-900">
<div className="text-lg font-semibold text-zinc-900 dark:text-zinc-100"> <div className="text-lg font-semibold text-neutral-900 dark:text-neutral-100">
{compactNumber.format(data.zaps)} {compactNumber.format(data.zaps)}
</div> </div>
<div className="text-sm text-zinc-500 dark:text-zinc-300">Zaps</div> <div className="text-sm text-neutral-500 dark:text-neutral-300">Zaps</div>
</div> </div>
</div> </div>
); );

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

@ -24,7 +24,7 @@ export function NoteWrapper({
<div <div
className={twMerge( className={twMerge(
'relative overflow-hidden rounded-xl px-3 py-4', 'relative overflow-hidden rounded-xl px-3 py-4',
!lighter ? 'bg-zinc-100 dark:bg-zinc-900' : 'bg-transparent' !lighter ? 'bg-neutral-100 dark:bg-neutral-900' : 'bg-transparent'
)} )}
> >
<div className="relative">{root && <ChildNote id={root} />}</div> <div className="relative">{root && <ChildNote id={root} />}</div>

4
src/shared/titleBar.tsx
View File

@ -11,14 +11,14 @@ export function TitleBar({ id, title }: { id?: string; title: string }) {
return ( return (
<div className="flex h-11 w-full shrink-0 items-center justify-between overflow-hidden px-3"> <div className="flex h-11 w-full shrink-0 items-center justify-between overflow-hidden px-3">
<div className="w-6" /> <div className="w-6" />
<h3 className="text-sm font-medium tracking-wide text-zinc-900 dark:text-zinc-100"> <h3 className="text-sm font-medium tracking-wide text-neutral-900 dark:text-neutral-100">
{title} {title}
</h3> </h3>
{id ? ( {id ? (
<button <button
type="button" type="button"
onClick={() => remove(db, id)} onClick={() => remove(db, id)}
className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded text-zinc-900 backdrop-blur-xl hover:bg-zinc-100 dark:text-zinc-100 dark:hover:bg-zinc-900" className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded text-neutral-900 backdrop-blur-xl hover:bg-neutral-100 dark:text-neutral-100 dark:hover:bg-neutral-900"
> >
<CancelIcon className="h-3 w-3" /> <CancelIcon className="h-3 w-3" />
</button> </button>

38
src/shared/user.tsx
View File

@ -84,14 +84,14 @@ export const User = memo(function User({
</Avatar.Fallback> </Avatar.Fallback>
</Avatar.Root> </Avatar.Root>
<div className="flex flex-1 items-baseline gap-2"> <div className="flex flex-1 items-baseline gap-2">
<h5 className="max-w-[10rem] truncate font-semibold text-zinc-900 dark:text-zinc-100"> <h5 className="max-w-[10rem] truncate font-semibold text-neutral-900 dark:text-neutral-100">
{user?.name || {user?.name ||
user?.display_name || user?.display_name ||
user?.displayName || user?.displayName ||
displayNpub(pubkey, 16)} displayNpub(pubkey, 16)}
</h5> </h5>
<span className="text-zinc-500 dark:text-zinc-300">·</span> <span className="text-neutral-500 dark:text-neutral-300">·</span>
<span className="text-zinc-500 dark:text-zinc-300">{createdAt}</span> <span className="text-neutral-500 dark:text-neutral-300">{createdAt}</span>
</div> </div>
</div> </div>
); );
@ -119,7 +119,7 @@ export const User = memo(function User({
</Avatar.Root> </Avatar.Root>
<div className="flex h-full flex-col items-start justify-between"> <div className="flex h-full flex-col items-start justify-between">
<div className="flex flex-col items-start gap-1 text-start"> <div className="flex flex-col items-start gap-1 text-start">
<p className="max-w-[15rem] truncate text-lg font-semibold text-zinc-900 dark:text-zinc-100"> <p className="max-w-[15rem] truncate text-lg font-semibold text-neutral-900 dark:text-neutral-100">
{user?.name || user?.display_name || user?.displayName} {user?.name || user?.display_name || user?.displayName}
</p> </p>
<ReactMarkdown <ReactMarkdown
@ -137,7 +137,7 @@ export const User = memo(function User({
<Link <Link
to={user?.website} to={user?.website}
target="_blank" target="_blank"
className="inline-flex items-center gap-2 text-sm text-zinc-900 dark:text-zinc-100/70" className="inline-flex items-center gap-2 text-sm text-neutral-900 dark:text-neutral-100/70"
> >
<WorldIcon className="h-4 w-4" /> <WorldIcon className="h-4 w-4" />
<p className="max-w-[10rem] truncate">{user?.website}</p> <p className="max-w-[10rem] truncate">{user?.website}</p>
@ -170,10 +170,10 @@ export const User = memo(function User({
</Avatar.Fallback> </Avatar.Fallback>
</Avatar.Root> </Avatar.Root>
<div className="flex w-full flex-col items-start"> <div className="flex w-full flex-col items-start">
<h3 className="max-w-[15rem] truncate font-medium text-zinc-900 dark:text-zinc-100"> <h3 className="max-w-[15rem] truncate font-medium text-neutral-900 dark:text-neutral-100">
{user?.name || user?.display_name || user?.displayName} {user?.name || user?.display_name || user?.displayName}
</h3> </h3>
<p className="max-w-[10rem] truncate text-sm text-zinc-900 dark:text-zinc-100/70"> <p className="max-w-[10rem] truncate text-sm text-neutral-900 dark:text-neutral-100/70">
{user?.nip05 || user?.username || displayNpub(pubkey, 16)} {user?.nip05 || user?.username || displayNpub(pubkey, 16)}
</p> </p>
</div> </div>
@ -250,7 +250,7 @@ export const User = memo(function User({
</Avatar.Fallback> </Avatar.Fallback>
</Avatar.Root> </Avatar.Root>
<div className="inline-flex items-baseline gap-1"> <div className="inline-flex items-baseline gap-1">
<h5 className="max-w-[10rem] truncate font-medium text-zinc-900 dark:text-zinc-100/80"> <h5 className="max-w-[10rem] truncate font-medium text-neutral-900 dark:text-neutral-100/80">
{user?.name || {user?.name ||
user?.display_name || user?.display_name ||
user?.displayName || user?.displayName ||
@ -284,10 +284,10 @@ export const User = memo(function User({
</Avatar.Fallback> </Avatar.Fallback>
</Avatar.Root> </Avatar.Root>
<div className="flex flex-1 flex-col"> <div className="flex flex-1 flex-col">
<h5 className="max-w-[15rem] truncate font-semibold text-zinc-900 dark:text-zinc-100"> <h5 className="max-w-[15rem] truncate font-semibold text-neutral-900 dark:text-neutral-100">
{user?.name || user?.display_name || user?.displayName || 'Anon'} {user?.name || user?.display_name || user?.displayName || 'Anon'}
</h5> </h5>
<div className="inline-flex items-center gap-2 text-sm text-zinc-500 dark:text-zinc-300"> <div className="inline-flex items-center gap-2 text-sm text-neutral-500 dark:text-neutral-300">
<span>{createdAt}</span> <span>{createdAt}</span>
<span>·</span> <span>·</span>
<span>{displayNpub(pubkey, 16)}</span> <span>{displayNpub(pubkey, 16)}</span>
@ -320,19 +320,19 @@ export const User = memo(function User({
</Avatar.Root> </Avatar.Root>
</HoverCard.Trigger> </HoverCard.Trigger>
<div className="flex flex-1 items-center gap-2"> <div className="flex flex-1 items-center gap-2">
<h5 className="max-w-[15rem] truncate font-semibold text-zinc-900 dark:text-zinc-100"> <h5 className="max-w-[15rem] truncate font-semibold text-neutral-900 dark:text-neutral-100">
{user?.name || {user?.name ||
user?.display_name || user?.display_name ||
user?.displayName || user?.displayName ||
displayNpub(pubkey, 16)} displayNpub(pubkey, 16)}
</h5> </h5>
<span className="text-zinc-500 dark:text-zinc-300">·</span> <span className="text-neutral-500 dark:text-neutral-300">·</span>
<span className="text-zinc-500 dark:text-zinc-300">{createdAt}</span> <span className="text-neutral-500 dark:text-neutral-300">{createdAt}</span>
</div> </div>
</div> </div>
<HoverCard.Portal> <HoverCard.Portal>
<HoverCard.Content <HoverCard.Content
className="w-[300px] overflow-hidden rounded-xl border border-white/10 bg-white/10 backdrop-blur-3xl focus:outline-none data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade data-[side=right]:animate-slideLeftAndFade data-[side=top]:animate-slideDownAndFade data-[state=open]:transition-all" className="w-[300px] overflow-hidden rounded-xl border border-white/10 bg-white/10 backdrop-blur-3xl data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade data-[side=right]:animate-slideLeftAndFade data-[side=top]:animate-slideDownAndFade data-[state=open]:transition-all focus:outline-none"
sideOffset={5} sideOffset={5}
> >
<div className="flex gap-2.5 border-b border-white/5 px-3 py-3"> <div className="flex gap-2.5 border-b border-white/5 px-3 py-3">
@ -365,16 +365,16 @@ export const User = memo(function User({
<NIP05 <NIP05
pubkey={pubkey} pubkey={pubkey}
nip05={user?.nip05} nip05={user?.nip05}
className="max-w-[15rem] truncate text-sm text-zinc-500 dark:text-zinc-300" className="max-w-[15rem] truncate text-sm text-neutral-500 dark:text-neutral-300"
/> />
) : ( ) : (
<span className="max-w-[15rem] truncate text-sm text-zinc-500 dark:text-zinc-300"> <span className="max-w-[15rem] truncate text-sm text-neutral-500 dark:text-neutral-300">
{displayNpub(pubkey, 16)} {displayNpub(pubkey, 16)}
</span> </span>
)} )}
</div> </div>
<div> <div>
<p className="line-clamp-3 break-all text-sm leading-tight text-zinc-900 dark:text-zinc-100"> <p className="line-clamp-3 break-all text-sm leading-tight text-neutral-900 dark:text-neutral-100">
{user?.about} {user?.about}
</p> </p>
</div> </div>
@ -383,13 +383,13 @@ export const User = memo(function User({
<div className="flex items-center gap-2 px-3 py-3"> <div className="flex items-center gap-2 px-3 py-3">
<Link <Link
to={`/users/${pubkey}`} to={`/users/${pubkey}`}
className="inline-flex h-10 flex-1 items-center justify-center rounded-md bg-white/10 text-sm font-semibold backdrop-blur-xl hover:bg-interor-500" className="inline-flex h-10 flex-1 items-center justify-center rounded-md bg-white/10 text-sm font-semibold backdrop-blur-xl hover:bg-blue-600"
> >
View profile View profile
</Link> </Link>
<Link <Link
to={`/chats/${pubkey}`} to={`/chats/${pubkey}`}
className="inline-flex h-10 flex-1 items-center justify-center rounded-md bg-white/10 text-sm font-semibold backdrop-blur-xl hover:bg-interor-500" className="inline-flex h-10 flex-1 items-center justify-center rounded-md bg-white/10 text-sm font-semibold backdrop-blur-xl hover:bg-blue-600"
> >
Message Message
</Link> </Link>

6
src/shared/userProfile.tsx
View File

@ -62,7 +62,7 @@ export function UserProfile({ pubkey }: { pubkey: string }) {
<button <button
type="button" type="button"
onClick={() => unfollowUser(pubkey)} onClick={() => unfollowUser(pubkey)}
className="inline-flex h-9 w-28 items-center justify-center rounded-md bg-white/10 text-sm font-medium backdrop-blur-xl hover:bg-interor-500" className="inline-flex h-9 w-28 items-center justify-center rounded-md bg-white/10 text-sm font-medium backdrop-blur-xl hover:bg-blue-600"
> >
Unfollow Unfollow
</button> </button>
@ -70,14 +70,14 @@ export function UserProfile({ pubkey }: { pubkey: string }) {
<button <button
type="button" type="button"
onClick={() => followUser(pubkey)} onClick={() => followUser(pubkey)}
className="inline-flex h-9 w-28 items-center justify-center rounded-md bg-white/10 text-sm font-medium backdrop-blur-xl hover:bg-interor-500" className="inline-flex h-9 w-28 items-center justify-center rounded-md bg-white/10 text-sm font-medium backdrop-blur-xl hover:bg-blue-600"
> >
Follow Follow
</button> </button>
)} )}
<Link <Link
to={`/chats/${pubkey}`} to={`/chats/${pubkey}`}
className="inline-flex h-9 w-28 items-center justify-center rounded-md bg-white/10 text-sm font-medium backdrop-blur-xl hover:bg-interor-500" className="inline-flex h-9 w-28 items-center justify-center rounded-md bg-white/10 text-sm font-medium backdrop-blur-xl hover:bg-blue-600"
> >
Message Message
</Link> </Link>

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

@ -42,29 +42,29 @@ export function EventLoader({ firstTime }: { firstTime: boolean }) {
return ( return (
<div className="mb-3 px-3"> <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"> <div className="flex flex-col items-center gap-3">
{firstTime ? ( {firstTime ? (
<div> <div>
<span className="text-4xl">👋</span> <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 Hello, this is the first time you&apos;re using Lume
</h3> </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 Lume is downloading all events since the last 24 hours. It will auto
refresh when it done, please be patient refresh when it done, please be patient
</p> </p>
</div> </div>
) : ( ) : (
<div className="text-center"> <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... Downloading all events while you&apos;re away...
</h3> </h3>
</div> </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 <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" role="progressbar"
style={{ width: `${progress}%` }} 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="flex h-full w-full items-center justify-center ">
<div className="inline-flex flex-col items-center justify-center gap-2"> <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" /> <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... Loading article...
</p> </p>
</div> </div>
@ -57,17 +57,17 @@ export function GlobalArticlesWidget({ params }: { params: Widget }) {
<div className="flex flex-col items-center gap-4"> <div className="flex flex-col items-center gap-4">
<img src="/ghost.png" alt="empty feeds" className="h-16 w-16" /> <img src="/ghost.png" alt="empty feeds" className="h-16 w-16" />
<div className="text-center"> <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. Oops, it looks like there are no articles.
</h3> </h3>
<p className="text-zinc-500 dark:text-zinc-400"> <p className="text-neutral-500 dark:text-neutral-400">
You can close this widget You can close this widget
</p> </p>
</div> </div>
</div> </div>
</div> </div>
) : ( ) : (
<VList className="scrollbar-none h-full"> <VList className="h-full scrollbar-none">
{data.map((item) => renderItem(item))} {data.map((item) => renderItem(item))}
<div className="h-16" /> <div className="h-16" />
</VList> </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="flex h-full w-full items-center justify-center ">
<div className="inline-flex flex-col items-center justify-center gap-2"> <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" /> <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... Loading file sharing event...
</p> </p>
</div> </div>
@ -59,17 +59,17 @@ export function GlobalFilesWidget({ params }: { params: Widget }) {
<div className="flex flex-col items-center gap-4"> <div className="flex flex-col items-center gap-4">
<img src="/ghost.png" alt="empty feeds" className="h-16 w-16" /> <img src="/ghost.png" alt="empty feeds" className="h-16 w-16" />
<div className="text-center"> <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. Oops, it looks like there are no file sharing events.
</h3> </h3>
<p className="text-zinc-500 dark:text-zinc-400"> <p className="text-neutral-500 dark:text-neutral-400">
You can close this widget You can close this widget
</p> </p>
</div> </div>
</div> </div>
</div> </div>
) : ( ) : (
<VList className="scrollbar-none h-full"> <VList className="h-full scrollbar-none">
{data.map((item) => renderItem(item))} {data.map((item) => renderItem(item))}
<div className="h-16" /> <div className="h-16" />
</VList> </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="flex h-full w-full items-center justify-center">
<div className="inline-flex flex-col items-center justify-center gap-2"> <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" /> <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}... Loading event related to the hashtag {params.title}...
</p> </p>
</div> </div>
@ -89,17 +89,17 @@ export function GlobalHashtagWidget({ params }: { params: Widget }) {
<div className="flex flex-col items-center gap-4"> <div className="flex flex-col items-center gap-4">
<img src="/ghost.png" alt="empty feeds" className="h-16 w-16" /> <img src="/ghost.png" alt="empty feeds" className="h-16 w-16" />
<div className="text-center"> <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}. Oops, it looks like there are no events related to {params.title}.
</h3> </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 You can close this widget or try with other hashtag
</p> </p>
</div> </div>
</div> </div>
</div> </div>
) : ( ) : (
<VList className="scrollbar-none h-full"> <VList className="h-full scrollbar-none">
{data.map((item) => renderItem(item))} {data.map((item) => renderItem(item))}
<div className="h-16" /> <div className="h-16" />
</VList> </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="flex h-full w-full items-center justify-center ">
<div className="inline-flex flex-col items-center justify-center gap-2"> <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" /> <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... Loading article...
</p> </p>
</div> </div>
@ -59,38 +59,38 @@ export function LocalArticlesWidget({ params }: { params: Widget }) {
<div className="flex flex-col items-center gap-4"> <div className="flex flex-col items-center gap-4">
<img src="/ghost.png" alt="empty feeds" className="h-16 w-16" /> <img src="/ghost.png" alt="empty feeds" className="h-16 w-16" />
<div className="text-center"> <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. Oops, it looks like there are no articles.
</h3> </h3>
<p className="text-zinc-500 dark:text-zinc-400"> <p className="text-neutral-500 dark:text-neutral-400">
You can close this widget You can close this widget
</p> </p>
</div> </div>
</div> </div>
</div> </div>
) : ( ) : (
<VList className="scrollbar-none h-full"> <VList className="h-full scrollbar-none">
{dbEvents.map((item) => renderItem(item))} {dbEvents.map((item) => renderItem(item))}
<div className="flex items-center justify-center px-3 py-1.5"> <div className="flex items-center justify-center px-3 py-1.5">
{dbEvents.length > 0 ? ( {dbEvents.length > 0 ? (
<button <button
onClick={() => fetchNextPage()} onClick={() => fetchNextPage()}
disabled={!hasNextPage || isFetchingNextPage} 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 ? ( {isFetchingNextPage ? (
<> <>
<span>Loading...</span> <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 ? ( ) : 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> <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> <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="flex h-full w-full items-center justify-center">
<div className="inline-flex flex-col items-center justify-center gap-2"> <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" /> <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... Loading newsfeed...
</p> </p>
</div> </div>
@ -95,38 +95,38 @@ export function LocalFeedsWidget({ params }: { params: Widget }) {
<div className="flex flex-col items-center gap-4"> <div className="flex flex-col items-center gap-4">
<img src="/ghost.png" alt="empty feeds" className="h-16 w-16" /> <img src="/ghost.png" alt="empty feeds" className="h-16 w-16" />
<div className="text-center"> <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. Oops, it looks like there are no posts.
</h3> </h3>
<p className="text-zinc-500 dark:text-zinc-400"> <p className="text-neutral-500 dark:text-neutral-400">
You can close this widget You can close this widget
</p> </p>
</div> </div>
</div> </div>
</div> </div>
) : ( ) : (
<VList className="scrollbar-none h-full"> <VList className="h-full scrollbar-none">
{dbEvents.map((item) => renderItem(item))} {dbEvents.map((item) => renderItem(item))}
<div className="flex items-center justify-center px-3 py-1.5"> <div className="flex items-center justify-center px-3 py-1.5">
{dbEvents.length > 0 ? ( {dbEvents.length > 0 ? (
<button <button
onClick={() => fetchNextPage()} onClick={() => fetchNextPage()}
disabled={!hasNextPage || isFetchingNextPage} 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 ? ( {isFetchingNextPage ? (
<> <>
<span>Loading...</span> <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 ? ( ) : 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> <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> <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="flex h-full w-full items-center justify-center ">
<div className="inline-flex flex-col items-center justify-center gap-2"> <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" /> <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... Loading file sharing event...
</p> </p>
</div> </div>
@ -59,38 +59,38 @@ export function LocalFilesWidget({ params }: { params: Widget }) {
<div className="flex flex-col items-center gap-4"> <div className="flex flex-col items-center gap-4">
<img src="/ghost.png" alt="empty feeds" className="h-16 w-16" /> <img src="/ghost.png" alt="empty feeds" className="h-16 w-16" />
<div className="text-center"> <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. Oops, it looks like there are no file sharing events.
</h3> </h3>
<p className="text-zinc-500 dark:text-zinc-400"> <p className="text-neutral-500 dark:text-neutral-400">
You can close this widget You can close this widget
</p> </p>
</div> </div>
</div> </div>
</div> </div>
) : ( ) : (
<VList className="scrollbar-none h-full"> <VList className="h-full scrollbar-none">
{dbEvents.map((item) => renderItem(item))} {dbEvents.map((item) => renderItem(item))}
<div className="flex items-center justify-center px-3 py-1.5"> <div className="flex items-center justify-center px-3 py-1.5">
{dbEvents.length > 0 ? ( {dbEvents.length > 0 ? (
<button <button
onClick={() => fetchNextPage()} onClick={() => fetchNextPage()}
disabled={!hasNextPage || isFetchingNextPage} 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 ? ( {isFetchingNextPage ? (
<> <>
<span>Loading...</span> <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 ? ( ) : 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> <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> <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="flex h-full w-full items-center justify-center ">
<div className="inline-flex flex-col items-center justify-center gap-2"> <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" /> <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... Loading post...
</p> </p>
</div> </div>
@ -94,38 +94,38 @@ export function LocalFollowsWidget({ params }: { params: Widget }) {
<div className="flex flex-col items-center gap-4"> <div className="flex flex-col items-center gap-4">
<img src="/ghost.png" alt="empty feeds" className="h-16 w-16" /> <img src="/ghost.png" alt="empty feeds" className="h-16 w-16" />
<div className="text-center"> <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. Oops, it looks like there are no posts.
</h3> </h3>
<p className="text-zinc-500 dark:text-zinc-400"> <p className="text-neutral-500 dark:text-neutral-400">
You can close this widget You can close this widget
</p> </p>
</div> </div>
</div> </div>
</div> </div>
) : ( ) : (
<VList className="scrollbar-none h-full"> <VList className="h-full scrollbar-none">
{dbEvents.map((item) => renderItem(item))} {dbEvents.map((item) => renderItem(item))}
<div className="flex items-center justify-center px-3 py-1.5"> <div className="flex items-center justify-center px-3 py-1.5">
{dbEvents.length > 0 ? ( {dbEvents.length > 0 ? (
<button <button
onClick={() => fetchNextPage()} onClick={() => fetchNextPage()}
disabled={!hasNextPage || isFetchingNextPage} 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 ? ( {isFetchingNextPage ? (
<> <>
<span>Loading...</span> <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 ? ( ) : 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> <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> <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"> <div className="flex-1">
{status === 'loading' ? ( {status === 'loading' ? (
<div className="px-3 py-1.5"> <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 /> <NoteSkeleton />
</div> </div>
</div> </div>
) : dbEvents.length === 0 ? ( ) : dbEvents.length === 0 ? (
<EventLoader firstTime={true} /> <EventLoader firstTime={true} />
) : ( ) : (
<VList className="scrollbar-none h-full"> <VList className="h-full scrollbar-none">
{!isFetched ? <EventLoader firstTime={false} /> : null} {!isFetched ? <EventLoader firstTime={false} /> : null}
{dbEvents.map((item) => renderItem(item))} {dbEvents.map((item) => renderItem(item))}
<div className="flex items-center justify-center px-3 py-1.5"> <div className="flex items-center justify-center px-3 py-1.5">
@ -121,21 +121,21 @@ export function LocalNetworkWidget() {
<button <button
onClick={() => fetchNextPage()} onClick={() => fetchNextPage()}
disabled={!hasNextPage || isFetchingNextPage} 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 ? ( {isFetchingNextPage ? (
<> <>
<span>Loading...</span> <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 ? ( ) : 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> <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> <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 ( return (
<WidgetWrapper> <WidgetWrapper>
<TitleBar id={params.id} title={params.title} /> <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' ? ( {status === 'loading' ? (
<div className="px-3 py-1.5"> <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 /> <NoteSkeleton />
</div> </div>
</div> </div>
) : ( ) : (
<div className="h-min w-full px-3"> <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" /> <User pubkey={data.pubkey} time={data.created_at} variant="thread" />
<div className="mt-2">{renderKind(data)}</div> <div className="mt-2">{renderKind(data)}</div>
<NoteActions <NoteActions

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

@ -81,26 +81,26 @@ export function LocalUserWidget({ params }: { params: Widget }) {
return ( return (
<WidgetWrapper> <WidgetWrapper>
<TitleBar id={params.id} title={params.title} /> <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"> <div className="px-3 pt-1.5">
<UserProfile pubkey={params.content} /> <UserProfile pubkey={params.content} />
</div> </div>
<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 Latest posts
</h3> </h3>
<div className="flex h-full w-full flex-col justify-between gap-1.5 pb-10"> <div className="flex h-full w-full flex-col justify-between gap-1.5 pb-10">
{status === 'loading' ? ( {status === 'loading' ? (
<div className="px-3 py-1.5"> <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 /> <NoteSkeleton />
</div> </div>
</div> </div>
) : data.length === 0 ? ( ) : data.length === 0 ? (
<div className="px-3 py-1.5"> <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"> <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 No new post from 24 hours ago
</p> </p>
</div> </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="flex h-full w-full items-center justify-center ">
<div className="inline-flex flex-col items-center justify-center gap-2"> <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" /> <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... Loading trending accounts...
</p> </p>
</div> </div>
@ -50,14 +50,14 @@ export function TrendingAccountsWidget({ params }: { params: Widget }) {
<div className="flex flex-col items-center gap-4"> <div className="flex flex-col items-center gap-4">
<img src="/ghost.png" alt="empty feeds" className="h-16 w-16" /> <img src="/ghost.png" alt="empty feeds" className="h-16 w-16" />
<div className="text-center"> <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. Sorry, an unexpected error has occurred.
</h3> </h3>
</div> </div>
</div> </div>
</div> </div>
) : ( ) : (
<VList className="scrollbar-none h-full"> <VList className="h-full scrollbar-none">
{data.map((item: Profile) => ( {data.map((item: Profile) => (
<NostrBandUserProfile key={item.pubkey} data={item} /> <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="flex h-full w-full items-center justify-center ">
<div className="inline-flex flex-col items-center justify-center gap-2"> <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" /> <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... Loading trending posts...
</p> </p>
</div> </div>
@ -51,14 +51,14 @@ export function TrendingNotesWidget({ params }: { params: Widget }) {
<div className="flex flex-col items-center gap-4"> <div className="flex flex-col items-center gap-4">
<img src="/ghost.png" alt="empty feeds" className="h-16 w-16" /> <img src="/ghost.png" alt="empty feeds" className="h-16 w-16" />
<div className="text-center"> <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. Sorry, an unexpected error has occurred.
</h3> </h3>
</div> </div>
</div> </div>
</div> </div>
) : ( ) : (
<VList className="scrollbar-none h-full"> <VList className="h-full scrollbar-none">
{data.map((item) => ( {data.map((item) => (
<NoteWrapper key={item.event.id} event={item.event}> <NoteWrapper key={item.event.id} event={item.event}>
<TextNote content={item.event.content} /> <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) { if (!profile) {
return ( 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> <p>Can&apos;t fetch profile</p>
</div> </div>
); );
@ -73,7 +73,7 @@ export function NostrBandUserProfile({ data }: { data: Profile }) {
return ( return (
<div className="h-min w-full px-3 pb-3"> <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="flex items-center justify-between">
<div className="inline-flex items-center gap-2"> <div className="inline-flex items-center gap-2">
<Image <Image
@ -81,10 +81,10 @@ export function NostrBandUserProfile({ data }: { data: Profile }) {
className="h-11 w-11 shrink-0 rounded-lg object-cover" className="h-11 w-11 shrink-0 rounded-lg object-cover"
/> />
<div className="inline-flex flex-col"> <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} {profile.display_name || profile.name}
</h3> </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)} {profile.nip05 || shortenKey(data.pubkey)}
</p> </p>
</div> </div>
@ -94,7 +94,7 @@ export function NostrBandUserProfile({ data }: { data: Profile }) {
<button <button
type="button" type="button"
onClick={() => unfollowUser(data.pubkey)} 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" /> <UnfollowIcon className="h-4 w-4" />
</button> </button>
@ -102,7 +102,7 @@ export function NostrBandUserProfile({ data }: { data: Profile }) {
<button <button
type="button" type="button"
onClick={() => followUser(data.pubkey)} 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" /> <FollowIcon className="h-4 w-4" />
</button> </button>
@ -110,7 +110,7 @@ export function NostrBandUserProfile({ data }: { data: Profile }) {
</div> </div>
</div> </div>
<div className="mt-2"> <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} {profile.about || profile.bio}
</p> </p>
</div> </div>
@ -120,30 +120,30 @@ export function NostrBandUserProfile({ data }: { data: Profile }) {
) : ( ) : (
<div className="flex w-full items-center gap-8"> <div className="flex w-full items-center gap-8">
<div className="inline-flex flex-col gap-1"> <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} {userStats.stats[data.pubkey].followers_pubkey_count ?? 0}
</span> </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 Followers
</span> </span>
</div> </div>
<div className="inline-flex flex-col gap-1"> <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} {userStats.stats[data.pubkey].pub_following_pubkey_count ?? 0}
</span> </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 Following
</span> </span>
</div> </div>
<div className="inline-flex flex-col gap-1"> <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 {userStats.stats[data.pubkey].zaps_received
? compactNumber.format( ? compactNumber.format(
userStats.stats[data.pubkey].zaps_received.msats / 1000 userStats.stats[data.pubkey].zaps_received.msats / 1000
) )
: 0} : 0}
</span> </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 Zaps received
</span> </span>
</div> </div>

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

@ -24,10 +24,10 @@ export function LearnNostrWidget({ params }: { params: Widget }) {
return ( return (
<WidgetWrapper> <WidgetWrapper>
<TitleBar id={params.id} title="The Joy of Nostr" /> <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) => ( {resources.map((resource, index) => (
<div key={index} className="mb-6"> <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} {resource.title}
</h3> </h3>
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
@ -37,24 +37,26 @@ export function LearnNostrWidget({ params }: { params: Widget }) {
key={index} key={index}
type="button" type="button"
onClick={() => open(item.id)} 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"> <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} {item.title}
</h5> </h5>
{seens.has(item.id) ? ( {seens.has(item.id) ? (
<p className="text-sm text-green-500">Readed</p> <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> </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> </button>
)) ))
) : ( ) : (
<div className="flex h-14 items-center justify-center rounded-xl bg-zinc-100 px-3 py-3 dark:bg-zinc-900"> <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-zinc-900 dark:text-zinc-100"> <p className="text-sm font-medium text-neutral-900 dark:text-neutral-100">
More resources are coming, stay tuned. More resources are coming, stay tuned.
</p> </p>
</div> </div>

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

@ -44,7 +44,7 @@ export function XfeedsWidget({ params }: { params: Widget }) {
return ( return (
<div className="flex h-full shrink-0 grow-0 basis-[400px] flex-col items-center justify-center"> <div className="flex h-full shrink-0 grow-0 basis-[400px] flex-col items-center justify-center">
<div className="w-full px-5"> <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 Choose account you want to add to group feeds
</h3> </h3>
<div className="mb-0 flex flex-col gap-2"> <div className="mb-0 flex flex-col gap-2">
@ -53,16 +53,16 @@ export function XfeedsWidget({ params }: { params: Widget }) {
value={title} value={title}
onChange={(e) => setTitle(e.target.value)} onChange={(e) => setTitle(e.target.value)}
placeholder="Title" 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>
<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) => ( {db.account.network.map((item: string) => (
<button <button
key={item} key={item}
type="button" type="button"
onClick={() => toggleGroup(item)} 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" /> <User pubkey={item} variant="simple" />
{groups.includes(item) && ( {groups.includes(item) && (
@ -78,7 +78,7 @@ export function XfeedsWidget({ params }: { params: Widget }) {
type="submit" type="submit"
disabled={groups.length < 1} disabled={groups.length < 1}
onClick={submit} 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 className="w-5" />
<span>Add {groups.length} account to group feed</span> <span>Add {groups.length} account to group feed</span>
@ -87,7 +87,7 @@ export function XfeedsWidget({ params }: { params: Widget }) {
<button <button
type="button" type="button"
onClick={cancel} 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 Cancel
</button> </button>

Some files were not shown because too many files have changed in this diff Show More