From 50e6b2f8f9c10ea20dc05458e3881d6692bb488e Mon Sep 17 00:00:00 2001
From: April Hall <ari@arithefirst.com>
Date: Sat, 11 Jan 2025 14:02:24 -0500
Subject: [PATCH] style: Change 'Send Message' button to a send icon

---
 src/lib/icons/SendIcon.svelte | 7 +++++++
 src/routes/+page.svelte       | 5 +++--
 2 files changed, 10 insertions(+), 2 deletions(-)
 create mode 100644 src/lib/icons/SendIcon.svelte

diff --git a/src/lib/icons/SendIcon.svelte b/src/lib/icons/SendIcon.svelte
new file mode 100644
index 0000000..4dab1e0
--- /dev/null
+++ b/src/lib/icons/SendIcon.svelte
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
+  ><g fill="none"
+    ><path
+      d="M24 0v24H0V0zM12.594 23.258l-.012.002-.071.035-.02.004-.014-.004-.071-.036c-.01-.003-.019 0-.024.006l-.004.01-.017.428.005.02.01.013.104.074.015.004.012-.004.104-.074.012-.016.004-.017-.017-.427c-.002-.01-.009-.017-.016-.018m.264-.113-.014.002-.184.093-.01.01-.003.011.018.43.005.012.008.008.201.092c.012.004.023 0 .029-.008l.004-.014-.034-.614c-.003-.012-.01-.02-.02-.022m-.715.002a.023.023 0 0 0-.027.006l-.006.014-.034.614c0 .012.007.02.017.024l.015-.002.201-.093.01-.008.003-.011.018-.43-.003-.012-.01-.01z" /><path
+      fill="currentColor"
+      d="M20.235 5.686c.432-1.195-.726-2.353-1.921-1.92L3.709 9.048c-1.199.434-1.344 2.07-.241 2.709l4.662 2.699 4.163-4.163a1 1 0 0 1 1.414 1.414L9.544 15.87l2.7 4.662c.638 1.103 2.274.957 2.708-.241z" /></g
+  ></svg>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index cb876c3..387e9a4 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -3,6 +3,7 @@
   import { onMount } from 'svelte';
   import { v4 as uuidv4 } from 'uuid';
   import Message from '../lib/components/message.svelte';
+  import SendIcon from '../lib/icons/SendIcon.svelte';
   import { type TypeMessage } from '../lib';
   import type { PageData } from './$types';
 
@@ -54,7 +55,7 @@
     {@render message(log)}
   </div>
   <form class="flex mb-2 mx-2 mt-1" onsubmit={sendMessage}>
-    <input type="text" placeholder="Type here" class="input border-2 border-base-300 w-3/4 mr-1 border-2" bind:value={msg} />
-    <button class="btn w-1/4 btn-primary" type="submit">Send Message</button>
+    <input type="text" placeholder="Type here" class="input border-base-300 w-5/6 mr-1 border-2" bind:value={msg} />
+    <button aria-label="send message" class="btn w-1/6 btn-primary" type="submit"><SendIcon/></button>
   </form>
 </main>