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

28
src/components/ui/ProjectMap.js
View File

@@ -7,8 +7,8 @@ import dynamic from "next/dynamic";
const DynamicMap = dynamic(() => import("./LeafletMap"), {
ssr: false,
loading: () => (
<div className="w-full h-64 bg-gray-100 animate-pulse rounded-lg flex items-center justify-center">
<span className="text-gray-500">Loading map...</span>
<div className="w-full h-64 bg-gray-100 dark:bg-gray-700 animate-pulse rounded-lg flex items-center justify-center">
<span className="text-gray-500 dark:text-gray-400">Loading map...</span>
</div>
),
});
@@ -52,15 +52,15 @@ export default function ProjectMap({
return (
<div className="space-y-2">
<div className="flex items-center justify-between">
<h3 className="text-sm font-medium text-gray-700">
<h3 className="text-sm font-medium text-gray-700 dark:text-gray-300">
Lokalizacja projektu
</h3>
<div className="text-xs text-gray-500">No coordinates available</div>
<div className="text-xs text-gray-500 dark:text-gray-400">No coordinates available</div>
</div>
<div
className={`w-full ${mapHeight} rounded-lg bg-gray-100 border border-gray-200 flex items-center justify-center`}
className={`w-full ${mapHeight} rounded-lg bg-gray-100 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 flex items-center justify-center`}
>
<div className="text-center text-gray-500">
<div className="text-center text-gray-500 dark:text-gray-400">
<svg
className="w-8 h-8 mx-auto mb-2"
fill="currentColor"
@@ -86,23 +86,23 @@ export default function ProjectMap({
<div className="space-y-2">
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
<h3 className="text-sm font-medium text-gray-700">
<h3 className="text-sm font-medium text-gray-700 dark:text-gray-300">
Lokalizacja projektu
</h3>
<div
className="w-3 h-3 rounded-full border border-white shadow-sm"
className="w-3 h-3 rounded-full border border-white dark:border-gray-800 shadow-sm"
style={{ backgroundColor: statusInfo.color }}
title={`Status: ${statusInfo.label}`}
></div>
</div>
{showLayerControl && (
<div className="text-xs text-gray-500">
<div className="text-xs text-gray-500 dark:text-gray-400">
{/* Use the layer control (📚) to switch map views */}
</div>
)}
</div>
<div
className={`w-full ${mapHeight} rounded-lg border border-gray-200`}
className={`w-full ${mapHeight} rounded-lg border border-gray-200 dark:border-gray-600`}
>
<DynamicMap
center={[coords.lat, coords.lng]}
@@ -113,8 +113,8 @@ export default function ProjectMap({
color: statusInfo.color,
popup: (
<div className="min-w-48">
<div className="mb-2 pb-2 border-b border-gray-200">
<h4 className="font-semibold text-gray-900 mb-1">
<div className="mb-2 pb-2 border-b border-gray-200 dark:border-gray-600">
<h4 className="font-semibold text-gray-900 dark:text-gray-100 mb-1">
{projectName || "Project Location"}
</h4>
<span
@@ -124,10 +124,10 @@ export default function ProjectMap({
{statusInfo.label}
</span>
</div>
<div className="text-sm text-gray-600">
<div className="text-sm text-gray-600 dark:text-gray-400">
<div className="flex items-center gap-2">
<svg
className="w-4 h-4 text-gray-400"
className="w-4 h-4 text-gray-400 dark:text-gray-500"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"