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]
2024-12-22 11:39:22 +00:00 · 2024-12-12 03:24:45 -05:00 · 2024-12-12 03:24:45 -05:00 · ad34caa5be
commit ad34caa5be
parent 5abd524af3
8 changed files with 91 additions and 80 deletions
--- 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<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(
-        padding: EdgeInsets.all(8),
-        child: Image.asset(
-          'assets/images/mini_search_icon.png',
+        child: Icon( Icons.search,
          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,
-            left: 10,
+            top: 8,
+            left: 8,
          ),
          fillColor: Theme.of(context).extension<SyncIndicatorTheme>()!.syncedBackgroundColor,
          hintText: S.of(context).search,
--- 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<BalancePageTheme>()!
-                                          .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<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 {
                            ),
                          ],
                        ),
+                        ),
                    ],
                  ),
                ),
--- 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<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,
--- 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<WalletListTheme>()!.restoreWalletButtonTextColor
--- 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<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(
--- 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<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,
-                )
              ],
            ),
          ),
--- 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<PickerTheme>()!.searchHintColor),
-        prefixIcon: Image.asset("assets/images/search_icon.png",
-            color: Theme.of(context).extension<PickerTheme>()!.searchIconColor),
+        prefixIcon: Icon( Icons.search,
+            color: Theme.of(context).primaryColor),
        filled: true,
        fillColor: Theme.of(context).extension<PickerTheme>()!.searchBackgroundFillColor,
        alignLabelWithHint: false,
--- 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';