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>
<html lang="en">
<html lang="en" data-theme="light">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
@ -25,7 +25,7 @@
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>
</body>
</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="avatar mx-2">
<div class="w-12 rounded">
<div class="w-12 h-12 rounded">
<img src={imageSrc} alt="Profile image for {user}" />
</div>
</div>
<div class="flex-col">
<p class="font-bold">{user}</p>
<p>{message}</p>
<p class="flex-wrap">{message}</p>
</div>
</div>

27
src/routes/+page.svelte
View File

@ -36,27 +36,18 @@
});
</script>
<main class="grid grid-cols-2 h-screen w-full">
<div class="relative h-full w-full">
<div class="h-fit col-span-1 w-10/12 abs-centered">
<div class="flex">
<span><span class="text-svelte">SV</span>Chat</span>
<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>
<main class="h-full flex flex-col">
<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="w-full">
<h1 class="text-center text-base-content text-2xl"><span class="text-primary">SV</span>Chat</h1>
<hr class="w-11/12 border-primary border-1 mx-auto" />
</div>
</div>
<div class="col-span-1 overflow-scroll bg-base-200 m-4 rounded-lg">
{#each log as message}
<Message imageSrc={message.imageSrc} user={message.user} message={message.message} />
{/each}
</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>

38
tailwind.config.ts
View File

@ -5,8 +5,42 @@ export default {
content: ['./src/**/*.{html,js,svelte,ts}'],
plugins: [daisyui],
theme: {
colors: {
svelte: '#FF3E00',
fontSize: {
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;