From f3ac567352ff188a97c79c2f6b4e0fb0a68e4fb0 Mon Sep 17 00:00:00 2001
From: Adam Soltys <asoltys@gmail.com>
Date: Wed, 25 Sep 2024 20:19:06 -0700
Subject: mnemonic styles

---
 src/components/Mnemonic.svelte                   | 20 +++++++++++---------
 src/routes/(app)/payments/[...page]/+page.svelte |  6 +-----
 2 files changed, 12 insertions(+), 14 deletions(-)

diff --git a/src/components/Mnemonic.svelte b/src/components/Mnemonic.svelte
index f68d6fe0..41e81d9a 100644
--- a/src/components/Mnemonic.svelte
+++ b/src/components/Mnemonic.svelte
@@ -2,13 +2,15 @@
   export let mnemonic;
 </script>
 
-<div
-  class="text-lg border p-4 rounded-2xl text-secondary grid grid-flow-col grid-rows-6 grid-cols-2 sm:grid-cols-3 sm:grid-flow-row gap-2 justify-items-center whitespace-nowrap w-full"
->
-  {#each mnemonic.split(" ") as w, i}
-    <div class="flex gap-1">
-      <div class="select-none text-xs text-black my-auto">{i + 1}</div>
-      <div class="my-auto">{@html w === "-" ? "&mdash;" : w}</div>
-    </div>
-  {/each}
+<div class="flex w-full border p-4 rounded-2xl h-full">
+  <div
+    class="text-secondary grid grid-flow-col grid-rows-6 sm:grid-rows-none grid-cols-2 sm:grid-cols-3 sm:grid-flow-row gap-x-8 gap-y-2 justify-center whitespace-nowrap m-auto"
+  >
+    {#each mnemonic.split(" ") as w, i}
+      <div>
+        <span class="select-none text-black">{i + 1}.</span>
+        <span>{@html w === "-" ? "&mdash;" : w}</span>
+      </div>
+    {/each}
+  </div>
 </div>
diff --git a/src/routes/(app)/payments/[...page]/+page.svelte b/src/routes/(app)/payments/[...page]/+page.svelte
index bfd30f55..be2ba3bb 100644
--- a/src/routes/(app)/payments/[...page]/+page.svelte
+++ b/src/routes/(app)/payments/[...page]/+page.svelte
@@ -129,7 +129,7 @@
   };
 </script>
 
-<div class="mt-24 mb-20 payments space-y-5">
+<div class="space-y-5">
   <h1 class="px-3 md:px-0 text-center text-3xl md:text-4xl font-semibold">
     {$t("payments.header")}
   </h1>
@@ -307,8 +307,4 @@
   .active * {
     @apply bg-black text-white border-black;
   }
-
-  .payments {
-    view-transition-name: payments;
-  }
 </style>
-- 
cgit v1.2.3