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[]
}
const NOTE_TYPE_CONFIG: Record<string, { label: string; color: string }> = {
[NoteType.PauseNote]: { label: 'Pause', color: '#f59e0b' },
[NoteType.ResumeNote]: { label: 'Resume', color: '#6366f1' },
[NoteType.General]: { label: 'General', color: '#64748b' },
const NOTE_TYPE_CONFIG: Record<string, { label: string; bg: string; text: string }> = {
[NoteType.PauseNote]: { label: 'Pause', bg: 'bg-amber-500/10', text: 'text-amber-400' },
[NoteType.ResumeNote]: { label: 'Resume', bg: 'bg-blue-500/10', text: 'text-blue-400' },
[NoteType.General]: { label: 'General', bg: 'bg-white/5', text: 'text-[var(--color-text-secondary)]' },
}
function formatRelativeTime(dateStr: string): string {
@@ -68,12 +68,12 @@ export default function NotesList({ taskId, notes }: NotesListProps) {
return (
<div>
<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
</h3>
<button
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} />
</button>
@@ -86,25 +86,21 @@ export default function NotesList({ taskId, notes }: NotesListProps) {
<div key={note.id} className="text-sm">
<div className="flex items-center gap-2 mb-1">
<span
className="text-[10px] font-semibold uppercase px-1.5 py-0.5 rounded-full"
style={{
backgroundColor: typeConfig.color + '20',
color: typeConfig.color,
}}
className={`text-[10px] font-medium px-1.5 py-0.5 rounded ${typeConfig.bg} ${typeConfig.text}`}
>
{typeConfig.label}
</span>
<span className="text-[11px] text-[#64748b]">
<span className="text-[11px] text-[var(--color-text-tertiary)]">
{formatRelativeTime(note.createdAt)}
</span>
</div>
<p className="text-[#c4c9d4] leading-relaxed">{note.content}</p>
<p className="text-[var(--color-text-primary)] leading-relaxed">{note.content}</p>
</div>
)
})}
{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 && (
@@ -121,7 +117,7 @@ export default function NotesList({ taskId, notes }: NotesListProps) {
}
}}
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>

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

@@ -46,12 +46,12 @@ export default function SubtaskList({ taskId, subtasks }: SubtaskListProps) {
return (
<div>
<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
</h3>
<button
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} />
</button>
@@ -67,13 +67,13 @@ export default function SubtaskList({ taskId, subtasks }: SubtaskListProps) {
onClick={() => handleToggle(subtask)}
>
{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
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}
@@ -84,7 +84,7 @@ export default function SubtaskList({ taskId, subtasks }: SubtaskListProps) {
{showInput && (
<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
ref={inputRef}
type="text"
@@ -98,7 +98,7 @@ export default function SubtaskList({ taskId, subtasks }: SubtaskListProps) {
}
}}
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>
)}