bvandeusen/inkwell
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases 4 Wiki Activity

DRY pass #3: one compact dialog button (#5373)

Browse Source 
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>
This commit is contained in:
bvandeusen
2026-10-08 15:38:36 -04:00
co-authored by Claude Opus 5.5
parent 0ecdbfe257
commit cd8df384a4
3 changed files with 13 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/NoteEditor.vue
+3 -2
View File
@@ -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()"
frontend/src/components/ShareDialog.vue
+1 -1
View File
@@ -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
frontend/src/style.css
+9
View File
@@ -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. */