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

feat(ui): restyle filter bar and create task form 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:09:51 -05:00
parent 664fd72086
commit 0ea3fcfa6d
2 changed files with 14 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
TaskTracker.Web/src/components/CreateTaskForm.tsx
View File

@@ -48,11 +48,11 @@ export default function CreateTaskForm({ onClose }: CreateTaskFormProps) {
} }
const inputClass = const inputClass =
'w-full rounded-md bg-[#0f1117] text-white text-sm px-3 py-2 border border-white/10 placeholder-[#64748b] focus:outline-none focus:ring-2 focus:ring-indigo-500/60 focus:border-transparent transition-colors' 'w-full rounded-md bg-[var(--color-page)] text-white text-sm px-3 py-2 border border-[var(--color-border)] placeholder-[var(--color-text-tertiary)] focus:outline-none focus:ring-2 focus:ring-[var(--color-accent)]/60 focus:border-transparent transition-colors'
return ( return (
<div <div
className="rounded-lg bg-[#1a1d27] p-3 space-y-3" className="rounded-lg bg-[var(--color-surface)] p-3 space-y-3"
onKeyDown={handleKeyDown} onKeyDown={handleKeyDown}
> >
{/* Title */} {/* Title */}
@@ -104,7 +104,7 @@ export default function CreateTaskForm({ onClose }: CreateTaskFormProps) {
<button <button
type="button" type="button"
onClick={onClose} onClick={onClose}
className="text-xs text-[#64748b] hover:text-white transition-colors px-2 py-1" className="text-xs text-[var(--color-text-secondary)] hover:text-white transition-colors px-2 py-1"
> >
Cancel Cancel
</button> </button>
@@ -112,7 +112,7 @@ export default function CreateTaskForm({ onClose }: CreateTaskFormProps) {
type="button" type="button"
onClick={handleSubmit} onClick={handleSubmit}
disabled={!title.trim() || createTask.isPending} disabled={!title.trim() || createTask.isPending}
className="flex items-center gap-1.5 text-xs font-medium text-white bg-indigo-600 hover:bg-indigo-500 className="flex items-center gap-1.5 text-xs font-medium text-white bg-gradient-to-r from-[var(--color-accent)] to-[var(--color-accent-end)] hover:brightness-110
disabled:opacity-40 disabled:cursor-not-allowed disabled:opacity-40 disabled:cursor-not-allowed
px-3 py-1.5 rounded-md transition-colors" px-3 py-1.5 rounded-md transition-colors"
> >

20
TaskTracker.Web/src/components/FilterBar.tsx
View File

@@ -62,17 +62,17 @@ export default function FilterBar({ tasks, filters, onFiltersChange }: FilterBar
{/* "All" chip */} {/* "All" chip */}
<button <button
onClick={clearAll} onClick={clearAll}
className={`inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-[11px] font-medium transition-colors ${ className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-md text-[10px] font-medium transition-colors ${
!hasActiveFilters !hasActiveFilters
? 'bg-indigo-500 text-white' ? 'bg-[var(--color-accent)] text-white'
: 'bg-[#2a2d37] text-[#94a3b8] hover:text-white' : 'bg-white/[0.06] text-[var(--color-text-secondary)] hover:text-white'
}`} }`}
> >
All All
</button> </button>
{/* Divider */} {/* Divider */}
<div className="w-px h-4 bg-white/10" /> <div className="w-px h-4 bg-white/[0.06]" />
{/* Category chips */} {/* Category chips */}
{allCategories.map((cat) => { {allCategories.map((cat) => {
@@ -83,8 +83,8 @@ export default function FilterBar({ tasks, filters, onFiltersChange }: FilterBar
<button <button
key={cat} key={cat}
onClick={() => toggleCategory(cat)} onClick={() => toggleCategory(cat)}
className={`inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-[11px] font-medium transition-colors ${ className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-md text-[10px] font-medium transition-colors ${
isActive ? 'text-white' : 'bg-[#2a2d37] text-[#94a3b8] hover:text-white' isActive ? 'text-white' : 'bg-white/[0.06] text-[var(--color-text-secondary)] hover:text-white'
}`} }`}
style={ style={
isActive isActive
@@ -108,15 +108,15 @@ export default function FilterBar({ tasks, filters, onFiltersChange }: FilterBar
})} })}
{/* Divider */} {/* Divider */}
<div className="w-px h-4 bg-white/10" /> <div className="w-px h-4 bg-white/[0.06]" />
{/* Has subtasks chip */} {/* Has subtasks chip */}
<button <button
onClick={toggleHasSubtasks} onClick={toggleHasSubtasks}
className={`inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-[11px] font-medium transition-colors ${ className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-md text-[10px] font-medium transition-colors ${
filters.hasSubtasks filters.hasSubtasks
? 'bg-indigo-500 text-white' ? 'bg-[var(--color-accent)] text-white'
: 'bg-[#2a2d37] text-[#94a3b8] hover:text-white' : 'bg-white/[0.06] text-[var(--color-text-secondary)] hover:text-white'
}`} }`}
> >
<ListTree size={12} /> <ListTree size={12} />