invoice styles

3 files changed, 25 insertions, 22 deletions

diff --git a/src/locales/en.json b/src/locales/en.json
index 03a5e06b..8b1039c1 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -287,7 +287,7 @@
     "qr": "QR",
     "copyLink": "Copy Link",
     "copyText": "Copy Text",
-    "openLink": "Open Wallet",
+    "openLink": "Open wallet",
     "moreOptions": "More options",
     "total": "Total",
     "gainLoss": "Gain/Loss",
diff --git a/src/routes/(app)/[username]/invoice/[id]/+page.svelte b/src/routes/(app)/[username]/invoice/[id]/+page.svelte
index 3be9cec9..e12e3913 100644
--- a/src/routes/(app)/[username]/invoice/[id]/+page.svelte
+++ b/src/routes/(app)/[username]/invoice/[id]/+page.svelte
@@ -124,7 +124,7 @@
   };
 </script>
 
-<div class="invoice container mx-auto max-w-xl px-4 space-y-5">
+<div class="invoice container mx-auto max-w-xl px-4 space-y-2">
   {#if showQr}
     <div>
       <a
@@ -167,10 +167,10 @@
     </div>
   {/if}
 
-  <div class="flex justify-center gap-2">
+  <div class="flex justify-center text-secondary">
     <button
-      class="hover:bg-gray-200 my-auto flex gap-1 p-2"
-      class:bg-gray-200={type === types.bitcoin}
+      class="hover:bg-primary my-auto flex gap-1 sm:gap-2 py-3 px-2 sm:px-5 rounded-full"
+      class:bg-primary={type === types.bitcoin}
       on:click={() => setType(types.bitcoin)}
     >
       <img src="/images/bitcoin.svg" class="w-8" alt="Bitcoin" />
@@ -178,8 +178,8 @@
     </button>
 
     <button
-      class="hover:bg-gray-200 my-auto flex gap-1 p-2"
-      class:bg-gray-200={type === types.liquid}
+      class="hover:bg-primary my-auto flex gap-1 sm:gap-2 py-3 px-2 sm:px-5 rounded-full"
+      class:bg-primary={type === types.liquid}
       on:click={() => setType(types.liquid)}
     >
       <img src="/images/liquid.svg" class="w-8" alt="Liquid" />
@@ -187,8 +187,8 @@
     </button>
 
     <button
-      class="hover:bg-gray-200 flex gap-1 p-2"
-      class:bg-gray-200={type === types.lightning}
+      class="hover:bg-primary flex gap-1 sm:gap-2 py-3 px-2 sm:px-5 rounded-full"
+      class:bg-primary={type === types.lightning}
       on:click={() => setType(types.lightning)}
     >
       <div class="bg-white rounded-full w-8 h-8 text-center flex">
@@ -209,31 +209,32 @@
 
   <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"
+    class="flex gap-2 text-center break-all text-lg rounded-full hover:opacity-80 p-4 w-full mx-auto justify-center border text-secondary"
     on:click={() => copy(txt)}
   >
-    <Icon icon="copy" style="w-8 invert my-auto" />
-    <div class="my-auto font-semibold">
-      {txt.substr(0, 6)} ... {txt.substr(-10)}
+    <Icon icon="copy" style="w-8 my-auto font-semibold" />
+    <div class="my-auto">
+      {txt.substr(0, 10)}..{txt.substr(-12)}
     </div>
   </button>
 
-  <div class="w-full flex justify-center gap-2 flex-wrap">
-    <a href={link} class="w-full md:w-auto">
+
+  <div class="w-full flex justify-center gap-2 flex-wrap text-secondary">
+    <a href={link} class="w-full">
       <button
-        class="w-full md:w-auto flex justify-center rounded-full border py-3 px-5 hover:opacity-80 font-semibold"
+        class="w-full flex justify-center rounded-full border py-3 px-5 hover:opacity-80 text-lg"
       >
         <Icon icon="mobile" style="mr-1 w-6" />
-        <div class="text-secondary">{$t("payments.openLink")}</div>
+        <div>{$t("payments.openLink")}</div>
       </button>
     </a>
 
     <button
-      class="w-full md:w-auto flex justify-center rounded-full border py-3 px-5 hover:opacity-80 font-semibold"
+      class="w-full flex justify-center rounded-full border py-3 px-5 hover:opacity-80 text-lg"
       on:click={() => (showQr = !showQr)}
     >
       <Icon icon="qr" style="mr-1 invert" />
-      <div class="text-secondary">
+      <div>
         {showQr ? $t("payments.hide") : $t("payments.show")}
         {$t("payments.qr")}
       </div></button
diff --git a/static/icons/copy.svg b/static/icons/copy.svg
index 38b43e02..90375679 100644
--- a/static/icons/copy.svg
+++ b/static/icons/copy.svg
@@ -1,3 +1,5 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M8 16H6C4.89543 16 4 15.1046 4 14V6C4 4.89543 4.89543 4 6 4H14C15.1046 4 16 4.89543 16 6V8M10 20H18C19.1046 20 20 19.1046 20 18V10C20 8.89543 19.1046 8 18 8H10C8.89543 8 8 8.89543 8 10V18C8 19.1046 8.89543 20 10 20Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16 12.9V17.1C16 20.6 14.6 22 11.1 22H6.9C3.4 22 2 20.6 2 17.1V12.9C2 9.4 3.4 8 6.9 8H11.1C14.6 8 16 9.4 16 12.9Z" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path opacity="0.4" d="M22 6.9V11.1C22 14.6 20.6 16 17.1 16H16V12.9C16 9.4 14.6 8 11.1 8H8V6.9C8 3.4 9.4 2 12.9 2H17.1C20.6 2 22 3.4 22 6.9Z" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file