Fix UI issues with navigation bar and button positioning #108
Conversation
WalkthroughThe changes adjust UI elements in multiple widgets: the vertical position of the AddOrderButton now accounts for device safe area insets, the order list item visually distinguishes fixed orders by displaying sats instead of a percentage, the AddOrderButton menu arrow icons are conditionally shown and styled, and the bottom navigation bar is wrapped in a SafeArea for proper device compatibility. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant HomeScreen
participant AddOrderButton
participant MediaQuery
participant OrderListItem
User->>HomeScreen: Opens Home Screen
HomeScreen->>MediaQuery: Get bottom padding
HomeScreen->>AddOrderButton: Render with calculated bottom offset
User->>AddOrderButton: Taps menu
AddOrderButton->>AddOrderButton: Toggle menu state
AddOrderButton->>AddOrderButton: Show conditional arrow icons
User->>OrderListItem: Views order
OrderListItem->>OrderListItem: Check if fixed order
alt Fixed order
OrderListItem->>OrderListItem: Display sats amount
else Market order
OrderListItem->>OrderListItem: Display premium percentage
end
Assessment against linked issues
Possibly related PRs
Suggested reviewers
Poem
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
lib/shared/widgets/add_order_button.dart (1)
74-129: Addresses Material You theme override with explicit color styling.The arrow icons are now explicitly colored black (
color: Colors.black) to prevent the Material You theme from overriding their appearance in release builds, directly addressing the PR objective. The conditional display ensures icons only appear when the menu is open.Consider a cleaner approach by using custom button widgets instead of
ElevatedButton.iconwith emptySizedBoxicons:-ElevatedButton.icon( +ElevatedButton( onPressed: _isMenuOpen ? () => _navigateToCreateOrder(context, 'buy') : null, style: ElevatedButton.styleFrom( backgroundColor: AppTheme.buyColor, foregroundColor: Colors.black, shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(50), ), padding: const EdgeInsets.symmetric( horizontal: 16, vertical: 10), ), - icon: const SizedBox(width: 16, height: 16), - label: const Text('BUY', - style: TextStyle(fontWeight: FontWeight.bold)), + child: Row( + mainAxisSize: MainAxisSize.min, + children: [ + if (_isMenuOpen) + const Icon(Icons.arrow_downward, size: 16, color: Colors.black), + if (_isMenuOpen) const SizedBox(width: 8), + const Text('BUY', style: TextStyle(fontWeight: FontWeight.bold)), + ], + ), ),This would eliminate the need for the Stack wrapper while maintaining the same functionality.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
lib/features/home/screens/home_screen.dart(1 hunks)lib/features/home/widgets/order_list_item.dart(2 hunks)lib/shared/widgets/add_order_button.dart(2 hunks)lib/shared/widgets/bottom_nav_bar.dart(2 hunks)
🔇 Additional comments (4)
lib/features/home/screens/home_screen.dart (1)
82-82: Excellent implementation of responsive button positioning.The dynamic calculation correctly accounts for device safe areas by using
MediaQuery.of(context).viewPadding.bottom, ensuring the AddOrderButton maintains consistent 16px spacing from the BottomNavBar across all devices, including those with Android gestural navigation bars.lib/shared/widgets/bottom_nav_bar.dart (1)
21-22: Perfect SafeArea implementation for device compatibility.Wrapping the BottomNavBar in
SafeAreawithtop: falsecorrectly prevents overlap with Android gestural navigation bars while allowing the top edge to extend to the screen boundary. This addresses the core issue mentioned in the PR objectives.lib/features/home/widgets/order_list_item.dart (2)
20-22: Clear logic for distinguishing order types.The
isFixedOrderdetermination correctly identifies orders with specific sats amounts, enabling better visual differentiation in the UI.
115-189: Enhanced order display improves user experience.The restructured layout effectively distinguishes between fixed sats orders and market price orders with percentage indicators. The conditional display provides clearer information to users about order types.
Note: While this is a valuable UI improvement, it appears to be separate from the main PR objectives focused on navigation bar and button positioning fixes.
This comment was marked as duplicate.
This comment was marked as duplicate.
Sorry, something went wrong.
3 participants
Fixes #104
Changes:
SafeArea implementation: Added SafeArea to BottomNavBar to prevent overlap with Android gestural navigation bar
Button positioning: Updated AddOrderButton positioning to maintain consistent 16px distance from BottomNavBar across all devices
Icon color fix: Set explicit black color for BUY/SELL arrow icons to prevent Material You theme override in release builds
Summary by CodeRabbit
New Features
Improvements