feat(FN-1215): refresh settings branding and scope banner theming

- Update Settings modal copy from fn to Fusion for shared/project messaging
- Adjust worktree naming example to use uppercase task IDs (FN-042)
- Make scope banner colors theme-aware using info/success CSS variables with color-mix
- Update desktop and mobile Settings modal tests for the new Fusion scope text
This commit is contained in:
gsxdsm
2026-04-08 16:37:13 -07:00
parent c4eaf6f1f6
commit d70cef1939
4 changed files with 9 additions and 8 deletions

View File

@@ -572,7 +572,7 @@ export function SettingsModal({
return (
<div className="settings-scope-banner settings-scope-global">
<span>🌐</span>
<span>These settings are shared across all your fn projects.</span>
<span>These settings are shared across all your Fusion projects.</span>
</div>
);
}
@@ -1355,7 +1355,7 @@ export function SettingsModal({
disabled={form.recycleWorktrees}
>
<option value="random">Random names (e.g., swift-falcon)</option>
<option value="task-id">Task ID (e.g., fn-042)</option>
<option value="task-id">Task ID (e.g., FN-042)</option>
<option value="task-title">Task title (e.g., fix-login-bug)</option>
</select>
<small>
@@ -1467,7 +1467,7 @@ export function SettingsModal({
<option value="pull-request">Create, monitor, and merge a GitHub pull request</option>
</select>
<small>
Controls what happens after a task reaches In Review. Direct mode preserves fn&apos;s current local squash-merge behavior. Pull request mode keeps the task in In Review while fn waits for GitHub reviews and required checks before merging the PR.
Controls what happens after a task reaches In Review. Direct mode preserves Fusion&apos;s current local squash-merge behavior. Pull request mode keeps the task in In Review while Fusion waits for GitHub reviews and required checks before merging the PR.
</small>
</div>
<div className="form-group">

View File

@@ -2025,6 +2025,7 @@ describe("SettingsModal", () => {
// Switch to Appearance → should show global banner
fireEvent.click(screen.getByText("Appearance"));
expect(container.querySelector(".settings-scope-global")).toBeTruthy();
expect(container.querySelector(".settings-scope-global")?.textContent).toContain("Fusion");
expect(container.querySelector(".settings-scope-project")).toBeNull();
// Switch to Models → should show project banner

View File

@@ -105,7 +105,7 @@ describe("SettingsModal mobile adaptations", () => {
expect(getByText("These settings only affect this project.")).toBeTruthy();
await user.click(getByText("Appearance"));
expect(getByText("These settings are shared across all your fn projects.")).toBeTruthy();
expect(getByText("These settings are shared across all your Fusion projects.")).toBeTruthy();
});
it("contains required mobile settings CSS overrides", () => {

View File

@@ -2861,12 +2861,12 @@ body {
color: var(--text-muted);
}
.settings-scope-global {
background: rgba(59, 130, 246, 0.08);
border-left: 3px solid rgba(59, 130, 246, 0.4);
background: color-mix(in srgb, var(--color-info) 8%, transparent);
border-left: 3px solid color-mix(in srgb, var(--color-info) 40%, transparent);
}
.settings-scope-project {
background: rgba(34, 197, 94, 0.08);
border-left: 3px solid rgba(34, 197, 94, 0.4);
background: color-mix(in srgb, var(--color-success) 8%, transparent);
border-left: 3px solid color-mix(in srgb, var(--color-success) 40%, transparent);
}
/* === Auth Provider Cards === */