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

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) }}