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> </div>
<!-- Center: Search input + chips --> <!-- Center: Search input + chips -->
<div class="flex-1 flex flex-col items-center max-w-2xl mx-auto gap-1"> <div class="flex-1 flex flex-col items-center max-w-2xl mx-auto gap-2">
<!-- Pill input --> <!-- Big pill input -->
<div <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" @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 --> <!-- Tokens + input inline -->
<div class="flex items-center gap-2 flex-wrap flex-1 min-w-0"> <div class="flex items-center gap-2 flex-wrap flex-1 min-w-0">
@@ -24,17 +24,17 @@
<div <div
v-for="token in activeTokens" v-for="token in activeTokens"
:key="token.type" :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) }" :style="{ backgroundColor: getTokenColor(token.type) }"
@click.stop="$emit('edit-token', token.type)" @click.stop="$emit('edit-token', token.type)"
> >
<Icon :name="token.icon" size="12" /> <Icon :name="token.icon" size="14" />
<span class="max-w-24 truncate text-sm">{{ token.label }}</span> <span class="max-w-28 truncate">{{ token.label }}</span>
<button <button
class="hover:text-error" class="hover:text-error"
@click.stop="$emit('remove-token', token.type)" @click.stop="$emit('remove-token', token.type)"
> >
<Icon name="lucide:x" size="12" /> <Icon name="lucide:x" size="14" />
</button> </button>
</div> </div>
@@ -44,7 +44,7 @@
v-model="localSearchQuery" v-model="localSearchQuery"
type="text" type="text"
:placeholder="placeholder" :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)" @input="$emit('update:search-query', localSearchQuery)"
/> />
</div> </div>
@@ -53,15 +53,15 @@
<!-- Chips below --> <!-- Chips below -->
<div <div
v-if="availableChips.length > 0" v-if="availableChips.length > 0"
class="flex items-center justify-center gap-1.5" class="flex items-center justify-center gap-2"
> >
<button <button
v-for="chip in availableChips" v-for="chip in availableChips"
:key="chip.type" :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)" @click="$emit('start-select', chip.type)"
> >
<Icon name="lucide:plus" size="10" /> <Icon name="lucide:plus" size="12" />
{{ chip.label }} {{ chip.label }}
</button> </button>
</div> </div>