From a8946924c5d6327cbb69b11192d42d314bbfebb6 Mon Sep 17 00:00:00 2001
From: Adam Soltys <asoltys@gmail.com>
Date: Tue, 2 Jan 2024 16:34:21 -0800
Subject: button styles

---
 .../(app)/[username]/invoice/[id]/+page.svelte     | 55 +++++++++-------------
 1 file changed, 23 insertions(+), 32 deletions(-)

(limited to 'src')

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"
-- 
cgit v1.2.3