Styling improvements (#82)

* add custom scrollbar everywhere

* fix scroll to bottom button positioning + add hover

* fix non-scrollable transparent area above input text

* replace slate color by gray

* add custom scrollbars for codeblock

* fix chat messages overflowing on small viewports

* fix codeblock scrollbar color on light mode + remove !important

* fix send icon hover + make disabled buttons default cursor

src/lib/components/CodeBlock.svelte

@@ -16,8 +16,9 @@
 </script>
 
 <div class="group relative rounded-lg my-4">
-	<pre class="overflow-auto px-5"><code class="language-{lang}"
-			>{@html highlightedCode || code.replaceAll("<", "&lt;")}</code
+	<pre
+		class="overflow-auto scrollbar-custom scrollbar-thumb-gray-500 hover:scrollbar-thumb-gray-400 dark:scrollbar-thumb-white/10 dark:hover:scrollbar-thumb-white/20 px-5"><code
+			class="language-{lang}">{@html highlightedCode || code.replaceAll("<", "&lt;")}</code
 		></pre>
 	<CopyToClipBoardBtn
 		classNames="absolute top-2 right-2 invisible opacity-0 group-hover:visible group-hover:opacity-100"

src/lib/components/NavMenu.svelte

@@ -32,7 +32,7 @@
 	</a>
 </div>
 <div
-	class="flex flex-col overflow-y-auto px-3 pb-3 pt-2 gap-1  bg-gradient-to-l from-gray-50 dark:from-gray-800/30 rounded-r-xl"
+	class="flex flex-col overflow-y-auto scrollbar-custom px-3 pb-3 pt-2 gap-1  bg-gradient-to-l from-gray-50 dark:from-gray-800/30 rounded-r-xl"
 >
 	{#each conversations as conv}
 		<a

src/lib/components/ScrollToBottomBtn.svelte

@@ -28,7 +28,7 @@
 	<button
 		transition:fade={{ duration: 150 }}
 		on:click={() => scrollNode.scrollTo({ top: scrollNode.scrollHeight, behavior: "smooth" })}
-		class="absolute flex rounded-full border w-10 h-10 items-center justify-center shadow bg-white dark:bg-gray-700 dark:border-gray-600 {className}"
-		><IconChevron /></button
+		class="btn absolute flex rounded-full border w-[41px] h-[41px] shadow-md dark:shadow-gray-950 bg-white dark:bg-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:border-gray-600 transition-all {className}"
+		><IconChevron classNames="mt-[2px]" /></button
 	>
 {/if}

src/lib/components/chat/ChatMessages.svelte

@@ -24,7 +24,11 @@
 	}
 </script>
 
-<div class="overflow-y-auto h-full" use:snapScrollToBottom={messages} bind:this={chatContainer}>
+<div
+	class="overflow-y-auto h-full scrollbar-custom mr-1"
+	use:snapScrollToBottom={messages}
+	bind:this={chatContainer}
+>
 	<div class="max-w-3xl xl:max-w-4xl mx-auto px-5 pt-6 flex flex-col gap-5 sm:gap-8 h-full">
 		{#each messages as message, i}
 			<ChatMessage loading={loading && i === messages.length - 1} {message} />
@@ -36,5 +40,8 @@
 		{/if}
 		<div class="h-32 flex-none" />
 	</div>
-	<ScrollToBottomBtn class="bottom-10 right-12" scrollNode={chatContainer} />
+	<ScrollToBottomBtn
+		class="max-md:hidden bottom-36 right-4 lg:right-10"
+		scrollNode={chatContainer}
+	/>
 </div>

src/lib/components/chat/ChatWindow.svelte

@@ -19,10 +19,10 @@
 	const dispatch = createEventDispatcher<{ message: string; share: void }>();
 </script>
 
-<div class="relative min-h-0">
+<div class="relative min-h-0 min-w-0">
 	<ChatMessages {loading} {pending} {messages} on:message />
 	<div
-		class="flex flex-col max-md:border-t dark:border-gray-800 items-center max-md:dark:bg-gray-900 max-md:bg-white bg-gradient-to-t from-white via-white/80 to-white/0 dark:from-gray-900 dark:via-gray-80 dark:to-gray-900/0 justify-center absolute inset-x-0 max-w-3xl xl:max-w-4xl mx-auto px-3.5 sm:px-5 bottom-0 py-4 md:py-8 w-full"
+		class="flex flex-col pointer-events-none [&>*]:pointer-events-auto max-md:border-t dark:border-gray-800 items-center max-md:dark:bg-gray-900 max-md:bg-white bg-gradient-to-t from-white via-white/80 to-white/0 dark:from-gray-900 dark:via-gray-80 dark:to-gray-900/0 justify-center absolute inset-x-0 max-w-3xl xl:max-w-4xl mx-auto px-3.5 sm:px-5 bottom-0 py-4 md:py-8 w-full"
 	>
 		<form
 			on:submit|preventDefault={() => {
@@ -35,13 +35,11 @@
 			<div class="w-full flex flex-1 border-none bg-transparent">
 				<ChatInput placeholder="Ask anything" bind:value={message} autofocus maxRows={10} />
 				<button
-					class="p-1 px-[0.7rem] group self-end my-1 h-[2.4rem] rounded-lg hover:bg-gray-100 enabled:dark:hover:text-gray-400 dark:hover:bg-gray-900 disabled:hover:bg-transparent dark:disabled:hover:bg-transparent disabled:opacity-60 dark:disabled:opacity-40 flex-shrink-0 transition-all mx-1"
+					class="btn p-1 px-[0.7rem] self-end bg-transparent my-1 h-[2.4rem] text-gray-400 rounded-lg enabled:dark:hover:text-gray-100 enabled:hover:text-gray-700 disabled:opacity-60 dark:disabled:opacity-40 mx-1"
 					disabled={!message || loading || disabled}
 					type="submit"
 				>
-					<CarbonSendAltFilled
-						class="text-gray-400 group-hover:text-gray-800 group-disabled:text-gray-300"
-					/>
+					<CarbonSendAltFilled />
 				</button>
 			</div>
 		</form>

src/styles/main.css

@@ -6,12 +6,12 @@
 
 @layer components {
 	.btn {
-		@apply cursor-pointer select-none inline-flex justify-center items-center whitespace-nowrap border focus:outline-none focus:ring;
+		@apply cursor-pointer disabled:cursor-default select-none inline-flex flex-shrink-0 justify-center items-center whitespace-nowrap outline-none focus:ring transition-all;
 	}
 }
 
 @layer utilities {
 	.scrollbar-custom {
-		@apply !scrollbar-thin !scrollbar-w-1 !scrollbar-thumb-rounded-full !scrollbar-track-transparent !scrollbar-thumb-black/10 dark:!scrollbar-thumb-white/10;
+		@apply scrollbar-thin scrollbar-w-1 scrollbar-thumb-rounded-full scrollbar-track-transparent scrollbar-thumb-black/10 dark:scrollbar-thumb-white/10 hover:scrollbar-thumb-black/20 dark:hover:scrollbar-thumb-white/20;
 	}
 }