From 9abe63178260cb264c23f0f4d6b2dcfd55d46860 Mon Sep 17 00:00:00 2001
From: Nurfog <juan.allende@gmail.com>
Date: Mon, 2 Mar 2026 11:37:31 -0300
Subject: [PATCH] refactor: apply `nav-link-standard` utility class to
 standardize navigation link styling across components.

---
 web/experience/src/app/globals.css          |  4 ++++
 web/experience/src/components/AppHeader.tsx |  9 +++++----
 web/studio/src/components/Navbar.tsx        | 13 +++++++------
 3 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/web/experience/src/app/globals.css b/web/experience/src/app/globals.css
index 6e364c4..6e63351 100644
--- a/web/experience/src/app/globals.css
+++ b/web/experience/src/app/globals.css
@@ -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;
 }
diff --git a/web/experience/src/components/AppHeader.tsx b/web/experience/src/components/AppHeader.tsx
index 34988c0..f5ca217 100644
--- a/web/experience/src/components/AppHeader.tsx
+++ b/web/experience/src/components/AppHeader.tsx
@@ -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>
                     )}
diff --git a/web/studio/src/components/Navbar.tsx b/web/studio/src/components/Navbar.tsx
index 89d1b03..8516238 100644
--- a/web/studio/src/components/Navbar.tsx
+++ b/web/studio/src/components/Navbar.tsx
@@ -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