refactor: create ReceivePageTheme

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

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<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,
                           ),
                         )
                       ];

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)
+                        color: Theme.of(context).extension<ReceivePageTheme>()!.iconsColor),
-                            .textTheme!
-                            .headlineMedium!
-                            .color!),
                     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)
+                            color: Theme.of(context).extension<ReceivePageTheme>()!.tilesTextColor),
-                                .textTheme!
-                                .displaySmall!
-                                .color!),
                       ),
                       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)
+                              color: Theme.of(context).extension<ReceivePageTheme>()!.tilesTextColor,
-                                  .textTheme!
-                                  .displaySmall!
-                                  .color!,
                             ),
                           ),
                         ),
@@ -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),
         ),
       ],
     );

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

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

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)
+                                    color: Theme.of(context).extension<ReceivePageTheme>()!.iconsColor,
-                                        .textTheme!
-                                        .headlineMedium!
-                                        .color!,
                                   ));
                             }
 
@@ -162,10 +160,7 @@ class ReceivePage extends BasePage {
                                   icon: Icon(
                                     Icons.add,
                                     size: 20,
-                                    color: Theme.of(context)
+                                    color: Theme.of(context).extension<ReceivePageTheme>()!.iconsColor,
-                                        .textTheme!
-                                        .headlineMedium!
-                                        .color!,
                                   ));
                             }
 
@@ -174,23 +169,11 @@ class ReceivePage extends BasePage {
                                 final isCurrent =
                                     item.address == addressListViewModel.address.address;
                                 final backgroundColor = isCurrent
-                                    ? Theme.of(context)
+                                    ? Theme.of(context).extension<ReceivePageTheme>()!.currentTileBackgroundColor
-                                        .textTheme!
+                                    : Theme.of(context).extension<ReceivePageTheme>()!.tilesBackgroundColor;
-                                        .displayMedium!
-                                        .decorationColor!
-                                    : Theme.of(context)
-                                        .textTheme!
-                                        .displaySmall!
-                                        .decorationColor!;
                                 final textColor = isCurrent
-                                    ? Theme.of(context)
+                                    ? Theme.of(context).extension<ReceivePageTheme>()!.currentTileTextColor
-                                        .textTheme!
+                                    : Theme.of(context).extension<ReceivePageTheme>()!.tilesTextColor;
-                                        .displayMedium!
-                                        .color!
-                                    : Theme.of(context)
-                                        .textTheme!
-                                        .displaySmall!
-                                        .color!;
 
                                 return AddressCell.fromItem(item,
                                     isCurrent: isCurrent,

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<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)
+                  color: Theme.of(context).extension<ReceivePageTheme>()!.iconsBackgroundColor),
-                      .textTheme!
-                      .headlineMedium!
-                      .decorationColor!),
               child: icon,
             )
           ],

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

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

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

lib/themes/extensions/receive_page_theme.dart

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

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

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