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]

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<SyncIndicatorTheme>()!.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<FilterTheme>()!.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<SyncIndicatorTheme>()!.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(
+        child: Icon( Icons.search,
-        padding: EdgeInsets.all(8),
-        child: Image.asset(
-          'assets/images/mini_search_icon.png',
           color: Theme.of(context).extension<FilterTheme>()!.iconColor,
+          //size: 24
         ),
-      ),
     );
 
     return TextField(
@@ -379,8 +376,8 @@ class _SearchWidget extends StatelessWidget {
       decoration: InputDecoration(
           filled: true,
           contentPadding: EdgeInsets.only(
-            top: 10,
+            top: 8,
-            left: 10,
+            left: 8,
           ),
           fillColor: Theme.of(context).extension<SyncIndicatorTheme>()!.syncedBackgroundColor,
           hintText: S.of(context).search,

lib/src/screens/dashboard/pages/balance_page.dart

@@ -118,12 +118,7 @@ class CryptoBalanceWidget extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return GestureDetector(
+      return SingleChildScrollView(
-      onLongPress: () => dashboardViewModel.balanceViewModel.isReversing =
-          !dashboardViewModel.balanceViewModel.isReversing,
-      onLongPressUp: () => dashboardViewModel.balanceViewModel.isReversing =
-          !dashboardViewModel.balanceViewModel.isReversing,
-      child: 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(
+                    Column(
-                    behavior: HitTestBehavior.opaque,
-                    onTap: hasAdditionalBalance
-                        ? () => _showBalanceDescription(
-                            context, S.of(context).available_balance_description)
-                        : null,
-                    child: Column(
                       crossAxisAlignment: CrossAxisAlignment.start,
                       children: [
-                        Row(
+                        GestureDetector(
-                          children: [
+                            behavior: HitTestBehavior.opaque,
-                            Semantics(
+                            onTap: hasAdditionalBalance
-                              hint: 'Double tap to see more information',
+                                ? () => _showBalanceDescription(
-                              container: true,
+                                context, S.of(context).available_balance_description)
-                              child: Text('${availableBalanceLabel}',
+                                : null,
-                                  style: TextStyle(
+                            child: Row(
-                                      fontSize: 12,
+                              children: [
-                                      fontFamily: 'Lato',
+                                Semantics(
-                                      fontWeight: FontWeight.w400,
+                                  hint: 'Double tap to see more information',
-                                      color: Theme.of(context)
+                                  container: true,
-                                          .extension<BalancePageTheme>()!
+                                  child: Text('${availableBalanceLabel}',
-                                          .labelTextColor,
+                                      style: TextStyle(
-                                      height: 1)),
+                                          fontSize: 12,
+                                          fontFamily: 'Lato',
+                                          fontWeight: FontWeight.w400,
+                                          color: Theme.of(context)
+                                              .extension<BalancePageTheme>()!
+                                              .labelTextColor,
+                                          height: 1)),
+                                ),
+                                if (hasAdditionalBalance)
+                                  Padding(
+                                    padding: const EdgeInsets.symmetric(horizontal: 4),
+                                    child: Icon(Icons.help_outline,
+                                        size: 16,
+                                        color: Theme.of(context)
+                                            .extension<BalancePageTheme>()!
+                                            .labelTextColor),
+                                  ),
+                              ],
                             ),
-                            if (hasAdditionalBalance)
-                              Padding(
-                                padding: const EdgeInsets.symmetric(horizontal: 4),
-                                child: Icon(Icons.help_outline,
-                                    size: 16,
-                                    color: Theme.of(context)
-                                        .extension<BalancePageTheme>()!
-                                        .labelTextColor),
-                              ),
-                          ],
                         ),
                         SizedBox(height: 6),
                         AutoSizeText(availableBalance,
@@ -667,9 +664,10 @@ class BalanceRowWidget extends StatelessWidget {
                                   fontWeight: FontWeight.w500,
                                   color: Theme.of(context).extension<BalancePageTheme>()!.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 {
                             ),
                           ],
                         ),
+                        ),
                     ],
                   ),
                 ),

lib/src/screens/new_wallet/new_wallet_page.dart

@@ -347,7 +347,7 @@ class _WalletNameFormState extends State<WalletNameForm> {
                     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,

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<WalletListTheme>()!.restoreWalletButtonTextColor

lib/src/screens/receive/widgets/header_tile.dart

@@ -31,7 +31,7 @@ class _HeaderTileState extends State<HeaderTile> {
 
   @override
   Widget build(BuildContext context) {
-    final searchIcon = Image.asset("assets/images/search_icon.png",
+    final searchIcon = Icon( Icons.search,
         color: Theme.of(context).extension<ReceivePageTheme>()!.iconsColor);
 
     return Container(

lib/src/screens/wallet_list/wallet_list_page.dart

@@ -334,6 +334,26 @@ class WalletListBodyState extends State<WalletListBody> {
             padding: const EdgeInsets.all(24),
             child: Column(
               children: <Widget>[
+                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<CakeTextTheme>()!.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<WalletListBody> {
                   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<CakeTextTheme>()!.buttonTextColor,
-                )
               ],
             ),
           ),

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<PickerTheme>()!.searchHintColor),
-        prefixIcon: Image.asset("assets/images/search_icon.png",
+        prefixIcon: Icon( Icons.search,
-            color: Theme.of(context).extension<PickerTheme>()!.searchIconColor),
+            color: Theme.of(context).primaryColor),
         filled: true,
         fillColor: Theme.of(context).extension<PickerTheme>()!.searchBackgroundFillColor,
         alignLabelWithHint: false,

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';