[LFXV2-241] feat: redesign meeting card badges and improve component architecture#34
[LFXV2-241] feat: redesign meeting card badges and improve component architecture#34
Conversation
- Replace PrimeNG badge components with custom HTML badges for exact design control - Implement meeting type badges with proper icons and colors matching Figma designs: * Board: red with user-check icon * Maintainers: blue with gear icon * Marketing: green with chart-line-up icon * Technical: purple with code icon * Legal: amber with scale-balanced icon - Add computed signal optimization for meeting type badges to reduce HTML repetition - Simplify participants button label by removing "Yes/No/Maybe" response breakdown - Move container styling logic into meeting card component for better encapsulation - Add showBorder input to meeting card component (defaults to false) - Remove getMeetingTypeBorderClass method from meeting dashboard component - Ensure color consistency between meeting type badges and left border colors - Hide meeting type badge when type is "None" to clean up the UI - Conditionally apply padding based on showBorder flag for flexible usage Generated with [Claude Code](https://claude.ai/code) Signed-off-by: Asitha de Silva <asithade@gmail.com>
- Implement color-coded attendance progress bar based on percentage thresholds: * Under 25%: amber (bg-amber-500) for poor attendance * 25-69%: blue (bg-blue-500) for moderate attendance * 70%+: green (bg-green-500) for good attendance - Add computed signal attendanceBarColor() to calculate appropriate color - Update HTML template to use dynamic color class instead of hardcoded blue - Maintain smooth color transitions with existing transition classes - Provide immediate visual feedback for meeting engagement levels Generated with [Claude Code](https://claude.ai/code) Signed-off-by: Asitha de Silva <asithade@gmail.com>
WalkthroughDocumentation color updates from yellow to amber in two places. Major refactor of meeting-card template and logic: new badges, resource/participant summaries, dynamic styling via showBorder, and a revised edit flow handling recurring meetings. Meeting dashboard now passes showBorder to cards. Committee modal badge color updated. Changes
Sequence Diagram(s)sequenceDiagram
actor User
participant Card as MeetingCardComponent
participant Dialog as RecurringMeetingEditOptionsComponent
participant Form as MeetingForm
User->>Card: Click Edit
alt meeting has recurrence
Card->>Dialog: Open options (this instance / series / future)
Dialog-->>Card: Selected edit type
Card->>Form: Open MeetingForm with selected type
else no recurrence
Card->>Form: Open MeetingForm with type 'single'
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
✨ Finishing Touches
🧪 Generate unit tests
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
CodeRabbit Configuration File (
|
github-actions
bot
requested review from
andrest50,
audigregorie and
mauriciozanettisalomao
There was a problem hiding this comment.
Pull Request Overview
This PR redesigns the meeting card UI to match Figma specifications with custom badges, improved component architecture for better maintainability, and enhanced user experience through dynamic visual feedback.
- Replaces PrimeNG badges with custom HTML badges featuring proper icons and colors for meeting types
- Adds dynamic attendance progress bar with color-coded thresholds for visual feedback
- Implements self-contained meeting card component with
showBorderinput for flexible usage
Reviewed Changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| meeting-dashboard.component.html | Simplified template to use self-contained meeting cards with border styling |
| meeting-committee-modal.component.html | Updated yellow color references to amber for consistency |
| meeting-card.component.ts | Added computed signals for badges, attendance bar colors, and container styling logic |
| meeting-card.component.html | Complete template redesign with custom badges, three-column info cards, and dynamic styling |
| README.md | Updated color reference from yellow to amber in documentation example |
...lfx-pcc/src/app/modules/project/meetings/components/meeting-card/meeting-card.component.html
Show resolved
Hide resolved
✅ E2E Tests PassedBrowser: chromium All E2E tests passed successfully. Test Configuration
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
apps/lfx-pcc/src/app/modules/project/meetings/components/meeting-card/meeting-card.component.ts (1)
66-66: Add data-testid attribute for the showBorder input.According to the coding guidelines, new components should include data-testid attributes for reliable test targeting. The
showBorderinput affects the visual rendering significantly and should be testable.Consider adding a data-testid attribute to the container element that reflects the showBorder state, or document how this input should be tested.
apps/lfx-pcc/src/app/modules/project/meetings/components/meeting-card/meeting-card.component.html (1)
218-230: Verify file name truncation logic for edge cases.The filename truncation uses a hardcoded 15-character limit which may not account for different character widths or internationalization. Consider using CSS truncation with max-width instead for more reliable visual consistency.
- <span class="truncate max-w-[120px]">{{ - attachment.file_name.length > 15 ? attachment.file_name.substring(0, 15) + '...' : attachment.file_name - }}</span> + <span class="truncate max-w-[120px]" [title]="attachment.file_name"> + {{ attachment.file_name }} + </span>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
apps/lfx-pcc/README.md(1 hunks)apps/lfx-pcc/src/app/modules/project/meetings/components/meeting-card/meeting-card.component.html(1 hunks)apps/lfx-pcc/src/app/modules/project/meetings/components/meeting-card/meeting-card.component.ts(5 hunks)apps/lfx-pcc/src/app/modules/project/meetings/components/meeting-committee-modal/meeting-committee-modal.component.html(1 hunks)apps/lfx-pcc/src/app/modules/project/meetings/meeting-dashboard/meeting-dashboard.component.html(1 hunks)
🧰 Additional context used
📓 Path-based instructions (4)
apps/**/src/**/*.html
📄 CodeRabbit Inference Engine (CLAUDE.md)
apps/**/src/**/*.html: Always add data-testid attributes when creating new components for reliable test targeting
Use data-testid naming convention - '[section]-[component]-[element]' for hierarchical structure
Files:
apps/lfx-pcc/src/app/modules/project/meetings/components/meeting-committee-modal/meeting-committee-modal.component.htmlapps/lfx-pcc/src/app/modules/project/meetings/components/meeting-card/meeting-card.component.htmlapps/lfx-pcc/src/app/modules/project/meetings/meeting-dashboard/meeting-dashboard.component.html
{apps,packages}/**/*.{ts,tsx,js,jsx,css,scss}
📄 CodeRabbit Inference Engine (CLAUDE.md)
License headers are required on all source files
Files:
apps/lfx-pcc/src/app/modules/project/meetings/components/meeting-card/meeting-card.component.ts
**/*.{ts,tsx}
📄 CodeRabbit Inference Engine (CLAUDE.md)
Use TypeScript interfaces instead of union types for better maintainability
Files:
apps/lfx-pcc/src/app/modules/project/meetings/components/meeting-card/meeting-card.component.ts
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit Inference Engine (CLAUDE.md)
Do not nest ternary expressions
Files:
apps/lfx-pcc/src/app/modules/project/meetings/components/meeting-card/meeting-card.component.ts
🧬 Code Graph Analysis (1)
apps/lfx-pcc/src/app/modules/project/meetings/components/meeting-card/meeting-card.component.ts (1)
apps/lfx-pcc/src/app/modules/project/meetings/components/recurring-meeting-edit-options/recurring-meeting-edit-options.component.ts (1)
RecurringEditOption(12-15)
⏰ 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). (1)
- GitHub Check: Code Quality Checks
🔇 Additional comments (15)
apps/lfx-pcc/README.md (1)
99-99: Color consistency update aligns with design system.The change from
text-yellow-400totext-amber-400is consistent with the broader design system updates seen throughout this PR, where yellow colors are being replaced with amber variants for better visual consistency.apps/lfx-pcc/src/app/modules/project/meetings/components/meeting-committee-modal/meeting-committee-modal.component.html (1)
120-120: Color theme consistency maintained.The update from yellow to amber theme for the 'alternate' voting status badge maintains consistency with the design system changes throughout the PR and aligns with the amber color scheme used elsewhere.
apps/lfx-pcc/src/app/modules/project/meetings/meeting-dashboard/meeting-dashboard.component.html (1)
75-84: Component architecture improved with new showBorder API.The simplified structure removes the unnecessary wrapper div and leverages the meeting card's new
showBorderinput for cleaner component composition. The preserved event bindings and animation classes maintain existing functionality.apps/lfx-pcc/src/app/modules/project/meetings/components/meeting-card/meeting-card.component.ts (6)
78-84: Well-designed computed signals for dynamic UI behavior.The computed signals for attendance percentage, bar color, resource counts, and styling provide reactive updates based on meeting data. The separation of concerns is excellent, with each signal having a single responsibility.
143-171: Improved edit flow handles recurring meetings appropriately.The public
editMeeting()method now properly handles both recurring and single meetings with a clear user experience flow. The use of the RecurringMeetingEditOptionsComponent for recurring meetings provides users with edit scope options.
241-245: Simplified participant label improves UX clarity.The removal of the Yes/No/Maybe breakdown from the button label makes it cleaner while the detailed breakdown is still available in the expanded view. This follows good UX principles by reducing cognitive load on the primary action.
431-451: Attendance calculation and color logic is well-implemented.The attendance percentage calculation correctly handles edge cases (division by zero) and the color thresholds (amber <25%, blue 25-69%, green 70%+) provide clear visual feedback for meeting engagement levels.
468-490: Meeting type badge configuration matches requirements.The badge implementation correctly maps meeting types to their specified colors and icons as outlined in the PR objectives: Board (red/user-check), Maintainers (blue/gear), Marketing (green/chart-line-up), Technical (purple/code), Legal (amber/scale-balanced). The null return for falsy meeting types prevents rendering empty badges.
492-527: Container class logic provides consistent styling architecture.The dynamic container class computation correctly applies border styling only when
showBorderis true and matches border colors with meeting type badges for visual consistency. The fallback to gray for 'other'/'none' types is appropriate.apps/lfx-pcc/src/app/modules/project/meetings/components/meeting-card/meeting-card.component.html (6)
4-5: Dynamic container styling implementation is correct.The container uses the computed
containerClass()signal for dynamic styling and conditionally applies padding based on theshowBorderinput. This provides a clean separation between border/no-border layouts.
7-76: Well-structured header with improved badge system.The header implementation correctly shows privacy badges only for private meetings, conditionally renders meeting type badges (hiding "None" types), and includes recurring indicators. The action buttons with tooltips improve accessibility and UX.
108-178: Excellent three-column info card design.The redesigned info cards provide comprehensive meeting information at a glance:
- Attendees card with progress bar and response breakdown
- Resources card with file/link counts and aggregated totals
- Details card with duration, features, and timestamps
The responsive grid layout and consistent styling enhance the user experience significantly.
180-208: Feature badges with tooltips improve information discovery.The feature badges clearly indicate enabled meeting capabilities (Recording, YouTube Upload, Transcripts, AI Summary) with helpful tooltips. The color coding (blue, red, purple, green) provides visual differentiation while maintaining accessibility.
217-244: Resource section provides clear file and link access.The resources section effectively displays both attachments and important links with:
- Appropriate icons for different file types
- Truncated filenames for layout consistency
- Hover states for better interactivity
- External link handling with proper security attributes
280-350: Participants section redesign enhances usability.The tile-based participant display provides:
- Clear visual status indicators for responses and attendance
- Intuitive "Add Guests" tile with dashed border styling
- Responsive grid layout for different screen sizes
- Appropriate tooltips for status understanding
The differentiation between past and upcoming meeting views is well-implemented.
| <div class="w-full bg-gray-200 rounded-full h-1.5"> | ||
| <div class="h-1.5 rounded-full transition-all duration-300" [class]="attendanceBarColor()" [style.width.%]="attendancePercentage()"></div> | ||
| </div> |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Verify progress bar accessibility and color contrast.
The dynamic progress bar uses computed colors that should meet WCAG accessibility standards. The color combinations (amber, blue, green backgrounds) should be verified for sufficient contrast ratios.
🏁 Script executed:
#!/bin/bash
# Verify color contrast ratios for the progress bar colors
echo "Checking color contrast for progress bar colors used in meeting card"
echo "Colors to verify:"
echo "- bg-amber-500 (#f59e0b)"
echo "- bg-blue-500 (#3b82f6)"
echo "- bg-green-500 (#10b981)"
echo ""
echo "These should be verified against WCAG AA standards for color contrast"
echo "Recommendation: Use tools like WebAIM Contrast Checker to verify accessibility"Length of output: 693
Fix: Improve progress bar contrast for accessibility
The colored fill on the gray track (bg-gray-200) currently uses Tailwind’s 500-level shades, which fall below the 3:1 contrast ratio required for non-text UI components under WCAG 2.1 AA. Please update the fill colors or track background so that each progress-bar hue meets at least a 3:1 ratio:
• File:
apps/lfx-pcc/src/app/modules/project/meetings/components/meeting-card/meeting-card.component.html
Lines: 121–123
• Problem:
• bg-amber-500 (#f59e0b) on #e5e7eb → contrast ~1.3:1
• bg-blue-500 (#3b82f6) on #e5e7eb → contrast ~2.3:1
• bg-green-500 (#10b981) on #e5e7eb → contrast ~2.5:1
• Recommendation:
– Darken the fill: use 600- or 700-level classes (e.g. bg-amber-700, bg-blue-700, bg-green-700)
– Or lighten the track: switch to bg-gray-300/400 to boost the delta
– Re-test with a WCAG contrast checker (e.g. WebAIM) to confirm ≥3:1
Example diff:
- <div class="w-full bg-gray-200 rounded-full h-1.5">
- <div class="h-1.5 rounded-full transition-all duration-300"
- [class]="attendanceBarColor()"
- [style.width.%]="attendancePercentage()">
- </div>
- </div>
+ <div class="w-full bg-gray-300 rounded-full h-1.5">
+ <div class="h-1.5 rounded-full transition-all duration-300"
+ [class]="attendanceBarColorDarker()"
+ [style.width.%]="attendancePercentage()">
+ </div>
+ </div>Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In
apps/lfx-pcc/src/app/modules/project/meetings/components/meeting-card/meeting-card.component.html
around lines 121–123 the progress-bar fill colors (bg-*-500) don’t meet the 3:1
contrast requirement against the bg-gray-200 track; update the classes to
increase contrast by either switching the fill to darker 600/700 shades (e.g.
bg-amber-700, bg-blue-700, bg-green-700) or lightening the track to
bg-gray-300/400 (choose one approach consistently), then verify each resulting
color pair with a WCAG contrast checker to ensure ≥3:1 and adjust classes
accordingly.
dealako
left a comment
dealako
left a comment
There was a problem hiding this comment.
Such beautiful AI-generated code.
asithade
changed the title
asithade
changed the title
Summary
Jira Ticket: LFXV2-241
This PR redesigns the meeting card badges to match the exact Figma specifications and improves the component architecture for better maintainability and user experience.
Key Changes
🎨 Badge Redesign
📊 Dynamic Attendance Bar
🔧 Component Architecture Improvements
showBorderinput to meeting card component (defaults to false) for flexible usagegetMeetingTypeBorderClassmethod from meeting dashboard component🎯 UX Improvements
Technical Details
Files Modified
meeting-card.component.html- Updated template with custom badges and dynamic stylingmeeting-card.component.ts- Added computed signals and container logicmeeting-dashboard.component.html- Simplified to use self-contained meeting cardsmeeting-dashboard.component.ts- Removed border class methodNew Features
showBorderinput for flexible component usageattendanceBarColor()computed signal for dynamic progress bar colorsmeetingTypeBadge()computed signal for optimized badge renderingcontainerClass()computed signal for self-contained stylingTest Plan
showBorderflagScreenshots
The implementation now matches the provided Figma designs exactly, with proper icons, color-coded badges, and dynamic attendance indicators for enhanced user experience.
🤖 Generated with Claude Code