From 114f0fd0db9883f2b454df4499741dc7779f574c Mon Sep 17 00:00:00 2001 From: Disco DeDisco Date: Tue, 2 Jun 2026 00:15:11 -0400 Subject: [PATCH] =?UTF-8?q?composer=20applets:=20.applet-btn-panel=20behin?= =?UTF-8?q?d=20the=20OK=20btn=20for=20contrast=20on=20the=20--duoUser=20fe?= =?UTF-8?q?lt=20=E2=80=94=20TDD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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) --- src/apps/dashboard/tests/integrated/test_views.py | 7 ++++++- src/apps/gameboard/tests/integrated/test_views.py | 8 ++++++++ src/static_src/scss/_applets.scss | 15 +++++++++++++++ src/templates/apps/dashboard/_partials/_form.html | 4 +++- .../gameboard/_partials/_applet-new-game.html | 4 +++- 5 files changed, 35 insertions(+), 3 deletions(-) diff --git a/src/apps/dashboard/tests/integrated/test_views.py b/src/apps/dashboard/tests/integrated/test_views.py index 93e4076..a9a88b0 100644 --- a/src/apps/dashboard/tests/integrated/test_views.py +++ b/src/apps/dashboard/tests/integrated/test_views.py @@ -84,11 +84,16 @@ class NewPostTest(TestCase): self.assertEqual(line_input.get("aria-describedby"), "id_new_post_text_feedback") def test_new_post_applet_has_ok_confirm_button(self): - """New Post gains an OK .btn-confirm submit button, like New Game.""" + """New Post gains an OK .btn-confirm submit button, like New Game — + wrapped in an .applet-btn-panel so it reads against the --duoUser felt.""" form = self._new_post_form(self.post_invalid_input()) buttons = form.cssselect("button.btn-confirm") self.assertTrue(buttons, "no OK .btn-confirm in New Post applet") self.assertEqual(buttons[0].text_content().strip(), "OK") + self.assertTrue( + form.cssselect(".applet-btn-panel button.btn-confirm"), + "OK .btn-confirm not inside .applet-btn-panel", + ) @override_settings(COMPRESS_ENABLED=False) class PostViewTest(TestCase): diff --git a/src/apps/gameboard/tests/integrated/test_views.py b/src/apps/gameboard/tests/integrated/test_views.py index d42e8f9..5f0c3cf 100644 --- a/src/apps/gameboard/tests/integrated/test_views.py +++ b/src/apps/gameboard/tests/integrated/test_views.py @@ -37,6 +37,14 @@ class GameboardViewTest(TestCase): def test_gameboard_shows_new_game_applet(self): [_] = self.parsed.cssselect("#id_applet_new_game") + def test_new_game_ok_button_in_applet_btn_panel(self): + """The OK .btn-confirm sits in an .applet-btn-panel so it reads against + the New Game applet's --duoUser felt (mirrors .gate-roles-panel).""" + [panel] = self.parsed.cssselect("#id_applet_new_game .applet-btn-panel") + btns = panel.cssselect("button.btn-confirm") + self.assertTrue(btns, "OK .btn-confirm not inside .applet-btn-panel") + self.assertEqual(btns[0].text_content().strip(), "OK") + def test_gameboard_shows_my_sea_applet(self): # Sprint 3 of the My Sea roadmap — applet shell only; sigs/sea/draw # flow lands in later sprints. Seeded via migration 0008. diff --git a/src/static_src/scss/_applets.scss b/src/static_src/scss/_applets.scss index f9536e9..b52ad18 100644 --- a/src/static_src/scss/_applets.scss +++ b/src/static_src/scss/_applets.scss @@ -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, diff --git a/src/templates/apps/dashboard/_partials/_form.html b/src/templates/apps/dashboard/_partials/_form.html index c580710..3517b2f 100644 --- a/src/templates/apps/dashboard/_partials/_form.html +++ b/src/templates/apps/dashboard/_partials/_form.html @@ -19,7 +19,9 @@ below the row (and its id tracks `input_id` for aria-describedby). style="flex:1; min-width:0;" required /> - +
+ +
{% if form.errors %}
diff --git a/src/templates/apps/gameboard/_partials/_applet-new-game.html b/src/templates/apps/gameboard/_partials/_applet-new-game.html index 82535a3..37f0da9 100644 --- a/src/templates/apps/gameboard/_partials/_applet-new-game.html +++ b/src/templates/apps/gameboard/_partials/_applet-new-game.html @@ -6,6 +6,8 @@
{% csrf_token %} - +
+ +
\ No newline at end of file