diff options
| author | Adam Soltys <[email protected]> | 2023-05-27 00:47:45 -0700 |
|---|---|---|
| committer | Adam Soltys <[email protected]> | 2023-05-27 00:47:45 -0700 |
| commit | 756a9eb215ae68a306ce1c263f010578e24dfd6d (patch) | |
| tree | 24b4abad65777e54608eeffee8ec6145337f8034 /src/routes/(app)/pot | |
| parent | b3d2921b099c6748990bb38fec4bea52e8786535 (diff) | |
| download | coinos-ui-756a9eb215ae68a306ce1c263f010578e24dfd6d.tar.gz coinos-ui-756a9eb215ae68a306ce1c263f010578e24dfd6d.zip | |
pot page improvementsnew-qr-scanner
Diffstat (limited to 'src/routes/(app)/pot')
| -rw-r--r-- | src/routes/(app)/pot/[name]/+page.svelte | 40 |
1 files changed, 15 insertions, 25 deletions
diff --git a/src/routes/(app)/pot/[name]/+page.svelte b/src/routes/(app)/pot/[name]/+page.svelte index aac70e8e..4cf05b13 100644 --- a/src/routes/(app)/pot/[name]/+page.svelte +++ b/src/routes/(app)/pot/[name]/+page.svelte @@ -25,13 +25,7 @@ let toggle = () => (show = !show); </script> -<div class="container px-4 max-w-xl mx-auto mt-10 space-y-5"> - <div class="w-full flex"> - <a href="/" class="mx-auto"> - <Icon icon="logo" /> - </a> - </div> - +<div class="container px-4 max-w-4xl mx-auto mt-10 space-y-5"> <div class="flex justify-center items-center"> <div class="md:shadow-xl rounded-3xl md:px-10 pt-5 pb-10 space-y-5 w-full md:mx-5"> <div class="relative flex justify-center gap-2"> @@ -40,19 +34,14 @@ <h1 class="text-2xl md:text-3xl font-semibold my-auto">Card {name}</h1> {:else} <img src="/images/moneypot.jpg" class="w-24" /> - <h1 class="text-2xl md:text-3xl font-semibold my-auto">Money Pot</h1> + <div class="my-auto"> + <h1 class="text-2xl font-semibold my-auto">{$t('payments.moneyPot')}</h1> + <h1 class="text-secondary my-auto">{name}</h1> + </div> {/if} </div> - <p class="text-secondary text-center"> - Anyone who knows the URL to this page can add or take out funds from the pot - </p> {#if show} <img {src} class="mx-auto" alt={name} /> - - <button class="flex mx-auto mt-5" on:click={() => copy($page.url.pathname)} - ><Icon icon="copy" style="w-10 max-w-none" /> - <div class="my-auto">Copy</div></button - > {/if} <div class="flex justify-center gap-4"> <div class="my-auto"> @@ -71,7 +60,7 @@ class="rounded-full border py-3 px-2 font-bold hover:opacity-80 flex gap-1 w-full justify-center" > <Icon icon="plus" /> - Add funds + {$t('payments.addFunds')} </button> </a> </div> @@ -81,7 +70,7 @@ class="rounded-full border py-3 px-2 font-bold hover:opacity-80 flex gap-1 w-full justify-center" > <Icon icon="minus" style="rotate-180" /> - Take funds + {$t('payments.takeFunds')} </button> </a> </div> @@ -92,14 +81,15 @@ on:click={toggle} > <Icon icon="qr" style="invert" /> - {show ? 'Hide' : 'Show'} QR + {show ? $t('payments.show') : $t('payments.hide')} QR + </button> + <button + class="rounded-full border py-3 px-2 font-bold hover:opacity-80 flex gap-1 w-full justify-center" + on:click={() => copy($page.url.pathname)} + > + <Icon icon="copy" style="w-6" /> + {$t('payments.copyLink')} </button> - <!-- <button --> - <!-- class="rounded-full border py-3 px-2 font-bold hover:opacity-80 flex gap-1 w-full justify-center" --> - <!-- > --> - <!-- <Icon icon="nfc" style="w-6" /> --> - <!-- Write Tag --> - <!-- </button> --> </div> <div class="text-base"> {#each payments as p} |