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

feat: add visual polish — Inter font, animations, colored shadows, hover effects

Browse Source 
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
AJ Isaacs
2026-02-26 22:35:00 -05:00
parent a1107f434d
commit 908a312aa5
5 changed files with 35 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
TaskTracker.Web/index.html
View File

@@ -4,6 +4,9 @@
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<title>tasktracker-web</title>
</head>
<body>

6
TaskTracker.Web/src/components/KanbanColumn.tsx
View File

@@ -31,8 +31,8 @@ export default function KanbanColumn({
<div
className={`
flex flex-col min-h-[400px] rounded-xl
bg-white/[0.02] border transition-colors duration-150
${isOver ? 'border-white/20 bg-white/[0.04]' : 'border-white/5'}
bg-white/[0.02] border transition-all duration-200
${isOver ? 'border-indigo-500/30 bg-white/[0.04] shadow-lg shadow-indigo-500/5' : 'border-white/5'}
`}
>
{/* Column header */}
@@ -74,7 +74,7 @@ export default function KanbanColumn({
onClick={() => setShowForm(true)}
className="flex items-center justify-center gap-1.5 w-full py-2 rounded-lg
text-xs text-[#64748b] border border-dashed border-white/10
hover:text-white hover:border-white/20 transition-colors duration-150"
hover:text-white hover:border-white/20 transition-all duration-200"
>
<Plus size={14} />
Add Task

4
TaskTracker.Web/src/components/Layout.tsx
View File

@@ -29,7 +29,7 @@ export default function Layout() {
key={to}
to={to}
className={({ isActive }) =>
`flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-colors duration-150 ${
`flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-all duration-200 ${
isActive
? 'bg-[#6366f1] text-white'
: 'text-[#94a3b8] hover:text-white hover:bg-white/5'
@@ -44,7 +44,7 @@ export default function Layout() {
<button
onClick={() => setCollapsed(!collapsed)}
className="flex items-center justify-center p-3 mb-2 mx-2 rounded-lg text-[#94a3b8] hover:text-white hover:bg-white/5 transition-colors duration-150"
className="flex items-center justify-center p-3 mb-2 mx-2 rounded-lg text-[#94a3b8] hover:text-white hover:bg-white/5 transition-all duration-200"
title={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
>
{collapsed ? <PanelLeftOpen size={20} /> : <PanelLeftClose size={20} />}

6
TaskTracker.Web/src/components/TaskCard.tsx
View File

@@ -65,9 +65,9 @@ export default function TaskCard({ task, onClick }: TaskCardProps) {
onClick={() => onClick(task.id)}
className={`
relative rounded-lg cursor-grab active:cursor-grabbing
bg-[#1a1d27] hover:-translate-y-0.5 hover:shadow-lg
transition-all duration-150
${isActive ? 'ring-1 ring-cyan-400/60 shadow-[0_0_12px_rgba(6,182,212,0.25)] animate-pulse-glow' : ''}
bg-[#1a1d27] hover:-translate-y-0.5 hover:shadow-lg hover:shadow-indigo-500/5
transition-all duration-200
${isActive ? 'ring-1 ring-cyan-400/60 shadow-[0_0_12px_rgba(6,182,212,0.25)] animate-pulse-glow' : 'shadow-md shadow-black/20'}
`}
>
{/* Category left border */}

26
TaskTracker.Web/src/index.css
View File

@@ -1,14 +1,36 @@
@import "tailwindcss";
@theme {
--font-sans: 'Inter', system-ui, sans-serif;
}
@keyframes pulse-glow {
0%, 100% {
box-shadow: 0 0 8px rgba(6, 182, 212, 0.2);
box-shadow: 0 0 8px rgba(6, 182, 212, 0.3);
}
50% {
box-shadow: 0 0 16px rgba(6, 182, 212, 0.4);
box-shadow: 0 0 20px rgba(6, 182, 212, 0.5);
}
}
.animate-pulse-glow {
animation: pulse-glow 2s ease-in-out infinite;
}
/* Custom scrollbar for dark theme */
::-webkit-scrollbar {
width: 6px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: #2a2d37;
border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
background: #3a3d47;
}