Admin/panel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Implement dark mode support across components and UI elements

Browse Source 
- Added dark mode styles to TaskStatusDropdown, TaskStatusDropdownDebug, and TaskStatusDropdownSimple components.
- Introduced ThemeProvider and useTheme hook for managing theme state.
- Updated Button, Card, Input, Loading, Navigation, PageContainer, PageHeader, ProjectCalendarWidget, ProjectMap, SearchBar, States, Tooltip, and other UI components to support dark mode.
- Created ThemeToggle component for switching between light and dark modes.
- Enhanced i18n translations for settings related to theme and language preferences.
- Configured Tailwind CSS to support dark mode with class-based toggling.
This commit is contained in:
RKWojs
2025-09-25 08:58:03 +02:00
parent 96333ecced
commit fd87b66b06
33 changed files with 582 additions and 259 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
src/components/ProjectTasksList.js
View File

@@ -278,10 +278,10 @@ export default function ProjectTasksList() {
return "high";
};
const TaskRow = ({ task, showTimeLeft = false, showMaxWait = true }) => (
<tr className="hover:bg-gray-50 border-b border-gray-200">
<tr className="hover:bg-gray-50 dark:hover:bg-gray-700 border-b border-gray-200 dark:border-gray-600">
<td className="px-4 py-3">
<div className="flex items-center gap-2">
<span className="font-medium text-gray-900">{task.task_name}</span>
<span className="font-medium text-gray-900 dark:text-gray-100">{task.task_name}</span>
<Badge variant={getPriorityVariant(task.priority)} size="sm">
{t(`tasks.${task.priority}`)}
</Badge>
@@ -291,25 +291,25 @@ export default function ProjectTasksList() {
{" "}
<Link
href={`/projects/${task.project_id}`}
className="text-blue-600 hover:text-blue-800 font-medium"
className="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 font-medium"
>
{task.project_name}
</Link>
</td>
<td className="px-4 py-3 text-sm text-gray-600">{task.city || "N/A"}</td>
<td className="px-4 py-3 text-sm text-gray-600">
<td className="px-4 py-3 text-sm text-gray-600 dark:text-gray-400">{task.city || "N/A"}</td>
<td className="px-4 py-3 text-sm text-gray-600 dark:text-gray-400">
{task.address || "N/A"}
</td>
<td className="px-4 py-3 text-sm text-gray-600">
<td className="px-4 py-3 text-sm text-gray-600 dark:text-gray-400">
{task.assigned_to_name ? (
<div>
<div className="font-medium">{task.assigned_to_name}</div>
<div className="font-medium text-gray-900 dark:text-gray-100">{task.assigned_to_name}</div>
{/* <div className="text-xs text-gray-500">
{task.assigned_to_email}
</div> */}
</div>
) : (
<span className="text-gray-400 italic">{t("projects.unassigned")}</span>
<span className="text-gray-400 dark:text-gray-500 italic">{t("projects.unassigned")}</span>
)}
</td>
{showTimeLeft && (
@@ -341,7 +341,7 @@ export default function ProjectTasksList() {
</div>
</td>
)}
<td className="px-4 py-3 text-sm text-gray-500">
<td className="px-4 py-3 text-sm text-gray-500 dark:text-gray-400">
{task.status === "completed" && task.date_completed ? (
<div>
<div>
@@ -386,7 +386,7 @@ export default function ProjectTasksList() {
)}
</td>
{showMaxWait && (
<td className="px-4 py-3 text-sm text-gray-500">
<td className="px-4 py-3 text-sm text-gray-500 dark:text-gray-400">
{task.max_wait_days} {t("tasks.days")}
</td>
)}
@@ -416,38 +416,38 @@ export default function ProjectTasksList() {
return (
<div className="overflow-x-auto">
<table className="w-full bg-white rounded-lg shadow-sm">
<thead className="bg-gray-50">
<table className="w-full bg-white dark:bg-gray-800 rounded-lg shadow-sm">
<thead className="bg-gray-50 dark:bg-gray-700">
<tr>
<th className="px-4 py-3 text-left text-sm font-medium text-gray-700">
<th className="px-4 py-3 text-left text-sm font-medium text-gray-700 dark:text-gray-300">
{t("tasks.taskName")}
</th>{" "}
<th className="px-4 py-3 text-left text-sm font-medium text-gray-700">
<th className="px-4 py-3 text-left text-sm font-medium text-gray-700 dark:text-gray-300">
{t("tasks.project")}
</th>
<th className="px-4 py-3 text-left text-sm font-medium text-gray-700">
<th className="px-4 py-3 text-left text-sm font-medium text-gray-700 dark:text-gray-300">
{t("projects.city")}
</th>
<th className="px-4 py-3 text-left text-sm font-medium text-gray-700">
<th className="px-4 py-3 text-left text-sm font-medium text-gray-700 dark:text-gray-300">
{t("projects.address")}
</th>
<th className="px-4 py-3 text-left text-sm font-medium text-gray-700">
<th className="px-4 py-3 text-left text-sm font-medium text-gray-700 dark:text-gray-300">
{t("tasks.assignedTo")}
</th>
{showTimeLeft && (
<th className="px-4 py-3 text-left text-sm font-medium text-gray-700">
<th className="px-4 py-3 text-left text-sm font-medium text-gray-700 dark:text-gray-300">
{t("tasks.daysLeft")}
</th>
)}
<th className="px-4 py-3 text-left text-sm font-medium text-gray-700">
<th className="px-4 py-3 text-left text-sm font-medium text-gray-700 dark:text-gray-300">
{t("tasks.dateCreated")}
</th>
{showMaxWait && (
<th className="px-4 py-3 text-left text-sm font-medium text-gray-700">
<th className="px-4 py-3 text-left text-sm font-medium text-gray-700 dark:text-gray-300">
{t("tasks.maxWait")}
</th>
)}{" "}
<th className="px-4 py-3 text-left text-sm font-medium text-gray-700">
<th className="px-4 py-3 text-left text-sm font-medium text-gray-700 dark:text-gray-300">
{t("tasks.actions")}
</th>
</tr>
@@ -459,7 +459,7 @@ export default function ProjectTasksList() {
<tr key={`group-${groupName}`}>
<td
colSpan={colSpan}
className="px-4 py-2 bg-gray-100 font-medium text-gray-800 text-sm"
className="px-4 py-2 bg-gray-100 dark:bg-gray-700 font-medium text-gray-800 dark:text-gray-200 text-sm"
>
{groupName} ({groupTasks.length} {t("tasks.tasks")})
</td>
@@ -478,7 +478,7 @@ export default function ProjectTasksList() {
</tbody>
</table>
{filteredTasks.length === 0 && (
<div className="text-center py-8 text-gray-500">
<div className="text-center py-8 text-gray-500 dark:text-gray-400">
<p>{t("tasks.noTasks")}</p>
</div>
)}