From 3f51f22982c98de86609c32a6b1149bcf0cab53c Mon Sep 17 00:00:00 2001 From: Rafael Saes Date: Wed, 5 Jul 2023 14:49:47 -0300 Subject: [PATCH] refactor: create ReceivePageTheme --- .../widgets/sync_indicator_icon.dart | 3 +- .../cards/ionia_buy_card_detail_page.dart | 7 +- .../ionia/cards/ionia_debit_card_page.dart | 26 +++---- .../cards/ionia_gift_card_detail_page.dart | 5 +- .../monero_accounts/widgets/account_tile.dart | 3 +- lib/src/screens/receive/receive_page.dart | 31 ++------ .../screens/receive/widgets/header_tile.dart | 10 ++- lib/src/widgets/setting_action_button.dart | 5 +- lib/themes/bright_theme.dart | 32 +++------ lib/themes/dark_theme.dart | 31 +++----- lib/themes/extensions/receive_page_theme.dart | 70 +++++++++++++++++++ lib/themes/light_theme.dart | 32 +++------ lib/themes/theme_base.dart | 3 + 13 files changed, 138 insertions(+), 120 deletions(-) create mode 100644 lib/themes/extensions/receive_page_theme.dart diff --git a/lib/src/screens/dashboard/widgets/sync_indicator_icon.dart b/lib/src/screens/dashboard/widgets/sync_indicator_icon.dart index 072475e09..11bde6dfa 100644 --- a/lib/src/screens/dashboard/widgets/sync_indicator_icon.dart +++ b/lib/src/screens/dashboard/widgets/sync_indicator_icon.dart @@ -1,4 +1,5 @@ import 'package:cake_wallet/themes/extensions/sync_indicator_theme.dart'; +import 'package:cake_wallet/themes/extensions/receive_page_theme.dart'; import 'package:flutter/material.dart'; import 'package:cake_wallet/palette.dart'; @@ -35,7 +36,7 @@ class SyncIndicatorIcon extends StatelessWidget { break; case actionRequired: indicatorColor = - Theme.of(context).textTheme!.displayMedium!.decorationColor!; + Theme.of(context).extension()!.currentTileBackgroundColor; break; case created: indicatorColor = PaletteDark.brightGreen; diff --git a/lib/src/screens/ionia/cards/ionia_buy_card_detail_page.dart b/lib/src/screens/ionia/cards/ionia_buy_card_detail_page.dart index c32bd2597..a131b7aa8 100644 --- a/lib/src/screens/ionia/cards/ionia_buy_card_detail_page.dart +++ b/lib/src/screens/ionia/cards/ionia_buy_card_detail_page.dart @@ -1,4 +1,5 @@ import 'package:cake_wallet/core/execution_state.dart'; +import 'package:cake_wallet/themes/extensions/receive_page_theme.dart'; import 'package:cake_wallet/themes/extensions/cake_text_theme.dart'; import 'package:cake_wallet/ionia/ionia_merchant.dart'; import 'package:cake_wallet/ionia/ionia_tip.dart'; @@ -236,7 +237,7 @@ class IoniaBuyGiftCardDetailPage extends BasePage { child: Text( ioniaPurchaseViewModel.ioniaMerchant.termsAndConditions, style: textMedium( - color: Theme.of(context).textTheme!.displaySmall!.color!, + color: Theme.of(context).extension()!.tilesTextColor, ), ), ), @@ -274,13 +275,13 @@ class IoniaBuyGiftCardDetailPage extends BasePage { child: Text( instruction.header, style: textLargeSemiBold( - color: Theme.of(context).textTheme!.displaySmall!.color!, + color: Theme.of(context).extension()!.tilesTextColor, ), )), Text( instruction.body, style: textMedium( - color: Theme.of(context).textTheme!.displaySmall!.color!, + color: Theme.of(context).extension()!.tilesTextColor, ), ) ]; diff --git a/lib/src/screens/ionia/cards/ionia_debit_card_page.dart b/lib/src/screens/ionia/cards/ionia_debit_card_page.dart index 48db3c963..aa86f6e29 100644 --- a/lib/src/screens/ionia/cards/ionia_debit_card_page.dart +++ b/lib/src/screens/ionia/cards/ionia_debit_card_page.dart @@ -1,4 +1,5 @@ import 'package:cake_wallet/ionia/ionia_create_state.dart'; +import 'package:cake_wallet/themes/extensions/receive_page_theme.dart'; import 'package:cake_wallet/themes/extensions/cake_text_theme.dart'; import 'package:cake_wallet/ionia/ionia_virtual_card.dart'; import 'package:cake_wallet/routes.dart'; @@ -55,10 +56,7 @@ class IoniaDebitCardPage extends BasePage { child: Text( S.of(context).billing_address_info, style: textSmall( - color: Theme.of(context) - .textTheme! - .headlineMedium! - .color!), + color: Theme.of(context).extension()!.iconsColor), textAlign: TextAlign.center, ), ), @@ -67,7 +65,7 @@ class IoniaDebitCardPage extends BasePage { text: S.of(context).order_physical_card, onPressed: () {}, color: Color(0xffE9F2FC), - textColor: Theme.of(context).textTheme!.displaySmall!.color!, + textColor: Theme.of(context).extension()!.tilesTextColor, ), SizedBox(height: 8), PrimaryButton( @@ -121,15 +119,12 @@ class IoniaDebitCardPage extends BasePage { text: S.of(context).get_a, style: textMedium( color: - Theme.of(context).textTheme!.displaySmall!.color!), + Theme.of(context).extension()!.tilesTextColor), children: [ TextSpan( text: S.of(context).digital_and_physical_card, style: textMediumBold( - color: Theme.of(context) - .textTheme! - .displaySmall! - .color!), + color: Theme.of(context).extension()!.tilesTextColor), ), TextSpan( text: S.of(context).get_card_note, @@ -188,10 +183,7 @@ class IoniaDebitCardPage extends BasePage { child: Text( S.of(context).signup_for_card_accept_terms, style: textSmallSemiBold( - color: Theme.of(context) - .textTheme! - .displaySmall! - .color!, + color: Theme.of(context).extension()!.tilesTextColor, ), ), ), @@ -213,7 +205,7 @@ class IoniaDebitCardPage extends BasePage { text: S.of(context).send_got_it, color: Color.fromRGBO(233, 242, 252, 1), textColor: - Theme.of(context).textTheme!.displaySmall!.color!, + Theme.of(context).extension()!.tilesTextColor, ), SizedBox(height: 21), ], @@ -387,13 +379,13 @@ class _TitleSubtitleTile extends StatelessWidget { Text( title, style: textSmallSemiBold( - color: Theme.of(context).textTheme!.displaySmall!.color!), + color: Theme.of(context).extension()!.tilesTextColor), ), SizedBox(height: 4), Text( subtitle, style: textSmall( - color: Theme.of(context).textTheme!.displaySmall!.color!), + color: Theme.of(context).extension()!.tilesTextColor), ), ], ); diff --git a/lib/src/screens/ionia/cards/ionia_gift_card_detail_page.dart b/lib/src/screens/ionia/cards/ionia_gift_card_detail_page.dart index 37e1ef0f5..d345042ca 100644 --- a/lib/src/screens/ionia/cards/ionia_gift_card_detail_page.dart +++ b/lib/src/screens/ionia/cards/ionia_gift_card_detail_page.dart @@ -1,4 +1,5 @@ import 'package:cake_wallet/core/execution_state.dart'; +import 'package:cake_wallet/themes/extensions/receive_page_theme.dart'; import 'package:cake_wallet/themes/extensions/cake_text_theme.dart'; import 'package:cake_wallet/ionia/ionia_gift_card.dart'; import 'package:cake_wallet/routes.dart'; @@ -199,13 +200,13 @@ class IoniaGiftCardDetailPage extends BasePage { child: Text( instruction.header, style: textLargeSemiBold( - color: Theme.of(context).textTheme!.displaySmall!.color!, + color: Theme.of(context).extension()!.tilesTextColor, ), )), Text( instruction.body, style: textMedium( - color: Theme.of(context).textTheme!.displaySmall!.color!, + color: Theme.of(context).extension()!.tilesTextColor, ), ) ]; diff --git a/lib/src/screens/monero_accounts/widgets/account_tile.dart b/lib/src/screens/monero_accounts/widgets/account_tile.dart index 2c778cc74..0ad102688 100644 --- a/lib/src/screens/monero_accounts/widgets/account_tile.dart +++ b/lib/src/screens/monero_accounts/widgets/account_tile.dart @@ -1,4 +1,5 @@ import 'package:cake_wallet/themes/extensions/account_list_theme.dart'; +import 'package:cake_wallet/themes/extensions/receive_page_theme.dart'; import 'package:flutter/material.dart'; class AccountTile extends StatelessWidget { @@ -58,7 +59,7 @@ class AccountTile extends StatelessWidget { fontSize: 15, fontWeight: FontWeight.w600, fontFamily: 'Lato', - color: Theme.of(context).textTheme!.headlineMedium!.color!, + color: Theme.of(context).extension()!.iconsColor, decoration: TextDecoration.none, ), ), diff --git a/lib/src/screens/receive/receive_page.dart b/lib/src/screens/receive/receive_page.dart index c7dbedbe1..005f32896 100644 --- a/lib/src/screens/receive/receive_page.dart +++ b/lib/src/screens/receive/receive_page.dart @@ -1,4 +1,5 @@ import 'package:cake_wallet/themes/extensions/keyboard_theme.dart'; +import 'package:cake_wallet/themes/extensions/receive_page_theme.dart'; import 'package:cake_wallet/src/widgets/gradient_background.dart'; import 'package:cake_wallet/src/widgets/keyboard_done_button.dart'; import 'package:cake_wallet/src/widgets/section_divider.dart'; @@ -147,10 +148,7 @@ class ReceivePage extends BasePage { icon: Icon( Icons.arrow_forward_ios, size: 14, - color: Theme.of(context) - .textTheme! - .headlineMedium! - .color!, + color: Theme.of(context).extension()!.iconsColor, )); } @@ -162,10 +160,7 @@ class ReceivePage extends BasePage { icon: Icon( Icons.add, size: 20, - color: Theme.of(context) - .textTheme! - .headlineMedium! - .color!, + color: Theme.of(context).extension()!.iconsColor, )); } @@ -174,23 +169,11 @@ class ReceivePage extends BasePage { final isCurrent = item.address == addressListViewModel.address.address; final backgroundColor = isCurrent - ? Theme.of(context) - .textTheme! - .displayMedium! - .decorationColor! - : Theme.of(context) - .textTheme! - .displaySmall! - .decorationColor!; + ? Theme.of(context).extension()!.currentTileBackgroundColor + : Theme.of(context).extension()!.tilesBackgroundColor; final textColor = isCurrent - ? Theme.of(context) - .textTheme! - .displayMedium! - .color! - : Theme.of(context) - .textTheme! - .displaySmall! - .color!; + ? Theme.of(context).extension()!.currentTileTextColor + : Theme.of(context).extension()!.tilesTextColor; return AddressCell.fromItem(item, isCurrent: isCurrent, diff --git a/lib/src/screens/receive/widgets/header_tile.dart b/lib/src/screens/receive/widgets/header_tile.dart index ef9cd7779..a38549f73 100644 --- a/lib/src/screens/receive/widgets/header_tile.dart +++ b/lib/src/screens/receive/widgets/header_tile.dart @@ -1,4 +1,5 @@ import 'package:flutter/material.dart'; +import 'package:cake_wallet/themes/extensions/receive_page_theme.dart'; class HeaderTile extends StatelessWidget { HeaderTile({ @@ -22,7 +23,7 @@ class HeaderTile extends StatelessWidget { top: 24, bottom: 24 ), - color: Theme.of(context).textTheme!.displaySmall!.decorationColor!, + color: Theme.of(context).extension()!.tilesBackgroundColor, child: Row( mainAxisSize: MainAxisSize.max, mainAxisAlignment: MainAxisAlignment.spaceBetween, @@ -32,17 +33,14 @@ class HeaderTile extends StatelessWidget { style: TextStyle( fontSize: 18, fontWeight: FontWeight.w600, - color: Theme.of(context)!.textTheme.displaySmall!.color!), + color: Theme.of(context)!.extension()!.tilesTextColor), ), Container( height: 32, width: 32, decoration: BoxDecoration( shape: BoxShape.circle, - color: Theme.of(context) - .textTheme! - .headlineMedium! - .decorationColor!), + color: Theme.of(context).extension()!.iconsBackgroundColor), child: icon, ) ], diff --git a/lib/src/widgets/setting_action_button.dart b/lib/src/widgets/setting_action_button.dart index 939e6b857..6bdccc89a 100644 --- a/lib/src/widgets/setting_action_button.dart +++ b/lib/src/widgets/setting_action_button.dart @@ -1,4 +1,5 @@ import 'package:cake_wallet/palette.dart'; +import 'package:cake_wallet/themes/extensions/receive_page_theme.dart'; import 'package:flutter/material.dart'; class SettingActionButton extends StatelessWidget { @@ -29,10 +30,10 @@ class SettingActionButton extends StatelessWidget { @override Widget build(BuildContext context) { Color? color = isSelected - ? Theme.of(context).textTheme!.displaySmall!.color + ? Theme.of(context).extension()!.tilesTextColor : selectionActive ? Palette.darkBlue - : Theme.of(context).textTheme!.displaySmall!.color; + : Theme.of(context).extension()!.tilesTextColor; return InkWell( onTap: onTap, hoverColor: Colors.transparent, diff --git a/lib/themes/bright_theme.dart b/lib/themes/bright_theme.dart index d7519c8fc..c1f6292f8 100644 --- a/lib/themes/bright_theme.dart +++ b/lib/themes/bright_theme.dart @@ -96,10 +96,18 @@ class BrightTheme extends LightTheme { .transactionTradeTheme .copyWith(rowsColor: Colors.white.withOpacity(0.2)); + @override + ReceivePageTheme get receivePageTheme => super.receivePageTheme.copyWith( + currentTileBackgroundColor: Palette.moderateSlateBlue, + tilesBackgroundColor: Colors.white, + iconsBackgroundColor: Palette.lavender, + amountBottomBorderColor: Colors.white.withOpacity(0.5), + amountHintTextColor: Colors.white, + ); + @override ThemeData get themeData => super.themeData.copyWith( indicatorColor: Colors.white.withOpacity(0.5), // page indicator - hoverColor: Colors.white, // amount hint text (receive page) dividerColor: Palette.paleBlue, hintColor: Palette.gray, textTheme: TextTheme( @@ -116,29 +124,7 @@ class BrightTheme extends LightTheme { // headline -> headlineSmall headlineSmall: TextStyle( color: Colors.white, // qr code - decorationColor: Colors.white - .withOpacity(0.5), // bottom border of amount (receive page) ), - // display1 -> headlineMedium - headlineMedium: TextStyle( - color: PaletteDark.lightBlueGrey, // icons color (receive page) - decorationColor: - Palette.lavender, // icons background (receive page) - ), - // display2 -> displaySmall - displaySmall: TextStyle( - color: - Palette.darkBlueCraiola, // text color of tiles (receive page) - decorationColor: - Colors.white // background of tiles (receive page) - ), - // display3 -> displayMedium - displayMedium: TextStyle( - color: Colors.white, // text color of current tile (receive page), - //decorationColor: Palette.blueCraiola // background of current tile (receive page) - decorationColor: Palette - .moderateSlateBlue // background of current tile (receive page) - ), ), ); } diff --git a/lib/themes/dark_theme.dart b/lib/themes/dark_theme.dart index bf2a982c2..63957b70e 100644 --- a/lib/themes/dark_theme.dart +++ b/lib/themes/dark_theme.dart @@ -178,10 +178,20 @@ class DarkTheme extends ThemeBase { tilesBackgroundColor: PaletteDark.darkOceanBlue, tilesTextColor: Colors.white); + @override + ReceivePageTheme get receivePageTheme => ReceivePageTheme( + currentTileBackgroundColor: PaletteDark.lightOceanBlue, + currentTileTextColor: Palette.blueCraiola, + tilesBackgroundColor: PaletteDark.nightBlue, + tilesTextColor: Colors.white, + iconsBackgroundColor: PaletteDark.distantNightBlue, + iconsColor: Colors.white, + amountBottomBorderColor: PaletteDark.darkGrey, + amountHintTextColor: PaletteDark.cyanBlue); + @override ThemeData get themeData => super.themeData.copyWith( indicatorColor: PaletteDark.cyanBlue, // page indicator - hoverColor: PaletteDark.cyanBlue, // amount hint text (receive page) dividerColor: PaletteDark.dividerColor, hintColor: PaletteDark.pigeonBlue, disabledColor: PaletteDark.deepVioletBlue, @@ -201,26 +211,7 @@ class DarkTheme extends ThemeBase { // headline -> headlineSmall headlineSmall: TextStyle( color: PaletteDark.lightBlueGrey, // qr code - decorationColor: PaletteDark.darkGrey, // bottom border of amount (receive page) ), - // display1 -> headlineMedium - headlineMedium: TextStyle( - color: Colors.white, // icons color (receive page) - decorationColor: PaletteDark.distantNightBlue, // icons background (receive page) - ), - // display2 -> displaySmall - displaySmall: TextStyle( - color: Colors.white, // text color of tiles (receive page) - decorationColor: - PaletteDark.nightBlue // background of tiles (receive page) - ), - // display3 -> displayMedium - displayMedium: TextStyle( - color: Palette - .blueCraiola, // text color of current tile (receive page) - decorationColor: PaletteDark - .lightOceanBlue // background of current tile (receive page) - ), ), ); } diff --git a/lib/themes/extensions/receive_page_theme.dart b/lib/themes/extensions/receive_page_theme.dart new file mode 100644 index 000000000..0974598d9 --- /dev/null +++ b/lib/themes/extensions/receive_page_theme.dart @@ -0,0 +1,70 @@ +import 'package:flutter/material.dart'; + +class ReceivePageTheme extends ThemeExtension { + final Color currentTileBackgroundColor; + final Color currentTileTextColor; + final Color tilesBackgroundColor; + final Color tilesTextColor; + final Color iconsBackgroundColor; + final Color iconsColor; + final Color amountBottomBorderColor; + final Color amountHintTextColor; + + ReceivePageTheme( + {required this.currentTileBackgroundColor, + required this.currentTileTextColor, + required this.tilesBackgroundColor, + required this.tilesTextColor, + required this.iconsBackgroundColor, + required this.iconsColor, + required this.amountBottomBorderColor, + required this.amountHintTextColor}); + + @override + ReceivePageTheme copyWith( + {Color? currentTileBackgroundColor, + Color? currentTileTextColor, + Color? tilesBackgroundColor, + Color? tilesTextColor, + Color? iconsBackgroundColor, + Color? iconsColor, + Color? amountBottomBorderColor, + Color? amountHintTextColor}) => + ReceivePageTheme( + currentTileBackgroundColor: + currentTileBackgroundColor ?? this.currentTileBackgroundColor, + currentTileTextColor: + currentTileTextColor ?? this.currentTileTextColor, + tilesBackgroundColor: + tilesBackgroundColor ?? this.tilesBackgroundColor, + tilesTextColor: tilesTextColor ?? this.tilesTextColor, + iconsBackgroundColor: + iconsBackgroundColor ?? this.iconsBackgroundColor, + iconsColor: iconsColor ?? this.iconsColor, + amountBottomBorderColor: + amountBottomBorderColor ?? this.amountBottomBorderColor, + amountHintTextColor: amountHintTextColor ?? this.amountHintTextColor); + + @override + ReceivePageTheme lerp(ThemeExtension? other, double t) { + if (other is! ReceivePageTheme) { + return this; + } + + return ReceivePageTheme( + currentTileBackgroundColor: Color.lerp( + currentTileBackgroundColor, other.currentTileBackgroundColor, t)!, + currentTileTextColor: + Color.lerp(currentTileTextColor, other.currentTileTextColor, t)!, + tilesBackgroundColor: + Color.lerp(tilesBackgroundColor, other.tilesBackgroundColor, t)!, + tilesTextColor: Color.lerp(tilesTextColor, other.tilesTextColor, t)!, + iconsBackgroundColor: + Color.lerp(iconsBackgroundColor, other.iconsBackgroundColor, t)!, + iconsColor: Color.lerp(iconsColor, other.iconsColor, t)!, + amountBottomBorderColor: Color.lerp( + amountBottomBorderColor, other.amountBottomBorderColor, t)!, + amountHintTextColor: + Color.lerp(amountHintTextColor, other.amountHintTextColor, t)!); + } +} diff --git a/lib/themes/light_theme.dart b/lib/themes/light_theme.dart index b29e122ef..75a9de85a 100644 --- a/lib/themes/light_theme.dart +++ b/lib/themes/light_theme.dart @@ -180,11 +180,21 @@ class LightTheme extends ThemeBase { tilesBackgroundColor: Colors.white, tilesTextColor: Palette.violetBlue); + @override + ReceivePageTheme get receivePageTheme => ReceivePageTheme( + currentTileBackgroundColor: Palette.blueCraiola, + currentTileTextColor: Colors.white, + tilesBackgroundColor: Palette.blueAlice, + tilesTextColor: Palette.darkBlueCraiola, + iconsBackgroundColor: Palette.moderateLavender, + iconsColor: PaletteDark.lightBlueGrey, + amountBottomBorderColor: Palette.darkBlueCraiola, + amountHintTextColor: Palette.darkBlueCraiola); + @override ThemeData get themeData => super.themeData.copyWith( indicatorColor: PaletteDark.darkCyanBlue.withOpacity(0.67), // page indicator - hoverColor: Palette.darkBlueCraiola, // amount hint text (receive page) dividerColor: Palette.paleBlue, hintColor: Palette.gray, disabledColor: Palette.darkGray, @@ -204,27 +214,7 @@ class LightTheme extends ThemeBase { // headline -> headlineSmall headlineSmall: TextStyle( color: Colors.white, // qr code - decorationColor: Palette.darkBlueCraiola, // bottom border of amount (receive page) ), - // display1 -> headlineMedium - headlineMedium: TextStyle( - color: PaletteDark.lightBlueGrey, // icons color (receive page) - decorationColor: Palette.moderateLavender, // icons background (receive page) - ), - // display2 -> headldisplaySmalline3 - displaySmall: TextStyle( - color: - Palette.darkBlueCraiola, // text color of tiles (receive page) - decorationColor: - Palette.blueAlice // background of tiles (receive page) - ), - // display3 -> displayMedium - displayMedium: TextStyle( - color: Colors.white, // text color of current tile (receive page), - //decorationColor: Palette.blueCraiola // background of current tile (receive page) - decorationColor: Palette - .blueCraiola // background of current tile (receive page) - ), ), ); } diff --git a/lib/themes/theme_base.dart b/lib/themes/theme_base.dart index 00c5d3126..97919e631 100644 --- a/lib/themes/theme_base.dart +++ b/lib/themes/theme_base.dart @@ -102,6 +102,8 @@ abstract class ThemeBase { AccountListTheme get accountListTheme; + ReceivePageTheme get receivePageTheme; + ThemeData get themeData => generatedThemeData.copyWith( primaryColor: primaryColor, cardColor: containerColor, @@ -130,6 +132,7 @@ abstract class ThemeBase { transactionTradeTheme, cakeTextTheme, accountListTheme, + receivePageTheme, ], scrollbarTheme: ScrollbarThemeData( thumbColor: MaterialStateProperty.all(scrollbarTheme.thumbColor),