Skip to content

ACTIVITY_FEED_HOVER_STATES.md

Latest commit

 

History

History
122 lines (89 loc) · 4.37 KB

ACTIVITY_FEED_HOVER_STATES.md

File metadata and controls

122 lines (89 loc) · 4.37 KB
Raw

ActivityFeed Component - Hover States Enhancement

Overview

This document describes the enhanced hover states implemented for the ActivityFeed component to improve frontend UX/UI and ensure consistency with the global Drips Wave (Pluto) theme.

Changes Made

1. Enhanced Mobile Card Hover States

Before

className={`rounded-lg border p-3 outline-none
  transition-all duration-200 ease-in-out
  hover:border-l-2 hover:border-l-[var(--pluto-500)] hover:bg-[var(--pluto-50)] hover:shadow-sm
  active:scale-[0.985] active:bg-[#F5F5F5]
  focus-visible:ring-2 focus-visible:ring-[var(--pluto-500)] focus-visible:ring-offset-2
  ${i % 2 === 0 ? "border-[#E8E8E8] bg-white" : "border-[#ECECEC] bg-[#F9F9F9]"}`}

After

className={`rounded-lg border p-3 outline-none
  transition-all duration-200 ease-in-out
  hover:border-l-2 hover:border-l-[var(--pluto-500)] hover:bg-[var(--pluto-50)] hover:shadow-sm
  active:scale-[0.985] active:bg-[var(--pluto-100)]
  focus-visible:ring-2 focus-visible:ring-[var(--pluto-500)] focus-visible:ring-offset-2
  cursor-pointer
  ${i % 2 === 0 ? "border-[#E8E8E8] bg-white" : "border-[#ECECEC] bg-[#F9F9F9]"}`}

Improvements

  • Theme Integration: Changed active:bg-[#F5F5F5] to active:bg-[var(--pluto-100)] for consistent theme colors
  • Cursor Feedback: Added cursor-pointer for clear interactivity indication
  • Consistent Scaling: Maintained active:scale-[0.985] for tactile feedback

2. Enhanced Desktop Table Row Hover States

Before

className={`group cursor-default outline-none
  transition-all duration-200 ease-in-out
  hover:bg-[var(--pluto-50)] hover:shadow-sm hover:border-l-2 hover:border-l-[var(--pluto-500)]
  active:bg-[#F5F5F5] active:scale-[0.995]
  focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--pluto-500)]
  ${i % 2 === 0 ? "bg-white" : "bg-[#F9F9F9]"}`}

After

className={`group cursor-pointer outline-none
  transition-all duration-200 ease-in-out
  hover:bg-[var(--pluto-50)] hover:shadow-sm hover:border-l-2 hover:border-l-[var(--pluto-500)]
  active:bg-[var(--pluto-100)] active:scale-[0.985]
  focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--pluto-500)]
  ${i % 2 === 0 ? "bg-white" : "bg-[#F9F9F9]"}`}

Improvements

  • Theme Integration: Changed active:bg-[#F5F5F5] to active:bg-[var(--pluto-100)] for consistent theme colors
  • Cursor Feedback: Changed from cursor-default to cursor-pointer for proper interactivity indication
  • Consistent Scaling: Changed active:scale-[0.995] to active:scale-[0.985] to match mobile scaling

Theme Colors Used

Based on the global CSS variables defined in frontend/src/app/globals.css:

--pluto-50: #f0f6fb;   /* near-white ice */
--pluto-100: #dce9f4;  /* pale ice */
--pluto-500: #4a6fa5;  /* Pluto steel blue — primary brand */

Color Mapping

  • Hover Background: var(--pluto-50) - Pale ice blue tint for subtle highlighting
  • Active Background: var(--pluto-100) - Slightly darker ice blue for pressed state
  • Accent Border: var(--pluto-500) - Primary brand color for left border accent
  • Focus Ring: var(--pluto-500) - Primary brand color for keyboard navigation

Accessibility Features

  • Keyboard Navigation: focus-visible rings for tab navigation
  • Screen Reader Support: Proper role and aria-label attributes
  • Touch Feedback: Scale animations provide tactile feedback on mobile devices
  • Color Contrast: Theme colors maintain WCAG compliance

Cross-Platform Compatibility

  • Mobile: Optimized touch interactions with appropriate scaling
  • Desktop: Hover states with keyboard navigation support
  • Responsive: Consistent behavior across breakpoints

Testing

Comprehensive end-to-end tests have been added in frontend/tests/e2e/activity-feed-hover.spec.ts covering:

  • Hover state color application
  • Active state interactions
  • Focus-visible keyboard navigation
  • Cursor pointer feedback
  • Cross-platform consistency

Security Considerations

  • No user-generated content in hover states
  • CSS-only animations (no JavaScript execution)
  • Theme colors prevent potential CSS injection
  • Proper sanitization of dynamic content

Performance

  • CSS transitions use transform for GPU acceleration
  • Minimal DOM manipulation
  • Efficient selector usage
  • No external dependencies for hover effects