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

chore(dependencies): update Tailwind CSS and related configurations

Browse Source 
- Removed @tailwindcss/postcss from devDependencies and updated tailwindcss to version 3.4.15 for improved styling.
- Added autoprefixer as a new dependency to enhance CSS compatibility.
- Updated postcss.config.js to reflect the new Tailwind CSS plugin structure.
- Created a new tailwind.config.js file to define Tailwind's configuration.
- Adjusted CSS imports in index.css to utilize Tailwind's utility classes.
- Refined focus styles across various components for better accessibility and visual consistency.
This commit is contained in:
chamiakJ
2025-07-01 09:23:10 +05:30
parent 41e563297a
commit 30bdaf1ed5
16 changed files with 1265 additions and 421 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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-hidden focus:ring-1 focus:ring-blue-500
focus:outline-none 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-xs cursor-pointer ${className}`}
className={`rounded-full object-cover shadow-sm 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-xs cursor-pointer ${className}`}
className={`rounded-full flex items-center justify-center text-white font-medium shadow-sm 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-xs border-2 cursor-pointer ${
className={`rounded-full flex items-center justify-center text-white font-medium shadow-sm border-2 cursor-pointer ${
isDarkMode
? 'bg-gray-600 border-gray-700'
: 'bg-gray-400 border-white'

2
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-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 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-2 ${disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}`;
const variantClasses = {
text: isDarkMode

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

@@ -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-hidden focus:ring-1 focus:ring-blue-500
focus:outline-none focus:ring-1 focus:ring-blue-500
`}
/>
</div>

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

@@ -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-hidden focus:ring-1 focus:ring-blue-500
focus:outline-none focus:ring-1 focus:ring-blue-500
`}
/>
</div>

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

@@ -394,7 +394,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-xs focus:outline-hidden focus:ring-2 focus:ring-blue-500 focus:ring-offset-1
hover:shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2
${isDarkMode ? 'focus:ring-offset-gray-900' : 'focus:ring-offset-white'}
`}
aria-expanded={isOpen}
@@ -414,7 +414,7 @@ const FilterDropdown: React.FC<{
{/* Dropdown Panel */}
{isOpen && (
<div className={`absolute top-full left-0 z-50 mt-1 w-64 ${themeClasses.dropdownBg} rounded-md shadow-lg border ${themeClasses.dropdownBorder}`}>
<div className={`absolute top-full left-0 z-50 mt-1 w-64 ${themeClasses.dropdownBg} rounded-md shadow-sm border ${themeClasses.dropdownBorder}`}>
{/* Search Input */}
{section.searchable && (
<div className={`p-2 border-b ${themeClasses.dividerBorder}`}>
@@ -546,7 +546,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} ${themeClasses.containerBg === 'bg-gray-800' ? 'focus:ring-offset-gray-900' : 'focus:ring-offset-white'
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-2 ${themeClasses.buttonBg} ${themeClasses.buttonBorder} ${themeClasses.buttonText} ${themeClasses.containerBg === 'bg-gray-800' ? 'focus:ring-offset-gray-900' : 'focus:ring-offset-white'
}`}
>
<SearchOutlined className="w-3.5 h-3.5" />
@@ -579,7 +579,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-hidden 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-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors duration-200"
>
Search
</button>
@@ -646,7 +646,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-xs focus:outline-hidden focus:ring-2 focus:ring-blue-500 focus:ring-offset-1
hover:shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2
${isDarkMode ? 'focus:ring-offset-gray-900' : 'focus:ring-offset-white'}
`}
aria-expanded={open}
@@ -666,7 +666,7 @@ const FieldsDropdown: React.FC<{ themeClasses: any; isDarkMode: boolean }> = ({
{/* Dropdown Panel - matching FilterDropdown style */}
{open && (
<div className={`absolute top-full left-0 z-50 mt-1 w-64 ${themeClasses.dropdownBg} rounded-md shadow-lg border ${themeClasses.dropdownBorder}`}>
<div className={`absolute top-full left-0 z-50 mt-1 w-64 ${themeClasses.dropdownBg} rounded-md shadow-sm border ${themeClasses.dropdownBorder}`}>
{/* Options List */}
<div className="max-h-48 overflow-y-auto">
{sortedFields.length === 0 ? (
@@ -1037,7 +1037,7 @@ const ImprovedTaskFilters: React.FC<ImprovedTaskFiltersProps> = ({
}, [dispatch, projectId, position, showArchived]);
return (
<div className={`${themeClasses.containerBg} border ${themeClasses.containerBorder} rounded-md p-3 shadow-xs ${className}`}>
<div className={`${themeClasses.containerBg} border ${themeClasses.containerBorder} rounded-md p-3 shadow-sm ${className}`}>
<div className="flex flex-wrap items-center gap-2">
{/* Left Section - Main Filters */}
<div className="flex flex-wrap items-center gap-2">

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

@@ -187,7 +187,7 @@ const TaskPhaseDropdown: React.FC<TaskPhaseDropdownProps> = ({
{/* No Phase Color Indicator */}
<div
className={`w-3 h-3 rounded-full shadow-xs border-2 ${
className={`w-3 h-3 rounded-full shadow-sm 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-xs border-2 ${
className={`w-3 h-3 rounded-full shadow-sm border-2 ${
isDarkMode ? 'border-gray-800/30' : 'border-white/20'
}`}
style={{ backgroundColor: getPhaseColor(phase) }}

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

@@ -193,7 +193,7 @@ const TaskPriorityDropdown: React.FC<TaskPriorityDropdownProps> = ({
{/* Priority Color Indicator */}
<div
className={`w-3 h-3 rounded-full shadow-xs border-2 ${
className={`w-3 h-3 rounded-full shadow-sm border-2 ${
isDarkMode ? 'border-gray-800/30' : 'border-white/20'
}`}
style={{ backgroundColor: getPriorityColor(priority) }}

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

@@ -185,7 +185,7 @@ const TaskStatusDropdown: React.FC<TaskStatusDropdownProps> = ({
>
{/* Status Color Indicator */}
<div
className={`w-3 h-3 rounded-full shadow-xs border-2 ${
className={`w-3 h-3 rounded-full shadow-sm border-2 ${
isDarkMode ? 'border-gray-800/30' : 'border-white/20'
}`}
style={{ backgroundColor: getStatusColor(status) }}