Merge pull request #501 from Chris0Jeky/ui/board-card-surface-polish

UI-05: Board card and board-surface polish pass

Author: Chris0Jeky

frontend/taskdeck-web/src/components/board/BoardActionRail.vue

@@ -10,42 +10,88 @@ defineEmits<{
 
 <template>
   <div
-    class="mt-4 flex flex-wrap items-center gap-2 rounded-xl border border-outline-variant/15 bg-surface-container-low px-4 py-3"
+    class="td-action-rail"
     data-board-action-rail
   >
-    <span class="text-xs font-semibold uppercase tracking-wide text-on-surface/60">Board Actions</span>
-    <button
-      class="px-3 py-2 text-sm font-medium text-on-surface/70 hover:bg-surface-container border border-outline-variant/15 rounded-lg transition-colors"
-      @click="$emit('capture')"
-    >
+    <span class="td-action-rail__label">Board Actions</span>
+    <button class="td-action-rail__btn" @click="$emit('capture')">
       Capture here
     </button>
-    <button
-      class="px-3 py-2 text-sm font-medium text-on-surface/70 hover:bg-surface-container border border-outline-variant/15 rounded-lg transition-colors"
-      @click="$emit('chat')"
-    >
+    <button class="td-action-rail__btn" @click="$emit('chat')">
       Ask assistant
     </button>
-    <button
-      class="px-3 py-2 text-sm font-medium text-on-surface/70 hover:bg-surface-container border border-outline-variant/15 rounded-lg transition-colors"
-      @click="$emit('review')"
-    >
+    <button class="td-action-rail__btn" @click="$emit('review')">
       Review proposals
     </button>
-    <button
-      class="px-3 py-2 text-sm font-medium text-on-surface/70 hover:bg-surface-container border border-outline-variant/15 rounded-lg transition-colors"
-      @click="$emit('inbox')"
-    >
+    <button class="td-action-rail__btn" @click="$emit('inbox')">
       Open Inbox
     </button>
-    <button
-      class="px-3 py-2 text-sm font-medium text-on-primary-container bg-primary-container hover:brightness-110 rounded-lg transition-colors"
-      @click="$emit('addCard')"
-    >
+    <button class="td-action-rail__btn td-action-rail__btn--primary" @click="$emit('addCard')">
       Add card
     </button>
-    <p class="text-sm text-on-surface/60">
+    <p class="td-action-rail__hint">
       New input starts in Capture or Inbox. Only approved changes land on this board.
     </p>
   </div>
 </template>
+
+<style scoped>
+.td-action-rail {
+  margin-top: var(--td-space-5);
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--td-space-2);
+  border-radius: var(--td-radius-xl);
+  border: 0.5px solid var(--td-border-ghost);
+  background: var(--td-surface-container-low);
+  padding: var(--td-space-4) var(--td-space-5);
+}
+
+.td-action-rail__label {
+  font-size: var(--td-font-xs);
+  font-family: 'Space Grotesk', system-ui, sans-serif;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: var(--td-text-tertiary);
+}
+
+.td-action-rail__btn {
+  padding: var(--td-space-2) var(--td-space-4);
+  font-size: var(--td-font-sm);
+  font-weight: 500;
+  color: var(--td-text-muted);
+  border: 1px solid var(--td-border-default);
+  border-radius: var(--td-radius-lg);
+  transition:
+    background-color var(--td-transition-fast),
+    color var(--td-transition-fast);
+}
+
+.td-action-rail__btn:hover {
+  background: var(--td-surface-container);
+  color: var(--td-text-primary);
+}
+
+.td-action-rail__btn:focus-visible {
+  outline: none;
+  box-shadow: var(--td-focus-ring);
+}
+
+.td-action-rail__btn--primary {
+  background: var(--td-color-primary);
+  color: var(--td-text-inverse);
+  border-color: transparent;
+}
+
+.td-action-rail__btn--primary:hover {
+  background: var(--td-color-primary-hover);
+  color: var(--td-text-inverse);
+}
+
+.td-action-rail__hint {
+  font-size: var(--td-font-sm);
+  color: var(--td-text-tertiary);
+}
+</style>

frontend/taskdeck-web/src/components/board/BoardCanvas.vue

@@ -26,8 +26,8 @@ defineEmits<{
 </script>
 
 <template>
-  <div class="h-[calc(100vh-120px)] overflow-x-auto">
-    <div class="flex gap-4 p-6 min-h-full">
+  <div class="td-board-canvas">
+    <div class="td-board-canvas__lanes">
       <div
         v-for="column in sortedColumns"
         :key="column.id"
@@ -59,10 +59,10 @@ defineEmits<{
       <!-- Empty State -->
       <div
         v-if="!hasColumns"
-        class="flex-1 flex flex-col items-center justify-center text-on-surface/20"
+        class="td-board-canvas__empty"
       >
         <svg
-          class="w-16 h-16 mb-4"
+          class="td-board-canvas__empty-icon"
           fill="none"
           stroke="currentColor"
           viewBox="0 0 24 24"
@@ -74,9 +74,50 @@ defineEmits<{
             d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"
           />
         </svg>
-        <p class="text-lg font-medium">No columns yet</p>
-        <p class="text-sm mt-1">Click "Add Column" to get started</p>
+        <p class="td-board-canvas__empty-title">No columns yet</p>
+        <p class="td-board-canvas__empty-hint">Click "Add Column" to get started</p>
       </div>
     </div>
   </div>
 </template>
+
+<style scoped>
+.td-board-canvas {
+  height: calc(100vh - 120px);
+  overflow-x: auto;
+}
+
+.td-board-canvas__lanes {
+  display: flex;
+  gap: var(--td-space-5);
+  padding: var(--td-space-6);
+  min-height: 100%;
+}
+
+.td-board-canvas__empty {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: var(--td-text-tertiary);
+}
+
+.td-board-canvas__empty-icon {
+  width: 4rem;
+  height: 4rem;
+  margin-bottom: var(--td-space-5);
+}
+
+.td-board-canvas__empty-title {
+  font-size: var(--td-font-lg);
+  font-weight: 500;
+  color: var(--td-text-tertiary);
+}
+
+.td-board-canvas__empty-hint {
+  font-size: var(--td-font-sm);
+  color: var(--td-text-tertiary);
+  margin-top: var(--td-space-1);
+}
+</style>