diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/locales/en.json | 1 | ||||
| -rw-r--r-- | src/routes/(app)/[username]/(profile)/+layout.svelte | 217 | ||||
| -rw-r--r-- | src/routes/(app)/[username]/(profile)/+page.svelte | 15 | ||||
| -rw-r--r-- | src/routes/(app)/[username]/invoice/[id]/+page.svelte | 8 | ||||
| -rw-r--r-- | src/routes/(app)/send/invoice/[id]/+page.svelte | 8 | ||||
| -rw-r--r-- | src/routes/(app)/send/user/[username]/[...amount]/+page.svelte | 6 |
6 files changed, 134 insertions, 121 deletions
diff --git a/src/locales/en.json b/src/locales/en.json index 0915d98c..4ae40711 100644 --- a/src/locales/en.json +++ b/src/locales/en.json @@ -154,6 +154,7 @@ "subheader": "Latest Updates" }, "user": { + "details": "Details", "noMessages": "You have not sent or received any messages yet", "profilePage": "Profile page", "nostrPubkey": "Nostr pubkey", diff --git a/src/routes/(app)/[username]/(profile)/+layout.svelte b/src/routes/(app)/[username]/(profile)/+layout.svelte index 19c40546..9507441f 100644 --- a/src/routes/(app)/[username]/(profile)/+layout.svelte +++ b/src/routes/(app)/[username]/(profile)/+layout.svelte @@ -77,67 +77,13 @@ <div class="container mx-auto w-full px-4 flex flex-wrap lg:flex-nowrap"> <div class="hidden lg:block lg:w-[300px]" /> - <div class="lg:w-[300px] lg:absolute space-y-5 left-20 mx-auto max-w-sm"> + <div class="lg:w-[300px] lg:absolute space-y-5 left-20 mx-auto max-w-sm mb-5"> <div class="flex text-3xl font-bold text-center mx-auto justify-center gap-2" > <div class="my-auto break-words w-full">{display || username}</div> - <button on:click={toggleDetails}> - <Icon icon="stats" style="w-12 min-w-[50px]" /> - </button> </div> - {#if showDetails} - <div> - <div class="font-bold">{$t("user.profilePage")}</div> - <div class="flex gap-4"> - <div class="break-all grow text-secondary text-lg"> - {profile} - </div> - <div class="flex mb-auto gap-1"> - <button class="my-auto" on:click={() => copy(profile)} - ><Icon icon="copy" style="max-w-max w-8 min-w-[32px]" /></button - > - <a href={`/qr/${encodeURIComponent(profile)}`} class="my-auto"> - <Icon icon="qr" style="invert max-w-max min-w-[32px]" /> - </a> - </div> - </div> - </div> - <div> - <div class="font-bold">{$t("user.lightningAddress")}</div> - <div class="flex gap-4"> - <div class="break-all grow text-secondary text-lg"> - {lnaddr} - </div> - <div class="flex mb-auto gap-1"> - <button class="my-auto" on:click={() => copy(lnaddr)} - ><Icon icon="copy" style="max-w-max w-8 min-w-[32px]" /></button - > - <a href={`/qr/${encodeURIComponent(lnaddr)}`} class="my-auto"> - <Icon icon="qr" style="invert max-w-max min-w-[32px]" /> - </a> - </div> - </div> - </div> - <div> - <div class="font-bold">{$t("user.nostrPubkey")}</div> - <div class="flex gap-4"> - <div class="break-all grow text-secondary text-lg"> - {npub} - </div> - <div class="flex my-auto gap-1"> - <button class="my-auto" on:click={() => copy(npub)} - ><Icon icon="copy" style="max-w-max w-8 min-w-[32px]" /></button - > - <a href={`/qr/${encodeURIComponent(npub)}`} class="my-auto"> - <Icon icon="qr" style="invert max-w-max min-w-[32px]" /> - </a> - </div> - </div> - </div> - {/if} - {#if subject.address && subject.id !== user?.id} <div class="text-secondary mx-auto text-center lg:text-left lg:mx-0" @@ -160,76 +106,81 @@ > </div> - <div class="flex flex-wrap gap-2 w-full"> + <div class="flex flex-wrap gap-2 w-full text-xl"> {#if user && user.username !== subject.username && subject.pubkey} {#if following} - <div class="w-full flex"> - <button - class="mx-auto rounded-full border py-3 px-6 font-bold hover:opacity-80 flex w-60 bg-black text-white" - on:click={unfollow} - > - <div class="mx-auto flex"> - <Icon icon={"profile"} style="my-auto h-6 mr-2 invert" /> - <div class="my-auto">{$t("user.following")}</div> - </div> - </button> - </div> + <button + class="mx-auto rounded-2xl border py-5 px-6 font-bold hover:opacity-80 flex bg-black text-white grow" + on:click={unfollow} + > + <div class="mx-auto flex"> + <Icon icon={"profile"} style="my-auto w-8 mr-2 invert" /> + <div class="my-auto">{$t("user.following")}</div> + </div> + </button> {:else} - <div class="w-full flex"> - <button - class="mx-auto rounded-full border py-3 px-6 font-bold hover:opacity-80 flex w-60" - on:click={follow} - > - <div class="mx-auto flex"> - <Icon icon={"profile"} style="my-auto h-6 mr-2" /> - <div class="my-auto">{$t("user.follow")}</div> - </div> - </button> - </div> + <button + class="mx-auto rounded-2xl border py-5 px-6 font-bold hover:opacity-80 flex grow" + on:click={follow} + > + <div class="mx-auto flex"> + <Icon icon={"profile"} style="my-auto h-6 mr-2" /> + <div class="my-auto">{$t("user.follow")}</div> + </div> + </button> {/if} {/if} {#if user && user.username !== subject.username && subject.pubkey} - <div class="w-full flex"> - <a href={`/${user.username}/messages/${subject.username}`} class="mx-auto"> - <button - class="rounded-full border py-3 px-6 font-bold hover:opacity-80 flex w-60" - > - <div class="mx-auto flex"> - <Icon icon="message" style="mr-2 my-auto" /> - <div class="mt-1 my-auto">{$t("user.message")}</div> - </div> - </button> - </a> - </div> + <a + href={`/${user.username}/messages/${subject.username}`} + class="contents" + > + <button + class="rounded-2xl border py-5 px-6 font-bold hover:opacity-80 flex w-60 grow" + > + <div class="mx-auto flex"> + <Icon icon="message" style="w-8 mr-2 my-auto" /> + <div class="mt-1 my-auto">{$t("user.message")}</div> + </div> + </button> + </a> {/if} {#if !subject.anon && subject.username !== user?.username} - <div class="w-full flex"> - <a - href={user - ? `/send/${subject.username}` - : `/${subject.username}/receive`} - class="mx-auto" + <a + href={user + ? `/send/${subject.username}` + : `/${subject.username}/receive`} + class="contents" + > + <button + class="rounded-2xl border py-5 px-6 font-bold hover:opacity-80 flex w-60 grow" > - <button - class="rounded-full border py-3 px-6 font-bold hover:opacity-80 flex w-60" - > - <div class="mx-auto flex"> - <Icon icon="send" style="mr-2" /> - <div class="mt-1">{$t("user.pay")}</div> - </div> - </button> - </a> - </div> + <div class="mx-auto flex"> + <Icon icon="send" style="w-8 mr-2" /> + <div class="mt-1">{$t("user.pay")}</div> + </div> + </button> + </a> {/if} + <button + type="button" + on:click={toggleDetails} + class="rounded-2xl border py-5 px-6 font-bold hover:opacity-80 flex w-60 grow" + > + <div class="mx-auto flex"> + <Icon icon="edit" style="w-8 mr-2" /> + <div class="mt-1">{$t("user.details")}</div> + </div> + </button> {#if user?.admin && user.username !== subject.username} <form class="w-full flex" on:submit|preventDefault={reset}> <input placeholder="Password reset" bind:value={password} /> <button type="submit" - class="rounded-full border py-3 px-6 font-bold hover:opacity-80 flex w-60" + class="rounded-2xl border py-5 px-6 font-bold hover:opacity-80 flex w-60" > <div class="mx-auto flex"> <Icon icon="clock" style="mr-2 my-auto w-8" /> @@ -239,6 +190,58 @@ </form> {/if} </div> + {#if showDetails} + <div class="text-xl space-y-5"> + <div> + <div class="font-bold">{$t("user.profilePage")}</div> + <div class="flex gap-4"> + <div class="break-all grow text-secondary"> + {profile} + </div> + <div class="flex mb-auto gap-1"> + <button class="my-auto" on:click={() => copy(profile)} + ><Icon icon="copy" style="max-w-max w-8 min-w-[32px]" /></button + > + <a href={`/qr/${encodeURIComponent(profile)}`} class="my-auto"> + <Icon icon="qr" style="invert max-w-max min-w-[32px]" /> + </a> + </div> + </div> + </div> + <div> + <div class="font-bold">{$t("user.lightningAddress")}</div> + <div class="flex gap-4"> + <div class="break-all grow text-secondary"> + {lnaddr} + </div> + <div class="flex mb-auto gap-1"> + <button class="my-auto" on:click={() => copy(lnaddr)} + ><Icon icon="copy" style="max-w-max w-8 min-w-[32px]" /></button + > + <a href={`/qr/${encodeURIComponent(lnaddr)}`} class="my-auto"> + <Icon icon="qr" style="invert max-w-max min-w-[32px]" /> + </a> + </div> + </div> + </div> + <div> + <div class="font-bold">{$t("user.nostrPubkey")}</div> + <div class="flex gap-4"> + <div class="break-all grow text-secondary"> + {npub} + </div> + <div class="flex my-auto gap-1"> + <button class="my-auto" on:click={() => copy(npub)} + ><Icon icon="copy" style="max-w-max w-8 min-w-[32px]" /></button + > + <a href={`/qr/${encodeURIComponent(npub)}`} class="my-auto"> + <Icon icon="qr" style="invert max-w-max min-w-[32px]" /> + </a> + </div> + </div> + </div> + </div> + {/if} </div> <div class="w-full"> diff --git a/src/routes/(app)/[username]/(profile)/+page.svelte b/src/routes/(app)/[username]/(profile)/+page.svelte index 3ead0171..b3d9f842 100644 --- a/src/routes/(app)/[username]/(profile)/+page.svelte +++ b/src/routes/(app)/[username]/(profile)/+page.svelte @@ -174,13 +174,13 @@ </div> <div class="bg-white rounded-xl py-2"> <div class="flex text-left gap-2"> - <div class="overflow-hidden"> + <div class="overflow-hidden space-y-1"> <div class="text-2xl break-words">{i.name}</div> <div class="flex gap-2"> - <div class="font-semibold"> + <div class="font-semibold text-lg"> {f(i.price, currency)} </div> - <div class="text-secondary"> + <div class="text-secondary my-auto"> {sat(btc(i.price, rate))} </div> </div> @@ -198,6 +198,15 @@ <div class="text-2xl my-auto text-center"> {#if i.quantity}{i.quantity}{:else}—{/if} </div> + {#if i.quantity} + <button + type="button" + on:click|stopPropagation={() => + i.quantity++} + > + <Icon icon="plus" style="w-10 min-w-10" /> + </button> + {/if} </div> </div> </div> diff --git a/src/routes/(app)/[username]/invoice/[id]/+page.svelte b/src/routes/(app)/[username]/invoice/[id]/+page.svelte index 3451cf58..c539125b 100644 --- a/src/routes/(app)/[username]/invoice/[id]/+page.svelte +++ b/src/routes/(app)/[username]/invoice/[id]/+page.svelte @@ -186,7 +186,7 @@ <button type="button" - class="flex gap-2 text-center break-all text-lg rounded-2xl hover:opacity-80 p-4 w-full mx-auto justify-center border bg-black text-white text-xl" + class="flex gap-2 text-center break-all rounded-2xl hover:opacity-80 py-5 px-6 w-full mx-auto justify-center border bg-black text-white text-2xl" on:click={() => copy(txt)} > <Icon icon="copy" style="w-8 my-auto invert" /> @@ -195,10 +195,10 @@ </div> </button> - <div class="w-full flex justify-center gap-2 flex-wrap text-secondary"> + <div class="w-full flex justify-center gap-2 flex-wrap text-secondary text-xl"> <a href={link} class="w-full"> <button - class="w-full flex justify-center rounded-2xl border py-3 px-5 hover:opacity-80 text-lg" + class="w-full flex justify-center rounded-2xl border py-5 px-6 hover:opacity-80" > <Icon icon="mobile" style="mr-1 w-8" /> <div class="my-auto">{$t("payments.openLink")}</div> @@ -206,7 +206,7 @@ </a> <button - class="w-full flex justify-center rounded-2xl border py-3 px-5 hover:opacity-80 text-lg" + class="w-full flex justify-center rounded-2xl border py-5 px-6 hover:opacity-80" on:click={() => ($showQr = $showQr ? false : 2)} > <Icon icon="qr" style="w-8 mr-1 invert my-auto" /> diff --git a/src/routes/(app)/send/invoice/[id]/+page.svelte b/src/routes/(app)/send/invoice/[id]/+page.svelte index 6a009918..64db6eb8 100644 --- a/src/routes/(app)/send/invoice/[id]/+page.svelte +++ b/src/routes/(app)/send/invoice/[id]/+page.svelte @@ -138,12 +138,12 @@ <input name="username" value={recipient.username} type="hidden" /> <input name="pin" value={$pin} type="hidden" /> - <div class="flex w-full"> + <div class="flex w-full text-xl"> {#if amount} <button use:focus type="submit" - class="opacity-100 hover:opacity-80'} rounded-2xl border py-3 font-bold mx-auto mt-2 bg-black text-white px-4 w-24" + class="opacity-100 hover:opacity-80'} rounded-2xl border py-5 font-bold mx-auto mt-2 bg-black text-white px-6 w-40" disabled={submitting} > {#if submitting} @@ -155,7 +155,7 @@ {:else} <button type="button" - class="opacity-100 hover:opacity-80'} rounded-2xl border py-3 font-bold mx-auto mt-2 bg-black text-white px-4 w-24" + class="opacity-100 hover:opacity-80'} rounded-2xl border py-5 font-bold mx-auto mt-2 bg-black text-white px-6 w-40" on:click={setAmount} > {$t("payments.next")} @@ -163,7 +163,7 @@ {/if} </div> </form> - <div class="flex my-10"> + <div class="flex my-10 text-xl"> <button class="mx-auto" on:click={external} >{$t("payments.moreOptions")}</button > diff --git a/src/routes/(app)/send/user/[username]/[...amount]/+page.svelte b/src/routes/(app)/send/user/[username]/[...amount]/+page.svelte index 533a7039..e9273647 100644 --- a/src/routes/(app)/send/user/[username]/[...amount]/+page.svelte +++ b/src/routes/(app)/send/user/[username]/[...amount]/+page.svelte @@ -80,11 +80,11 @@ <input name="pin" value={$pin} type="hidden" /> <input name="hash" value={hash} type="hidden" /> - <div class="flex w-full"> + <div class="flex w-full text-xl"> {#if amount} <button type="submit" - class="opacity-100 hover:opacity-80'} rounded-2xl border py-3 font-bold mx-auto mt-2 bg-black text-white px-4 w-24" + class="opacity-100 hover:opacity-80'} rounded-2xl border py-5 font-bold mx-auto mt-2 bg-black text-white px-6 w-40" > {#if loading} <Spinner /> @@ -96,7 +96,7 @@ <button type="button" bind:this={next} - class="opacity-100 hover:opacity-80'} rounded-2xl border py-3 font-bold mx-auto mt-2 bg-black text-white px-4 w-24" + class="opacity-100 hover:opacity-80'} rounded-2xl border py-5 font-bold mx-auto mt-2 bg-black text-white px-6 w-40" on:click={setAmount} on:keydown={setAmount} > |