items cleanup

3 files changed, 79 insertions, 49 deletions

diff --git a/src/components/ItemForm.svelte b/src/components/ItemForm.svelte
index bd300344..7052ec64 100644
--- a/src/components/ItemForm.svelte
+++ b/src/components/ItemForm.svelte
@@ -75,7 +75,7 @@
 
   <div>
     <label for="name" class="font-bold mb-1 block">{$t("items.name")}</label>
-    <input name="name" bind:value={item.name} />
+    <input name="name" bind:value={item.name} class="bg-black text-white" />
   </div>
 
   <div>
@@ -84,7 +84,7 @@
       <input
         name="price"
         bind:value={item.price}
-        class="border-r-none rounded-r-none"
+        class="border-r-none rounded-r-none bg-black text-white"
       />
       <div
         class="text-gray-600 rounded-r-2xl p-4 my-auto rounded-l-none rounded border bg-gray-100"
@@ -135,7 +135,7 @@
   </div>
 
   <button
-    class="rounded-full py-5 px-6 font-bold hover:opacity-80 bg-black text-white text-2xl w-full text-center"
+    class="rounded-full py-5 px-6 font-bold hover:opacity-80 border bg-black text-white text-2xl w-full text-center"
   >
     {#if submitting}
       <Spinner />
diff --git a/src/routes/(app)/[username]/(profile)/+page.svelte b/src/routes/(app)/[username]/(profile)/+page.svelte
index 1dd8f573..476e1845 100644
--- a/src/routes/(app)/[username]/(profile)/+page.svelte
+++ b/src/routes/(app)/[username]/(profile)/+page.svelte
@@ -133,10 +133,10 @@
       <a href={`/send`} class="contents grow">
         <button
           type="button"
-          class="rounded-2xl border py-5 px-6 font-bold hover:opacity-80 flex bg-primary grow"
+          class="rounded-2xl border py-5 px-6 font-bold hover:opacity-80 flex grow"
         >
           <div class="mx-auto flex gap-2">
-            <Icon icon="send" style="w-8" />
+            <Icon icon="send" style="w-8 invert" />
             <div class="my-auto">{$t("user.dashboard.send")}</div>
           </div>
         </button>
@@ -144,10 +144,10 @@
 
       <a href={`/${user.username}/receive`} class="contents">
         <button
-          class="rounded-2xl border py-5 px-6 font-bold hover:opacity-80 flex bg-primary grow"
+          class="rounded-2xl border py-5 px-6 font-bold hover:opacity-80 flex grow"
         >
           <div class="mx-auto flex gap-2">
-            <Icon icon="numpad" style="w-8" />
+            <Icon icon="numpad" style="w-8 invert" />
             <div class="my-auto">{$t("user.dashboard.receive")}</div>
           </div>
         </button>
@@ -167,6 +167,33 @@
         </button>
       {/if}
     </div>
+
+    <div class="flex flex-wrap gap-3 justify-center w-full text-xl">
+        <a href={`/${user.username}/buy`} class="w-full contents">
+      <button
+        class="rounded-2xl border py-5 px-6 font-bold hover:opacity-80 flex grow mt-2"
+      >
+        <div class="mx-auto flex gap-2">
+          <img
+            src="/images/bitcoin.svg"
+            class="w-8 border-4 border-transparent mr-2"
+            alt="Bitcoin"
+          />
+          <div class="my-auto">Buy Bitcoin</div>
+        </div>
+      </button>
+    </a>
+    <a href={`/${user.username}/items/create`} class="w-full contents">
+      <button
+        class="rounded-2xl border py-5 px-6 font-bold hover:opacity-80 flex grow mt-2"
+      >
+        <div class="mx-auto flex gap-2">
+            <Icon icon="plus" style="w-8 mx-auto invert" />
+            <div class="my-auto">{$t("items.add")}</div>
+        </div>
+      </button>
+    </a>
+    </div>
   {/if}
 
   {#if items.length}
@@ -238,7 +265,7 @@
             </div>
           {/if}
         </div>
-        <div class="bg-white rounded-xl py-2">
+        <div class="bg-black text-white rounded-xl py-2">
           <div class="flex text-left gap-2">
             <div class="overflow-hidden space-y-1">
               <div class="text-2xl break-words">{i.name}</div>
diff --git a/src/routes/(app)/[username]/buy/+page.svelte b/src/routes/(app)/[username]/buy/+page.svelte
index 48bab6ce..53d1db87 100644
--- a/src/routes/(app)/[username]/buy/+page.svelte
+++ b/src/routes/(app)/[username]/buy/+page.svelte
@@ -1,6 +1,6 @@
 <script>
   import { enhance } from "$app/forms";
-	import { PUBLIC_ONRAMPER } from '$env/static/public';
+  import { PUBLIC_ONRAMPER } from "$env/static/public";
   import Icon from "$comp/Icon.svelte";
   import Lock from "$comp/Lock.svelte";
   import Card from "$comp/Card.svelte";
@@ -8,62 +8,65 @@
   import Spinner from "$comp/Spinner.svelte";
   import { f } from "$lib/utils";
 
-  export let data, form, address;
+  export let data, form;
 
+  let { address } = data;
   let { username, currency } = data.user;
   let loading;
 
   let amount, n, d, cvc;
 </script>
 
-<div class="container px-4 max-w-xl mx-auto ">
+<div class="container px-4 max-w-xl mx-auto">
   <!-- <div class="w-full flex">
     <a href="/" class="mx-auto">
 	  	<img src="images/logo.png" alt="" class="dark:hidden block" />
 		<img src="images/logo-white.png" alt="" class="hidden dark:block" />
     </a>
   </div> -->
-  <h1 class="px-3 md:px-0 text-center text-4xl md:text-5xl font-semibold font-bebasNeue tracking-[0.2rem] mb-4">
+  <h1
+    class="px-3 md:px-0 text-center text-4xl md:text-5xl font-semibold font-bebasNeue tracking-[0.2rem] mb-4"
+  >
     Buy
   </h1>
 
-	<div class="mb-6">
-		<div class="flex w-full justify-center">Your bitcoin address</div>
-		<div class="flex w-full justify-center font-bold">
-			<div>
-				{address}
-				<!-- fs5werw748272asfds584927jhjk3458927sdfs38972 -->
-			</div>
-		</div>
-		<!-- on:click={() => copy(address)} -->
-		<button class="flex mx-auto mt-5 gap-2" on:click={() => copy(address)} >
-			<Icon icon="copy" style="w-10 max-w-none dark:invert" />
-			<div class="my-auto">Copy</div>
-		</button>
-	</div>
+  <div class="mb-6">
+    <div class="flex w-full justify-center">Your bitcoin address</div>
+    <div class="flex w-full justify-center font-bold">
+      <div>
+        {address}
+        <!-- fs5werw748272asfds584927jhjk3458927sdfs38972 -->
+      </div>
+    </div>
+    <!-- on:click={() => copy(address)} -->
+    <button class="flex mx-auto mt-5 gap-2" on:click={() => copy(address)}>
+      <Icon icon="copy" style="w-10 max-w-none dark:invert" />
+      <div class="my-auto">Copy</div>
+    </button>
+  </div>
 
-	<div class="flex justify-center items-center">
-		<div class="">
-				<iframe
-				style="border-radius: 10px; border: 1px solid #58585f; margin: auto;max-width: 420px;"
-				class="dark:hidden"
-				src={`https://buy.onramper.com/?apiKey=${PUBLIC_ONRAMPER}&themeName=light&containerColor=ffffff&primaryColor=7105f3ff&secondaryColor=ffffff&cardColor=f6f7f9&primaryTextColor=141519&secondaryTextColor=6b6f80&borderRadius=2&wgBorderRadius=1`}
-				height="630px"
-				width="420px"
-				title="Onramper widget"
-				allow="accelerometer; autoplay; camera; gyroscope; payment"
-				/>
-				<iframe
-				style="border-radius: 10px; border: 1px solid #58585f; margin: auto;max-width: 420px;"
-				class="hidden dark:block"
-				src={`https://buy.onramper.com/?apiKey=${PUBLIC_ONRAMPER}&themeName=dark&containerColor=292524ff&primaryColor=7105f3ff&secondaryColor=292524ff&cardColor=44403cff&primaryTextColor=ffffff&secondaryTextColor=ffffffff&borderRadius=2&wgBorderRadius=1`}
-				height="630px"
-				width="420px"
-				title="Onramper widget"
-				allow="accelerometer; autoplay; camera; gyroscope; payment"
-				/>
-		</div>
-	</div>
+  <div class="flex justify-center items-center">
+    <div class="">
+      <iframe
+        style="border-radius: 10px; border: 1px solid #58585f; margin: auto;max-width: 420px;"
+        class="dark:hidden"
+        src={`https://buy.onramper.com/?apiKey=${PUBLIC_ONRAMPER}&themeName=light&containerColor=ffffff&primaryColor=7105f3ff&secondaryColor=ffffff&cardColor=f6f7f9&primaryTextColor=141519&secondaryTextColor=6b6f80&borderRadius=2&wgBorderRadius=1`}
+        height="630px"
+        width="420px"
+        title="Onramper widget"
+        allow="accelerometer; autoplay; camera; gyroscope; payment"
+      />
+      <iframe
+        style="border-radius: 10px; border: 1px solid #58585f; margin: auto;max-width: 420px;"
+        class="hidden dark:block"
+        src={`https://buy.onramper.com/?apiKey=${PUBLIC_ONRAMPER}&themeName=dark&containerColor=292524ff&primaryColor=7105f3ff&secondaryColor=292524ff&cardColor=44403cff&primaryTextColor=ffffff&secondaryTextColor=ffffffff&borderRadius=2&wgBorderRadius=1`}
+        height="630px"
+        width="420px"
+        title="Onramper widget"
+        allow="accelerometer; autoplay; camera; gyroscope; payment"
+      />
+    </div>
+  </div>
 </div>
 
-<!-- src/routes/(app)/buy -->
\ No newline at end of file
+<!-- src/routes/(app)/buy -->