valknar/kit-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: improve icon alignment in figlet font selector tabs

Browse Source 
- Switch from inline-block to flex items-center justify-center for filter tab buttons
- Adjust icon spacing for better visual balance
This commit is contained in:
Sebastian Krüger
2026-02-23 08:01:48 +01:00
parent 59ad5143eb
commit d767f9714c
1 changed files with 6 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
components/figlet/FontSelector.tsx
View File

@@ -128,31 +128,31 @@ export function FontSelector({
<button
onClick={() => setFilter('all')}
className={cn(
'flex-1 px-3 py-1.5 text-xs font-medium rounded-md transition-colors',
'flex-1 flex items-center justify-center px-3 py-1.5 text-xs font-medium rounded-md transition-colors',
filter === 'all' ? 'bg-background shadow-sm' : 'hover:bg-background/50'
)}
>
<List className="inline-block h-3 w-3 mr-1" />
<List className="h-3 w-3 mr-1.5" />
All
</button>
<button
onClick={() => setFilter('favorites')}
className={cn(
'flex-1 px-3 py-1.5 text-xs font-medium rounded-md transition-colors',
'flex-1 flex items-center justify-center px-3 py-1.5 text-xs font-medium rounded-md transition-colors',
filter === 'favorites' ? 'bg-background shadow-sm' : 'hover:bg-background/50'
)}
>
<Heart className="inline-block h-3 w-3 mr-1" />
<Heart className="h-3 w-3 mr-1.5" />
Favorites
</button>
<button
onClick={() => setFilter('recent')}
className={cn(
'flex-1 px-3 py-1.5 text-xs font-medium rounded-md transition-colors',
'flex-1 flex items-center justify-center px-3 py-1.5 text-xs font-medium rounded-md transition-colors',
filter === 'recent' ? 'bg-background shadow-sm' : 'hover:bg-background/50'
)}
>
<Clock className="inline-block h-3 w-3 mr-1" />
<Clock className="h-3 w-3 mr-1.5" />
Recent
</button>
</div>