styles

2 files changed, 5 insertions, 48 deletions

diff --git a/src/components/Mnemonic.svelte b/src/components/Mnemonic.svelte
index 93035230..117c98f2 100644
--- a/src/components/Mnemonic.svelte
+++ b/src/components/Mnemonic.svelte
@@ -2,13 +2,13 @@
   let { mnemonic } = $props();
 </script>
 
-<div class="flex w-full border p-4 rounded-2xl h-full">
+<div class="card">
   <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"
+    class="card-body 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 class="select-none text-neutral">{i + 1}.</span>
         <span>{@html w === "-" ? "&mdash;" : w}</span>
       </div>
     {/each}
diff --git a/src/components/Slider.svelte b/src/components/Slider.svelte
index 137c28b4..401b415a 100644
--- a/src/components/Slider.svelte
+++ b/src/components/Slider.svelte
@@ -6,12 +6,7 @@
     max?: number;
   }
 
-  let {
-    value = $bindable(),
-    handle,
-    min = 0,
-    max = 100
-  }: Props = $props();
+  let { value = $bindable(), handle, min = 0, max = 100 }: Props = $props();
 </script>
 
 <input
@@ -20,46 +15,8 @@
   {min}
   {max}
   bind:value
-  class="px-0 py-0 my-5"
-  style="--bgPercent: {((value - min) * 100) / (max - min)}%;"
+  class="range"
   oninput={handle}
 />
 
-<style>
-  #slider {
-    -webkit-appearance: none;
-    width: 100%;
-    height: 6px;
-    border-radius: 5px;
-    background: linear-gradient(
-      to right,
-      black 0%,
-      black var(--bgPercent),
-      #f5f7fa var(--bgPercent),
-      #f5f7fa 100%
-    );
-    outline: none;
-  }
-
-  #slider:active {
-    background-color: black;
-  }
 
-  #slider::-webkit-slider-thumb {
-    -webkit-appearance: none;
-    appearance: none;
-    width: 30px;
-    height: 30px;
-    border-radius: 50%;
-    background: black;
-    cursor: pointer;
-  }
-
-  #slider::-moz-range-thumb {
-    width: 30px;
-    height: 30px;
-    border-radius: 50%;
-    background: black;
-    cursor: pointer;
-  }
-</style>