diff options
| author | Adam Soltys <[email protected]> | 2024-01-02 16:34:21 -0800 |
|---|---|---|
| committer | Adam Soltys <[email protected]> | 2024-01-02 16:34:21 -0800 |
| commit | 5107d4f34ba72e4740631201d31c098b66182eb3 (patch) | |
| tree | d4377e2da31ebf5af8d2c951c8b7efbe8373b4b3 | |
| parent | 38eb8955db763a0674737840faa7330026d84fa4 (diff) | |
| download | coinos-ui-5107d4f34ba72e4740631201d31c098b66182eb3.tar.gz coinos-ui-5107d4f34ba72e4740631201d31c098b66182eb3.zip | |
button styles
| -rw-r--r-- | src/routes/(app)/[username]/invoice/[id]/+page.svelte | 55 |
1 files changed, 23 insertions, 32 deletions
diff --git a/src/routes/(app)/[username]/invoice/[id]/+page.svelte b/src/routes/(app)/[username]/invoice/[id]/+page.svelte index c9225998..e99a6d95 100644 --- a/src/routes/(app)/[username]/invoice/[id]/+page.svelte +++ b/src/routes/(app)/[username]/invoice/[id]/+page.svelte @@ -167,53 +167,44 @@ </div> {/if} - {#if type === types.liquid} - <div class="flex justify-center"> - <div class="my-auto text-xl text-center"> - We only support <span class="text-teal-500 font-bold">L-BTC</span>, - don't deposit Liquid assets - </div> - </div> - {/if} - <div class="flex justify-center gap-2"> <button - class="rounded-full hover:opacity-80 my-auto" + class="hover:opacity-80 my-auto flex gap-1 p-2" + class:bg-gray-200={type === types.bitcoin} on:click={() => setType(types.bitcoin)} > - <img - src="/images/bitcoin.svg" - class="w-12" - class:w-16={type === types.bitcoin} - class:h-16={type === types.bitcoin} - alt="Bitcoin" - /> + <img src="/images/bitcoin.svg" class="w-8" alt="Bitcoin" /> + <div class="my-auto text-lg">Bitcoin</div> </button> <button - class="rounded-full hover:opacity-80 text-2xl p-1 my-auto bg-gray-700 w-12 h-12" - class:w-16={type === types.lightning} - class:h-16={type === types.lightning} - class:text-3xl={type === types.lightning} - on:click={() => setType(types.lightning)} + class="hover:opacity-80 my-auto flex gap-1 p-2" + class:bg-gray-200={type === types.liquid} + on:click={() => setType(types.liquid)} > - ⚡️ + <img src="/images/liquid.svg" class="w-8" alt="Liquid" /> + <div class="my-auto text-lg">Liquid</div> </button> <button - class="rounded-full hover:opacity-80 my-auto" - on:click={() => setType(types.liquid)} + class="hover:opacity-80 flex gap-1 p-2" + class:bg-gray-200={type === types.lightning} + on:click={() => setType(types.lightning)} > - <img - src="/images/liquid.svg" - class="w-12" - class:w-16={type === types.liquid} - class:h-16={type === types.liquid} - alt="Liquid" - /> + <div>⚡️</div> + <div class="my-auto text-lg">Lightning</div> </button> </div> + {#if type === types.liquid} + <div class="flex justify-center"> + <div class="my-auto text-xl text-center"> + We only support <span class="text-teal-500 font-bold">L-BTC</span>, + don't deposit any other assets + </div> + </div> + {/if} + <button type="button" class="flex gap-2 text-center break-all rounded-full text-white bg-black hover:opacity-80 p-4 w-full md:w-80 mx-auto text-xl justify-center" |