diff options
| author | Adam Soltys <[email protected]> | 2025-09-15 20:29:55 -0700 |
|---|---|---|
| committer | Adam Soltys <[email protected]> | 2025-09-15 20:29:55 -0700 |
| commit | 683927e4132651b9198e5421fae16e9c60978fbc (patch) | |
| tree | 66337f90c995e7e9fd97cbb4587e8bdb7de1d535 /src | |
| parent | f2eed74586ae564a6f1e1231a135592ff6a38a5c (diff) | |
| download | coinosv3-683927e4132651b9198e5421fae16e9c60978fbc.tar.gz coinosv3-683927e4132651b9198e5421fae16e9c60978fbc.zip | |
flex
Diffstat (limited to 'src')
| -rw-r--r-- | src/lib/Copy.svelte | 4 | ||||
| -rw-r--r-- | src/routes/+page.svelte | 79 |
2 files changed, 54 insertions, 29 deletions
diff --git a/src/lib/Copy.svelte b/src/lib/Copy.svelte index 0d8518e..c218030 100644 --- a/src/lib/Copy.svelte +++ b/src/lib/Copy.svelte @@ -8,8 +8,8 @@ }; </script> -<div data-tip="Copied!" class:tooltip={justCopied}> - <button type="button" class="btn" onclick={copy}> +<div data-tip="Copied!" class:tooltip={justCopied} class="grow !w-auto"> + <button type="button" class="btn w-full" onclick={copy}> <iconify-icon icon="ph:copy-bold" width={32} /> </button> </div> diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 12dd597..4694a63 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -232,53 +232,78 @@ </script> <form class="space-y-5" onsubmit={checkBalance}> - <div class="flex items-center gap-2"> + <div class="flex flex-wrap gap-2"> {#if revealSeed} - <textarea use:focus class="textarea grow" placeholder="Seed phrase" bind:value={mnemonic} + <textarea + use:focus + class="textarea w-full min-w-[200px] sm:w-auto" + placeholder="Seed phrase" + bind:value={mnemonic} ></textarea> {:else} - <input type="password" class="input grow" placeholder="Seed phrase" bind:value={mnemonic} /> + <input + type="password" + class="input w-full min-w-[200px] grow sm:w-auto" + placeholder="Seed phrase" + bind:value={mnemonic} + /> {/if} - <button type="button" class="btn" onclick={toggleSeed}> - <iconify-icon icon={revealSeed ? 'ph:eye-bold' : 'ph:eye-slash-bold'} width={32} /> - </button> - <Copy bind:text={mnemonic} /> - <button type="button" class="btn" onclick={pasteSeed}> - <iconify-icon icon="ph:clipboard-text-bold" width={32} /> - </button> - <button type="button" class="btn" onclick={generate}> - <iconify-icon icon="ph:dice-five-bold" width={32} /> - </button> + <div class="flex flex-wrap w-full justify-center sm:w-auto"> + <button type="button" class="btn !w-auto grow" onclick={toggleSeed}> + <iconify-icon icon={revealSeed ? 'ph:eye-bold' : 'ph:eye-slash-bold'} width={32} /> + </button> + <Copy bind:text={mnemonic} /> + <button type="button" class="btn !w-auto grow" onclick={pasteSeed}> + <iconify-icon icon="ph:clipboard-text-bold" width={32} /> + </button> + <button type="button" class="btn !w-auto grow" onclick={generate}> + <iconify-icon icon="ph:dice-five-bold" width={32} /> + </button> + </div> </div> - <div class="flex"> + <div class="flex flex-wrap gap-2"> {#if revealPassword} - <input class="input w-full" placeholder="Passphrase" bind:value={password} /> + <input + class="input w-full min-w-[200px] sm:w-auto" + placeholder="Passphrase" + bind:value={password} + /> {:else} - <input type="password" class="input w-full" placeholder="Passphrase" bind:value={password} /> + <input + type="password" + class="input w-full min-w-[200px] sm:w-auto" + placeholder="Passphrase" + bind:value={password} + /> {/if} - <button type="button" class="btn" onclick={togglePassword}> - <iconify-icon icon={revealPassword ? 'ph:eye-bold' : 'ph:eye-slash-bold'} width={32} /> - </button> + <div class="flex w-full justify-center sm:w-auto"> + <button type="button" class="btn !w-auto grow" onclick={togglePassword}> + <iconify-icon icon={revealPassword ? 'ph:eye-bold' : 'ph:eye-slash-bold'} width={32} /> + </button> - <Copy bind:text={password} /> + <Copy bind:text={password} /> - <button type="button" class="btn" onclick={pastePassword}> - <iconify-icon icon="ph:clipboard-text-bold" width={32} /> - </button> + <button type="button" class="btn !w-auto grow" onclick={pastePassword}> + <iconify-icon icon="ph:clipboard-text-bold" width={32} /> + </button> + </div> </div> <div> {#if address} - <div class="flex items-center gap-2 break-all"> + <div class="flex flex-wrap items-center gap-2 break-all text-base"> <div> {address} </div> - <Copy bind:text={address} /> - - <button type="submit" class="btn ml-auto"> Check balance </button> + <div class="flex w-full justify-center sm:w-auto"> + <Copy bind:text={address} /> + <button type="submit" class="btn !w-auto grow ml-auto"> + <iconify-icon icon="ph:coins-bold" width={32} /> + </button> + </div> </div> {/if} </div> |