From c4c068095bf7edf4a7ede49390d7e17a3c6e8276 Mon Sep 17 00:00:00 2001
From: gsovereignty <gsovereignty@proton.me>
Date: Sat, 17 Aug 2024 18:46:26 +0800
Subject: [PATCH] problem: style isn't good on small screens

---
 package.json                           |  2 +-
 src/components/MeritRequests.svelte    |  4 +++-
 src/components/MeritsAndSatflow.svelte | 10 +++++++---
 src/components/NotifyMe.svelte         |  2 +-
 src/components/NumberIncrement.svelte  |  6 +++---
 5 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/package.json b/package.json
index aef73ac..759d764 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,7 @@
 	"version": "0.0.1",
 	"private": true,
 	"scripts": {
-		"dev": "vite dev",
+		"dev": "vite dev --host",
 		"build": "vite build",
 		"preview": "vite preview",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
diff --git a/src/components/MeritRequests.svelte b/src/components/MeritRequests.svelte
index bcf9fd3..d9bdcfe 100644
--- a/src/components/MeritRequests.svelte
+++ b/src/components/MeritRequests.svelte
@@ -137,7 +137,9 @@
 						</Table.Cell>
 						<Table.Cell class="table-cell">{merit.Sats}</Table.Cell>
 						<Table.Cell class="table-cell">{merit.Merits}</Table.Cell>
-						<Table.Cell class="table-cell text-center">{status(merit).toUpperCase()}</Table.Cell>
+						<Table.Cell class="hidden text-center md:table-cell"
+							>{status(merit).toUpperCase()}</Table.Cell
+						>
 						<Table.Cell class="hidden text-right md:table-cell"
 							>{unixToRelativeTime(merit.TimeStamp * 1000)}</Table.Cell
 						>
diff --git a/src/components/MeritsAndSatflow.svelte b/src/components/MeritsAndSatflow.svelte
index 001c789..3e6a1ad 100644
--- a/src/components/MeritsAndSatflow.svelte
+++ b/src/components/MeritsAndSatflow.svelte
@@ -86,7 +86,7 @@
 				<Table.Header>
 					<Table.Row class="">
 						<Table.Head>Participant</Table.Head>
-						<Table.Head class="hidden md:table-cell">Merits</Table.Head>
+						<Table.Head class="table-cell">Merits</Table.Head>
 						<Table.Head class="text-right">Revenue (Sats)</Table.Head>
 					</Table.Row>
 				</Table.Header>
@@ -99,10 +99,14 @@
 									<Name ndk={$ndk} {pubkey} class="hidden max-w-32 truncate p-1 md:inline-block" />
 								</div>
 							</Table.Cell>
-							<Table.Cell class="hidden md:table-cell">
+							<Table.Cell
+								class="table-cell text-pretty font-mono font-extrabold text-white dark:text-gray-900"
+							>
 								<NumberIncrement targetValue={merits} />
 							</Table.Cell>
-							<Table.Cell class="text-right">
+							<Table.Cell
+								class="table-cell text-pretty text-right font-mono font-extrabold text-white dark:text-gray-900"
+							>
 								<NumberIncrement targetValue={sats} />
 							</Table.Cell>
 						</Table.Row>
diff --git a/src/components/NotifyMe.svelte b/src/components/NotifyMe.svelte
index 86104bc..54010c8 100644
--- a/src/components/NotifyMe.svelte
+++ b/src/components/NotifyMe.svelte
@@ -121,7 +121,7 @@
 				{/if}
 			</div>
 			<Button disabled={emailInValid} on:click={SubmitEmailAndSubscribe}
-				>{emailError ? emailError : "I'm lame, please email me with updates"}</Button
+				>{emailError ? emailError : 'Please email me with updates'}</Button
 			>
 			<Separator />
 			<a href="https://t.me/nostrocket" class="flex flex-nowrap">
diff --git a/src/components/NumberIncrement.svelte b/src/components/NumberIncrement.svelte
index 4ae1645..90b3451 100644
--- a/src/components/NumberIncrement.svelte
+++ b/src/components/NumberIncrement.svelte
@@ -3,9 +3,9 @@
 	import { expoInOut } from 'svelte/easing';
 	import { tweened } from 'svelte/motion';
 
-	export let targetValue: number = 0;
+	export let targetValue: number;
 
-	let currentValue = tweened(0, { duration: 1000, easing: expoInOut });
+	let currentValue = tweened(0, { duration: 3000, easing: expoInOut });
 
 	// Re-trigger animation whenever targetValue changes
 	$: if (targetValue !== undefined && targetValue !== null) {
@@ -17,4 +17,4 @@
 	});
 </script>
 
-<span class="merits">{$currentValue.toFixed(0)}</span>
+<span class="merits">{Math.floor($currentValue).toLocaleString()}</span>