add: añadir iconos instalando la librería react-icons para los botones de login y logout.

ajustados márgenes en diferentes vistas para mantener coherencia visual.
This commit is contained in:
Alexis
2026-04-14 14:29:03 +02:00
parent 2ba01164ff
commit d2d3380b54
7 changed files with 26 additions and 7 deletions
+10
View File
@@ -12,6 +12,7 @@
"axios": "^1.13.6",
"react": "^19.2.4",
"react-dom": "^19.2.4",
"react-icons": "^5.6.0",
"react-router-dom": "^7.13.2",
"recharts": "^3.8.0",
"tailwindcss": "^4.2.2"
@@ -3077,6 +3078,15 @@
"react": "^19.2.4"
}
},
"node_modules/react-icons": {
"version": "5.6.0",
"resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.6.0.tgz",
"integrity": "sha512-RH93p5ki6LfOiIt0UtDyNg/cee+HLVR6cHHtW3wALfo+eOHTp8RnU2kRkI6E+H19zMIs03DyxUG/GfZMOGvmiA==",
"license": "MIT",
"peerDependencies": {
"react": "*"
}
},
"node_modules/react-is": {
"version": "19.2.4",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-19.2.4.tgz",
+1
View File
@@ -14,6 +14,7 @@
"axios": "^1.13.6",
"react": "^19.2.4",
"react-dom": "^19.2.4",
"react-icons": "^5.6.0",
"react-router-dom": "^7.13.2",
"recharts": "^3.8.0",
"tailwindcss": "^4.2.2"
@@ -37,7 +37,7 @@ export default function Step1BaseScale({
const currentScale = isZoomActive && needsZoom ? dynamicScale : 1;
return (
<div className="w-full bg-white p-6 rounded-2xl shadow-sm border border-slate-200 mb-6 flex flex-col items-center animate-fade-in relative overflow-visible">
<div className="w-full bg-white p-6 rounded-2xl shadow-sm border border-slate-200 flex flex-col items-center animate-fade-in relative overflow-visible">
<div className="flex justify-between items-center w-full mb-4 border-b pb-3 relative z-30">
<h2 className="text-xl font-bold text-slate-800">
@@ -19,7 +19,7 @@ const Step3FinalGraph = memo(({ data, criterionName }) => {
}
return (
<div className="w-full h-[550px] mt-2 bg-white p-6 rounded-2xl shadow-sm border border-slate-200 flex flex-col final-graph-container relative">
<div className="w-full h-[550px] bg-white p-6 rounded-2xl shadow-sm border border-slate-200 flex flex-col final-graph-container relative">
<style>{`.final-graph-container svg * { clip-path: none !important; }`}</style>
<h3 className="text-xl font-bold mb-4 text-center text-slate-800 uppercase">
+11 -3
View File
@@ -1,6 +1,7 @@
import { useState } from 'react';
import { Link, useNavigate, useLocation } from 'react-router-dom';
import { useAuth } from '../../context/AuthContext';
import { FiLogIn, FiLogOut } from 'react-icons/fi';
export default function Header() {
const [isDropdownOpen, setIsDropdownOpen] = useState(false);
@@ -60,8 +61,13 @@ export default function Header() {
<p className="text-xs font-bold text-slate-400 uppercase tracking-wider">Usuario</p>
<p className="text-sm font-bold text-slate-700 truncate">{user?.username}</p>
</div>
<button onClick={handleLogout} className="w-full text-left px-4 py-2 text-sm font-medium text-red-600 hover:bg-red-50 transition-colors">
🚪 Cerrar Sesión
<button
onClick={handleLogout}
className="w-full flex items-center gap-2 px-4 py-2 text-sm font-bold text-red-600 hover:bg-red-50 transition-colors"
>
<FiLogOut className="w-5 h-5" strokeWidth={2.5} />
Cerrar Sesión
</button>
</div>
</>
@@ -69,10 +75,12 @@ export default function Header() {
</div>
) : (
<div className="flex items-center border-l border-slate-200 pl-4">
<Link
to="/login"
className="text-sm font-bold bg-blue-600 text-white px-5 py-2.5 rounded-xl shadow-sm hover:bg-blue-700 transition-all active:scale-95"
className="flex items-center gap-2 text-sm font-bold bg-blue-600 text-white px-5 py-2.5 rounded-xl shadow-sm hover:bg-blue-700 transition-all active:scale-95"
>
<FiLogIn className="w-5 h-5" strokeWidth={2.5} />
Acceder
</Link>
</div>
+1 -1
View File
@@ -248,7 +248,7 @@ export default function DocEditor() {
)}
{step === 3 && finalResult && (
<div className="flex flex-col gap-6 w-full">
<div className="flex flex-col w-full">
<Step3FinalGraph data={finalResult} criterionName={criterionName} />
<button
+1 -1
View File
@@ -44,7 +44,7 @@ export default function History() {
};
return (
<div className="w-full max-w-7xl 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-2">
{/* Cabecera */}
<div className="flex justify-between items-center bg-white p-8 rounded-3xl shadow-sm border border-slate-200">
<div>