Add some Flowbite

For the styling.

1 files changed, 9 insertions, 9 deletions

diff --git a/hi-ui/src/lib/MessageInput.svelte b/hi-ui/src/lib/MessageInput.svelte
index 938e467..6cd732a 100644
--- a/hi-ui/src/lib/MessageInput.svelte
+++ b/hi-ui/src/lib/MessageInput.svelte
@@ -1,4 +1,7 @@
 <script>
+    import { Input, InputAddon, ButtonGroup, Button } from 'flowbite-svelte';
+    import { CaretRightSolid } from 'flowbite-svelte-icons';
+
     import { tick } from 'svelte';
     import { postToChannel } from '../apiServer';
     import { activeChannel } from '../store';
@@ -19,13 +22,10 @@
 </script>
 
 <form on:submit|preventDefault={handleSubmit}>
-    <input type="text" class="border rounded px-3" bind:this={self} bind:value={input} disabled={disabled}>
-    <button type="submit">➤</button>
+    <ButtonGroup class="w-full">
+        <Input disabled={disabled} bind:this={self} bind:value={input} />
+        <Button color="primary" class="!p-2.5" type="submit">
+            <CaretRightSolid class="w-5 h-5" />
+        </Button>
+    </ButtonGroup>
 </form>
-
-<style>
-    input[type="text"] {
-        /* TODO: percentage won't handle zoom in/out well. */
-        width: 96%;
-    }
-</style>