bo/worklenz
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore(dependencies): update Tailwind CSS and related packages for improved styling

Browse Source 
- Added @tailwindcss/postcss as a new dependency.
- Updated tailwindcss to version 4.1.11 for enhanced features and performance.
- Upgraded prettier-plugin-tailwindcss to version 0.6.13 for better formatting support.
- Adjusted postcss.config.js to use the new Tailwind CSS plugin structure.
- Removed the obsolete tailwind.config.js file as it is no longer needed.
This commit is contained in:
chamikaJ
2025-06-30 15:11:30 +05:30
parent 14c5c148b9
commit 61574c847f
45 changed files with 740 additions and 1288 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1812
worklenz-frontend/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

6
worklenz-frontend/package.json
View File

@@ -60,6 +60,7 @@
"worklenz": "file:"
},
"devDependencies": {
"@tailwindcss/postcss": "^4.1.11",
"@testing-library/jest-dom": "^6.6.3",
"@testing-library/react": "^16.3.0",
"@testing-library/user-event": "^14.6.1",
@@ -73,11 +74,10 @@
"@types/react-dom": "19.0.0",
"@types/react-window": "^1.8.8",
"@vitejs/plugin-react": "^4.3.4",
"autoprefixer": "^10.4.20",
"postcss": "^8.5.2",
"prettier-plugin-tailwindcss": "^0.6.8",
"prettier-plugin-tailwindcss": "^0.6.13",
"rollup": "^4.40.2",
"tailwindcss": "^3.4.17",
"tailwindcss": "^4.1.11",
"terser": "^5.39.0",
"typescript": "^5.7.3",
"vite": "^6.3.5",

3
worklenz-frontend/postcss.config.js
View File

@@ -1,6 +1,5 @@
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
'@tailwindcss/postcss': {},
},
};

4
worklenz-frontend/src/components/AssigneeSelector.tsx
View File

@@ -227,7 +227,7 @@ const AssigneeSelector: React.FC<AssigneeSelectorProps> = ({
<div
ref={dropdownRef}
className={`
fixed z-[9999] w-72 rounded-md shadow-lg border
fixed z-9999 w-72 rounded-md shadow-lg border
${isDarkMode
? 'bg-gray-800 border-gray-600'
: 'bg-white border-gray-200'
@@ -252,7 +252,7 @@ const AssigneeSelector: React.FC<AssigneeSelectorProps> = ({
? 'bg-gray-700 border-gray-600 text-gray-100 placeholder-gray-400 focus:border-blue-500'
: 'bg-white border-gray-300 text-gray-900 placeholder-gray-500 focus:border-blue-500'
}
focus:outline-none focus:ring-1 focus:ring-blue-500
focus:outline-hidden focus:ring-1 focus:ring-blue-500
`}
/>
</div>

4
worklenz-frontend/src/components/Avatar.tsx
View File

@@ -69,7 +69,7 @@ const Avatar: React.FC<AvatarProps> = ({
src={src}
alt={name}
onClick={handleClick}
className={`rounded-full object-cover shadow-sm cursor-pointer ${className}`}
className={`rounded-full object-cover shadow-xs cursor-pointer ${className}`}
style={avatarStyle}
/>
);
@@ -78,7 +78,7 @@ const Avatar: React.FC<AvatarProps> = ({
return (
<div
onClick={handleClick}
className={`rounded-full flex items-center justify-center text-white font-medium shadow-sm cursor-pointer ${className}`}
className={`rounded-full flex items-center justify-center text-white font-medium shadow-xs cursor-pointer ${className}`}
style={avatarStyle}
>
{name.charAt(0)?.toUpperCase() || '?'}

2
worklenz-frontend/src/components/AvatarGroup.tsx
View File

@@ -92,7 +92,7 @@ const AvatarGroup: React.FC<AvatarGroupProps> = ({
isDarkMode={isDarkMode}
>
<div
className={`rounded-full flex items-center justify-center text-white font-medium shadow-sm border-2 cursor-pointer ${
className={`rounded-full flex items-center justify-center text-white font-medium shadow-xs border-2 cursor-pointer ${
isDarkMode
? 'bg-gray-600 border-gray-700'
: 'bg-gray-400 border-white'

4
worklenz-frontend/src/components/Button.tsx
View File

@@ -24,7 +24,7 @@ const Button: React.FC<ButtonProps & React.ButtonHTMLAttributes<HTMLButtonElemen
type = 'button',
...props
}) => {
const baseClasses = `inline-flex items-center justify-center font-medium transition-colors duration-200 focus:outline-none focus:ring-2 ${isDarkMode ? 'focus:ring-blue-400' : 'focus:ring-blue-500'} focus:ring-offset-1 ${disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}`;
const baseClasses = `inline-flex items-center justify-center font-medium transition-colors duration-200 focus:outline-hidden focus:ring-2 ${isDarkMode ? 'focus:ring-blue-400' : 'focus:ring-blue-500'} focus:ring-offset-1 ${disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}`;
const variantClasses = {
text: isDarkMode
@@ -42,7 +42,7 @@ const Button: React.FC<ButtonProps & React.ButtonHTMLAttributes<HTMLButtonElemen
};
const sizeClasses = {
small: 'px-2 py-1 text-xs rounded',
small: 'px-2 py-1 text-xs rounded-sm',
default: 'px-3 py-2 text-sm rounded-md',
large: 'px-4 py-3 text-base rounded-lg'
};

2
worklenz-frontend/src/components/CustomColordLabel.tsx
View File

@@ -18,7 +18,7 @@ const CustomColordLabel: React.FC<CustomColordLabelProps> = ({
return (
<Tooltip title={label.name}>
<span
className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium text-white flex-shrink-0 max-w-[120px]"
className="inline-flex items-center px-2 py-0.5 rounded-sm text-xs font-medium text-white shrink-0 max-w-[120px]"
style={{ backgroundColor: label.color }}
>
<span className="truncate">{truncatedName}</span>

6
worklenz-frontend/src/components/LabelsSelector.tsx
View File

@@ -180,7 +180,7 @@ const LabelsSelector: React.FC<LabelsSelectorProps> = ({
<div
ref={dropdownRef}
className={`
fixed z-[9999] w-72 rounded-md shadow-lg border
fixed z-9999 w-72 rounded-md shadow-lg border
${isDarkMode
? 'bg-gray-800 border-gray-600'
: 'bg-white border-gray-200'
@@ -206,7 +206,7 @@ const LabelsSelector: React.FC<LabelsSelectorProps> = ({
? 'bg-gray-700 border-gray-600 text-gray-100 placeholder-gray-400 focus:border-blue-500'
: 'bg-white border-gray-300 text-gray-900 placeholder-gray-500 focus:border-blue-500'
}
focus:outline-none focus:ring-1 focus:ring-blue-500
focus:outline-hidden focus:ring-1 focus:ring-blue-500
`}
/>
</div>
@@ -230,7 +230,7 @@ const LabelsSelector: React.FC<LabelsSelectorProps> = ({
/>
<div
className="w-3 h-3 rounded-full flex-shrink-0"
className="w-3 h-3 rounded-full shrink-0"
style={{ backgroundColor: label.color_code }}
/>

2
worklenz-frontend/src/components/Tag.tsx
View File

@@ -24,7 +24,7 @@ const Tag: React.FC<TagProps> = ({
default: 'px-2 py-1 text-xs'
};
const baseClasses = `inline-flex items-center font-medium rounded ${sizeClasses[size]}`;
const baseClasses = `inline-flex items-center font-medium rounded-sm ${sizeClasses[size]}`;
if (variant === 'outlined') {
return (

2
worklenz-frontend/src/components/Tooltip.tsx
View File

@@ -25,7 +25,7 @@ const Tooltip: React.FC<TooltipProps> = ({
return (
<div className={`relative group ${className}`}>
{children}
<div className={`absolute ${placementClasses[placement]} px-2 py-1 text-xs text-white ${isDarkMode ? 'bg-gray-700' : 'bg-gray-900'} rounded shadow-lg opacity-0 group-hover:opacity-100 transition-opacity duration-200 z-50 pointer-events-none min-w-max`}>
<div className={`absolute ${placementClasses[placement]} px-2 py-1 text-xs text-white ${isDarkMode ? 'bg-gray-700' : 'bg-gray-900'} rounded-sm shadow-lg opacity-0 group-hover:opacity-100 transition-opacity duration-200 z-50 pointer-events-none min-w-max`}>
{title}
</div>
</div>

2
worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanCreateTaskCard.tsx
View File

@@ -128,7 +128,7 @@ const EnhancedKanbanCreateTaskCard: React.FC<EnhancedKanbanCreateTaskCardProps>
marginBottom: 8,
marginTop: 8,
}}
className={`outline-1 ${themeWiseColor('outline-[#edeae9]', 'outline-[#6a696a]', themeMode)} hover:outline`}
className={`outline-1 ${themeWiseColor('outline-[#edeae9]', 'outline-[#6a696a]', themeMode)} hover:outline-solid`}
>
<Input
ref={inputRef}

4
worklenz-frontend/src/components/schedule/grant-chart/grantt-chart.tsx
View File

@@ -114,7 +114,7 @@ const GranttChart = React.forwardRef(({ type, date }: { type: string; date: Date
style={{
background: themeWiseColor('#fff', '#141414', themeMode),
}}
className={`after:content relative z-10 after:absolute after:-right-1 after:top-0 after:-z-10 after:h-full after:w-1.5 after:bg-transparent after:bg-gradient-to-r after:from-[rgba(0,0,0,0.12)] after:to-transparent`}
className={`after:content relative z-10 after:absolute after:-right-1 after:top-0 after:-z-10 after:h-full after:w-1.5 after:bg-transparent after:bg-linear-to-r after:from-[rgba(0,0,0,0.12)] after:to-transparent`}
>
<GranttMembersTable
members={teamData}
@@ -266,7 +266,7 @@ const GranttChart = React.forwardRef(({ type, date }: { type: string; date: Date
>
<div
style={{ width: '100%', height: '100%' }}
className={`rounded-sm outline-1 hover:outline ${themeMode === 'dark' ? 'outline-white/10' : 'outline-black/10'}`}
className={`rounded-xs outline-1 hover:outline-solid ${themeMode === 'dark' ? 'outline-white/10' : 'outline-black/10'}`}
></div>
</div>
))

2
worklenz-frontend/src/components/task-list-common/priorityDropdown/priority-dropdown.tsx
View File

@@ -153,7 +153,7 @@ const PriorityDropdown = ({ task, teamId }: PriorityDropdownProps) => {
// Fallback rendering for raw priority values or when priority list is not loaded
return (
<div
className="px-2 py-1 text-xs rounded"
className="px-2 py-1 text-xs rounded-sm"
style={{
backgroundColor: getPriorityColor(task.priority) + ALPHA_CHANNEL,
borderRadius: 16,

2
worklenz-frontend/src/components/task-list-common/status-dropdown/status-dropdown.tsx
View File

@@ -128,7 +128,7 @@ const StatusDropdown = ({ task, teamId }: StatusDropdownProps) => {
// Fallback rendering for raw status values or when status list is not loaded
return (
<div
className="px-2 py-1 text-xs rounded"
className="px-2 py-1 text-xs rounded-sm"
style={{
backgroundColor: getStatusColor(task.status),
borderRadius: 16,

2
worklenz-frontend/src/components/task-list-common/task-row/task-row-name/task-row-name.tsx
View File

@@ -52,7 +52,7 @@ const TaskRowName = React.memo(
return (
<button
onClick={() => handleToggleExpansion(taskId)}
className="hover flex h-4 w-4 items-center justify-center rounded text-[12px] hover:border hover:border-[#5587f5] hover:bg-[#d0eefa54] transition duration-150"
className="hover flex h-4 w-4 items-center justify-center rounded-sm text-[12px] hover:border hover:border-[#5587f5] hover:bg-[#d0eefa54] transition duration-150"
>
{expandedTasks.includes(taskId) ? <DownOutlined /> : <RightOutlined />}
</button>

18
worklenz-frontend/src/components/task-management/asana-style-lazy-demo.tsx
View File

@@ -15,7 +15,7 @@ const HeavyAssigneeSelector = React.lazy(() =>
new Promise<{ default: React.ComponentType }>((resolve) =>
setTimeout(() => resolve({
default: () => (
<div className="p-4 border rounded bg-blue-50">
<div className="p-4 border rounded-sm bg-blue-50">
<Text strong>🚀 Heavy Assignee Selector Loaded!</Text>
<br />
<Text type="secondary">This component contains:</Text>
@@ -36,7 +36,7 @@ const HeavyDatePicker = React.lazy(() =>
new Promise<{ default: React.ComponentType }>((resolve) =>
setTimeout(() => resolve({
default: () => (
<div className="p-4 border rounded bg-green-50">
<div className="p-4 border rounded-sm bg-green-50">
<Text strong>📅 Heavy Date Picker Loaded!</Text>
<br />
<Text type="secondary">This component contains:</Text>
@@ -57,7 +57,7 @@ const HeavyPrioritySelector = React.lazy(() =>
new Promise<{ default: React.ComponentType }>((resolve) =>
setTimeout(() => resolve({
default: () => (
<div className="p-4 border rounded bg-orange-50">
<div className="p-4 border rounded-sm bg-orange-50">
<Text strong>🔥 Heavy Priority Selector Loaded!</Text>
<br />
<Text type="secondary">This component contains:</Text>
@@ -78,7 +78,7 @@ const HeavyLabelsSelector = React.lazy(() =>
new Promise<{ default: React.ComponentType }>((resolve) =>
setTimeout(() => resolve({
default: () => (
<div className="p-4 border rounded bg-purple-50">
<div className="p-4 border rounded-sm bg-purple-50">
<Text strong>🏷️ Heavy Labels Selector Loaded!</Text>
<br />
<Text type="secondary">This component contains:</Text>
@@ -163,7 +163,7 @@ const AsanaStyleLazyDemo: React.FC = () => {
<Card className="max-w-4xl mx-auto">
<Title level={3}>🎯 Asana-Style Lazy Loading Demo</Title>
<div className="mb-4 p-4 bg-gray-50 rounded">
<div className="mb-4 p-4 bg-gray-50 rounded-sm">
<Text strong>Performance Benefits:</Text>
<ul className="mt-2 text-sm">
<li>✅ <strong>Faster Initial Load:</strong> Only lightweight placeholders load initially</li>
@@ -220,25 +220,25 @@ const AsanaStyleLazyDemo: React.FC = () => {
<div className="space-y-4">
{showComponents.assignee && (
<Suspense fallback={<div className="p-4 border rounded bg-gray-100">Loading assignee selector...</div>}>
<Suspense fallback={<div className="p-4 border rounded-sm bg-gray-100">Loading assignee selector...</div>}>
<HeavyAssigneeSelector />
</Suspense>
)}
{showComponents.date && (
<Suspense fallback={<div className="p-4 border rounded bg-gray-100">Loading date picker...</div>}>
<Suspense fallback={<div className="p-4 border rounded-sm bg-gray-100">Loading date picker...</div>}>
<HeavyDatePicker />
</Suspense>
)}
{showComponents.priority && (
<Suspense fallback={<div className="p-4 border rounded bg-gray-100">Loading priority selector...</div>}>
<Suspense fallback={<div className="p-4 border rounded-sm bg-gray-100">Loading priority selector...</div>}>
<HeavyPrioritySelector />
</Suspense>
)}
{showComponents.labels && (
<Suspense fallback={<div className="p-4 border rounded bg-gray-100">Loading labels selector...</div>}>
<Suspense fallback={<div className="p-4 border rounded-sm bg-gray-100">Loading labels selector...</div>}>
<HeavyLabelsSelector />
</Suspense>
)}

4
worklenz-frontend/src/components/task-management/assignee-dropdown-content.tsx
View File

@@ -146,7 +146,7 @@ const AssigneeDropdownContent: React.FC<AssigneeDropdownContentProps> = ({
<div
ref={dropdownRef}
className={`
fixed z-[9999] w-72 rounded-md shadow-lg border
fixed z-9999 w-72 rounded-md shadow-lg border
${isDarkMode
? 'bg-gray-800 border-gray-600'
: 'bg-white border-gray-200'
@@ -171,7 +171,7 @@ const AssigneeDropdownContent: React.FC<AssigneeDropdownContentProps> = ({
? 'bg-gray-700 border-gray-600 text-gray-100 placeholder-gray-400 focus:border-blue-500'
: 'bg-white border-gray-300 text-gray-900 placeholder-gray-500 focus:border-blue-500'
}
focus:outline-none focus:ring-1 focus:ring-blue-500
focus:outline-hidden focus:ring-1 focus:ring-blue-500
`}
/>
</div>

14
worklenz-frontend/src/components/task-management/improved-task-filters.tsx
View File

@@ -367,7 +367,7 @@ const FilterDropdown: React.FC<{
? (isDarkMode ? 'bg-blue-600 text-white border-blue-500' : 'bg-blue-50 text-blue-800 border-blue-300 font-semibold')
: `${themeClasses.buttonBg} ${themeClasses.buttonBorder} ${themeClasses.buttonText}`
}
hover:shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1
hover:shadow-xs focus:outline-hidden focus:ring-2 focus:ring-blue-500 focus:ring-offset-1
${isDarkMode ? 'focus:ring-offset-gray-900' : 'focus:ring-offset-white'}
`}
aria-expanded={isOpen}
@@ -397,7 +397,7 @@ const FilterDropdown: React.FC<{
value={searchTerm}
onChange={e => setSearchTerm(e.target.value)}
placeholder={`Search ${section.label.toLowerCase()}...`}
className={`w-full pl-8 pr-2 py-1 rounded border focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors duration-150 ${
className={`w-full pl-8 pr-2 py-1 rounded border focus:outline-hidden focus:ring-2 focus:ring-blue-500 transition-colors duration-150 ${
isDarkMode
? 'bg-[#141414] text-[#d9d9d9] placeholder-gray-400 border-[#303030]'
: 'bg-white text-gray-900 placeholder-gray-400 border-gray-300'
@@ -520,7 +520,7 @@ const SearchFilter: React.FC<{
{!isExpanded ? (
<button
onClick={handleToggle}
className={`inline-flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-medium rounded-md border transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1 ${themeClasses.buttonBg} ${themeClasses.buttonBorder} ${themeClasses.buttonText} ${
className={`inline-flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-medium rounded-md border transition-all duration-200 focus:outline-hidden focus:ring-2 focus:ring-blue-500 focus:ring-offset-1 ${themeClasses.buttonBg} ${themeClasses.buttonBorder} ${themeClasses.buttonText} ${
themeClasses.containerBg === 'bg-gray-800' ? 'focus:ring-offset-gray-900' : 'focus:ring-offset-white'
}`}
>
@@ -537,7 +537,7 @@ const SearchFilter: React.FC<{
value={localValue}
onChange={(e) => setLocalValue(e.target.value)}
placeholder={placeholder}
className={`w-full pr-4 pl-8 py-1 rounded border focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors duration-150 ${
className={`w-full pr-4 pl-8 py-1 rounded border focus:outline-hidden focus:ring-2 focus:ring-blue-500 transition-colors duration-150 ${
isDarkMode
? 'bg-[#141414] text-[#d9d9d9] placeholder-gray-400 border-[#303030]'
: 'bg-white text-gray-900 placeholder-gray-400 border-gray-300'
@@ -555,7 +555,7 @@ const SearchFilter: React.FC<{
</div>
<button
type="submit"
className="px-2.5 py-1.5 text-xs font-medium text-white bg-blue-500 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1 transition-colors duration-200"
className="px-2.5 py-1.5 text-xs font-medium text-white bg-blue-500 rounded-md hover:bg-blue-600 focus:outline-hidden focus:ring-2 focus:ring-blue-500 focus:ring-offset-1 transition-colors duration-200"
>
Search
</button>
@@ -622,7 +622,7 @@ const FieldsDropdown: React.FC<{ themeClasses: any; isDarkMode: boolean }> = ({
? (isDarkMode ? 'bg-blue-600 text-white border-blue-500' : 'bg-blue-50 text-blue-800 border-blue-300 font-semibold')
: `${themeClasses.buttonBg} ${themeClasses.buttonBorder} ${themeClasses.buttonText}`
}
hover:shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1
hover:shadow-xs focus:outline-hidden focus:ring-2 focus:ring-blue-500 focus:ring-offset-1
${isDarkMode ? 'focus:ring-offset-gray-900' : 'focus:ring-offset-white'}
`}
aria-expanded={open}
@@ -977,7 +977,7 @@ const ImprovedTaskFilters: React.FC<ImprovedTaskFiltersProps> = ({
}, [dispatch, projectId, position, showArchived]);
return (
<div className={`${themeClasses.containerBg} border ${themeClasses.containerBorder} rounded-md p-3 shadow-sm ${className}`}>
<div className={`${themeClasses.containerBg} border ${themeClasses.containerBorder} rounded-md p-3 shadow-xs ${className}`}>
<div className="flex flex-wrap items-center gap-2">
{/* Left Section - Main Filters */}
<div className="flex flex-wrap items-center gap-2">

6
worklenz-frontend/src/components/task-management/task-phase-dropdown.tsx
View File

@@ -146,7 +146,7 @@ const TaskPhaseDropdown: React.FC<TaskPhaseDropdownProps> = ({
ref={dropdownRef}
className={`
fixed min-w-[160px] max-w-[220px]
rounded border backdrop-blur-sm z-[9999]
rounded border backdrop-blur-xs z-9999
${isDarkMode
? 'bg-gray-900/95 border-gray-600 shadow-2xl shadow-black/50'
: 'bg-white/95 border-gray-200 shadow-2xl shadow-gray-500/20'
@@ -187,7 +187,7 @@ const TaskPhaseDropdown: React.FC<TaskPhaseDropdownProps> = ({
{/* No Phase Color Indicator */}
<div
className={`w-3 h-3 rounded-full shadow-sm border-2 ${
className={`w-3 h-3 rounded-full shadow-xs border-2 ${
isDarkMode ? 'border-gray-800/30' : 'border-white/20'
}`}
style={{ backgroundColor: isDarkMode ? '#4b5563' : '#9ca3af' }}
@@ -234,7 +234,7 @@ const TaskPhaseDropdown: React.FC<TaskPhaseDropdownProps> = ({
>
{/* Phase Color Indicator */}
<div
className={`w-3 h-3 rounded-full shadow-sm border-2 ${
className={`w-3 h-3 rounded-full shadow-xs border-2 ${
isDarkMode ? 'border-gray-800/30' : 'border-white/20'
}`}
style={{ backgroundColor: getPhaseColor(phase) }}

4
worklenz-frontend/src/components/task-management/task-priority-dropdown.tsx
View File

@@ -147,7 +147,7 @@ const TaskPriorityDropdown: React.FC<TaskPriorityDropdownProps> = ({
ref={dropdownRef}
className={`
fixed min-w-[160px] max-w-[220px]
rounded border backdrop-blur-sm z-[9999]
rounded border backdrop-blur-xs z-9999
${isDarkMode
? 'bg-gray-900/95 border-gray-600 shadow-2xl shadow-black/50'
: 'bg-white/95 border-gray-200 shadow-2xl shadow-gray-500/20'
@@ -193,7 +193,7 @@ const TaskPriorityDropdown: React.FC<TaskPriorityDropdownProps> = ({
{/* Priority Color Indicator */}
<div
className={`w-3 h-3 rounded-full shadow-sm border-2 ${
className={`w-3 h-3 rounded-full shadow-xs border-2 ${
isDarkMode ? 'border-gray-800/30' : 'border-white/20'
}`}
style={{ backgroundColor: getPriorityColor(priority) }}

12
worklenz-frontend/src/components/task-management/task-row.tsx
View File

@@ -200,7 +200,7 @@ const AssigneePlaceholder = React.memo<{ isDarkMode: boolean; memberCount?: numb
) : (
<div className={`w-6 h-6 rounded-full ${isDarkMode ? 'bg-gray-600' : 'bg-gray-200'}`} />
)}
<div className={`w-4 h-4 rounded ${isDarkMode ? 'bg-gray-600' : 'bg-gray-200'}`} />
<div className={`w-4 h-4 rounded-sm ${isDarkMode ? 'bg-gray-600' : 'bg-gray-200'}`} />
</div>
));
@@ -249,7 +249,7 @@ const LabelsPlaceholder = React.memo<{ labelCount?: number; isDarkMode: boolean
/>
))
) : (
<div className={`w-4 h-4 rounded ${isDarkMode ? 'bg-gray-600' : 'bg-gray-200'}`} />
<div className={`w-4 h-4 rounded-sm ${isDarkMode ? 'bg-gray-600' : 'bg-gray-200'}`} />
)}
</div>
));
@@ -257,7 +257,7 @@ const LabelsPlaceholder = React.memo<{ labelCount?: number; isDarkMode: boolean
// PERFORMANCE OPTIMIZATION: Simplified placeholders without animations under memory pressure
const SimplePlaceholder = React.memo<{ width: number; height: number; isDarkMode: boolean }>(({ width, height, isDarkMode }) => (
<div
className={`rounded ${isDarkMode ? 'bg-gray-600' : 'bg-gray-200'}`}
className={`rounded-sm ${isDarkMode ? 'bg-gray-600' : 'bg-gray-200'}`}
style={{ width, height }}
/>
));
@@ -614,7 +614,7 @@ const TaskRow: React.FC<TaskRowProps> = React.memo(({
? (isDarkMode ? 'bg-blue-900/20' : 'bg-blue-50')
: '';
const overlay = isDragOverlay
? `rounded shadow-lg border-2 ${isDarkMode ? 'border-gray-600 shadow-2xl' : 'border-gray-300 shadow-2xl'}`
? `rounded-sm shadow-lg border-2 ${isDarkMode ? 'border-gray-600 shadow-2xl' : 'border-gray-300 shadow-2xl'}`
: '';
return {
@@ -643,7 +643,7 @@ const TaskRow: React.FC<TaskRowProps> = React.memo(({
case 'drag':
return (
<div key={col.key} className={`flex items-center justify-center px-2 ${borderClasses}`} style={{ width: col.width }}>
<div className="w-4 h-4 opacity-30 bg-gray-300 rounded"></div>
<div className="w-4 h-4 opacity-30 bg-gray-300 rounded-sm"></div>
</div>
);
@@ -689,7 +689,7 @@ const TaskRow: React.FC<TaskRowProps> = React.memo(({
// For non-essential columns, show minimal placeholder
return (
<div key={col.key} className={`flex items-center px-2 ${borderClasses}`} style={{ width: col.width }}>
<div className={`w-6 h-3 rounded ${isDarkMode ? 'bg-gray-700' : 'bg-gray-200'}`}></div>
<div className={`w-6 h-3 rounded-sm ${isDarkMode ? 'bg-gray-700' : 'bg-gray-200'}`}></div>
</div>
);
}

4
worklenz-frontend/src/components/task-management/task-status-dropdown.tsx
View File

@@ -144,7 +144,7 @@ const TaskStatusDropdown: React.FC<TaskStatusDropdownProps> = ({
ref={dropdownRef}
className={`
fixed min-w-[160px] max-w-[220px]
rounded border backdrop-blur-sm z-[9999]
rounded border backdrop-blur-xs z-9999
${isDarkMode
? 'bg-gray-900/95 border-gray-600 shadow-2xl shadow-black/50'
: 'bg-white/95 border-gray-200 shadow-2xl shadow-gray-500/20'
@@ -185,7 +185,7 @@ const TaskStatusDropdown: React.FC<TaskStatusDropdownProps> = ({
>
{/* Status Color Indicator */}
<div
className={`w-3 h-3 rounded-full shadow-sm border-2 ${
className={`w-3 h-3 rounded-full shadow-xs border-2 ${
isDarkMode ? 'border-gray-800/30' : 'border-white/20'
}`}
style={{ backgroundColor: getStatusColor(status) }}

29
worklenz-frontend/src/index.css
View File

@@ -1,10 +1,27 @@
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
@import url("./styles/customOverrides.css");
@import url("./styles/task-management.css");
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap')
layer(base);
@import url('./styles/customOverrides.css') layer(base);
@import url('./styles/task-management.css') layer(base);
@tailwind base;
@tailwind components;
@tailwind utilities;
@import 'tailwindcss';
/*
The default border color has changed to `currentcolor` in Tailwind CSS v4,
so we've added these compatibility styles to make sure everything still
looks the same as it did with Tailwind CSS v3.
If we ever want to remove these styles, we need to add an explicit border
color utility to any element that depends on these defaults.
*/
@layer base {
*,
::after,
::before,
::backdrop,
::file-selector-button {
border-color: var(--color-gray-200, currentcolor);
}
}
.app-loading-container {
transition: none !important;

2
worklenz-frontend/src/pages/TaskManagementDemo.tsx
View File

@@ -20,7 +20,7 @@ const TaskManagementDemo: React.FC = () => {
return (
<Layout className="min-h-screen bg-gray-50">
<Header className="bg-white shadow-sm">
<Header className="bg-white shadow-xs">
<div className="max-w-7xl mx-auto px-4">
<Title level={2} className="mb-0 text-gray-800">
Enhanced Task Management System

2
worklenz-frontend/src/pages/projects/project-view-1/roadmap/project-view-roadmap.tsx
View File

@@ -21,7 +21,7 @@ const ProjectViewRoadmap = () => {
<Flex>
{/* table */}
<div className="after:content relative h-fit w-full max-w-[500px] after:absolute after:-right-3 after:top-0 after:z-10 after:min-h-full after:w-3 after:bg-gradient-to-r after:from-[rgba(0,0,0,0.12)] after:to-transparent">
<div className="after:content relative h-fit w-full max-w-[500px] after:absolute after:-right-3 after:top-0 after:z-10 after:min-h-full after:w-3 after:bg-linear-to-r after:from-[rgba(0,0,0,0.12)] after:to-transparent">
<RoadmapTable />
</div>

4
worklenz-frontend/src/pages/projects/project-view-1/roadmap/roadmap-table/roadmap-table.tsx
View File

@@ -109,9 +109,9 @@ const RoadmapTable = () => {
}));
// Layout styles for table and columns
const customHeaderColumnStyles = `border px-2 h-[50px] text-left z-10 after:content after:absolute after:top-0 after:-right-1 after:-z-10 after:h-[42px] after:w-1.5 after:bg-transparent after:bg-gradient-to-r after:from-[rgba(0,0,0,0.12)] after:to-transparent ${themeMode === 'dark' ? 'bg-[#1d1d1d] border-[#303030]' : 'bg-[#fafafa]'}`;
const customHeaderColumnStyles = `border px-2 h-[50px] text-left z-10 after:content after:absolute after:top-0 after:-right-1 after:-z-10 after:h-[42px] after:w-1.5 after:bg-transparent after:bg-linear-to-r after:from-[rgba(0,0,0,0.12)] after:to-transparent ${themeMode === 'dark' ? 'bg-[#1d1d1d] border-[#303030]' : 'bg-[#fafafa]'}`;
const customBodyColumnStyles = `border px-2 h-[50px] z-10 after:content after:absolute after:top-0 after:-right-1 after:-z-10 after:min-h-[40px] after:w-1.5 after:bg-transparent after:bg-gradient-to-r after:from-[rgba(0,0,0,0.12)] after:to-transparent ${themeMode === 'dark' ? 'bg-transparent border-[#303030]' : 'bg-transparent'}`;
const customBodyColumnStyles = `border px-2 h-[50px] z-10 after:content after:absolute after:top-0 after:-right-1 after:-z-10 after:min-h-[40px] after:w-1.5 after:bg-transparent after:bg-linear-to-r after:from-[rgba(0,0,0,0.12)] after:to-transparent ${themeMode === 'dark' ? 'bg-transparent border-[#303030]' : 'bg-transparent'}`;
const rowBackgroundStyles =
themeMode === 'dark' ? 'even:bg-[#1b1b1b] odd:bg-[#141414]' : 'even:bg-[#f4f4f4] odd:bg-white';

4
worklenz-frontend/src/pages/projects/project-view-1/roadmap/roadmap-table/roadmap-task-cell.tsx
View File

@@ -24,7 +24,7 @@ const RoadmapTaskCell = ({ task, isSubtask = false }: RoadmapTaskCellProps) => {
return (
<button
onClick={() => dispatch(toggleTaskExpansion(id))}
className="hover flex h-4 w-4 items-center justify-center rounded text-[12px] hover:border hover:border-[#5587f5] hover:bg-[#d0eefa54]"
className="hover flex h-4 w-4 items-center justify-center rounded-sm text-[12px] hover:border hover:border-[#5587f5] hover:bg-[#d0eefa54]"
>
{task.isExpanded ? <DownOutlined /> : <RightOutlined />}
</button>
@@ -36,7 +36,7 @@ const RoadmapTaskCell = ({ task, isSubtask = false }: RoadmapTaskCellProps) => {
return !isSubtask ? (
<button
onClick={() => dispatch(toggleTaskExpansion(id))}
className="hover flex h-4 w-4 items-center justify-center rounded text-[12px] hover:border hover:border-[#5587f5] hover:bg-[#d0eefa54]"
className="hover flex h-4 w-4 items-center justify-center rounded-sm text-[12px] hover:border hover:border-[#5587f5] hover:bg-[#d0eefa54]"
>
{task.isExpanded ? <DownOutlined /> : <RightOutlined />}
</button>

2
worklenz-frontend/src/pages/projects/project-view-1/task-list/table-v2.tsx
View File

@@ -323,7 +323,7 @@ const TaskListTable = ({
}}
>
{activeTask && (
<div className="bg-white dark:bg-gray-800 shadow-lg rounded border">
<div className="bg-white dark:bg-gray-800 shadow-lg rounded-sm border">
<DraggableRow
task={activeTask}
visibleColumns={visibleColumns}

2
worklenz-frontend/src/pages/projects/project-view-1/task-list/task-list-instant-task-input/task-list-instant-task-input.tsx
View File

@@ -131,7 +131,7 @@ const TaskListInstantTaskInput = ({
return (
<div
className={`border-t border-b-[1px] border-r-[1px]`}
className={`border-t border-b border-r`}
style={{ borderColor: token.colorBorderSecondary }}
>
{isEdit ? (

4
worklenz-frontend/src/pages/projects/project-view-1/task-list/task-list-table-old/task-list-table-old.tsx
View File

@@ -149,10 +149,10 @@ const TaskListTable = ({
const customBorderColor = themeMode === 'dark' && ' border-[#303030]';
const customHeaderColumnStyles = (key: string) =>
`border px-2 text-left ${key === 'selector' && 'sticky left-0 z-10'} ${key === 'task' && `sticky left-[33px] z-10 after:content after:absolute after:top-0 after:-right-1 after:-z-10 after:h-[42px] after:w-1.5 after:bg-transparent ${scrollingTables[tableId] ? 'after:bg-gradient-to-r after:from-[rgba(0,0,0,0.12)] after:to-transparent' : ''}`} ${themeMode === 'dark' ? 'bg-[#1d1d1d] border-[#303030]' : 'bg-[#fafafa]'}`;
`border px-2 text-left ${key === 'selector' && 'sticky left-0 z-10'} ${key === 'task' && `sticky left-[33px] z-10 after:content after:absolute after:top-0 after:-right-1 after:-z-10 after:h-[42px] after:w-1.5 after:bg-transparent ${scrollingTables[tableId] ? 'after:bg-linear-to-r after:from-[rgba(0,0,0,0.12)] after:to-transparent' : ''}`} ${themeMode === 'dark' ? 'bg-[#1d1d1d] border-[#303030]' : 'bg-[#fafafa]'}`;
const customBodyColumnStyles = (key: string) =>
`border px-2 ${key === 'selector' && 'sticky left-0 z-10'} ${key === 'task' && `sticky left-[33px] z-10 after:content after:absolute after:top-0 after:-right-1 after:-z-10 after:min-h-[40px] after:w-1.5 after:bg-transparent ${scrollingTables[tableId] ? 'after:bg-gradient-to-r after:from-[rgba(0,0,0,0.12)] after:to-transparent' : ''}`} ${themeMode === 'dark' ? 'bg-[#141414] border-[#303030]' : 'bg-white'}`;
`border px-2 ${key === 'selector' && 'sticky left-0 z-10'} ${key === 'task' && `sticky left-[33px] z-10 after:content after:absolute after:top-0 after:-right-1 after:-z-10 after:min-h-[40px] after:w-1.5 after:bg-transparent ${scrollingTables[tableId] ? 'after:bg-linear-to-r after:from-[rgba(0,0,0,0.12)] after:to-transparent' : ''}`} ${themeMode === 'dark' ? 'bg-[#141414] border-[#303030]' : 'bg-white'}`;
// function to render the column content based on column key
const renderColumnContent = (

2
worklenz-frontend/src/pages/projects/project-view-1/task-list/task-list-table-wrapper/task-list-table-wrapper.tsx
View File

@@ -185,7 +185,7 @@ const TaskListTableWrapper = ({
</Flex>
<Collapse
collapsible="header"
className="border-l-[4px]"
className="border-l-4"
bordered={false}
ghost={true}
expandIcon={() => null}

4
worklenz-frontend/src/pages/projects/project-view-1/taskList/statusTables/StatusGroupTables.tsx
View File

@@ -47,10 +47,10 @@ const StatusGroupTables = ({ group }: { group: ITaskListGroup }) => {
{/* bulk action container ==> used tailwind to recreate the animation */}
{createPortal(
<div
className={`absolute bottom-0 left-1/2 z-20 -translate-x-1/2 ${selectedTaskIdsList.length > 0 ? 'overflow-visible' : 'h-[1px] overflow-hidden'}`}
className={`absolute bottom-0 left-1/2 z-20 -translate-x-1/2 ${selectedTaskIdsList.length > 0 ? 'overflow-visible' : 'h-px overflow-hidden'}`}
>
<div
className={`${selectedTaskIdsList.length > 0 ? 'bottom-4' : 'bottom-0'} absolute left-1/2 z-[999] -translate-x-1/2 transition-all duration-300`}
className={`${selectedTaskIdsList.length > 0 ? 'bottom-4' : 'bottom-0'} absolute left-1/2 z-999 -translate-x-1/2 transition-all duration-300`}
>
<BulkTasksActionContainer
selectedTaskIds={selectedTaskIdsList}

4
worklenz-frontend/src/pages/projects/project-view-1/taskList/taskListTable/TaskListTable.tsx
View File

@@ -133,10 +133,10 @@ const TaskListTable = ({
const customBorderColor = themeMode === 'dark' && ' border-[#303030]';
const customHeaderColumnStyles = (key: string) =>
`border px-2 text-left ${key === 'selector' && 'sticky left-0 z-10'} ${key === 'task' && `sticky left-[33px] z-10 after:content after:absolute after:top-0 after:-right-1 after:-z-10 after:h-[42px] after:w-1.5 after:bg-transparent ${scrollingTables[tableId] ? 'after:bg-gradient-to-r after:from-[rgba(0,0,0,0.12)] after:to-transparent' : ''}`} ${themeMode === 'dark' ? 'bg-[#1d1d1d] border-[#303030]' : 'bg-[#fafafa]'}`;
`border px-2 text-left ${key === 'selector' && 'sticky left-0 z-10'} ${key === 'task' && `sticky left-[33px] z-10 after:content after:absolute after:top-0 after:-right-1 after:-z-10 after:h-[42px] after:w-1.5 after:bg-transparent ${scrollingTables[tableId] ? 'after:bg-linear-to-r after:from-[rgba(0,0,0,0.12)] after:to-transparent' : ''}`} ${themeMode === 'dark' ? 'bg-[#1d1d1d] border-[#303030]' : 'bg-[#fafafa]'}`;
const customBodyColumnStyles = (key: string) =>
`border px-2 ${key === 'selector' && 'sticky left-0 z-10'} ${key === 'task' && `sticky left-[33px] z-10 after:content after:absolute after:top-0 after:-right-1 after:-z-10 after:min-h-[40px] after:w-1.5 after:bg-transparent ${scrollingTables[tableId] ? 'after:bg-gradient-to-r after:from-[rgba(0,0,0,0.12)] after:to-transparent' : ''}`} ${themeMode === 'dark' ? 'bg-[#141414] border-[#303030]' : 'bg-white'}`;
`border px-2 ${key === 'selector' && 'sticky left-0 z-10'} ${key === 'task' && `sticky left-[33px] z-10 after:content after:absolute after:top-0 after:-right-1 after:-z-10 after:min-h-[40px] after:w-1.5 after:bg-transparent ${scrollingTables[tableId] ? 'after:bg-linear-to-r after:from-[rgba(0,0,0,0.12)] after:to-transparent' : ''}`} ${themeMode === 'dark' ? 'bg-[#141414] border-[#303030]' : 'bg-white'}`;
// function to render the column content based on column key
const renderColumnContent = (

2
worklenz-frontend/src/pages/projects/project-view-1/taskList/taskListTable/TaskListTableWrapper.tsx
View File

@@ -194,7 +194,7 @@ const TaskListTableWrapper = ({
</Flex>
<Collapse
collapsible="header"
className="border-l-[4px]"
className="border-l-4"
bordered={false}
ghost={true}
expandIcon={() => null}

4
worklenz-frontend/src/pages/projects/project-view-1/taskList/taskListTable/taskListTableCells/TaskCell.tsx
View File

@@ -39,7 +39,7 @@ const TaskCell = ({
return (
<button
onClick={() => toggleTaskExpansion(taskId)}
className="hover flex h-4 w-4 items-center justify-center rounded text-[12px] hover:border hover:border-[#5587f5] hover:bg-[#d0eefa54]"
className="hover flex h-4 w-4 items-center justify-center rounded-sm text-[12px] hover:border hover:border-[#5587f5] hover:bg-[#d0eefa54]"
>
{expandedTasks.includes(taskId) ? <DownOutlined /> : <RightOutlined />}
</button>
@@ -51,7 +51,7 @@ const TaskCell = ({
return !isSubTask ? (
<button
onClick={() => toggleTaskExpansion(taskId)}
className="hover flex h-4 w-4 items-center justify-center rounded text-[12px] hover:border hover:border-[#5587f5] hover:bg-[#d0eefa54]"
className="hover flex h-4 w-4 items-center justify-center rounded-sm text-[12px] hover:border hover:border-[#5587f5] hover:bg-[#d0eefa54]"
>
{expandedTasks.includes(taskId) ? <DownOutlined /> : <RightOutlined />}
</button>

2
worklenz-frontend/src/pages/projects/projectView/board/board-section/board-section-container.tsx
View File

@@ -99,7 +99,7 @@ const BoardSectionCardContainer = ({
<Flex
gap={16}
align="flex-start"
className="max-w-screen max-h-[620px] min-h-[620px] overflow-x-scroll p-[1px]"
className="max-w-screen max-h-[620px] min-h-[620px] overflow-x-scroll p-px"
>
<SortableContext
items={datasource?.map((section: any) => section.id)}

2
worklenz-frontend/src/pages/projects/projectView/board/board-section/board-sub-task-card/board-create-sub-task-card.tsx
View File

@@ -148,7 +148,7 @@ const BoardCreateSubtaskCard = ({
cursor: 'pointer',
overflow: 'hidden',
}}
className={`outline-1 ${themeWiseColor('outline-[#edeae9]', 'outline-[#6a696a]', themeMode)} hover:outline`}
className={`outline-1 ${themeWiseColor('outline-[#edeae9]', 'outline-[#6a696a]', themeMode)} hover:outline-solid`}
onBlur={handleCancelNewCard}
>
<Input

2
worklenz-frontend/src/pages/projects/projectView/board/board-section/board-task-card/board-view-create-task-card.tsx
View File

@@ -207,7 +207,7 @@ const BoardViewCreateTaskCard = ({
cursor: 'pointer',
overflow: 'hidden',
}}
className={`outline-1 ${themeWiseColor('outline-[#edeae9]', 'outline-[#6a696a]', themeMode)} hover:outline`}
className={`outline-1 ${themeWiseColor('outline-[#edeae9]', 'outline-[#6a696a]', themeMode)} hover:outline-solid`}
onBlur={handleCancelNewCard}
>
<Input

2
worklenz-frontend/src/pages/projects/projectView/board/board-section/board-task-card/board-view-task-card.tsx
View File

@@ -271,7 +271,7 @@ const BoardViewTaskCard = ({ task, sectionId }: IBoardViewTaskCardProps) => {
cursor: 'grab',
overflow: 'hidden',
}}
className={`group outline-1 ${themeWiseColor('outline-[#edeae9]', 'outline-[#6a696a]', themeMode)} hover:outline board-task-card`}
className={`group outline-1 ${themeWiseColor('outline-[#edeae9]', 'outline-[#6a696a]', themeMode)} hover:outline-solid board-task-card`}
data-id={task.id}
data-dragging={isDragging ? "true" : "false"}
>

2
worklenz-frontend/src/pages/projects/projectView/insights/insights-members/tables/tasks-by-members.tsx
View File

@@ -103,7 +103,7 @@ const TaskByMembersTable = () => {
return (
<div className="memberList-container min-h-0 max-w-full overflow-x-auto">
<table className="w-full min-w-max border-collapse rounded">
<table className="w-full min-w-max border-collapse rounded-sm">
<thead
style={{
height: 42,

6
worklenz-frontend/src/pages/projects/projectView/taskList/task-list-table/task-list-table-cells/task-list-task-cell/task-list-task-cell.tsx
View File

@@ -74,7 +74,7 @@ const TaskListTaskCell = ({
return (
<button
onClick={() => handleToggleExpansion(taskId)}
className="hover flex h-4 w-4 items-center justify-center rounded text-[12px] hover:border hover:border-[#5587f5] hover:bg-[#d0eefa54]"
className="hover flex h-4 w-4 items-center justify-center rounded-sm text-[12px] hover:border hover:border-[#5587f5] hover:bg-[#d0eefa54]"
>
{task.show_sub_tasks ? <DownOutlined /> : <RightOutlined />}
</button>
@@ -90,7 +90,7 @@ const TaskListTaskCell = ({
return (
<button
onClick={() => handleToggleExpansion(taskId)}
className="hover flex h-4 w-4 items-center justify-center rounded text-[12px] hover:border hover:border-[#5587f5] hover:bg-[#d0eefa54]"
className="hover flex h-4 w-4 items-center justify-center rounded-sm text-[12px] hover:border hover:border-[#5587f5] hover:bg-[#d0eefa54]"
>
{task.show_sub_tasks ? <DownOutlined /> : <RightOutlined />}
</button>
@@ -100,7 +100,7 @@ const TaskListTaskCell = ({
return !isSubTask ? (
<button
onClick={() => handleToggleExpansion(taskId)}
className="hover flex h-4 w-4 items-center justify-center rounded text-[12px] hover:border hover:border-[#5587f5] hover:bg-[#d0eefa54] open-task-button"
className="hover flex h-4 w-4 items-center justify-center rounded-sm text-[12px] hover:border hover:border-[#5587f5] hover:bg-[#d0eefa54] open-task-button"
>
{task.show_sub_tasks ? <DownOutlined /> : <RightOutlined />}
</button>

12
worklenz-frontend/src/pages/projects/projectView/taskList/task-list-table/task-list-table.tsx
View File

@@ -178,13 +178,13 @@ const CustomCell = React.memo(({
switch (column.key) {
case 'STATUS':
return (
<div className="px-2 py-1 text-xs rounded bg-gray-100 text-gray-600">
<div className="px-2 py-1 text-xs rounded-sm bg-gray-100 text-gray-600">
{task.status_name || task.status || 'To Do'}
</div>
);
case 'PRIORITY':
return (
<div className="px-2 py-1 text-xs rounded bg-gray-100 text-gray-600">
<div className="px-2 py-1 text-xs rounded-sm bg-gray-100 text-gray-600">
{task.priority_name || task.priority || 'Medium'}
</div>
);
@@ -213,13 +213,13 @@ const CustomCell = React.memo(({
switch (column.key) {
case 'STATUS':
return (
<div className="px-2 py-1 text-xs rounded bg-red-100 text-red-600">
<div className="px-2 py-1 text-xs rounded-sm bg-red-100 text-red-600">
{task.status_name || task.status || 'Error'}
</div>
);
case 'PRIORITY':
return (
<div className="px-2 py-1 text-xs rounded bg-red-100 text-red-600">
<div className="px-2 py-1 text-xs rounded-sm bg-red-100 text-red-600">
{task.priority_name || task.priority || 'Error'}
</div>
);
@@ -1483,7 +1483,7 @@ const TaskListTable: React.FC<TaskListTableProps> = ({ taskList, tableId, active
case 'TASK':
return `sticky left-[48px] z-10 after:content after:absolute after:top-0 after:-right-1 after:h-full after:-z-10 after:w-1.5 after:bg-transparent ${
scrollingTables[tableId]
? 'after:bg-gradient-to-r after:from-[rgba(0,0,0,0.12)] after:to-transparent'
? 'after:bg-linear-to-r after:from-[rgba(0,0,0,0.12)] after:to-transparent'
: ''
}`;
default:
@@ -1886,7 +1886,7 @@ const TaskListTable: React.FC<TaskListTableProps> = ({ taskList, tableId, active
dropAnimation={null} // Disable drop animation
>
{dragActiveId ? (
<div className="bg-white dark:bg-gray-800 shadow-lg rounded border p-2 opacity-90">
<div className="bg-white dark:bg-gray-800 shadow-lg rounded-sm border p-2 opacity-90">
<span className="text-sm font-medium">Moving task...</span>
</div>
) : null}

6
worklenz-frontend/src/pages/schedule/grant-chart.tsx
View File

@@ -409,7 +409,7 @@
// i >= startOffset &&
// i < startOffset + projectDuration
// ? 'empty-cell-hide'
// : `empty-cell rounded-sm outline-1 hover:outline ${themeMode === 'dark' ? 'outline-white/25' : 'outline-black/25'}`
// : `empty-cell rounded-xs outline-1 hover:outline-solid ${themeMode === 'dark' ? 'outline-white/25' : 'outline-black/25'}`
// }
// key={i}
// style={{
@@ -687,7 +687,7 @@ export default Grant;
// style={{
// background: themeWiseColor('#fff', '#141414', themeMode),
// }}
// className={`after:content relative z-10 after:absolute after:-right-1 after:top-0 after:-z-10 after:h-full after:w-1.5 after:bg-transparent after:bg-gradient-to-r after:from-[rgba(0,0,0,0.12)] after:to-transparent`}
// className={`after:content relative z-10 after:absolute after:-right-1 after:top-0 after:-z-10 after:h-full after:w-1.5 after:bg-transparent after:bg-linear-to-r after:from-[rgba(0,0,0,0.12)] after:to-transparent`}
// >
// <GranttMembersTable
// members={members}
@@ -874,7 +874,7 @@ export default Grant;
// i >= startOffset &&
// i < startOffset + projectDuration
// ? 'empty-cell-hide'
// : `empty-cell rounded-sm outline-1 hover:outline ${themeMode === 'dark' ? 'outline-white/10' : 'outline-black/10'}`
// : `empty-cell rounded-xs outline-1 hover:outline-solid ${themeMode === 'dark' ? 'outline-white/10' : 'outline-black/10'}`
// }
// key={i}
// style={{

8
worklenz-frontend/tailwind.config.js
View File

@@ -1,8 +0,0 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['./src/**/*.{js,jsx,ts,tsx}'],
theme: {
extend: {},
},
plugins: [],
};