Ecosystem/stack_wallet
1
0
Fork 0
mirror of https://github.com/cypherstack/stack_wallet.git synced 2024-11-16 17:27:39 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

standardized buttons, desktop dialog/alert outline, restore wallet request dialog

Browse source
This commit is contained in:
julian 2022-09-26 09:49:36 -06:00
parent c0e80f828f
commit 1fa65d92a8
11 changed files with 377 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
assets/svg/drd-icon.svg Normal file
View file

@ -0,0 +1,25 @@
<svg width="99" height="70" viewBox="0 0 99 70" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_5372_11232)">
<path d="M91.2807 31.334H36.3926C32.1291 31.334 28.6729 34.8203 28.6729 39.1208V62.2128C28.6729 66.5134 32.1291 69.9996 36.3926 69.9996H91.2807C95.5442 69.9996 99.0004 66.5134 99.0004 62.2128V39.1208C99.0004 34.8203 95.5442 31.334 91.2807 31.334Z" fill="#E1E2E3"/>
<path d="M93.2051 28.6192V59.8664C93.2051 62.0499 91.4525 63.8177 89.2879 63.8177H25.0787C22.9088 63.8177 21.1562 62.0499 21.1562 59.8611V28.6245C21.1562 26.441 22.9088 24.668 25.0787 24.668H77.9639L89.3035 24.789C91.2856 24.81 93.0226 26.2937 93.1947 28.2773C93.2051 28.3877 93.2103 28.4982 93.2103 28.614L93.2051 28.6192Z" stroke="#222222" stroke-width="3" stroke-miterlimit="10"/>
<path d="M48.665 38.6689V49.8177" stroke="#222222" stroke-width="3" stroke-miterlimit="10" stroke-linecap="round"/>
<path d="M43.877 41.457L53.4483 47.0288" stroke="#222222" stroke-width="3" stroke-miterlimit="10" stroke-linecap="round"/>
<path d="M53.4483 41.457L43.877 47.0288" stroke="#222222" stroke-width="3" stroke-miterlimit="10" stroke-linecap="round"/>
<path d="M32.5166 38.6689V49.8177" stroke="#222222" stroke-width="3" stroke-miterlimit="10" stroke-linecap="round"/>
<path d="M27.7285 41.457L37.2999 47.0288" stroke="#222222" stroke-width="3" stroke-miterlimit="10" stroke-linecap="round"/>
<path d="M37.2999 41.457L27.7285 47.0288" stroke="#222222" stroke-width="3" stroke-miterlimit="10" stroke-linecap="round"/>
<path d="M64.9658 38.6689V49.8177" stroke="#222222" stroke-width="3" stroke-miterlimit="10" stroke-linecap="round"/>
<path d="M60.1777 41.457L69.7491 47.0288" stroke="#222222" stroke-width="3" stroke-miterlimit="10" stroke-linecap="round"/>
<path d="M69.7491 41.457L60.1777 47.0288" stroke="#222222" stroke-width="3" stroke-miterlimit="10" stroke-linecap="round"/>
<path d="M81.0518 38.6689V49.8177" stroke="#222222" stroke-width="3" stroke-miterlimit="10" stroke-linecap="round"/>
<path d="M76.2686 41.457L85.84 47.0288" stroke="#222222" stroke-width="3" stroke-miterlimit="10" stroke-linecap="round"/>
<path d="M85.84 41.457L76.2686 47.0288" stroke="#222222" stroke-width="3" stroke-miterlimit="10" stroke-linecap="round"/>
<path d="M21.1565 50.8068V56.1681C11.9085 54.3214 4.21483 47.3396 1.69028 37.6902C1.62247 37.4272 1.78417 37.1589 2.04497 37.0957L6.15519 36.0855C6.40556 36.0224 6.65071 36.175 6.71852 36.4275C8.64845 43.6987 14.2818 49.0548 21.1565 50.8068V50.8068Z" stroke="#222222" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M50.6117 24.6681H45.2027C43.93 20.8221 41.541 17.4443 38.2654 14.9504C33.9778 11.6883 28.6888 10.2941 23.3684 11.0412C23.045 11.0886 22.7164 11.1412 22.3983 11.2043L26.4146 16.0711L11.5333 17.0076C11.0534 17.0339 10.6831 16.5867 10.803 16.1131L14.5273 1.68652L18.7105 6.74268C19.9885 6.34282 21.3081 6.05344 22.6538 5.86403C29.346 4.92751 36.0016 6.67428 41.3898 10.7781C45.9747 14.2822 49.1877 19.1384 50.6117 24.6734V24.6681Z" stroke="#222222" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<defs>
<clipPath id="clip0_5372_11232">
<rect width="99" height="70" fill="white"/>
</clipPath>
</defs>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 3.1 KiB

148
lib/pages/add_wallet_views/restore_wallet_view/confirm_recovery_dialog.dart
View file

@ -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<StackColors>()!
.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<StackColors>()!
.textFieldDefaultBG,
size: 40,
icon: SvgPicture.asset(
Assets.svg.x,
color:
Theme.of(context).extension<StackColors>()!.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<StackColors>()!.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<StackColors>()!
.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();
},
),
),
);
);
}
}
}

32
lib/pages/add_wallet_views/restore_wallet_view/restore_wallet_view.dart
View file

@ -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<RestoreWalletView> {
prefix,
style: STextStyles.fieldLabel(context).copyWith(
color: prefixColor,
fontSize: Util.isDesktop ? 16 : 14,
),
),
),
@ -418,7 +420,7 @@ class _RestoreWalletViewState extends ConsumerState<RestoreWalletView> {
minWidth: 16,
minHeight: 16,
maxWidth: 36,
maxHeight: 20,
maxHeight: 32,
),
suffixIconConstraints: const BoxConstraints(
minWidth: 16,
@ -767,6 +769,7 @@ class _RestoreWalletViewState extends ConsumerState<RestoreWalletView> {
color: Theme.of(context)
.extension<StackColors>()!
.overlay,
fontSize: isDesktop ? 16 : 14,
),
),
if (_inputStatuses[
@ -855,6 +858,7 @@ class _RestoreWalletViewState extends ConsumerState<RestoreWalletView> {
color: Theme.of(context)
.extension<StackColors>()!
.overlay,
fontSize: isDesktop ? 16 : 14,
),
),
if (_inputStatuses[i] ==
@ -902,19 +906,10 @@ class _RestoreWalletViewState extends ConsumerState<RestoreWalletView> {
const SizedBox(
height: 32,
),
SizedBox(
height: 70,
PrimaryButton(
label: "Restore wallet",
width: 480,
child: TextButton(
style: Theme.of(context)
.extension<StackColors>()!
.getPrimaryEnabledButtonColor(context),
onPressed: requestRestore,
child: Text(
"Restore wallet",
style: STextStyles.button(context),
),
),
onPressed: requestRestore,
),
],
);
@ -977,6 +972,7 @@ class _RestoreWalletViewState extends ConsumerState<RestoreWalletView> {
color: Theme.of(context)
.extension<StackColors>()!
.overlay,
fontSize: isDesktop ? 16 : 14,
),
),
),
@ -1007,15 +1003,9 @@ class _RestoreWalletViewState extends ConsumerState<RestoreWalletView> {
padding: const EdgeInsets.only(
top: 8.0,
),
child: TextButton(
style: Theme.of(context)
.extension<StackColors>()!
.getPrimaryEnabledButtonColor(context),
child: PrimaryButton(
onPressed: requestRestore,
child: Text(
"Restore",
style: STextStyles.button(context),
),
label: "Restore",
),
),
],

1
lib/utilities/assets.dart
View file

@ -51,6 +51,7 @@ class _SVG {
String txExchangeFailed(BuildContext context) =>
"assets/svg/${Theme.of(context).extension<StackColors>()!.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";

10
lib/utilities/text_styles.dart
View file

@ -245,6 +245,16 @@ class STextStyles {
height: 26 / 20,
);
static TextStyle desktopButtonSecondaryDisabled(BuildContext context) =>
GoogleFonts.inter(
color: Theme.of(context)
.extension<StackColors>()!
.buttonTextSecondaryDisabled,
fontWeight: FontWeight.w500,
fontSize: 20,
height: 26 / 20,
);
static TextStyle desktopTextExtraSmall(BuildContext context) =>
GoogleFonts.inter(
color: Theme.of(context)

7
lib/utilities/theme/stack_colors.dart
View file

@ -1474,6 +1474,13 @@ class StackColors extends ThemeExtension<StackColors> {
),
);
ButtonStyle? getSecondaryDisabledButtonColor(BuildContext context) =>
Theme.of(context).textButtonTheme.style?.copyWith(
backgroundColor: MaterialStateProperty.all<Color>(
buttonBackSecondaryDisabled,
),
);
ButtonStyle? getSmallSecondaryEnabledButtonColor(BuildContext context) =>
Theme.of(context).textButtonTheme.style?.copyWith(
backgroundColor: MaterialStateProperty.all<Color>(

26
lib/widgets/desktop/custom_text_button.dart Normal file
View file

@ -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,
);
}
}

38
lib/widgets/desktop/desktop_dialog.dart Normal file
View file

@ -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<StackColors>()!.popupBG,
borderRadius: BorderRadius.circular(
20,
),
),
child: child,
),
),
),
],
);
}
}

71
lib/widgets/desktop/primary_button.dart Normal file
View file

@ -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<StackColors>()!
.getPrimaryEnabledButtonColor(context)
: Theme.of(context)
.extension<StackColors>()!
.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<StackColors>()!
.buttonTextPrimary
: Theme.of(context)
.extension<StackColors>()!
.buttonTextPrimaryDisabled,
),
),
],
),
),
);
}
}

71
lib/widgets/desktop/secondary_button.dart Normal file
View file

@ -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<StackColors>()!
.getSecondaryEnabledButtonColor(context)
: Theme.of(context)
.extension<StackColors>()!
.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<StackColors>()!
.buttonTextSecondary
: Theme.of(context)
.extension<StackColors>()!
.buttonTextSecondaryDisabled,
),
),
],
),
),
);
}
}

1
pubspec.yaml
View file

@ -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.