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

fix: UI Rework

Browse Source
This commit is contained in:
April Hall 2025-01-09 12:31:39 -05:00
parent 81995985e3
commit 3dc59bf4f1
No known key found for this signature in database
GPG Key ID: A49AC35CB186266C
4 changed files with 49 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/app.html
View File

@ -1,5 +1,5 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en" data-theme="light">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" /> <link rel="icon" href="%sveltekit.assets%/favicon.png" />
@ -25,7 +25,7 @@
along with this program. If not, see <https://www.gnu.org/licenses/>. along with this program. If not, see <https://www.gnu.org/licenses/>.
--> -->
<body data-sveltekit-preload-data="hover"> <body data-sveltekit-preload-data="hover" class="h-screen">
<div style="display: contents">%sveltekit.body%</div> <div style="display: contents">%sveltekit.body%</div>
</body> </body>
</html> </html>

4
src/lib/components/message.svelte
View File

@ -5,12 +5,12 @@
<div class="w-full hover:bg-base-300 bg-base-200 flex py-2"> <div class="w-full hover:bg-base-300 bg-base-200 flex py-2">
<div class="avatar mx-2"> <div class="avatar mx-2">
<div class="w-12 rounded"> <div class="w-12 h-12 rounded">
<img src={imageSrc} alt="Profile image for {user}" /> <img src={imageSrc} alt="Profile image for {user}" />
</div> </div>
</div> </div>
<div class="flex-col"> <div class="flex-col">
<p class="font-bold">{user}</p> <p class="font-bold">{user}</p>
<p>{message}</p> <p class="flex-wrap">{message}</p>
</div> </div>
</div> </div>

27
src/routes/+page.svelte
View File

@ -36,27 +36,18 @@
}); });
</script> </script>
<main class="grid grid-cols-2 h-screen w-full"> <main class="h-full flex flex-col">
<div class="relative h-full w-full"> <div class="flex-grow flex-auto overflow-y-scroll mx-2 mt-2 mb-1 rounded-lg bg-base-200 border-2 border-primary">
<div class="h-fit col-span-1 w-10/12 abs-centered"> <div class="w-full">
<div class="flex"> <h1 class="text-center text-base-content text-2xl"><span class="text-primary">SV</span>Chat</h1>
<span><span class="text-svelte">SV</span>Chat</span> <hr class="w-11/12 border-primary border-1 mx-auto" />
<span class="ml-auto">Logged in as <span class="font-bold">{user}</span></span>
</div>
<form class="my-1 flex" on:submit={sendMessage}>
<input type="text" placeholder="Type here" class="input input-bordered w-1/2 mr-1" bind:value={msg} />
<button class="btn w-1/2" type="submit">Send Message</button>
</form>
<button
class="btn w-full"
on:click={() => {
log = [];
}}>Clear Messages</button>
</div> </div>
</div>
<div class="col-span-1 overflow-scroll bg-base-200 m-4 rounded-lg">
{#each log as message} {#each log as message}
<Message imageSrc={message.imageSrc} user={message.user} message={message.message} /> <Message imageSrc={message.imageSrc} user={message.user} message={message.message} />
{/each} {/each}
</div> </div>
<form class="flex mb-2 mx-2 mt-1" on:submit={sendMessage}>
<input type="text" placeholder="Type here" class="input input-secondary w-3/4 mr-1 border-2" bind:value={msg} />
<button class="btn w-1/4 btn-primary" type="submit">Send Message</button>
</form>
</main> </main>

38
tailwind.config.ts
View File

@ -5,8 +5,42 @@ export default {
content: ['./src/**/*.{html,js,svelte,ts}'], content: ['./src/**/*.{html,js,svelte,ts}'],
plugins: [daisyui], plugins: [daisyui],
theme: { theme: {
colors: { fontSize: {
svelte: '#FF3E00', sm: '0.750rem',
base: '1rem',
xl: '1.333rem',
'2xl': '1.777rem',
'3xl': '2.369rem',
'4xl': '3.158rem',
'5xl': '4.210rem',
},
fontFamily: {
heading: 'IBM Plex Sans',
body: 'IBM Plex Sans',
},
fontWeight: {
normal: '400',
bold: '700',
}, },
}, },
daisyui: {
themes: [
{
light: {
primary: '#2083df',
secondary: '#a78aef',
accent: '#a854e8',
neutral: '#081e45',
'base-100': '#f6f9fe',
},
dark: {
primary: '#2083df',
secondary: '#2c1075',
accent: '#6b17ab',
neutral: '#081e45',
'base-100': '#010409',
},
},
],
},
} satisfies Config; } satisfies Config;