smaller button and search box

This commit is contained in:
Gamosoft 2025-12-05 14:40:40 +01:00
parent 5d61b115c2
commit ed0d235332
1 changed files with 9 additions and 9 deletions

View File

@ -849,25 +849,25 @@
</div>
<!-- Search -->
<div class="flex-shrink-0 p-3 border-b" style="border-color: var(--border-primary);">
<div class="flex-shrink-0 px-2 py-2 border-b" style="border-color: var(--border-primary);">
<div class="relative">
<input
type="text"
x-model="searchQuery"
@input="searchNotes()"
placeholder="Search notes..."
class="w-full px-3 py-2 pl-8 pr-8 text-sm rounded-lg focus:outline-none focus:ring-2"
placeholder="Search..."
class="w-full px-2 py-1.5 pl-7 pr-7 text-xs rounded focus:outline-none focus:ring-1"
style="background-color: var(--bg-primary); color: var(--text-primary); border: 1px solid var(--border-primary);"
>
<!-- Search Icon -->
<svg class="absolute left-2 top-2.5 w-4 h-4" style="color: var(--text-tertiary);" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg class="absolute left-2 top-2 w-3.5 h-3.5" style="color: var(--text-tertiary);" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
</svg>
<!-- Clear Button -->
<button
x-show="searchQuery.length > 0"
@click="searchQuery = ''; searchResults = []; currentSearchHighlight = ''; clearSearchHighlights();"
class="absolute right-2 top-2.5 w-4 h-4 flex items-center justify-center rounded-full hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors"
class="absolute right-1.5 top-1.5 w-4 h-4 flex items-center justify-center rounded-full hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors"
style="color: var(--text-tertiary);"
title="Clear search"
>
@ -880,7 +880,7 @@
<!-- Match Navigation (shown when there are matches in current note) -->
<div
x-show="totalMatches > 0"
class="flex items-center justify-between mt-2 px-2 py-1 rounded text-xs"
class="flex items-center justify-between mt-1.5 px-2 py-0.5 rounded text-xs"
style="background-color: var(--bg-secondary); color: var(--text-secondary);"
>
<span x-text="`Match ${currentMatchIndex + 1} of ${totalMatches}`"></span>
@ -978,16 +978,16 @@
</div>
<!-- New Item Dropdown -->
<div class="flex-shrink-0 p-3 border-b" style="border-color: var(--border-primary);">
<div class="flex-shrink-0 px-2 py-1.5 border-b" style="border-color: var(--border-primary);">
<button
@click="dropdownTargetFolder = ''; toggleNewDropdown($event)"
class="w-full px-4 py-2 text-sm font-medium text-white rounded-lg focus:outline-none focus:ring-2 flex items-center justify-center gap-2"
class="w-full px-3 py-1.5 text-xs font-medium text-white rounded focus:outline-none focus:ring-1 flex items-center justify-center gap-1.5"
style="background-color: var(--accent-primary);"
onmouseover="this.style.backgroundColor='var(--accent-hover)'"
onmouseout="this.style.backgroundColor='var(--accent-primary)'"
>
<span>+ New</span>
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg>
</button>