fix opacity classes

17 files changed, 47 insertions, 59 deletions

diff --git a/src/components/Account.svelte b/src/components/Account.svelte
index d37101ee..b8ba94d8 100644
--- a/src/components/Account.svelte
+++ b/src/components/Account.svelte
@@ -100,20 +100,20 @@
       </button>
     </a>
 
-    <a
-      href={"/payments"}
-      class="contents"
-      onclick={(e) => setAccount(e, "/payments")}
-    >
-      <button class="btn !w-auto flex-grow">
-        <iconify-icon
-          noobserver
-          icon="ph:clock-bold"
-          width="32"
-          flip="horizontal"
-        ></iconify-icon>
-      </button>
-    </a>
+    <!-- <a -->
+    <!--   href={"/payments"} -->
+    <!--   class="contents" -->
+    <!--   onclick={(e) => setAccount(e, "/payments")} -->
+    <!-- > -->
+    <!--   <button class="btn !w-auto flex-grow"> -->
+    <!--     <iconify-icon -->
+    <!--       noobserver -->
+    <!--       icon="ph:clock-bold" -->
+    <!--       width="32" -->
+    <!--       flip="horizontal" -->
+    <!--     ></iconify-icon> -->
+    <!--   </button> -->
+    <!-- </a> -->
 
     <a
       href={`/send`}
diff --git a/src/components/AmountField.svelte b/src/components/AmountField.svelte
index cbe55e49..851518e0 100644
--- a/src/components/AmountField.svelte
+++ b/src/components/AmountField.svelte
@@ -50,7 +50,7 @@
 
 {#if setting}
   <div
-    class="fixed bg-base-100 bg-opacity-90 inset-0 overflow-y-auto h-full w-full z-50 max-w-lg mx-auto"
+    class="fixed bg-base-100/90 inset-0 overflow-y-auto h-full w-full z-50 max-w-lg mx-auto"
   >
     <div class="relative p-5 border shadow-lg rounded-md bg-base-100 space-y-5">
       <h1 class="text-center text-2xl font-semibold">
diff --git a/src/components/LandingHero.svelte b/src/components/LandingHero.svelte
index 3f24724c..812452cd 100644
--- a/src/components/LandingHero.svelte
+++ b/src/components/LandingHero.svelte
@@ -31,7 +31,7 @@
       <a href="/register">
         <button
           use:focus
-          class="btn !rounded-full bg-primary text-primary-content hover:bg-primary hover:bg-opacity-80"
+          class="btn !rounded-full bg-primary text-primary-content hover:bg-primary/80"
         >
           {$t("nav.startInSeconds")}
         </button>
diff --git a/src/components/LocationsMap.svelte b/src/components/LocationsMap.svelte
index 103e2477..b676d276 100644
--- a/src/components/LocationsMap.svelte
+++ b/src/components/LocationsMap.svelte
@@ -264,7 +264,7 @@
   <div class="absolute flex top-2 left-2 gap-2">
     <button
        aria-label="Back"
-      class="rounded-full border-2 border-black bg-base-100 w-16 h-16 flex items-center justify-center bg-opacity-80"
+      class="rounded-full border-2 border-black bg-base-100/80 w-16 h-16 flex items-center justify-center"
       onclick={back}
     >
       <iconify-icon noobserver icon="ph:arrow-left-bold" width="24"></iconify-icon>
@@ -273,7 +273,7 @@
   <div class="relative">
     {#if !showList}
       <div
-        class="space-y-1 text-sm w-[300px] max-w-[calc(100vw*0.5)] h-[300px] max-h-[calc(100vh*0.4)] overflow-y-scroll p-4 bg-opacity-90 bg-base-100 absolute right-4 bottom-8 rounded-2xl shadow text-ellipsis overflow-x-hidden"
+        class="space-y-1 text-sm w-[300px] max-w-[calc(100vw*0.5)] h-[300px] max-h-[calc(100vh*0.4)] overflow-y-scroll p-4 bg-base-100/90 absolute right-4 bottom-8 rounded-2xl shadow text-ellipsis overflow-x-hidden"
       >
         <div class="relative mb-4 sticky top-0 bg-base-100 z-10">
           <input bind:value={search} class="w-full" />
@@ -302,13 +302,13 @@
     {/if}
     <div class="absolute flex top-2 right-2 gap-2">
       <button
-        class="rounded-full border-2 border-primary bg-base-100 w-16 h-16 flex items-center justify-center bg-opacity-80"
+        class="rounded-full border-2 border-primary bg-base-100/80 w-16 h-16 flex items-center justify-center"
         onclick={toggleList}
       >
         <iconify-icon noobserver icon="ph:list-bold" width="24"></iconify-icon>
       </button>
       <button
-        class="rounded-full border-2 border-primary bg-base-100 w-16 h-16 flex items-center justify-center bg-opacity-80"
+        class="rounded-full border-2 border-primary bg-base-100/80 w-16 h-16 flex items-center justify-center"
         onclick={toggle}
       >
         {#if timeout}
diff --git a/src/components/Nostr.svelte b/src/components/Nostr.svelte
index b41cb8ff..fc85100c 100644
--- a/src/components/Nostr.svelte
+++ b/src/components/Nostr.svelte
@@ -123,7 +123,7 @@
 
 {#if $eventToSign && !$signer?.ready}
   <div
-    class="fixed inset-0 bg-base-100 bg-opacity-90 overflow-y-auto h-full w-full z-50"
+    class="fixed inset-0 bg-base-100/90 overflow-y-auto h-full w-full z-50"
   >
     <div
       class="relative mx-auto mt-10 p-5 border w-96 shadow-lg rounded-md bg-base-100 space-y-5"
diff --git a/src/components/Password.svelte b/src/components/Password.svelte
index cc350ecd..cc91d554 100644
--- a/src/components/Password.svelte
+++ b/src/components/Password.svelte
@@ -24,7 +24,7 @@
 </script>
 
 <div
-  class="fixed inset-0 bg-base-100 bg-opacity-90 overflow-y-auto h-full w-full z-50"
+  class="fixed inset-0 bg-base-100/90 overflow-y-auto h-full w-full z-50"
 >
   <div
     class="relative top-1/3 mx-auto p-5 border w-96 shadow-lg rounded-md bg-base-100 space-y-5"
diff --git a/src/components/Payments.svelte b/src/components/Payments.svelte
index daedb036..0f07cc2b 100644
--- a/src/components/Payments.svelte
+++ b/src/components/Payments.svelte
@@ -102,8 +102,7 @@
                 />
               </div>
             {:else if p.type === types.ark}
-              <iconify-icon noobserver icon="ph:vault-bold" width="32"
-              ></iconify-icon>
+              <img src="/images/ark.png" class="w-10 h-10 rounded-full object-cover" alt="Ark" />
             {/if}
 
             <div class="my-auto">
diff --git a/src/components/Pin.svelte b/src/components/Pin.svelte
index 980e17fa..06faeeb7 100644
--- a/src/components/Pin.svelte
+++ b/src/components/Pin.svelte
@@ -49,7 +49,7 @@
 {#if loaded}
   <div
     role="dialog"
-    class="fixed bg-base-100 bg-opacity-90 inset-0 h-full w-full z-50 cursor-default"
+    class="fixed bg-base-100/90 inset-0 h-full w-full z-50 cursor-default"
     on:click|preventDefault
     aria-labelledby="title"
   >
diff --git a/src/components/SetAmount.svelte b/src/components/SetAmount.svelte
index 536c8e24..c3adf9c4 100644
--- a/src/components/SetAmount.svelte
+++ b/src/components/SetAmount.svelte
@@ -20,7 +20,7 @@
 
 {#if settingAmount}
   <div
-    class="fixed inset-0 bg-base-100 bg-opacity-90 overflow-y-auto h-full w-full z-50"
+    class="fixed inset-0 bg-base-100/90 overflow-y-auto h-full w-full z-50"
   >
     <div
       class="relative mx-auto p-12 max-w-xl shadow-lg rounded-md bg-base-100 space-y-5"
diff --git a/src/components/SetMemo.svelte b/src/components/SetMemo.svelte
index f11bf780..99828d05 100644
--- a/src/components/SetMemo.svelte
+++ b/src/components/SetMemo.svelte
@@ -13,7 +13,7 @@
 
 {#if settingMemo}
   <div
-    class="fixed inset-0 bg-base-100 bg-opacity-90 overflow-y-auto h-full w-full z-50"
+    class="fixed inset-0 bg-base-100/90 overflow-y-auto h-full w-full z-50"
   >
     <div
       class="relative mx-auto p-12 max-w-xl shadow-lg rounded-md bg-base-100 space-y-5"
diff --git a/src/components/SetType.svelte b/src/components/SetType.svelte
index ecbfcba4..f195d2ee 100644
--- a/src/components/SetType.svelte
+++ b/src/components/SetType.svelte
@@ -19,7 +19,7 @@
 
 {#if settingType}
   <div
-    class="fixed inset-0 bg-base-100 bg-opacity-90 overflow-y-auto h-full w-full z-50"
+    class="fixed inset-0 bg-base-100/90 overflow-y-auto h-full w-full z-50"
   >
     <div
       class="relative mx-auto p-12 max-w-xl shadow-lg rounded-md bg-base-100 space-y-2"
diff --git a/src/components/WalletPass.svelte b/src/components/WalletPass.svelte
index 57cf69c3..9c4c35bb 100644
--- a/src/components/WalletPass.svelte
+++ b/src/components/WalletPass.svelte
@@ -9,7 +9,7 @@
 </script>
 
 <div
-  class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-20"
+  class="fixed inset-0 bg-gray-600/50 overflow-y-auto h-full w-full z-20"
 >
   <div
     class="relative top-1/3 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white space-y-5"
diff --git a/src/routes/(app)/[username]/(profile)/+layout.svelte b/src/routes/(app)/[username]/(profile)/+layout.svelte
index b384344e..5d9611a5 100644
--- a/src/routes/(app)/[username]/(profile)/+layout.svelte
+++ b/src/routes/(app)/[username]/(profile)/+layout.svelte
@@ -329,7 +329,7 @@
 
 {#if currency}
   <div
-    class="flex fixed w-full px-4 bg-base-100 py-2 pb-3 bottom-0 bg-opacity-90 tabular-nums"
+    class="flex fixed w-full px-4 bg-base-100/90 py-2 pb-3 bottom-0 tabular-nums"
     style="bottom: calc(var(--safe-area-inset-bottom) + 8px);"
   >
     <div class="text-secondary flex mr-auto">
diff --git a/src/routes/(app)/account/ark/+page.svelte b/src/routes/(app)/account/ark/+page.svelte
index ff313664..6d1d73f2 100644
--- a/src/routes/(app)/account/ark/+page.svelte
+++ b/src/routes/(app)/account/ark/+page.svelte
@@ -85,7 +85,6 @@
 
 <div class="space-y-5">
   <div class="flex items-center justify-center gap-2">
-    <iconify-icon noobserver icon="ph:vault-bold" width="32"></iconify-icon>
     <h1 class="text-3xl font-semibold">Create Ark Wallet</h1>
   </div>
 
@@ -93,28 +92,20 @@
     {#if !confirmed}
       <div class="space-y-4">
         <p class="text-secondary">
-          Your Ark wallet is secured by a private key. Back it up now - you won't be able to see it again without your password.
+          Your Ark wallet is secured by a private key. Please copy it down somewhere safe.
         </p>
 
         {#if showNsec}
           <div class="space-y-2">
-            <div class="text-sm text-secondary">Your backup key (nsec)</div>
             <div
-              class="text-sm break-all bg-warning/20 p-4 rounded-lg cursor-pointer border border-warning font-mono"
+              class="break-all p-4 rounded-lg cursor-pointer border"
               onclick={() => copy(nsec)}
             >
               {nsec}
             </div>
-            <div class="text-sm text-warning">
-              Click to copy. Store this somewhere safe - anyone with this key can spend your funds.
-            </div>
           </div>
 
           <div class="flex gap-2">
-            <button type="button" class="btn flex-grow" onclick={generateKey}>
-              <iconify-icon noobserver icon="ph:dice-three-bold" width="24"></iconify-icon>
-              Regenerate
-            </button>
             <button type="button" class="btn btn-accent flex-grow" onclick={confirmBackup}>
               <iconify-icon noobserver icon="ph:check-bold" width="24"></iconify-icon>
               I've backed it up
diff --git a/src/routes/(app)/account/savings/+page.svelte b/src/routes/(app)/account/savings/+page.svelte
index a474ad52..3e26fd3e 100644
--- a/src/routes/(app)/account/savings/+page.svelte
+++ b/src/routes/(app)/account/savings/+page.svelte
@@ -3,35 +3,33 @@
 </script>
 
 <div class="space-y-5">
-  <h1 class="text-center text-3xl font-semibold">
-    Choose wallet type
-  </h1>
+  <h1 class="text-center text-3xl font-semibold">Choose wallet type</h1>
 
   <div class="container w-full mx-auto text-lg px-4 max-w-xl space-y-5">
     <a href="/account/bitcoin" class="block">
-      <div class="card card-side shadow shadow-base-300 p-8 hover:bg-base-200">
-        <figure class="w-20 flex items-center justify-center">
-          <iconify-icon noobserver icon="ph:coins-bold" width="64"></iconify-icon>
-        </figure>
+      <div class="card card-side shadow shadow-base-300 p-8 hover:bg-base-200 gap-4 items-center">
+        <iconify-icon noobserver icon="logos:bitcoin" width={48}></iconify-icon>
         <div>
           <div class="text-xl">Bitcoin (On-chain)</div>
           <div class="text-secondary">
-            Standard Bitcoin wallet secured by a 12-word seed phrase.
-            Full control over your UTXOs.
+            Standard Bitcoin wallet secured by a 12-word seed phrase. Full
+            control over your UTXOs.
           </div>
         </div>
       </div>
     </a>
     <a href="/account/ark" class="block">
-      <div class="card card-side shadow shadow-base-300 p-8 hover:bg-base-200">
-        <figure class="w-20 flex items-center justify-center">
-          <iconify-icon noobserver icon="ph:vault-bold" width="64"></iconify-icon>
-        </figure>
+      <div class="card card-side shadow shadow-base-300 p-8 hover:bg-base-200 gap-4 items-center">
+        <img
+          src="/images/ark.png"
+          class="w-12 h-12 rounded-full object-cover"
+          alt="Ark"
+        />
         <div>
           <div class="text-xl">Ark (Off-chain)</div>
           <div class="text-secondary">
-            Fast, private transactions using virtual UTXOs.
-            Lower fees with instant settlement.
+            Fast, private transactions using virtual UTXOs. Lower fees with
+            instant settlement.
           </div>
         </div>
       </div>
diff --git a/src/routes/(app)/settings/account/+page.svelte b/src/routes/(app)/settings/account/+page.svelte
index 8b38ffe8..c51c2928 100644
--- a/src/routes/(app)/settings/account/+page.svelte
+++ b/src/routes/(app)/settings/account/+page.svelte
@@ -272,7 +272,7 @@
 
 {#if editingThreshold}
   <div
-    class="fixed bg-base-100 bg-opacity-90 inset-0 overflow-y-auto h-full w-full z-50 max-w-lg mx-auto"
+    class="fixed bg-base-100/90 inset-0 overflow-y-auto h-full w-full z-50 max-w-lg mx-auto"
   >
     <div class="relative p-5 border shadow-lg rounded-md bg-base-100 space-y-5">
       <h1 class="text-center text-2xl font-semibold">
@@ -298,7 +298,7 @@
 
 {#if editingReserve}
   <div
-    class="fixed bg-base-100 bg-opacity-90 inset-0 overflow-y-auto h-full w-full z-50 mx-auto max-w-lg"
+    class="fixed bg-base-100/90 inset-0 overflow-y-auto h-full w-full z-50 mx-auto max-w-lg"
   >
     <div
       class="relative mx-auto p-5 border shadow-lg rounded-md bg-base-100 space-y-5 text-center"
diff --git a/src/routes/(static)/login/+page.svelte b/src/routes/(static)/login/+page.svelte
index fe2f4533..28e82e09 100644
--- a/src/routes/(static)/login/+page.svelte
+++ b/src/routes/(static)/login/+page.svelte
@@ -227,7 +227,7 @@
 
 {#if need2fa && token.length < 6}
   <div
-    class="fixed bg-base-100 bg-opacity-90 inset-0 h-full w-full z-50 cursor-default"
+    class="fixed bg-base-100/90 inset-0 h-full w-full z-50 cursor-default"
     onclick={(e) => e.stopPropagation()}
     role="dialog"
     aria-labelledby="title"