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 <button
onClick={() => setFilter('all')} onClick={() => setFilter('all')}
className={cn( 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' 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 All
</button> </button>
<button <button
onClick={() => setFilter('favorites')} onClick={() => setFilter('favorites')}
className={cn( 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' 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 Favorites
</button> </button>
<button <button
onClick={() => setFilter('recent')} onClick={() => setFilter('recent')}
className={cn( 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' 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 Recent
</button> </button>
</div> </div>