feat: small style improvements

kurozenzen · Feb 5, 2024 · 2d2ae6b · 2d2ae6b
1 parent 1ab18b8
commit 2d2ae6b
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 6 deletions.
diff --git a/src/lib/components/pure/dialog/Dialog.svelte b/src/lib/components/pure/dialog/Dialog.svelte
@@ -17,7 +17,7 @@
 				event.clientY <= rect.top + rect.height &&
 				rect.left <= event.clientX &&
 				event.clientX <= rect.left + rect.width;
-			if (!isInDialog) {
+			if (event.target === dialog && !isInDialog) {
 				dialog?.close();
 			}
 		});
@@ -32,7 +32,7 @@
 
 <style>
 	dialog {
-		border-radius: var(--border-radius);
+		border-radius: calc(2 * var(--border-radius));
 		background-color: var(--background-0);
 		z-index: var(--z-dialog);
 		padding: var(--grid-gap);

diff --git a/src/lib/components/pure/text-button/TextButton.svelte b/src/lib/components/pure/text-button/TextButton.svelte
@@ -8,7 +8,7 @@
 	export let type: ButtonType = 'primary';
 </script>
 
-<button {title} class={type} on:click {disabled}>
+<button id={$$props.id} {title} class={type} on:click {disabled}>
 	<slot />
 </button>
 

diff --git a/src/lib/logic/format-relative-time.spec.ts b/src/lib/logic/format-relative-time.spec.ts
@@ -28,7 +28,7 @@ describe('formatCreatedAt', () => {
 		expect(() => formatCreatedAt('asdf')).toThrow(TypeError);
 	});
 	[
-		['just now', new Date(NOW.getTime() - 50_000).toString()],
+		['Just now', new Date(NOW.getTime() - 50_000).toString()],
 		['1 minute ago', new Date(NOW.getTime() - ONE_MINUTE).toString()],
 		['59 minutes ago', new Date(NOW.getTime() - 59 * ONE_MINUTE).toString()],
 		['1 hour ago', new Date(NOW.getTime() - ONE_HOUR).toString()],

diff --git a/src/lib/logic/format-relative-time.ts b/src/lib/logic/format-relative-time.ts
@@ -9,7 +9,7 @@ export const formatCreatedAt = (createdAt: number | string) => {
 	const now = new Date().getTime() / ONE_MINUTE;
 
 	const minutesAgo = now - then;
-	if (minutesAgo < 1) return 'just now';
+	if (minutesAgo < 1) return 'Just now';
 	if (minutesAgo < 60) return getAgoString(minutesAgo, 'minute');
 
 	const hoursAgo = minutesAgo / 60;

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -187,7 +187,7 @@
 			}
 		}}
 	/>
-	<TextButton title="Search with the tags above" on:click={getFirstPage}>
+	<TextButton id="btn-search" title="Search with the tags above" on:click={getFirstPage}>
 		{#if loading}
 			<LoadingAnimation />
 		{:else}
@@ -270,4 +270,8 @@
 		align-items: center;
 		gap: var(--grid-gap);
 	}
+
+	:global(#btn-search) {
+		width: 10rem;
+	}
 </style>