zen/core
1
0
Fork 0
Code Issues Pull Requests Actions Packages Releases Activity

style(admin): improve icons grid layout and card appearance

Browse Source 
- increase grid columns across breakpoints including md, 2xl, and custom 16-col
- add aspect-square and justify-center to icon cards for uniform sizing
- update card style with solid border and background instead of transparent hover-only
- enlarge icon size from w-5/h-5 to w-7/h-7 and set color to white
- add full-width and padding to icon label for better text containment
This commit is contained in:
Hyko
2026-04-24 20:31:09 -04:00
parent 50f04f762b
commit 47437ecca8
1 changed files with 4 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/features/admin/devkit/IconsPage.client.js
+4 -4
View File
@@ -52,16 +52,16 @@ export default function IconsPage() {
Aucune icône trouvée pour “{query}” Aucune icône trouvée pour “{query}”
</p> </p>
) : ( ) : (
<div className="grid grid-cols-4 sm:grid-cols-6 lg:grid-cols-8 xl:grid-cols-10 gap-2"> <div className="grid grid-cols-4 sm:grid-cols-6 md:grid-cols-8 lg:grid-cols-10 xl:grid-cols-12 2xl:grid-cols-[repeat(16,minmax(0,1fr))] gap-2">
{filtered.map(([name, IconComponent]) => ( {filtered.map(([name, IconComponent]) => (
<button <button
key={name} key={name}
onClick={() => handleCopy(name)} onClick={() => handleCopy(name)}
title={name} title={name}
className="flex flex-col items-center gap-1.5 rounded-lg border border-transparent hover:border-neutral-200 dark:hover:border-neutral-700 hover:bg-neutral-50 dark:hover:bg-neutral-800/50 p-3 transition-colors duration-100 group cursor-pointer" className="aspect-square flex flex-col items-center justify-center gap-2 rounded-lg border border-neutral-200 dark:border-neutral-800 bg-neutral-100 dark:bg-neutral-900 hover:border-blue-500 dark:hover:border-blue-500 transition-colors duration-100 group cursor-pointer p-2"
> >
<IconComponent className="w-5 h-5 text-neutral-700 dark:text-neutral-300 group-hover:text-blue-700 dark:group-hover:text-blue-400 transition-colors" /> <IconComponent className="w-7 h-7 text-white transition-colors" />
<span className="text-[9px] text-neutral-400 dark:text-neutral-500 leading-tight text-center break-all line-clamp-2 group-hover:text-neutral-600 dark:group-hover:text-neutral-300"> <span className="text-[9px] text-neutral-400 dark:text-neutral-500 leading-tight text-center break-all line-clamp-2 group-hover:text-neutral-600 dark:group-hover:text-neutral-300 w-full px-1">
{name.replace('Icon', '')} {name.replace('Icon', '')}
</span> </span>
</button> </button>