Bold dates in the list view

Objective

  • Improve legibility of dates in compact list rows (especially digits like 6, 8, and 9 in month/day/year-style strings) so users can scan schedules faster with less eye strain.
  • Apply a simple typographic change—bolder or heavier weight for the date portion (or the full date-time string)—while keeping layout and density of existing worklist-style lists.

Background

  • Several task-check / worklist row components render the leading date column with text-sm font-thin text-gray-500, which makes slim numerals easy to misread at a glance on smaller screens.
  • User feedback (Slack thread below) asks specifically to bold the dates for this reason; the attached photo illustrates the current list presentation context.

Example from the request:

Scope

Frontend (primary: worklist / task-check list rows)

  • attik-frontend/src/components/task-check/SingleJobsBar.tsx — left column uses font-thin with M/D/YY h:mm A for inspection datetime; this backs Unconfirmed Orders, Agreements Not Signed, Jobs Not Published, Jobs Not Paid, and custom inspection worklists via WorklistResolver.
  • attik-frontend/src/components/task-check/SingleQuoteBar.tsx — leading createdAt date uses text-sm font-thin text-gray-500 with M/D/YY (see the title row around the quoted class names).
  • attik-frontend/src/components/task-check/SingleEventBar.tsx — date line uses text-sm font-thin text-gray-500 for M/D/YY with time in a separate span (h:mma).
  • attik-frontend/src/components/task-check/GroupedClientJobsBar.tsx — grouped job lines format M/D/YY h:mm A inside a span that already toggles text-danger for "far" jobs; weight is not explicitly font-thin there but may need visual consistency if product wants one rule for all list dates (decision needed).
  • attik-frontend/src/components/task-check/_Subjoblist/JobRow.tsx — uses font-thin for M/D/YY h:mm A in a sub-list context; include if "list view" is defined broadly as all compact job rows, not only top-level worklists (decision needed).

Frontend (optional consistency)

  • attik-frontend/src/app/tools/inspections/repair-lists/components/SingleRepairListBar.tsx also uses font-thin on a date column; include only if product wants cross-surface consistency beyond the Worklists project (decision needed).

Product / architecture decisions (for the implementer)

  • Decision needed: Bold only the date tokens (e.g. split format into date vs. time spans) vs. semibold entire column vs. replace font-thin with font-medium without adding font-bold (accessibility/contrast with text-gray-500).
  • Decision needed: Whether time (h:mm A) should match the date weight or stay lighter for hierarchy.
  • Decision needed: Confirm scope: worklist task-check surfaces only vs. any other inspection list that reuses the same visual pattern.

References

  • Message from ryan (Slack)
  • Inspection row chrome: attik-frontend/src/components/task-check/SingleJobsBar.tsx
  • Quote row chrome: attik-frontend/src/components/task-check/SingleQuoteBar.tsx
  • Event row chrome: attik-frontend/src/components/task-check/SingleEventBar.tsx
  • Work hub entry: attik-frontend/src/app/tools/work/[[...type]]/page.tsx (mounts the task-check lists that use these bars)

Please authenticate to join the conversation.

Upvoters
Status

Next Up

Board
🏠

Main App

Date

About 2 months ago

Author

Linear

Subscribe to post

Get notified by email when there are changes.