diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/Account.svelte | 16 | ||||
| -rw-r--r-- | src/components/AppHeader.svelte | 8 | ||||
| -rw-r--r-- | src/components/Code.svelte | 29 | ||||
| -rw-r--r-- | src/components/PasswordInput.svelte | 19 | ||||
| -rw-r--r-- | src/components/Pin.svelte | 9 |
5 files changed, 47 insertions, 34 deletions
diff --git a/src/components/Account.svelte b/src/components/Account.svelte index 4db77066..e075b130 100644 --- a/src/components/Account.svelte +++ b/src/components/Account.svelte @@ -21,17 +21,25 @@ class="block space-y-2 border-primary py-4 cursor-pointer" class:border-b-8={!last} onclick={go} + aria-label="Payments" > <div class="flex"> <Balance {balance} {user} {rate} /> - <a href={`/payments`} class="contents" onclick={setAccount}> + <a + href={`/payments`} + class="contents" + onclick={setAccount} + aria-label="Payments" + > <button class="ml-auto flex gap-1 mb-auto pb-4 pl-4"> - <iconify-icon icon="ph:clock-bold" width="32"></iconify-icon> + <iconify-icon icon="ph:clock-bold" width="32" aria-label="Payments" + ></iconify-icon> </button> </a> - <a href={`/account/${id}`} class="contents"> + <a href={`/account/${id}`} class="contents" aria-label="Settings"> <button class="flex gap-1 mb-auto pb-4 pl-4"> - <iconify-icon icon="ph:gear-bold" width="32"></iconify-icon> + <iconify-icon icon="ph:gear-bold" width="32" aria-label="Settings" + ></iconify-icon> </button> </a> </div> diff --git a/src/components/AppHeader.svelte b/src/components/AppHeader.svelte index 495e855b..39f97d4e 100644 --- a/src/components/AppHeader.svelte +++ b/src/components/AppHeader.svelte @@ -27,19 +27,23 @@ { href: `/${user?.username}`, icon: "ph:house-bold", + label: "Home", }, { href: `/${user?.username}/receive`, icon: "ph:hand-coins-bold", flip: "horizontal", + label: "Receive", }, { href: `/payments`, icon: "ph:clock-bold", + label: "Payments", }, { href: `/send`, icon: "ph:paper-plane-right-bold", + label: "Send", }, ]; @@ -59,8 +63,8 @@ > <nav class="flex justify-end items-center space-x-4 p-5"> {#if user} - {#each links as { href, icon, flip }} - <a {href} data-sveltekit-preload-code="eager"> + {#each links as { href, icon, flip, label }} + <a {href} data-sveltekit-preload-code="eager" aria-label={label}> <button class="btn-menu {opacity(href)}"> <iconify-icon {icon} width={w > 640 ? 32 : 24} {flip} ></iconify-icon> diff --git a/src/components/Code.svelte b/src/components/Code.svelte index 52c6bcf2..1c25feb8 100644 --- a/src/components/Code.svelte +++ b/src/components/Code.svelte @@ -4,28 +4,19 @@ let { sample } = $props(); </script> +{#snippet cp(something)} + <button type="button" class="ml-auto" onclick={() => copy(something)}> + <iconify-icon icon="ph:copy-bold" width="42"></iconify-icon> + </button> +{/snippet} + <div class="bg-primary text-primary-content rounded-lg p-4 flex gap-4 whitespace-pre-wrap font-mono items-center" > - <div class="overflow-x-scroll max-w-full scrollbar-hide"> + <div + class="overflow-x-scroll max-w-full [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]" + > <div class="break-all min-w-[800px]">{samples[sample]}</div> </div> - <iconify-icon - icon="ph:copy-bold" - onclick={() => copy(samples[sample])} - width="42" - class="ml-auto cursor-pointer" - ></iconify-icon> + {@render cp(samples[sample])} </div> - -<style> - .scrollbar-hide::-webkit-scrollbar { - display: none; - } - - /* For IE, Edge and Firefox */ - .scrollbar-hide { - -ms-overflow-style: none; /* IE and Edge */ - scrollbar-width: none; /* Firefox */ - } -</style> diff --git a/src/components/PasswordInput.svelte b/src/components/PasswordInput.svelte index bac00134..eb5b0d6c 100644 --- a/src/components/PasswordInput.svelte +++ b/src/components/PasswordInput.svelte @@ -1,7 +1,11 @@ <script> - let { value = $bindable(), focus = () => {} } = $props(); + let { + show = $bindable(), + value = $bindable(), + focus = () => {}, + placeholder, + } = $props(); let toggle = (e) => (show = !show); - let show = $state(false); let icon = $derived(show ? "ph:eye-bold" : "ph:eye-slash-bold"); </script> @@ -10,9 +14,16 @@ class="input flex items-center justify-center gap-2 w-full" > {#if show} - <input name="password" type="text" bind:value class="clean" /> + <input name="password" type="text" bind:value class="clean" {placeholder} /> {:else} - <input name="password" type="password" bind:value class="clean" use:focus /> + <input + name="password" + type="password" + bind:value + class="clean" + use:focus + {placeholder} + /> {/if} <button type="button" aria-label="Toggle" onclick={toggle} class="contents"> <iconify-icon {icon} width="32"></iconify-icon> diff --git a/src/components/Pin.svelte b/src/components/Pin.svelte index fb17c612..a429e976 100644 --- a/src/components/Pin.svelte +++ b/src/components/Pin.svelte @@ -45,23 +45,22 @@ {#if loaded} <div + role="dialog" class="fixed bg-base-100 bg-opacity-90 inset-0 h-full w-full z-50 cursor-default" on:click|preventDefault + aria-labelledby="title" > <div class="mx-auto p-5 border shadow-lg rounded-md bg-base-100 space-y-5 max-w-lg" > - <h1 class="text-center text-2xl font-semibold">{title}</h1> + <h1 id="title" class="text-center text-2xl font-semibold">{title}</h1> <Pinpad bind:v={p} {cancel} /> <div> <label for="locktime" class="font-bold" >{$t("user.settings.rememberFor")}</label > - <select - name="locktime" - bind:value={locktime} - > + <select name="locktime" bind:value={locktime}> <option value={30}>30 {$t("user.settings.seconds")}</option> <option value={5 * 60}>5 {$t("user.settings.minutes")}</option> <option value={10 * 60}>10 {$t("user.settings.minutes")}</option> |