[Web]-Refactor: Update styling for task filters and date range components #3964
Conversation
- Adjusted class names in TaskFilter and TaskStatusFilter components for improved layout and consistency. - Modified height properties for dropdowns and date picker to enhance visual alignment. - Ensured proper spacing and margins for better user experience across task filtering UI.
WalkthroughThis change refines the visual styling and layout of task filter UI components, including dropdowns and a date range picker, by adding and adjusting CSS classes for spacing, height, and theming. Additionally, the date picker component interface is extended to accept a new Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant TaskFilters
participant TaskStatusFilter
participant TaskDatePickerWithRange
User->>TaskFilters: Render Task Filters
TaskFilters->>TaskStatusFilter: Render Status & Property Dropdowns
TaskFilters->>TaskDatePickerWithRange: Render Date Range Picker (with contentClassName)
TaskDatePickerWithRange-->>TaskFilters: Rendered with custom classes
TaskStatusFilter-->>TaskFilters: Rendered with unified styling
TaskFilters-->>User: Display updated, consistently styled filters
Estimated code review effort🎯 2 (Simple) | ⏱️ ~7 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Note ⚡️ Unit Test Generation is now available in beta!Learn more here, or try it out under "Finishing Touches" below. ✨ Finishing Touches
🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
Please review these files and clean up the unused code. |
There was a problem hiding this comment.
Greptile Summary
This PR refactors the styling of task filter components on the profile page to improve visual consistency and alignment. The changes focus on two main files:
task-date-range.tsx: Adds a new optional contentClassName prop to the TaskDatePickerWithRange component interface, allowing external components to override the button styling. The default button height is also reduced from h-9 to h-8 to better align with other filter components.
task-filters.tsx: Implements comprehensive styling improvements including:
- Standardizing all filter dropdown components to use
h-7height for consistent visual alignment - Setting the filter container height to
h-9to accommodate the standardized dropdowns - Adding
mt-5top margin to the filter transition container for better spacing - Enhancing the TaskLabelsDropdown with improved dark theme support and rounded borders
- Using responsive margin classes (
lg:mb-0) for better cross-device compatibility
These changes address UI inconsistencies visible in the provided before/after screenshots, where filter dropdowns previously had misaligned heights and inconsistent spacing. The refactor creates a more polished and uniform filter interface while maintaining all existing functionality. The implementation leverages Tailwind CSS utility classes and follows the existing component architecture patterns used throughout the codebase.
Confidence score: 4/5
• This PR is safe to merge as it only contains CSS styling improvements without functional changes
• The score reflects that while the changes are low-risk, comprehensive UI testing across different screen sizes and themes would be beneficial
• The task-filters.tsx file needs attention to ensure all responsive breakpoints work correctly
2 files reviewed, no comments
There was a problem hiding this comment.
Actionable comments posted: 1
🔭 Outside diff range comments (1)
apps/web/core/components/pages/profile/task-filters.tsx (1)
1-1: Address the pipeline failure for unused code.The GitHub Actions pipeline detected unused code in this file. Please identify and remove any unused imports, variables, or code to resolve the CI check failure.
#!/bin/bash # Description: Identify unused imports and code in the task-filters.tsx file # Use rg to find all imports in the file echo "=== All imports in the file ===" rg "^import.*from" apps/web/core/components/pages/profile/task-filters.tsx # Check for unused imports by searching for usage of each imported item echo -e "\n=== Checking usage of imports ===" rg "import.*\{([^}]+)\}" apps/web/core/components/pages/profile/task-filters.tsx | while read -r line; do # Extract imported items items=$(echo "$line" | sed -n 's/.*{\([^}]*\)}.*/\1/p' | tr ',' '\n' | sed 's/^[[:space:]]*//' | sed 's/[[:space:]]*$//') echo "$items" | while read -r item; do if [ -n "$item" ]; then echo "Checking usage of: $item" if ! rg -q "\b$item\b" apps/web/core/components/pages/profile/task-filters.tsx --context=0 | grep -v "^import"; then echo " -> Potentially unused: $item" fi fi done done
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
apps/web/core/components/pages/profile/task-filters.tsx(3 hunks)apps/web/core/components/tasks/task-date-range.tsx(2 hunks)
🧰 Additional context used
🧠 Learnings (3)
📓 Common learnings
Learnt from: NdekoCode
PR: ever-co/ever-teams#3962
File: apps/web/core/hooks/tasks/use-task-statistics.ts:180-184
Timestamp: 2025-07-28T13:57:33.553Z
Learning: The progress bar color logic enhancement and task estimation handling improvements in PR #3962 were implemented only for the web part of the application, not the mobile part.
Learnt from: Innocent-Akim
PR: ever-co/ever-teams#3208
File: apps/web/app/[locale]/timesheet/components/FrequencySelect.tsx:67-79
Timestamp: 2024-10-30T16:25:19.910Z
Learning: The date range selection functionality for the date range options in the `FilterTaskActionMenu` component will be implemented in a future PR.
Learnt from: NdekoCode
PR: ever-co/ever-teams#3189
File: apps/web/components/ui/sidebar.tsx:77-87
Timestamp: 2024-10-25T15:15:35.107Z
Learning: In `apps/web/components/ui/sidebar.tsx`, keyboard shortcut accessibility has already been reviewed and approved by shadcn-ui; further suggestions in this area are unnecessary.
Learnt from: CREDO23
PR: ever-co/ever-teams#3353
File: apps/web/lib/features/task/task-input.tsx:812-815
Timestamp: 2024-11-20T19:56:12.313Z
Learning: In `apps/web/lib/features/task/task-input.tsx`, prefer using `useRef` over `useState` for `assignees` in the `AssigneesSelect` component to prevent re-renders on change.
Learnt from: CREDO23
PR: ever-co/ever-teams#3360
File: apps/web/components/pages/task/details-section/blocks/task-secondary-info.tsx:346-354
Timestamp: 2024-11-25T18:49:15.126Z
Learning: In `apps/web/components/pages/task/details-section/blocks/task-secondary-info.tsx`, within the `ProjectDropDown` component, both parent and child state should be synchronized for better UI updates, even in controlled mode. The `onChange` function carries the parent state, and `setSelected` maintains the selected state in the child component.
Learnt from: CREDO23
PR: ever-co/ever-teams#3626
File: apps/web/app/[locale]/projects/components/page-component.tsx:119-119
Timestamp: 2025-02-28T09:17:46.802Z
Learning: In the projects page component, filtering of projects based on the active team has been moved out of the useEffect hook that fetches organization projects, and is now handled in the pagination logic instead.
Learnt from: Innocent-Akim
PR: ever-co/ever-teams#3208
File: apps/web/app/[locale]/timesheet/components/TimesheetFilter.tsx:30-35
Timestamp: 2024-10-30T16:31:01.294Z
Learning: In the `TimesheetFilter` component, the `Add Time` button does not need to use the `AddManualTimeModal` component, as per the user's decision.
apps/web/core/components/tasks/task-date-range.tsx (6)
Learnt from: Innocent-Akim
PR: #3208
File: apps/web/app/[locale]/timesheet/components/FrequencySelect.tsx:67-79
Timestamp: 2024-10-30T16:25:19.910Z
Learning: The date range selection functionality for the date range options in the FilterTaskActionMenu component will be implemented in a future PR.
Learnt from: CREDO23
PR: #3360
File: apps/web/components/pages/task/details-section/blocks/task-secondary-info.tsx:346-354
Timestamp: 2024-11-25T18:49:15.126Z
Learning: In apps/web/components/pages/task/details-section/blocks/task-secondary-info.tsx, within the ProjectDropDown component, both parent and child state should be synchronized for better UI updates, even in controlled mode. The onChange function carries the parent state, and setSelected maintains the selected state in the child component.
Learnt from: CREDO23
PR: #3353
File: apps/web/lib/features/task/task-input.tsx:812-815
Timestamp: 2024-11-20T19:56:12.313Z
Learning: In apps/web/lib/features/task/task-input.tsx, prefer using useRef over useState for assignees in the AssigneesSelect component to prevent re-renders on change.
Learnt from: NdekoCode
PR: #3189
File: apps/web/components/ui/sidebar.tsx:77-87
Timestamp: 2024-10-25T15:15:45.111Z
Learning: In apps/web/components/ui/sidebar.tsx, modifications to the keyboard shortcut implementation within React.useEffect can cause build errors. The current implementation has been validated by shadcn-ui and should remain unchanged.
Learnt from: NdekoCode
PR: #3189
File: apps/web/components/ui/sidebar.tsx:77-87
Timestamp: 2024-10-25T15:15:35.107Z
Learning: In apps/web/components/ui/sidebar.tsx, keyboard shortcut accessibility has already been reviewed and approved by shadcn-ui; further suggestions in this area are unnecessary.
Learnt from: NdekoCode
PR: #3199
File: apps/web/components/nav-main.tsx:74-90
Timestamp: 2024-10-28T17:28:53.268Z
Learning: In apps/web/components/nav-main.tsx, prefer to keep className styles inline instead of extracting repeated logic into shared classes.
apps/web/core/components/pages/profile/task-filters.tsx (11)
Learnt from: CREDO23
PR: #3360
File: apps/web/components/pages/task/details-section/blocks/task-secondary-info.tsx:346-354
Timestamp: 2024-11-25T18:49:15.126Z
Learning: In apps/web/components/pages/task/details-section/blocks/task-secondary-info.tsx, within the ProjectDropDown component, both parent and child state should be synchronized for better UI updates, even in controlled mode. The onChange function carries the parent state, and setSelected maintains the selected state in the child component.
Learnt from: Innocent-Akim
PR: #3208
File: apps/web/app/[locale]/timesheet/components/FrequencySelect.tsx:67-79
Timestamp: 2024-10-30T16:25:19.910Z
Learning: The date range selection functionality for the date range options in the FilterTaskActionMenu component will be implemented in a future PR.
Learnt from: CREDO23
PR: #3353
File: apps/web/lib/features/task/task-input.tsx:812-815
Timestamp: 2024-11-20T19:56:12.313Z
Learning: In apps/web/lib/features/task/task-input.tsx, prefer using useRef over useState for assignees in the AssigneesSelect component to prevent re-renders on change.
Learnt from: CREDO23
PR: #3626
File: apps/web/app/[locale]/projects/components/page-component.tsx:119-119
Timestamp: 2025-02-28T09:17:46.802Z
Learning: In the projects page component, filtering of projects based on the active team has been moved out of the useEffect hook that fetches organization projects, and is now handled in the pagination logic instead.
Learnt from: NdekoCode
PR: #3189
File: apps/web/components/ui/sidebar.tsx:77-87
Timestamp: 2024-10-25T15:15:45.111Z
Learning: In apps/web/components/ui/sidebar.tsx, modifications to the keyboard shortcut implementation within React.useEffect can cause build errors. The current implementation has been validated by shadcn-ui and should remain unchanged.
Learnt from: NdekoCode
PR: #3234
File: apps/web/components/pages/team/tasks/TaskTable.tsx:9-13
Timestamp: 2024-11-06T17:10:06.239Z
Learning: In the TaskTable component (apps/web/components/pages/team/tasks/TaskTable.tsx), we do not need to add error handling for task fetching when using useTeamTasks().
Learnt from: NdekoCode
PR: #3328
File: apps/web/lib/features/team/user-team-card/user-team-card-activity.tsx:66-78
Timestamp: 2024-11-13T05:17:33.527Z
Learning: In the UserTeamActivity component (apps/web/lib/features/team/user-team-card/user-team-card-activity.tsx), the overflow-hidden class is intentionally applied only to the first Tab.Panel because the hidden overflow is needed when the sub-component has not yet been made visible. Applying overflow-hidden to the other Tab.Panel components is not required.
Learnt from: CREDO23
PR: #3353
File: apps/web/components/pages/kanban/menu-kanban-card.tsx:85-85
Timestamp: 2024-11-20T19:57:48.324Z
Learning: We are gradually migrating from 'taskName' to 'title' as we make changes to the remaining files.
Learnt from: Innocent-Akim
PR: #3208
File: apps/web/app/[locale]/timesheet/components/TimesheetFilter.tsx:30-35
Timestamp: 2024-10-30T16:31:01.294Z
Learning: In the TimesheetFilter component, the Add Time button does not need to use the AddManualTimeModal component, as per the user's decision.
Learnt from: NdekoCode
PR: #3199
File: apps/web/app/stores/team-tasks.ts:39-40
Timestamp: 2024-10-28T17:23:01.110Z
Learning: The favoriteTasksAtom in apps/web/app/stores/team-tasks.ts is important for future implementations and should not be removed, even if it appears unused currently.
Learnt from: NdekoCode
PR: #3199
File: apps/web/components/nav-main.tsx:74-90
Timestamp: 2024-10-28T17:28:53.268Z
Learning: In apps/web/components/nav-main.tsx, prefer to keep className styles inline instead of extracting repeated logic into shared classes.
🧬 Code Graph Analysis (1)
apps/web/core/components/pages/profile/task-filters.tsx (2)
apps/web/core/components/tasks/task-status.tsx (3)
TaskStatusDropdown(35-73)TaskPropertiesDropdown(292-329)TaskLabelsDropdown(406-457)apps/web/core/components/tasks/task-sizes-dropdown.tsx (1)
TaskSizesDropdown(12-50)
🪛 GitHub Actions: Knip Review - Cleanup Unused Code - WEB
apps/web/core/components/pages/profile/task-filters.tsx
[error] 1-1: Unused code detected in this file. Please remove unused code to pass the CI check.
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: Codacy Static Code Analysis
- GitHub Check: deploy
- GitHub Check: Analyze (javascript-typescript)
🔇 Additional comments (7)
apps/web/core/components/tasks/task-date-range.tsx (3)
19-19: LGTM! New prop enhances styling flexibility.The addition of the optional
contentClassNameprop provides consumers with the ability to customize button styling, which aligns well with the component's design pattern.
21-28: LGTM! Parameter destructuring updated correctly.The component's parameter destructuring has been properly updated to include the new
contentClassNameprop, maintaining consistency with the interface changes.
51-54: LGTM! Height adjustment and conditional styling applied correctly.The height change from
h-9toh-8and the conditional application ofcontentClassNameimprove visual consistency across the task filter components. Thecnutility properly handles the conditional class application.apps/web/core/components/pages/profile/task-filters.tsx (4)
65-65: LGTM! Consistent spacing added to filter panel.The addition of
mt-5to the Transition wrapper improves the visual spacing of the filter panel, enhancing the overall layout consistency.
222-222: LGTM! Consistent height and margin applied to dropdown container.The addition of
mb-2andh-9to the dropdown container provides consistent spacing and height for the filter elements.
226-226: LGTM! Uniform height and margin classes applied consistently.The consistent application of
h-7height and responsive margin classes (mt-4 mb-2 lg:mb-0 lg:mt-0) across all dropdown components (TaskStatusDropdown, TaskPropertiesDropdown, TaskSizesDropdown) creates a unified visual appearance.Also applies to: 234-234, 242-242
262-264: LGTM! Proper usage of new contentClassName prop.The TaskDatePickerWithRange component correctly utilizes the new
contentClassNameprop to maintain height consistency (h-7) with other filter components, demonstrating good coordination between the two files.
Update styling for task filters and date range components
How to Test This PR
yarn web:devhttp://localhost:3030/profile/[memberId]Screenshots (if needed)
Previous screenshots
Current screenshots
Related Issues
Please list related issues, tasks or discussions:
Example:
Type of Change
✅ Checklist
Please confirm you did the following before asking for review:
Summary by CodeRabbit
Style
New Features