Skip to content

Commit

Permalink
UI Enhancements (#1824)
Browse files Browse the repository at this point in the history
* 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]
  • Loading branch information
tuxpizza authored Dec 12, 2024
1 parent 5abd524 commit ad34caa
Show file tree
Hide file tree
Showing 8 changed files with 91 additions and 80 deletions.
19 changes: 8 additions & 11 deletions lib/src/screens/cake_pay/cards/cake_pay_cards_page.dart
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand 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,
))),
);
Expand All @@ -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(
Expand Down Expand Up @@ -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(
Expand All @@ -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,
Expand Down
91 changes: 48 additions & 43 deletions lib/src/screens/dashboard/pages/balance_page.dart
Original file line number Diff line number Diff line change
Expand Up @@ -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: [
Expand Down Expand Up @@ -459,7 +454,6 @@ class CryptoBalanceWidget extends StatelessWidget {
}),
],
),
),
);
}

Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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(
Expand Down Expand Up @@ -712,6 +710,7 @@ class BalanceRowWidget extends StatelessWidget {
),
],
),
),
if (frozenBalance.isNotEmpty)
GestureDetector(
behavior: HitTestBehavior.opaque,
Expand Down Expand Up @@ -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),
Expand Down Expand Up @@ -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(
Expand Down Expand Up @@ -881,7 +883,9 @@ class BalanceRowWidget extends StatelessWidget {
],
),
if (hasSecondAvailableBalance)
Row(
GestureDetector(
onTap: () => dashboardViewModel.balanceViewModel.switchBalanceValue(),
child: Row(
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
Expand Down Expand Up @@ -953,6 +957,7 @@ class BalanceRowWidget extends StatelessWidget {
),
],
),
),
],
),
),
Expand Down
2 changes: 1 addition & 1 deletion lib/src/screens/new_wallet/new_wallet_page.dart
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
2 changes: 1 addition & 1 deletion lib/src/screens/new_wallet/widgets/select_button.dart
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion lib/src/screens/receive/widgets/header_tile.dart
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down
40 changes: 20 additions & 20 deletions lib/src/screens/wallet_list/wallet_list_page.dart
Original file line number Diff line number Diff line change
Expand Up @@ -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: () {
Expand Down Expand Up @@ -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,
)
],
),
),
Expand Down
4 changes: 2 additions & 2 deletions lib/src/widgets/search_bar_widget.dart
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
11 changes: 10 additions & 1 deletion lib/view_model/dashboard/balance_view_model.dart
Original file line number Diff line number Diff line change
Expand Up @@ -287,7 +287,7 @@ abstract class BalanceViewModelBase with Store {
BalanceRecord(
availableBalance: '---',
additionalBalance: '---',
frozenBalance: '---',
frozenBalance: '',
secondAvailableBalance: '---',
secondAdditionalBalance: '---',
fiatAdditionalBalance: isFiatDisabled ? '' : '---',
Expand Down Expand Up @@ -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';
Expand Down

0 comments on commit ad34caa

Please sign in to comment.