diff --git a/assets/svg/drd-icon.svg b/assets/svg/drd-icon.svg new file mode 100644 index 000000000..7f65c820d --- /dev/null +++ b/assets/svg/drd-icon.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/lib/pages/add_wallet_views/restore_wallet_view/confirm_recovery_dialog.dart b/lib/pages/add_wallet_views/restore_wallet_view/confirm_recovery_dialog.dart index 6ccc44d03..05d951962 100644 --- a/lib/pages/add_wallet_views/restore_wallet_view/confirm_recovery_dialog.dart +++ b/lib/pages/add_wallet_views/restore_wallet_view/confirm_recovery_dialog.dart @@ -1,6 +1,13 @@ import 'package:flutter/material.dart'; +import 'package:flutter_svg/svg.dart'; +import 'package:stackwallet/utilities/assets.dart'; import 'package:stackwallet/utilities/text_styles.dart'; import 'package:stackwallet/utilities/theme/stack_colors.dart'; +import 'package:stackwallet/utilities/util.dart'; +import 'package:stackwallet/widgets/custom_buttons/app_bar_icon_button.dart'; +import 'package:stackwallet/widgets/desktop/desktop_dialog.dart'; +import 'package:stackwallet/widgets/desktop/primary_button.dart'; +import 'package:stackwallet/widgets/desktop/secondary_button.dart'; import 'package:stackwallet/widgets/stack_dialog.dart'; class ConfirmRecoveryDialog extends StatelessWidget { @@ -11,40 +18,117 @@ class ConfirmRecoveryDialog extends StatelessWidget { @override Widget build(BuildContext context) { - return WillPopScope( - onWillPop: () async { - return true; - }, - child: StackDialog( - title: "Are you ready?", - message: - "Restoring your wallet may take a while. Please do not exit this screen once the process is started.", - leftButton: TextButton( - style: Theme.of(context) - .extension()! - .getSecondaryEnabledButtonColor(context), - child: Text( - "Cancel", - style: STextStyles.itemSubtitle12(context), - ), - onPressed: () { - Navigator.of(context).pop(); - }, + if (Util.isDesktop) { + return DesktopDialog( + child: Column( + children: [ + Padding( + padding: const EdgeInsets.all(20.0), + child: Row( + mainAxisAlignment: MainAxisAlignment.end, + children: [ + AppBarIconButton( + color: Theme.of(context) + .extension()! + .textFieldDefaultBG, + size: 40, + icon: SvgPicture.asset( + Assets.svg.x, + color: + Theme.of(context).extension()!.textDark, + width: 22, + height: 22, + ), + onPressed: () { + Navigator.of(context).pop(); + }, + ), + ], + ), + ), + const SizedBox( + height: 5, + ), + SvgPicture.asset( + Assets.svg.drd, + width: 99, + height: 70, + ), + const Spacer(), + Text( + "Restore wallet", + style: STextStyles.desktopH2(context), + textAlign: TextAlign.center, + ), + const SizedBox( + height: 16, + ), + Text( + "Restoring your wallet may take a while.\nPlease do not exit this screen once the process is started.", + style: STextStyles.desktopTextMedium(context).copyWith( + color: Theme.of(context).extension()!.textDark3, + ), + textAlign: TextAlign.center, + ), + const Spacer(), + Padding( + padding: const EdgeInsets.only( + left: 32, + right: 32, + bottom: 32, + ), + child: Row( + children: [ + Expanded( + child: SecondaryButton( + label: "Cancel", + onPressed: () { + Navigator.of(context).pop(); + }, + ), + ), + const SizedBox( + width: 16, + ), + Expanded( + child: PrimaryButton( + label: "Restore", + onPressed: () { + Navigator.of(context).pop(); + onConfirm.call(); + }, + ), + ) + ], + ), + ) + ], ), - rightButton: TextButton( - style: Theme.of(context) - .extension()! - .getPrimaryEnabledButtonColor(context), - child: Text( - "Restore", - style: STextStyles.button(context), + ); + } else { + return WillPopScope( + onWillPop: () async { + return true; + }, + child: StackDialog( + title: "Are you ready?", + message: + "Restoring your wallet may take a while. Please do not exit this screen once the process is started.", + leftButton: SecondaryButton( + label: "Cancel", + onPressed: () { + Navigator.of(context).pop(); + }, + ), + rightButton: PrimaryButton( + label: "Restore", + onPressed: () { + Navigator.of(context).pop(); + onConfirm.call(); + }, ), - onPressed: () { - Navigator.of(context).pop(); - onConfirm.call(); - }, ), - ), - ); + ); + } } } diff --git a/lib/pages/add_wallet_views/restore_wallet_view/restore_wallet_view.dart b/lib/pages/add_wallet_views/restore_wallet_view/restore_wallet_view.dart index b7134293d..3aaee6607 100644 --- a/lib/pages/add_wallet_views/restore_wallet_view/restore_wallet_view.dart +++ b/lib/pages/add_wallet_views/restore_wallet_view/restore_wallet_view.dart @@ -39,6 +39,7 @@ import 'package:stackwallet/utilities/util.dart'; import 'package:stackwallet/widgets/custom_buttons/app_bar_icon_button.dart'; import 'package:stackwallet/widgets/desktop/desktop_app_bar.dart'; import 'package:stackwallet/widgets/desktop/desktop_scaffold.dart'; +import 'package:stackwallet/widgets/desktop/primary_button.dart'; import 'package:stackwallet/widgets/icon_widgets/clipboard_icon.dart'; import 'package:stackwallet/widgets/icon_widgets/qrcode_icon.dart'; import 'package:stackwallet/widgets/table_view/table_view.dart'; @@ -410,6 +411,7 @@ class _RestoreWalletViewState extends ConsumerState { prefix, style: STextStyles.fieldLabel(context).copyWith( color: prefixColor, + fontSize: Util.isDesktop ? 16 : 14, ), ), ), @@ -418,7 +420,7 @@ class _RestoreWalletViewState extends ConsumerState { minWidth: 16, minHeight: 16, maxWidth: 36, - maxHeight: 20, + maxHeight: 32, ), suffixIconConstraints: const BoxConstraints( minWidth: 16, @@ -767,6 +769,7 @@ class _RestoreWalletViewState extends ConsumerState { color: Theme.of(context) .extension()! .overlay, + fontSize: isDesktop ? 16 : 14, ), ), if (_inputStatuses[ @@ -855,6 +858,7 @@ class _RestoreWalletViewState extends ConsumerState { color: Theme.of(context) .extension()! .overlay, + fontSize: isDesktop ? 16 : 14, ), ), if (_inputStatuses[i] == @@ -902,19 +906,10 @@ class _RestoreWalletViewState extends ConsumerState { const SizedBox( height: 32, ), - SizedBox( - height: 70, + PrimaryButton( + label: "Restore wallet", width: 480, - child: TextButton( - style: Theme.of(context) - .extension()! - .getPrimaryEnabledButtonColor(context), - onPressed: requestRestore, - child: Text( - "Restore wallet", - style: STextStyles.button(context), - ), - ), + onPressed: requestRestore, ), ], ); @@ -977,6 +972,7 @@ class _RestoreWalletViewState extends ConsumerState { color: Theme.of(context) .extension()! .overlay, + fontSize: isDesktop ? 16 : 14, ), ), ), @@ -1007,15 +1003,9 @@ class _RestoreWalletViewState extends ConsumerState { padding: const EdgeInsets.only( top: 8.0, ), - child: TextButton( - style: Theme.of(context) - .extension()! - .getPrimaryEnabledButtonColor(context), + child: PrimaryButton( onPressed: requestRestore, - child: Text( - "Restore", - style: STextStyles.button(context), - ), + label: "Restore", ), ), ], diff --git a/lib/utilities/assets.dart b/lib/utilities/assets.dart index 525513f52..002bf452c 100644 --- a/lib/utilities/assets.dart +++ b/lib/utilities/assets.dart @@ -51,6 +51,7 @@ class _SVG { String txExchangeFailed(BuildContext context) => "assets/svg/${Theme.of(context).extension()!.themeType.name}/tx-exchange-icon-failed.svg"; + String get drd => "assets/svg/drd-icon.svg"; String get plus => "assets/svg/plus.svg"; String get gear => "assets/svg/gear.svg"; String get bell => "assets/svg/bell.svg"; diff --git a/lib/utilities/text_styles.dart b/lib/utilities/text_styles.dart index 1f19da807..272fd675a 100644 --- a/lib/utilities/text_styles.dart +++ b/lib/utilities/text_styles.dart @@ -245,6 +245,16 @@ class STextStyles { height: 26 / 20, ); + static TextStyle desktopButtonSecondaryDisabled(BuildContext context) => + GoogleFonts.inter( + color: Theme.of(context) + .extension()! + .buttonTextSecondaryDisabled, + fontWeight: FontWeight.w500, + fontSize: 20, + height: 26 / 20, + ); + static TextStyle desktopTextExtraSmall(BuildContext context) => GoogleFonts.inter( color: Theme.of(context) diff --git a/lib/utilities/theme/stack_colors.dart b/lib/utilities/theme/stack_colors.dart index e8b846490..852bc7d6b 100644 --- a/lib/utilities/theme/stack_colors.dart +++ b/lib/utilities/theme/stack_colors.dart @@ -1474,6 +1474,13 @@ class StackColors extends ThemeExtension { ), ); + ButtonStyle? getSecondaryDisabledButtonColor(BuildContext context) => + Theme.of(context).textButtonTheme.style?.copyWith( + backgroundColor: MaterialStateProperty.all( + buttonBackSecondaryDisabled, + ), + ); + ButtonStyle? getSmallSecondaryEnabledButtonColor(BuildContext context) => Theme.of(context).textButtonTheme.style?.copyWith( backgroundColor: MaterialStateProperty.all( diff --git a/lib/widgets/desktop/custom_text_button.dart b/lib/widgets/desktop/custom_text_button.dart new file mode 100644 index 000000000..b96a697b8 --- /dev/null +++ b/lib/widgets/desktop/custom_text_button.dart @@ -0,0 +1,26 @@ +import 'package:flutter/material.dart'; +import 'package:stackwallet/utilities/util.dart'; + +class CustomTextButtonBase extends StatelessWidget { + const CustomTextButtonBase({ + Key? key, + this.width, + this.height, + this.textButton, + }) : super(key: key); + + final double? width; + final double? height; + final TextButton? textButton; + + @override + Widget build(BuildContext context) { + final isDesktop = Util.isDesktop; + + return SizedBox( + height: isDesktop && height == null ? 70 : height, + width: width, + child: textButton, + ); + } +} diff --git a/lib/widgets/desktop/desktop_dialog.dart b/lib/widgets/desktop/desktop_dialog.dart new file mode 100644 index 000000000..5ada3a545 --- /dev/null +++ b/lib/widgets/desktop/desktop_dialog.dart @@ -0,0 +1,38 @@ +import 'package:flutter/material.dart'; +import 'package:stackwallet/utilities/theme/stack_colors.dart'; + +class DesktopDialog extends StatelessWidget { + const DesktopDialog({Key? key, this.child}) : super(key: key); + + final Widget? child; + + @override + Widget build(BuildContext context) { + return Column( + mainAxisAlignment: MainAxisAlignment.center, + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + ConstrainedBox( + constraints: const BoxConstraints( + maxWidth: 641, + maxHeight: 474, + ), + child: Material( + borderRadius: BorderRadius.circular( + 20, + ), + child: Container( + decoration: BoxDecoration( + color: Theme.of(context).extension()!.popupBG, + borderRadius: BorderRadius.circular( + 20, + ), + ), + child: child, + ), + ), + ), + ], + ); + } +} diff --git a/lib/widgets/desktop/primary_button.dart b/lib/widgets/desktop/primary_button.dart new file mode 100644 index 000000000..6034cc08b --- /dev/null +++ b/lib/widgets/desktop/primary_button.dart @@ -0,0 +1,71 @@ +import 'package:flutter/material.dart'; +import 'package:stackwallet/utilities/text_styles.dart'; +import 'package:stackwallet/utilities/theme/stack_colors.dart'; +import 'package:stackwallet/utilities/util.dart'; +import 'package:stackwallet/widgets/desktop/custom_text_button.dart'; + +class PrimaryButton extends StatelessWidget { + const PrimaryButton({ + Key? key, + this.width, + this.height, + this.label, + this.icon, + this.onPressed, + this.enabled = true, + }) : super(key: key); + + final double? width; + final double? height; + final String? label; + final VoidCallback? onPressed; + final bool enabled; + final Widget? icon; + + @override + Widget build(BuildContext context) { + final isDesktop = Util.isDesktop; + + return CustomTextButtonBase( + height: height, + width: width, + textButton: TextButton( + onPressed: enabled ? onPressed : null, + style: enabled + ? Theme.of(context) + .extension()! + .getPrimaryEnabledButtonColor(context) + : Theme.of(context) + .extension()! + .getPrimaryDisabledButtonColor(context), + child: Row( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + if (icon != null) icon!, + if (icon != null && label != null) + const SizedBox( + width: 10, + ), + if (label != null) + Text( + label!, + style: isDesktop + ? enabled + ? STextStyles.desktopButtonEnabled(context) + : STextStyles.desktopButtonDisabled(context) + : STextStyles.button(context).copyWith( + color: enabled + ? Theme.of(context) + .extension()! + .buttonTextPrimary + : Theme.of(context) + .extension()! + .buttonTextPrimaryDisabled, + ), + ), + ], + ), + ), + ); + } +} diff --git a/lib/widgets/desktop/secondary_button.dart b/lib/widgets/desktop/secondary_button.dart new file mode 100644 index 000000000..2a88e548d --- /dev/null +++ b/lib/widgets/desktop/secondary_button.dart @@ -0,0 +1,71 @@ +import 'package:flutter/material.dart'; +import 'package:stackwallet/utilities/text_styles.dart'; +import 'package:stackwallet/utilities/theme/stack_colors.dart'; +import 'package:stackwallet/utilities/util.dart'; +import 'package:stackwallet/widgets/desktop/custom_text_button.dart'; + +class SecondaryButton extends StatelessWidget { + const SecondaryButton({ + Key? key, + this.width, + this.height, + this.label, + this.icon, + this.onPressed, + this.enabled = true, + }) : super(key: key); + + final double? width; + final double? height; + final String? label; + final VoidCallback? onPressed; + final bool enabled; + final Widget? icon; + + @override + Widget build(BuildContext context) { + final isDesktop = Util.isDesktop; + + return CustomTextButtonBase( + height: height, + width: width, + textButton: TextButton( + onPressed: enabled ? onPressed : null, + style: enabled + ? Theme.of(context) + .extension()! + .getSecondaryEnabledButtonColor(context) + : Theme.of(context) + .extension()! + .getSecondaryDisabledButtonColor(context), + child: Row( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + if (icon != null) icon!, + if (icon != null && label != null) + const SizedBox( + width: 10, + ), + if (label != null) + Text( + label!, + style: isDesktop + ? enabled + ? STextStyles.desktopButtonSecondaryEnabled(context) + : STextStyles.desktopButtonSecondaryDisabled(context) + : STextStyles.button(context).copyWith( + color: enabled + ? Theme.of(context) + .extension()! + .buttonTextSecondary + : Theme.of(context) + .extension()! + .buttonTextSecondaryDisabled, + ), + ), + ], + ), + ), + ); + } +} diff --git a/pubspec.yaml b/pubspec.yaml index 5cd36b2f6..22021e7cb 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -306,6 +306,7 @@ flutter: - assets/svg/wallet-fa.svg - assets/svg/exchange-3.svg - assets/svg/message-question-1.svg + - assets/svg/drd-icon.svg # An image asset can refer to one or more resolution-specific "variants", see # https://flutter.dev/assets-and-images/#resolution-aware.