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:
- Original request thread: Message from ryan
Scope
Frontend (primary: worklist / task-check list rows)
attik-frontend/src/components/task-check/SingleJobsBar.tsx— left column usesfont-thinwithM/D/YY h:mm Afor inspectiondatetime; this backs Unconfirmed Orders, Agreements Not Signed, Jobs Not Published, Jobs Not Paid, and custom inspection worklists viaWorklistResolver.attik-frontend/src/components/task-check/SingleQuoteBar.tsx— leadingcreatedAtdate usestext-sm font-thin text-gray-500withM/D/YY(see thetitlerow around the quoted class names).attik-frontend/src/components/task-check/SingleEventBar.tsx— date line usestext-sm font-thin text-gray-500forM/D/YYwith time in a separate span (h:mma).attik-frontend/src/components/task-check/GroupedClientJobsBar.tsx— grouped job lines formatM/D/YY h:mm Ainside a span that already togglestext-dangerfor "far" jobs; weight is not explicitlyfont-thinthere 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— usesfont-thinforM/D/YY h:mm Ain 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.tsxalso usesfont-thinon 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-thinwithfont-mediumwithout addingfont-bold(accessibility/contrast withtext-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-checksurfaces 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)