Redesign flag/report icons as vector assets and dock review panels inside their choice card

Flag question now uses a clean vector flag (dark/light SVG variants,
replacing a hand-drawn pixel-art icon that got muddied by the shared
toolbar icon-tint override). Report question is now a megaphone
instead of a second flag glyph, since both toolbar buttons looked
identical before.

The correct-answer explanation and the wrong-answer follow-up quiz
previously rendered as separate bordered boxes sitting below the
entire choice list. Both now dock inside their own choice's card:
the explanation panel reparents onto the correct choice's row, the
follow-up panel was already there but visually detached. A shared
_attached_panel_box style drops the shared border/corner between the
choice button and its panel so they read as one continuous card.
This commit is contained in:
hz
2026-07-23 01:23:53 -05:00
parent b822fe5314
commit 5ba7af9d3e
9 changed files with 181 additions and 64 deletions
@@ -1,5 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
<path d="M5 3V21" stroke="#26344F" stroke-width="1.8" stroke-linecap="round"/>
<path d="M5 5.2C9 2.8 13 7.1 19 4.5L16.5 9.8 19 15.2C13 17.8 9 13.5 5 15.9V5.2Z" stroke="#EF3340" stroke-width="1.8" stroke-linejoin="round"/>
<path d="M12 7.8V11.5M12 14V14.1" stroke="#EF3340" stroke-width="1.8" stroke-linecap="round"/>
<rect x="3" y="13.4" width="3.6" height="5.6" rx="1.4" stroke="#26344F" stroke-width="1.8" stroke-linejoin="round"/>
<path d="M6.6 9.6 15 6.1V17.9L6.6 14.4V9.6Z" stroke="#26344F" stroke-width="1.8" stroke-linejoin="round"/>
<path d="M18.2 7.4 21 5.6M19.1 12H22M18.2 16.6 21 18.4" stroke="#FF3344" stroke-width="1.8" stroke-linecap="round"/>
</svg>

Before

Width:  |  Height:  |  Size: 403 B

After

Width:  |  Height:  |  Size: 427 B