aj/TaskTracker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): restyle subtask list and notes list with design tokens

Browse Source 
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
AJ Isaacs
2026-02-27 00:12:23 -05:00
parent ea688c0ab0
commit f4d983a02b
2 changed files with 18 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
TaskTracker.Web/src/components/NotesList.tsx
View File

@@ -9,10 +9,10 @@ interface NotesListProps {
notes: TaskNote[] notes: TaskNote[]
} }
const NOTE_TYPE_CONFIG: Record<string, { label: string; color: string }> = { const NOTE_TYPE_CONFIG: Record<string, { label: string; bg: string; text: string }> = {
[NoteType.PauseNote]: { label: 'Pause', color: '#f59e0b' }, [NoteType.PauseNote]: { label: 'Pause', bg: 'bg-amber-500/10', text: 'text-amber-400' },
[NoteType.ResumeNote]: { label: 'Resume', color: '#6366f1' }, [NoteType.ResumeNote]: { label: 'Resume', bg: 'bg-blue-500/10', text: 'text-blue-400' },
[NoteType.General]: { label: 'General', color: '#64748b' }, [NoteType.General]: { label: 'General', bg: 'bg-white/5', text: 'text-[var(--color-text-secondary)]' },
} }
function formatRelativeTime(dateStr: string): string { function formatRelativeTime(dateStr: string): string {
@@ -68,12 +68,12 @@ export default function NotesList({ taskId, notes }: NotesListProps) {
return ( return (
<div> <div>
<div className="flex items-center justify-between mb-3"> <div className="flex items-center justify-between mb-3">
<h3 className="text-xs font-semibold uppercase tracking-wider text-[#64748b]"> <h3 className="text-[11px] font-medium text-[var(--color-text-secondary)] uppercase tracking-wider">
Notes Notes
</h3> </h3>
<button <button
onClick={() => setShowInput(true)} onClick={() => setShowInput(true)}
className="p-1 rounded hover:bg-white/5 text-[#64748b] hover:text-white transition-colors" className="p-1 rounded hover:bg-white/5 text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] transition-colors"
> >
<Plus size={14} /> <Plus size={14} />
</button> </button>
@@ -86,25 +86,21 @@ export default function NotesList({ taskId, notes }: NotesListProps) {
<div key={note.id} className="text-sm"> <div key={note.id} className="text-sm">
<div className="flex items-center gap-2 mb-1"> <div className="flex items-center gap-2 mb-1">
<span <span
className="text-[10px] font-semibold uppercase px-1.5 py-0.5 rounded-full" className={`text-[10px] font-medium px-1.5 py-0.5 rounded ${typeConfig.bg} ${typeConfig.text}`}
style={{
backgroundColor: typeConfig.color + '20',
color: typeConfig.color,
}}
> >
{typeConfig.label} {typeConfig.label}
</span> </span>
<span className="text-[11px] text-[#64748b]"> <span className="text-[11px] text-[var(--color-text-tertiary)]">
{formatRelativeTime(note.createdAt)} {formatRelativeTime(note.createdAt)}
</span> </span>
</div> </div>
<p className="text-[#c4c9d4] leading-relaxed">{note.content}</p> <p className="text-[var(--color-text-primary)] leading-relaxed">{note.content}</p>
</div> </div>
) )
})} })}
{sortedNotes.length === 0 && !showInput && ( {sortedNotes.length === 0 && !showInput && (
<p className="text-sm text-[#64748b] italic">No notes yet</p> <p className="text-sm text-[var(--color-text-secondary)] italic">No notes yet</p>
)} )}
{showInput && ( {showInput && (
@@ -121,7 +117,7 @@ export default function NotesList({ taskId, notes }: NotesListProps) {
} }
}} }}
placeholder="Add a note..." placeholder="Add a note..."
className="w-full bg-[#0f1117] text-sm text-white px-3 py-2 rounded border border-transparent focus:border-indigo-500 outline-none placeholder-[#64748b]" className="w-full bg-[var(--color-page)] text-sm text-[var(--color-text-primary)] px-3 py-2 rounded border border-transparent focus:border-[var(--color-accent)] outline-none placeholder-[var(--color-text-secondary)]"
/> />
)} )}
</div> </div>

14
TaskTracker.Web/src/components/SubtaskList.tsx
View File

@@ -46,12 +46,12 @@ export default function SubtaskList({ taskId, subtasks }: SubtaskListProps) {
return ( return (
<div> <div>
<div className="flex items-center justify-between mb-3"> <div className="flex items-center justify-between mb-3">
<h3 className="text-xs font-semibold uppercase tracking-wider text-[#64748b]"> <h3 className="text-[11px] font-medium text-[var(--color-text-secondary)] uppercase tracking-wider">
Subtasks Subtasks
</h3> </h3>
<button <button
onClick={() => setShowInput(true)} onClick={() => setShowInput(true)}
className="p-1 rounded hover:bg-white/5 text-[#64748b] hover:text-white transition-colors" className="p-1 rounded hover:bg-white/5 text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] transition-colors"
> >
<Plus size={14} /> <Plus size={14} />
</button> </button>
@@ -67,13 +67,13 @@ export default function SubtaskList({ taskId, subtasks }: SubtaskListProps) {
onClick={() => handleToggle(subtask)} onClick={() => handleToggle(subtask)}
> >
{isCompleted ? ( {isCompleted ? (
<CheckSquare size={16} className="text-emerald-400 flex-shrink-0" /> <CheckSquare size={16} className="text-[var(--color-status-completed)] flex-shrink-0" />
) : ( ) : (
<Square size={16} className="text-[#64748b] group-hover:text-white flex-shrink-0" /> <Square size={16} className="text-[var(--color-text-secondary)] group-hover:text-[var(--color-text-primary)] flex-shrink-0" />
)} )}
<span <span
className={`text-sm ${ className={`text-sm ${
isCompleted ? 'line-through text-[#64748b]' : 'text-white' isCompleted ? 'line-through text-[var(--color-text-secondary)]' : 'text-[var(--color-text-primary)]'
}`} }`}
> >
{subtask.title} {subtask.title}
@@ -84,7 +84,7 @@ export default function SubtaskList({ taskId, subtasks }: SubtaskListProps) {
{showInput && ( {showInput && (
<div className="flex items-center gap-2 py-1.5 px-1"> <div className="flex items-center gap-2 py-1.5 px-1">
<Square size={16} className="text-[#64748b] flex-shrink-0" /> <Square size={16} className="text-[var(--color-text-secondary)] flex-shrink-0" />
<input <input
ref={inputRef} ref={inputRef}
type="text" type="text"
@@ -98,7 +98,7 @@ export default function SubtaskList({ taskId, subtasks }: SubtaskListProps) {
} }
}} }}
placeholder="New subtask..." placeholder="New subtask..."
className="flex-1 bg-[#0f1117] text-sm text-white px-2 py-1 rounded border border-transparent focus:border-indigo-500 outline-none placeholder-[#64748b]" className="flex-1 bg-[var(--color-page)] text-sm text-[var(--color-text-primary)] px-2 py-1 rounded border border-transparent focus:border-[var(--color-accent)] outline-none placeholder-[var(--color-text-secondary)]"
/> />
</div> </div>
)} )}