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

paynym mobile ui sizing changes

Browse source
This commit is contained in:
julian 2023-02-01 15:02:41 -06:00
parent b64ffe91b7
commit 6a07672437
9 changed files with 146 additions and 57 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
lib/pages/paynym/dialogs/paynym_details_popup.dart
View file

@ -176,7 +176,7 @@ class _PaynymDetailsPopupState extends ConsumerState<PaynymDetailsPopup> {
children: [ children: [
PayNymBot( PayNymBot(
paymentCodeString: widget.accountLite.code, paymentCodeString: widget.accountLite.code,
size: 32, size: 36,
), ),
const SizedBox( const SizedBox(
width: 12, width: 12,
@ -186,7 +186,7 @@ class _PaynymDetailsPopupState extends ConsumerState<PaynymDetailsPopup> {
children: [ children: [
Text( Text(
widget.accountLite.nymName, widget.accountLite.nymName,
style: STextStyles.w600_12(context), style: STextStyles.w600_14(context),
), ),
FutureBuilder( FutureBuilder(
future: future:
@ -204,7 +204,7 @@ class _PaynymDetailsPopupState extends ConsumerState<PaynymDetailsPopup> {
), ),
Text( Text(
"Connected", "Connected",
style: STextStyles.w500_10(context) style: STextStyles.w500_12(context)
.copyWith( .copyWith(
color: Theme.of(context) color: Theme.of(context)
.extension<StackColors>()! .extension<StackColors>()!
@ -230,33 +230,33 @@ class _PaynymDetailsPopupState extends ConsumerState<PaynymDetailsPopup> {
if (snapshot.data!) { if (snapshot.data!) {
return PrimaryButton( return PrimaryButton(
label: "Send", label: "Send",
buttonHeight: ButtonHeight.l, buttonHeight: ButtonHeight.xl,
icon: SvgPicture.asset( icon: SvgPicture.asset(
Assets.svg.circleArrowUpRight, Assets.svg.circleArrowUpRight,
width: 10, width: 14,
height: 10, height: 14,
color: Theme.of(context) color: Theme.of(context)
.extension<StackColors>()! .extension<StackColors>()!
.buttonTextPrimary, .buttonTextPrimary,
), ),
iconSpacing: 4, iconSpacing: 8,
width: 86, width: 100,
onPressed: _onSend, onPressed: _onSend,
); );
} else { } else {
return PrimaryButton( return PrimaryButton(
label: "Connect", label: "Connect",
buttonHeight: ButtonHeight.l, buttonHeight: ButtonHeight.xl,
icon: SvgPicture.asset( icon: SvgPicture.asset(
Assets.svg.circlePlusFilled, Assets.svg.circlePlusFilled,
width: 10, width: 13,
height: 10, height: 13,
color: Theme.of(context) color: Theme.of(context)
.extension<StackColors>()! .extension<StackColors>()!
.buttonTextPrimary, .buttonTextPrimary,
), ),
iconSpacing: 4, iconSpacing: 8,
width: 86, width: 128,
onPressed: _onConnectPressed, onPressed: _onConnectPressed,
); );
} }
@ -291,6 +291,7 @@ class _PaynymDetailsPopupState extends ConsumerState<PaynymDetailsPopup> {
color: Theme.of(context) color: Theme.of(context)
.extension<StackColors>()! .extension<StackColors>()!
.warningForeground, .warningForeground,
fontSize: 12,
), ),
), ),
), ),
@ -321,7 +322,9 @@ class _PaynymDetailsPopupState extends ConsumerState<PaynymDetailsPopup> {
children: [ children: [
Text( Text(
"PayNym address", "PayNym address",
style: STextStyles.infoSmall(context), style: STextStyles.infoSmall(context).copyWith(
fontSize: 12,
),
), ),
const SizedBox( const SizedBox(
height: 6, height: 6,
@ -332,6 +335,7 @@ class _PaynymDetailsPopupState extends ConsumerState<PaynymDetailsPopup> {
color: Theme.of(context) color: Theme.of(context)
.extension<StackColors>()! .extension<StackColors>()!
.textDark, .textDark,
fontSize: 12,
), ),
), ),
const SizedBox( const SizedBox(
@ -346,7 +350,7 @@ class _PaynymDetailsPopupState extends ConsumerState<PaynymDetailsPopup> {
), ),
QrImage( QrImage(
padding: const EdgeInsets.all(0), padding: const EdgeInsets.all(0),
size: 86, size: 100,
data: widget.accountLite.code, data: widget.accountLite.code,
foregroundColor: foregroundColor:
Theme.of(context).extension<StackColors>()!.textDark, Theme.of(context).extension<StackColors>()!.textDark,
@ -375,16 +379,16 @@ class _PaynymDetailsPopupState extends ConsumerState<PaynymDetailsPopup> {
Expanded( Expanded(
child: SecondaryButton( child: SecondaryButton(
label: "Copy", label: "Copy",
buttonHeight: ButtonHeight.l, buttonHeight: ButtonHeight.xl,
iconSpacing: 8,
icon: SvgPicture.asset( icon: SvgPicture.asset(
Assets.svg.copy, Assets.svg.copy,
width: 10, width: 12,
height: 10, height: 12,
color: Theme.of(context) color: Theme.of(context)
.extension<StackColors>()! .extension<StackColors>()!
.buttonTextSecondary, .buttonTextSecondary,
), ),
iconSpacing: 4,
onPressed: () async { onPressed: () async {
await Clipboard.setData( await Clipboard.setData(
ClipboardData( ClipboardData(

15
lib/pages/paynym/dialogs/paynym_qr_popup.dart
View file

@ -56,7 +56,7 @@ class PaynymQrPopup extends StatelessWidget {
children: [ children: [
PayNymBot( PayNymBot(
paymentCodeString: paynymAccount.codes.first.code, paymentCodeString: paynymAccount.codes.first.code,
size: isDesktop ? 56 : 32, size: isDesktop ? 56 : 36,
), ),
const SizedBox( const SizedBox(
width: 12, width: 12,
@ -65,7 +65,7 @@ class PaynymQrPopup extends StatelessWidget {
paynymAccount.nymName, paynymAccount.nymName,
style: isDesktop style: isDesktop
? STextStyles.w500_24(context) ? STextStyles.w500_24(context)
: STextStyles.w600_12(context), : STextStyles.w600_14(context),
), ),
], ],
), ),
@ -87,7 +87,7 @@ class PaynymQrPopup extends StatelessWidget {
children: [ children: [
Expanded( Expanded(
child: ConstrainedBox( child: ConstrainedBox(
constraints: const BoxConstraints(minHeight: 107), constraints: const BoxConstraints(minHeight: 130),
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceBetween, mainAxisAlignment: MainAxisAlignment.spaceBetween,
@ -100,7 +100,9 @@ class PaynymQrPopup extends StatelessWidget {
.extension<StackColors>()! .extension<StackColors>()!
.textSubtitle1, .textSubtitle1,
) )
: STextStyles.infoSmall(context), : STextStyles.infoSmall(context).copyWith(
fontSize: 12,
),
), ),
const SizedBox( const SizedBox(
height: 6, height: 6,
@ -113,6 +115,7 @@ class PaynymQrPopup extends StatelessWidget {
color: Theme.of(context) color: Theme.of(context)
.extension<StackColors>()! .extension<StackColors>()!
.textDark, .textDark,
fontSize: 12,
), ),
), ),
const SizedBox( const SizedBox(
@ -120,7 +123,7 @@ class PaynymQrPopup extends StatelessWidget {
), ),
CustomTextButton( CustomTextButton(
text: "Copy", text: "Copy",
textSize: isDesktop ? 18 : 10, textSize: isDesktop ? 18 : 14,
onTap: () async { onTap: () async {
await Clipboard.setData( await Clipboard.setData(
ClipboardData( ClipboardData(
@ -146,7 +149,7 @@ class PaynymQrPopup extends StatelessWidget {
), ),
QrImage( QrImage(
padding: const EdgeInsets.all(0), padding: const EdgeInsets.all(0),
size: 107, size: 130,
data: paynymAccount.codes.first.code, data: paynymAccount.codes.first.code,
foregroundColor: foregroundColor:
Theme.of(context).extension<StackColors>()!.textDark, Theme.of(context).extension<StackColors>()!.textDark,

30
lib/pages/paynym/paynym_home_view.dart
View file

@ -303,7 +303,9 @@ class _PaynymHomeViewState extends ConsumerState<PaynymHomeView> {
.code, .code,
12, 12,
5), 5),
style: STextStyles.label(context), style: STextStyles.label(context).copyWith(
fontSize: 14,
),
), ),
const SizedBox( const SizedBox(
height: 11, height: 11,
@ -313,11 +315,11 @@ class _PaynymHomeViewState extends ConsumerState<PaynymHomeView> {
Expanded( Expanded(
child: SecondaryButton( child: SecondaryButton(
label: "Copy", label: "Copy",
buttonHeight: ButtonHeight.l, buttonHeight: ButtonHeight.xl,
iconSpacing: 4, iconSpacing: 8,
icon: CopyIcon( icon: CopyIcon(
width: 10, width: 12,
height: 10, height: 12,
color: Theme.of(context) color: Theme.of(context)
.extension<StackColors>()! .extension<StackColors>()!
.textDark, .textDark,
@ -350,11 +352,11 @@ class _PaynymHomeViewState extends ConsumerState<PaynymHomeView> {
Expanded( Expanded(
child: SecondaryButton( child: SecondaryButton(
label: "Share", label: "Share",
buttonHeight: ButtonHeight.l, buttonHeight: ButtonHeight.xl,
iconSpacing: 4, iconSpacing: 8,
icon: ShareIcon( icon: ShareIcon(
width: 10, width: 12,
height: 10, height: 12,
color: Theme.of(context) color: Theme.of(context)
.extension<StackColors>()! .extension<StackColors>()!
.textDark, .textDark,
@ -387,11 +389,11 @@ class _PaynymHomeViewState extends ConsumerState<PaynymHomeView> {
Expanded( Expanded(
child: SecondaryButton( child: SecondaryButton(
label: "Address", label: "Address",
buttonHeight: ButtonHeight.l, buttonHeight: ButtonHeight.xl,
iconSpacing: 4, iconSpacing: 8,
icon: QrCodeIcon( icon: QrCodeIcon(
width: 10, width: 12,
height: 10, height: 12,
color: Theme.of(context) color: Theme.of(context)
.extension<StackColors>()! .extension<StackColors>()!
.textDark, .textDark,
@ -554,7 +556,7 @@ class _PaynymHomeViewState extends ConsumerState<PaynymHomeView> {
child: child, child: child,
), ),
child: SizedBox( child: SizedBox(
height: isDesktop ? 56 : 40, height: isDesktop ? 56 : 48,
width: isDesktop ? 490 : null, width: isDesktop ? 490 : null,
child: Toggle( child: Toggle(
onColor: Theme.of(context).extension<StackColors>()!.popupBG, onColor: Theme.of(context).extension<StackColors>()!.popupBG,

2
lib/pages/paynym/subwidgets/desktop_paynym_details.dart
View file

@ -171,7 +171,7 @@ class _PaynymDetailsPopupState extends ConsumerState<DesktopPaynymDetails> {
children: [ children: [
PayNymBot( PayNymBot(
paymentCodeString: widget.accountLite.code, paymentCodeString: widget.accountLite.code,
size: 32, size: 36,
), ),
const SizedBox( const SizedBox(
width: 12, width: 12,

6
lib/pages/paynym/subwidgets/paynym_card.dart
View file

@ -37,7 +37,7 @@ class _PaynymCardState extends State<PaynymCard> {
child: Row( child: Row(
children: [ children: [
PayNymBot( PayNymBot(
size: 32, size: 36,
paymentCodeString: widget.paymentCodeString, paymentCodeString: widget.paymentCodeString,
), ),
const SizedBox( const SizedBox(
@ -56,7 +56,7 @@ class _PaynymCardState extends State<PaynymCard> {
.extension<StackColors>()! .extension<StackColors>()!
.textFieldActiveText, .textFieldActiveText,
) )
: STextStyles.w500_12(context), : STextStyles.w500_14(context),
), ),
const SizedBox( const SizedBox(
height: 2, height: 2,
@ -65,7 +65,7 @@ class _PaynymCardState extends State<PaynymCard> {
Format.shorten(widget.paymentCodeString, 12, 5), Format.shorten(widget.paymentCodeString, 12, 5),
style: isDesktop style: isDesktop
? STextStyles.desktopTextExtraExtraSmall(context) ? STextStyles.desktopTextExtraExtraSmall(context)
: STextStyles.w500_12(context).copyWith( : STextStyles.w500_14(context).copyWith(
color: Theme.of(context) color: Theme.of(context)
.extension<StackColors>()! .extension<StackColors>()!
.textSubtitle1, .textSubtitle1,

6
lib/pages/paynym/subwidgets/paynym_card_button.dart
View file

@ -77,7 +77,7 @@ class _PaynymCardButtonState extends ConsumerState<PaynymCardButton> {
child: Row( child: Row(
children: [ children: [
PayNymBot( PayNymBot(
size: 32, size: 36,
paymentCodeString: widget.accountLite.code, paymentCodeString: widget.accountLite.code,
), ),
const SizedBox( const SizedBox(
@ -96,7 +96,7 @@ class _PaynymCardButtonState extends ConsumerState<PaynymCardButton> {
.extension<StackColors>()! .extension<StackColors>()!
.textFieldActiveText, .textFieldActiveText,
) )
: STextStyles.w500_12(context), : STextStyles.w500_14(context),
), ),
const SizedBox( const SizedBox(
height: 2, height: 2,
@ -105,7 +105,7 @@ class _PaynymCardButtonState extends ConsumerState<PaynymCardButton> {
Format.shorten(widget.accountLite.code, 12, 5), Format.shorten(widget.accountLite.code, 12, 5),
style: isDesktop style: isDesktop
? STextStyles.desktopTextExtraExtraSmall(context) ? STextStyles.desktopTextExtraExtraSmall(context)
: STextStyles.w500_12(context).copyWith( : STextStyles.w500_14(context).copyWith(
color: Theme.of(context) color: Theme.of(context)
.extension<StackColors>()! .extension<StackColors>()!
.textSubtitle1, .textSubtitle1,

80
lib/utilities/text_styles.dart
View file

@ -13,31 +13,31 @@ class STextStyles {
return GoogleFonts.inter( return GoogleFonts.inter(
color: _theme(context).textDark3, color: _theme(context).textDark3,
fontWeight: FontWeight.w500, fontWeight: FontWeight.w500,
fontSize: 12, fontSize: 14,
); );
case ThemeType.oceanBreeze: case ThemeType.oceanBreeze:
return GoogleFonts.inter( return GoogleFonts.inter(
color: _theme(context).textDark3, color: _theme(context).textDark3,
fontWeight: FontWeight.w500, fontWeight: FontWeight.w500,
fontSize: 12, fontSize: 14,
); );
case ThemeType.dark: case ThemeType.dark:
return GoogleFonts.inter( return GoogleFonts.inter(
color: _theme(context).textDark3, color: _theme(context).textDark3,
fontWeight: FontWeight.w500, fontWeight: FontWeight.w500,
fontSize: 12, fontSize: 14,
); );
case ThemeType.oledBlack: case ThemeType.oledBlack:
return GoogleFonts.inter( return GoogleFonts.inter(
color: _theme(context).textDark3, color: _theme(context).textDark3,
fontWeight: FontWeight.w500, fontWeight: FontWeight.w500,
fontSize: 12, fontSize: 14,
); );
case ThemeType.fruitSorbet: case ThemeType.fruitSorbet:
return GoogleFonts.inter( return GoogleFonts.inter(
color: _theme(context).textDark3, color: _theme(context).textDark3,
fontWeight: FontWeight.w500, fontWeight: FontWeight.w500,
fontSize: 12, fontSize: 14,
); );
} }
} }
@ -932,6 +932,76 @@ class STextStyles {
} }
} }
static TextStyle w600_14(BuildContext context) {
switch (_theme(context).themeType) {
case ThemeType.light:
return GoogleFonts.inter(
color: _theme(context).textDark,
fontWeight: FontWeight.w600,
fontSize: 14,
);
case ThemeType.oceanBreeze:
return GoogleFonts.inter(
color: _theme(context).textDark,
fontWeight: FontWeight.w600,
fontSize: 14,
);
case ThemeType.dark:
return GoogleFonts.inter(
color: _theme(context).textDark,
fontWeight: FontWeight.w600,
fontSize: 14,
);
case ThemeType.oledBlack:
return GoogleFonts.inter(
color: _theme(context).textDark,
fontWeight: FontWeight.w600,
fontSize: 14,
);
case ThemeType.fruitSorbet:
return GoogleFonts.inter(
color: _theme(context).textDark,
fontWeight: FontWeight.w600,
fontSize: 14,
);
}
}
static TextStyle w500_14(BuildContext context) {
switch (_theme(context).themeType) {
case ThemeType.light:
return GoogleFonts.inter(
color: _theme(context).textDark,
fontWeight: FontWeight.w500,
fontSize: 14,
);
case ThemeType.oceanBreeze:
return GoogleFonts.inter(
color: _theme(context).textDark,
fontWeight: FontWeight.w500,
fontSize: 14,
);
case ThemeType.dark:
return GoogleFonts.inter(
color: _theme(context).textDark,
fontWeight: FontWeight.w500,
fontSize: 14,
);
case ThemeType.oledBlack:
return GoogleFonts.inter(
color: _theme(context).textDark,
fontWeight: FontWeight.w500,
fontSize: 14,
);
case ThemeType.fruitSorbet:
return GoogleFonts.inter(
color: _theme(context).textDark,
fontWeight: FontWeight.w500,
fontSize: 14,
);
}
}
static TextStyle w500_12(BuildContext context) { static TextStyle w500_12(BuildContext context) {
switch (_theme(context).themeType) { switch (_theme(context).themeType) {
case ThemeType.light: case ThemeType.light:

12
lib/widgets/custom_buttons/paynym_follow_toggle_button.dart
View file

@ -272,8 +272,8 @@ class _PaynymFollowToggleButtonState
switch (widget.style) { switch (widget.style) {
case PaynymFollowToggleButtonStyle.primary: case PaynymFollowToggleButtonStyle.primary:
return PrimaryButton( return PrimaryButton(
width: isDesktop ? 120 : 84, width: isDesktop ? 120 : 100,
buttonHeight: isDesktop ? ButtonHeight.s : ButtonHeight.l, buttonHeight: isDesktop ? ButtonHeight.s : ButtonHeight.xl,
label: isFollowing ? "Unfollow" : "Follow", label: isFollowing ? "Unfollow" : "Follow",
onPressed: _onPressed, onPressed: _onPressed,
); );
@ -281,15 +281,15 @@ class _PaynymFollowToggleButtonState
case PaynymFollowToggleButtonStyle.detailsPopup: case PaynymFollowToggleButtonStyle.detailsPopup:
return SecondaryButton( return SecondaryButton(
label: isFollowing ? "Unfollow" : "Follow", label: isFollowing ? "Unfollow" : "Follow",
buttonHeight: ButtonHeight.l, buttonHeight: ButtonHeight.xl,
iconSpacing: 8,
icon: SvgPicture.asset( icon: SvgPicture.asset(
isFollowing ? Assets.svg.userMinus : Assets.svg.userPlus, isFollowing ? Assets.svg.userMinus : Assets.svg.userPlus,
width: 10, width: 16,
height: 10, height: 16,
color: color:
Theme.of(context).extension<StackColors>()!.buttonTextSecondary, Theme.of(context).extension<StackColors>()!.buttonTextSecondary,
), ),
iconSpacing: 4,
onPressed: _onPressed, onPressed: _onPressed,
); );

10
lib/widgets/desktop/secondary_button.dart
View file

@ -78,6 +78,16 @@ class SecondaryButton extends StatelessWidget {
.buttonTextSecondaryDisabled, .buttonTextSecondaryDisabled,
); );
} }
if (buttonHeight == ButtonHeight.xl) {
return STextStyles.button(context).copyWith(
fontSize: 14,
color: enabled
? Theme.of(context).extension<StackColors>()!.buttonTextSecondary
: Theme.of(context)
.extension<StackColors>()!
.buttonTextSecondaryDisabled,
);
}
return STextStyles.button(context).copyWith( return STextStyles.button(context).copyWith(
color: enabled color: enabled
? Theme.of(context).extension<StackColors>()!.buttonTextSecondary ? Theme.of(context).extension<StackColors>()!.buttonTextSecondary