From cd8df384a49949c57bffdeff303f272b611d80f2 Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Thu, 8 Oct 2026 15:38:36 -0400
Subject: [PATCH] DRY pass #3: one compact dialog button (#5373)

ShareDialog's Share and NoteEditor's Add note / Close each spelled out the
same compact button, smaller than .btn. .btn-compact is its shape and
.btn-compact-primary its brand fill; Close keeps its neutral colours beside it.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 frontend/src/components/NoteEditor.vue  | 5 +++--
 frontend/src/components/ShareDialog.vue | 2 +-
 frontend/src/style.css                  | 9 +++++++++
 3 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/NoteEditor.vue b/frontend/src/components/NoteEditor.vue
index 27cb357..09f440b 100644
--- a/frontend/src/components/NoteEditor.vue
+++ b/frontend/src/components/NoteEditor.vue
@@ -822,10 +822,11 @@ function revPreview(rev: NoteRevision): string {
           </NoteActions>
           <button
             type="button"
+            class="btn-compact"
             :class="
               isCreate
-                ? 'rounded-md bg-brand px-3 py-1.5 text-sm font-semibold text-neutral-900 hover:brightness-95 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand disabled:opacity-60'
-                : 'rounded-md px-3 py-1.5 text-sm font-semibold text-neutral-700 hover:bg-neutral-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand disabled:opacity-60 dark:text-neutral-200 dark:hover:bg-neutral-800'
+                ? 'btn-compact-primary'
+                : 'text-neutral-700 hover:bg-neutral-100 dark:text-neutral-200 dark:hover:bg-neutral-800'
             "
             :disabled="saving"
             @click="close()"
diff --git a/frontend/src/components/ShareDialog.vue b/frontend/src/components/ShareDialog.vue
index 855be61..efa73a1 100644
--- a/frontend/src/components/ShareDialog.vue
+++ b/frontend/src/components/ShareDialog.vue
@@ -145,7 +145,7 @@ onMounted(load);
           </select>
           <button
             type="submit"
-            class="rounded-md bg-brand px-3 py-1.5 text-sm font-semibold text-neutral-900 hover:brightness-95 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand disabled:opacity-60"
+            class="btn-compact btn-compact-primary"
             :disabled="busy || !pick"
           >
             Share
diff --git a/frontend/src/style.css b/frontend/src/style.css
index e2b2f09..3214e12 100644
--- a/frontend/src/style.css
+++ b/frontend/src/style.css
@@ -287,6 +287,15 @@ body {
   .nav-link-active {
     @apply bg-neutral-200 text-neutral-900 dark:bg-neutral-800 dark:text-neutral-100;
   }
+  /* The compact text button that ends a dialog's row: the editor's Add note and
+   * Close, the Share dialog's Share. Smaller than .btn, which is a page's. */
+  .btn-compact {
+    @apply rounded-md px-3 py-1.5 text-sm font-semibold focus:outline-none
+      focus-visible:ring-2 focus-visible:ring-brand disabled:opacity-60;
+  }
+  .btn-compact-primary {
+    @apply bg-brand text-neutral-900 hover:brightness-95;
+  }
   /* The small bordered action on a row in Account, Admin and Sync: Rename, Revoke,
    * Sign out. Two colours, neutral and destructive; spacing a site needs beyond
    * these (shrink-0, self-start, py-1.5) stays a utility beside it. */