10 files changed, 26 insertions, 39 deletions
diff --git a/ui/lib/components/ChangePassword.svelte b/ui/lib/components/ChangePassword.svelte
index 1e48bee..109a83a 100644
--- a/ui/lib/components/ChangePassword.svelte
+++ b/ui/lib/components/ChangePassword.svelte
@@ -26,7 +26,6 @@
   <label
     >current password
     <input
-      class="input"
       name="currentPassword"
       type="password"
       placeholder="password"
@@ -37,7 +36,6 @@
   <label
     >new password
     <input
-      class="input"
       name="newPassword"
       type="password"
       placeholder="password"
@@ -48,7 +46,6 @@
   <label
     >confirm new password
     <input
-      class="input"
       name="confirmPassword"
       type="password"
       placeholder="password"
@@ -56,5 +53,5 @@
     />
   </label>
 
-  <button class="btn bg-orange-500 mt-4" type="submit" {disabled}>change password</button>
+  <button type="submit" {disabled}>change password</button>
 </form>
diff --git a/ui/lib/components/Channel.svelte b/ui/lib/components/Channel.svelte
index 01b1c87..dc019a0 100644
--- a/ui/lib/components/Channel.svelte
+++ b/ui/lib/components/Channel.svelte
@@ -2,13 +2,13 @@
   let { id, name, active, hasUnreads } = $props();
 </script>
 
-<li class="rounded-full" class:bg-slate-400={active}>
-  <a href="/ch/{id}">
+<a href="/ch/{id}">
+  <li class:active={active}>
     {#if hasUnreads}
-      <span class="badge bg-warning-500">❦</span>
+      <span>❦</span>
     {:else}
-      <span class="badge bg-primary-500">¶</span>
+      <span>¶</span>
     {/if}
-    <span class="flex-auto">{name}</span>
-  </a>
-</li>
+    <span>{name}</span>
+  </li>
+</a>
diff --git a/ui/lib/components/CreateChannelForm.svelte b/ui/lib/components/CreateChannelForm.svelte
index d50e60d..8fab4c4 100644
--- a/ui/lib/components/CreateChannelForm.svelte
+++ b/ui/lib/components/CreateChannelForm.svelte
@@ -15,16 +15,12 @@
   }
 </script>
 
-<form onsubmit={handleSubmit} class="form form-row flex-nowrap">
+<form onsubmit={handleSubmit}>
   <input
     type="text"
     placeholder="create channel"
     bind:value={name}
     {disabled}
-    class="input flex-auto h-6 w-9/12"
   />
-  <button type="submit" class="flex-none w-6 h-6">&#x2795;</button>
+  <button type="submit">&#x2795;</button>
 </form>
-
-<style>
-</style>
diff --git a/ui/lib/components/Invite.svelte b/ui/lib/components/Invite.svelte
index 937c911..ce45930 100644
--- a/ui/lib/components/Invite.svelte
+++ b/ui/lib/components/Invite.svelte
@@ -1,9 +1,9 @@
 <script>
-  import { clipboard } from '@skeletonlabs/skeleton';
+  import { copy } from 'svelte-copy';
 
   let { id } = $props();
   let inviteUrl = $derived(new URL(`/invite/${id}`, document.location));
 </script>
 
-<button class="btn bg-secondary-500" use:clipboard={inviteUrl}>copy</button>
-<span data-clipboard="inviteUrl">{inviteUrl}</span>
+<button use:copy={inviteUrl}>copy</button>
+<span>{inviteUrl}</span>
diff --git a/ui/lib/components/Invites.svelte b/ui/lib/components/Invites.svelte
index 493bf1c..5c5d601 100644
--- a/ui/lib/components/Invites.svelte
+++ b/ui/lib/components/Invites.svelte
@@ -14,11 +14,11 @@
 </script>
 
 <form {onsubmit}>
-  <button class="btn bg-primary-500" type="submit">create invitation</button>
+  <button type="submit">create invitation</button>
 </form>
 
-<ul class="mt-4">
+<ul>
   {#each invites as invite}
-    <li class="my-1"><Invite id={invite.id} /></li>
+    <li><Invite id={invite.id} /></li>
   {/each}
 </ul>
diff --git a/ui/lib/components/LogIn.svelte b/ui/lib/components/LogIn.svelte
index 7fb91e8..7e0f7cd 100644
--- a/ui/lib/components/LogIn.svelte
+++ b/ui/lib/components/LogIn.svelte
@@ -8,12 +8,11 @@
   } = $props();
 </script>
 
-<div class="card m-4 p-4">
+<div>
   <form {onsubmit}>
-    <label class="label" for="username">
+    <label for="username">
       username
       <input
-        class="input"
         name="username"
         type="text"
         placeholder="username"
@@ -21,10 +20,9 @@
         {disabled}
       />
     </label>
-    <label class="label" for="password">
+    <label for="password">
       password
       <input
-        class="input"
         name="password"
         type="password"
         placeholder="password"
@@ -32,7 +30,7 @@
         {disabled}
       />
     </label>
-    <button class="btn variant-filled" type="submit">
+    <button type="submit">
       {legend}
     </button>
   </form>
diff --git a/ui/lib/components/LogOut.svelte b/ui/lib/components/LogOut.svelte
index 52aa039..8b182e7 100644
--- a/ui/lib/components/LogOut.svelte
+++ b/ui/lib/components/LogOut.svelte
@@ -14,5 +14,5 @@
 </script>
 
 <form {onsubmit}>
-  <button class="btn bg-orange-400" type="submit">log out</button>
+  <button type="submit">log out</button>
 </form>
diff --git a/ui/lib/components/Message.svelte b/ui/lib/components/Message.svelte
index aa9e3e9..cfadbba 100644
--- a/ui/lib/components/Message.svelte
+++ b/ui/lib/components/Message.svelte
@@ -32,13 +32,13 @@
     data-at={at}
     {onmouseleave}
     >
-  <div class="handle chip bg-surface-700 absolute -top-6 right-0">
+  <div class="handle">
     {atFormatted}
     {#if editable}
       <button onclick={onDelete}>&#x1F5D1;&#xFE0F;</button>
     {/if}
   </div>
-  <section use:scroll class="py-1 message-body">
+  <section use:scroll class="message-body">
     <!-- eslint-disable-next-line svelte/no-at-html-tags -->
     {@html renderedBody}
   </section>
diff --git a/ui/lib/components/MessageInput.svelte b/ui/lib/components/MessageInput.svelte
index 22456f3..25a0352 100644
--- a/ui/lib/components/MessageInput.svelte
+++ b/ui/lib/components/MessageInput.svelte
@@ -23,17 +23,14 @@
   }
 </script>
 
-<form bind:this={form} onsubmit={onSubmit} class="flex flex-row flex-nowrap">
+<form bind:this={form} onsubmit={onSubmit}>
   <textarea
     onkeydown={onKeyDown}
     bind:value
     {disabled}
     type="search"
-    class="flex-auto h-6 py-0 input rounded-r-none text-nowrap"
   ></textarea>
   <button
-    color="primary variant-filled-secondary"
     type="submit"
-    class="flex-none w-6 h-6 btn-icon variant-filled rounded-l-none">&raquo;</button
-  >
+  >&raquo;</button>
 </form>
diff --git a/ui/lib/components/MessageRun.svelte b/ui/lib/components/MessageRun.svelte
index 581682e..6cad381 100644
--- a/ui/lib/components/MessageRun.svelte
+++ b/ui/lib/components/MessageRun.svelte
@@ -9,11 +9,10 @@
 </script>
 
 <div
-  class="card my-4 px-4 py-1 relative"
   class:own-message={ownMessage}
   class:other-message={!ownMessage}
 >
-  <span class="chip variant-soft sticky top-o left-0">
+  <span>
     @{name}:
   </span>
   {#each messages as message}