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

refactor(admin): replace inline svgs with icon components and fix icon colors

Browse Source 
- replace inline hamburger/close svg with Menu01Icon component in AdminTop
- replace inline chevron svg with ChevronRightIcon component for breadcrumbs
- add ChevronRightIcon and Menu01Icon imports to AdminTop
- fix UserCircle02Icon fill values from hardcoded #ffffff to currentColor
This commit is contained in:
Hyko
2026-04-24 21:02:33 -04:00
parent 650d2dbb27
commit 759184f0ed
2 changed files with 15 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/features/admin/components/AdminTop.js
+3 -7
View File
@@ -2,7 +2,7 @@
import { Fragment, useState, useEffect } from 'react';
import { Menu, MenuButton, MenuItem, MenuItems, Transition } from '@headlessui/react';
import { ChevronDownIcon, User03Icon, DashboardSquare03Icon, Logout02Icon } from '@zen/core/shared/icons';
import { ChevronDownIcon, ChevronRightIcon, Menu01Icon, User03Icon, DashboardSquare03Icon, Logout02Icon } from '@zen/core/shared/icons';
import { UserAvatar } from '@zen/core/shared/components';
import { useRouter, usePathname } from 'next/navigation';
import { getPage, getPages } from '../registry.js';
@@ -87,9 +87,7 @@ const AdminTop = ({ isMobileMenuOpen, setIsMobileMenuOpen, user, onLogout, appNa
className="p-1 rounded-md text-neutral-500 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white transition-colors duration-150"
aria-label="Toggle menu"
>
<svg className={`h-5 w-5 transition-transform duration-200 ${isMobileMenuOpen ? 'rotate-90' : ''}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d={isMobileMenuOpen ? "M6 18L18 6M6 6l12 12" : "M4 6h16M4 12h16M4 18h16"} />
</svg>
<Menu01Icon className="h-5 w-5 transition-transform duration-200" />
</button>
<h1 className="text-neutral-900 dark:text-white font-semibold text-sm">{appName}</h1>
</div>
@@ -99,9 +97,7 @@ const AdminTop = ({ isMobileMenuOpen, setIsMobileMenuOpen, user, onLogout, appNa
{breadcrumbs.length > 0 && breadcrumbs.map((crumb, i) => (
<Fragment key={i}>
{i > 0 && (
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="text-neutral-400 dark:text-neutral-600 flex-shrink-0">
<polyline points="9 18 15 12 9 6" />
</svg>
<ChevronRightIcon className="w-3 h-3 text-neutral-400 dark:text-neutral-600 flex-shrink-0" />
)}
{crumb.icon ? (
<button
src/shared/icons/index.js
+12 -4
View File
@@ -13,9 +13,9 @@ export const ChevronRightIcon = (props) => (
export const UserCircle02Icon = (props) => (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width={64} height={64} color={"currentColor"} fill={"none"} {...props}>
<path fillRule="evenodd" clipRule="evenodd" d="M12 3.20455C7.1424 3.20455 3.20455 7.1424 3.20455 12C3.20455 16.8576 7.1424 20.7955 12 20.7955C16.8576 20.7955 20.7955 16.8576 20.7955 12C20.7955 7.1424 16.8576 3.20455 12 3.20455ZM1.25 12C1.25 6.06294 6.06294 1.25 12 1.25C17.9371 1.25 22.75 6.06294 22.75 12C22.75 17.9371 17.9371 22.75 12 22.75C6.06294 22.75 1.25 17.9371 1.25 12Z" fill="#ffffff"></path>
<path d="M8.5 9.5C8.5 7.567 10.067 6 12 6C13.933 6 15.5 7.567 15.5 9.5C15.5 11.433 13.933 13 12 13C10.067 13 8.5 11.433 8.5 9.5Z" fill="#ffffff"></path>
<path d="M5.40873 17.6472C6.43247 15.8556 8.3377 14.75 10.4011 14.75H13.5979C15.6613 14.75 17.5666 15.8556 18.5903 17.6472L19.6094 19.5928C17.6634 21.5432 14.9724 22.7499 11.9996 22.7499C9.0267 22.7499 6.33569 21.5431 4.38965 19.5928L5.40873 17.6472Z" fill="#ffffff"></path>
<path fillRule="evenodd" clipRule="evenodd" d="M12 3.20455C7.1424 3.20455 3.20455 7.1424 3.20455 12C3.20455 16.8576 7.1424 20.7955 12 20.7955C16.8576 20.7955 20.7955 16.8576 20.7955 12C20.7955 7.1424 16.8576 3.20455 12 3.20455ZM1.25 12C1.25 6.06294 6.06294 1.25 12 1.25C17.9371 1.25 22.75 6.06294 22.75 12C22.75 17.9371 17.9371 22.75 12 22.75C6.06294 22.75 1.25 17.9371 1.25 12Z" fill="currentColor"></path>
<path d="M8.5 9.5C8.5 7.567 10.067 6 12 6C13.933 6 15.5 7.567 15.5 9.5C15.5 11.433 13.933 13 12 13C10.067 13 8.5 11.433 8.5 9.5Z" fill="currentColor"></path>
<path d="M5.40873 17.6472C6.43247 15.8556 8.3377 14.75 10.4011 14.75H13.5979C15.6613 14.75 17.5666 15.8556 18.5903 17.6472L19.6094 19.5928C17.6634 21.5432 14.9724 22.7499 11.9996 22.7499C9.0267 22.7499 6.33569 21.5431 4.38965 19.5928L5.40873 17.6472Z" fill="currentColor"></path>
</svg>
);
@@ -508,7 +508,7 @@ export const Logout02Icon = (props) => (
export const SmartPhone01Icon = (props) => (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width={64} height={64} color={"currentColor"} fill={"none"} {...props}>
<path d="M14.3643 1.25195C15.1368 1.25654 15.7946 1.27495 16.3428 1.34863C17.1067 1.45134 17.7692 1.67346 18.2979 2.20215C18.8265 2.73084 19.0487 3.39328 19.1514 4.15723C19.2496 4.88804 19.25 5.81361 19.25 6.94629V17.0537C19.25 18.1864 19.2496 19.112 19.1514 19.8428C19.0487 20.6067 18.8265 21.2692 18.2979 21.7979C17.7692 22.3265 17.1067 22.5487 16.3428 22.6514C15.612 22.7496 14.6864 22.75 13.5537 22.75H10.4463L9.63574 22.748C8.86316 22.7435 8.20542 22.725 7.65723 22.6514C6.89328 22.5487 6.23084 22.3265 5.70215 21.7979C5.17346 21.2692 4.95134 20.6067 4.84863 19.8428C4.75041 19.112 4.74998 18.1864 4.75 17.0537V6.94629L4.75195 6.13574C4.75654 5.36316 4.77495 4.70542 4.84863 4.15723C4.95134 3.39328 5.17346 2.73084 5.70215 2.20215C6.23084 1.67346 6.89328 1.45134 7.65723 1.34863C8.38804 1.25041 9.31361 1.24998 10.4463 1.25H13.5537L14.3643 1.25195ZM12 18C11.4477 18 11 18.4477 11 19C11 19.5523 11.4477 20 12 20C12.5523 20 13 19.5523 13 19C13 18.4477 12.5523 18 12 18Z" fill="#ffffff"></path>
<path d="M14.3643 1.25195C15.1368 1.25654 15.7946 1.27495 16.3428 1.34863C17.1067 1.45134 17.7692 1.67346 18.2979 2.20215C18.8265 2.73084 19.0487 3.39328 19.1514 4.15723C19.2496 4.88804 19.25 5.81361 19.25 6.94629V17.0537C19.25 18.1864 19.2496 19.112 19.1514 19.8428C19.0487 20.6067 18.8265 21.2692 18.2979 21.7979C17.7692 22.3265 17.1067 22.5487 16.3428 22.6514C15.612 22.7496 14.6864 22.75 13.5537 22.75H10.4463L9.63574 22.748C8.86316 22.7435 8.20542 22.725 7.65723 22.6514C6.89328 22.5487 6.23084 22.3265 5.70215 21.7979C5.17346 21.2692 4.95134 20.6067 4.84863 19.8428C4.75041 19.112 4.74998 18.1864 4.75 17.0537V6.94629L4.75195 6.13574C4.75654 5.36316 4.77495 4.70542 4.84863 4.15723C4.95134 3.39328 5.17346 2.73084 5.70215 2.20215C6.23084 1.67346 6.89328 1.45134 7.65723 1.34863C8.38804 1.25041 9.31361 1.24998 10.4463 1.25H13.5537L14.3643 1.25195ZM12 18C11.4477 18 11 18.4477 11 19C11 19.5523 11.4477 20 12 20C12.5523 20 13 19.5523 13 19C13 18.4477 12.5523 18 12 18Z" fill="currentColor"></path>
</svg>
);
@@ -518,3 +518,11 @@ export const ComputerIcon = (props) => (
<path fillRule="evenodd" clipRule="evenodd" d="M10.5 16.75C10.5 16.1977 10.9477 15.75 11.5 15.75H12.5C13.0523 15.75 13.5 16.1977 13.5 16.75V19.25C13.5 19.5261 13.7239 19.75 14 19.75H16C16.5523 19.75 17 20.1977 17 20.75C17 21.3023 16.5523 21.75 16 21.75H8C7.44772 21.75 7 21.3023 7 20.75C7 20.1977 7.44772 19.75 8 19.75H10C10.2761 19.75 10.5 19.5261 10.5 19.25V16.75Z" fill="currentColor" />
</svg>
);
export const Menu01Icon = (props) => (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width={64} height={64} color={"currentColor"} fill={"none"} {...props}>
<path fillRule="evenodd" clipRule="evenodd" d="M3 5C3 4.44772 3.44772 4 4 4L20 4C20.5523 4 21 4.44772 21 5C21 5.55229 20.5523 6 20 6L4 6C3.44772 6 3 5.55228 3 5Z" fill="currentColor"></path>
<path fillRule="evenodd" clipRule="evenodd" d="M3 12C3 11.4477 3.44772 11 4 11L20 11C20.5523 11 21 11.4477 21 12C21 12.5523 20.5523 13 20 13L4 13C3.44772 13 3 12.5523 3 12Z" fill="currentColor"></path>
<path fillRule="evenodd" clipRule="evenodd" d="M3 19C3 18.4477 3.44772 18 4 18L20 18C20.5523 18 21 18.4477 21 19C21 19.5523 20.5523 20 20 20L4 20C3.44772 20 3 19.5523 3 19Z" fill="currentColor"></path>
</svg>
);