Fix new session dialog dark mode styling - #433

Claude finished @steipete's task —— View job

📋 Summary

This PR successfully improves the dark mode styling consistency in the new session dialog by softening borders with 50% opacity and standardizing color tokens throughout the component.

Tasks:

• Read the changed file session-create-form.ts
• Analyze the changes for code quality and consistency
• Check alignment with PR description
• Provide comprehensive review feedback

✅ Positive Aspects

• Consistent opacity usage: All borders now use /50 opacity for a cohesive, softer appearance
• Standardized color tokens: Text colors properly use text-text-muted and text-text instead of mixed variations
• Dark theme dropdown fix: The terminal title mode select now correctly uses bg-bg-tertiary and text-text for proper dark mode rendering
• Improved hover states: Better contrast and visual feedback with appropriate dark theme colors
• Comprehensive coverage: All UI elements in the dialog have been updated for consistency

🔍 Areas for Improvement

Code Quality

• The code changes maintain good quality and readability
• Follows existing patterns and naming conventions
• No DRY violations or code duplication issues

Potential Issues

• No bugs or logic errors detected
• All edge cases appear to be handled appropriately
• Error handling remains unchanged and adequate

Performance

• These are purely CSS class changes with no performance impact
• No risk of unnecessary re-renders or memory issues

Security

• No security concerns - changes are limited to UI styling

Testing

• The PR includes a comprehensive test plan that covers all changed elements
• Consider adding automated visual regression tests for dark mode styling to catch future regressions

💡 Suggestions

1. CSS Variable Consideration: While the current approach works well, consider if these opacity values (/50, /30) should be defined as CSS variables for easier theme customization:

   --border-opacity-soft: 0.5;
   --border-opacity-subtle: 0.3;

2. Accessibility: Ensure the 50% opacity borders maintain sufficient contrast ratios for accessibility standards, especially for users with visual impairments.

3. Documentation: Consider documenting the dark mode color token conventions in a style guide to ensure consistency across future components.

🎯 Priority Items

No critical issues found. This PR is ready to merge as-is. The suggestions above are optional enhancements for future consideration.

The changes perfectly align with the PR description and successfully achieve the goal of improving dark mode consistency in the new session dialog.

Reviewed commit: 06b341a
Files changed: 1

🔍 Code Quality Report

This comment is automatically updated with linting results from CI.

Node.js Biome Formatting ✅ Status: Passed

Node.js Biome Linting ✅ Status: Passed

Node.js Test Coverage ✅ Status: Passed

Client Coverage:
• Lines: 43.58%
• Functions: 52.14%
• Branches: 72.05%
• Statements: 43.58%

Server Coverage:
• Lines: 13.2%
• Functions: 35.83%
• Branches: 74.58%
• Statements: 13.2%

Mac Formatting (SwiftFormat) ❌ Status: Failed

Running SwiftFormat...
(lint mode - no files will be changed.)
Reading config file at /Users/administrator/amantos-ai/actions-runner/_work/vibetunnel/vibetunnel/mac/.swiftformat
/Users/administrator/amantos-ai/actions-runner/_work/vibetunnel/vibetunnel/mac/VibeTunnel/VibeTunnelApp.swift:129:1: error: (modifierOrder) Use consistent ordering for member modifiers.
SwiftFormat completed in 0.12s.
Source input did not pass lint check.
1/107 files require formatting, 1 file skipped.

Mac Linting (SwiftLint) ✅ Status: Passed