From f5cc82a2f496ce33dcf6bacff97edf9282de8db3 Mon Sep 17 00:00:00 2001
From: Aneurin Barker Snook <aneurin@aneur.in>
Date: Sat, 5 Sep 2026 00:20:32 +0100
Subject: [PATCH] Ghost-style the add-card/status icon buttons; convert the
 last one

- .btn-icon: transparent background, muted icon that turns accent on
  hover -- matching .title-back's treatment exactly, instead of a
  solid accent-filled square.
- The "all tasks" tab's "Add card" button is now the same .btn-icon
  as the kanban/inbox/status ones, so every "add" action in the app
  looks and behaves the same.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 web/src/style.css             | 22 ++++++++++++++--------
 web/src/views/ProjectView.vue | 10 +++++++---
 2 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/web/src/style.css b/web/src/style.css
index 961a25b..8f8fb23 100644
--- a/web/src/style.css
+++ b/web/src/style.css
@@ -1039,12 +1039,14 @@ button[type="submit"]:disabled:not(.btn-icon),
   cursor: progress;
 }
 
-/* A small square icon button -- the compact "add to X" forms (a kanban
-   column, the inbox, the status list) all used a full "Add" label until
-   there were enough of them on screen at once to feel cluttered. Excluded
-   (":not(.btn-icon)" above and on the .field-row/.kanban__new overrides)
-   rather than out-specificity'd, so it isn't at the mercy of source order --
-   the same reasoning as .field's low specificity against input:focus. */
+/* A small square, transparent icon button -- every "add to X" form (a
+   kanban column, the inbox, the status list, the "all tasks" new-card form)
+   used a full "Add" label until there were enough of them on screen at once
+   to feel cluttered. Ghost styling and the hover colour change match
+   .title-back. Excluded (":not(.btn-icon)" above and on the
+   .field-row/.kanban__new overrides) rather than out-specificity'd, so it
+   isn't at the mercy of source order -- the same reasoning as .field's low
+   specificity against input:focus. */
 .btn-icon {
   flex: none;
   width: 2rem;
@@ -1052,8 +1054,8 @@ button[type="submit"]:disabled:not(.btn-icon),
   padding: 0;
   border: none;
   border-radius: var(--radius-sm);
-  background: var(--accent);
-  color: var(--accent-text);
+  background: transparent;
+  color: var(--muted);
   font-size: 1.1rem;
   line-height: 1;
   display: inline-flex;
@@ -1062,6 +1064,10 @@ button[type="submit"]:disabled:not(.btn-icon),
   cursor: pointer;
 }
 
+.btn-icon:hover:not(:disabled) {
+  color: var(--accent);
+}
+
 .btn-icon:disabled {
   opacity: var(--opacity-disabled);
   cursor: progress;
diff --git a/web/src/views/ProjectView.vue b/web/src/views/ProjectView.vue
index 5bec6b5..205c3b2 100644
--- a/web/src/views/ProjectView.vue
+++ b/web/src/views/ProjectView.vue
@@ -211,9 +211,13 @@ async function onCreateInColumn(column: Column) {
             <span>New card</span>
             <input v-model="newText" class="field" type="text" maxlength="1000" required />
           </label>
-          <button type="submit" :disabled="submitting">
-            {{ submitting ? 'Adding…' : 'Add card' }}
-          </button>
+          <button
+            type="submit"
+            class="btn-icon"
+            :disabled="submitting"
+            :title="submitting ? 'Adding…' : 'Add card'"
+            :aria-label="submitting ? 'Adding…' : 'Add card'"
+          >+</button>
         </form>
       </div>