@samitouri / QOSAMI-cakewallet / commits / ad34caa5b

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]

tuxsudo committed Dec 12, 2024 at 03:24 UTC ad34caa5be322dcfe81aebc2eefb405322cc347b
8 files changed +91 -80
lib/src/screens/cake_pay/cards/cake_pay_cards_page.dart
+8 -11
@@ -116,7 +116,7 @@ class CakePayCardsPage extends BasePage {
116 },
117 child: Container(
118 width: 32,
119 - padding: EdgeInsets.all(8),
119 + padding: EdgeInsets.only(top: 7, bottom: 7),
120 decoration: BoxDecoration(
121 color: Theme.of(context).extension<SyncIndicatorTheme>()!.syncedBackgroundColor,
122 border: Border.all(
@@ -125,7 +125,7 @@ class CakePayCardsPage extends BasePage {
125 borderRadius: BorderRadius.circular(10),
126 ),
127 child: Image.asset(
128 - 'assets/images/filter.png',
128 + 'assets/images/filter_icon.png',
129 color: Theme.of(context).extension<FilterTheme>()!.iconColor,
130 ))),
131 );
@@ -141,14 +141,14 @@ class CakePayCardsPage extends BasePage {
141 }
142 },
143 child: Container(
144 - padding: EdgeInsets.symmetric(horizontal: 6),
144 + padding: EdgeInsets.symmetric(horizontal: 8),
145 decoration: BoxDecoration(
146 color: Theme.of(context).extension<SyncIndicatorTheme>()!.syncedBackgroundColor,
147 border: Border.all(color: Colors.transparent),
148 borderRadius: BorderRadius.circular(10),
149 ),
150 child: Container(
151 - margin: EdgeInsets.symmetric(vertical: 2),
151 + margin: EdgeInsets.symmetric(vertical: 4),
152 child: Row(
153 children: [
154 Image.asset(
@@ -363,13 +363,10 @@ class _SearchWidget extends StatelessWidget {
363 @override
364 Widget build(BuildContext context) {
365 final searchIcon = ExcludeSemantics(
366 - child: Padding(
367 - padding: EdgeInsets.all(8),
368 - child: Image.asset(
369 - 'assets/images/mini_search_icon.png',
366 + child: Icon( Icons.search,
367 color: Theme.of(context).extension<FilterTheme>()!.iconColor,
368 + //size: 24
369 ),
372 - ),
370 );
371
372 return TextField(
@@ -379,8 +376,8 @@ class _SearchWidget extends StatelessWidget {
376 decoration: InputDecoration(
377 filled: true,
378 contentPadding: EdgeInsets.only(
382 - top: 10,
383 - left: 10,
379 + top: 8,
380 + left: 8,
381 ),
382 fillColor: Theme.of(context).extension<SyncIndicatorTheme>()!.syncedBackgroundColor,
383 hintText: S.of(context).search,
lib/src/screens/dashboard/pages/balance_page.dart
+48 -43
@@ -118,12 +118,7 @@ class CryptoBalanceWidget extends StatelessWidget {
118
119 @override
120 Widget build(BuildContext context) {
121 - return GestureDetector(
122 - onLongPress: () => dashboardViewModel.balanceViewModel.isReversing =
123 - !dashboardViewModel.balanceViewModel.isReversing,
124 - onLongPressUp: () => dashboardViewModel.balanceViewModel.isReversing =
125 - !dashboardViewModel.balanceViewModel.isReversing,
126 - child: SingleChildScrollView(
121 + return SingleChildScrollView(
122 child: Column(
123 crossAxisAlignment: CrossAxisAlignment.center,
124 children: [
@@ -459,7 +454,6 @@ class CryptoBalanceWidget extends StatelessWidget {
454 }),
455 ],
456 ),
462 - ),
457 );
458 }
459
@@ -597,44 +591,47 @@ class BalanceRowWidget extends StatelessWidget {
591 child: Column(
592 crossAxisAlignment: CrossAxisAlignment.start,
593 children: [
600 - Row(
594 + GestureDetector(
595 + onTap: () => dashboardViewModel.balanceViewModel.switchBalanceValue(),
596 + child: Row(
597 mainAxisAlignment: MainAxisAlignment.spaceBetween,
598 crossAxisAlignment: CrossAxisAlignment.center,
599 children: [
604 - GestureDetector(
605 - behavior: HitTestBehavior.opaque,
606 - onTap: hasAdditionalBalance
607 - ? () => _showBalanceDescription(
608 - context, S.of(context).available_balance_description)
609 - : null,
610 - child: Column(
600 + Column(
601 crossAxisAlignment: CrossAxisAlignment.start,
602 children: [
613 - Row(
614 - children: [
615 - Semantics(
616 - hint: 'Double tap to see more information',
617 - container: true,
618 - child: Text('${availableBalanceLabel}',
619 - style: TextStyle(
620 - fontSize: 12,
621 - fontFamily: 'Lato',
622 - fontWeight: FontWeight.w400,
623 - color: Theme.of(context)
624 - .extension<BalancePageTheme>()!
625 - .labelTextColor,
626 - height: 1)),
603 + GestureDetector(
604 + behavior: HitTestBehavior.opaque,
605 + onTap: hasAdditionalBalance
606 + ? () => _showBalanceDescription(
607 + context, S.of(context).available_balance_description)
608 + : null,
609 + child: Row(
610 + children: [
611 + Semantics(
612 + hint: 'Double tap to see more information',
613 + container: true,
614 + child: Text('${availableBalanceLabel}',
615 + style: TextStyle(
616 + fontSize: 12,
617 + fontFamily: 'Lato',
618 + fontWeight: FontWeight.w400,
619 + color: Theme.of(context)
620 + .extension<BalancePageTheme>()!
621 + .labelTextColor,
622 + height: 1)),
623 + ),
624 + if (hasAdditionalBalance)
625 + Padding(
626 + padding: const EdgeInsets.symmetric(horizontal: 4),
627 + child: Icon(Icons.help_outline,
628 + size: 16,
629 + color: Theme.of(context)
630 + .extension<BalancePageTheme>()!
631 + .labelTextColor),
632 + ),
633 + ],
634 ),
628 - if (hasAdditionalBalance)
629 - Padding(
630 - padding: const EdgeInsets.symmetric(horizontal: 4),
631 - child: Icon(Icons.help_outline,
632 - size: 16,
633 - color: Theme.of(context)
634 - .extension<BalancePageTheme>()!
635 - .labelTextColor),
636 - ),
637 - ],
635 ),
636 SizedBox(height: 6),
637 AutoSizeText(availableBalance,
@@ -667,9 +664,10 @@ class BalanceRowWidget extends StatelessWidget {
664 fontWeight: FontWeight.w500,
665 color: Theme.of(context).extension<BalancePageTheme>()!.textColor,
666 height: 1)),
667 +
668 ],
669 ),
672 - ),
670 +
671 SizedBox(
672 width: min(MediaQuery.of(context).size.width * 0.2, 100),
673 child: Center(
@@ -712,6 +710,7 @@ class BalanceRowWidget extends StatelessWidget {
710 ),
711 ],
712 ),
713 + ),
714 if (frozenBalance.isNotEmpty)
715 GestureDetector(
716 behavior: HitTestBehavior.opaque,
@@ -778,7 +777,9 @@ class BalanceRowWidget extends StatelessWidget {
777 ),
778 ),
779 if (hasAdditionalBalance)
781 - Column(
780 + GestureDetector(
781 + onTap: () => dashboardViewModel.balanceViewModel.switchBalanceValue(),
782 + child: Column(
783 crossAxisAlignment: CrossAxisAlignment.start,
784 children: [
785 SizedBox(height: 24),
@@ -821,12 +822,13 @@ class BalanceRowWidget extends StatelessWidget {
822 ),
823 ],
824 ),
825 + ),
826 ],
827 ),
828 ),
829 ),
830 if (hasSecondAdditionalBalance || hasSecondAvailableBalance) ...[
829 - SizedBox(height: 16),
831 + SizedBox(height: 10),
832 Container(
833 margin: const EdgeInsets.only(left: 16, right: 16),
834 decoration: BoxDecoration(
@@ -881,7 +883,9 @@ class BalanceRowWidget extends StatelessWidget {
883 ],
884 ),
885 if (hasSecondAvailableBalance)
884 - Row(
886 + GestureDetector(
887 + onTap: () => dashboardViewModel.balanceViewModel.switchBalanceValue(),
888 + child: Row(
889 children: [
890 Column(
891 crossAxisAlignment: CrossAxisAlignment.start,
@@ -953,6 +957,7 @@ class BalanceRowWidget extends StatelessWidget {
957 ),
958 ],
959 ),
960 + ),
961 ],
962 ),
963 ),
lib/src/screens/new_wallet/new_wallet_page.dart
+1 -1
@@ -347,7 +347,7 @@ class _WalletNameFormState extends State<WalletNameForm> {
347 key: ValueKey('new_wallet_page_confirm_button_key'),
348 onPressed: _confirmForm,
349 text: S.of(context).seed_language_next,
350 - color: Colors.green,
350 + color: Theme.of(context).primaryColor,
351 textColor: Colors.white,
352 isLoading: _walletNewVM.state is IsExecutingState,
353 isDisabled: _walletNewVM.name.isEmpty,
lib/src/screens/new_wallet/widgets/select_button.dart
+1 -1
@@ -40,7 +40,7 @@ class SelectButton extends StatelessWidget {
40
41 @override
42 Widget build(BuildContext context) {
43 - final backgroundColor = color ?? (isSelected ? Colors.green : Theme.of(context).cardColor);
43 + final backgroundColor = color ?? (isSelected ? Theme.of(context).primaryColor : Theme.of(context).cardColor);
44 final effectiveTextColor = textColor ??
45 (isSelected
46 ? Theme.of(context).extension<WalletListTheme>()!.restoreWalletButtonTextColor
lib/src/screens/receive/widgets/header_tile.dart
+1 -1
@@ -31,7 +31,7 @@ class _HeaderTileState extends State<HeaderTile> {
31
32 @override
33 Widget build(BuildContext context) {
34 - final searchIcon = Image.asset("assets/images/search_icon.png",
34 + final searchIcon = Icon( Icons.search,
35 color: Theme.of(context).extension<ReceivePageTheme>()!.iconsColor);
36
37 return Container(
lib/src/screens/wallet_list/wallet_list_page.dart
+20 -20
@@ -334,6 +334,26 @@ class WalletListBodyState extends State<WalletListBody> {
334 padding: const EdgeInsets.all(24),
335 child: Column(
336 children: <Widget>[
337 + PrimaryImageButton(
338 + key: ValueKey('wallet_list_page_restore_wallet_button_key'),
339 + onPressed: () {
340 + if (widget.walletListViewModel.shouldRequireTOTP2FAForCreatingNewWallets) {
341 + widget.authService.authenticateAction(
342 + context,
343 + route: Routes.restoreOptions,
344 + arguments: false,
345 + conditionToDetermineIfToUse2FA: widget.walletListViewModel.shouldRequireTOTP2FAForCreatingNewWallets,
346 + );
347 + } else {
348 + Navigator.of(context).pushNamed(Routes.restoreOptions, arguments: false);
349 + }
350 + },
351 + image: restoreWalletImage,
352 + text: S.of(context).wallet_list_restore_wallet,
353 + color: Theme.of(context).cardColor,
354 + textColor: Theme.of(context).extension<CakeTextTheme>()!.buttonTextColor,
355 + ),
356 + SizedBox(height: 10.0),
357 PrimaryImageButton(
358 key: ValueKey('wallet_list_page_create_new_wallet_button_key'),
359 onPressed: () {
@@ -373,26 +393,6 @@ class WalletListBodyState extends State<WalletListBody> {
393 color: Theme.of(context).primaryColor,
394 textColor: Colors.white,
395 ),
376 - SizedBox(height: 10.0),
377 - PrimaryImageButton(
378 - key: ValueKey('wallet_list_page_restore_wallet_button_key'),
379 - onPressed: () {
380 - if (widget.walletListViewModel.shouldRequireTOTP2FAForCreatingNewWallets) {
381 - widget.authService.authenticateAction(
382 - context,
383 - route: Routes.restoreOptions,
384 - arguments: false,
385 - conditionToDetermineIfToUse2FA: widget.walletListViewModel.shouldRequireTOTP2FAForCreatingNewWallets,
386 - );
387 - } else {
388 - Navigator.of(context).pushNamed(Routes.restoreOptions, arguments: false);
389 - }
390 - },
391 - image: restoreWalletImage,
392 - text: S.of(context).wallet_list_restore_wallet,
393 - color: Theme.of(context).cardColor,
394 - textColor: Theme.of(context).extension<CakeTextTheme>()!.buttonTextColor,
395 - )
396 ],
397 ),
398 ),
lib/src/widgets/search_bar_widget.dart
+2 -2
@@ -22,8 +22,8 @@ class SearchBarWidget extends StatelessWidget {
22 decoration: InputDecoration(
23 hintText: hintText ?? S.of(context).search,
24 hintStyle: TextStyle(color: Theme.of(context).extension<PickerTheme>()!.searchHintColor),
25 - prefixIcon: Image.asset("assets/images/search_icon.png",
26 - color: Theme.of(context).extension<PickerTheme>()!.searchIconColor),
25 + prefixIcon: Icon( Icons.search,
26 + color: Theme.of(context).primaryColor),
27 filled: true,
28 fillColor: Theme.of(context).extension<PickerTheme>()!.searchBackgroundFillColor,
29 alignLabelWithHint: false,
lib/view_model/dashboard/balance_view_model.dart
+10 -1
@@ -287,7 +287,7 @@ abstract class BalanceViewModelBase with Store {
287 BalanceRecord(
288 availableBalance: '---',
289 additionalBalance: '---',
290 - frozenBalance: '---',
290 + frozenBalance: '',
291 secondAvailableBalance: '---',
292 secondAdditionalBalance: '---',
293 fiatAdditionalBalance: isFiatDisabled ? '' : '---',
@@ -488,6 +488,15 @@ abstract class BalanceViewModelBase with Store {
488 isShowCard = cardDisplayStatus;
489 }
490
491 + @action
492 + void switchBalanceValue() {
493 + if (settingsStore.balanceDisplayMode == BalanceDisplayMode.displayableBalance) {
494 + settingsStore.balanceDisplayMode = BalanceDisplayMode.hiddenBalance;
495 + } else {
496 + settingsStore.balanceDisplayMode = BalanceDisplayMode.displayableBalance;
497 + }
498 + }
499 +
500 String _getFiatBalance({required double price, String? cryptoAmount}) {
501 if (cryptoAmount == null || cryptoAmount.isEmpty || double.tryParse(cryptoAmount) == null) {
502 return '0.00';