From 6cf4bc7439099cebbfff8bb1869301dde4c2b064 Mon Sep 17 00:00:00 2001
From: Adam Soltys <asoltys@gmail.com>
Date: Tue, 2 Jan 2024 21:17:19 -0800
Subject: buttons

---
 src/locales/en.json                                |   1 +
 src/routes/(app)/[username]/(profile)/+page.svelte | 111 +++++++++++----------
 2 files changed, 62 insertions(+), 50 deletions(-)

(limited to 'src')

diff --git a/src/locales/en.json b/src/locales/en.json
index 9aaf3eca..1afa0f22 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -177,6 +177,7 @@
     "this": "This",
     "lightningAddress": "Lightning address",
     "dashboard": {
+      "receive": "Receive",
       "go": "Go",
       "dashboard": "Dashboard",
       "accountBalance": "Account Balance",
diff --git a/src/routes/(app)/[username]/(profile)/+page.svelte b/src/routes/(app)/[username]/(profile)/+page.svelte
index e728a336..337e80d8 100644
--- a/src/routes/(app)/[username]/(profile)/+page.svelte
+++ b/src/routes/(app)/[username]/(profile)/+page.svelte
@@ -11,11 +11,21 @@
   import { browser } from "$app/environment";
 
   export let data;
-  let { messages, notes, invoices, sent, received, subject, user, rate, rates } =
-    data;
+  let {
+    messages,
+    notes,
+    invoices,
+    sent,
+    received,
+    subject,
+    user,
+    rate,
+    rates,
+  } = data;
   $: refresh(data);
   let refresh = (d) =>
-    ({ messages, notes, invoices, sent, received, subject, user, rate, rates } = d);
+    ({ messages, notes, invoices, sent, received, subject, user, rate, rates } =
+      d);
 
   let keys = new Set();
   let latest = [];
@@ -67,62 +77,63 @@
 </script>
 
 <div class="space-y-8">
-	{#if user?.id === subject.id}
-		<div>
-			<div class="flex justify-center lg:justify-start mb-8">
+  {#if user?.id === subject.id}
+    <div>
+      <div class="flex justify-center lg:justify-start mb-8">
         <Balance {user} {rate} />
-			</div>
-			<div class="space-y-8 mt-8">
-				{#if !user.balance}
-					<p class="text-secondary text-lg">
-						{$t('user.welcome')}
-					</p>
-				{/if}
-
-				<div class="flex gap-4 justify-center w-full">
-					<a href={`/${user.username}/receive`}>
-						<button
-							class="rounded-full border py-3 px-6 font-bold hover:opacity-80 flex w-60 bg-black text-white h-14"
-						>
-							<div class="mx-auto flex">
-								<Icon icon="numpad" style="my-auto h-6 mr-2 invert" />
-                <div class="my-auto mt-1">{$t('user.requestPayment')}</div>
-							</div>
-						</button>
-					</a>
-
-          <a href={`/send`}>
+      </div>
+      <div class="space-y-8 mt-8">
+        {#if !user.balance}
+          <p class="text-secondary text-lg">
+            {$t("user.welcome")}
+          </p>
+        {/if}
+
+        <div
+          class="flex flex-wrap gap-4 justify-center w-full"
+        >
+          <a href={`/send`} class="w-full md:w-40">
             <button
-              class="rounded-full border py-3 px-6 font-bold hover:opacity-80 flex w-60 bg-black text-white h-14"
+              class="rounded-full border py-3 px-6 font-bold hover:opacity-80 flex h-14 w-full"
             >
               <div class="mx-auto my-auto flex">
-                <Icon icon="send" style="my-auto h-6 mr-2 invert" />
+                <Icon icon="send" style="my-auto h-6 mr-2" />
                 <div class="my-auto">{$t("user.dashboard.send")}</div>
               </div>
             </button>
           </a>
 
-					<a href={`/buy`}>
-						<button
-							class="rounded-full border py-3 px-6 font-bold hover:opacity-80 flex w-60 bg-black text-white h-14"
-						>
-							<div class="mx-auto flex">
-								<!-- <Icon icon="plus" style="my-auto h-6 mr-2" /> -->
-
-								<img
-									src="/images/bitcoin.svg"
-									class="w-8 border-4 border-transparent mr-2"
-									alt="Bitcoin"
-								/>
-								<div class="my-auto mt-1">Buy Bitcoin</div>
-							</div>
-						</button>
-					</a>
-				</div>
-			</div>
-
-		</div>
-	{/if}
+          <a href={`/${user.username}/receive`} class="w-full md:w-40 my-auto">
+            <button
+              class="rounded-full border py-3 px-6 font-bold hover:opacity-80 flex h-14 w-full"
+            >
+              <div class="mx-auto flex">
+                <Icon icon="numpad" style="my-auto h-6 mr-2" />
+                <div class="my-auto mt-1">{$t("user.dashboard.receive")}</div>
+              </div>
+            </button>
+          </a>
+
+          <a href={`/buy`} class="w-full md:w-52">
+            <button
+              class="rounded-full border py-3 px-6 font-bold hover:opacity-80 flex h-14 w-full"
+            >
+              <div class="mx-auto flex">
+                <!-- <Icon icon="plus" style="my-auto h-6 mr-2" /> -->
+
+                <img
+                  src="/images/bitcoin.svg"
+                  class="w-8 border-4 border-transparent mr-2"
+                  alt="Bitcoin"
+                />
+                <div class="my-auto mt-1">Buy Bitcoin</div>
+              </div>
+            </button>
+          </a>
+        </div>
+      </div>
+    </div>
+  {/if}
 
   {#if invoices.length}
     <div>
-- 
cgit v1.2.3