refactor: create ReceivePageTheme

This commit is contained in:
Rafael Saes 2023-07-05 14:49:47 -03:00
parent 26cdb9e0cb
commit 3f51f22982
13 changed files with 138 additions and 120 deletions

View file

@ -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<ReceivePageTheme>()!.currentTileBackgroundColor;
break;
case created:
indicatorColor = PaletteDark.brightGreen;

View file

@ -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<ReceivePageTheme>()!.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<ReceivePageTheme>()!.tilesTextColor,
),
)),
Text(
instruction.body,
style: textMedium(
color: Theme.of(context).textTheme!.displaySmall!.color!,
color: Theme.of(context).extension<ReceivePageTheme>()!.tilesTextColor,
),
)
];

View file

@ -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<ReceivePageTheme>()!.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<ReceivePageTheme>()!.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<ReceivePageTheme>()!.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<ReceivePageTheme>()!.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<ReceivePageTheme>()!.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<ReceivePageTheme>()!.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<ReceivePageTheme>()!.tilesTextColor),
),
SizedBox(height: 4),
Text(
subtitle,
style: textSmall(
color: Theme.of(context).textTheme!.displaySmall!.color!),
color: Theme.of(context).extension<ReceivePageTheme>()!.tilesTextColor),
),
],
);

View file

@ -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<ReceivePageTheme>()!.tilesTextColor,
),
)),
Text(
instruction.body,
style: textMedium(
color: Theme.of(context).textTheme!.displaySmall!.color!,
color: Theme.of(context).extension<ReceivePageTheme>()!.tilesTextColor,
),
)
];

View file

@ -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<ReceivePageTheme>()!.iconsColor,
decoration: TextDecoration.none,
),
),

View file

@ -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<ReceivePageTheme>()!.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<ReceivePageTheme>()!.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<ReceivePageTheme>()!.currentTileBackgroundColor
: Theme.of(context).extension<ReceivePageTheme>()!.tilesBackgroundColor;
final textColor = isCurrent
? Theme.of(context)
.textTheme!
.displayMedium!
.color!
: Theme.of(context)
.textTheme!
.displaySmall!
.color!;
? Theme.of(context).extension<ReceivePageTheme>()!.currentTileTextColor
: Theme.of(context).extension<ReceivePageTheme>()!.tilesTextColor;
return AddressCell.fromItem(item,
isCurrent: isCurrent,

View file

@ -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<ReceivePageTheme>()!.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<ReceivePageTheme>()!.tilesTextColor),
),
Container(
height: 32,
width: 32,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Theme.of(context)
.textTheme!
.headlineMedium!
.decorationColor!),
color: Theme.of(context).extension<ReceivePageTheme>()!.iconsBackgroundColor),
child: icon,
)
],

View file

@ -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<ReceivePageTheme>()!.tilesTextColor
: selectionActive
? Palette.darkBlue
: Theme.of(context).textTheme!.displaySmall!.color;
: Theme.of(context).extension<ReceivePageTheme>()!.tilesTextColor;
return InkWell(
onTap: onTap,
hoverColor: Colors.transparent,

View file

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

View file

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

View file

@ -0,0 +1,70 @@
import 'package:flutter/material.dart';
class ReceivePageTheme extends ThemeExtension<ReceivePageTheme> {
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<ReceivePageTheme>? 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)!);
}
}

View file

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

View file

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