From 931fe8b21747fa95789ae30fc65eca48d7a8e5cd Mon Sep 17 00:00:00 2001
From: Alex <alex.tran1502@gmail.com>
Date: Thu, 14 Nov 2024 14:06:06 -0600
Subject: [PATCH] chore: minor styling tweak

---
 src/docs/examples/ButtonExamples.svelte   | 16 ++++++++--------
 src/docs/examples/CheckboxExamples.svelte | 12 ++++++------
 src/lib/components/Button.svelte          |  2 +-
 src/lib/components/Card.svelte            |  2 +-
 4 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/src/docs/examples/ButtonExamples.svelte b/src/docs/examples/ButtonExamples.svelte
index c7f1868..1b639a4 100644
--- a/src/docs/examples/ButtonExamples.svelte
+++ b/src/docs/examples/ButtonExamples.svelte
@@ -17,7 +17,7 @@
 			<CardTitle>Shapes</CardTitle>
 		</CardHeader>
 		<CardBody>
-			<div class="flex flex-wrap gap-1">
+			<div class="flex flex-wrap gap-4">
 				{#each shapes as shape}
 					<Button {shape} class="capitalize">{shape}</Button>
 				{/each}
@@ -30,7 +30,7 @@
 			<CardTitle>Colors</CardTitle>
 		</CardHeader>
 		<CardBody>
-			<div class="flex flex-wrap gap-1">
+			<div class="flex flex-wrap gap-4">
 				{#each colors as color}
 					<Button {color} class="capitalize">{color}</Button>
 				{/each}
@@ -43,7 +43,7 @@
 			<CardTitle>Outline</CardTitle>
 		</CardHeader>
 		<CardBody>
-			<div class="flex flex-wrap gap-1">
+			<div class="flex flex-wrap gap-4">
 				{#each colors as color}
 					<Button variant="outline" {color}>Button</Button>
 				{/each}
@@ -56,7 +56,7 @@
 			<CardTitle>Ghost</CardTitle>
 		</CardHeader>
 		<CardBody>
-			<div class="flex flex-wrap gap-1">
+			<div class="flex flex-wrap gap-4">
 				{#each colors as color}
 					<Button variant="ghost" {color}>Button</Button>
 				{/each}
@@ -69,7 +69,7 @@
 			<CardTitle>Hero</CardTitle>
 		</CardHeader>
 		<CardBody>
-			<div class="flex flex-wrap gap-1">
+			<div class="flex flex-wrap gap-4">
 				{#each colors as color}
 					<Button variant="hero" {color}>Button</Button>
 				{/each}
@@ -82,7 +82,7 @@
 			<CardTitle>Disabled</CardTitle>
 		</CardHeader>
 		<CardBody>
-			<div class="flex flex-wrap gap-1">
+			<div class="flex flex-wrap gap-4">
 				{#each colors as color}
 					<Button {color} disabled>Button</Button>
 				{/each}
@@ -95,7 +95,7 @@
 			<CardTitle>Sizes</CardTitle>
 		</CardHeader>
 		<CardBody>
-			<div class="flex flex-wrap gap-1">
+			<div class="flex flex-wrap gap-4">
 				{#each sizes as size}
 					<div>
 						<Button {size} class="capitalize">{size}</Button>
@@ -110,7 +110,7 @@
 			<CardTitle>Full width</CardTitle>
 		</CardHeader>
 		<CardBody>
-			<div class="flex flex-col gap-1">
+			<div class="flex flex-col gap-4">
 				{#each colors as color}
 					<div>
 						<Button fullWidth {color}>Button</Button>
diff --git a/src/docs/examples/CheckboxExamples.svelte b/src/docs/examples/CheckboxExamples.svelte
index 1b43652..798ea54 100644
--- a/src/docs/examples/CheckboxExamples.svelte
+++ b/src/docs/examples/CheckboxExamples.svelte
@@ -17,9 +17,9 @@
 			<CardTitle>Colors</CardTitle>
 		</CardHeader>
 		<CardBody>
-			<div class="flex flex-col gap-1">
+			<div class="flex flex-col gap-4">
 				{#each colors as color}
-					<div class="flex gap-1">
+					<div class="flex gap-4">
 						<Checkbox checked {color} />
 						<Checkbox {color} />
 						<Checkbox checked="indeterminate" {color} />
@@ -34,9 +34,9 @@
 			<CardTitle>Sizes</CardTitle>
 		</CardHeader>
 		<CardBody>
-			<div class="flex flex-col gap-1">
+			<div class="flex flex-col gap-4">
 				{#each sizes as size}
-					<div class="flex gap-1">
+					<div class="flex gap-4">
 						<Checkbox checked {size} />
 						<Checkbox {size} />
 						<Checkbox checked="indeterminate" {size} />
@@ -51,9 +51,9 @@
 			<CardTitle>Shapes</CardTitle>
 		</CardHeader>
 		<CardBody>
-			<div class="flex flex-col gap-1">
+			<div class="flex flex-col gap-4">
 				{#each shapes as shape}
-					<div class="flex gap-1">
+					<div class="flex gap-4">
 						<Checkbox checked {shape} />
 						<Checkbox {shape} />
 						<Checkbox checked="indeterminate" {shape} />
diff --git a/src/lib/components/Button.svelte b/src/lib/components/Button.svelte
index 1ee2284..bf57dfc 100644
--- a/src/lib/components/Button.svelte
+++ b/src/lib/components/Button.svelte
@@ -39,7 +39,7 @@
 		variants: {
 			shape: {
 				rectangle: 'rounded-none',
-				'semi-round': 'rounded-lg',
+				'semi-round': 'rounded-xl',
 				round: 'rounded-full',
 			},
 			size: {
diff --git a/src/lib/components/Card.svelte b/src/lib/components/Card.svelte
index 0b18c73..347b255 100644
--- a/src/lib/components/Card.svelte
+++ b/src/lib/components/Card.svelte
@@ -11,7 +11,7 @@
 <div
 	bind:this={ref}
 	class={cleanClass(
-		'rounded-lg border border-gray-300 bg-light text-dark shadow-lg dark:border-gray-600',
+		'rounded-2xl border border-gray-300 bg-light text-dark shadow-sm dark:border-gray-600',
 		className,
 	)}
 	{...restProps}