fix: Standardize card/list action buttons and hover states (#51) #52

Merged
egullickson merged 3 commits from issue-51-standardize-action-buttons into main 2026-01-18 18:42:53 +00:00
Owner

Summary

Fixes #51

  • Documents page: Convert from text buttons to icon buttons (Eye for View Details, Trash for Delete), add card hover shadow effect, convert to MUI components for consistency
  • Fuel Logs: Add row hover background effect on list items
  • Maintenance Records: Add card hover shadow effect
  • Maintenance Schedules: Add card hover shadow effect

All changes follow the VehicleCard pattern with:

  • Light gray shadow/elevation on hover with 0.2s transition
  • Consistent icon button styling with mobile-responsive touch targets (48px on mobile)
  • Proper MUI component usage throughout

Test Plan

  • Verify Documents page shows icon buttons (eye, trash) instead of text buttons
  • Verify Documents cards have hover shadow effect
  • Verify Fuel Logs rows have hover background effect
  • Verify Maintenance Records cards have hover shadow effect
  • Verify Maintenance Schedules cards have hover shadow effect
  • Test on mobile viewport (320px, 768px)
  • Test on desktop viewport (1920px)

Out of Scope (per issue)

  • Gas Stations page (unique interaction model with Navigate/Premium 93/Favorite buttons)
  • Edit functionality for Documents (no edit API currently exists)

🤖 Generated with Claude Code

## Summary Fixes #51 - **Documents page**: Convert from text buttons to icon buttons (Eye for View Details, Trash for Delete), add card hover shadow effect, convert to MUI components for consistency - **Fuel Logs**: Add row hover background effect on list items - **Maintenance Records**: Add card hover shadow effect - **Maintenance Schedules**: Add card hover shadow effect All changes follow the VehicleCard pattern with: - Light gray shadow/elevation on hover with 0.2s transition - Consistent icon button styling with mobile-responsive touch targets (48px on mobile) - Proper MUI component usage throughout ## Test Plan - [ ] Verify Documents page shows icon buttons (eye, trash) instead of text buttons - [ ] Verify Documents cards have hover shadow effect - [ ] Verify Fuel Logs rows have hover background effect - [ ] Verify Maintenance Records cards have hover shadow effect - [ ] Verify Maintenance Schedules cards have hover shadow effect - [ ] Test on mobile viewport (320px, 768px) - [ ] Test on desktop viewport (1920px) ## Out of Scope (per issue) - Gas Stations page (unique interaction model with Navigate/Premium 93/Favorite buttons) - Edit functionality for Documents (no edit API currently exists) --- 🤖 Generated with [Claude Code](https://claude.com/claude-code)
egullickson added 1 commit 2026-01-18 17:51:47 +00:00
fix: standardize card/list action buttons and hover states (refs #51)
All checks were successful
Deploy to Staging / Build Images (pull_request) Successful in 2m47s
Deploy to Staging / Deploy to Staging (pull_request) Successful in 38s
Deploy to Staging / Verify Staging (pull_request) Successful in 7s
Deploy to Staging / Notify Staging Ready (pull_request) Successful in 6s
Deploy to Staging / Notify Staging Failure (pull_request) Has been skipped
5e045526d6
- Documents page: Convert from text buttons to icon buttons (Eye for
  View Details, Trash for Delete), add card hover shadow effect,
  convert to MUI components for consistency
- Fuel Logs: Add row hover background effect on list items
- Maintenance Records: Add card hover shadow effect
- Maintenance Schedules: Add card hover shadow effect

All changes follow the VehicleCard pattern with:
- Light gray shadow/elevation on hover with 0.2s transition
- Consistent icon button styling with mobile-responsive touch targets
- Proper MUI component usage throughout

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
egullickson added 1 commit 2026-01-18 18:10:13 +00:00
fix: add Edit (pencil) icon to Documents page (refs #51)
All checks were successful
Deploy to Staging / Build Images (pull_request) Successful in 2m50s
Deploy to Staging / Deploy to Staging (pull_request) Successful in 38s
Deploy to Staging / Verify Staging (pull_request) Successful in 7s
Deploy to Staging / Notify Staging Ready (pull_request) Successful in 7s
Deploy to Staging / Notify Staging Failure (pull_request) Has been skipped
5ad5ea12e6
Added missing Edit icon button between Eye and Trash icons.
Clicking Edit opens EditDocumentDialog to modify the document.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
egullickson added 1 commit 2026-01-18 18:21:49 +00:00
fix: remove colored hover fills from icon buttons (refs #51)
All checks were successful
Deploy to Staging / Build Images (pull_request) Successful in 2m53s
Deploy to Staging / Deploy to Staging (pull_request) Successful in 38s
Deploy to Staging / Verify Staging (pull_request) Successful in 6s
Deploy to Staging / Notify Staging Ready (pull_request) Successful in 6s
Deploy to Staging / Notify Staging Failure (pull_request) Has been skipped
48aea409d8
Changed icon button hover behavior to match VehicleCard pattern:
- Removed background color fills on hover (was primary.main/error.main)
- Icons now use default MUI IconButton gray ripple on hover
- Edit icons use text.secondary color (matches VehicleCard)
- Delete icons use error.main color (matches VehicleCard)

Affected files:
- DocumentsPage.tsx
- FuelLogsList.tsx
- MaintenanceRecordsList.tsx
- MaintenanceSchedulesList.tsx

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
egullickson merged commit f52ba6e7fb into main 2026-01-18 18:42:53 +00:00
egullickson deleted branch issue-51-standardize-action-buttons 2026-01-18 18:42:53 +00:00
Sign in to join this conversation.
No Reviewers
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: egullickson/motovaultpro#52