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

Conversation 0 Commits 3 Files Changed 4

+211 -136

egullickson commented 2026-01-18 17:51:46 +00:00

Owner

Copy Link

Copy Source

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) ... 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 <[email protected]>

egullickson referenced this pull request 2026-01-18 17:52:04 +00:00

fix: Standardize card/list action buttons and hover states across all objects #51

egullickson added 1 commit 2026-01-18 18:10:13 +00:00

fix: add Edit (pencil) icon to Documents page (refs #51) ... 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 <[email protected]>

egullickson referenced this pull request 2026-01-18 18:16:42 +00:00

fix: Standardize card/list action buttons and hover states across all objects #51

egullickson added 1 commit 2026-01-18 18:21:49 +00:00

fix: remove colored hover fills from icon buttons (refs #51) ... 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 <[email protected]>

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

egullickson referenced this issue from a commit 2026-01-18 18:42:54 +00:00

Merge pull request 'fix: Standardize card/list action buttons and hover states (#51)' (#52) from issue-51-standardize-action-buttons into main

Sign in to join this conversation.

Reviewers

No Reviewers

Labels

Clear labels

status

backlog

status/blocked

status

done

status

in-progress

status

ready

status

review

type

bug

type

chore

type

docs

type

feature

No labels

Milestone

No items

No Milestone

Projects

Clear projects

No projects

Assignees

Clear assignees

egullickson

No Assignees

1 Participants

Notifications

Subscribe

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: egullickson/motovaultpro#52