From 6a076724372c1dc248f249b03655643808bf0c77 Mon Sep 17 00:00:00 2001 From: julian Date: Wed, 1 Feb 2023 15:02:41 -0600 Subject: [PATCH] paynym mobile ui sizing changes --- .../paynym/dialogs/paynym_details_popup.dart | 42 +++++----- lib/pages/paynym/dialogs/paynym_qr_popup.dart | 15 ++-- lib/pages/paynym/paynym_home_view.dart | 30 +++---- .../subwidgets/desktop_paynym_details.dart | 2 +- lib/pages/paynym/subwidgets/paynym_card.dart | 6 +- .../paynym/subwidgets/paynym_card_button.dart | 6 +- lib/utilities/text_styles.dart | 80 +++++++++++++++++-- .../paynym_follow_toggle_button.dart | 12 +-- lib/widgets/desktop/secondary_button.dart | 10 +++ 9 files changed, 146 insertions(+), 57 deletions(-) diff --git a/lib/pages/paynym/dialogs/paynym_details_popup.dart b/lib/pages/paynym/dialogs/paynym_details_popup.dart index 83860280b..729ed5941 100644 --- a/lib/pages/paynym/dialogs/paynym_details_popup.dart +++ b/lib/pages/paynym/dialogs/paynym_details_popup.dart @@ -176,7 +176,7 @@ class _PaynymDetailsPopupState extends ConsumerState { children: [ PayNymBot( paymentCodeString: widget.accountLite.code, - size: 32, + size: 36, ), const SizedBox( width: 12, @@ -186,7 +186,7 @@ class _PaynymDetailsPopupState extends ConsumerState { children: [ Text( widget.accountLite.nymName, - style: STextStyles.w600_12(context), + style: STextStyles.w600_14(context), ), FutureBuilder( future: @@ -204,7 +204,7 @@ class _PaynymDetailsPopupState extends ConsumerState { ), Text( "Connected", - style: STextStyles.w500_10(context) + style: STextStyles.w500_12(context) .copyWith( color: Theme.of(context) .extension()! @@ -230,33 +230,33 @@ class _PaynymDetailsPopupState extends ConsumerState { if (snapshot.data!) { return PrimaryButton( label: "Send", - buttonHeight: ButtonHeight.l, + buttonHeight: ButtonHeight.xl, icon: SvgPicture.asset( Assets.svg.circleArrowUpRight, - width: 10, - height: 10, + width: 14, + height: 14, color: Theme.of(context) .extension()! .buttonTextPrimary, ), - iconSpacing: 4, - width: 86, + iconSpacing: 8, + width: 100, onPressed: _onSend, ); } else { return PrimaryButton( label: "Connect", - buttonHeight: ButtonHeight.l, + buttonHeight: ButtonHeight.xl, icon: SvgPicture.asset( Assets.svg.circlePlusFilled, - width: 10, - height: 10, + width: 13, + height: 13, color: Theme.of(context) .extension()! .buttonTextPrimary, ), - iconSpacing: 4, - width: 86, + iconSpacing: 8, + width: 128, onPressed: _onConnectPressed, ); } @@ -291,6 +291,7 @@ class _PaynymDetailsPopupState extends ConsumerState { color: Theme.of(context) .extension()! .warningForeground, + fontSize: 12, ), ), ), @@ -321,7 +322,9 @@ class _PaynymDetailsPopupState extends ConsumerState { children: [ Text( "PayNym address", - style: STextStyles.infoSmall(context), + style: STextStyles.infoSmall(context).copyWith( + fontSize: 12, + ), ), const SizedBox( height: 6, @@ -332,6 +335,7 @@ class _PaynymDetailsPopupState extends ConsumerState { color: Theme.of(context) .extension()! .textDark, + fontSize: 12, ), ), const SizedBox( @@ -346,7 +350,7 @@ class _PaynymDetailsPopupState extends ConsumerState { ), QrImage( padding: const EdgeInsets.all(0), - size: 86, + size: 100, data: widget.accountLite.code, foregroundColor: Theme.of(context).extension()!.textDark, @@ -375,16 +379,16 @@ class _PaynymDetailsPopupState extends ConsumerState { Expanded( child: SecondaryButton( label: "Copy", - buttonHeight: ButtonHeight.l, + buttonHeight: ButtonHeight.xl, + iconSpacing: 8, icon: SvgPicture.asset( Assets.svg.copy, - width: 10, - height: 10, + width: 12, + height: 12, color: Theme.of(context) .extension()! .buttonTextSecondary, ), - iconSpacing: 4, onPressed: () async { await Clipboard.setData( ClipboardData( diff --git a/lib/pages/paynym/dialogs/paynym_qr_popup.dart b/lib/pages/paynym/dialogs/paynym_qr_popup.dart index e712884b1..3ad985472 100644 --- a/lib/pages/paynym/dialogs/paynym_qr_popup.dart +++ b/lib/pages/paynym/dialogs/paynym_qr_popup.dart @@ -56,7 +56,7 @@ class PaynymQrPopup extends StatelessWidget { children: [ PayNymBot( paymentCodeString: paynymAccount.codes.first.code, - size: isDesktop ? 56 : 32, + size: isDesktop ? 56 : 36, ), const SizedBox( width: 12, @@ -65,7 +65,7 @@ class PaynymQrPopup extends StatelessWidget { paynymAccount.nymName, style: isDesktop ? STextStyles.w500_24(context) - : STextStyles.w600_12(context), + : STextStyles.w600_14(context), ), ], ), @@ -87,7 +87,7 @@ class PaynymQrPopup extends StatelessWidget { children: [ Expanded( child: ConstrainedBox( - constraints: const BoxConstraints(minHeight: 107), + constraints: const BoxConstraints(minHeight: 130), child: Column( crossAxisAlignment: CrossAxisAlignment.start, mainAxisAlignment: MainAxisAlignment.spaceBetween, @@ -100,7 +100,9 @@ class PaynymQrPopup extends StatelessWidget { .extension()! .textSubtitle1, ) - : STextStyles.infoSmall(context), + : STextStyles.infoSmall(context).copyWith( + fontSize: 12, + ), ), const SizedBox( height: 6, @@ -113,6 +115,7 @@ class PaynymQrPopup extends StatelessWidget { color: Theme.of(context) .extension()! .textDark, + fontSize: 12, ), ), const SizedBox( @@ -120,7 +123,7 @@ class PaynymQrPopup extends StatelessWidget { ), CustomTextButton( text: "Copy", - textSize: isDesktop ? 18 : 10, + textSize: isDesktop ? 18 : 14, onTap: () async { await Clipboard.setData( ClipboardData( @@ -146,7 +149,7 @@ class PaynymQrPopup extends StatelessWidget { ), QrImage( padding: const EdgeInsets.all(0), - size: 107, + size: 130, data: paynymAccount.codes.first.code, foregroundColor: Theme.of(context).extension()!.textDark, diff --git a/lib/pages/paynym/paynym_home_view.dart b/lib/pages/paynym/paynym_home_view.dart index b34c05b12..96baa5daf 100644 --- a/lib/pages/paynym/paynym_home_view.dart +++ b/lib/pages/paynym/paynym_home_view.dart @@ -303,7 +303,9 @@ class _PaynymHomeViewState extends ConsumerState { .code, 12, 5), - style: STextStyles.label(context), + style: STextStyles.label(context).copyWith( + fontSize: 14, + ), ), const SizedBox( height: 11, @@ -313,11 +315,11 @@ class _PaynymHomeViewState extends ConsumerState { Expanded( child: SecondaryButton( label: "Copy", - buttonHeight: ButtonHeight.l, - iconSpacing: 4, + buttonHeight: ButtonHeight.xl, + iconSpacing: 8, icon: CopyIcon( - width: 10, - height: 10, + width: 12, + height: 12, color: Theme.of(context) .extension()! .textDark, @@ -350,11 +352,11 @@ class _PaynymHomeViewState extends ConsumerState { Expanded( child: SecondaryButton( label: "Share", - buttonHeight: ButtonHeight.l, - iconSpacing: 4, + buttonHeight: ButtonHeight.xl, + iconSpacing: 8, icon: ShareIcon( - width: 10, - height: 10, + width: 12, + height: 12, color: Theme.of(context) .extension()! .textDark, @@ -387,11 +389,11 @@ class _PaynymHomeViewState extends ConsumerState { Expanded( child: SecondaryButton( label: "Address", - buttonHeight: ButtonHeight.l, - iconSpacing: 4, + buttonHeight: ButtonHeight.xl, + iconSpacing: 8, icon: QrCodeIcon( - width: 10, - height: 10, + width: 12, + height: 12, color: Theme.of(context) .extension()! .textDark, @@ -554,7 +556,7 @@ class _PaynymHomeViewState extends ConsumerState { child: child, ), child: SizedBox( - height: isDesktop ? 56 : 40, + height: isDesktop ? 56 : 48, width: isDesktop ? 490 : null, child: Toggle( onColor: Theme.of(context).extension()!.popupBG, diff --git a/lib/pages/paynym/subwidgets/desktop_paynym_details.dart b/lib/pages/paynym/subwidgets/desktop_paynym_details.dart index fd89999d6..2f7f05e9a 100644 --- a/lib/pages/paynym/subwidgets/desktop_paynym_details.dart +++ b/lib/pages/paynym/subwidgets/desktop_paynym_details.dart @@ -171,7 +171,7 @@ class _PaynymDetailsPopupState extends ConsumerState { children: [ PayNymBot( paymentCodeString: widget.accountLite.code, - size: 32, + size: 36, ), const SizedBox( width: 12, diff --git a/lib/pages/paynym/subwidgets/paynym_card.dart b/lib/pages/paynym/subwidgets/paynym_card.dart index be989a588..644e9e9bf 100644 --- a/lib/pages/paynym/subwidgets/paynym_card.dart +++ b/lib/pages/paynym/subwidgets/paynym_card.dart @@ -37,7 +37,7 @@ class _PaynymCardState extends State { child: Row( children: [ PayNymBot( - size: 32, + size: 36, paymentCodeString: widget.paymentCodeString, ), const SizedBox( @@ -56,7 +56,7 @@ class _PaynymCardState extends State { .extension()! .textFieldActiveText, ) - : STextStyles.w500_12(context), + : STextStyles.w500_14(context), ), const SizedBox( height: 2, @@ -65,7 +65,7 @@ class _PaynymCardState extends State { Format.shorten(widget.paymentCodeString, 12, 5), style: isDesktop ? STextStyles.desktopTextExtraExtraSmall(context) - : STextStyles.w500_12(context).copyWith( + : STextStyles.w500_14(context).copyWith( color: Theme.of(context) .extension()! .textSubtitle1, diff --git a/lib/pages/paynym/subwidgets/paynym_card_button.dart b/lib/pages/paynym/subwidgets/paynym_card_button.dart index 75c4d2cc0..6e51c85f8 100644 --- a/lib/pages/paynym/subwidgets/paynym_card_button.dart +++ b/lib/pages/paynym/subwidgets/paynym_card_button.dart @@ -77,7 +77,7 @@ class _PaynymCardButtonState extends ConsumerState { child: Row( children: [ PayNymBot( - size: 32, + size: 36, paymentCodeString: widget.accountLite.code, ), const SizedBox( @@ -96,7 +96,7 @@ class _PaynymCardButtonState extends ConsumerState { .extension()! .textFieldActiveText, ) - : STextStyles.w500_12(context), + : STextStyles.w500_14(context), ), const SizedBox( height: 2, @@ -105,7 +105,7 @@ class _PaynymCardButtonState extends ConsumerState { Format.shorten(widget.accountLite.code, 12, 5), style: isDesktop ? STextStyles.desktopTextExtraExtraSmall(context) - : STextStyles.w500_12(context).copyWith( + : STextStyles.w500_14(context).copyWith( color: Theme.of(context) .extension()! .textSubtitle1, diff --git a/lib/utilities/text_styles.dart b/lib/utilities/text_styles.dart index 91e06e45b..98878b6b6 100644 --- a/lib/utilities/text_styles.dart +++ b/lib/utilities/text_styles.dart @@ -13,31 +13,31 @@ class STextStyles { return GoogleFonts.inter( color: _theme(context).textDark3, fontWeight: FontWeight.w500, - fontSize: 12, + fontSize: 14, ); case ThemeType.oceanBreeze: return GoogleFonts.inter( color: _theme(context).textDark3, fontWeight: FontWeight.w500, - fontSize: 12, + fontSize: 14, ); case ThemeType.dark: return GoogleFonts.inter( color: _theme(context).textDark3, fontWeight: FontWeight.w500, - fontSize: 12, + fontSize: 14, ); case ThemeType.oledBlack: return GoogleFonts.inter( color: _theme(context).textDark3, fontWeight: FontWeight.w500, - fontSize: 12, + fontSize: 14, ); case ThemeType.fruitSorbet: return GoogleFonts.inter( color: _theme(context).textDark3, 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) { switch (_theme(context).themeType) { case ThemeType.light: diff --git a/lib/widgets/custom_buttons/paynym_follow_toggle_button.dart b/lib/widgets/custom_buttons/paynym_follow_toggle_button.dart index 5591a5ff3..e4235fef4 100644 --- a/lib/widgets/custom_buttons/paynym_follow_toggle_button.dart +++ b/lib/widgets/custom_buttons/paynym_follow_toggle_button.dart @@ -272,8 +272,8 @@ class _PaynymFollowToggleButtonState switch (widget.style) { case PaynymFollowToggleButtonStyle.primary: return PrimaryButton( - width: isDesktop ? 120 : 84, - buttonHeight: isDesktop ? ButtonHeight.s : ButtonHeight.l, + width: isDesktop ? 120 : 100, + buttonHeight: isDesktop ? ButtonHeight.s : ButtonHeight.xl, label: isFollowing ? "Unfollow" : "Follow", onPressed: _onPressed, ); @@ -281,15 +281,15 @@ class _PaynymFollowToggleButtonState case PaynymFollowToggleButtonStyle.detailsPopup: return SecondaryButton( label: isFollowing ? "Unfollow" : "Follow", - buttonHeight: ButtonHeight.l, + buttonHeight: ButtonHeight.xl, + iconSpacing: 8, icon: SvgPicture.asset( isFollowing ? Assets.svg.userMinus : Assets.svg.userPlus, - width: 10, - height: 10, + width: 16, + height: 16, color: Theme.of(context).extension()!.buttonTextSecondary, ), - iconSpacing: 4, onPressed: _onPressed, ); diff --git a/lib/widgets/desktop/secondary_button.dart b/lib/widgets/desktop/secondary_button.dart index 6dba6fdd8..6b4e46221 100644 --- a/lib/widgets/desktop/secondary_button.dart +++ b/lib/widgets/desktop/secondary_button.dart @@ -78,6 +78,16 @@ class SecondaryButton extends StatelessWidget { .buttonTextSecondaryDisabled, ); } + if (buttonHeight == ButtonHeight.xl) { + return STextStyles.button(context).copyWith( + fontSize: 14, + color: enabled + ? Theme.of(context).extension()!.buttonTextSecondary + : Theme.of(context) + .extension()! + .buttonTextSecondaryDisabled, + ); + } return STextStyles.button(context).copyWith( color: enabled ? Theme.of(context).extension()!.buttonTextSecondary