refac

Author: tjbck

src/lib/components/common/Tags.svelte

@@ -19,7 +19,7 @@
 	};
 </script>
 
-<div class="flex flex-wrap items-center gap-1.5 w-full">
+<div class="flex flex-wrap items-center gap-1 w-full">
 	<TagList
 		{tags}
 		on:delete={(e) => {
@@ -29,8 +29,10 @@
 
 	<input
 		bind:value={inputValue}
-		class="flex-1 min-w-24 px-1 text-xs bg-transparent outline-hidden placeholder:text-gray-400 dark:placeholder:text-gray-500"
-		placeholder={$i18n.t('Type to add tag...')}
+		class="flex-1 min-w-24 {tags.length > 0
+			? 'px-0.5'
+			: ''} text-xs bg-transparent outline-hidden placeholder:text-gray-400 dark:placeholder:text-gray-500"
+		placeholder={$i18n.t('Add a tag...')}
 		on:keydown={(event) => {
 			if (event.key === 'Enter' || event.key === ' ') {
 				event.preventDefault();

src/lib/components/common/Tags/TagItem.svelte

@@ -12,7 +12,7 @@
 {#if tag}
 	<button
 		type="button"
-		class="flex items-center gap-0.5 px-1.5 py-[1px] rounded-lg bg-gray-500/20 text-gray-700 dark:text-gray-200 text-xs font-medium hover:bg-gray-500/30 transition-colors"
+		class="flex items-center gap-1 px-1.5 py-[1px] rounded-full bg-gray-100/50 dark:bg-gray-800/50 border border-gray-100 dark:border-gray-800 text-gray-600 dark:text-gray-300 text-xs font-medium hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
 		on:click={() => {
 			onDelete();
 		}}