Skip to content

Commit 761c110

Browse files
lklimekclaude
lklimek
and
claude
authored
fix(ui): improve dialog button visibility and close-on-click-outside (#703)
* fix(ui): improve dialog button visibility and add close-on-click-outside (#682) - Theme-aware secondary button colors: light mode uses warm gray fill, dark mode uses dark neutral fill, ensuring buttons are always visible against the dialog background - Extract DIALOG_BUTTON_MIN_SIZE constant (96×36) for consistent sizing - Add .strong() to all dialog button labels for better scannability - Add clicked_outside_window() utility in new modal_overlay module - Apply close-on-click-outside to all non-destructive/non-sensitive dialogs - Standardize WalletUnlockPopup Cancel button (was transparent, now themed) - Standardize WalletUnlockPopup button layout to right-to-left (primary right) - Update DataContractJsonPopup: primary Close button, DashColors constants, add Escape key handling - Project-wide pass: update ~12 ad-hoc dialogs across identities, wallets, contracts, tools, DPNS, DashPay, and tokens screens to use ComponentStyles - Add manual test scenarios document Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * refactor(ui): replace ad-hoc identity removal dialog with ConfirmationDialog Replace hand-rolled egui::Window confirmation dialog in identities_screen with the shared ConfirmationDialog component. This ensures consistent button styling (theme-aware secondary buttons, danger mode) and behavior (Escape key, X button close) via the reusable component. Net reduction of 74 lines — all styling, overlay, and dismiss logic now handled by ConfirmationDialog. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * fix(ui): darken secondary button fill and text for better light-mode contrast Fill: (235,238,243) → (215,220,228) Text: (60,70,85) → (45,55,72) Stroke: (200,206,215) → (185,192,205) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * fix(ui): revert secondary button fill, keep darker text, darken border more Fill: reverted to (235,238,243) Text: kept at (45,55,72) Stroke: (185,192,205) → (170,178,192) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * fix(ui): align secondary button colors with default widget (column header) styling Secondary buttons now use the same fill/text/stroke as egui's default inactive widget style (used by column title buttons), ensuring visual consistency across the app. Light: fill (240,242,247), text (17,25,33), stroke (226,232,240) Dark: fill (18,18,18), text (240,240,240), stroke (60,60,60) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * fix(ui): ensure secondary button fill contrasts against dialog background Previous fill (240,242,247) was identical to window_fill, making buttons invisible on dialogs. New fill (218,222,230) is ~20 points darker. Light: fill (218,222,230), text BLACK, stroke (195,200,212) Dark: fill (50,52,58), text (240,240,240), stroke (72,75,82) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * refactor(ui): replace ad-hoc dialogs with ConfirmationDialog in key_info and masternode_list_diff Replace custom confirmation dialog implementations with the shared ConfirmationDialog component for consistency and reduced duplication. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * fix(ui): extract button helpers, zeroize keys, add modal overlays, scope Enter key - Extract ComponentStyles::{primary,secondary,danger}_button() helpers, replacing ~38 copy-pasted button construction sites across 13 files - Use Zeroizing<String> for private key WIF in dialogs and asset lock screen - Replace .clear() with .zeroize() for SK wallet unlock password - Add modal overlay + click-outside-to-close to Send Dash, Reward Calculation, and Avatar popups - Scope Enter key confirmation to only fire when no widget has focus (ConfirmationDialog and InfoPopup) - Standardize button order: Cancel left, Action right across all dialogs - Add Cancel button to Send Dash confirmation dialog - Update manual test scenarios with correct RGB values and expanded coverage (5 → 13 dialog types) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * fix(ui): address PR review comments — Enter guard, ComboBox dismiss, alias ordering - Gate Enter-to-confirm on confirm_text.is_some() so hidden confirm buttons can't be triggered via keyboard - Add !combo_open guard to SelectionDialog outside-click handler, preventing ComboBox dropdown clicks from closing the dialog - Add outside-click dismissal to Token Configuration Details and Select Properties popups - Reorder alias rename: persist to DB first, update in-memory only on success, show MessageBanner on failure Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * refactor(ui): generalize button helpers to accept WidgetText, add kittest coverage - Change ComponentStyles::{primary,secondary,danger}_button() to accept `impl Into<WidgetText>` instead of `&str`, preserving existing RichText formatting when provided - Collapse 6 branching sites in ConfirmationDialog, SelectionDialog, and InfoPopup that manually handled RichText vs plain text - Add 17 kittest tests for ConfirmationDialog (rendering, NOTHING sentinel, danger mode, open/closed state, ComponentResponse) - Add 13 kittest tests for InfoPopup (rendering, paragraph splitting, markdown mode, is_open tracking, show() return value) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * refactor(ui): centralize pointer cursor in ComponentStyles button helpers Add add_primary_button(), add_secondary_button(), add_danger_button(), and add_primary_button_enabled() helpers that bake in PointingHand cursor, eliminating ~43 redundant .on_hover_cursor() calls across 15 files. Also adds TODO(#707) for PasswordInput in wallet_unlock_popup. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * refactor(ui): add toolbar_button helper, move clicked_outside_window to helpers - Add ComponentStyles::toolbar_button() and add_toolbar_button() for top-panel action buttons with network accent colors - Add generic ComponentStyles::add_button() for custom-styled buttons - Migrate top_panel.rs to use toolbar_button helpers, removing ad-hoc styling and manual text measurement - Move clicked_outside_window() from components/modal_overlay.rs to helpers.rs (it's a utility function, not a component) - Delete now-empty modal_overlay module Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * fix(ui): address PR review comments — disabled button visuals, InfoPopup Enter guard - add_primary_button_enabled() now shows distinct grey fill/text when disabled instead of looking active (CMT-007) - Remove unnecessary focused() guard from InfoPopup Enter handler since InfoPopup has no input fields (CMT-009) - Add INTENTIONAL(CMT-010) comments documenting accepted WidgetText match behavior across all button helpers Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
1 parent 20f81c7 commit 761c110

25 files changed

Lines changed: 1467 additions & 586 deletions

‎docs/ai-design/2026-03-09-dialog-button-visibility/manual-test-scenarios.txt‎

Lines changed: 333 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,333 @@
1+
Manual Test Scenarios: Dialog Button Visibility and Close-on-Click-Outside (#682)
2+
3+
Prerequisites:
4+
- Application built and running
5+
- Test in both light mode and dark mode for each scenario
6+
7+
Color Reference (from DashColors / ComponentStyles in src/ui/theme.rs):
8+
Primary button fill: DASH_BLUE (0, 141, 228)
9+
Primary button text: WHITE (255, 255, 255)
10+
Primary button stroke: DASH_BLUE (0, 141, 228)
11+
Secondary button fill (light): SECONDARY_BUTTON_FILL_LIGHT (218, 222, 230)
12+
Secondary button fill (dark): SECONDARY_BUTTON_FILL_DARK (50, 52, 58)
13+
Secondary button text (light): BLACK (17, 25, 33)
14+
Secondary button text (dark): DARK_TEXT_PRIMARY (240, 240, 240)
15+
Secondary button stroke (light): SECONDARY_BUTTON_STROKE_LIGHT (195, 200, 212)
16+
Secondary button stroke (dark): SECONDARY_BUTTON_STROKE_DARK (72, 75, 82)
17+
Danger button fill: ERROR (235, 87, 87)
18+
Danger button text: WHITE (255, 255, 255)
19+
Modal overlay: rgba(0, 0, 0, 120)
20+
Dialog min button size: 96x36
21+
22+
=== 1. Confirmation Dialog ===
23+
24+
1.1 Button Visibility (Light Mode)
25+
- Trigger any confirmation dialog (e.g., delete wallet, remove identity)
26+
- VERIFY: Cancel button has fill (rgb 218,222,230), dark text (rgb 17,25,33), border (rgb 195,200,212)
27+
- VERIFY: Confirm button uses primary blue fill (rgb 0,141,228) with white text
28+
- VERIFY: Both buttons have bold/strong text labels
29+
- VERIFY: Buttons are visually larger than before (96x36 minimum)
30+
31+
1.2 Button Visibility (Dark Mode)
32+
- Switch to dark mode and trigger the same confirmation dialog
33+
- VERIFY: Cancel button has fill (rgb 50,52,58), light text (rgb 240,240,240), border (rgb 72,75,82)
34+
- VERIFY: Confirm button uses primary blue fill with white text
35+
- VERIFY: Both buttons remain clearly distinguishable from the dialog background
36+
37+
1.3 Click Outside to Close (Non-Danger)
38+
- Open a non-danger confirmation dialog (e.g., Mint Tokens confirm, Unfreeze confirm)
39+
- Click anywhere outside the dialog window on the overlay
40+
- VERIFY: Dialog closes and action is treated as "Canceled"
41+
42+
1.4 Click Outside Disabled for Danger Mode
43+
- Open a danger-mode confirmation dialog (e.g., delete wallet, burn tokens, withdraw)
44+
- Click outside the dialog window
45+
- VERIFY: Dialog does NOT close (requires explicit button click or Escape)
46+
47+
1.5 Enter Key Confirms (Non-Danger)
48+
- Open a non-danger confirmation dialog (e.g., Mint Tokens confirm)
49+
- Press Enter key
50+
- VERIFY: Dialog confirms the action
51+
52+
1.6 Enter Key Disabled for Danger Mode
53+
- Open a danger-mode confirmation dialog (e.g., delete wallet)
54+
- Press Enter key
55+
- VERIFY: Dialog does NOT confirm (requires explicit button click)
56+
57+
1.7 Escape Key Still Works
58+
- Open any confirmation dialog
59+
- Press Escape
60+
- VERIFY: Dialog closes as "Canceled"
61+
62+
=== 2. Info Popup ===
63+
64+
2.1 Close Button Appearance
65+
- Trigger an info popup (e.g., help text, info display)
66+
- VERIFY: Close button uses primary blue styling (rgb 0,141,228) with bold white text
67+
- VERIFY: Button size is 96x36
68+
69+
2.2 Click Outside to Close
70+
- Open an info popup
71+
- Click outside the popup window
72+
- VERIFY: Popup closes
73+
74+
2.3 Enter Key Closes (No Widget Focused)
75+
- Open an info popup
76+
- Ensure no text field is focused
77+
- Press Enter
78+
- VERIFY: Popup closes
79+
80+
2.4 Enter Key With Widget Focused
81+
- Open an info popup that contains interactive elements
82+
- Click on a text field or other focusable widget
83+
- Press Enter
84+
- VERIFY: Popup does NOT close (Enter is consumed by the focused widget)
85+
86+
2.5 Escape Key Still Works
87+
- Open an info popup
88+
- Press Escape
89+
- VERIFY: Popup closes
90+
91+
=== 3. Selection Dialog ===
92+
93+
3.1 Button Visibility (Light Mode)
94+
- Trigger a selection dialog (e.g., Core RPC selection)
95+
- VERIFY: Cancel button uses theme-aware secondary styling (fill rgb 218,222,230, text rgb 17,25,33)
96+
- VERIFY: Select/Confirm button uses primary blue styling
97+
- VERIFY: Both buttons have bold text and 96x36 minimum size
98+
99+
3.1a Button Visibility (Dark Mode)
100+
- Switch to dark mode
101+
- Trigger a selection dialog (e.g., Core RPC selection)
102+
- VERIFY: Cancel button has fill (rgb 50,52,58), text (rgb 240,240,240), border (rgb 72,75,82)
103+
- VERIFY: Cancel button is clearly distinguishable from the dialog background
104+
- VERIFY: Select/Confirm button remains primary blue with white text
105+
106+
3.2 Click Outside to Close
107+
- Open a selection dialog
108+
- Click outside the dialog window
109+
- VERIFY: Dialog closes and action is treated as "Canceled"
110+
111+
3.3 Existing Keyboard Handling
112+
- Open a selection dialog
113+
- Press Escape
114+
- VERIFY: Dialog cancels
115+
- Open again, press Enter
116+
- VERIFY: Dialog confirms current selection
117+
118+
=== 4. Wallet Unlock Popup ===
119+
120+
4.1 Button Layout
121+
- Open wallet unlock popup (click locked wallet)
122+
- VERIFY: Unlock button is on the RIGHT side, Cancel on the LEFT
123+
- VERIFY: Both buttons have bold text labels
124+
- VERIFY: Cancel button uses theme-aware secondary styling (not transparent)
125+
- VERIFY: Button sizes are 96x36
126+
127+
4.2 Button Visibility (Dark Mode)
128+
- Switch to dark mode
129+
- Open wallet unlock popup
130+
- VERIFY: Cancel button is clearly visible with fill (rgb 50,52,58) and text (rgb 240,240,240)
131+
- VERIFY: Cancel button is NOT transparent (previous behavior was transparent)
132+
133+
4.3 Click Outside to Close
134+
- Open wallet unlock popup
135+
- Click outside the popup
136+
- VERIFY: Popup closes (treated as cancelled)
137+
- NOTE: Wallet unlock has no danger_mode -- overlay click always dismisses
138+
139+
4.4 Existing Behavior Preserved
140+
- Open wallet unlock popup
141+
- Press Escape
142+
- VERIFY: Popup closes
143+
- Open again, type password, press Enter
144+
- VERIFY: Unlock attempt proceeds
145+
146+
=== 5. Data Contract JSON Popup ===
147+
148+
5.1 Close Button Styling
149+
- Navigate to Tokens screen, open a data contract JSON popup
150+
- VERIFY: Close button uses PRIMARY blue styling (not secondary)
151+
- VERIFY: Button has bold text and 96x36 size
152+
153+
5.2 Escape Key
154+
- Open JSON popup
155+
- Press Escape
156+
- VERIFY: Popup closes
157+
158+
5.3 Click Outside to Close
159+
- Open JSON popup
160+
- Click outside the popup window
161+
- VERIFY: Popup closes
162+
163+
5.4 X Button Still Works
164+
- Open JSON popup
165+
- Click the X button in the window title bar
166+
- VERIFY: Popup closes
167+
168+
5.5 Overlay Appearance
169+
- Open JSON popup
170+
- VERIFY: Semi-transparent overlay rgba(0,0,0,120) covers background
171+
- VERIFY: Dialog shadow and border glow are consistent with other popups
172+
173+
=== 6. Send Dash Dialog ===
174+
175+
6.1 Modal Overlay
176+
- Open the Send Dash dialog (Wallets screen > Send)
177+
- VERIFY: Semi-transparent overlay appears behind the dialog
178+
- VERIFY: Background content is dimmed (same overlay as other dialogs)
179+
180+
6.2 Button Layout
181+
- VERIFY: Send button uses primary blue styling
182+
- VERIFY: Cancel button uses secondary styling and is next to Send
183+
- VERIFY: Both buttons are clearly visible in light and dark modes
184+
185+
6.3 X Button and Cancel
186+
- Click Cancel button
187+
- VERIFY: Dialog closes, no action is taken
188+
- Open again, click X button in title bar
189+
- VERIFY: Dialog closes
190+
191+
=== 7. Receive Dialog ===
192+
193+
7.1 Modal Overlay
194+
- Open the Receive dialog (Wallets screen > Receive)
195+
- VERIFY: Semi-transparent overlay appears behind the dialog
196+
- VERIFY: Dialog is centered with consistent styling
197+
198+
7.2 Close Button
199+
- VERIFY: Close button uses secondary styling and is visible
200+
- Click Close
201+
- VERIFY: Dialog closes
202+
203+
7.3 X Button
204+
- Open Receive dialog, click X button
205+
- VERIFY: Dialog closes
206+
207+
=== 8. Fund Platform Dialog ===
208+
209+
8.1 Modal Overlay
210+
- Open Fund Platform dialog (from identity or wallet context)
211+
- VERIFY: Semi-transparent overlay appears behind the dialog
212+
213+
8.2 Button Visibility
214+
- VERIFY: Fund/Confirm button uses primary blue styling
215+
- VERIFY: Cancel button uses secondary styling, clearly visible in both themes
216+
217+
=== 9. Mine Blocks Dialog (Devnet/Regtest) ===
218+
219+
9.1 Modal Overlay
220+
- Switch to devnet or regtest network
221+
- Open Mine Blocks dialog
222+
- VERIFY: Semi-transparent overlay appears behind the dialog
223+
224+
9.2 Button Visibility
225+
- VERIFY: Mine/Confirm button uses primary styling
226+
- VERIFY: Cancel button uses secondary styling, visible against dialog background
227+
228+
=== 10. Private Key Display Dialog ===
229+
230+
10.1 Overlay and Presentation (Wallets Screen)
231+
- Navigate to a wallet address list, click "Show Private Key"
232+
- Unlock wallet if needed
233+
- VERIFY: Semi-transparent overlay appears behind the dialog
234+
- VERIFY: Copy button uses primary styling, Close button uses secondary styling
235+
236+
10.2 Overlay and Presentation (Asset Lock Detail)
237+
- Navigate to an asset lock detail screen, click View for private key
238+
- VERIFY: Semi-transparent overlay appears behind the popup
239+
- VERIFY: Copy button uses primary styling, Close button uses secondary styling
240+
- VERIFY: Private key value is displayed in monospace font
241+
242+
10.3 Close Behavior
243+
- Click Close button
244+
- VERIFY: Dialog closes and private key is cleared from display
245+
246+
=== 11. Rename Wallet Dialog ===
247+
248+
11.1 Button Visibility
249+
- Right-click a wallet or use rename option
250+
- VERIFY: Rename/Save button uses primary styling
251+
- VERIFY: Cancel button uses secondary styling, visible in both themes
252+
253+
11.2 Close Behavior
254+
- Press Escape
255+
- VERIFY: Dialog closes without renaming
256+
257+
=== 12. Avatar / Profile Image Popup (DashPay) ===
258+
259+
12.1 Overlay
260+
- Navigate to DashPay profile, click on avatar/profile image
261+
- VERIFY: Semi-transparent overlay appears behind the enlarged image popup
262+
263+
12.2 Close Behavior
264+
- Click outside the popup
265+
- VERIFY: Popup closes
266+
- Open again, press Escape
267+
- VERIFY: Popup closes
268+
269+
=== 13. Reward Calculation Explanation Popup ===
270+
271+
13.1 Modal Overlay
272+
- Navigate to Tokens > My Tokens, click reward calculation info for a token
273+
- VERIFY: Semi-transparent overlay appears behind the popup (was previously missing)
274+
275+
13.2 Click Outside to Close
276+
- Click anywhere outside the popup window on the overlay
277+
- VERIFY: Popup closes
278+
279+
13.3 Escape Key
280+
- Open the popup again
281+
- Press Escape
282+
- VERIFY: Popup closes
283+
284+
13.4 Close Button and X Button
285+
- VERIFY: Close button uses secondary styling and is visible
286+
- Click Close or X button
287+
- VERIFY: Popup closes
288+
289+
=== 14. Cross-Cutting ===
290+
291+
14.1 Theme Switching
292+
- Open any dialog in light mode, note button appearance
293+
- Close dialog, switch to dark mode
294+
- Open the same dialog
295+
- VERIFY: Secondary buttons adapt to dark mode colors
296+
- VERIFY: Primary buttons remain consistent (blue fill, white text)
297+
298+
14.2 No Visual Regression
299+
- Navigate through the application normally
300+
- VERIFY: No buttons elsewhere are affected by the changes
301+
- VERIFY: Primary button styling is unchanged throughout the app
302+
303+
=== 15. Edge Cases ===
304+
305+
15.1 Drag From Inside to Outside
306+
- Open any non-danger dialog (e.g., Info Popup, Selection Dialog)
307+
- Press and hold mouse button INSIDE the dialog window
308+
- While holding, drag the pointer outside the dialog onto the overlay
309+
- Release the mouse button
310+
- VERIFY: Dialog does NOT close (click-outside only triggers on press outside,
311+
not on release outside)
312+
313+
15.2 Rapid Double-Click on Overlay
314+
- Open any non-danger dialog
315+
- Rapidly double-click on the overlay (outside the dialog)
316+
- VERIFY: Dialog closes on the first click
317+
- VERIFY: The second click does not trigger any action on the UI behind the dialog
318+
319+
15.3 Click Near Edge of Resizable Popup
320+
- Open the Data Contract JSON popup (resizable)
321+
- Click on the overlay area just outside the popup border (within a few pixels)
322+
- VERIFY: Popup closes (the click is outside the window rect)
323+
- Open again, click on the resize handle at the popup edge
324+
- VERIFY: Popup does NOT close (the click is inside the window rect)
325+
326+
15.4 Enter Key With ComboBox Dropdown Open (Selection Dialog)
327+
- Open a selection dialog that uses a ComboBox for selection
328+
- Click the ComboBox to open its dropdown
329+
- While the dropdown is open, press Enter
330+
- VERIFY: Enter does NOT confirm the dialog (it should interact with the
331+
ComboBox dropdown instead)
332+
- Close the dropdown, then press Enter
333+
- VERIFY: Dialog confirms current selection

0 commit comments

Comments
 (0)