Enhance account dialogs with hero illustrations and keyboard navigation

[bkaankose]

Summary

This PR significantly improves the Wino account login and registration dialogs by adding visually appealing hero illustrations and implementing keyboard navigation support for better user experience.

Key Changes

UI/UX Enhancements

• Hero Illustrations: Added custom SVG-style illustrations to both login and registration dialogs featuring:
  • Login dialog: Shield with lock icon on a gradient background
  • Registration dialog: Person with plus badge icon on a gradient background
  • Decorative elements including gradient backgrounds, circles, and sparkles
• Improved Layout: Restructured dialog content with better spacing (increased from 16 to 20) and organized sections with comments
• Enhanced Benefits Cards:
  • Reduced corner radius from 16 to 12 for a more refined look
  • Added colored icon backgrounds with reduced opacity
  • Improved icon sizing and alignment
  • Changed text styling to use CaptionTextBlockStyle for descriptions
  • Removed border styling from the second card for consistency

Keyboard Navigation

• Enter Key Support: Added keyboard event handlers to both dialogs:
  • Email field: Enter moves focus to password field
  • Password field: Enter submits the form (or moves to confirm password in registration)
  • Confirm password field (registration only): Enter submits the form
• Code Refactoring: Extracted login/registration logic into separate PerformLoginAsync() and PerformRegistrationAsync() methods to support both button clicks and keyboard submission

Code Quality Improvements

• Improved error handling and validation flow
• Removed redundant args.Cancel = false assignments
• Better separation of concerns with dedicated async methods for form submission
• Added proper imports for keyboard event handling (KeyRoutedEventArgs, VirtualKey)

Implementation Details

• The hero illustrations use Canvas elements with Path, Ellipse, and Rectangle shapes to create scalable vector graphics
• Gradient brushes are used extensively for visual depth and modern aesthetics
• Keyboard navigation is implemented consistently across both dialogs with proper event handling and focus management

https://claude.ai/code/session_011B1M6UVeo4yUX3zNHBxQ2P