claude-kanban 0.6.1 → 0.6.2

package/dist/bin/cli.js

@@ -4273,33 +4273,33 @@ function renderRoadmapFeature(feature) {
 
 function renderRoadmapModal() {
   return \`
-    <div class="modal-backdrop" onclick="state.showModal = null; render();">
-      <div class="modal-content max-w-lg" onclick="event.stopPropagation();">
-        <div class="modal-header">
-          <h2 class="modal-title">Generate Roadmap</h2>
-          <button onclick="state.showModal = null; render();" class="modal-close">\xD7</button>
+    <div class="modal-backdrop fixed inset-0 flex items-center justify-center z-50" onclick="if(event.target === event.currentTarget) { state.showModal = null; render(); }">
+      <div class="modal-content card rounded-xl w-full max-w-lg mx-4">
+        <div class="px-6 py-4 border-b border-canvas-200 flex justify-between items-center">
+          <h3 class="font-display font-semibold text-canvas-800 text-lg">\u{1F5FA}\uFE0F Generate Roadmap</h3>
+          <button onclick="state.showModal = null; render();" class="text-canvas-400 hover:text-canvas-600 text-xl leading-none">&times;</button>
         </div>
-        <div class="modal-body">
-          <p class="text-sm text-canvas-500 mb-4">
+        <div class="p-6">
+          <p class="text-sm text-canvas-500 mb-6">
             Generate a strategic feature roadmap by analyzing your project structure and optionally researching competitors.
           </p>
 
-          <div class="space-y-4">
-            <label class="flex items-center gap-3 cursor-pointer">
+          <div class="space-y-5">
+            <label class="flex items-start gap-3 cursor-pointer p-3 rounded-lg border border-canvas-200 hover:border-canvas-300 transition-colors">
               <input type="checkbox"
                      \${state.roadmapEnableCompetitors ? 'checked' : ''}
                      onchange="state.roadmapEnableCompetitors = this.checked; render();"
-                     class="w-4 h-4 accent-accent">
+                     class="w-4 h-4 mt-0.5 accent-accent">
               <div>
                 <span class="text-sm font-medium text-canvas-700">Enable competitor research</span>
-                <p class="text-xs text-canvas-400">Use web search to analyze competitors (takes longer)</p>
+                <p class="text-xs text-canvas-400 mt-0.5">Use web search to analyze competitors (takes longer)</p>
               </div>
             </label>
 
             <div>
-              <label class="text-sm font-medium text-canvas-700">Additional context (optional)</label>
+              <label class="block text-sm font-medium text-canvas-700 mb-1.5">Additional context (optional)</label>
               <textarea
-                class="input w-full mt-1 text-sm"
+                class="input w-full text-sm"
                 rows="3"
                 placeholder="E.g., Focus on mobile features, target enterprise users..."
                 oninput="state.roadmapCustomPrompt = this.value;"
@@ -4307,9 +4307,9 @@ function renderRoadmapModal() {
             </div>
           </div>
         </div>
-        <div class="modal-footer">
-          <button onclick="state.showModal = null; render();" class="btn btn-ghost">Cancel</button>
-          <button onclick="generateRoadmap(); state.showModal = null; render();" class="btn btn-primary">
+        <div class="px-6 py-4 border-t border-canvas-200 flex justify-end gap-3">
+          <button onclick="state.showModal = null; render();" class="btn btn-ghost px-4 py-2">Cancel</button>
+          <button onclick="generateRoadmap(); state.showModal = null; render();" class="btn btn-primary px-4 py-2">
             \u{1F680} Generate Roadmap
           </button>
         </div>