Skip to content

🎨 Palette: Polish Task List UX and Spanish linguistics #10

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 Task List UX and Spanish linguistics #10

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-05-15 - Spanish Linguistic Standards for UI Text
**Learning:** The application has a recurring pattern of missing required accents (tildes) on common Spanish words, which detracts from the professional feel and quality of the interface. This is a critical accessibility and UX detail for Spanish-speaking users.
**Action:** Strictly ensure that common UI words such as 'Mañana', 'más', 'descripción', 'Título', 'Edición', 'sesión', 'Mías', and 'Búsqueda' always include their proper accentuation. Use automated search (grep) to identify and correct these across the codebase.
6 changes: 3 additions & 3 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 @@ -208,7 +208,7 @@ export default function TaskDashboard({
<div className="flex items-center gap-3">
<div className="flex items-center gap-2">
<LayoutDashboard className="w-5 h-5 text-muted-foreground" />
<h3 className="font-semibold">Tus Tareas</h3>
<h3 className="font-semibold">Tus tareas</h3>
</div>
{/* View mode toggle */}
<div className="flex items-center gap-1 bg-muted/50 rounded-lg p-1">
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
2 changes: 1 addition & 1 deletion frontend/components/tasks/task-filters.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -326,7 +326,7 @@ export default function TaskFiltersComponent({
)}
{activeFilters.search && (
<Badge variant="secondary" className="text-xs">
Busqueda: {activeFilters.search}
Búsqueda: {activeFilters.search}
<button
className="ml-1 hover:text-destructive"
onClick={() => handleSearchChange("")}
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
23 changes: 16 additions & 7 deletions frontend/components/tasks/task-list.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import {
Clock,
AlertTriangle,
ChevronRight,
ClipboardList,
} from "lucide-react";
import type { Task } from "@/lib/types";
import { useState } from "react";
Expand Down Expand Up @@ -66,7 +67,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 All @@ -92,9 +93,17 @@ export default function TaskList({

if (tasks.length === 0) {
return (
<p className="text-center py-4 text-muted-foreground">
No se encontraron tareas. Crea una para empezar!
</p>
<div className="flex flex-col items-center justify-center py-12 px-4 text-center space-y-4 bg-muted/20 rounded-2xl border-2 border-dashed border-muted/50">
<div className="bg-background p-4 rounded-full shadow-sm ring-1 ring-border">
<ClipboardList className="h-8 w-8 text-muted-foreground" />
</div>
<div className="space-y-1">
<p className="font-semibold text-foreground">No se encontraron tareas</p>
<p className="text-sm text-muted-foreground max-w-[250px] mx-auto">
¡Crea tu primera tarea para empezar a organizar tu trabajo hoy mismo!
</p>
</div>
</div>
);
}

Expand Down Expand Up @@ -177,7 +186,7 @@ export default function TaskList({
size="sm"
className="h-6 w-6 p-0"
onClick={() => toggleTaskExpansion(task.id)}
aria-label={isExpanded ? "Contraer descripcion" : "Expandir descripcion"}
aria-label={isExpanded ? "Contraer descripción" : "Expandir descripción"}
>
{isExpanded ? (
<ChevronUp className="h-4 w-4" />
Expand All @@ -201,9 +210,9 @@ export default function TaskList({
{hasLongDescription && (
<button
onClick={() => toggleTaskExpansion(task.id)}
className="text-xs font-semibold text-primary hover:underline mt-1 focus:outline-none"
className="text-xs font-semibold text-primary hover:underline mt-1 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 rounded-sm transition-all"
>
{isExpanded ? "Ver menos" : "Ver mas"}
{isExpanded ? "Ver menos" : "Ver más"}
</button>
)}
</div>
Expand Down