From 08f07a777c42c10b9ebf18727a4af45161b1800d Mon Sep 17 00:00:00 2001
From: Adam Soltys <asoltys@gmail.com>
Date: Wed, 25 Sep 2024 13:45:49 -0700
Subject: styles, hide followers and messages

---
 src/components/Account.svelte                      |   4 +-
 src/components/Numpad.svelte                       |   6 +-
 .../(app)/[username]/(profile)/+layout.svelte      | 119 +++++++++++----------
 src/routes/(app)/[username]/(profile)/+page.svelte |   2 +-
 src/routes/(app)/account/seed/+page.svelte         |   4 +-
 src/routes/(app)/invoice/[id]/+page.svelte         |  18 ++--
 src/routes/(app)/send/ecash/+page.svelte           |   5 +-
 7 files changed, 81 insertions(+), 77 deletions(-)

(limited to 'src')

diff --git a/src/components/Account.svelte b/src/components/Account.svelte
index b8cc76dc..a57fff12 100644
--- a/src/components/Account.svelte
+++ b/src/components/Account.svelte
@@ -32,7 +32,7 @@
 
   <div class="flex justify-center w-full text-lg gap-2">
     <a href={`/invoice`} class="contents" on:click={setAccount}>
-      <button class="py-3 px-4 hover:opacity-80 flex grow border rounded-2xl">
+      <button class="py-3 px-4 hover:opacity-80 flex grow border rounded-2xl bg-primary">
         <div class="mx-auto flex gap-2">
           <Icon icon="receive" style="w-8" />
           <div class="my-auto">{$t("user.dashboard.receive")}</div>
@@ -43,7 +43,7 @@
     <a href={`/send`} class="contents grow" on:click={setAccount}>
       <button
                       type="button"
-                      class="py-3 px-4 hover:opacity-80 flex grow border rounded-2xl"
+                      class="py-3 px-4 hover:opacity-80 flex grow border rounded-2xl bg-primary"
                       >
                       <div class="mx-auto flex gap-1">
                         <Icon icon="send" style="w-8" />
diff --git a/src/components/Numpad.svelte b/src/components/Numpad.svelte
index 78322ff5..56f037f3 100644
--- a/src/components/Numpad.svelte
+++ b/src/components/Numpad.svelte
@@ -183,8 +183,8 @@
     e.key === "Enter" && (e.preventDefault() || submit.click());
 </script>
 
-<div class="flex justify-center items-center mb-3 px-3">
-  <div class="space-y-5">
+<div class="flex justify-center items-center">
+  <div class="space-y-5 w-full">
     <div class="text-center">
       <div
         class="text-5xl md:text-6xl font-semibold tracking-widest flex justify-center"
@@ -225,7 +225,7 @@
       </div>
     </div>
 
-    <div class="grid grid-cols-3 gap-2 w-[300px] mx-auto">
+    <div class="grid grid-cols-3 gap-2 w-full mx-auto">
       {#each numPad as value}
         {#if value === arrow}
           <button
diff --git a/src/routes/(app)/[username]/(profile)/+layout.svelte b/src/routes/(app)/[username]/(profile)/+layout.svelte
index 30a6e325..cd6a44a7 100644
--- a/src/routes/(app)/[username]/(profile)/+layout.svelte
+++ b/src/routes/(app)/[username]/(profile)/+layout.svelte
@@ -27,9 +27,11 @@
   $: lnaddr = `${stripped}@${$page.url.host}`;
   $: profile = `${$page.url.host}/${stripped}`;
 
-  $: nwc = user && `nostr+walletconnect://${pk}?relay=${encodeURIComponent(
-    relay
-  )}&secret=${user.nwc}`;
+  $: nwc =
+    user &&
+    `nostr+walletconnect://${pk}?relay=${encodeURIComponent(relay)}&secret=${
+      user.nwc
+    }`;
 
   let follow = async () => {
     user.follows.push(["p", subject.pubkey, "wss://nostr.coinos.io", stripped]);
@@ -84,9 +86,13 @@
   <div
     class="w-full lg:w-[280px] xl:w-[360px] lg:absolute space-y-2 left-20 mx-auto"
   >
-    <button type="button" on:click={toggleDetails} class="flex text-3xl font-bold text-center mx-auto justify-center gap-2">
-        <div class="my-auto break-words">{display || username}</div>
-        <Icon icon="qr" style="w-8 invert my-auto" />
+    <button
+      type="button"
+      on:click={toggleDetails}
+      class="flex text-3xl font-bold text-center mx-auto justify-center gap-2"
+    >
+      <div class="my-auto break-words">{display || username}</div>
+      <Icon icon="qr" style="w-8 invert my-auto" />
     </button>
 
     {#if subject.address}
@@ -100,18 +106,18 @@
       </div>
     {/if}
 
-    <div>
-      <div class="flex justify-center gap-2">
-        <a href={`/${subject.pubkey}/follows`}
-          ><b>{subject.follows.length}</b>
-          <span class="text-secondary">{$t("user.following")}</span></a
-        >
-        <a href={`/${subject.pubkey}/followers`}
-          ><b>{subject.followers.length}</b>
-          <span class="text-secondary">{$t("user.followers")}</span></a
-        >
-      </div>
-    </div>
+    <!-- <div> -->
+    <!--   <div class="flex justify-center gap-2"> -->
+    <!--     <a href={`/${subject.pubkey}/follows`} -->
+    <!--       ><b>{subject.follows.length}</b> -->
+    <!--       <span class="text-secondary">{$t("user.following")}</span></a -->
+    <!--     > -->
+    <!--     <a href={`/${subject.pubkey}/followers`} -->
+    <!--       ><b>{subject.followers.length}</b> -->
+    <!--       <span class="text-secondary">{$t("user.followers")}</span></a -->
+    <!--     > -->
+    <!--   </div> -->
+    <!-- </div> -->
 
     {#if showDetails}
       <div class="space-y-5 pb-20">
@@ -193,45 +199,45 @@
     {/if}
 
     <div class="flex flex-wrap gap-2 w-full text-xl">
-      {#if user && user.username !== subject.username && subject.pubkey}
-        {#if following}
-          <button
-            class="mx-auto rounded-2xl border py-5 px-6 font-bold hover:opacity-80 flex bg-black text-white grow"
-            on:click={unfollow}
-          >
-            <div class="mx-auto flex">
-              <Icon icon={"profile"} style="my-auto w-8 mr-2 invert" />
-              <div class="my-auto">{$t("user.following")}</div>
-            </div>
-          </button>
-        {:else}
-          <button
-            class="mx-auto rounded-2xl border py-5 px-6 font-bold hover:opacity-80 flex grow"
-            on:click={follow}
-          >
-            <div class="mx-auto flex">
-              <Icon icon={"profile"} style="my-auto h-6 mr-2" />
-              <div class="my-auto">{$t("user.follow")}</div>
-            </div>
-          </button>
-        {/if}
-      {/if}
+      <!-- {#if user &#38;&#38; user.username !== subject.username &#38;&#38; subject.pubkey} -->
+      <!--   {#if following} -->
+      <!--     <button -->
+      <!--       class="mx-auto rounded-2xl border py-5 px-6 font-bold hover:opacity-80 flex bg-black text-white grow" -->
+      <!--       on:click={unfollow} -->
+      <!--     > -->
+      <!--       <div class="mx-auto flex"> -->
+      <!--         <Icon icon={"profile"} style="my-auto w-8 mr-2 invert" /> -->
+      <!--         <div class="my-auto">{$t("user.following")}</div> -->
+      <!--       </div> -->
+      <!--     </button> -->
+      <!--   {:else} -->
+      <!--     <button -->
+      <!--       class="mx-auto rounded-2xl border py-5 px-6 font-bold hover:opacity-80 flex grow" -->
+      <!--       on:click={follow} -->
+      <!--     > -->
+      <!--       <div class="mx-auto flex"> -->
+      <!--         <Icon icon={"profile"} style="my-auto h-6 mr-2" /> -->
+      <!--         <div class="my-auto">{$t("user.follow")}</div> -->
+      <!--       </div> -->
+      <!--     </button> -->
+      <!--   {/if} -->
+      <!-- {/if} -->
 
-      {#if user && user.username !== subject.username && subject.pubkey}
-        <a
-          href={`/messages/${subject.username}`}
-          class="contents"
-        >
-          <button
-            class="rounded-2xl border py-5 px-6 font-bold hover:opacity-80 flex w-60 grow"
-          >
-            <div class="mx-auto flex">
-              <Icon icon="message" style="w-8 mr-2 my-auto" />
-              <div class="mt-1 my-auto">{$t("user.message")}</div>
-            </div>
-          </button>
-        </a>
-      {/if}
+      <!-- {#if user &#38;&#38; user.username !== subject.username &#38;&#38; subject.pubkey} -->
+      <!--   <a -->
+      <!--     href={`/messages/${subject.username}`} -->
+      <!--     class="contents" -->
+      <!--   > -->
+      <!--     <button -->
+      <!--       class="rounded-2xl border py-5 px-6 font-bold hover:opacity-80 flex w-60 grow" -->
+      <!--     > -->
+      <!--       <div class="mx-auto flex"> -->
+      <!--         <Icon icon="message" style="w-8 mr-2 my-auto" /> -->
+      <!--         <div class="mt-1 my-auto">{$t("user.message")}</div> -->
+      <!--       </div> -->
+      <!--     </button> -->
+      <!--   </a> -->
+      <!-- {/if} -->
 
       {#if user?.admin && user.username !== subject.username}
         <form class="w-full flex" on:submit|preventDefault={reset}>
@@ -242,7 +248,6 @@
           >
             <div class="mx-auto flex">
               <Icon icon="clock" style="mr-2 my-auto w-8" />
-              <div class="mt-1 my-auto">Reset</div>
             </div>
           </button>
         </form>
diff --git a/src/routes/(app)/[username]/(profile)/+page.svelte b/src/routes/(app)/[username]/(profile)/+page.svelte
index 3bcab290..e5f4fa49 100644
--- a/src/routes/(app)/[username]/(profile)/+page.svelte
+++ b/src/routes/(app)/[username]/(profile)/+page.svelte
@@ -37,7 +37,7 @@
     <div class="flex justify-center gap-2">
       <a href={`/account/savings`} class="contents">
         <button
-          class="rounded-2xl border py-5 px-6 font-bold hover:opacity-80 flex w-full justify-center"
+          class="rounded-2xl border py-4 px-5 hover:opacity-80 flex w-full justify-center"
         >
           <div class="mx-auto flex gap-2">
             <Icon icon="plus" style="w-8 mx-auto" />
diff --git a/src/routes/(app)/account/seed/+page.svelte b/src/routes/(app)/account/seed/+page.svelte
index ec5ab1cf..5d828369 100644
--- a/src/routes/(app)/account/seed/+page.svelte
+++ b/src/routes/(app)/account/seed/+page.svelte
@@ -35,7 +35,7 @@
     <div>
       <button
         type="button"
-        class="flex gap-2 text-center break-all rounded-2xl hover:opacity-80 py-5 px-6 w-full mx-auto justify-center border whitespace-nowrap mb-2"
+        class="flex gap-2 text-center break-all rounded-2xl hover:opacity-80 py-3 px-4 w-full mx-auto justify-center border whitespace-nowrap mb-2"
         on:click={generate}
       >
         <Icon icon="random" style="w-8 my-auto" />
@@ -44,7 +44,7 @@
 
       <button
         type="button"
-        class="flex gap-2 text-center break-all rounded-2xl hover:opacity-80 py-5 px-6 w-full mx-auto justify-center border whitespace-nowrap mb-2"
+        class="flex gap-2 text-center break-all rounded-2xl hover:opacity-80 py-3 px-4 w-full mx-auto justify-center border whitespace-nowrap mb-2"
         on:click={() => copy($mnemonic)}
       >
         <Icon icon="copy" style="w-8 my-auto" />
diff --git a/src/routes/(app)/invoice/[id]/+page.svelte b/src/routes/(app)/invoice/[id]/+page.svelte
index e1763013..d0b99e23 100644
--- a/src/routes/(app)/invoice/[id]/+page.svelte
+++ b/src/routes/(app)/invoice/[id]/+page.svelte
@@ -272,14 +272,14 @@
         <div class="my-auto text-lg">Lightning</div>
       </button>
 
-        <a href={`/receive`} class="block contents">
-          <button
-            class="hover:bg-primary flex gap-1 sm:gap-2 py-3 px-2 sm:px-5 justify-center"
-          >
-            <img src="/images/cash.png" class="w-8 my-auto" />
-            <div class="my-auto text-lg">Ecash</div>
-          </button>
-        </a>
+      <a href={`/receive`} class="block contents">
+        <button
+          class="hover:bg-primary flex gap-1 sm:gap-2 py-3 px-2 sm:px-5 justify-center"
+        >
+          <img src="/images/cash.png" class="w-8 my-auto" />
+          <div class="my-auto text-lg">Ecash</div>
+        </button>
+      </a>
     </div>
 
     {#if type === types.liquid}
@@ -301,7 +301,7 @@
     <div
       class="relative mx-auto p-12 border w-96 shadow-lg rounded-md bg-white space-y-5 top-10"
     >
-      <form on:submit|preventDefault={setAmount}>
+      <form on:submit|preventDefault={setAmount} class="space-y-5">
         <Numpad
           bind:amount={newAmount}
           bind:currency
diff --git a/src/routes/(app)/send/ecash/+page.svelte b/src/routes/(app)/send/ecash/+page.svelte
index ef8e368c..6cd3f1b7 100644
--- a/src/routes/(app)/send/ecash/+page.svelte
+++ b/src/routes/(app)/send/ecash/+page.svelte
@@ -37,7 +37,7 @@
     <div>
       <button
         type="button"
-        class="hover:opacity-80 rounded-2xl py-3 px-4 mt-2 border font-bold w-full max-w-[340px] mx-auto"
+        class="hover:opacity-80 rounded-2xl py-5 px-6 mt-2 font-bold w-full mx-auto bg-primary"
         on:click|preventDefault={setMax}
         disabled={submitting}
         on:keydown={setMax}>Max ⚡️{s(balance)}</button
@@ -47,12 +47,11 @@
         use:focus
         bind:this={submit}
         type="submit"
-        class="opacity-100 hover:opacity-80 rounded-2xl border py-3 font-bold mt-2 bg-black text-white px-4 w-full flex justify-center gap-2 max-w-[340px] mx-auto"
+        class="opacity-100 hover:opacity-80 rounded-2xl border py-5 font-bold mt-2 bg-black text-white px-6 w-full flex justify-center gap-2 mx-auto"
       >
         {#if submitting}
           <Spinner />
         {:else}
-          <img src="/images/cash.png" class="w-8" />
           <div class="my-auto">{$t("payments.mint")}</div>
         {/if}
       </button>
-- 
cgit v1.2.3