Detail: Edit-title pencil icon is invisible by default (opacity-0) — make it always visible #28

New issue

Closed

opened 2026-06-27 15:41:15 +02:00 by bullitt · 2 comments

bullitt commented

2026-06-27 15:41:15 +02:00

Owner

Problem

The pencil icon for editing a shipment title has opacity-0 group-hover:opacity-100 — it is completely invisible until hovering the card. On touch devices, there is no hover state, so the feature is completely inaccessible. Even on desktop, users who don't know to hover will never find the edit affordance.

Implementation

File: frontend/src/pages/ShipmentDetail.tsx — around line 381.

Change:

<button
  onClick={() => { setTitleDraft(shipment.title || ""); setEditingTitle(true) }}
  className="text-muted-foreground hover:text-foreground transition-colors opacity-0 group-hover:opacity-100"
  aria-label="Edit title"
  title="Edit title"
>
  <Pencil className="h-3.5 w-3.5" />
</button>

To:

<button
  onClick={() => { setTitleDraft(shipment.title || ""); setEditingTitle(true) }}
  className="text-muted-foreground hover:text-foreground transition-colors opacity-40 hover:opacity-100"
  aria-label="Edit title"
  title="Edit title"
>
  <Pencil className="h-3.5 w-3.5" />
</button>

opacity-40 keeps it visually subtle (clearly secondary) while making it permanently discoverable. Remove group-hover:opacity-100 from both the button and its parent (the CardHeader does not need to be a group for this).

Acceptance criteria

Pencil icon is always visible (opacity ~40%)
Becomes fully opaque on hover
Works and is tappable on mobile

Brand identity alignment

Editing the shipment name is a practical control for user-owned data. The affordance should be discoverable, quiet, and precise, matching the line-icon guidance in the brand brief.

Brand-compliant implementation notes

Keep the pencil icon neutral by default and only use Box Blue or foreground color on hover/focus.
Ensure the control has a visible focus ring and a minimum tappable target on mobile.
Do not use animation beyond the normal color/opacity transition.

Additional acceptance criteria

The edit affordance is always discoverable without making the header visually noisy.
The icon remains a secondary control, not a primary action.
Keyboard and touch users can reach and activate it reliably.

Migrated from GitHub issue #7: https://github.com/bullitt186/trackbox/issues/7
Original author: @bullitt186
Original created: 2026-06-27T13:23:02Z
Original labels: ux

## Problem The pencil icon for editing a shipment title has `opacity-0 group-hover:opacity-100` — it is completely invisible until hovering the card. On touch devices, there is no hover state, so the feature is completely inaccessible. Even on desktop, users who don't know to hover will never find the edit affordance. ## Implementation File: `frontend/src/pages/ShipmentDetail.tsx` — around line 381. Change: ```tsx <button onClick={() => { setTitleDraft(shipment.title || ""); setEditingTitle(true) }} className="text-muted-foreground hover:text-foreground transition-colors opacity-0 group-hover:opacity-100" aria-label="Edit title" title="Edit title" > <Pencil className="h-3.5 w-3.5" /> </button> ``` To: ```tsx <button onClick={() => { setTitleDraft(shipment.title || ""); setEditingTitle(true) }} className="text-muted-foreground hover:text-foreground transition-colors opacity-40 hover:opacity-100" aria-label="Edit title" title="Edit title" > <Pencil className="h-3.5 w-3.5" /> </button> ``` `opacity-40` keeps it visually subtle (clearly secondary) while making it permanently discoverable. Remove `group-hover:opacity-100` from both the button and its parent (the `CardHeader` does not need to be a `group` for this). ## Acceptance criteria - Pencil icon is always visible (opacity ~40%) - Becomes fully opaque on hover - Works and is tappable on mobile ## Brand identity alignment Editing the shipment name is a practical control for user-owned data. The affordance should be discoverable, quiet, and precise, matching the line-icon guidance in the brand brief. ## Brand-compliant implementation notes - Keep the pencil icon neutral by default and only use Box Blue or foreground color on hover/focus. - Ensure the control has a visible focus ring and a minimum tappable target on mobile. - Do not use animation beyond the normal color/opacity transition. ## Additional acceptance criteria - The edit affordance is always discoverable without making the header visually noisy. - The icon remains a secondary control, not a primary action. - Keyboard and touch users can reach and activate it reliably. --- Migrated from GitHub issue #7: https://github.com/bullitt186/trackbox/issues/7 Original author: @bullitt186 Original created: 2026-06-27T13:23:02Z Original labels: ux

bullitt added the

label

2026-06-27 15:41:15 +02:00

bullitt referenced this issue

2026-06-27 15:41:16 +02:00

Global: Apply collapsible pattern to Shipment Detail scrape/source sections #49

bullitt commented

2026-06-27 16:02:25 +02:00

Author

Owner

Implemented in commit bd6b0e7. Changed the pencil edit button from opacity-0 group-hover:opacity-100 to opacity-40 hover:opacity-100. The icon is always visible at 40% opacity, making it discoverable on both desktop and touch devices. It reaches full opacity on hover, matching the brand principle of subtle but always-present affordances.

Implemented in commit bd6b0e7. Changed the pencil edit button from `opacity-0 group-hover:opacity-100` to `opacity-40 hover:opacity-100`. The icon is always visible at 40% opacity, making it discoverable on both desktop and touch devices. It reaches full opacity on hover, matching the brand principle of subtle but always-present affordances.

bullitt closed this issue

2026-06-27 16:02:25 +02:00

bullitt commented

2026-06-27 16:09:05 +02:00

Author

Owner

Follow-up fix: Added explicit focus-visible:ring-2 focus-visible:ring-ring and focus:opacity-100 to the pencil button. Acceptance criteria required a visible focus ring — the plain <button> element does not get shadcn focus styles automatically, so it was added explicitly.

Follow-up fix: Added explicit `focus-visible:ring-2 focus-visible:ring-ring` and `focus:opacity-100` to the pencil button. Acceptance criteria required a visible focus ring — the plain `<button>` element does not get shadcn focus styles automatically, so it was added explicitly.

bullitt referenced this issue from a commit

2026-06-27 16:13:41 +02:00

UX: follow-up fixes from issue-by-issue review

bullitt referenced this issue from a commit

2026-06-28 16:10:38 +02:00

UX: follow-up fixes from issue-by-issue review