composer applets: .applet-btn-panel behind the OK btn for contrast on the --duoUser felt — TDD

Giving New Game / New Post the --duoUser green felt made the green OK .btn-confirm hard to see. Wrap it in an .applet-btn-panel — a --priUser fill + faint --terUser border, mirroring .gate-roles-panel (_room.scss) with tighter padding so it stays snug beside the line input — so the button reads clearly against the felt.

Applied in _applet-new-game.html and the shared _form.html (New Post now; room.html's composer inherits it when ported).

Tests: GameboardViewTest.test_new_game_ok_button_in_applet_btn_panel (OK btn inside #id_applet_new_game .applet-btn-panel); NewPostTest.test_new_post_applet_has_ok_confirm_button extended to assert the panel wrap. The New Game OK btn stays clickable inside the panel (GatekeeperTest.test_founder_creates_room_and_sees_gatekeeper FT green).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Disco DeDisco
2026-06-02 00:15:11 -04:00
parent 22fc38b92b
commit 114f0fd0db
5 changed files with 35 additions and 3 deletions

View File

@@ -137,6 +137,21 @@
}
}
// Backdrop panel behind a composer applet's OK button — mirrors
// `.gate-roles-panel` (`_room.scss`): a --priUser fill + faint --terUser
// border so the green .btn-confirm reads against the --duoUser felt. Tighter
// padding than the gate panel so it stays snug beside the line input.
.applet-btn-panel {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
border: 0.1rem solid rgba(var(--terUser), 0.25);
border-radius: 0.5rem;
padding: 0.4rem;
background: rgba(var(--priUser), 1);
}
// Page-level gear buttons — fixed to viewport bottom-right
.gameboard-page,
.dashboard-page,