From ad34caa5be322dcfe81aebc2eefb405322cc347b Mon Sep 17 00:00:00 2001 From: tuxsudo Date: Thu, 12 Dec 2024 03:24:45 -0500 Subject: [PATCH] UI Enhancements (#1824) * Fix button color * Unify search icon * Update select button colors * Modify tap to hide for balance card * Modify tap to hide constants * Modify hidden balance behaviour * Add tap to hide to second value * Make tap to hide persistent * Change to switchBalanceValue function * Fix MWEB card spacing [skip ci] * Swap buttons on wallets screen [skip ci] --- .../cake_pay/cards/cake_pay_cards_page.dart | 19 ++-- .../screens/dashboard/pages/balance_page.dart | 91 ++++++++++--------- .../screens/new_wallet/new_wallet_page.dart | 2 +- .../new_wallet/widgets/select_button.dart | 2 +- .../screens/receive/widgets/header_tile.dart | 2 +- .../screens/wallet_list/wallet_list_page.dart | 40 ++++---- lib/src/widgets/search_bar_widget.dart | 4 +- .../dashboard/balance_view_model.dart | 11 ++- 8 files changed, 91 insertions(+), 80 deletions(-) diff --git a/lib/src/screens/cake_pay/cards/cake_pay_cards_page.dart b/lib/src/screens/cake_pay/cards/cake_pay_cards_page.dart index f2958ee314..450fa52818 100644 --- a/lib/src/screens/cake_pay/cards/cake_pay_cards_page.dart +++ b/lib/src/screens/cake_pay/cards/cake_pay_cards_page.dart @@ -116,7 +116,7 @@ class CakePayCardsPage extends BasePage { }, child: Container( width: 32, - padding: EdgeInsets.all(8), + padding: EdgeInsets.only(top: 7, bottom: 7), decoration: BoxDecoration( color: Theme.of(context).extension()!.syncedBackgroundColor, border: Border.all( @@ -125,7 +125,7 @@ class CakePayCardsPage extends BasePage { borderRadius: BorderRadius.circular(10), ), child: Image.asset( - 'assets/images/filter.png', + 'assets/images/filter_icon.png', color: Theme.of(context).extension()!.iconColor, ))), ); @@ -141,14 +141,14 @@ class CakePayCardsPage extends BasePage { } }, child: Container( - padding: EdgeInsets.symmetric(horizontal: 6), + padding: EdgeInsets.symmetric(horizontal: 8), decoration: BoxDecoration( color: Theme.of(context).extension()!.syncedBackgroundColor, border: Border.all(color: Colors.transparent), borderRadius: BorderRadius.circular(10), ), child: Container( - margin: EdgeInsets.symmetric(vertical: 2), + margin: EdgeInsets.symmetric(vertical: 4), child: Row( children: [ Image.asset( @@ -363,13 +363,10 @@ class _SearchWidget extends StatelessWidget { @override Widget build(BuildContext context) { final searchIcon = ExcludeSemantics( - child: Padding( - padding: EdgeInsets.all(8), - child: Image.asset( - 'assets/images/mini_search_icon.png', + child: Icon( Icons.search, color: Theme.of(context).extension()!.iconColor, + //size: 24 ), - ), ); return TextField( @@ -379,8 +376,8 @@ class _SearchWidget extends StatelessWidget { decoration: InputDecoration( filled: true, contentPadding: EdgeInsets.only( - top: 10, - left: 10, + top: 8, + left: 8, ), fillColor: Theme.of(context).extension()!.syncedBackgroundColor, hintText: S.of(context).search, diff --git a/lib/src/screens/dashboard/pages/balance_page.dart b/lib/src/screens/dashboard/pages/balance_page.dart index b16a7b090b..46c01254a7 100644 --- a/lib/src/screens/dashboard/pages/balance_page.dart +++ b/lib/src/screens/dashboard/pages/balance_page.dart @@ -118,12 +118,7 @@ class CryptoBalanceWidget extends StatelessWidget { @override Widget build(BuildContext context) { - return GestureDetector( - onLongPress: () => dashboardViewModel.balanceViewModel.isReversing = - !dashboardViewModel.balanceViewModel.isReversing, - onLongPressUp: () => dashboardViewModel.balanceViewModel.isReversing = - !dashboardViewModel.balanceViewModel.isReversing, - child: SingleChildScrollView( + return SingleChildScrollView( child: Column( crossAxisAlignment: CrossAxisAlignment.center, children: [ @@ -459,7 +454,6 @@ class CryptoBalanceWidget extends StatelessWidget { }), ], ), - ), ); } @@ -597,44 +591,47 @@ class BalanceRowWidget extends StatelessWidget { child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ - Row( + GestureDetector( + onTap: () => dashboardViewModel.balanceViewModel.switchBalanceValue(), + child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, crossAxisAlignment: CrossAxisAlignment.center, children: [ - GestureDetector( - behavior: HitTestBehavior.opaque, - onTap: hasAdditionalBalance - ? () => _showBalanceDescription( - context, S.of(context).available_balance_description) - : null, - child: Column( + Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ - Row( - children: [ - Semantics( - hint: 'Double tap to see more information', - container: true, - child: Text('${availableBalanceLabel}', - style: TextStyle( - fontSize: 12, - fontFamily: 'Lato', - fontWeight: FontWeight.w400, - color: Theme.of(context) - .extension()! - .labelTextColor, - height: 1)), + GestureDetector( + behavior: HitTestBehavior.opaque, + onTap: hasAdditionalBalance + ? () => _showBalanceDescription( + context, S.of(context).available_balance_description) + : null, + child: Row( + children: [ + Semantics( + hint: 'Double tap to see more information', + container: true, + child: Text('${availableBalanceLabel}', + style: TextStyle( + fontSize: 12, + fontFamily: 'Lato', + fontWeight: FontWeight.w400, + color: Theme.of(context) + .extension()! + .labelTextColor, + height: 1)), + ), + if (hasAdditionalBalance) + Padding( + padding: const EdgeInsets.symmetric(horizontal: 4), + child: Icon(Icons.help_outline, + size: 16, + color: Theme.of(context) + .extension()! + .labelTextColor), + ), + ], ), - if (hasAdditionalBalance) - Padding( - padding: const EdgeInsets.symmetric(horizontal: 4), - child: Icon(Icons.help_outline, - size: 16, - color: Theme.of(context) - .extension()! - .labelTextColor), - ), - ], ), SizedBox(height: 6), AutoSizeText(availableBalance, @@ -667,9 +664,10 @@ class BalanceRowWidget extends StatelessWidget { fontWeight: FontWeight.w500, color: Theme.of(context).extension()!.textColor, height: 1)), + ], ), - ), + SizedBox( width: min(MediaQuery.of(context).size.width * 0.2, 100), child: Center( @@ -712,6 +710,7 @@ class BalanceRowWidget extends StatelessWidget { ), ], ), + ), if (frozenBalance.isNotEmpty) GestureDetector( behavior: HitTestBehavior.opaque, @@ -778,7 +777,9 @@ class BalanceRowWidget extends StatelessWidget { ), ), if (hasAdditionalBalance) - Column( + GestureDetector( + onTap: () => dashboardViewModel.balanceViewModel.switchBalanceValue(), + child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ SizedBox(height: 24), @@ -821,12 +822,13 @@ class BalanceRowWidget extends StatelessWidget { ), ], ), + ), ], ), ), ), if (hasSecondAdditionalBalance || hasSecondAvailableBalance) ...[ - SizedBox(height: 16), + SizedBox(height: 10), Container( margin: const EdgeInsets.only(left: 16, right: 16), decoration: BoxDecoration( @@ -881,7 +883,9 @@ class BalanceRowWidget extends StatelessWidget { ], ), if (hasSecondAvailableBalance) - Row( + GestureDetector( + onTap: () => dashboardViewModel.balanceViewModel.switchBalanceValue(), + child: Row( children: [ Column( crossAxisAlignment: CrossAxisAlignment.start, @@ -953,6 +957,7 @@ class BalanceRowWidget extends StatelessWidget { ), ], ), + ), ], ), ), diff --git a/lib/src/screens/new_wallet/new_wallet_page.dart b/lib/src/screens/new_wallet/new_wallet_page.dart index 387904df0d..e63a01f61c 100644 --- a/lib/src/screens/new_wallet/new_wallet_page.dart +++ b/lib/src/screens/new_wallet/new_wallet_page.dart @@ -347,7 +347,7 @@ class _WalletNameFormState extends State { key: ValueKey('new_wallet_page_confirm_button_key'), onPressed: _confirmForm, text: S.of(context).seed_language_next, - color: Colors.green, + color: Theme.of(context).primaryColor, textColor: Colors.white, isLoading: _walletNewVM.state is IsExecutingState, isDisabled: _walletNewVM.name.isEmpty, diff --git a/lib/src/screens/new_wallet/widgets/select_button.dart b/lib/src/screens/new_wallet/widgets/select_button.dart index 87015b89e9..6cca53cf5b 100644 --- a/lib/src/screens/new_wallet/widgets/select_button.dart +++ b/lib/src/screens/new_wallet/widgets/select_button.dart @@ -40,7 +40,7 @@ class SelectButton extends StatelessWidget { @override Widget build(BuildContext context) { - final backgroundColor = color ?? (isSelected ? Colors.green : Theme.of(context).cardColor); + final backgroundColor = color ?? (isSelected ? Theme.of(context).primaryColor : Theme.of(context).cardColor); final effectiveTextColor = textColor ?? (isSelected ? Theme.of(context).extension()!.restoreWalletButtonTextColor diff --git a/lib/src/screens/receive/widgets/header_tile.dart b/lib/src/screens/receive/widgets/header_tile.dart index dc48db89de..68148bbee2 100644 --- a/lib/src/screens/receive/widgets/header_tile.dart +++ b/lib/src/screens/receive/widgets/header_tile.dart @@ -31,7 +31,7 @@ class _HeaderTileState extends State { @override Widget build(BuildContext context) { - final searchIcon = Image.asset("assets/images/search_icon.png", + final searchIcon = Icon( Icons.search, color: Theme.of(context).extension()!.iconsColor); return Container( diff --git a/lib/src/screens/wallet_list/wallet_list_page.dart b/lib/src/screens/wallet_list/wallet_list_page.dart index f7e6515de4..63f28d285c 100644 --- a/lib/src/screens/wallet_list/wallet_list_page.dart +++ b/lib/src/screens/wallet_list/wallet_list_page.dart @@ -334,6 +334,26 @@ class WalletListBodyState extends State { padding: const EdgeInsets.all(24), child: Column( children: [ + PrimaryImageButton( + key: ValueKey('wallet_list_page_restore_wallet_button_key'), + onPressed: () { + if (widget.walletListViewModel.shouldRequireTOTP2FAForCreatingNewWallets) { + widget.authService.authenticateAction( + context, + route: Routes.restoreOptions, + arguments: false, + conditionToDetermineIfToUse2FA: widget.walletListViewModel.shouldRequireTOTP2FAForCreatingNewWallets, + ); + } else { + Navigator.of(context).pushNamed(Routes.restoreOptions, arguments: false); + } + }, + image: restoreWalletImage, + text: S.of(context).wallet_list_restore_wallet, + color: Theme.of(context).cardColor, + textColor: Theme.of(context).extension()!.buttonTextColor, + ), + SizedBox(height: 10.0), PrimaryImageButton( key: ValueKey('wallet_list_page_create_new_wallet_button_key'), onPressed: () { @@ -373,26 +393,6 @@ class WalletListBodyState extends State { color: Theme.of(context).primaryColor, textColor: Colors.white, ), - SizedBox(height: 10.0), - PrimaryImageButton( - key: ValueKey('wallet_list_page_restore_wallet_button_key'), - onPressed: () { - if (widget.walletListViewModel.shouldRequireTOTP2FAForCreatingNewWallets) { - widget.authService.authenticateAction( - context, - route: Routes.restoreOptions, - arguments: false, - conditionToDetermineIfToUse2FA: widget.walletListViewModel.shouldRequireTOTP2FAForCreatingNewWallets, - ); - } else { - Navigator.of(context).pushNamed(Routes.restoreOptions, arguments: false); - } - }, - image: restoreWalletImage, - text: S.of(context).wallet_list_restore_wallet, - color: Theme.of(context).cardColor, - textColor: Theme.of(context).extension()!.buttonTextColor, - ) ], ), ), diff --git a/lib/src/widgets/search_bar_widget.dart b/lib/src/widgets/search_bar_widget.dart index 6c7c14db28..e67c793ccb 100644 --- a/lib/src/widgets/search_bar_widget.dart +++ b/lib/src/widgets/search_bar_widget.dart @@ -22,8 +22,8 @@ class SearchBarWidget extends StatelessWidget { decoration: InputDecoration( hintText: hintText ?? S.of(context).search, hintStyle: TextStyle(color: Theme.of(context).extension()!.searchHintColor), - prefixIcon: Image.asset("assets/images/search_icon.png", - color: Theme.of(context).extension()!.searchIconColor), + prefixIcon: Icon( Icons.search, + color: Theme.of(context).primaryColor), filled: true, fillColor: Theme.of(context).extension()!.searchBackgroundFillColor, alignLabelWithHint: false, diff --git a/lib/view_model/dashboard/balance_view_model.dart b/lib/view_model/dashboard/balance_view_model.dart index 20dca292c6..075cf6b75e 100644 --- a/lib/view_model/dashboard/balance_view_model.dart +++ b/lib/view_model/dashboard/balance_view_model.dart @@ -287,7 +287,7 @@ abstract class BalanceViewModelBase with Store { BalanceRecord( availableBalance: '---', additionalBalance: '---', - frozenBalance: '---', + frozenBalance: '', secondAvailableBalance: '---', secondAdditionalBalance: '---', fiatAdditionalBalance: isFiatDisabled ? '' : '---', @@ -488,6 +488,15 @@ abstract class BalanceViewModelBase with Store { isShowCard = cardDisplayStatus; } + @action + void switchBalanceValue() { + if (settingsStore.balanceDisplayMode == BalanceDisplayMode.displayableBalance) { + settingsStore.balanceDisplayMode = BalanceDisplayMode.hiddenBalance; + } else { + settingsStore.balanceDisplayMode = BalanceDisplayMode.displayableBalance; + } + } + String _getFiatBalance({required double price, String? cryptoAmount}) { if (cryptoAmount == null || cryptoAmount.isEmpty || double.tryParse(cryptoAmount) == null) { return '0.00';