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