From f0b1ecae2d8aa55060fea54b281f2cb0cb0b67b3 Mon Sep 17 00:00:00 2001
From: Antoine Pierlot-Garcin <antoine@bokbox.com>
Date: Thu, 16 Nov 2023 15:10:59 +0100
Subject: [PATCH] plusmoins : bouton plus compact

---
 src/routes/PlusMoins.svelte | 31 +++++++++++++++++++++++++++----
 1 file changed, 27 insertions(+), 4 deletions(-)

diff --git a/src/routes/PlusMoins.svelte b/src/routes/PlusMoins.svelte
index d04f2f4..36f56d7 100644
--- a/src/routes/PlusMoins.svelte
+++ b/src/routes/PlusMoins.svelte
@@ -13,10 +13,33 @@
 </script>
 
 <div class="flex flex-col-reverse xl:flex-row items-center justify-left gap-2">
-	<div class="btn-group variant-ringed shrink-0 [&>*]:btn-sm">
-		<button class="btn-icon" on:click={decrementer}>-</button>
-		<button class="btn variant-filled-surface pointer-events-none">{compteur}</button>
-		<button class="btn-icon" on:click={incrementer}>+</button>
+	<div class="inline-flex rounded-full shadow-sm" role="group">
+		<button
+			type="button"
+			on:click={decrementer}
+			class="px-3 py-1 text-surface-900 bg-white border border-surface-200 rounded-s-full
+				   hover:bg-surface-100 dark:bg-gray-700 dark:border-gray-600
+				   dark:text-white dark:hover:text-white dark:hover:bg-surface-600"
+		>
+			-
+		</button>
+		<button
+			type="button"
+			class="pointer-events-none px-3 py-1 text-white bg-surface-700
+				   border-t border-b border-surface-200 dark:bg-surface-200
+				   dark:border-surface-600 dark:text-surface-900"
+		>
+			{compteur}
+		</button>
+		<button
+			type="button"
+			on:click={incrementer}
+			class="px-3 py-1 text-surface-900 bg-white border border-surface-200 rounded-e-full
+				   hover:bg-surface-100 dark:bg-gray-700 dark:border-gray-600
+			       dark:text-white dark:hover:text-white dark:hover:bg-surface-600"
+		>
+			+
+		</button>
 	</div>
 	<span class="grow"><slot /></span>
 </div>