chore: more ui tweaks

package.json

@@ -4,7 +4,7 @@
     "description": "Privacy focused, cross-platform clipboard manager",
     "author": "Daniel Railean <me@ddlele.com>",
     "license": "No licence, rights reserved",
-    "version": "0.8.8-11october2025",
+    "version": "0.8.9-11october2025",
     "main": "dist/index.js",
     "repository": {
         "type": "git",

src/frontend/Components/Clips.svelte

@@ -17,7 +17,6 @@
         if (lastFire != hash) {
             lastFire = hash
             events.notifyBackend(eventsToBackend.itemsLoadBeforeHash, hash)
-            // console.log('loading items')
             if (resetFire != undefined) {
                 clearTimeout(resetFire)
             }
@@ -45,7 +44,6 @@
         visibleHashes = visibleHashes
         if (visibleHashes.includes($clipListFiltered[$clipListFiltered.length - 6][1].hash)) {
             loadMoreItemsBefore($clipListFiltered[$clipListFiltered.length - 1][1].hash)
-            // console.log('5th at the end is visible')
         }
     }
     const handleExit = (hash: string) => {
@@ -111,22 +109,20 @@
                                 <img src={item.content} alt="Base64png" />
                                 <div class="ml-1 flex flex-col">
                                     <button
-                                        class="m-1 h-8 rounded bg-gray-200 p-1 px-2 shadow dark:bg-stone-900"
+                                        class="m-1 h-8 rounded bg-gray-200 p-1 px-2 shadow dark:bg-neutral-900"
                                         on:click|stopPropagation={async () => {
                                             const img = new Image()
                                             img.src = item.content
                                             await img.decode()
-                                            console.log(img.width)
                                             events.notify(eventsToBackend.openImage, item.hash, img.width, img.height)
                                         }}
                                     >
                                         preview</button
                                     >
                                     <button
-                                        class="m-1 h-8 rounded bg-gray-200 p-1 px-2 shadow dark:bg-stone-900"
+                                        class="m-1 h-8 rounded bg-gray-200 p-1 px-2 shadow dark:bg-neutral-900"
                                         on:click|stopPropagation={async () => {
                                             const content = item.content.substring(22)
-                                            console.log(content)
                                             const decodedData = atob(content)
                                             const uInt8Array = new Uint8Array(decodedData.length)
 

src/frontend/Components/Debug.svelte

@@ -23,11 +23,11 @@
             currentPage.set(IPages.settings)
         }}
     >
-        < Back to settings
+        < Settings
     </p></MenuItem
 >
 <div
-    class="bg-neutral-100 px-2 py-2 pl-3 text-neutral-900 even:border-y even:bg-white dark:bg-stone-900 
+    class="bg-neutral-100 px-2 py-2 pl-3 text-neutral-900 even:border-y even:bg-white dark:bg-neutral-900 
 dark:text-neutral-200 
 even:dark:border-neutral-800 
 even:dark:bg-zinc-900"
@@ -36,15 +36,15 @@ even:dark:bg-zinc-900"
         <div class="flex flex-col">
             <p>Pressed keys:</p>
             {#each keys as key}
-                <p class="my-1 border border-black bg-stone-300 dark:bg-zinc-700">
+                <p class="my-1 border border-black bg-neutral-300 dark:bg-zinc-700">
                     {key.length > 0 ? key : '[nothing pressed]'}
                 </p>
             {/each}
         </div>
         <div class="flex flex-col">
             <p>Logs:</p>
             {#each $backendLogs as log}
-                <p class="my-1 border border-black bg-stone-300 dark:bg-zinc-700">
+                <p class="my-1 border border-black bg-neutral-300 dark:bg-zinc-700">
                     {log}
                 </p>
             {/each}

src/frontend/Components/Info.svelte

@@ -13,7 +13,7 @@
                 currentPage.set(IPages.settings)
             }}
         >
-            < Back to settings
+            < Settings
         </p>
     </MenuItem>
     <MenuItem>

src/frontend/Components/Login.svelte

@@ -136,9 +136,9 @@
             </h1>
         </div>
         {#if $isUserRemembered}
-            <div class="dark:bg-zincw-80 bg-white p-6">
+            <div class="w-80 bg-white dark:bg-zinc-900 p-6">
                 <div class="flex w-full flex-col items-center space-y-3">
-                    <p>Your clipboard manager is locked</p>
+                    <p class="text-center">The clipboard manager is locked</p>
                     <div class="relative my-3 w-full ">
                         <div class="absolute inset-y-0 right-0 flex items-center px-2">
                             <input class="js-$password-toggle hidden" id="toggle" type="checkbox" />
@@ -183,7 +183,7 @@
             </div>
         {:else}
             <div class="h-96 w-80">
-                <div class="dark:bg-zincw-full bg-white p-6">
+                <div class="dark:bg-zinc-900 w-full bg-white p-6">
                     <div class="mt-2">
                         <p class="text-center text-sm">Login or Register</p>
                         <div class="inputs">

src/frontend/Components/MenuItem.svelte

@@ -6,7 +6,7 @@
 <div
     {title}
     class="cursor-pointer bg-neutral-100 px-2 py-2 pl-3 text-neutral-900 even:border-y even:bg-white dark:border-neutral-800 
-    dark:bg-stone-900 
+    dark:bg-neutral-900 
     dark:text-neutral-200 
     {extraClass}
     even:dark:bg-zinc-900"

src/frontend/Components/PageHandler.svelte

@@ -35,7 +35,7 @@
 
 <main class="flex flex-col {appClasses}">
     <TitleBar {title} on:clickMinimize={minimize} />
-    <div class="nosbar page bg-white dark:bg-stone-900">
+    <div class="nosbar page bg-white dark:bg-neutral-900">
         <slot />
     </div>
     <SearchBar height={10} />

src/frontend/Components/Search.svelte

@@ -8,10 +8,9 @@
 </script>
 
 <div class="flex flex-col">
-    <MenuItem title="Go back to the items list">
+    <MenuItem title="Items">
         <div class="flex flex-row ">
-            <Icons icon="arrow-circle" centered={false} extraClass="stroke-2 rotate-[-90deg]" size="8" />
-            <p class="text-xl" on:click={() => currentPage.set(IPages.items)}>Back to items</p>
+            <p class="text-xl" on:click={() => currentPage.set(IPages.items)}>&lt; Items</p>
         </div>
     </MenuItem>
     <MenuItem>
@@ -20,7 +19,6 @@
             label="Show just images"
             title="show images only"
             fontSize={12}
-            defaultValue={false}
             on:change={(e) => {
                 searchOnlyImages.set(e.detail)
             }}

src/frontend/Components/Settings.svelte

@@ -36,10 +36,9 @@
 </script>
 
 <div class="settings flex cursor-pointer flex-col justify-items-start">
-    <MenuItem title="Go back to the items list">
-        <div class="flex flex-row ">
-            <Icons icon="arrow-circle" centered={false} extraClass="stroke-2 rotate-[-90deg]" size="8" />
-            <p class="text-xl" on:click={() => currentPage.set(IPages.items)}>Back to items</p>
+    <MenuItem title="Items">
+        <div class="flex flex-row " on:click={() => currentPage.set(IPages.items)}>
+            <p class="text-xl">&lt; Items</p>
         </div>
     </MenuItem>
     <MenuItem title="Open shortcuts configuration">

src/frontend/Components/ShortcutButtons.svelte

@@ -4,12 +4,12 @@
 
 <div class="flex flex-row items-center">
     {#each data as key}
-        <p class="mx-2 rounded border-b-4 border-gray-400 bg-gray-300 px-2 py-1 text-sm font-bold dark:border-stone-900 dark:bg-zinc-800">
+        <p class="mx-2 rounded border-b-4 border-gray-400 bg-gray-300 px-2 py-1 text-sm font-bold dark:border-neutral-900 dark:bg-zinc-800">
             {key}
         </p>
         {data.indexOf(key) != data.length - 1 ? '+' : ''}
     {:else}
-        <p class="mx-2 text-sm rounded border-b-4 dark:border-stone-900 bg-gray-300 border-gray-400 dark:bg-zinc-800 px-2 py-1 font-bold">
+        <p class="mx-2 text-sm rounded border-b-4 dark:border-neutral-900 bg-gray-300 border-gray-400 dark:bg-zinc-800 px-2 py-1 font-bold">
             nothing pressed
         </p>
     {/each}

src/frontend/Components/ShortcutsHandler.svelte

@@ -373,12 +373,12 @@
                 currentPage.set(IPages.settings)
             }}
         >
-            < Back to settings
+            < Settings
         </p></MenuItem
     >
     {#each entries(shortcuts) as shortcut}
         <div
-            class="bg-neutral-100 px-2 py-2 pl-3 text-neutral-900 even:border-y even:bg-white dark:bg-stone-900 
+            class="bg-neutral-100 px-2 py-2 pl-3 text-neutral-900 even:border-y even:bg-white dark:bg-neutral-900 
 dark:text-neutral-200 
 even:dark:border-neutral-800 
 even:dark:bg-zinc-900"

src/frontend/Components/TotpConfirm.svelte

@@ -25,7 +25,7 @@
     <div
         class="absolute inset-0 flex items-center justify-center bg-neutral-700 bg-opacity-50 text-zinc-900 dark:bg-zinc-900 dark:text-neutral-100"
     >
-        <div class="max-w-sm bg-white p-6 dark:bg-stone-900">
+        <div class="max-w-sm bg-white p-6 dark:bg-neutral-900">
             <div class="flex h-12 flex-row items-center justify-center">
                 <Icons icon="logo" centered={false} size="12" />
                 <h1 class="pl-1 text-2xl">

src/frontend/www/tailwind.pcss

@@ -16,7 +16,7 @@
     }
     html,
     body {
-        @apply flex relative w-full h-full m-0 box-border text-neutral-900 dark:bg-stone-900;
+        @apply flex relative w-full h-full m-0 box-border text-neutral-900 dark:bg-zinc-900;
     }
     body {
         @apply overflow-y-hidden;