chore: minor styling tweak (#12)

immich-app · Nov 14, 2024 · 3026dec · 3026dec
1 parent ffa1ba6
commit 3026dec
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 16 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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}