5 files changed, 13 insertions, 20 deletions
diff --git a/src/components/Account.svelte b/src/components/Account.svelte
index 45916e0b..b3bba3b1 100644
--- a/src/components/Account.svelte
+++ b/src/components/Account.svelte
@@ -15,7 +15,7 @@
 
 <a
   href={`/payments`}
-  class="block space-y-2 border-black py-4"
+  class="block space-y-2 border-primary py-4"
   class:border-b-8={!last}
   on:click={setAccount}
 >
diff --git a/src/components/Pin.svelte b/src/components/Pin.svelte
index 9ac3d754..3a8e9e84 100644
--- a/src/components/Pin.svelte
+++ b/src/components/Pin.svelte
@@ -44,11 +44,9 @@
 </script>
 
 {#if loaded}
-  <div
-    class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50"
-  >
+  <div class="fixed inset-0 overflow-y-auto h-full w-full z-50">
     <div
-      class="relative top-40 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white space-y-5"
+      class="relative top-40 mx-auto p-5 border w-96 shadow-lg rounded-md bg-base-100 space-y-5"
     >
       <h1 class="text-center text-2xl font-semibold">{title}</h1>
       <Pinpad bind:v={p} {cancel} />
@@ -73,7 +71,7 @@
 
       <div class="w-full flex">
         <button
-          class="border-2 border-black rounded-xl font-semibold mx-auto py-3 w-40 hover:opacity-80 mx-auto"
+          class="border-2 border-primary rounded-xl font-semibold mx-auto py-3 w-40 hover:opacity-80 mx-auto"
           on:click|preventDefault={cancel}
         >
           <div class="my-auto">Cancel</div>
diff --git a/src/components/Pinpad.svelte b/src/components/Pinpad.svelte
index 585a7942..f39d8e02 100644
--- a/src/components/Pinpad.svelte
+++ b/src/components/Pinpad.svelte
@@ -38,14 +38,14 @@
 
 <div class="flex justify-center items-center">
   <div class="space-y-5">
-    <div class="text-5xl md:text-6xl font-semibold relative w-[300px]">
+    <div class="font-semibold relative w-[300px]">
       {#if hide}
         <input
           on:keydown={validate}
           use:focus
           bind:value={v}
           type="password"
-          class="outline-none border-0 text-center py-0"
+          class="outline-none border-0 text-center py-0 !text-5xl"
           pattern="[0-9]+"
         />
       {:else}
@@ -53,7 +53,7 @@
           on:keydown={validate}
           use:focus
           bind:value={v}
-          class="outline-none border-0 text-center py-0"
+          class="outline-none border-0 text-center py-0 !text-5xl"
           type="text"
           pattern="[0-9]+"
         />
diff --git a/src/routes/(app)/scan/[email protected] b/src/routes/(app)/scan/[email protected]
index 16ba5888..2dc061a8 100644
--- a/src/routes/(app)/scan/[email protected]
+++ b/src/routes/(app)/scan/[email protected]
@@ -1,3 +1,3 @@
-<div class="container mt-4">
+<main class="min-h-dvh">
   <slot />
-</div>
+</main>
diff --git a/src/routes/(app)/scan/+page.svelte b/src/routes/(app)/scan/+page.svelte
index e9bf4fd6..dd48e0e1 100644
--- a/src/routes/(app)/scan/+page.svelte
+++ b/src/routes/(app)/scan/+page.svelte
@@ -32,8 +32,8 @@
 
 <svelte:window on:resize={resize} />
 
-<div class="flex w-full mb-4 px-4">
-  <div class="bg-black mx-auto rounded-3xl">
+<div class="flex w-full mb-4 p-4">
+  <div class="mx-auto rounded-3xl">
     <video
       bind:this={vid}
       class="border-4 rounded-3xl border-black max-h-[calc(100vh*0.7)]"
@@ -41,13 +41,8 @@
   </div>
 </div>
 
-<div class="flex w-full mb-4">
-  <button
-    class="mx-auto border rounded-full px-6 py-2 font-bold hover:opacity-80"
-    on:click={back}
-  >
-    Cancel
-  </button>
+<div class="flex justify-center">
+  <button class="btn !w-auto" on:click={back}>Cancel</button>
 </div>
 
 <style>