design tweaks

4 files changed, 47 insertions, 43 deletions

diff --git a/src/components/Account.svelte b/src/components/Account.svelte
index 33c769de..2d1dba56 100644
--- a/src/components/Account.svelte
+++ b/src/components/Account.svelte
@@ -58,7 +58,7 @@
   let isArk = $derived(accountType === "ark");
 </script>
 
-<div class="rounded-2xl bg-base-200 p-5 shadow space-y-4" aria-label="Payments">
+<div class="shadow-lg space-y-4 p-4" aria-label="Payments">
   <div class="flex items-center gap-3">
     {#if isArk}
       <img src="/images/ark.png" class="w-8 h-8 rounded-full object-cover" alt="Ark" />
@@ -98,7 +98,7 @@
           width="32"
           flip="horizontal"
         ></iconify-icon>
-        <div class="my-auto">{$t("user.dashboard.receive")}</div>
+        <div class="my-auto hidden sm:block">{$t("user.dashboard.receive")}</div>
       </button>
     </a>
 
@@ -113,7 +113,7 @@
           icon="ph:clock-bold"
           width="32"
         ></iconify-icon>
-        <div class="my-auto">{$t("user.dashboard.history")}</div>
+        <div class="my-auto hidden sm:block">{$t("user.dashboard.history")}</div>
       </button>
     </a>
 
@@ -125,7 +125,7 @@
       <button type="button" class="btn !w-auto flex-1">
         <iconify-icon noobserver icon="ph:paper-plane-right-bold" width="32"
         ></iconify-icon>
-        <div class="my-auto">{$t("user.dashboard.send")}</div>
+        <div class="my-auto hidden sm:block">{$t("user.dashboard.send")}</div>
       </button>
     </a>
   </div>
diff --git a/src/components/Amount.svelte b/src/components/Amount.svelte
index f59d3c2c..e5aeabde 100644
--- a/src/components/Amount.svelte
+++ b/src/components/Amount.svelte
@@ -9,6 +9,7 @@
     rate,
     currency,
     locked = false,
+    showFiat = true,
   } = $props();
 
   const icon = $derived(locked ? "ph:lock-fill" : "ph:lightning-fill");
@@ -39,23 +40,25 @@
         </div>
       {/if}
     </h2>
-    <h3
-      class="flex text-secondary md:text-lg cursor-copy items-center gap-1"
-      class:justify-center={align !== "left"}
-    >
-      <button
-        type="button"
-        class="flex items-center gap-1"
-        onclick={() => copy(toFiat(amount, rate).toFixed(2))}
-        aria-label="Copy fiat amount"
+    {#if showFiat}
+      <h3
+        class="flex text-secondary md:text-lg cursor-copy items-center gap-1"
+        class:justify-center={align !== "left"}
       >
-        {f(toFiat(amount, rate), currency, locale)}
-        {#if tip}
-          <span class="text-base">
-            +{f(toFiat(tip, rate), currency, locale)}
-          </span>
-        {/if}
-      </button>
-    </h3>
+        <button
+          type="button"
+          class="flex items-center gap-1"
+          onclick={() => copy(toFiat(amount, rate).toFixed(2))}
+          aria-label="Copy fiat amount"
+        >
+          {f(toFiat(amount, rate), currency, locale)}
+          {#if tip}
+            <span class="text-base">
+              +{f(toFiat(tip, rate), currency, locale)}
+            </span>
+          {/if}
+        </button>
+      </h3>
+    {/if}
   </div>
 {/if}
diff --git a/src/components/AppHeader.svelte b/src/components/AppHeader.svelte
index bf15966a..10d7604c 100644
--- a/src/components/AppHeader.svelte
+++ b/src/components/AppHeader.svelte
@@ -22,27 +22,27 @@
   );
 
   const links = $derived([
-    {
-      href: `/${user?.username}`,
-      icon: "ph:house-bold",
-      label: "Home",
-    },
-    {
-      href: `/${user?.username}/receive`,
-      icon: "ph:hand-coins-bold",
-      flip: "horizontal",
-      label: "Receive",
-    },
-    {
-      href: `/payments`,
-      icon: "ph:clock-bold",
-      label: "Payments",
-    },
-    {
-      href: `/send`,
-      icon: "ph:paper-plane-right-bold",
-      label: "Send",
-    },
+    // {
+    //   href: `/${user?.username}`,
+    //   icon: "ph:house-bold",
+    //   label: "Home",
+    // },
+    // {
+    //   href: `/${user?.username}/receive`,
+    //   icon: "ph:hand-coins-bold",
+    //   flip: "horizontal",
+    //   label: "Receive",
+    // },
+    // {
+    //   href: `/payments`,
+    //   icon: "ph:clock-bold",
+    //   label: "Payments",
+    // },
+    // {
+    //   href: `/send`,
+    //   icon: "ph:paper-plane-right-bold",
+    //   label: "Send",
+    // },
     // {
     //   href: `/logout`,
     //   icon: "ph:sign-out-bold",
diff --git a/src/components/Balance.svelte b/src/components/Balance.svelte
index 3d45b543..38037eaa 100644
--- a/src/components/Balance.svelte
+++ b/src/components/Balance.svelte
@@ -30,10 +30,11 @@
   {:else if !isNaN(rate)}
     <div class="flex gap-4">
       <Amount
-        amount={Math.max(balance - (id === user.id ? (locked || 0) : 0), 0)}
+        amount={Math.max(balance - (id === user.id ? locked || 0 : 0), 0)}
         {rate}
         {currency}
         {locale}
+        showFiat={false}
         align="left"
       />
       {#if locked && id === user.id}