From f8aa54181e531bf2e77b0d29ca4091a2f1c08ff7 Mon Sep 17 00:00:00 2001 From: gabaldon Date: Mon, 21 Oct 2024 18:31:40 +0200 Subject: [PATCH] fix(style): adjust responsive --- integration_test/e2e_show_node_stats.dart | 5 +- integration_test/e2e_update_theme_test.dart | 4 +- integration_test/e2e_update_wallet_test.dart | 14 +- ios/Podfile.lock | 12 +- lib/auto_updater_overlay.dart | 4 +- lib/constants.dart | 2 + .../create_wallet/build_wallet_card.dart | 9 +- .../create_wallet/confirm_mnemonic_card.dart | 1 - .../create_wallet/generate_mnemonic_card.dart | 6 +- .../create_wallet/import_mnemonic_card.dart | 1 - .../dashboard/view/dashboard_screen.dart | 7 - lib/screens/preferences/general_config.dart | 2 +- lib/theme/dark_theme.dart | 31 ++- lib/theme/extended_theme.dart | 250 +++++++++--------- lib/theme/light_theme.dart | 29 +- lib/util/panel.dart | 22 +- lib/widgets/PaddedButton.dart | 4 +- lib/widgets/address_list.dart | 5 +- lib/widgets/alert_dialog.dart | 4 +- lib/widgets/clickable_box.dart | 2 +- lib/widgets/container_background.dart | 2 +- lib/widgets/info_element.dart | 13 +- lib/widgets/layouts/layout.dart | 24 +- lib/widgets/select.dart | 4 +- lib/widgets/select_wallet_box.dart | 42 ++- lib/widgets/snack_bars.dart | 10 +- lib/widgets/step_bar.dart | 2 +- lib/widgets/top_navigation.dart | 4 +- lib/widgets/transaction_details.dart | 10 +- lib/widgets/transaction_item.dart | 9 +- lib/widgets/wallet_type_label.dart | 3 +- .../modals/general_error_modal.dart | 2 +- .../modals/unlock_keychain_modal.dart | 6 +- 33 files changed, 281 insertions(+), 264 deletions(-) diff --git a/integration_test/e2e_show_node_stats.dart b/integration_test/e2e_show_node_stats.dart index bbf8db772..50f122be0 100644 --- a/integration_test/e2e_show_node_stats.dart +++ b/integration_test/e2e_show_node_stats.dart @@ -78,14 +78,13 @@ Future e2eShowNodeStatsTest(WidgetTester tester) async { final listFinder = find .byType(Scrollable) .first; // take first because it is the wallet list scroll - await tester.scrollUntilVisible( - find.text("wit174la8pevl74hczcpfepgmt036zkmjen4hu8zzs"), -100.0, + await tester.scrollUntilVisible(find.text("wit174l...4hu8zzs"), -100.0, scrollable: listFinder); await tester.pumpAndSettle(); /// Select HD wallet from the wallets list - await tapButton(tester, "wit174la8pevl74hczcpfepgmt036zkmjen4hu8zzs"); + await tapButton(tester, "wit174l...4hu8zzs"); await tester.pumpAndSettle(); diff --git a/integration_test/e2e_update_theme_test.dart b/integration_test/e2e_update_theme_test.dart index 247010b1b..a876d06fe 100644 --- a/integration_test/e2e_update_theme_test.dart +++ b/integration_test/e2e_update_theme_test.dart @@ -41,7 +41,7 @@ Future e2eUpdateThemeColorTest(WidgetTester tester) async { tester.widget(find.text(localization.darkMode)).style!.color; // Avoid switch to password authentication if password is not typed by the user - expect(textColor, WitnetPallet.opacityWhite); + expect(textColor, WitnetPallet.lightGrey); // Tap switch to change theme color await tapButton(tester, Switch, index: 0); @@ -51,6 +51,6 @@ Future e2eUpdateThemeColorTest(WidgetTester tester) async { final textColor2 = tester.widget(find.text(localization.darkMode)).style!.color; // Avoid switch to password authentication if password is not typed by the user - expect(textColor2, WitnetPallet.darkGrey); + expect(textColor2, WitnetPallet.mediumGrey); await teardownTest(); } diff --git a/integration_test/e2e_update_wallet_test.dart b/integration_test/e2e_update_wallet_test.dart index 9d996246b..aec33728e 100644 --- a/integration_test/e2e_update_wallet_test.dart +++ b/integration_test/e2e_update_wallet_test.dart @@ -84,18 +84,10 @@ Future e2eUpdateCurrentWalletTest(WidgetTester tester) async { /// and brings up the wallet list. await tapButton(tester, PaddedButton, index: 0); - /// Select another wallet from the wallet list - final listFinder = find - .byType(Scrollable) - .first; // take first because it is the wallet list scroll - await tester.scrollUntilVisible( - find.text("wit174la8pevl74hczcpfepgmt036zkmjen4hu8zzs"), -100.0, - scrollable: listFinder); - await tester.pumpAndSettle(); /// Select Node wallet from the wallets list - await tapButton(tester, "wit1vzm7xrguwf5uzjx72l65stgj3npfn292tya50u"); + await tapButton(tester, "wit1vzm...2tya50u"); await tester.pumpAndSettle(); @@ -107,7 +99,7 @@ Future e2eUpdateCurrentWalletTest(WidgetTester tester) async { await tester.pumpAndSettle(); /// Verify the imported wallet and the current address - expectLater(currentWallet3!.masterAccount!.address, - "wit1vzm7xrguwf5uzjx72l65stgj3npfn292tya50u"); + expectLater(currentWallet3!.masterAccount!.address.cropMiddle(18), + "wit1vzm...2tya50u"); await teardownTest(); } diff --git a/ios/Podfile.lock b/ios/Podfile.lock index 6c6adfbb7..bf951ca06 100644 --- a/ios/Podfile.lock +++ b/ios/Podfile.lock @@ -58,7 +58,7 @@ PODS: - nanopb/encode (= 2.30910.0) - nanopb/decode (2.30910.0) - nanopb/encode (2.30910.0) - - open_file (0.0.1): + - open_file_ios (0.0.1): - Flutter - path_provider_foundation (0.0.1): - Flutter @@ -80,7 +80,7 @@ DEPENDENCIES: - integration_test (from `.symlinks/plugins/integration_test/ios`) - local_auth_darwin (from `.symlinks/plugins/local_auth_darwin/darwin`) - mobile_scanner (from `.symlinks/plugins/mobile_scanner/ios`) - - open_file (from `.symlinks/plugins/open_file/ios`) + - open_file_ios (from `.symlinks/plugins/open_file_ios/ios`) - path_provider_foundation (from `.symlinks/plugins/path_provider_foundation/darwin`) - permission_handler_apple (from `.symlinks/plugins/permission_handler_apple/ios`) - qr_code_scanner (from `.symlinks/plugins/qr_code_scanner/ios`) @@ -112,8 +112,8 @@ EXTERNAL SOURCES: :path: ".symlinks/plugins/local_auth_darwin/darwin" mobile_scanner: :path: ".symlinks/plugins/mobile_scanner/ios" - open_file: - :path: ".symlinks/plugins/open_file/ios" + open_file_ios: + :path: ".symlinks/plugins/open_file_ios/ios" path_provider_foundation: :path: ".symlinks/plugins/path_provider_foundation/darwin" permission_handler_apple: @@ -133,7 +133,7 @@ SPEC CHECKSUMS: GoogleUtilities: ea963c370a38a8069cc5f7ba4ca849a60b6d7d15 GoogleUtilitiesComponents: 679b2c881db3b615a2777504623df6122dd20afe GTMSessionFetcher: 5aea5ba6bd522a239e236100971f10cb71b96ab6 - integration_test: ce0a3ffa1de96d1a89ca0ac26fca7ea18a749ef4 + integration_test: 252f60fa39af5e17c3aa9899d35d908a0721b573 local_auth_darwin: 66e40372f1c29f383a314c738c7446e2f7fdadc3 MLImage: 1824212150da33ef225fbd3dc49f184cf611046c MLKitBarcodeScanning: 10ca0845a6d15f2f6e911f682a1998b68b973e8b @@ -142,7 +142,7 @@ SPEC CHECKSUMS: mobile_scanner: 8564358885a9253c43f822435b70f9345c87224f MTBBarcodeScanner: f453b33c4b7dfe545d8c6484ed744d55671788cb nanopb: 438bc412db1928dac798aa6fd75726007be04262 - open_file: 02eb5cb6b21264bd3a696876f5afbfb7ca4f4b7d + open_file_ios: 461db5853723763573e140de3193656f91990d9e path_provider_foundation: 2b6b4c569c0fb62ec74538f866245ac84301af46 permission_handler_apple: 9878588469a2b0d0fc1e048d9f43605f92e6cec2 PromisesObjC: f5707f49cb48b9636751c5b2e7d227e43fba9f47 diff --git a/lib/auto_updater_overlay.dart b/lib/auto_updater_overlay.dart index 820813286..a63cdc6e1 100644 --- a/lib/auto_updater_overlay.dart +++ b/lib/auto_updater_overlay.dart @@ -3,6 +3,7 @@ import 'dart:io'; import 'package:http/http.dart' as http; import 'package:flutter/material.dart'; import 'package:my_wit_wallet/constants.dart'; +import 'package:my_wit_wallet/theme/extended_theme.dart'; import 'package:my_wit_wallet/util/get_localization.dart'; import 'package:my_wit_wallet/widgets/PaddedButton.dart'; import 'package:updat/updat.dart'; @@ -138,6 +139,7 @@ void customDialog({ required void Function() dismissUpdate, }) { final theme = Theme.of(context); + final extendedTheme = Theme.of(context).extension()!; showDialog( context: context, builder: (context) => AlertDialog( @@ -145,7 +147,7 @@ void customDialog({ surfaceTintColor: Colors.transparent, scrollable: true, shape: RoundedRectangleBorder( - borderRadius: BorderRadius.all(Radius.circular(8))), + borderRadius: BorderRadius.all(extendedTheme.borderRadius!)), title: Flex( direction: Axis.vertical, children: [ diff --git a/lib/constants.dart b/lib/constants.dart index c458c357b..306807542 100644 --- a/lib/constants.dart +++ b/lib/constants.dart @@ -160,6 +160,8 @@ const String LATEST_RELEASE_URL = const String DOWNLOAD_BASE_URL = "https://github.com/witnet/my-wit-wallet/releases/download"; +const double BORDER_RADIUS = 32; + const List CUSTOM_ICON_NAMES = [ 'create-or-import-wallet', 'general-error', diff --git a/lib/screens/create_wallet/build_wallet_card.dart b/lib/screens/create_wallet/build_wallet_card.dart index 97aa785c2..790d91667 100644 --- a/lib/screens/create_wallet/build_wallet_card.dart +++ b/lib/screens/create_wallet/build_wallet_card.dart @@ -6,6 +6,7 @@ import 'package:flutter_bloc/flutter_bloc.dart'; import 'package:flutter_spinkit/flutter_spinkit.dart'; import 'package:my_wit_wallet/bloc/crypto/crypto_bloc.dart'; import 'package:my_wit_wallet/theme/extended_theme.dart'; +import 'package:my_wit_wallet/util/extensions/string_extensions.dart'; import 'package:my_wit_wallet/util/get_localization.dart'; import 'package:my_wit_wallet/screens/create_wallet/bloc/api_create_wallet.dart'; import 'package:my_wit_wallet/screens/create_wallet/bloc/create_wallet_bloc.dart'; @@ -327,10 +328,10 @@ class BuildWalletCardState extends State Expanded( flex: 1, child: Text( - state.message, - overflow: TextOverflow.ellipsis, - style: theme.textTheme.bodyMedium, - )), + state.message.contains('wit1') + ? state.message.cropMiddle(18) + : state.message, + style: extendedTheme.monoMediumText)), ], ), ], diff --git a/lib/screens/create_wallet/confirm_mnemonic_card.dart b/lib/screens/create_wallet/confirm_mnemonic_card.dart index afd6c4986..cda9b11f1 100644 --- a/lib/screens/create_wallet/confirm_mnemonic_card.dart +++ b/lib/screens/create_wallet/confirm_mnemonic_card.dart @@ -6,7 +6,6 @@ import 'package:my_wit_wallet/screens/create_wallet/bloc/api_create_wallet.dart' import 'package:my_wit_wallet/screens/create_wallet/bloc/create_wallet_bloc.dart'; import 'package:my_wit_wallet/shared/locator.dart'; import 'package:my_wit_wallet/screens/create_wallet/nav_action.dart'; -import 'package:my_wit_wallet/theme/extended_theme.dart'; typedef void VoidCallback(NavAction? value); diff --git a/lib/screens/create_wallet/generate_mnemonic_card.dart b/lib/screens/create_wallet/generate_mnemonic_card.dart index 04ee25bfa..5e1a23595 100644 --- a/lib/screens/create_wallet/generate_mnemonic_card.dart +++ b/lib/screens/create_wallet/generate_mnemonic_card.dart @@ -57,21 +57,21 @@ class GenerateMnemonicCardState extends State children: [ Text( localization.generateMnemonic01(_radioWordCount), - style: theme.textTheme.bodyMedium, + style: theme.textTheme.bodyLarge, ), SizedBox( height: 8, ), Text( localization.generateMnemonic02, - style: theme.textTheme.bodyMedium, + style: theme.textTheme.bodyLarge, ), SizedBox( height: 8, ), Text( localization.generateMnemonic03, - style: theme.textTheme.bodyMedium, + style: theme.textTheme.bodyLarge, ), ], ); diff --git a/lib/screens/create_wallet/import_mnemonic_card.dart b/lib/screens/create_wallet/import_mnemonic_card.dart index 74940a2df..30e46b43f 100644 --- a/lib/screens/create_wallet/import_mnemonic_card.dart +++ b/lib/screens/create_wallet/import_mnemonic_card.dart @@ -1,4 +1,3 @@ -import 'package:my_wit_wallet/theme/extended_theme.dart'; import 'package:my_wit_wallet/util/get_localization.dart'; import 'package:flutter/material.dart'; import 'package:flutter_bloc/flutter_bloc.dart'; diff --git a/lib/screens/dashboard/view/dashboard_screen.dart b/lib/screens/dashboard/view/dashboard_screen.dart index d1fe3ae28..bce289e81 100644 --- a/lib/screens/dashboard/view/dashboard_screen.dart +++ b/lib/screens/dashboard/view/dashboard_screen.dart @@ -36,7 +36,6 @@ class DashboardScreenState extends State String? currentAddress; Wallet? currentWallet; Account? currentAccount; - late AnimationController _loadingController; late Timer syncTimer; ApiDatabase database = Locator.instance.get(); ScrollController scrollController = ScrollController(keepScrollOffset: true); @@ -47,11 +46,6 @@ class DashboardScreenState extends State @override void initState() { super.initState(); - _loadingController = AnimationController( - vsync: this, - duration: const Duration(milliseconds: 1200), - ); - _loadingController.forward(); _setWallet(); _setAccount(); String walletId = database.walletStorage.currentWallet.id; @@ -71,7 +65,6 @@ class DashboardScreenState extends State @override void dispose() { - _loadingController.dispose(); if (explorerBlock != null && explorerBlock!.syncWalletSubscription != null) { explorerBlock!.syncWalletSubscription!.cancel(); diff --git a/lib/screens/preferences/general_config.dart b/lib/screens/preferences/general_config.dart index 34152f225..3c4fb3b67 100644 --- a/lib/screens/preferences/general_config.dart +++ b/lib/screens/preferences/general_config.dart @@ -108,7 +108,7 @@ class GeneralConfigState extends State { return Container( alignment: Alignment.centerLeft, decoration: BoxDecoration( - borderRadius: BorderRadius.all(Radius.circular(24)), + borderRadius: BorderRadius.all(extendedTheme.borderRadius!), color: extendedTheme.backgroundBox, ), child: child); diff --git a/lib/theme/dark_theme.dart b/lib/theme/dark_theme.dart index 2f4dd859a..7d637f2ba 100644 --- a/lib/theme/dark_theme.dart +++ b/lib/theme/dark_theme.dart @@ -1,4 +1,5 @@ import 'package:flutter/material.dart'; +import 'package:my_wit_wallet/constants.dart'; import 'package:my_wit_wallet/screens/screen_transitions/no_transitions_builder.dart'; import 'package:flutter/foundation.dart' show kIsWeb; import 'colors.dart'; @@ -81,35 +82,35 @@ InputDecorationTheme inputDecorationTheme = InputDecorationTheme( enabledBorder: OutlineInputBorder( borderSide: BorderSide( color: WitnetPallet.darkGrey2, width: 1.0, style: BorderStyle.solid), - borderRadius: BorderRadius.circular(24), + borderRadius: BorderRadius.circular(BORDER_RADIUS), ), focusedBorder: OutlineInputBorder( borderSide: BorderSide( color: WitnetPallet.brightCyan, width: 2.0, style: BorderStyle.solid), - borderRadius: BorderRadius.circular(24), + borderRadius: BorderRadius.circular(BORDER_RADIUS), ), errorBorder: OutlineInputBorder( borderSide: BorderSide( color: WitnetPallet.brightRed, width: 1.0, style: BorderStyle.solid), - borderRadius: BorderRadius.circular(24), + borderRadius: BorderRadius.circular(BORDER_RADIUS), ), focusedErrorBorder: OutlineInputBorder( borderSide: BorderSide( color: WitnetPallet.brightRed, width: 1.0, style: BorderStyle.solid), - borderRadius: BorderRadius.circular(24), + borderRadius: BorderRadius.circular(BORDER_RADIUS), ), border: OutlineInputBorder( borderSide: BorderSide( color: WitnetPallet.opacityWhite, width: 1.0, style: BorderStyle.solid), - borderRadius: BorderRadius.circular(24), + borderRadius: BorderRadius.circular(BORDER_RADIUS), ), alignLabelWithHint: true, ); TooltipThemeData tooltipTheme = TooltipThemeData( margin: EdgeInsets.all(8), - padding: EdgeInsets.all(16), + padding: const EdgeInsets.only(left: 16, right: 16, top: 8, bottom: 8), decoration: BoxDecoration( - borderRadius: BorderRadius.circular(24), + borderRadius: BorderRadius.circular(BORDER_RADIUS), color: WitnetPallet.darkerGrey, ), textStyle: bodyRegular.copyWith(color: WitnetPallet.white, fontSize: 12)); @@ -117,20 +118,20 @@ TextButtonThemeData textButtonTheme = TextButtonThemeData( style: TextButton.styleFrom( foregroundColor: WitnetPallet.white, shape: RoundedRectangleBorder( - borderRadius: BorderRadius.all(Radius.circular(24))), + borderRadius: BorderRadius.all(Radius.circular(32))), tapTargetSize: MaterialTapTargetSize.shrinkWrap, textStyle: bodyRegular.copyWith(fontSize: 16), ), ); ElevatedButtonThemeData elevatedButtonTheme = ElevatedButtonThemeData( style: ElevatedButton.styleFrom( - padding: const EdgeInsets.all(16), + padding: const EdgeInsets.only(left: 16, right: 16, top: 8, bottom: 8), foregroundColor: WitnetPallet.black, backgroundColor: WitnetPallet.brightCyan, disabledForegroundColor: WitnetPallet.mediumGrey, disabledBackgroundColor: WitnetPallet.darkGrey2, shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular(24)), // background color + borderRadius: BorderRadius.circular(BORDER_RADIUS)), // background color textStyle: bodyRegular.copyWith(fontSize: 16), ), ); @@ -138,9 +139,10 @@ OutlinedButtonThemeData outlinedButtonTheme = OutlinedButtonThemeData( style: OutlinedButton.styleFrom( foregroundColor: WitnetPallet.white, disabledForegroundColor: Color.fromARGB(78, 240, 243, 245).withOpacity(0.38), - shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(24)), + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(BORDER_RADIUS)), side: BorderSide(width: 1, color: WitnetPallet.white), - padding: const EdgeInsets.all(16), + padding: const EdgeInsets.only(left: 16, right: 16, top: 8, bottom: 8), textStyle: bodyRegular.copyWith(fontSize: 16), )); CardTheme cardTheme = CardTheme( @@ -153,7 +155,8 @@ IconThemeData iconTheme = IconThemeData( size: 16, ); ButtonThemeData buttonThemeData = ButtonThemeData( - shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(24))); + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(BORDER_RADIUS))); IconThemeData primaryIconTheme = IconThemeData( color: WitnetPallet.opacityWhite, size: 24, @@ -176,7 +179,7 @@ Color getColorPrimary(Set states) { if (states.any(activeStates.contains)) { return WitnetPallet.brightCyan; } - return WitnetPallet.lightGrey; + return WitnetPallet.mediumGrey; } Color getColorSecondary(Set states) { diff --git a/lib/theme/extended_theme.dart b/lib/theme/extended_theme.dart index ef0ecc4e7..7ffef4f88 100644 --- a/lib/theme/extended_theme.dart +++ b/lib/theme/extended_theme.dart @@ -1,61 +1,62 @@ import 'package:flutter/material.dart'; +import 'package:my_wit_wallet/constants.dart'; import 'colors.dart'; @immutable class ExtendedTheme extends ThemeExtension { - const ExtendedTheme({ - required this.monoBoldText, - required this.monoLargeText, - required this.selectBackgroundColor, - required this.selectedTextColor, - required this.dropdownBackgroundColor, - required this.dropdownTextColor, - required this.navigationActiveButton, - required this.headerBackgroundColor, - required this.headerTextColor, - required this.headerActiveTextColor, - required this.panelBgColor, - required this.walletListBackgroundColor, - required this.walletActiveItemBackgroundColor, - required this.walletActiveItemBorderColor, - required this.walletItemBorderColor, - required this.inputIconColor, - required this.txBorderColor, - required this.txValuePositiveColor, - required this.txValueNegativeColor, - required this.stepBarActiveColor, - required this.stepBarActionableColor, - required this.stepBarColor, - required this.switchActiveBg, - required this.switchActiveFg, - required this.switchInactiveBg, - required this.switchInactiveFg, - required this.switchBorderColor, - required this.dialogBackground, - required this.copiedSnackbarBg, - required this.copiedSnackbarText, - required this.monoRegularText, - required this.spinnerColor, - required this.errorColor, - required this.activeClickableBoxBgColor, - required this.activeClickableBoxBorderColor, - required this.inactiveClickableBoxBgColor, - required this.inactiveClickableBoxBorderColor, - required this.numberPaginatiorSelectedBg, - required this.numberPaginatiorUnselectedFg, - required this.darkBgFocusColor, - required this.focusBg, - required this.hdWalletTypeBgColor, - required this.singleWalletBgColor, - required this.warningColor, - required this.backgroundBox, - required this.regularPanelText, - required this.mediumPanelText, - required this.navigationColor, - required this.navigationPointerActiveButton, - required this.monoSmallText, - required this.monoMediumText, - }); + const ExtendedTheme( + {required this.monoBoldText, + required this.monoLargeText, + required this.selectBackgroundColor, + required this.selectedTextColor, + required this.dropdownBackgroundColor, + required this.dropdownTextColor, + required this.navigationActiveButton, + required this.headerBackgroundColor, + required this.headerTextColor, + required this.headerActiveTextColor, + required this.panelBgColor, + required this.walletListBackgroundColor, + required this.walletActiveItemBackgroundColor, + required this.walletActiveItemBorderColor, + required this.walletItemBorderColor, + required this.inputIconColor, + required this.txBorderColor, + required this.txValuePositiveColor, + required this.txValueNegativeColor, + required this.stepBarActiveColor, + required this.stepBarActionableColor, + required this.stepBarColor, + required this.switchActiveBg, + required this.switchActiveFg, + required this.switchInactiveBg, + required this.switchInactiveFg, + required this.switchBorderColor, + required this.dialogBackground, + required this.copiedSnackbarBg, + required this.copiedSnackbarText, + required this.monoRegularText, + required this.spinnerColor, + required this.errorColor, + required this.activeClickableBoxBgColor, + required this.activeClickableBoxBorderColor, + required this.inactiveClickableBoxBgColor, + required this.inactiveClickableBoxBorderColor, + required this.numberPaginatiorSelectedBg, + required this.numberPaginatiorUnselectedFg, + required this.darkBgFocusColor, + required this.focusBg, + required this.hdWalletTypeBgColor, + required this.singleWalletBgColor, + required this.warningColor, + required this.backgroundBox, + required this.regularPanelText, + required this.mediumPanelText, + required this.navigationColor, + required this.navigationPointerActiveButton, + required this.monoSmallText, + required this.monoMediumText, + required this.borderRadius}); final Color? selectBackgroundColor; final Color? selectedTextColor; final Color? dropdownBackgroundColor; @@ -107,6 +108,7 @@ class ExtendedTheme extends ThemeExtension { final Color? navigationPointerActiveButton; final TextStyle? regularPanelText; final TextStyle? mediumPanelText; + final Radius? borderRadius; @override ExtendedTheme copyWith( {Color? selectBackgroundColor, @@ -156,77 +158,78 @@ class ExtendedTheme extends ThemeExtension { TextStyle? mediumPanelText, Color? navigationColor, Color? navigationPointerActiveButton, + Radius? borderRadius, r}) { return ExtendedTheme( - selectBackgroundColor: - selectBackgroundColor ?? this.selectBackgroundColor, - selectedTextColor: selectedTextColor ?? this.selectedTextColor, - dropdownBackgroundColor: - dropdownBackgroundColor ?? this.dropdownBackgroundColor, - dropdownTextColor: dropdownTextColor ?? this.dropdownTextColor, - navigationActiveButton: - navigationActiveButton ?? this.navigationActiveButton, - navigationPointerActiveButton: - navigationPointerActiveButton ?? this.navigationPointerActiveButton, - headerBackgroundColor: - headerBackgroundColor ?? this.headerBackgroundColor, - headerTextColor: headerTextColor ?? this.headerTextColor, - headerActiveTextColor: - headerActiveTextColor ?? this.headerActiveTextColor, - panelBgColor: panelBgColor ?? this.panelBgColor, - walletListBackgroundColor: - walletListBackgroundColor ?? this.walletListBackgroundColor, - walletActiveItemBackgroundColor: walletActiveItemBackgroundColor ?? - this.walletActiveItemBackgroundColor, - walletActiveItemBorderColor: - walletActiveItemBorderColor ?? this.walletActiveItemBorderColor, - walletItemBorderColor: - walletItemBorderColor ?? this.walletItemBorderColor, - inputIconColor: inputIconColor ?? this.inputIconColor, - txBorderColor: txBorderColor ?? this.txBorderColor, - txValueNegativeColor: txValueNegativeColor ?? this.txValueNegativeColor, - txValuePositiveColor: txValuePositiveColor ?? this.txValuePositiveColor, - stepBarActiveColor: stepBarActiveColor ?? this.stepBarActiveColor, - stepBarActionableColor: - stepBarActionableColor ?? this.stepBarActionableColor, - stepBarColor: stepBarColor ?? this.stepBarColor, - switchActiveBg: switchActiveBg ?? this.switchActiveBg, - switchActiveFg: switchActiveFg ?? this.switchActiveFg, - switchInactiveBg: switchInactiveBg ?? this.switchInactiveBg, - switchInactiveFg: switchInactiveFg ?? this.switchInactiveFg, - switchBorderColor: switchBorderColor ?? this.switchBorderColor, - spinnerColor: spinnerColor ?? this.spinnerColor, - errorColor: errorColor ?? this.errorColor, - activeClickableBoxBgColor: - activeClickableBoxBgColor ?? this.activeClickableBoxBgColor, - activeClickableBoxBorderColor: - activeClickableBoxBorderColor ?? this.activeClickableBoxBorderColor, - inactiveClickableBoxBgColor: - inactiveClickableBoxBgColor ?? this.inactiveClickableBoxBgColor, - inactiveClickableBoxBorderColor: inactiveClickableBoxBorderColor ?? - this.inactiveClickableBoxBorderColor, - dialogBackground: dialogBackground ?? this.dialogBackground, - copiedSnackbarBg: copiedSnackbarBg ?? copiedSnackbarBg, - copiedSnackbarText: copiedSnackbarText ?? copiedSnackbarText, - monoRegularText: monoRegularText ?? this.monoRegularText, - numberPaginatiorSelectedBg: - numberPaginatiorSelectedBg ?? this.numberPaginatiorSelectedBg, - numberPaginatiorUnselectedFg: - numberPaginatiorUnselectedFg ?? this.numberPaginatiorUnselectedFg, - darkBgFocusColor: darkBgFocusColor ?? this.darkBgFocusColor, - focusBg: focusBg ?? this.focusBg, - hdWalletTypeBgColor: hdWalletTypeBgColor ?? this.hdWalletTypeBgColor, - singleWalletBgColor: singleWalletBgColor ?? this.singleWalletBgColor, - warningColor: warningColor ?? this.warningColor, - backgroundBox: backgroundBox ?? this.backgroundBox, - regularPanelText: regularPanelText ?? this.regularPanelText, - mediumPanelText: mediumPanelText ?? this.mediumPanelText, - navigationColor: navigationColor ?? this.navigationColor, - monoBoldText: monoBoldText ?? this.monoBoldText, - monoLargeText: monoLargeText ?? this.monoLargeText, - monoSmallText: monoSmallText ?? this.monoSmallText, - monoMediumText: monoMediumText ?? this.monoMediumText, - ); + selectBackgroundColor: + selectBackgroundColor ?? this.selectBackgroundColor, + selectedTextColor: selectedTextColor ?? this.selectedTextColor, + dropdownBackgroundColor: + dropdownBackgroundColor ?? this.dropdownBackgroundColor, + dropdownTextColor: dropdownTextColor ?? this.dropdownTextColor, + navigationActiveButton: + navigationActiveButton ?? this.navigationActiveButton, + navigationPointerActiveButton: + navigationPointerActiveButton ?? this.navigationPointerActiveButton, + headerBackgroundColor: + headerBackgroundColor ?? this.headerBackgroundColor, + headerTextColor: headerTextColor ?? this.headerTextColor, + headerActiveTextColor: + headerActiveTextColor ?? this.headerActiveTextColor, + panelBgColor: panelBgColor ?? this.panelBgColor, + walletListBackgroundColor: + walletListBackgroundColor ?? this.walletListBackgroundColor, + walletActiveItemBackgroundColor: walletActiveItemBackgroundColor ?? + this.walletActiveItemBackgroundColor, + walletActiveItemBorderColor: + walletActiveItemBorderColor ?? this.walletActiveItemBorderColor, + walletItemBorderColor: + walletItemBorderColor ?? this.walletItemBorderColor, + inputIconColor: inputIconColor ?? this.inputIconColor, + txBorderColor: txBorderColor ?? this.txBorderColor, + txValueNegativeColor: txValueNegativeColor ?? this.txValueNegativeColor, + txValuePositiveColor: txValuePositiveColor ?? this.txValuePositiveColor, + stepBarActiveColor: stepBarActiveColor ?? this.stepBarActiveColor, + stepBarActionableColor: + stepBarActionableColor ?? this.stepBarActionableColor, + stepBarColor: stepBarColor ?? this.stepBarColor, + switchActiveBg: switchActiveBg ?? this.switchActiveBg, + switchActiveFg: switchActiveFg ?? this.switchActiveFg, + switchInactiveBg: switchInactiveBg ?? this.switchInactiveBg, + switchInactiveFg: switchInactiveFg ?? this.switchInactiveFg, + switchBorderColor: switchBorderColor ?? this.switchBorderColor, + spinnerColor: spinnerColor ?? this.spinnerColor, + errorColor: errorColor ?? this.errorColor, + activeClickableBoxBgColor: + activeClickableBoxBgColor ?? this.activeClickableBoxBgColor, + activeClickableBoxBorderColor: + activeClickableBoxBorderColor ?? this.activeClickableBoxBorderColor, + inactiveClickableBoxBgColor: + inactiveClickableBoxBgColor ?? this.inactiveClickableBoxBgColor, + inactiveClickableBoxBorderColor: inactiveClickableBoxBorderColor ?? + this.inactiveClickableBoxBorderColor, + dialogBackground: dialogBackground ?? this.dialogBackground, + copiedSnackbarBg: copiedSnackbarBg ?? copiedSnackbarBg, + copiedSnackbarText: copiedSnackbarText ?? copiedSnackbarText, + monoRegularText: monoRegularText ?? this.monoRegularText, + numberPaginatiorSelectedBg: + numberPaginatiorSelectedBg ?? this.numberPaginatiorSelectedBg, + numberPaginatiorUnselectedFg: + numberPaginatiorUnselectedFg ?? this.numberPaginatiorUnselectedFg, + darkBgFocusColor: darkBgFocusColor ?? this.darkBgFocusColor, + focusBg: focusBg ?? this.focusBg, + hdWalletTypeBgColor: hdWalletTypeBgColor ?? this.hdWalletTypeBgColor, + singleWalletBgColor: singleWalletBgColor ?? this.singleWalletBgColor, + warningColor: warningColor ?? this.warningColor, + backgroundBox: backgroundBox ?? this.backgroundBox, + regularPanelText: regularPanelText ?? this.regularPanelText, + mediumPanelText: mediumPanelText ?? this.mediumPanelText, + navigationColor: navigationColor ?? this.navigationColor, + monoBoldText: monoBoldText ?? this.monoBoldText, + monoLargeText: monoLargeText ?? this.monoLargeText, + monoSmallText: monoSmallText ?? this.monoSmallText, + monoMediumText: monoMediumText ?? this.monoMediumText, + borderRadius: borderRadius ?? this.borderRadius); } // Controls how the properties change on theme changes @@ -320,6 +323,7 @@ class ExtendedTheme extends ThemeExtension { monoLargeText: TextStyle.lerp(monoLargeText, other.monoLargeText, t), monoSmallText: TextStyle.lerp(monoSmallText, other.monoSmallText, t), monoMediumText: TextStyle.lerp(monoMediumText, other.monoMediumText, t), + borderRadius: Radius.lerp(borderRadius, borderRadius, t), ); } @@ -404,6 +408,7 @@ class ExtendedTheme extends ThemeExtension { fontWeight: FontWeight.w500, color: WitnetPallet.darkerGrey, fontSize: 16), + borderRadius: Radius.circular(BORDER_RADIUS), ); // the dark theme static const dark = ExtendedTheme( @@ -486,5 +491,6 @@ class ExtendedTheme extends ThemeExtension { fontWeight: FontWeight.w700, color: WitnetPallet.white, fontSize: 16), + borderRadius: Radius.circular(BORDER_RADIUS), ); } diff --git a/lib/theme/light_theme.dart b/lib/theme/light_theme.dart index 98f7ad83c..93b2d3f9d 100644 --- a/lib/theme/light_theme.dart +++ b/lib/theme/light_theme.dart @@ -1,4 +1,5 @@ import 'package:flutter/material.dart'; +import 'package:my_wit_wallet/constants.dart'; import 'package:my_wit_wallet/screens/screen_transitions/no_transitions_builder.dart'; import 'package:flutter/foundation.dart' show kIsWeb; import 'colors.dart'; @@ -70,7 +71,7 @@ InputDecorationTheme inputDecorationTheme = InputDecorationTheme( errorBorder: OutlineInputBorder( borderSide: BorderSide( color: WitnetPallet.darkRed, width: 1.0, style: BorderStyle.solid), - borderRadius: BorderRadius.circular(24), + borderRadius: BorderRadius.circular(BORDER_RADIUS), ), helperStyle: TextStyle(color: WitnetPallet.darkerGrey), helperMaxLines: 1, @@ -83,26 +84,26 @@ InputDecorationTheme inputDecorationTheme = InputDecorationTheme( labelStyle: bodyRegular.copyWith(fontSize: 24), isDense: true, isCollapsed: false, - contentPadding: EdgeInsets.all(16), + contentPadding: const EdgeInsets.all(16), enabledBorder: OutlineInputBorder( borderSide: BorderSide( color: WitnetPallet.black, width: 1.0, style: BorderStyle.solid), - borderRadius: BorderRadius.circular(24), + borderRadius: BorderRadius.circular(BORDER_RADIUS), ), focusedBorder: OutlineInputBorder( borderSide: BorderSide( color: WitnetPallet.brightCyan, width: 1.0, style: BorderStyle.solid), - borderRadius: BorderRadius.circular(24), + borderRadius: BorderRadius.circular(BORDER_RADIUS), ), focusedErrorBorder: OutlineInputBorder( borderSide: BorderSide( color: WitnetPallet.darkRed, width: 1.0, style: BorderStyle.solid), - borderRadius: BorderRadius.circular(24), + borderRadius: BorderRadius.circular(BORDER_RADIUS), ), border: OutlineInputBorder( borderSide: BorderSide( color: WitnetPallet.white, width: 1.0, style: BorderStyle.solid), - borderRadius: BorderRadius.circular(24), + borderRadius: BorderRadius.circular(BORDER_RADIUS), ), alignLabelWithHint: true, ); @@ -113,14 +114,14 @@ CardTheme cardTheme = CardTheme( ); ElevatedButtonThemeData elevatedButtonTheme = ElevatedButtonThemeData( style: ElevatedButton.styleFrom( - padding: const EdgeInsets.all(16), + padding: const EdgeInsets.only(left: 16, right: 16, top: 8, bottom: 8), backgroundColor: WitnetPallet.black, disabledForegroundColor: WitnetPallet.lightGrey, disabledBackgroundColor: WitnetPallet.lighterGrey, foregroundColor: WitnetPallet.lighterGrey, splashFactory: NoSplash.splashFactory, shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular(24)), // background color + borderRadius: BorderRadius.circular(BORDER_RADIUS)), // background color textStyle: bodyRegular.copyWith( fontSize: 16, color: WitnetPallet.white, @@ -132,7 +133,7 @@ TextButtonThemeData textButtonTheme = TextButtonThemeData( tapTargetSize: MaterialTapTargetSize.shrinkWrap, splashFactory: NoSplash.splashFactory, shape: RoundedRectangleBorder( - borderRadius: BorderRadius.all(Radius.circular(24))), + borderRadius: BorderRadius.all(Radius.circular(32))), textStyle: bodyRegular.copyWith( fontSize: 16, color: WitnetPallet.black, @@ -142,22 +143,24 @@ TextButtonThemeData textButtonTheme = TextButtonThemeData( TooltipThemeData tooltipTheme = TooltipThemeData( decoration: BoxDecoration( - borderRadius: BorderRadius.circular(24), + borderRadius: BorderRadius.circular(BORDER_RADIUS), color: WitnetPallet.lighterGrey, ), margin: EdgeInsets.all(8), - padding: EdgeInsets.all(16), + padding: const EdgeInsets.only(left: 16, right: 16, top: 8, bottom: 8), textStyle: bodyRegular.copyWith(color: WitnetPallet.black, fontSize: 12)); ProgressIndicatorThemeData progressIndicatorTheme = ProgressIndicatorThemeData( refreshBackgroundColor: WitnetPallet.brightCyanOpacity1); OutlinedButtonThemeData outlinedButtonTheme = OutlinedButtonThemeData( style: OutlinedButton.styleFrom( + backgroundColor: WitnetPallet.white, foregroundColor: WitnetPallet.black, disabledForegroundColor: Color.fromARGB(114, 2, 29, 48).withOpacity(0.38), - shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(24)), + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(BORDER_RADIUS)), side: BorderSide(width: 1, color: WitnetPallet.black), - padding: const EdgeInsets.all(16), + padding: const EdgeInsets.only(left: 16, right: 16, top: 8, bottom: 8), textStyle: bodyRegular.copyWith( fontSize: 16, fontWeight: FontWeight.bold, diff --git a/lib/util/panel.dart b/lib/util/panel.dart index c411e7ba1..fc7d11065 100644 --- a/lib/util/panel.dart +++ b/lib/util/panel.dart @@ -1,7 +1,9 @@ import 'package:flutter/material.dart'; -import 'package:my_wit_wallet/widgets/layouts/layout.dart'; import 'package:my_wit_wallet/widgets/wallet_list.dart'; import 'package:my_wit_wallet/globals.dart' as globals; +import 'package:sliding_up_panel/sliding_up_panel.dart'; + +PanelController panelController = PanelController(); class PanelUtils { Widget panelContent = WalletList(); @@ -27,6 +29,22 @@ class PanelUtils { } } + PanelController getPanelController() { + return panelController; + } + + bool isAttached() { + return panelController.isAttached; + } + + bool isOpen() { + return panelController.isPanelOpen; + } + + bool isClose() { + return panelController.isPanelClosed; + } + void open({required Widget content}) { // FocusScope.of(context).unfocus(); setContent(content); @@ -39,7 +57,7 @@ class PanelUtils { } void close({Widget? content}) { - if (panelController.isPanelOpen) { + if (isAttached() && panelController.isPanelOpen) { Widget defaultContent = WalletList(); setContent(content ?? defaultContent); panelController.close(); diff --git a/lib/widgets/PaddedButton.dart b/lib/widgets/PaddedButton.dart index c16ffff3f..4c4067d7f 100644 --- a/lib/widgets/PaddedButton.dart +++ b/lib/widgets/PaddedButton.dart @@ -111,8 +111,8 @@ class PaddedButton extends StatelessWidget { backgroundColor: color != null ? color : null, shape: RoundedRectangleBorder( borderRadius: BorderRadius.only( - topRight: Radius.circular(24), - bottomRight: Radius.circular(24), + topRight: extendedTheme.borderRadius!, + bottomRight: extendedTheme.borderRadius!, ))), child: isLoading ? buildCircularProgress(context, theme) : child, onPressed: enabled ? onPressed : null, diff --git a/lib/widgets/address_list.dart b/lib/widgets/address_list.dart index dccef0303..edfdaaa9b 100644 --- a/lib/widgets/address_list.dart +++ b/lib/widgets/address_list.dart @@ -69,6 +69,7 @@ class AddressListState extends State { return Text( '${account.balance.availableNanoWit.standardizeWitUnits().formatWithCommaSeparator()} ${WIT_UNIT[WitUnit.Wit]}', textAlign: TextAlign.end, + overflow: TextOverflow.ellipsis, style: textStyle!.copyWith(fontFamily: 'Almarai')); } }); @@ -106,10 +107,10 @@ class AddressListState extends State { child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ - Expanded( + Padding( + padding: EdgeInsets.only(right: 8), child: Text( account.address.cropMiddle(18), - overflow: TextOverflow.ellipsis, style: textStyle, ), ), diff --git a/lib/widgets/alert_dialog.dart b/lib/widgets/alert_dialog.dart index 108d2098d..4f2584a5d 100644 --- a/lib/widgets/alert_dialog.dart +++ b/lib/widgets/alert_dialog.dart @@ -1,5 +1,6 @@ import 'package:flutter/material.dart'; import 'package:my_wit_wallet/theme/colors.dart'; +import 'package:my_wit_wallet/theme/extended_theme.dart'; buildAlertDialog({ required BuildContext context, @@ -11,6 +12,7 @@ buildAlertDialog({ bool closable = true, }) { final theme = Theme.of(context); + final extendedTheme = theme.extension()!; return Future.delayed( Duration.zero, () => showDialog( @@ -25,7 +27,7 @@ buildAlertDialog({ backgroundColor: theme.colorScheme.surface, surfaceTintColor: theme.colorScheme.surface, shape: RoundedRectangleBorder( - borderRadius: BorderRadius.all(Radius.circular(24))), + borderRadius: BorderRadius.all(extendedTheme.borderRadius!)), icon: icon != null ? Icon(icon, size: 24, color: color ?? WitnetPallet.brightCyan) diff --git a/lib/widgets/clickable_box.dart b/lib/widgets/clickable_box.dart index e15119cc7..9e772fce2 100644 --- a/lib/widgets/clickable_box.dart +++ b/lib/widgets/clickable_box.dart @@ -88,7 +88,7 @@ class ClickableBox extends StatelessWidget { padding: EdgeInsets.only(top: 14, bottom: 14, left: 16, right: 16), decoration: BoxDecoration( color: localTheme(extendedTheme)[ClickableBoxTheme.BgColor], - borderRadius: BorderRadius.all(Radius.circular(24)), + borderRadius: BorderRadius.all(extendedTheme.borderRadius!), border: Border.all( color: localTheme(extendedTheme)[ClickableBoxTheme.BorderColor]!, width: 1, diff --git a/lib/widgets/container_background.dart b/lib/widgets/container_background.dart index 2b4f9ecd7..9c376437b 100644 --- a/lib/widgets/container_background.dart +++ b/lib/widgets/container_background.dart @@ -17,7 +17,7 @@ class ContainerBackground extends StatelessWidget { margin: EdgeInsets.only(top: marginTop ?? 8), width: double.infinity, decoration: BoxDecoration( - borderRadius: BorderRadius.circular(24), + borderRadius: BorderRadius.all(extendedTheme.borderRadius!), color: extendedTheme.backgroundBox), child: Padding(padding: EdgeInsets.all(padding ?? 16), child: content)); } diff --git a/lib/widgets/info_element.dart b/lib/widgets/info_element.dart index 40cd54f32..20a5acb50 100644 --- a/lib/widgets/info_element.dart +++ b/lib/widgets/info_element.dart @@ -10,14 +10,14 @@ class InfoElement extends StatelessWidget { final Color? color; final bool isLastItem; final String? copyText; - final String? fontFamily; + final TextStyle? contentFontStyle; const InfoElement({ required this.label, required this.text, this.plainText = false, this.isLastItem = false, - this.fontFamily, + this.contentFontStyle, this.url, this.color, this.copyText, @@ -34,13 +34,12 @@ class InfoElement extends StatelessWidget { } TextStyle getContentStyle(ThemeData theme) { - String? fontFamily = this.fontFamily != null - ? this.fontFamily - : theme.textTheme.bodyMedium!.fontFamily; Color? color = this.color != null ? this.color : theme.textTheme.bodyMedium!.color; - return theme.textTheme.bodyMedium! - .copyWith(color: color, fontFamily: fontFamily); + TextStyle? style = this.contentFontStyle != null + ? this.contentFontStyle + : theme.textTheme.bodyMedium; + return style!.copyWith(color: color); } Widget buildContent(ThemeData theme) { diff --git a/lib/widgets/layouts/layout.dart b/lib/widgets/layouts/layout.dart index 15c7019d9..744f428df 100644 --- a/lib/widgets/layouts/layout.dart +++ b/lib/widgets/layouts/layout.dart @@ -52,11 +52,10 @@ class Layout extends StatefulWidget { LayoutState createState() => LayoutState(); } -final panelController = PanelController(); - class LayoutState extends State with TickerProviderStateMixin { ScrollController defaultScrollController = ScrollController(keepScrollOffset: false); + PanelUtils panel = PanelUtils(); bool get isUpdateCheckerEnabled => Platform.isMacOS || Platform.isLinux; bool get isDashboard => widget.dashboardActions != null; bool get allowBottomBar => @@ -186,10 +185,10 @@ class LayoutState extends State with TickerProviderStateMixin { void hidePanelOnMobileIfKeyboard() { if ((Platform.isAndroid || Platform.isIOS) && - FocusScope.of(context).isFirstFocus && - panelController.isAttached && - panelController.isPanelOpen) { - panelController.close(); + MediaQuery.of(context).viewInsets.bottom > 0 && + panel.isAttached() && + panel.isOpen()) { + panel.close(); } } @@ -202,13 +201,14 @@ class LayoutState extends State with TickerProviderStateMixin { // Hide panel if the mobile keyboard is open hidePanelOnMobileIfKeyboard(); return SlidingUpPanel( - controller: panelController, + controller: panel.getPanelController(), backdropEnabled: true, color: extendedTheme.panelBgColor!, minHeight: 0, maxHeight: MediaQuery.of(context).size.height * 0.4, borderRadius: BorderRadius.only( - topLeft: Radius.circular(8), topRight: Radius.circular(8)), + topLeft: extendedTheme.borderRadius!, + topRight: extendedTheme.borderRadius!), panel: Center( child: ConstrainedBox( constraints: BoxConstraints( @@ -396,9 +396,7 @@ class LayoutState extends State with TickerProviderStateMixin { InitScreen.route) { navigator.pop(), - if (panelController.isAttached && - panelController.isPanelOpen) - {panelController.close()} + if (panel.isAttached() && panel.isOpen()) {panel.close()} } }, ) @@ -417,8 +415,8 @@ class LayoutState extends State with TickerProviderStateMixin { ..onTapDown = (TapDownDetails details) { if (navigator.canPop()) { navigator.pop(); - if (panelController.isPanelOpen) { - panelController.close(); + if (panel.isOpen()) { + panel.close(); } } }; diff --git a/lib/widgets/select.dart b/lib/widgets/select.dart index 3308c9715..c3833463f 100644 --- a/lib/widgets/select.dart +++ b/lib/widgets/select.dart @@ -53,7 +53,7 @@ class Select extends StatelessWidget { return DecoratedBox( decoration: BoxDecoration( color: extendedTheme.selectBackgroundColor, - borderRadius: BorderRadius.circular(24), + borderRadius: BorderRadius.all(extendedTheme.borderRadius!), ), child: Padding( padding: EdgeInsets.only(left: 8, right: 8), @@ -81,7 +81,7 @@ class Select extends StatelessWidget { }).toList(); }, underline: Container(), - borderRadius: BorderRadius.circular(24), + borderRadius: BorderRadius.all(extendedTheme.borderRadius!), isExpanded: true, items: listItems .map>((SelectItem item) => diff --git a/lib/widgets/select_wallet_box.dart b/lib/widgets/select_wallet_box.dart index f08144b0d..424a15c3f 100644 --- a/lib/widgets/select_wallet_box.dart +++ b/lib/widgets/select_wallet_box.dart @@ -45,7 +45,7 @@ class SelectWalletBox extends StatelessWidget { color: isSelected ? extendedTheme.walletActiveItemBackgroundColor : extendedTheme.walletListBackgroundColor, - borderRadius: BorderRadius.all(Radius.circular(24)), + borderRadius: BorderRadius.all(extendedTheme.borderRadius!), border: Border.all( color: isSelected ? extendedTheme.walletActiveItemBorderColor! @@ -60,9 +60,9 @@ class SelectWalletBox extends StatelessWidget { decoration: BoxDecoration( color: WitnetPallet.black, border: Border.all(color: WitnetPallet.transparent), - borderRadius: BorderRadius.all(Radius.circular(24))), + borderRadius: BorderRadius.all(extendedTheme.borderRadius!)), child: ClipRRect( - borderRadius: BorderRadius.all(Radius.circular(24)), + borderRadius: BorderRadius.all(extendedTheme.borderRadius!), child: Container( decoration: BoxDecoration( color: WitnetPallet.black, @@ -72,25 +72,23 @@ class SelectWalletBox extends StatelessWidget { child: Identicon(seed: walletId, size: 8), ), )), - Expanded( - child: Padding( - padding: EdgeInsets.only(left: 16, right: 16, top: 8), - child: Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - walletName, - overflow: TextOverflow.ellipsis, - style: theme.textTheme.labelLarge, - ), - SizedBox(height: 4), - Text( - address.cropMiddle(15), - overflow: TextOverflow.ellipsis, - style: extendedTheme.monoSmallText, - ), - ], - ), + Padding( + padding: EdgeInsets.only(left: 16, right: 16, top: 8), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + walletName, + overflow: TextOverflow.ellipsis, + style: theme.textTheme.labelLarge, + ), + SizedBox(height: 4), + Text( + address.cropMiddle(18), + overflow: TextOverflow.ellipsis, + style: extendedTheme.monoSmallText, + ), + ], ), ), Expanded( diff --git a/lib/widgets/snack_bars.dart b/lib/widgets/snack_bars.dart index 8528abae8..637791c48 100644 --- a/lib/widgets/snack_bars.dart +++ b/lib/widgets/snack_bars.dart @@ -12,8 +12,8 @@ SnackBar buildCopiedSnackbar(ThemeData theme, String text) { final extendedTheme = theme.extension()!; return SnackBar( width: 150, - shape: const RoundedRectangleBorder( - borderRadius: BorderRadius.all(Radius.circular(24))), + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.all(extendedTheme.borderRadius!)), clipBehavior: Clip.none, content: Text(text, textAlign: TextAlign.center, @@ -70,8 +70,8 @@ SnackBar buildErrorSnackbar( final extendedTheme = theme.extension()!; return SnackBar( clipBehavior: Clip.none, - shape: const RoundedRectangleBorder( - borderRadius: BorderRadius.all(Radius.circular(24))), + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.all(extendedTheme.borderRadius!)), action: action != null ? SnackBarAction( label: 'Dismiss', @@ -87,7 +87,7 @@ SnackBar buildErrorSnackbar( log != null ? Container( decoration: BoxDecoration( - borderRadius: BorderRadius.circular(24), + borderRadius: BorderRadius.all(extendedTheme.borderRadius!), color: WitnetPallet.lightGrey, ), padding: EdgeInsets.only(left: 8, right: 8, top: 4, bottom: 4), diff --git a/lib/widgets/step_bar.dart b/lib/widgets/step_bar.dart index 4d73fb01d..ae37996b0 100644 --- a/lib/widgets/step_bar.dart +++ b/lib/widgets/step_bar.dart @@ -53,7 +53,7 @@ class StepBar extends StatelessWidget { Widget build(BuildContext context) { final extendedTheme = Theme.of(context).extension()!; return SizedBox( - height: 30, + height: 40, child: ListView.builder( scrollDirection: Axis.horizontal, itemCount: listItems.length, diff --git a/lib/widgets/top_navigation.dart b/lib/widgets/top_navigation.dart index 10aacbe1a..875b0d6e9 100644 --- a/lib/widgets/top_navigation.dart +++ b/lib/widgets/top_navigation.dart @@ -54,9 +54,9 @@ class TopNavigation extends StatelessWidget { decoration: BoxDecoration( color: WitnetPallet.black, border: Border.all(color: WitnetPallet.black), - borderRadius: BorderRadius.all(Radius.circular(24))), + borderRadius: BorderRadius.all(extendedTheme.borderRadius!)), child: ClipRRect( - borderRadius: BorderRadius.all(Radius.circular(24)), + borderRadius: BorderRadius.all(extendedTheme.borderRadius!), child: Container( decoration: BoxDecoration( color: WitnetPallet.black, diff --git a/lib/widgets/transaction_details.dart b/lib/widgets/transaction_details.dart index e006325c4..548910d2c 100644 --- a/lib/widgets/transaction_details.dart +++ b/lib/widgets/transaction_details.dart @@ -128,13 +128,13 @@ class TransactionDetails extends StatelessWidget { InfoElement( label: localization.from.toTitleCase(), copyText: transactionUtils.getSenderAddress(), - fontFamily: extendedTheme.monoRegularText!.fontFamily, - text: transactionUtils.getSenderAddress().cropMiddle(30)), + contentFontStyle: extendedTheme.monoBoldText!, + text: transactionUtils.getSenderAddress().cropMiddle(24)), InfoElement( label: localization.to, copyText: transactionUtils.getRecipientAddress(), - fontFamily: extendedTheme.monoRegularText!.fontFamily, - text: transactionUtils.getRecipientAddress().cropMiddle(30)), + contentFontStyle: extendedTheme.monoBoldText!, + text: transactionUtils.getRecipientAddress().cropMiddle(24)), InfoElement( label: localization.amount, text: transactionUtils.getTransactionValue().amount, @@ -160,7 +160,7 @@ class TransactionDetails extends StatelessWidget { children: [ InfoElement( label: localization.transactionId, - text: transaction.txnHash.cropMiddle(30), + text: transaction.txnHash.cropMiddle(24), copyText: transaction.txnHash, url: 'https://witnet.network/search/${transaction.txnHash}', ), diff --git a/lib/widgets/transaction_item.dart b/lib/widgets/transaction_item.dart index a578c6c59..9f5bab2e0 100644 --- a/lib/widgets/transaction_item.dart +++ b/lib/widgets/transaction_item.dart @@ -92,7 +92,7 @@ class TransactionsItemState extends State { TransactionValue transactionValue = transactionUtils!.getTransactionValue(); return Text(' ${transactionValue.prefix} ${transactionValue.amount}', - style: theme.textTheme.labelLarge?.copyWith( + style: theme.textTheme.titleMedium?.copyWith( color: getAmountColor(transactionValue.prefix), overflow: TextOverflow.ellipsis, )); @@ -134,13 +134,12 @@ class TransactionsItemState extends State { _lockedWit > 0 ? SizedBox(width: 10) : Container(), - buildTransactionValue(label), + Expanded( + flex: 1, + child: buildTransactionValue(label)), ], ), ])), - SizedBox( - width: 8, - ), Expanded( child: Column( crossAxisAlignment: CrossAxisAlignment.end, diff --git a/lib/widgets/wallet_type_label.dart b/lib/widgets/wallet_type_label.dart index 376cc356f..8fc28d45d 100644 --- a/lib/widgets/wallet_type_label.dart +++ b/lib/widgets/wallet_type_label.dart @@ -23,10 +23,11 @@ class WalletTypeLabel extends StatelessWidget { Widget build(BuildContext context) { final theme = Theme.of(context); + final extendedTheme = theme.extension()!; return label == WalletType.single ? Container( decoration: BoxDecoration( - borderRadius: BorderRadius.circular(24), + borderRadius: BorderRadius.all(extendedTheme.borderRadius!), color: walletTypeToBgColor(context)[label]), child: Padding( padding: EdgeInsets.only(top: 2, bottom: 2, left: 4, right: 4), diff --git a/lib/widgets/witnet/transactions/value_transfer/modals/general_error_modal.dart b/lib/widgets/witnet/transactions/value_transfer/modals/general_error_modal.dart index 6498c78da..cf0184b1e 100644 --- a/lib/widgets/witnet/transactions/value_transfer/modals/general_error_modal.dart +++ b/lib/widgets/witnet/transactions/value_transfer/modals/general_error_modal.dart @@ -45,7 +45,7 @@ void buildGeneralExceptionModal({ errorMessage != null ? Container( decoration: BoxDecoration( - borderRadius: BorderRadius.circular(24), + borderRadius: BorderRadius.all(extendedTheme.borderRadius!), color: WitnetPallet.lightGrey, ), padding: EdgeInsets.only(left: 8), diff --git a/lib/widgets/witnet/transactions/value_transfer/modals/unlock_keychain_modal.dart b/lib/widgets/witnet/transactions/value_transfer/modals/unlock_keychain_modal.dart index f16e7e924..2209f7f89 100644 --- a/lib/widgets/witnet/transactions/value_transfer/modals/unlock_keychain_modal.dart +++ b/lib/widgets/witnet/transactions/value_transfer/modals/unlock_keychain_modal.dart @@ -1,4 +1,5 @@ import 'package:flutter/material.dart'; +import 'package:my_wit_wallet/theme/extended_theme.dart'; import 'package:my_wit_wallet/util/get_localization.dart'; import 'package:my_wit_wallet/screens/login/view/password_validate.dart'; import 'package:my_wit_wallet/shared/api_database.dart'; @@ -13,6 +14,7 @@ Future unlockKeychainModal( required BuildContext context, required VoidCallback onAction, required String routeToRedirect}) { + final extendedTheme = theme.extension()!; return Future.delayed( Duration.zero, () => showDialog( @@ -60,9 +62,9 @@ Future unlockKeychainModal( backgroundColor: theme.colorScheme.surface, surfaceTintColor: theme.colorScheme.surface, shape: RoundedRectangleBorder( - borderRadius: BorderRadius.all(Radius.circular(8))), + borderRadius: + BorderRadius.all(extendedTheme.borderRadius!)), content: Column(mainAxisSize: MainAxisSize.min, children: [ - SizedBox(height: 8), svgThemeImage(theme, name: imageName, height: 100), SizedBox(height: 16), PasswordValidation(