admin/DoC
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: mejorar diseño de interfaz y UX

Browse Source
This commit is contained in:
Alexis
2026-04-07 09:39:48 +02:00
parent 9b85c644e0
commit 62a4db33a6
2 changed files with 18 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/layout/MainLayout.jsx
+10 -4
View File
@@ -102,11 +102,17 @@ export default function MainLayout({ children }) {
</div> </div>
) : ( ) : (
// BOTONES PARA USUARIO NO LOGUEADO // BOTONES PARA USUARIO NO LOGUEADO
<div className="flex items-center gap-3"> <div className="flex items-center gap-2 ml-2 border-l border-slate-200 pl-4">
<Link to="/login" className="text-sm font-bold text-slate-600 hover:text-blue-600 transition-colors"> <Link
Iniciar sesión to="/login"
className="text-sm font-bold text-slate-600 px-4 py-2 rounded-lg hover:text-blue-600 hover:bg-slate-100 transition-all"
>
Entrar
</Link> </Link>
<Link to="/register" className="text-sm font-bold bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors shadow-sm"> <Link
to="/register"
className="text-sm font-bold bg-blue-600 text-white px-4 py-2 rounded-lg shadow-sm hover:bg-blue-700 hover:shadow transition-all"
>
Registrarse Registrarse
</Link> </Link>
</div> </div>
frontend/src/pages/History.jsx
+8 -6
View File
@@ -44,8 +44,7 @@ export default function History() {
}; };
return ( return (
<div className="w-full max-w-5xl mx-auto flex flex-col gap-8 animate-fade-in pb-12"> <div className="w-full max-w-7xl mx-auto flex flex-col gap-8 animate-fade-in pb-12">
{/* Cabecera */} {/* Cabecera */}
<div className="flex justify-between items-center bg-white p-8 rounded-3xl shadow-sm border border-slate-200"> <div className="flex justify-between items-center bg-white p-8 rounded-3xl shadow-sm border border-slate-200">
<div> <div>
@@ -83,7 +82,7 @@ export default function History() {
return ( return (
<div key={itemId} className={`bg-white rounded-2xl shadow-sm border transition-all duration-300 ${isExpanded ? 'border-blue-300 ring-4 ring-blue-50' : 'border-slate-200 hover:border-slate-300'}`}> <div key={itemId} className={`bg-white rounded-2xl shadow-sm border transition-all duration-300 ${isExpanded ? 'border-blue-300 ring-4 ring-blue-50' : 'border-slate-200 hover:border-slate-300'}`}>
{/* Cabecera de la Card (Siempre visible) */} {/* Cabecera de la Card */}
<div className="p-6 flex flex-col sm:flex-row justify-between items-center gap-4 bg-slate-50/50 rounded-t-2xl"> <div className="p-6 flex flex-col sm:flex-row justify-between items-center gap-4 bg-slate-50/50 rounded-t-2xl">
<div className="flex items-center gap-4 w-full sm:w-auto"> <div className="flex items-center gap-4 w-full sm:w-auto">
<div className="w-12 h-12 bg-blue-100 text-blue-600 rounded-full flex items-center justify-center text-xl shadow-inner"> <div className="w-12 h-12 bg-blue-100 text-blue-600 rounded-full flex items-center justify-center text-xl shadow-inner">
@@ -92,7 +91,10 @@ export default function History() {
<div> <div>
<h3 className="text-xl font-bold text-slate-800">{item.name || 'Modelo sin título'}</h3> <h3 className="text-xl font-bold text-slate-800">{item.name || 'Modelo sin título'}</h3>
<p className="text-sm text-slate-500 font-medium"> <p className="text-sm text-slate-500 font-medium">
Guardado en el historial {item.created_at
? `Guardado el ${new Date(item.created_at).toLocaleDateString('es-ES', { day: '2-digit', month: 'long', year: 'numeric' })}`
: 'Guardado en el historial'
}
</p> </p>
</div> </div>
</div> </div>
@@ -109,12 +111,12 @@ export default function History() {
className="px-4 py-2.5 bg-white border border-red-200 text-red-500 font-bold rounded-xl hover:bg-red-50 transition-colors shadow-sm" className="px-4 py-2.5 bg-white border border-red-200 text-red-500 font-bold rounded-xl hover:bg-red-50 transition-colors shadow-sm"
title="Borrar modelo" title="Borrar modelo"
> >
🗑️ Borrar
</button> </button>
</div> </div>
</div> </div>
{/* Contenido Desplegable (La Gráfica) */} {/* Contenido Desplegable (La gráfica) */}
{isExpanded && ( {isExpanded && (
<div className="p-6 border-t border-slate-100 animate-fade-in bg-white rounded-b-2xl"> <div className="p-6 border-t border-slate-100 animate-fade-in bg-white rounded-b-2xl">
<Step3FinalGraph data={item} criterionName={item.name} /> <Step3FinalGraph data={item} criterionName={item.name} />