Nurfog/openccb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: apply nav-link-standard utility class to standardize navigation link styling across components.

Browse Source
This commit is contained in:
Juan Enrique Allende Cifuentes
2026-03-02 11:37:31 -03:00
parent 81e1830563
commit 9abe631782
3 changed files with 16 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/experience/src/app/globals.css
+4
View File
@@ -55,6 +55,10 @@ body {
@apply glass rounded-2xl p-4 md:p-6 transition-all duration-300;
}
.nav-link-standard {
@apply text-xs font-bold uppercase tracking-widest transition-colors flex items-center gap-2;
}
.glass-card:hover {
@apply border-white/20 bg-white/5;
}
web/experience/src/components/AppHeader.tsx
+5 -4
View File
@@ -46,17 +46,18 @@ export default function AppHeader() {
<div className="flex items-center gap-4">
<nav className="hidden md:flex items-center gap-8 mr-4" aria-label="Navegación principal">
<Link href="/" className="text-[10px] font-black uppercase tracking-[0.2em] text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors">
<Link href="/" className="nav-link-standard text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white">
{t('nav.catalog')}
</Link>
<Link href="/my-learning" className="text-[10px] font-black uppercase tracking-[0.2em] text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors">
<Link href="/my-learning" className="nav-link-standard text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white">
{t('nav.myLearning')}
</Link>
<Link href="/bookmarks" className="text-[10px] font-black uppercase tracking-[0.2em] text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors">
<Link href="/bookmarks" className="nav-link-standard text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white">
{t('nav.bookmarks')}
</Link>
{user && (
<Link href={`/profile/${user.id}`} className="text-[10px] font-black uppercase tracking-[0.2em] text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition-colors">
<Link href={`/profile/${user.id}`} className="nav-link-standard text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300">
MI PORTAFOLIO
</Link>
)}
web/studio/src/components/Navbar.tsx
+7 -6
View File
@@ -44,7 +44,7 @@ export function Navbar() {
<div className="flex items-center gap-4">
<Link
href="/"
className="text-sm font-medium text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors flex items-center gap-2"
className="nav-link-standard text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400"
>
<LayoutDashboard className="w-4 h-4" />
{t('nav.courses')}
@@ -52,18 +52,19 @@ export function Navbar() {
<Link
href="/library/assets"
className="text-sm font-medium text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors flex items-center gap-2"
className="nav-link-standard text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400"
>
<Library className="w-4 h-4" aria-hidden="true" />
{t('nav.library') || 'Library'}
</Link>
{user?.role === 'admin' && (
<>
{user.organization_id === '00000000-0000-0000-0000-000000000001' && (
<Link
href="/admin"
className="text-sm font-black text-indigo-400 hover:text-indigo-300 transition-colors flex items-center gap-2 bg-indigo-500/10 px-3 py-1.5 rounded-lg border border-indigo-500/20 shadow-glow-sm"
className="text-xs font-black text-indigo-400 hover:text-indigo-300 transition-colors flex items-center gap-2 bg-indigo-500/10 px-3 py-1.5 rounded-lg border border-indigo-500/20 shadow-glow-sm uppercase tracking-widest"
>
<ShieldCheck className="w-4 h-4" aria-hidden="true" />
{t('nav.globalControl')}
@@ -71,14 +72,14 @@ export function Navbar() {
)}
<Link
href="/settings/webhooks"
className="text-sm font-medium text-gray-400 hover:text-blue-400 transition-colors flex items-center gap-2"
className="nav-link-standard text-gray-400 hover:text-blue-400"
>
<Webhook className="w-4 h-4" />
{t('nav.webhooks')}
</Link>
<Link
href="/profile"
className="text-sm font-medium text-gray-400 hover:text-blue-400 transition-colors flex items-center gap-2"
className="nav-link-standard text-gray-400 hover:text-blue-400"
>
<Settings className="w-4 h-4" />
{t('nav.profile')}
@@ -88,7 +89,7 @@ export function Navbar() {
<Link
href="/settings"
className="text-sm font-medium text-gray-400 hover:text-blue-400 transition-colors flex items-center gap-2"
className="nav-link-standard text-gray-400 hover:text-blue-400"
>
<Settings className="w-4 h-4" />
Settings