TRCKR-311 - trckr

← TRCKR-311

enhancement web ui

Created: 2025-12-12 • Updated: 2025-12-16

Relationships Loading...

Change the delete button on work log entries from text (e.g., 'Delete' or 'x') to a trash can icon from Phosphor Icons for visual consistency.

## Current Behavior
Work log entries have a delete button that likely shows as text ('Delete') or a simple 'x' character.

## Desired Behavior
Replace the delete button with a Phosphor Icons trash can icon:
- Use `ph-trash` or `ph-trash-simple` icon
- Consistent with other icon usage in the app
- Smaller, cleaner visual footprint

## Implementation

1. **Template changes** (`server/templates/partials/issue_edit_modal.html` or work log partial):
   - Replace delete button content with Phosphor icon
   - Example: `<button class="btn-icon"><i class="ph ph-trash"></i></button>`

2. **Icon options from Phosphor**:
   - `ph-trash` - standard trash can
   - `ph-trash-simple` - minimal trash can
   - Consider using `ph-bold` weight for visibility

3. **Styling**:
   - Icon should be subtle (gray) by default
   - Red on hover to indicate destructive action
   - Appropriate size to match other UI elements

4. **Example HTML**:
   ```html
   <button type="button" 
           class="btn-delete" 
           onclick="deleteWorkLog('{{ log.id }}')"
           title="Delete work log entry">
     <i class="ph ph-trash"></i>
   </button>
   ```

## Acceptance Criteria
- [ ] Delete button shows Phosphor trash icon
- [ ] Icon is appropriately sized
- [ ] Hover state indicates destructive action (red)
- [ ] Has tooltip/title for accessibility
- [ ] Consistent with other icons in the app

Pull Requests (comma-separated URLs)

Attachments

Comments (1)

agent · 2025-12-12

Implemented the Phosphor trash icon for work log delete buttons. ## Changes Made **File: server/templates/modals/issue_detail.html (line 120)** - Replaced text 'delete' with `<i class="ph ph-trash"></i>` icon - Increased font-size from 11px to 14px for better visibility - Added red hover state (`color: #da3633`) to indicate destructive action - Added smooth color transition (0.2s) for hover effect - Added `title="Delete work log entry"` attribute for accessibility ## Implementation Details The delete button now: - Shows a Phosphor trash icon instead of text - Displays in gray (#8b949e) by default - Turns red (#da3633) on hover to clearly indicate it's a destructive action - Includes a tooltip for screen readers and accessibility - Maintains all existing functionality (htmx delete endpoint, confirmation dialog) ## Testing Deployed to production at https://trckr.roboalch.com/ - Server deployment successful - Health check passed - Ready for visual verification in the browser The icon is consistent with other Phosphor icons used throughout the app (navigation, filters, status indicators).