Skip to content

🎨 Palette: Polish UX with tooltips and Spanish linguistic fixes #9

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
Rumazor wants to merge 1 commit into from
Closed

🎨 Palette: Polish UX with tooltips and Spanish linguistic fixes #9

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions .Jules/palette.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
## 2025-01-29 - [Spanish Linguistic Quality & Tooltip Foundation]
**Learning:** Found a systemic pattern of missing Spanish accents (tildes) in button labels, ARIA labels, and form fields, which negatively impacts professionalism and screen reader pronunciation. Also discovered that `TooltipProvider` was missing from the global layout, preventing the use of accessible tooltips.
**Action:** Always verify linguistic correctness in Spanish (check common words like 'Mañana', 'más', 'descripción', 'Título') and ensure `TooltipProvider` is available at the root level before implementing new tooltips.
9 changes: 6 additions & 3 deletions frontend/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import "./globals.css";
import { Toaster } from "@/components/ui/toaster";
import { ThemeProvider } from "@/components/theme-provider";
import { PWAProvider } from "@/components/pwa";
import { TooltipProvider } from "@/components/ui/tooltip";

const inter = Inter({ subsets: ["latin"] });

Expand Down Expand Up @@ -79,9 +80,11 @@ export default function RootLayout({
enableSystem
disableTransitionOnChange
>
{children}
<Toaster />
<PWAProvider />
<TooltipProvider>
{children}
<Toaster />
<PWAProvider />
</TooltipProvider>
</ThemeProvider>
</body>
</html>
Expand Down
4 changes: 2 additions & 2 deletions frontend/components/tasks/task-dashboard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -170,7 +170,7 @@ export default function TaskDashboard({
<ModeToggle />
<Button variant="ghost" size="sm" onClick={handleLogout} className="text-muted-foreground hover:text-destructive transition-colors">
<LogOut className="h-4 w-4 mr-2" />
Cerrar sesion
Cerrar sesión
</Button>
</div>
</header>
Expand Down Expand Up @@ -241,7 +241,7 @@ export default function TaskDashboard({
value="mis-tareas"
className="data-[state=active]:bg-background"
>
Mias
Mías
<Badge variant="secondary" className="ml-2 bg-background/50">
{myTasksCount}
</Badge>
Expand Down
8 changes: 4 additions & 4 deletions frontend/components/tasks/task-form.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -175,7 +175,7 @@ export default function TaskForm({
<form onSubmit={handleSubmit} className="space-y-4">
<div className="space-y-4">
<div className="space-y-2">
<Label htmlFor="task-title">Titulo de la tarea</Label>
<Label htmlFor="task-title">Título de la tarea</Label>
<Input
id="task-title"
placeholder="Ej: Comprar leche"
Expand All @@ -186,7 +186,7 @@ export default function TaskForm({
</div>

<div className="space-y-2">
<Label htmlFor="task-description">Descripcion (opcional)</Label>
<Label htmlFor="task-description">Descripción (opcional)</Label>
<Textarea
id="task-description"
placeholder="Detalles adicionales sobre la tarea"
Expand All @@ -198,7 +198,7 @@ export default function TaskForm({

<div className="grid grid-cols-2 gap-3">
<div className="space-y-2">
<Label>Fecha limite</Label>
<Label>Fecha límite</Label>
<Popover open={calendarOpen} onOpenChange={setCalendarOpen}>
<PopoverTrigger asChild>
<Button
Expand Down Expand Up @@ -371,7 +371,7 @@ export default function TaskForm({
</Button>
{editingTask && (
<Button type="button" variant="ghost" onClick={onCancel} className="w-full h-10">
Cancelar Edicion
Cancelar edición
</Button>
)}
</div>
Expand Down
92 changes: 56 additions & 36 deletions frontend/components/tasks/task-list.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,11 @@
import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";
import { Badge } from "@/components/ui/badge";
import {
Tooltip,
TooltipContent,
TooltipTrigger,
} from "@/components/ui/tooltip";
import {
Edit,
Trash2,
Expand Down Expand Up @@ -66,7 +71,7 @@ function getDueDateInfo(dueDate: string) {
}
if (isTomorrow(date)) {
return {
label: "Manana",
label: "Mañana",
className: "text-blue-600 dark:text-blue-400",
icon: Calendar,
};
Expand Down Expand Up @@ -172,19 +177,26 @@ export default function TaskList({

<div className="flex items-center gap-1">
{hasLongDescription && (
<Button
variant="ghost"
size="sm"
className="h-6 w-6 p-0"
onClick={() => toggleTaskExpansion(task.id)}
aria-label={isExpanded ? "Contraer descripcion" : "Expandir descripcion"}
>
{isExpanded ? (
<ChevronUp className="h-4 w-4" />
) : (
<ChevronDown className="h-4 w-4" />
)}
</Button>
<Tooltip>
<TooltipTrigger asChild>
<Button
variant="ghost"
size="sm"
className="h-6 w-6 p-0"
onClick={() => toggleTaskExpansion(task.id)}
aria-label={isExpanded ? "Contraer descripción" : "Expandir descripción"}
>
{isExpanded ? (
<ChevronUp className="h-4 w-4" />
) : (
<ChevronDown className="h-4 w-4" />
)}
</Button>
</TooltipTrigger>
<TooltipContent side="top">
{isExpanded ? "Ver menos" : "Ver más"}
</TooltipContent>
</Tooltip>
)}
</div>
</div>
Expand All @@ -203,7 +215,7 @@ export default function TaskList({
onClick={() => toggleTaskExpansion(task.id)}
className="text-xs font-semibold text-primary hover:underline mt-1 focus:outline-none"
>
{isExpanded ? "Ver menos" : "Ver mas"}
{isExpanded ? "Ver menos" : "Ver más"}
</button>
)}
</div>
Expand Down Expand Up @@ -313,27 +325,35 @@ export default function TaskList({
</div>

<div className="flex space-x-1 ml-2 shrink-0 absolute top-4 right-4">
<Button
variant="ghost"
size="sm"
className="h-7 w-7 p-0"
onClick={() => onEdit(task)}
disabled={task.completed}
aria-label="Editar tarea"
title="Editar tarea"
>
<Edit className="h-3.5 w-3.5" />
</Button>
<Button
variant="ghost"
size="sm"
className="h-7 w-7 p-0"
onClick={() => handleDeleteClick(task)}
aria-label="Eliminar tarea"
title="Eliminar tarea"
>
<Trash2 className="h-3.5 w-3.5" />
</Button>
<Tooltip>
<TooltipTrigger asChild>
<Button
variant="ghost"
size="sm"
className="h-7 w-7 p-0"
onClick={() => onEdit(task)}
disabled={task.completed}
aria-label="Editar tarea"
>
<Edit className="h-3.5 w-3.5" />
</Button>
</TooltipTrigger>
<TooltipContent side="top">Editar tarea</TooltipContent>
</Tooltip>
<Tooltip>
<TooltipTrigger asChild>
<Button
variant="ghost"
size="sm"
className="h-7 w-7 p-0"
onClick={() => handleDeleteClick(task)}
aria-label="Eliminar tarea"
>
<Trash2 className="h-3.5 w-3.5" />
</Button>
</TooltipTrigger>
<TooltipContent side="top">Eliminar tarea</TooltipContent>
</Tooltip>
</div>
</div>
);
Expand Down