Fix "Copy" button styling. Relates to issue 1387 (#1403)

* Fix styling of "Copy to Clipboard" button

* Updated so that Code Block copy button behaves as before.

* fix linting issue.

---------

Co-authored-by: Nathan Sarrazin <[email protected]>

src/lib/components/CodeBlock.svelte

@@ -24,7 +24,7 @@
 			>{@html DOMPurify.sanitize(highlightedCode || code.replaceAll("<", "&lt;"))}
 		</code></pre>
 	<CopyToClipBoardBtn
-		classNames="absolute top-2 right-2 invisible opacity-0 group-hover:visible group-hover:opacity-100"
+		classNames="btn rounded-lg border border-gray-200 px-2 py-2 text-sm shadow-sm transition-all hover:border-gray-300 active:shadow-inner dark:border-gray-700 dark:hover:border-gray-500 absolute top-2 right-2 invisible opacity-0 group-hover:visible group-hover:opacity-100 dark:text-gray-700 text-gray-200"
 		value={code}
 	/>
 </div>

src/lib/components/CopyToClipBoardBtn.svelte

@@ -35,7 +35,7 @@
 </script>
 
 <button
-	class="btn rounded-lg border border-gray-200 px-2 py-2 text-sm shadow-sm transition-all hover:border-gray-300 active:shadow-inner dark:border-gray-700 dark:hover:border-gray-500 {classNames}"
+	class={classNames}
 	title={"Copy to clipboard"}
 	type="button"
 	on:click
@@ -43,7 +43,7 @@
 >
 	<div class="relative">
 		<slot>
-			<IconCopy classNames="dark:text-gray-700 text-gray-200" />
+			<IconCopy classNames="h-[1.14em] w-[1.14em]" />
 		</slot>
 
 		<Tooltip classNames={isSuccess ? "opacity-100" : "opacity-0"} />

src/lib/components/chat/ChatMessage.svelte

@@ -379,7 +379,7 @@
 					on:click={() => {
 						isCopied = true;
 					}}
-					classNames="ml-1.5 !rounded-sm !p-1 !text-sm !text-gray-400 focus:!ring-0 hover:!text-gray-500 dark:!text-gray-400 dark:hover:!text-gray-300 !border-none !shadow-none"
+					classNames="btn rounded-sm p-1 text-sm text-gray-400 hover:text-gray-500 focus:ring-0 dark:text-gray-400 dark:hover:text-gray-300"
 					value={message.content}
 				/>
 			</div>