diff options
| author | Adam Soltys <[email protected]> | 2022-11-06 21:36:11 -0800 |
|---|---|---|
| committer | Adam Soltys <[email protected]> | 2022-11-06 21:36:11 -0800 |
| commit | 4abcb74a24cff284842b132316f047b39d878d92 (patch) | |
| tree | eac564bf5d02a25751852e1b530dde2ad3d8fe65 /src/components | |
| parent | 750b7773c2531436b98129f812b21c48023fb48c (diff) | |
| download | coinos-ui-4abcb74a24cff284842b132316f047b39d878d92.tar.gz coinos-ui-4abcb74a24cff284842b132316f047b39d878d92.zip | |
invoice and popup styles
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/Invoice.svelte | 44 | ||||
| -rw-r--r-- | src/components/Request.svelte | 45 |
2 files changed, 46 insertions, 43 deletions
diff --git a/src/components/Invoice.svelte b/src/components/Invoice.svelte index 4b42f851..d68824a8 100644 --- a/src/components/Invoice.svelte +++ b/src/components/Invoice.svelte @@ -1,4 +1,5 @@ <script> + import { f, sat, sats } from '$lib/utils'; import { fly } from 'svelte/transition'; import { Avatar, Icon } from '$comp'; import { invoice } from '$lib/store'; @@ -7,28 +8,31 @@ </script> {#if $invoice} - <div - class="flex flex-wrap md:flex-nowrap fixed bottom-0 border-t w-full p-4 bg-white z-50" - in:fly - > - <div class="my-auto md:w-1/2"> - <div class="flex"> - <Avatar user={$invoice.user.username} size={12} /> - <h1 class="my-auto"><b>{$invoice.user.username}</b> sent an invoice</h1> + <div class="fixed bottom-0 border-t w-full p-4 bg-white z-50" in:fly> + <div class="flex flex-wrap md:flex-nowrap max-w-xl mx-auto gap-2"> + <div class="my-auto mx-auto"> + <div class="flex"> + <Avatar user={$invoice.user.username} size={12} /> + <h1 class="my-auto"> + <b>{$invoice.user.username}</b> sent an invoice for + <b>{f(($invoice.amount * $invoice.rate) / sats, $invoice.currency)}</b> + {sat($invoice.amount)} + </h1> + </div> </div> - </div> - <div class="mx-auto my-auto"> - <a href={`/invoice/${$invoice.uuid}`}> - <button class="text-lg rounded-full border py-3 px-7 font-bold hover:opacity-80 w-full"> - Pay + <div class="mx-auto my-auto flex gap-2"> + <a href={`/invoice/${$invoice.uuid}/tip`}> + <button class="text-lg rounded-full border py-3 px-7 font-bold hover:opacity-80 w-40"> + Pay + </button> + </a> + <button + class="text-lg rounded-full border py-3 px-7 font-bold hover:opacity-80 w-40" + on:click={() => ($invoice = undefined)} + > + Dismiss </button> - </a> + </div> </div> - <button - class="absolute right-4 top-4 ml-auto mb-auto rounded-full border font-bold hover:opacity-80 p-3" - on:click={() => ($invoice = undefined)} - > - <Icon icon="close" /> - </button> </div> {/if} diff --git a/src/components/Request.svelte b/src/components/Request.svelte index 2c87d436..e1071272 100644 --- a/src/components/Request.svelte +++ b/src/components/Request.svelte @@ -7,31 +7,30 @@ </script> {#if $request} - <div - class="flex flex-wrap md:flex-nowrap fixed bottom-0 border-t w-full p-4 bg-white z-50" - in:fly - > - <div class="my-auto md:w-1/2"> - <div class="flex"> - <Avatar user={$request.requester} size={12} /> - <h1 class="my-auto"><b>{$request.requester.username}</b> is ready to pay</h1> + <div class="fixed bottom-0 border-t w-full p-4 bg-white z-50" in:fly> + <div class="flex flex-wrap md:flex-nowrap max-w-xl mx-auto gap-2"> + <div class="my-auto mx-auto"> + <div class="flex"> + <Avatar user={$request.requester} size={12} /> + <h1 class="my-auto"><b>{$request.requester.username}</b> is ready to pay</h1> + </div> + {#if $request.memo} + <div class="border-l-4 pl-4 my-2">{$request.memo}</div> + {/if} </div> - {#if $request.memo} - <div class="border-l-4 pl-4 my-2">{$request.memo}</div> - {/if} - </div> - <div class="mx-auto my-auto"> - <a href={`/${user.username}/receive`}> - <button class="text-lg rounded-full border py-3 px-7 font-bold hover:opacity-80 w-full"> - Create invoice + <div class="mx-auto my-auto flex gap-2"> + <a href={`/${user.username}/receive`}> + <button class="text-lg rounded-full border py-3 px-7 font-bold hover:opacity-80 w-40"> + Invoice + </button> + </a> + <button + class="text-lg rounded-full border py-3 px-7 font-bold hover:opacity-80 w-full" + on:click={() => ($request = undefined)} + > + Dismiss </button> - </a> + </div> </div> - <button - class="absolute right-4 top-4 ml-auto mb-auto rounded-full border font-bold hover:opacity-80 p-3" - on:click={() => ($request = undefined)} - > - <Icon icon="close" /> - </button> </div> {/if} |