Skip to content

Commit 5fd970c

Browse files
tomas2ptomas2p
committed
refactor: mejorar diseño y espaciado en componentes, ajustar traducciones y optimizar la lógica de la interfaz
1 parent ea66d88 commit 5fd970c

File tree

9 files changed

+160
-183
lines changed

9 files changed

+160
-183
lines changed

‎client/src/App.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,10 +24,10 @@ export default function App() {
2424
);
2525

2626
return (
27-
<div className="flex min-h-screen flex-col bg-linear-to-br from-background via-background to-muted/30">
27+
<div className="flex min-h-screen flex-col bg-linear-to-br from-background via-background to-muted/30 px-4 sm:px-6 md:px-8">
2828
<AppMenubar />
2929

30-
<main className="flex-1 flex overflow-auto py-10 items-center">
30+
<main className="flex-1 w-full py-4 sm:py-8 md:py-10 mt-10 md:mt-16">
3131
<Routes>
3232
<Route path="/" element={publicRoute(LandingPage)} />
3333
<Route path="/login" element={publicRoute(LoginPage)} />

‎client/src/components/appMenubar.tsx‎

Lines changed: 106 additions & 104 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@ import {
1515
} from "@/components/ui/sheet";
1616
import { navigationItems } from "@/config/navigation";
1717
import { useAuth } from "@/hooks/useAuth";
18-
import { useTheme } from "@/hooks/useTheme";
1918
import { useState } from "react";
2019
import { Link, useNavigate } from "react-router-dom";
2120
import { useTranslation } from "react-i18next";
@@ -24,7 +23,6 @@ export default function AppMenubar() {
2423
const { t } = useTranslation();
2524
const navigate = useNavigate();
2625
const { user, isAuthenticated, signOut } = useAuth();
27-
const { theme } = useTheme();
2826
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
2927

3028
const handleLogout = () => {
@@ -33,116 +31,120 @@ export default function AppMenubar() {
3331
setMobileMenuOpen(false);
3432
};
3533

36-
const logoFill = theme === "dark" ? "#ffffff" : "#000000";
37-
3834
return (
39-
<header className="fixed top-0 left-0 right-0 z-50 border border-border bg-card w-fit md:w-6xl rounded-lg mx-auto px-4 mt-4 mb-2">
40-
<div className="mx-auto flex max-w-6xl h-full justify-between items-center gap-20">
41-
<Link to="/" className="flex items-center gap-2">
42-
<Logo fill={logoFill} width={32} height={32} className="h-8 w-8" />
43-
<span className="text-lg font-semibold">{t("app.name")}</span>
44-
</Link>
35+
<header className="fixed top-0 left-0 right-0 z-50 max-w-6xl mx-auto px-2 sm:px-6 md:px-8 mt-2 sm:mt-4">
36+
<nav className="flex items-center justify-between w-full py-2 border border-border bg-card rounded-lg px-4 sm:px-6 md:px-8">
37+
<Link to="/" className="flex items-center gap-2 min-w-0">
38+
<Logo
39+
width={28}
40+
height={28}
41+
className="h-7 w-7 sm:h-8 sm:w-8 md:h-9 md:w-9 primary"
42+
/>
43+
<span className="text-base sm:text-lg md:text-xl font-semibold truncate max-w-[120px] sm:max-w-none">
44+
{t("app.name")}
45+
</span>
46+
</Link>
4547

46-
<div className="hidden md:block">
47-
{isAuthenticated && <NavigationMenuWithActiveItem />}
48-
</div>
48+
<div className="hidden md:block">
49+
{isAuthenticated && <NavigationMenuWithActiveItem />}
50+
</div>
4951

50-
<div className="flex items-center gap-2">
51-
{isAuthenticated && (
52-
<>
53-
{/* Campana de notificaciones (desktop y móvil) */}
54-
<NotificationBell />
52+
<div className="flex items-center gap-2">
53+
{isAuthenticated && (
54+
<>
55+
{/* Campana de notificaciones (desktop y móvil) */}
56+
<NotificationBell />
5557

56-
{/* Desktop: menú de usuario */}
57-
<div className="hidden md:flex md:items-center">
58-
<DropdownMenuWithIcon
59-
onLogout={handleLogout}
60-
userName={user?.name}
61-
userEmail={user?.email}
62-
userInitial={
63-
user?.image
64-
? undefined
65-
: user?.name && user.name.charAt(0).toUpperCase()
66-
}
67-
userImage={user?.image}
68-
onSettings={() => navigate("/settings")}
69-
/>
70-
</div>
58+
{/* Desktop: menú de usuario */}
59+
<div className="hidden md:flex md:items-center">
60+
<DropdownMenuWithIcon
61+
onLogout={handleLogout}
62+
userName={user?.name}
63+
userEmail={user?.email}
64+
userInitial={
65+
user?.image
66+
? undefined
67+
: user?.name && user.name.charAt(0).toUpperCase()
68+
}
69+
userImage={user?.image}
70+
onSettings={() => navigate("/settings")}
71+
/>
72+
</div>
7173

72-
{/* Mobile Layout */}
73-
<div className="md:hidden">
74-
<Sheet open={mobileMenuOpen} onOpenChange={setMobileMenuOpen}>
75-
<SheetTrigger asChild>
76-
<Button
77-
variant="ghost"
78-
size="icon"
79-
leftIcon={"IconMenu2"}
80-
/>
81-
</SheetTrigger>
82-
<SheetContent side="right">
83-
<SheetHeader>
84-
<SheetTitle>{t("nav.menu")}</SheetTitle>
85-
</SheetHeader>
86-
<div className="flex flex-col gap-2 mt-6">
87-
<div className="flex items-center gap-3 p-3 rounded-lg">
88-
<Avatar className="h-10 w-10">
89-
<AvatarImage src={user?.image} alt={user?.name} />
90-
<AvatarFallback>
91-
{user?.name && user.name.charAt(0).toUpperCase()}
92-
</AvatarFallback>
93-
</Avatar>
94-
<div className="flex-1 min-w-0">
95-
<p className="font-medium truncate">{user?.name}</p>
96-
<p className="text-sm text-muted-foreground truncate">
97-
{user?.email}
98-
</p>
99-
</div>
74+
{/* Mobile Layout */}
75+
<div className="md:hidden">
76+
<Sheet open={mobileMenuOpen} onOpenChange={setMobileMenuOpen}>
77+
<SheetTrigger asChild>
78+
<Button
79+
variant="ghost"
80+
size="icon"
81+
leftIcon={"IconMenu2"}
82+
/>
83+
</SheetTrigger>
84+
<SheetContent side="right">
85+
<SheetHeader>
86+
<SheetTitle>{t("nav.menu")}</SheetTitle>
87+
</SheetHeader>
88+
<div className="flex flex-col gap-2 mt-6">
89+
<div className="flex items-center gap-3 p-3 rounded-lg">
90+
<Avatar className="h-10 w-10">
91+
<AvatarImage src={user?.image} alt={user?.name} />
92+
<AvatarFallback>
93+
{user?.name && user.name.charAt(0).toUpperCase()}
94+
</AvatarFallback>
95+
</Avatar>
96+
<div className="flex-1 min-w-0">
97+
<p className="font-medium truncate">{user?.name}</p>
98+
<p className="text-sm text-muted-foreground truncate">
99+
{user?.email}
100+
</p>
100101
</div>
101-
<div className="flex flex-col gap-2">
102-
{navigationItems.map((item) => (
103-
<Button
104-
key={item.href}
105-
variant="ghost"
106-
className="justify-start"
107-
leftIcon={item.icon}
108-
onClick={() => {
109-
navigate(item.href);
110-
setMobileMenuOpen(false);
111-
}}
112-
text={t(item.title)}
113-
/>
114-
))}
115-
<div className="border-t pt-4 flex flex-col gap-2">
116-
<LanguageSelector variant="button" />
117-
<Button
118-
variant="ghost"
119-
className="justify-start"
120-
leftIcon="IconSettings"
121-
onClick={() => {
122-
navigate("/settings");
123-
setMobileMenuOpen(false);
124-
}}
125-
text={t("nav.settings")}
126-
/>
127-
<Button
128-
variant="ghost"
129-
className="justify-start text-destructive"
130-
leftIcon="IconLogout"
131-
onClick={handleLogout}
132-
text={t("auth.logout")}
133-
/>
134-
</div>
102+
</div>
103+
<div className="flex flex-col gap-2">
104+
{navigationItems.map((item) => (
105+
<Button
106+
key={item.href}
107+
variant="ghost"
108+
className="justify-start"
109+
leftIcon={item.icon}
110+
onClick={() => {
111+
navigate(item.href);
112+
setMobileMenuOpen(false);
113+
}}
114+
text={t(item.title)}
115+
/>
116+
))}
117+
<div className="border-t pt-4 flex flex-col gap-2">
118+
<LanguageSelector variant="button" />
119+
<Button
120+
variant="ghost"
121+
className="justify-start"
122+
leftIcon="IconSettings"
123+
onClick={() => {
124+
navigate("/settings");
125+
setMobileMenuOpen(false);
126+
}}
127+
text={t("nav.settings")}
128+
/>
129+
<Button
130+
variant="ghost"
131+
className="justify-start text-destructive"
132+
leftIcon="IconLogout"
133+
onClick={handleLogout}
134+
text={t("auth.logout")}
135+
/>
135136
</div>
136137
</div>
137-
</SheetContent>
138-
</Sheet>
139-
</div>
140-
</>
141-
)}
142-
{!isAuthenticated && <LanguageSelector variant="button" />}
143-
<ThemeToggle />
144-
</div>
145-
</div>
138+
</div>
139+
</SheetContent>
140+
</Sheet>
141+
</div>
142+
</>
143+
)}
144+
{!isAuthenticated && <LanguageSelector variant="button" />}
145+
<ThemeToggle />
146+
</div>
147+
</nav>
146148
</header>
147149
);
148150
}

‎client/src/components/tasks/FilterableList.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,7 @@ export function FilterableList({
107107
</CreateListDialogStandalone>
108108
</div>
109109
</div>
110-
<div className="mt-4 flex flex-col gap-4 sm:gap-2">
110+
<div className="mt-4 flex flex-col gap-4 sm:gap-2 mx-auto">
111111
{isLoading ? (
112112
[...Array(3)].map((_, i) => (
113113
<div

‎client/src/components/tasks/TaskCard.tsx‎

Lines changed: 16 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -41,10 +41,10 @@ export const TaskCard = memo(function TaskCard({
4141
const { toggleFavorite, removeTask, editTask } = useTasks();
4242

4343
return (
44-
<Card className="group relative flex flex-col shadow-none border border-border bg-card hover:shadow-sm transition-all duration-200 overflow-hidden rounded-xl">
45-
<CardContent className="flex flex-col gap-4 w-full">
44+
<Card id={task.id} className="py-0 group relative flex flex-col shadow-none border border-border bg-card hover:shadow-sm transition-all duration-200 overflow-hidden rounded-xl">
45+
<CardContent className="flex flex-col gap-4 w-full p-4 sm:p-6">
4646
{/* Top Section: Actions (Left) and Status/Priority/Favorite (Right) */}
47-
<div className="flex justify-between items-center w-full">
47+
<div className="flex flex-wrap justify-between items-center sm:items-center w-full gap-2 sm:gap-0">
4848
{/* Actions Menu (Left) */}
4949
<ItemActionsMenu
5050
onShare={() => setShareDialogOpen(true)}
@@ -53,7 +53,7 @@ export const TaskCard = memo(function TaskCard({
5353
align="start"
5454
/>
5555

56-
<div className="flex items-center gap-1">
56+
<div className="flex flex-row flex-wrap justify-end items-center gap-1 sm:gap-1">
5757
{/* Status Filter */}
5858
<TaskStatusFilter
5959
variant="compact"
@@ -82,7 +82,7 @@ export const TaskCard = memo(function TaskCard({
8282
<Checkbox
8383
checked={task.favorite}
8484
onCheckedChange={() => toggleFavorite(task.id)}
85-
className="ml-2 cursor-pointer hover:scale-110 transition-transform duration-200"
85+
className="ml-2 sm:ml-2 cursor-pointer hover:scale-110 transition-transform duration-200"
8686
icon={
8787
<Icon
8888
as="IconStar"
@@ -103,33 +103,37 @@ export const TaskCard = memo(function TaskCard({
103103

104104
{/* Left Section: Title & Description */}
105105
<div className="flex-1 flex flex-col justify-center text-left">
106-
<h3 className="text-base font-semibold tracking-tight text-foreground group-hover:text-primary transition-colors">
106+
<h3 className="text-base sm:text-base md:text-lg font-semibold tracking-tight text-foreground group-hover:text-primary transition-colors break-words">
107107
{task.name}
108108
</h3>
109109

110110
{/* Dates */}
111-
<div className="flex flex-row gap-1.5 mt-1">
112-
<div className="flex items-center gap-1.5 text-xs text-muted-foreground">
111+
<div className="flex flex-col xs:flex-row gap-1.5 mt-1">
112+
<div className="flex items-center gap-1.5 text-xs sm:text-xs md:text-sm text-muted-foreground">
113113
<Icon
114114
as="IconCalendarPlus"
115115
size={14}
116116
className="text-muted-foreground shrink-0"
117117
/>
118-
<span>{formatDate(task.createdAt)}</span>
118+
<span className="truncate max-w-[120px] sm:max-w-none">
119+
{formatDate(task.createdAt)}
120+
</span>
119121
</div>
120122
{task.dueDate && (
121-
<div className="flex items-center gap-1.5 text-xs text-muted-foreground">
123+
<div className="flex items-center gap-1.5 text-xs sm:text-xs md:text-sm text-muted-foreground">
122124
<Icon
123125
as="IconCalendarEvent"
124126
size={14}
125127
className="text-muted-foreground shrink-0"
126128
/>
127-
<span>{task.dueDate ? formatDate(task.dueDate) : "-"}</span>
129+
<span className="truncate max-w-[120px] sm:max-w-none">
130+
{task.dueDate ? formatDate(task.dueDate) : "-"}
131+
</span>
128132
</div>
129133
)}
130134
</div>
131135
{task.description && (
132-
<p className="mt-1.5 text-sm text-muted-foreground line-clamp-2 leading-relaxed">
136+
<p className="mt-1.5 text-sm sm:text-sm md:text-base text-muted-foreground line-clamp-2 leading-relaxed break-words">
133137
{task.description}
134138
</p>
135139
)}

‎client/src/locales/en.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -112,8 +112,8 @@
112112
"darkThemeDescription": "Enable dark mode for a more comfortable visual experience in low-light environments.",
113113
"language": "Application language",
114114
"languageDescription": "Select the language you want to use the application in.",
115-
"sidebarWidth": "Sidebar width",
116-
"sidebarWidthDescription": "Adjust the width of the task list.",
115+
"sidebarWidth": "Layout density",
116+
"sidebarWidthDescription": "Adjust the interface density and element sizes.",
117117
"cardSize": "Card size",
118118
"cardSizeDescription": "Adjust the size of task cards.",
119119
"compact": "Compact",

‎client/src/locales/es.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -112,8 +112,8 @@
112112
"darkThemeDescription": "Activa el modo oscuro para una experiencia visual más cómoda en entornos con poca luz.",
113113
"language": "Idioma de la aplicación",
114114
"languageDescription": "Selecciona el idioma en el que deseas usar la aplicación.",
115-
"sidebarWidth": "Tamaño de la barra lateral",
116-
"sidebarWidthDescription": "Ajusta el ancho de la lista de tareas.",
115+
"sidebarWidth": "Densidad del diseño",
116+
"sidebarWidthDescription": "Ajusta la densidad de la interfaz y el tamaño de los elementos.",
117117
"cardSize": "Tamaño de las tarjetas",
118118
"cardSizeDescription": "Ajusta el tamaño de las tarjetas de tarea.",
119119
"compact": "Compacto",

‎client/src/pages/authenticated/dashboardPage.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,7 @@ export default function DashboardPage() {
9393
};
9494

9595
return (
96-
<div className="container mx-auto p-6">
96+
<div className="container mx-auto py-8">
9797
<div className="flex justify-between items-start mb-8">
9898
<div>
9999
<h1 className="text-4xl font-bold mb-2">

0 commit comments

Comments
 (0)