diff --git a/src/views/edit-note.ts b/src/views/edit-note.ts --- a/src/views/edit-note.ts +++ b/src/views/edit-note.ts @@ -3,7 +3,12 @@ import { t } from "../lib/i18n/index.ts"; import { editNoteUrl, noteUrl } from "../lib/urls.ts"; import type { WikiIdentity } from "../lib/wiki-identity.ts"; import { type LayoutOptions, layout } from "./layout.ts"; -import { inputClass, primaryButtonClass, THEME } from "./theme/index.ts"; +import { + contributionButtonClass, + inputClass, + primaryButtonClass, + THEME, +} from "./theme/index.ts"; export interface CollabEditOptions { enabled: boolean; @@ -35,8 +40,11 @@ const reviewBanner = contributionMode ? `
${msg.openContribution.reviewerBanner}
` : ""; const saveLabel = contributionMode - ? msg.openContribution.contribute + ? msg.openContribution.suggestEdit : msg.editor.save; + const saveButtonClass = contributionMode + ? contributionButtonClass + : primaryButtonClass; const collabAttrs = collab?.enabled ? ` @@ -109,7 +117,7 @@ type="submit" data-action="open-dialog" data-target="save-dialog" data-focus="#message" - class="shrink-0 ${primaryButtonClass}" + class="shrink-0 ${saveButtonClass}" >${saveLabel} ${ contributionMode @@ -148,7 +156,7 @@ type="button" data-action="close-parent-dialog" class="text-sm ${THEME.textMuted} hover:underline cursor-pointer" >${msg.editor.cancel} - + diff --git a/src/views/new-note.ts b/src/views/new-note.ts --- a/src/views/new-note.ts +++ b/src/views/new-note.ts @@ -4,6 +4,7 @@ import { newNoteUrl, wikiUrl } from "../lib/urls.ts"; import type { WikiIdentity } from "../lib/wiki-identity.ts"; import { type LayoutOptions, layout } from "./layout.ts"; import { + contributionButtonClass, errorBanner, inputClass, outlineSmallButtonClass, @@ -30,8 +31,11 @@ const contributionBanner = options?.canSubmitContribution ? `${msg.openContribution.reviewerBanner}
` : ""; const submitLabel = options?.canSubmitContribution - ? msg.openContribution.contribute + ? msg.openContribution.suggestNote : msg.editor.createNote; + const submitButtonClass = options?.canSubmitContribution + ? contributionButtonClass + : primaryButtonClass; const titleValue = escapeHtml(options?.titleValue ?? ""); const escapedContent = escapeHtml(options?.contentValue ?? ""); @@ -77,7 +81,7 @@ diff --git a/src/views/theme/index.ts b/src/views/theme/index.ts --- a/src/views/theme/index.ts +++ b/src/views/theme/index.ts @@ -7,6 +7,7 @@ type UserTheme, type WikiThemeMode, } from "./resolve.ts"; export { + contributionButtonClass, contributionSmallButtonClass, dangerButtonClass, dangerSmallButtonClass, diff --git a/src/views/theme/tokens.ts b/src/views/theme/tokens.ts --- a/src/views/theme/tokens.ts +++ b/src/views/theme/tokens.ts @@ -61,6 +61,9 @@ export const denseInputClass = `${inputClass} md:py-1.5`; export const primaryButtonClass = `inline-flex items-center justify-center ${touchTargetClass} px-4 py-2 bg-[var(--accent)] text-[var(--accent-foreground)] text-sm font-medium rounded hover:bg-[var(--accent-hover)]`; +// Larger orange action button for submitting an open contribution from the editor. +export const contributionButtonClass = `inline-flex items-center justify-center ${touchTargetClass} px-4 py-2 bg-[#f97316] text-white text-sm font-medium rounded hover:bg-[#ea580c]`; + export const primarySmallButtonClass = `inline-flex items-center justify-center ${touchTargetClass} px-3 py-1.5 bg-[var(--accent)] text-[var(--accent-foreground)] text-sm font-medium rounded hover:bg-[var(--accent-hover)]`; export const outlineSmallButtonClass = `inline-flex items-center justify-center ${touchTargetClass} px-3 py-1.5 border border-[var(--accent)] ${THEME.accentText} text-sm font-medium rounded ${THEME.accentSoft}`;