refac: styling

src/lib/components/channel/MessageInput.svelte

@@ -18,6 +18,8 @@
 	let content = '';
 
 	export let onSubmit: Function;
+	export let scrollEnd = true;
+	export let scrollToBottom: Function;
 
 	let submitHandler = async () => {
 		if (content === '') {
@@ -36,6 +38,37 @@
 	};
 </script>
 
+<div class=" mx-auto inset-x-0 bg-transparent flex justify-center">
+	<div class="flex flex-col px-3 max-w-6xl w-full">
+		<div class="relative">
+			{#if scrollEnd === false}
+				<div class=" absolute -top-12 left-0 right-0 flex justify-center z-30 pointer-events-none">
+					<button
+						class=" bg-white border border-gray-100 dark:border-none dark:bg-white/20 p-1.5 rounded-full pointer-events-auto"
+						on:click={() => {
+							scrollEnd = true;
+							scrollToBottom();
+						}}
+					>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							viewBox="0 0 20 20"
+							fill="currentColor"
+							class="w-5 h-5"
+						>
+							<path
+								fill-rule="evenodd"
+								d="M10 3a.75.75 0 01.75.75v10.638l3.96-4.158a.75.75 0 111.08 1.04l-5.25 5.5a.75.75 0 01-1.08 0l-5.25-5.5a.75.75 0 111.08-1.04l3.96 4.158V3.75A.75.75 0 0110 3z"
+								clip-rule="evenodd"
+							/>
+						</svg>
+					</button>
+				</div>
+			{/if}
+		</div>
+	</div>
+</div>
+
 <div class="{transparentBackground ? 'bg-transparent' : 'bg-white dark:bg-gray-900'} ">
 	<div class="max-w-6xl px-2.5 mx-auto inset-x-0">
 		<div class="">