diff options
Diffstat (limited to 'web/templates/partials/todoist-tasks.html')
| -rw-r--r-- | web/templates/partials/todoist-tasks.html | 34 |
1 files changed, 17 insertions, 17 deletions
diff --git a/web/templates/partials/todoist-tasks.html b/web/templates/partials/todoist-tasks.html index 25faf47..3296745 100644 --- a/web/templates/partials/todoist-tasks.html +++ b/web/templates/partials/todoist-tasks.html @@ -1,30 +1,30 @@ {{define "todoist-tasks"}} -<section class="card" id="todoist-list"> +<section class="card text-shadow-sm" id="todoist-list"> <!-- Section Header with Brand Color --> <div class="flex items-center gap-3 mb-6"> <div class="w-1 h-8 bg-todoist rounded"></div> - <h2 class="text-2xl font-bold text-gray-900">Todoist Tasks</h2> + <h2 class="text-2xl font-light text-white tracking-wide">Todoist Tasks</h2> </div> <!-- Quick Add Form --> {{if .Projects}} <details class="mb-6" open> - <summary class="cursor-pointer text-sm text-indigo-600 hover:text-indigo-800 font-medium transition-colors mb-2"> + <summary class="cursor-pointer text-sm text-white/70 hover:text-white font-medium transition-colors mb-2"> + Quick Add Task </summary> <form hx-post="/tasks" hx-target="#todoist-list" hx-swap="outerHTML" - class="mt-3 space-y-3 bg-white/40 p-4 rounded-lg"> + class="mt-3 space-y-3 bg-black/30 p-4 rounded-lg"> <input type="text" name="content" placeholder="Task content" required - class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent"> + class="w-full px-3 py-2 bg-black/40 border border-white/20 rounded-lg text-sm text-white placeholder-white/50 focus:ring-2 focus:ring-white/30 focus:border-transparent"> <select name="project_id" - class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent"> + class="w-full px-3 py-2 bg-black/40 border border-white/20 rounded-lg text-sm text-white focus:ring-2 focus:ring-white/30 focus:border-transparent"> <option value="">Select project (optional)...</option> {{range .Projects}} <option value="{{.ID}}">{{.Name}}</option> @@ -32,7 +32,7 @@ </select> <button type="submit" - class="w-full bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors"> + class="w-full bg-white/20 hover:bg-white/30 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors"> Add Task </button> </form> @@ -51,31 +51,31 @@ hx-vals='{"task_id": "{{.ID}}"}' hx-target="closest .todoist-task-item" hx-swap="outerHTML" - class="mt-1 h-5 w-5 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500 cursor-pointer"> + class="mt-1 h-5 w-5 rounded bg-black/40 border-white/30 text-white/80 focus:ring-white/30 cursor-pointer"> <div class="flex-1"> - <p class="font-medium text-gray-900 {{if .Completed}}line-through text-gray-500{{end}}"> + <p class="font-medium text-white {{if .Completed}}line-through text-white/50{{end}}"> {{.Content}} </p> {{if .Description}} - <p class="text-sm text-gray-600 mt-1">{{.Description}}</p> + <p class="text-sm text-white/60 mt-1">{{.Description}}</p> {{end}} <div class="flex flex-wrap gap-2 mt-2"> {{if .ProjectName}} - <span class="badge bg-gray-100 text-gray-700">{{.ProjectName}}</span> + <span class="badge bg-white/10 text-white/70">{{.ProjectName}}</span> {{end}} {{if .DueDate}} - <span class="badge bg-yellow-100 text-yellow-800"> + <span class="badge bg-yellow-900/50 text-yellow-300"> Due: {{.DueDate.Format "Jan 2"}} </span> {{end}} {{range .Labels}} - <span class="badge bg-blue-100 text-blue-800">{{.}}</span> + <span class="badge bg-blue-900/50 text-blue-300">{{.}}</span> {{end}} </div> </div> {{if .URL}} - <a href="{{.URL}}" target="_blank" class="text-todoist hover:text-todoist/80 transition-colors"> + <a href="{{.URL}}" target="_blank" class="text-white/70 hover:text-white transition-colors"> <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path> </svg> @@ -86,11 +86,11 @@ </div> {{else}} <div class="text-center py-16"> - <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"> + <svg class="mx-auto h-12 w-12 text-white/30" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /> </svg> - <h3 class="mt-4 text-lg font-medium text-gray-900">No tasks found</h3> - <p class="mt-2 text-sm text-gray-500"> + <h3 class="mt-4 text-lg font-medium text-white">No tasks found</h3> + <p class="mt-2 text-sm text-white/50"> All tasks completed or no tasks available. </p> </div> |