From 02725dfa2c2c77bd36cabf9eb8005402a5e53eef Mon Sep 17 00:00:00 2001
From: Alexis <isalexis.design@gmail.com>
Date: Tue, 2 Jun 2026 12:38:04 +0200
Subject: [PATCH] feat(ui): mejorar la estructura y estilos en el Footer y
 LandingPage
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Se ajustan los estilos y la estructura del componente Footer para mejorar la presentación y la alineación de los elementos. Además, se modifica el texto en LandingPage para una mejor claridad en la comunicación. Se optimizan las clases de Tailwind para una mejor responsividad y experiencia de usuario.
---
 .../dashboard/PublicationsTable.jsx           | 108 +++++++++++-------
 frontend/src/components/layout/Footer.jsx     |  18 +--
 frontend/src/pages/GroupResultsPage.jsx       |  10 +-
 frontend/src/pages/LandingPage.jsx            |   2 +-
 4 files changed, 87 insertions(+), 51 deletions(-)

diff --git a/frontend/src/components/dashboard/PublicationsTable.jsx b/frontend/src/components/dashboard/PublicationsTable.jsx
index f294b50..7142cd8 100644
--- a/frontend/src/components/dashboard/PublicationsTable.jsx
+++ b/frontend/src/components/dashboard/PublicationsTable.jsx
@@ -271,7 +271,8 @@ export function PublicationsTable({
               }`}
             >
               <FilterIcon />
-              Filtros
+              <span className="sm:hidden">Filtros</span>
+              <span className="hidden sm:inline">Filtros avanzados</span>
               {hasYearFilter && (
                 <span
                   className="ml-0.5 inline-block h-1.5 w-1.5 rounded-full bg-brand-accent"
@@ -303,51 +304,80 @@ export function PublicationsTable({
         {filtersOpen && (
           <div
             id="pubs-advanced-filters"
-            className="flex flex-wrap items-end gap-4 border-t border-surface-border/60 bg-surface-secondary/40 px-5 py-3"
+            className="border-t border-surface-border/60 bg-surface-secondary/40 px-5 py-3"
           >
-            <div className="flex min-w-[140px] flex-1 flex-col gap-1">
-              <label
-                htmlFor="year-from"
-                className="text-[11px] font-medium uppercase tracking-wide text-ink-tertiary"
-              >
-                Desde año
-              </label>
-              <CustomSelect
-                id="year-from"
-                value={yearFrom}
-                onChange={handleYearFromChange}
-                disabled={availableYears.length === 0}
-                options={availableYears.map((y) => ({
-                  value: String(y),
-                  label: String(y),
-                }))}
-                className="w-full"
-              />
+            <div className="mb-2 flex flex-wrap items-center justify-between gap-2">
+              <p className="text-xs font-medium text-ink-secondary">
+                Filtrar por año de publicación
+              </p>
+              {yearFilterSummary && (
+                <span className="rounded-full border border-brand-accent/30 bg-brand-accent/10 px-2 py-0.5 text-[11px] font-medium text-brand-accent">
+                  {yearFilterSummary}
+                </span>
+              )}
             </div>
-            <div className="flex min-w-[140px] flex-1 flex-col gap-1">
-              <label
-                htmlFor="year-to"
-                className="text-[11px] font-medium uppercase tracking-wide text-ink-tertiary"
-              >
-                Hasta año
-              </label>
-              <CustomSelect
-                id="year-to"
-                value={yearTo}
-                onChange={handleYearToChange}
-                disabled={availableYears.length === 0}
-                options={availableYears.map((y) => ({
-                  value: String(y),
-                  label: String(y),
-                }))}
-                className="w-full"
-              />
+
+            <div className="grid grid-cols-1 items-end gap-3 sm:grid-cols-[1fr_auto_1fr_auto]">
+              <div className="flex min-w-[140px] flex-1 flex-col gap-1">
+                <label
+                  htmlFor="year-from"
+                  className="text-[11px] font-medium uppercase tracking-wide text-ink-tertiary"
+                >
+                  Desde
+                </label>
+                <CustomSelect
+                  id="year-from"
+                  value={yearFrom}
+                  onChange={handleYearFromChange}
+                  disabled={availableYears.length === 0}
+                  options={availableYears.map((y) => ({
+                    value: String(y),
+                    label: String(y),
+                  }))}
+                  className="w-full"
+                />
+              </div>
+
+              <div className="hidden pb-2 text-center text-sm text-ink-tertiary sm:block">
+                —
+              </div>
+
+              <div className="flex min-w-[140px] flex-1 flex-col gap-1">
+                <label
+                  htmlFor="year-to"
+                  className="text-[11px] font-medium uppercase tracking-wide text-ink-tertiary"
+                >
+                  Hasta
+                </label>
+                <CustomSelect
+                  id="year-to"
+                  value={yearTo}
+                  onChange={handleYearToChange}
+                  disabled={availableYears.length === 0}
+                  options={availableYears.map((y) => ({
+                    value: String(y),
+                    label: String(y),
+                  }))}
+                  className="w-full"
+                />
+              </div>
+
+              {hasYearFilter && (
+                <button
+                  type="button"
+                  onClick={clearYearFilter}
+                  className="rounded-lg border border-surface-border-strong bg-surface-primary px-3 py-2 text-[13px] font-medium text-ink-secondary transition-colors hover:bg-surface-secondary"
+                >
+                  Limpiar
+                </button>
+              )}
             </div>
+
             {hasYearFilter && (
               <button
                 type="button"
                 onClick={clearYearFilter}
-                className="mb-[2px] rounded-md px-2.5 py-1.5 text-xs font-medium text-ink-tertiary transition-colors hover:bg-surface-primary hover:text-ink-primary"
+                className="sr-only"
               >
                 Limpiar rango
               </button>
diff --git a/frontend/src/components/layout/Footer.jsx b/frontend/src/components/layout/Footer.jsx
index eb9b709..04d29aa 100644
--- a/frontend/src/components/layout/Footer.jsx
+++ b/frontend/src/components/layout/Footer.jsx
@@ -6,11 +6,11 @@ export default function Footer() {
         <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
   
           {/* Main row */}
-          <div className="flex flex-col gap-8 lg:flex-row lg:items-start lg:justify-between">
+          <div className="flex flex-col gap-7 lg:flex-row lg:items-start lg:justify-between">
   
             {/* Brand */}
-            <div className="flex flex-col gap-2 lg:max-w-xs">
-              <div className="flex flex-wrap items-center gap-2">
+            <div className="flex flex-col gap-2 text-center lg:max-w-xs lg:text-left">
+              <div className="flex flex-wrap items-center justify-center gap-2 lg:justify-start">
                 <span className="text-base font-extrabold tracking-tight text-ink-primary">
                   ORCID<span className="text-orcid-green">2</span>SWORD
                 </span>
@@ -19,16 +19,16 @@ export default function Footer() {
                 </span>
               </div>
               <p className="text-sm leading-relaxed text-ink-secondary">
-                Sincronización de publicaciones ORCID al repositorio institucional.
+              Extracción y preparación de publicaciones ORCID para repositorios académicos.
               </p>
             </div>
   
             {/* Compatible con */}
             <div className="flex flex-col gap-2">
-              <span className="text-[10px] font-black uppercase tracking-[0.2em] text-ink-tertiary">
+              <span className="text-center text-[10px] font-black uppercase tracking-[0.2em] text-ink-tertiary lg:text-left">
                 Compatible con
               </span>
-              <div className="flex flex-wrap gap-1.5">
+              <div className="flex flex-wrap justify-center gap-1.5 lg:justify-start">
                 {technologies.map((tech) => (
                   <span
                     key={tech}
@@ -41,13 +41,13 @@ export default function Footer() {
             </div>
   
             {/* Institutional links */}
-            <div className="flex flex-row gap-6 sm:gap-8">
+            <div className="grid grid-cols-2 gap-2.5 sm:gap-3">
   
               {/* Universidad de Jaén */}
               <a
                 href="https://www.ujaen.es/"
                 target="_blank" rel="noopener noreferrer"
-                className="group flex items-center gap-2.5"
+                className="group flex items-center justify-center gap-2.5 rounded-lg border border-surface-border bg-surface-secondary/30 px-3 py-2 transition-colors hover:bg-surface-secondary/60"
                 title="Ir a la web oficial de la Universidad de Jaén"
               >
                 <div className="flex h-8 flex-col justify-center border-r-2 border-surface-border-strong pr-2.5 text-right transition-colors group-hover:border-brand-accent">
@@ -65,7 +65,7 @@ export default function Footer() {
               <a
                 href="https://github.com/uja-dev-practices/orcid_system"
                 target="_blank" rel="noopener noreferrer"
-                className="group flex items-center gap-2.5"
+                className="group flex items-center justify-center gap-2.5 rounded-lg border border-surface-border bg-surface-secondary/30 px-3 py-2 transition-colors hover:bg-surface-secondary/60"
                 title="Ver repositorio oficial"
               >
                 <div className="flex h-8 flex-col justify-center border-r-2 border-surface-border-strong pr-2.5 text-right transition-colors group-hover:border-brand-primary">
diff --git a/frontend/src/pages/GroupResultsPage.jsx b/frontend/src/pages/GroupResultsPage.jsx
index 613de83..68c1a46 100644
--- a/frontend/src/pages/GroupResultsPage.jsx
+++ b/frontend/src/pages/GroupResultsPage.jsx
@@ -214,6 +214,14 @@ export function GroupResultsPage() {
       <AppHeader variant="group" />
       <main className="flex-1">
         <div className="mx-auto w-full max-w-7xl px-4 py-7">
+          <Link
+            to="/"
+            className="mb-5 inline-flex items-center gap-1.5 text-sm text-ink-tertiary transition-colors hover:text-ink-primary"
+          >
+            <ArrowLeftIcon size={14} />
+            Volver al inicio
+          </Link>
+
           {/* Page header */}
           <div className="mb-6 flex flex-wrap items-center justify-between gap-4">
             <div className="flex items-center gap-3">
@@ -282,7 +290,6 @@ export function GroupResultsPage() {
                       swordProfile,
                     )
                   }
-                  swordProfile={swordProfile}
                 />
               ))}
             </div>
@@ -343,7 +350,6 @@ function ResearcherResultCard({
   isAuthenticated,
   exporting,
   onExport,
-  swordProfile,
 }) {
   const researcher = bundle.researcher ?? {};
   const publications = bundle.publications ?? [];
diff --git a/frontend/src/pages/LandingPage.jsx b/frontend/src/pages/LandingPage.jsx
index 8a9ce27..f26d92f 100644
--- a/frontend/src/pages/LandingPage.jsx
+++ b/frontend/src/pages/LandingPage.jsx
@@ -221,7 +221,7 @@ export function LandingPage() {
               Tus publicaciones, listas para depositar.
             </h1>
             <p className="mx-auto max-w-xl text-[16px] leading-relaxed text-ink-secondary">
-              Conecta tu ORCID y descárgalas en XML cuando quieras.
+              Conecta tu ORCID y descárgalas cuando quieras.
             </p>
           </div>