optovia/webapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Restore original token/chip styling in header search
Some checks failed
Build Docker Image / build (push) Has been cancelled
Details

Browse Source 
- Restore badge-lg for tokens (was badge-md)
- Restore btn btn-xs btn-ghost for chips (was minimal text)
- Restore text-lg for input, icon sizes 14/22
- Keep pill input design without card wrapper
This commit is contained in:
Ruslan Bakiev
2026-01-22 11:55:08 +07:00
parent 8c4613e0d6
commit 863425e46e
1 changed files with 12 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
app/components/navigation/MainNavigation.vue
View File

@@ -10,13 +10,13 @@
</div>
<!-- Center: Search input + chips -->
<div class="flex-1 flex flex-col items-center max-w-2xl mx-auto gap-1">
<!-- Pill input -->
<div class="flex-1 flex flex-col items-center max-w-2xl mx-auto gap-2">
<!-- Big pill input -->
<div
class="flex items-center gap-3 w-full px-5 py-2.5 rounded-full border border-base-300 bg-base-100 hover:border-primary focus-within:border-primary focus-within:ring-2 focus-within:ring-primary/20 transition-all cursor-text"
class="flex items-center gap-3 w-full px-5 py-3 rounded-full border border-base-300 bg-base-100 shadow-sm hover:shadow-md focus-within:border-primary focus-within:ring-2 focus-within:ring-primary/20 transition-all cursor-text"
@click="focusInput"
>
<Icon name="lucide:search" size="20" class="text-base-content/50 flex-shrink-0" />
<Icon name="lucide:search" size="22" class="text-primary flex-shrink-0" />
<!-- Tokens + input inline -->
<div class="flex items-center gap-2 flex-wrap flex-1 min-w-0">
@@ -24,17 +24,17 @@
<div
v-for="token in activeTokens"
:key="token.type"
class="badge badge-md gap-1 cursor-pointer hover:opacity-80 transition-all flex-shrink-0 text-white"
class="badge badge-lg gap-1.5 cursor-pointer hover:opacity-80 transition-all flex-shrink-0 text-white"
:style="{ backgroundColor: getTokenColor(token.type) }"
@click.stop="$emit('edit-token', token.type)"
>
<Icon :name="token.icon" size="12" />
<span class="max-w-24 truncate text-sm">{{ token.label }}</span>
<Icon :name="token.icon" size="14" />
<span class="max-w-28 truncate">{{ token.label }}</span>
<button
class="hover:text-error"
@click.stop="$emit('remove-token', token.type)"
>
<Icon name="lucide:x" size="12" />
<Icon name="lucide:x" size="14" />
</button>
</div>
@@ -44,7 +44,7 @@
v-model="localSearchQuery"
type="text"
:placeholder="placeholder"
class="flex-1 min-w-32 bg-transparent outline-none"
class="flex-1 min-w-32 bg-transparent outline-none text-lg"
@input="$emit('update:search-query', localSearchQuery)"
/>
</div>
@@ -53,15 +53,15 @@
<!-- Chips below -->
<div
v-if="availableChips.length > 0"
class="flex items-center justify-center gap-1.5"
class="flex items-center justify-center gap-2"
>
<button
v-for="chip in availableChips"
:key="chip.type"
class="text-xs text-base-content/60 hover:text-primary flex items-center gap-0.5 transition-colors"
class="btn btn-xs btn-ghost gap-1"
@click="$emit('start-select', chip.type)"
>
<Icon name="lucide:plus" size="10" />
<Icon name="lucide:plus" size="12" />
{{ chip.label }}
</button>
</div>