From 976f841d0b3d32c73c1cc6225ab0c66f833781ce Mon Sep 17 00:00:00 2001 From: Kieran Date: Mon, 21 Aug 2023 14:58:57 +0100 Subject: [PATCH] Preferences page --- packages/app/public/icons.svg | 6 + packages/app/src/Element/Avatar.tsx | 12 +- packages/app/src/Element/AvatarEditor.css | 20 ++ packages/app/src/Element/AvatarEditor.tsx | 7 +- packages/app/src/Login/Functions.ts | 2 + packages/app/src/Login/MultiAccountStore.ts | 3 +- packages/app/src/Pages/DonatePage.tsx | 2 +- ...{Verification.tsx => NostrAddressPage.tsx} | 8 +- packages/app/src/Pages/Notifications.tsx | 2 +- packages/app/src/Pages/Root.tsx | 12 +- packages/app/src/Pages/SettingsPage.tsx | 54 ++--- packages/app/src/Pages/Verification.css | 3 - packages/app/src/Pages/WalletPage.tsx | 6 +- packages/app/src/Pages/ZapPool.css | 4 + packages/app/src/Pages/ZapPool.tsx | 10 +- .../app/src/Pages/new/DiscoverFollows.tsx | 5 +- packages/app/src/Pages/new/GetVerified.tsx | 2 +- packages/app/src/Pages/new/NewUserFlow.tsx | 46 ++-- packages/app/src/Pages/new/ProfileSetup.tsx | 2 +- packages/app/src/Pages/settings/Keys.css | 2 +- packages/app/src/Pages/settings/Keys.tsx | 10 +- .../app/src/Pages/settings/Preferences.css | 8 +- .../app/src/Pages/settings/Preferences.tsx | 216 ++++++++---------- packages/app/src/Pages/settings/Profile.css | 73 +++--- packages/app/src/Pages/settings/Profile.tsx | 162 ++++++------- packages/app/src/Pages/settings/RelayInfo.tsx | 2 +- packages/app/src/Pages/settings/Root.css | 41 ++-- packages/app/src/Pages/settings/Root.tsx | 105 ++++----- .../app/src/Pages/settings/WalletSettings.css | 4 +- .../app/src/Pages/settings/WalletSettings.tsx | 19 +- .../src/Pages/settings/handle/LNAddress.tsx | 2 +- .../src/Pages/settings/handle/ListHandles.tsx | 40 ++-- .../Pages/settings/handle/TransferHandle.tsx | 2 +- .../app/src/Pages/settings/wallet/Cashu.tsx | 2 +- .../app/src/Pages/settings/wallet/LNC.tsx | 2 +- .../app/src/Pages/settings/wallet/LNDHub.tsx | 2 +- .../app/src/Pages/settings/wallet/NWC.tsx | 2 +- .../Pages/subscribe/ManageSubscription.tsx | 4 +- .../src/Pages/subscribe/SubscriptionCard.tsx | 4 +- packages/app/src/Pages/subscribe/index.css | 4 +- packages/app/src/Pages/subscribe/index.tsx | 4 +- packages/app/src/SnortUtils/index.ts | 10 +- packages/app/src/Tasks/Nip5Task.tsx | 6 +- packages/app/src/index.css | 13 +- packages/app/src/index.tsx | 6 +- 45 files changed, 484 insertions(+), 467 deletions(-) create mode 100644 packages/app/src/Element/AvatarEditor.css rename packages/app/src/Pages/{Verification.tsx => NostrAddressPage.tsx} (87%) delete mode 100644 packages/app/src/Pages/Verification.css diff --git a/packages/app/public/icons.svg b/packages/app/public/icons.svg index 7bc70081..15f2acaa 100644 --- a/packages/app/public/icons.svg +++ b/packages/app/public/icons.svg @@ -292,6 +292,12 @@ + + + + + + \ No newline at end of file diff --git a/packages/app/src/Element/Avatar.tsx b/packages/app/src/Element/Avatar.tsx index a92c7fd1..73963835 100644 --- a/packages/app/src/Element/Avatar.tsx +++ b/packages/app/src/Element/Avatar.tsx @@ -11,19 +11,21 @@ interface AvatarProps { user?: UserMetadata; onClick?: () => void; size?: number; + image?: string; } -const Avatar = ({ user, size, onClick }: AvatarProps) => { +const Avatar = ({ user, size, onClick, image }: AvatarProps) => { const [url, setUrl] = useState(Nostrich); const { proxy } = useImgProxy(); useEffect(() => { - if (user?.picture) { - const url = proxy(user.picture, size ?? 120); - setUrl(url); + const url = image ?? user?.picture; + if (url) { + const proxyUrl = proxy(url, size ?? 120); + setUrl(proxyUrl); } else { setUrl(Nostrich); } - }, [user]); + }, [user, image]); const backgroundImage = `url(${url})`; const style = { "--img-url": backgroundImage } as CSSProperties; diff --git a/packages/app/src/Element/AvatarEditor.css b/packages/app/src/Element/AvatarEditor.css new file mode 100644 index 00000000..90adccbb --- /dev/null +++ b/packages/app/src/Element/AvatarEditor.css @@ -0,0 +1,20 @@ +.avatar .edit, +.banner .edit { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; + background-color: var(--bg-color); + cursor: pointer; + opacity: 0; + border-radius: 100%; +} + +.avatar .edit.new { + opacity: 0.5; +} + +.avatar .edit:hover { + opacity: 0.5; +} diff --git a/packages/app/src/Element/AvatarEditor.tsx b/packages/app/src/Element/AvatarEditor.tsx index b7b5776a..63f88af5 100644 --- a/packages/app/src/Element/AvatarEditor.tsx +++ b/packages/app/src/Element/AvatarEditor.tsx @@ -1,7 +1,9 @@ +import "./AvatarEditor.css"; import Icon from "Icons/Icon"; import { useState } from "react"; import useFileUpload from "Upload"; import { openFile, unwrap } from "SnortUtils"; +import Spinner from "Icons/Spinner"; interface AvatarEditorProps { picture?: string; @@ -11,9 +13,11 @@ interface AvatarEditorProps { export default function AvatarEditor({ picture, onPictureChange }: AvatarEditorProps) { const uploader = useFileUpload(); const [error, setError] = useState(""); + const [loading, setLoading] = useState(false); async function uploadFile() { setError(""); + setLoading(true); try { const f = await openFile(); if (f) { @@ -32,6 +36,7 @@ export default function AvatarEditor({ picture, onPictureChange }: AvatarEditorP setError(`Upload failed`); } } + setLoading(false); } return ( @@ -39,7 +44,7 @@ export default function AvatarEditor({ picture, onPictureChange }: AvatarEditorP
uploadFile().catch(console.error)}> - + {loading ? : }
diff --git a/packages/app/src/Login/Functions.ts b/packages/app/src/Login/Functions.ts index 42ce7152..16a924c6 100644 --- a/packages/app/src/Login/Functions.ts +++ b/packages/app/src/Login/Functions.ts @@ -41,6 +41,8 @@ export function updatePreferences(state: LoginSession, p: UserPreferences) { export function logout(k: HexKey) { LoginStore.removeSession(k); + //TODO: delete giftwarps for:k + //TODO: delete notifications for:k } export function markNotificationsRead(state: LoginSession) { diff --git a/packages/app/src/Login/MultiAccountStore.ts b/packages/app/src/Login/MultiAccountStore.ts index a9ec7c81..6f5a6248 100644 --- a/packages/app/src/Login/MultiAccountStore.ts +++ b/packages/app/src/Login/MultiAccountStore.ts @@ -158,6 +158,7 @@ export class MultiAccountStore extends ExternalStore { const pk = unwrap(s.publicKey); if (this.#accounts.has(pk)) { this.#accounts.set(pk, s); + console.debug("SET SESSION", s); this.#save(); } } @@ -175,7 +176,7 @@ export class MultiAccountStore extends ExternalStore { const s = this.#activeAccount ? this.#accounts.get(this.#activeAccount) : undefined; if (!s) return LoggedOut; - return s; + return { ...s }; } #createPublisher(l: LoginSession) { diff --git a/packages/app/src/Pages/DonatePage.tsx b/packages/app/src/Pages/DonatePage.tsx index 64517db8..df7d7897 100644 --- a/packages/app/src/Pages/DonatePage.tsx +++ b/packages/app/src/Pages/DonatePage.tsx @@ -74,7 +74,7 @@ const DonatePage = () => { } return ( -
+

diff --git a/packages/app/src/Pages/Verification.tsx b/packages/app/src/Pages/NostrAddressPage.tsx similarity index 87% rename from packages/app/src/Pages/Verification.tsx rename to packages/app/src/Pages/NostrAddressPage.tsx index 158a0889..96c2436c 100644 --- a/packages/app/src/Pages/Verification.tsx +++ b/packages/app/src/Pages/NostrAddressPage.tsx @@ -5,8 +5,6 @@ import Nip5Service from "Element/Nip5Service"; import messages from "./messages"; -import "./Verification.css"; - export const SnortNostrAddressService = { name: "Snort", service: `${ApiHost}/api/v1/n5sp`, @@ -26,11 +24,11 @@ export const Nip5Services = [ }, ]; -export default function VerificationPage() { +export default function NostrAddressPage() { return ( -
+

- +

diff --git a/packages/app/src/Pages/Notifications.tsx b/packages/app/src/Pages/Notifications.tsx index 1bd77d0b..13633a57 100644 --- a/packages/app/src/Pages/Notifications.tsx +++ b/packages/app/src/Pages/Notifications.tsx @@ -86,7 +86,7 @@ export default function NotificationsPage() { const timeGrouped = useMemo(() => { return orderDescending([...notifications]) - .filter(a => !isMuted(a.pubkey)) + .filter(a => !isMuted(a.pubkey) && findTag(a, "p") === login.publicKey) .reduce((acc, v) => { const key = `${timeKey(v)}:${notificationContext(v as TaggedRawEvent)?.encode()}:${v.kind}`; if (acc.has(key)) { diff --git a/packages/app/src/Pages/Root.tsx b/packages/app/src/Pages/Root.tsx index 9fd13325..831fe3eb 100644 --- a/packages/app/src/Pages/Root.tsx +++ b/packages/app/src/Pages/Root.tsx @@ -333,11 +333,19 @@ export const RootRoutes = [ }, { path: "trending/people", - element: , + element: ( +

+ +
+ ), }, { path: "suggested", - element: , + element: ( +
+ +
+ ), }, { path: "/t/:tag", diff --git a/packages/app/src/Pages/SettingsPage.tsx b/packages/app/src/Pages/SettingsPage.tsx index 0dbe3a2a..9a1f6069 100644 --- a/packages/app/src/Pages/SettingsPage.tsx +++ b/packages/app/src/Pages/SettingsPage.tsx @@ -29,31 +29,33 @@ export const SettingsRoutes: RouteObject[] = [ { path: "", element: , + children: [ + { + path: "profile", + element: , + }, + { + path: "relays", + element: , + }, + { + path: "relays/:id", + element: , + }, + { + path: "preferences", + element: , + }, + { + path: "accounts", + element: , + }, + { + path: "keys", + element: , + }, + ...ManageHandleRoutes, + ...WalletSettingsRoutes, + ], }, - { - path: "profile", - element: , - }, - { - path: "relays", - element: , - }, - { - path: "relays/:id", - element: , - }, - { - path: "preferences", - element: , - }, - { - path: "accounts", - element: , - }, - { - path: "keys", - element: , - }, - ...ManageHandleRoutes, - ...WalletSettingsRoutes, ]; diff --git a/packages/app/src/Pages/Verification.css b/packages/app/src/Pages/Verification.css deleted file mode 100644 index 2e075c01..00000000 --- a/packages/app/src/Pages/Verification.css +++ /dev/null @@ -1,3 +0,0 @@ -.verification a { - color: var(--highlight); -} diff --git a/packages/app/src/Pages/WalletPage.tsx b/packages/app/src/Pages/WalletPage.tsx index e6ca2f92..8364f95c 100644 --- a/packages/app/src/Pages/WalletPage.tsx +++ b/packages/app/src/Pages/WalletPage.tsx @@ -204,15 +204,11 @@ export default function WalletPage() { } return ( -
+
{error && {error}} {walletList()} {unlockWallet()} {walletInfo()} - -
); } diff --git a/packages/app/src/Pages/ZapPool.css b/packages/app/src/Pages/ZapPool.css index 611dfd07..124c0d6f 100644 --- a/packages/app/src/Pages/ZapPool.css +++ b/packages/app/src/Pages/ZapPool.css @@ -1,3 +1,7 @@ .zap-pool input[type="range"] { width: 200px; } + +.zap-pool h4 { + margin: 0; +} diff --git a/packages/app/src/Pages/ZapPool.tsx b/packages/app/src/Pages/ZapPool.tsx index b600d1b8..53ae5fd1 100644 --- a/packages/app/src/Pages/ZapPool.tsx +++ b/packages/app/src/Pages/ZapPool.tsx @@ -92,7 +92,7 @@ export default function ZapPoolPage() { const sumPending = zapPool.reduce((acc, v) => acc + v.sum, 0); return ( -
+

@@ -150,7 +150,7 @@ export default function ZapPoolPage() { )}

-
+
b.pubkey === bech32ToHex(SnortPubKey) && b.type === ZapPoolRecipientType.Generic) ?? { @@ -166,7 +166,7 @@ export default function ZapPoolPage() { {relayConnections.map(a => ( -
+

{getRelayName(a.address)}

{UploaderServices.map(a => ( -
+

{a.name}

{DataProviders.map(a => ( -
+

{a.name}

+
@@ -45,6 +45,9 @@ export default function DiscoverFollows() { {sortedReccomends.length > 0 && } +

+ +

); diff --git a/packages/app/src/Pages/new/GetVerified.tsx b/packages/app/src/Pages/new/GetVerified.tsx index e05812da..5f317bfc 100644 --- a/packages/app/src/Pages/new/GetVerified.tsx +++ b/packages/app/src/Pages/new/GetVerified.tsx @@ -4,7 +4,7 @@ import { useNavigate } from "react-router-dom"; import { useUserProfile } from "@snort/system-react"; import Logo from "Element/Logo"; -import { Nip5Services } from "Pages/Verification"; +import { Nip5Services } from "Pages/NostrAddressPage"; import Nip5Service from "Element/Nip5Service"; import ProfileImage from "Element/ProfileImage"; import useLogin from "Hooks/useLogin"; diff --git a/packages/app/src/Pages/new/NewUserFlow.tsx b/packages/app/src/Pages/new/NewUserFlow.tsx index 07ad76c7..465a4d0a 100644 --- a/packages/app/src/Pages/new/NewUserFlow.tsx +++ b/packages/app/src/Pages/new/NewUserFlow.tsx @@ -90,7 +90,7 @@ export default function NewUserFlow() { const navigate = useNavigate(); return ( -
+
@@ -98,31 +98,25 @@ export default function NewUserFlow() {

-
-
-
- -
-
-
- -
+
+ +

diff --git a/packages/app/src/Pages/new/ProfileSetup.tsx b/packages/app/src/Pages/new/ProfileSetup.tsx index 0440efd8..5ff09f03 100644 --- a/packages/app/src/Pages/new/ProfileSetup.tsx +++ b/packages/app/src/Pages/new/ProfileSetup.tsx @@ -47,7 +47,7 @@ export default function ProfileSetup() { }; return ( -

+
diff --git a/packages/app/src/Pages/settings/Keys.css b/packages/app/src/Pages/settings/Keys.css index 49e8791e..5d5b7172 100644 --- a/packages/app/src/Pages/settings/Keys.css +++ b/packages/app/src/Pages/settings/Keys.css @@ -1,4 +1,4 @@ -.export-keys > .copy { +.copy.dashed { padding: 12px 16px; border: 2px dashed #222222; border-radius: 16px; diff --git a/packages/app/src/Pages/settings/Keys.tsx b/packages/app/src/Pages/settings/Keys.tsx index 00958e95..a678ffec 100644 --- a/packages/app/src/Pages/settings/Keys.tsx +++ b/packages/app/src/Pages/settings/Keys.tsx @@ -10,18 +10,18 @@ import { hexToBech32 } from "SnortUtils"; export default function ExportKeys() { const { publicKey, privateKey, generatedEntropy } = useLogin(); return ( -
+

- - + + {privateKey && ( <>

- + )} {generatedEntropy && ( @@ -29,7 +29,7 @@ export default function ExportKeys() {

- + )}
diff --git a/packages/app/src/Pages/settings/Preferences.css b/packages/app/src/Pages/settings/Preferences.css index 0faaa21c..4c6af107 100644 --- a/packages/app/src/Pages/settings/Preferences.css +++ b/packages/app/src/Pages/settings/Preferences.css @@ -1,8 +1,14 @@ .preferences small { - margin-top: 0.5em; color: var(--font-secondary-color); } .preferences select { min-width: 100px; } + +.preferences h4 { + margin: 0; + font-size: 16px; + font-weight: 600; + line-height: 22px; /* 137.5% */ +} diff --git a/packages/app/src/Pages/settings/Preferences.tsx b/packages/app/src/Pages/settings/Preferences.tsx index 6ea3faa9..da9e61cc 100644 --- a/packages/app/src/Pages/settings/Preferences.tsx +++ b/packages/app/src/Pages/settings/Preferences.tsx @@ -32,6 +32,7 @@ export const AllLanguageCodes = [ const PreferencesPage = () => { const { formatMessage } = useIntl(); const login = useLogin(); + console.debug(login); const perf = login.preferences; const [emoji, setEmoji] = useState>([]); @@ -42,17 +43,15 @@ const PreferencesPage = () => { }, []); return ( -
+

-
-
-
- -
-
+
+

+ +

-
-
-
- -
-
+
+

+ +

-
-
-
- -
-
+
+

+ +

-
-
-
+
+
+

-

+ -
+
{ />
-
-
-
+
+
+

-

+ @@ -207,12 +201,12 @@ const PreferencesPage = () => { />
-
-
-
-
+
+
+
+

-

+ @@ -231,7 +225,7 @@ const PreferencesPage = () => {
{perf.imgProxyConfig && ( -
+
@@ -307,11 +301,11 @@ const PreferencesPage = () => {
)}
-
-
-
+
+
+

-

+ @@ -324,43 +318,39 @@ const PreferencesPage = () => { />
-
-
-
- -
- - - -
- + updatePreferences(login, { + ...perf, + reactionEmoji: e.target.value, + }) + }> + + {emoji.map(({ name, char }) => { + return ( + - {emoji.map(({ name, char }) => { - return ( - - ); - })} - -
-
+ ); + })} +
-
-
-
+
+
+

-

+ @@ -373,11 +363,11 @@ const PreferencesPage = () => { />
-
-
-
+
+
+

-

+ @@ -390,37 +380,33 @@ const PreferencesPage = () => { />
-
-
-
- -
- - - -
- -
-
+
+

+ +

+ + + +
-
-
-
+
+
+

-

+ diff --git a/packages/app/src/Pages/settings/Profile.css b/packages/app/src/Pages/settings/Profile.css index 5e86ff7f..e83c25f7 100644 --- a/packages/app/src/Pages/settings/Profile.css +++ b/packages/app/src/Pages/settings/Profile.css @@ -1,53 +1,51 @@ +.settings h4 { + font-size: 16px; + font-weight: 600; + margin: 0; +} + .settings .avatar { - width: 256px; - height: 256px; + width: 64px; + height: 64px; background-size: cover; border-radius: 100%; - cursor: pointer; - margin-bottom: 20px; } .settings .banner { - width: 300px; - height: 150px; + width: 100%; + height: 100%; background-size: cover; - margin-bottom: 20px; + border-radius: 12px; } .settings .image-settings { - display: block; - align-items: center; - justify-content: center; -} - -.settings .image-setting { - display: flex; - justify-content: space-between; -} - -.settings .image-setting > div:first-child { - align-self: center; -} - -.avatar .edit, -.banner .edit { - display: flex; - align-items: center; - justify-content: center; + position: relative; width: 100%; - height: 100%; - background-color: var(--bg-color); - cursor: pointer; - opacity: 0; - border-radius: 100%; + height: 145px; + margin-block-end: 45px; } -.avatar .edit.new { - opacity: 0.5; +.settings .image-settings > div { + position: absolute; } -.avatar .edit:hover { - opacity: 0.5; +.settings .image-settings .avatar-stack { + bottom: -32px; +} + +.settings .image-settings .avatar-stack .btn-rnd { + position: absolute; + padding: 0; + width: 32px; + height: 32px; + right: -10px; + bottom: -10px; +} + +.settings .image-settings .banner button { + right: 16px; + top: 12px; + position: absolute; } .settings .editor textarea { @@ -59,3 +57,8 @@ .settings .actions { margin-top: 16px; } + +.settings small { + font-size: 14px; + color: var(--font-secondary-color); +} diff --git a/packages/app/src/Pages/settings/Profile.tsx b/packages/app/src/Pages/settings/Profile.tsx index 0fcb459c..1edd3080 100644 --- a/packages/app/src/Pages/settings/Profile.tsx +++ b/packages/app/src/Pages/settings/Profile.tsx @@ -13,10 +13,8 @@ import useFileUpload from "Upload"; import AsyncButton from "Element/AsyncButton"; import { UserCache } from "Cache"; import useLogin from "Hooks/useLogin"; -import AvatarEditor from "Element/AvatarEditor"; import Icon from "Icons/Icon"; - -import messages from "./messages"; +import Avatar from "Element/Avatar"; export interface ProfileSettingsProps { avatar?: boolean; @@ -31,7 +29,6 @@ export default function ProfileSettings(props: ProfileSettingsProps) { const uploader = useFileUpload(); const [name, setName] = useState(); - const [displayName, setDisplayName] = useState(); const [picture, setPicture] = useState(); const [banner, setBanner] = useState(); const [about, setAbout] = useState(); @@ -39,12 +36,9 @@ export default function ProfileSettings(props: ProfileSettingsProps) { const [nip05, setNip05] = useState(); const [lud16, setLud16] = useState(); - const avatarPicture = (picture?.length ?? 0) === 0 ? Nostrich : picture; - useEffect(() => { if (user) { setName(user.name); - setDisplayName(user.display_name); setPicture(user.picture); setBanner(user.banner); setAbout(user.about); @@ -59,7 +53,6 @@ export default function ProfileSettings(props: ProfileSettingsProps) { const userCopy = { ...user, name, - display_name: displayName, about, picture, banner, @@ -107,69 +100,62 @@ export default function ProfileSettings(props: ProfileSettingsProps) { } } + async function setNewAvatar() { + const rsp = await uploadFile(); + if (rsp) { + setPicture(rsp); + } + } + function editor() { return ( -
-
-
- : -
-
- setName(e.target.value)} /> +
+
+

+ +

+ setName(e.target.value)} /> +
+
+

+ +

+ +
+
+

+ +

+ setWebsite(e.target.value)} /> +
+
+

+ +

+
+ setNip05(e.target.value)} /> + + + +
+ + +
-
-
- : -
-
- setDisplayName(e.target.value)} /> -
-
-
-
- : -
-
- -
-
-
-
- : -
-
- setWebsite(e.target.value)} /> -
-
-
-
- : -
-
- setNip05(e.target.value)} /> - -
-
-
-
- : -
-
- setLud16(e.target.value)} /> -
-
-
-
-
- saveProfile()}> - - -
+
+

+ +

+ setLud16(e.target.value)} />
+ saveProfile()}> + +
); } @@ -179,28 +165,23 @@ export default function ProfileSettings(props: ProfileSettingsProps) { return ( <>
- {(props.avatar ?? true) && ( -
-
- : -
- setPicture(p)} /> + {(props.banner ?? true) && ( +
+ setNewBanner()}> + +
)} - {(props.banner ?? true) && ( -
-
- : -
-
-
setNewBanner()}> - -
-
+ {(props.avatar ?? true) && ( +
+ + setNewAvatar()}> + +
)}
@@ -209,12 +190,5 @@ export default function ProfileSettings(props: ProfileSettingsProps) { ); } - return ( -
-

- -

- {settings()} -
- ); + return
{settings()}
; } diff --git a/packages/app/src/Pages/settings/RelayInfo.tsx b/packages/app/src/Pages/settings/RelayInfo.tsx index cf292887..6c5bca22 100644 --- a/packages/app/src/Pages/settings/RelayInfo.tsx +++ b/packages/app/src/Pages/settings/RelayInfo.tsx @@ -22,7 +22,7 @@ const RelayInfo = () => {

navigate("/settings/relays")}>

-
+

{stats?.info?.name}

{stats?.info?.description}

diff --git a/packages/app/src/Pages/settings/Root.css b/packages/app/src/Pages/settings/Root.css index abc47f67..b5d57ee6 100644 --- a/packages/app/src/Pages/settings/Root.css +++ b/packages/app/src/Pages/settings/Root.css @@ -1,19 +1,29 @@ +.settings-nav { + display: grid; + grid-template-columns: 237px auto; +} + +.settings-nav > div { + border: 1px solid var(--gray-superdark); +} + +.settings-nav > div:nth-child(2) { + padding: 12px 16px; +} + .settings-nav .card { cursor: pointer; } .settings-row { display: grid; - grid-template-columns: 22px 1fr 8px; + grid-template-columns: 24px 1fr 24px; align-items: center; - font-weight: 600; - font-size: 16px; - padding: 0.8em 1em; - background: var(--note-bg); - border-radius: 10px; cursor: pointer; - gap: 10px; - margin-bottom: 5px; + padding: 12px 16px; + gap: 8px; + font-size: 16px; + font-weight: 600; } .settings-row.inner { @@ -24,12 +34,12 @@ } .settings-group-header { - font-weight: 600; + align-items: center; + cursor: pointer; + padding: 12px 16px; + gap: 8px; font-size: 16px; - padding: 0.8em 1em; - background-color: var(--note-bg); - border-radius: 10px; - margin-bottom: 5px; + font-weight: 600; } .settings-row:hover, @@ -41,11 +51,6 @@ margin-left: auto; } -.settings-row svg { - width: 100%; - height: 100%; -} - .settings-group-header .collapse-icon > svg { width: 8px; } diff --git a/packages/app/src/Pages/settings/Root.tsx b/packages/app/src/Pages/settings/Root.tsx index 1e3a7357..0eac3878 100644 --- a/packages/app/src/Pages/settings/Root.tsx +++ b/packages/app/src/Pages/settings/Root.tsx @@ -1,12 +1,11 @@ import "./Root.css"; import { FormattedMessage } from "react-intl"; -import { useNavigate } from "react-router-dom"; +import { Outlet, useNavigate } from "react-router-dom"; import Icon from "Icons/Icon"; import { LoginStore, logout } from "Login"; import useLogin from "Hooks/useLogin"; import { unwrap } from "SnortUtils"; import { getCurrentSubscription } from "Subscription"; -import { CollapsedSection } from "Element/Collapsed"; import messages from "./messages"; @@ -21,80 +20,72 @@ const SettingsIndex = () => { } return ( - <> -
- - - -
- } - className="settings-group-header"> -
-
navigate("profile")}> - - - -
-
navigate("relays")}> - - - -
-
navigate("keys")}> - - - -
-
navigate("handle")}> - - - -
-
navigate("/subscribe/manage")}> - - - -
- {sub && ( -
navigate("accounts")}> - - - -
- )} +
+
+
navigate("profile")}> + + + +
+
navigate("relays")}> + + + +
+
navigate("keys")}> + + + +
+
navigate("handle")}> + + + +
+
navigate("/subscribe/manage")}> + + + +
+ {sub && ( +
navigate("accounts")}> + + +
- + )}
navigate("preferences")}> - + - +
navigate("wallet")}> - + - +
navigate("/donate")}> - + - +
navigate("/zap-pool")}> - + - +
- + - +
- +
+ +
+
); }; diff --git a/packages/app/src/Pages/settings/WalletSettings.css b/packages/app/src/Pages/settings/WalletSettings.css index d24cef79..4d2f85b9 100644 --- a/packages/app/src/Pages/settings/WalletSettings.css +++ b/packages/app/src/Pages/settings/WalletSettings.css @@ -5,10 +5,10 @@ grid-gap: 10px; } -.wallet-grid .card { +.wallet-grid > div { cursor: pointer; display: flex; flex-direction: column; - justify-content: flex-end; align-items: center; + justify-content: space-between; } diff --git a/packages/app/src/Pages/settings/WalletSettings.tsx b/packages/app/src/Pages/settings/WalletSettings.tsx index 818d5020..26540973 100644 --- a/packages/app/src/Pages/settings/WalletSettings.tsx +++ b/packages/app/src/Pages/settings/WalletSettings.tsx @@ -1,7 +1,7 @@ import "./WalletSettings.css"; import LndLogo from "lnd-logo.png"; import { FormattedMessage } from "react-intl"; -import { RouteObject, useNavigate } from "react-router-dom"; +import { Link, RouteObject, useNavigate } from "react-router-dom"; import BlueWallet from "Icons/BlueWallet"; import ConnectLNC from "Pages/settings/wallet/LNC"; @@ -15,21 +15,26 @@ const WalletSettings = () => { const navigate = useNavigate(); return ( <> + + +

-
navigate("/settings/wallet/lnc")}> +
navigate("/settings/wallet/lnc")}> -

LND with LNC

+

LND with LNC

-
navigate("/settings/wallet/lndhub")}> +
navigate("/settings/wallet/lndhub")}> -

LNDHub

+

LNDHub

-
navigate("/settings/wallet/nwc")}> +
navigate("/settings/wallet/nwc")}> -

Nostr Wallet Connect

+

Nostr Wallet Connect

diff --git a/packages/app/src/Pages/settings/handle/LNAddress.tsx b/packages/app/src/Pages/settings/handle/LNAddress.tsx index 0adea2f4..562dc571 100644 --- a/packages/app/src/Pages/settings/handle/LNAddress.tsx +++ b/packages/app/src/Pages/settings/handle/LNAddress.tsx @@ -42,7 +42,7 @@ export default function LNForwardAddress({ handle }: { handle: ManageHandle }) { } return ( -
+

diff --git a/packages/app/src/Pages/settings/handle/ListHandles.tsx b/packages/app/src/Pages/settings/handle/ListHandles.tsx index c7f37b90..b209710a 100644 --- a/packages/app/src/Pages/settings/handle/ListHandles.tsx +++ b/packages/app/src/Pages/settings/handle/ListHandles.tsx @@ -29,37 +29,33 @@ export default function ListHandles() { defaultMessage="It looks like you dont have any, check {link} to buy one!" values={{ link: ( - - + + ), }} /> )} {handles.map(a => ( -
-
-

- {a.handle}@ - - {a.domain} - -

-
-
- -
+
+

+ {a.handle}@ + + {a.domain} + +

+
))} {handles.length > 0 && ( - )} diff --git a/packages/app/src/Pages/settings/handle/TransferHandle.tsx b/packages/app/src/Pages/settings/handle/TransferHandle.tsx index bbe39ff1..ba5b0907 100644 --- a/packages/app/src/Pages/settings/handle/TransferHandle.tsx +++ b/packages/app/src/Pages/settings/handle/TransferHandle.tsx @@ -28,7 +28,7 @@ export default function TransferHandle({ handle }: { handle: ManageHandle }) { } return ( -
+

diff --git a/packages/app/src/Pages/settings/wallet/Cashu.tsx b/packages/app/src/Pages/settings/wallet/Cashu.tsx index 3c41d72c..5a2f4efa 100644 --- a/packages/app/src/Pages/settings/wallet/Cashu.tsx +++ b/packages/app/src/Pages/settings/wallet/Cashu.tsx @@ -31,7 +31,7 @@ const ConnectCashu = () => { data: mintUrl, } as WalletConfig; Wallets.add(newWallet); - navigate("/wallet"); + navigate("/settings/wallet"); } catch (e) { if (e instanceof Error) { setError((e as Error).message); diff --git a/packages/app/src/Pages/settings/wallet/LNC.tsx b/packages/app/src/Pages/settings/wallet/LNC.tsx index 206d02a5..d33fa9fe 100644 --- a/packages/app/src/Pages/settings/wallet/LNC.tsx +++ b/packages/app/src/Pages/settings/wallet/LNC.tsx @@ -46,7 +46,7 @@ const ConnectLNC = () => { active: true, info: unwrap(walletInfo), }); - navigate("/wallet"); + navigate("/settings/wallet"); } function flowConnect() { diff --git a/packages/app/src/Pages/settings/wallet/LNDHub.tsx b/packages/app/src/Pages/settings/wallet/LNDHub.tsx index 85ddc0fe..b33462ec 100644 --- a/packages/app/src/Pages/settings/wallet/LNDHub.tsx +++ b/packages/app/src/Pages/settings/wallet/LNDHub.tsx @@ -29,7 +29,7 @@ const ConnectLNDHub = () => { } as WalletConfig; Wallets.add(newWallet); - navigate("/wallet"); + navigate("/settings/wallet"); } catch (e) { if (e instanceof Error) { setError((e as Error).message); diff --git a/packages/app/src/Pages/settings/wallet/NWC.tsx b/packages/app/src/Pages/settings/wallet/NWC.tsx index bd5e1feb..921d6c59 100644 --- a/packages/app/src/Pages/settings/wallet/NWC.tsx +++ b/packages/app/src/Pages/settings/wallet/NWC.tsx @@ -29,7 +29,7 @@ const ConnectNostrWallet = () => { } as WalletConfig; Wallets.add(newWallet); - navigate("/wallet"); + navigate("/settings/wallet"); } catch (e) { if (e instanceof Error) { setError((e as Error).message); diff --git a/packages/app/src/Pages/subscribe/ManageSubscription.tsx b/packages/app/src/Pages/subscribe/ManageSubscription.tsx index 4d13656c..120d138d 100644 --- a/packages/app/src/Pages/subscribe/ManageSubscription.tsx +++ b/packages/app/src/Pages/subscribe/ManageSubscription.tsx @@ -33,7 +33,7 @@ export default function ManageSubscriptionPage() { return ; } return ( - <> +

@@ -60,6 +60,6 @@ export default function ManageSubscriptionPage() {

)} {error && {mapSubscriptionErrorCode(error)}} - +
); } diff --git a/packages/app/src/Pages/subscribe/SubscriptionCard.tsx b/packages/app/src/Pages/subscribe/SubscriptionCard.tsx index 6bc053be..87c872ab 100644 --- a/packages/app/src/Pages/subscribe/SubscriptionCard.tsx +++ b/packages/app/src/Pages/subscribe/SubscriptionCard.tsx @@ -8,7 +8,7 @@ import Icon from "Icons/Icon"; import useEventPublisher from "Feed/EventPublisher"; import SendSats from "Element/SendSats"; import Nip5Service from "Element/Nip5Service"; -import { SnortNostrAddressService } from "Pages/Verification"; +import { SnortNostrAddressService } from "Pages/NostrAddressPage"; import Nip05 from "Element/Nip05"; export default function SubscriptionCard({ sub }: { sub: Subscription }) { @@ -62,7 +62,7 @@ export default function SubscriptionCard({ sub }: { sub: Subscription }) { return ( <> -
+
{mapPlanName(sub.type)} diff --git a/packages/app/src/Pages/subscribe/index.css b/packages/app/src/Pages/subscribe/index.css index 39662f84..6fb2a9a5 100644 --- a/packages/app/src/Pages/subscribe/index.css +++ b/packages/app/src/Pages/subscribe/index.css @@ -1,4 +1,4 @@ -.subscribe-page > div.card { +.subscribe-page > div { margin: 5px; min-height: 400px; user-select: none; @@ -18,7 +18,7 @@ flex-direction: column; } - .subscribe-page > div.card { + .subscribe-page > div { flex: unset; } } diff --git a/packages/app/src/Pages/subscribe/index.tsx b/packages/app/src/Pages/subscribe/index.tsx index bea338bf..48acf99a 100644 --- a/packages/app/src/Pages/subscribe/index.tsx +++ b/packages/app/src/Pages/subscribe/index.tsx @@ -77,11 +77,11 @@ export function SubscribePage() { return ( <> -
+
{Plans.map(a => { const lower = Plans.filter(b => b.id < a.id); return ( -
+

{mapPlanName(a.id)}

diff --git a/packages/app/src/SnortUtils/index.ts b/packages/app/src/SnortUtils/index.ts index 81e90ced..b73137a4 100644 --- a/packages/app/src/SnortUtils/index.ts +++ b/packages/app/src/SnortUtils/index.ts @@ -27,14 +27,18 @@ export async function openFile(): Promise { return new Promise(resolve => { const elm = document.createElement("input"); elm.type = "file"; - elm.onchange = (e: Event) => { + const handleInput = (e: Event) => { + console.debug(e); const elm = e.target as HTMLInputElement; - if (elm.files) { - resolve(elm.files[0]); + if ((elm.files?.length ?? 0) > 0) { + resolve(elm.files![0]); } else { resolve(undefined); } }; + + elm.onchange = e => handleInput(e); + elm.onblur = e => handleInput(e); elm.click(); }); } diff --git a/packages/app/src/Tasks/Nip5Task.tsx b/packages/app/src/Tasks/Nip5Task.tsx index c737ca61..9087dd69 100644 --- a/packages/app/src/Tasks/Nip5Task.tsx +++ b/packages/app/src/Tasks/Nip5Task.tsx @@ -14,11 +14,11 @@ export class Nip5Task extends BaseUITask { return (

- + + ), }} diff --git a/packages/app/src/index.css b/packages/app/src/index.css index 6ecb0cfa..8791a7df 100644 --- a/packages/app/src/index.css +++ b/packages/app/src/index.css @@ -125,6 +125,10 @@ body #root > div:not(.page) header { } } +.p { + padding: 12px 16px; +} + .card { padding: 12px 16px; border-bottom: 1px solid var(--gray-superdark); @@ -158,7 +162,6 @@ button { padding: 6px 12px; font-weight: 600; color: white; - min-height: 35px; font-size: var(--font-size); background-color: var(--highlight); border: none; @@ -296,12 +299,13 @@ input[type="password"], input[type="number"], select, textarea { - padding: 12px; + padding: 12px 16px; color: var(--font-color); background: transparent; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; outline: none; + line-height: 24px; /* 150% */ } .light input[type="text"], @@ -338,6 +342,11 @@ input:disabled { min-width: 0; } +.flex-column { + display: flex; + flex-direction: column; +} + .f-center { justify-content: center; } diff --git a/packages/app/src/index.tsx b/packages/app/src/index.tsx index 9ec174eb..9b74fe54 100644 --- a/packages/app/src/index.tsx +++ b/packages/app/src/index.tsx @@ -19,7 +19,7 @@ import { RootRoutes } from "Pages/Root"; import NotificationsPage from "Pages/Notifications"; import SettingsPage, { SettingsRoutes } from "Pages/SettingsPage"; import ErrorPage from "Pages/ErrorPage"; -import VerificationPage from "Pages/Verification"; +import NostrAddressPage from "Pages/NostrAddressPage"; import MessagesPage from "Pages/MessagesPage"; import DonatePage from "Pages/DonatePage"; import SearchPage from "Pages/SearchPage"; @@ -125,8 +125,8 @@ export const router = createBrowserRouter([ children: SettingsRoutes, }, { - path: "/verification", - element: , + path: "/nostr-address", + element: , }, { path: "/messages/:id?",