arithefirst/svchat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: Change 'Send Message' button to a send icon

Browse Source
This commit is contained in:
April Hall 2025-01-11 14:02:24 -05:00
parent 20a908e8a2
commit 50e6b2f8f9
Signed by: arithefirst
GPG Key ID: 4508A15C4DB91C5B
2 changed files with 10 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/lib/icons/SendIcon.svelte Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 886 B

5
src/routes/+page.svelte
View File

@ -3,6 +3,7 @@
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import { v4 as uuidv4 } from 'uuid'; import { v4 as uuidv4 } from 'uuid';
import Message from '../lib/components/message.svelte'; import Message from '../lib/components/message.svelte';
import SendIcon from '../lib/icons/SendIcon.svelte';
import { type TypeMessage } from '../lib'; import { type TypeMessage } from '../lib';
import type { PageData } from './$types'; import type { PageData } from './$types';
@ -54,7 +55,7 @@
{@render message(log)} {@render message(log)}
</div> </div>
<form class="flex mb-2 mx-2 mt-1" onsubmit={sendMessage}> <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} /> <input type="text" placeholder="Type here" class="input border-base-300 w-5/6 mr-1 border-2" bind:value={msg} />
<button class="btn w-1/4 btn-primary" type="submit">Send Message</button> <button aria-label="send message" class="btn w-1/6 btn-primary" type="submit"><SendIcon/></button>
</form> </form>
</main> </main>