refactor: create CakeMenuTheme

lib/src/screens/dashboard/widgets/filter_widget.dart

@@ -1,6 +1,7 @@
 import 'package:cake_wallet/src/screens/dashboard/widgets/filter_tile.dart';
 import 'package:cake_wallet/src/widgets/section_divider.dart';
 import 'package:cake_wallet/src/widgets/standard_checkbox.dart';
+import 'package:cake_wallet/themes/extensions/menu_theme.dart';
 import 'package:cake_wallet/view_model/dashboard/dashboard_view_model.dart';
 import 'package:flutter/material.dart';
 import 'package:cake_wallet/src/widgets/picker_wrapper_widget.dart';
@@ -23,7 +24,7 @@ class FilterWidget extends StatelessWidget {
           child: ClipRRect(
             borderRadius: BorderRadius.all(Radius.circular(24)),
             child: Container(
-              color: Theme.of(context).textTheme!.bodyLarge!.decorationColor!,
+              color: Theme.of(context).extension<CakeMenuTheme>()!.backgroundColor,
               child: Column(
                   crossAxisAlignment: CrossAxisAlignment.start,
                   children: [

lib/src/screens/dashboard/widgets/menu_widget.dart

@@ -1,5 +1,6 @@
 import 'package:cake_wallet/src/widgets/setting_action_button.dart';
 import 'package:cake_wallet/src/widgets/setting_actions.dart';
+import 'package:cake_wallet/themes/extensions/menu_theme.dart';
 import 'package:flutter/material.dart';
 import 'package:cake_wallet/palette.dart';
 import 'package:cake_wallet/view_model/dashboard/dashboard_view_model.dart';
@@ -84,15 +85,9 @@ class MenuWidgetState extends State<MenuWidget> {
     final itemCount = SettingActions.all.length;
 
     moneroIcon = Image.asset('assets/images/monero_menu.png',
-        color: Theme.of(context)
+        color: Theme.of(context).extension<CakeMenuTheme>()!.subnameTextColor);
-            .accentTextTheme!
-            .labelSmall!
-            .decorationColor!);
     bitcoinIcon = Image.asset('assets/images/bitcoin_menu.png',
-        color: Theme.of(context)
+        color: Theme.of(context).extension<CakeMenuTheme>()!.subnameTextColor);
-            .accentTextTheme!
-            .labelSmall!
-            .decorationColor!);
     litecoinIcon = Image.asset('assets/images/litecoin_menu.png');
     havenIcon = Image.asset('assets/images/haven_menu.png');
 
@@ -115,7 +110,7 @@ class MenuWidgetState extends State<MenuWidget> {
                     topLeft: Radius.circular(24), bottomLeft: Radius.circular(24)),
                 child: Container(
                   color:
-                      Theme.of(context).textTheme!.bodyLarge!.decorationColor!,
+                      Theme.of(context).extension<CakeMenuTheme>()!.backgroundColor,
                   child: ListView.separated(
                       padding: EdgeInsets.only(top: 0),
                       itemBuilder: (_, index) {
@@ -124,14 +119,8 @@ class MenuWidgetState extends State<MenuWidget> {
                             height: headerHeight,
                             decoration: BoxDecoration(
                               gradient: LinearGradient(colors: [
-                                Theme.of(context)
+                                Theme.of(context).extension<CakeMenuTheme>()!.headerFirstGradientColor,
-                                    .accentTextTheme!
+                                Theme.of(context).extension<CakeMenuTheme>()!.headerSecondGradientColor,                              ], begin: Alignment.topLeft, end: Alignment.bottomRight),
-                                    .headlineMedium!
-                                    .color!,
-                                Theme.of(context)
-                                    .accentTextTheme!
-                                    .headlineMedium!
-                                    .decorationColor!,                              ], begin: Alignment.topLeft, end: Alignment.bottomRight),
                             ),
                             padding: EdgeInsets.only(
                                 left: 24, top: fromTopEdge, right: 24, bottom: fromBottomEdge),
@@ -160,10 +149,7 @@ class MenuWidgetState extends State<MenuWidget> {
                                             builder: (_) => Text(
                                                   widget.dashboardViewModel.subname,
                                                   style: TextStyle(
-                                                      color: Theme.of(context)
+                                                      color: Theme.of(context).extension<CakeMenuTheme>()!.subnameTextColor,
-                                                          .accentTextTheme!
-                                                          .labelSmall!
-                                                          .decorationColor!,
                                                       fontWeight: FontWeight.w500,
                                                       fontSize: 12),
                                                 ))
@@ -194,10 +180,7 @@ class MenuWidgetState extends State<MenuWidget> {
                       },
                       separatorBuilder: (_, index) => Container(
                             height: 1,
-                            color: Theme.of(context)
+                            color: Theme.of(context).extension<CakeMenuTheme>()!.dividerColor,
-                                .primaryTextTheme!
-                                .bodySmall!
-                                .decorationColor!,
                           ),
                       itemCount: itemCount + 1),
                 )))

lib/src/screens/exchange_trade/information_page.dart

@@ -5,6 +5,7 @@ import 'package:cake_wallet/themes/extensions/exchange_page_theme.dart';
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 import 'package:cake_wallet/src/widgets/alert_background.dart';
+import 'package:cake_wallet/themes/extensions/menu_theme.dart';
 
 class InformationPage extends StatelessWidget {
   InformationPage({required this.information});
@@ -22,7 +23,7 @@ class InformationPage extends StatelessWidget {
           ),
           decoration: BoxDecoration(
             borderRadius: BorderRadius.all(Radius.circular(30)),
-            color: Theme.of(context).textTheme!.bodyLarge!.decorationColor!
+            color: Theme.of(context).extension<CakeMenuTheme>()!.backgroundColor
           ),
           child: Column(
             mainAxisSize: MainAxisSize.min,

lib/src/screens/ionia/widgets/ionia_filter_modal.dart

@@ -6,6 +6,7 @@ import 'package:cake_wallet/view_model/ionia/ionia_gift_cards_list_view_model.da
 import 'package:flutter/material.dart';
 import 'package:flutter_mobx/flutter_mobx.dart';
 import 'package:cake_wallet/palette.dart';
+import 'package:cake_wallet/themes/extensions/menu_theme.dart';
 
 class IoniaFilterModal extends StatelessWidget {
   IoniaFilterModal({required this.ioniaGiftCardsListViewModel}){
@@ -53,7 +54,7 @@ class IoniaFilterModal extends StatelessWidget {
                           prefixIcon: searchIcon,
                           hintText: S.of(context).search_category,
                           contentPadding: EdgeInsets.only(bottom: 5),
-                          fillColor: Theme.of(context).primaryTextTheme!.bodySmall!.decorationColor!.withOpacity(0.5),
+                          fillColor: Theme.of(context).extension<CakeMenuTheme>()!.dividerColor.withOpacity(0.5),
                           border: OutlineInputBorder(
                             borderSide: BorderSide.none,
                             borderRadius: BorderRadius.circular(8),

lib/src/screens/settings/desktop_settings/desktop_settings_page.dart

@@ -5,6 +5,7 @@ import 'package:cake_wallet/src/widgets/setting_actions.dart';
 import 'package:cake_wallet/typography.dart';
 import 'package:flutter/material.dart';
 import 'package:cake_wallet/router.dart' as Router;
+import 'package:cake_wallet/themes/extensions/menu_theme.dart';
 
 final _settingsNavigatorKey = GlobalKey<NavigatorState>();
 
@@ -71,10 +72,7 @@ class _DesktopSettingsPageState extends State<DesktopSettingsPage> {
                       },
                       separatorBuilder: (_, index) => Container(
                         height: 1,
-                        color: Theme.of(context)
+                        color: Theme.of(context).extension<CakeMenuTheme>()!.dividerColor,
-                            .primaryTextTheme!
-                            .bodySmall!
-                            .decorationColor!,
                       ),
                       itemCount: itemCount,
                     ),

lib/themes/bright_theme.dart

@@ -2,6 +2,7 @@ import 'package:cake_wallet/themes/extensions/balance_page_theme.dart';
 import 'package:cake_wallet/themes/extensions/dashboard_page_theme.dart';
 import 'package:cake_wallet/themes/extensions/exchange_page_theme.dart';
 import 'package:cake_wallet/themes/extensions/indicator_dot_theme.dart';
+import 'package:cake_wallet/themes/extensions/menu_theme.dart';
 import 'package:cake_wallet/themes/extensions/new_wallet_theme.dart';
 import 'package:cake_wallet/themes/extensions/sync_indicator_theme.dart';
 import 'package:cake_wallet/themes/light_theme.dart';
@@ -56,6 +57,11 @@ class BrightTheme extends LightTheme {
   BalancePageTheme get balancePageTheme =>
       BalancePageTheme(textColor: Colors.white.withOpacity(0.5));
 
+  @override
+  CakeMenuTheme get menuTheme => super.menuTheme.copyWith(
+      headerSecondGradientColor: Palette.pinkFlamingo,
+      iconColor: PaletteDark.pigeonBlue);
+
   @override
   ThemeData get themeData => super.themeData.copyWith(
       indicatorColor: Colors.white.withOpacity(0.5), // page indicator
@@ -111,11 +117,7 @@ class BrightTheme extends LightTheme {
               decorationColor:
                   Colors.white // background of tiles (account list)
               ),
-          // body2 -> bodyLarge
+          ),
-          bodyLarge: TextStyle(
-            color: Palette.moderateLavender, // menu header
-            decorationColor: Colors.white, // menu background
-          )),
       primaryTextTheme: TextTheme(
           titleLarge: TextStyle(
               color: Palette.darkBlueCraiola, // title color
@@ -123,7 +125,6 @@ class BrightTheme extends LightTheme {
               ),
           bodySmall: TextStyle(
               color: PaletteDark.pigeonBlue, // secondary text
-              decorationColor: Palette.wildLavender // menu divider
               ),
           labelSmall: TextStyle(
             color: Palette.darkGray, // transaction/trade details titles
@@ -201,13 +202,6 @@ class BrightTheme extends LightTheme {
             ),
         labelSmall: TextStyle(
           color: Palette.wildPeriwinkle, // checkbox bounds (filter widget)
-          decorationColor: Colors.white, // menu subname
         ),
-        // display1 -> headlineMedium
-        headlineMedium: TextStyle(
-            color: Palette.blueCraiola, // first gradient color (menu header)
-            decorationColor:
-                Palette.pinkFlamingo, // second gradient color(menu header)
-            ),
       ));
 }

lib/themes/dark_theme.dart

@@ -5,6 +5,7 @@ import 'package:cake_wallet/themes/extensions/dashboard_page_theme.dart';
 import 'package:cake_wallet/themes/extensions/exchange_page_theme.dart';
 import 'package:cake_wallet/themes/extensions/indicator_dot_theme.dart';
 import 'package:cake_wallet/themes/extensions/keyboard_theme.dart';
+import 'package:cake_wallet/themes/extensions/menu_theme.dart';
 import 'package:cake_wallet/themes/extensions/new_wallet_theme.dart';
 import 'package:cake_wallet/themes/extensions/pin_code_theme.dart';
 import 'package:cake_wallet/themes/extensions/support_page_theme.dart';
@@ -93,12 +94,21 @@ class DarkTheme extends ThemeBase {
               indicatorColor: PaletteDark.cyanBlue,
               activeIndicatorColor: Colors.white));
 
+  @override
+  CakeMenuTheme get menuTheme => CakeMenuTheme(
+      headerFirstGradientColor: PaletteDark.deepPurpleBlue,
+      headerSecondGradientColor: PaletteDark.deepPurpleBlue,
+      backgroundColor: PaletteDark.deepPurpleBlue,
+      subnameTextColor: PaletteDark.darkCyanBlue,
+      dividerColor: PaletteDark.darkOceanBlue,
+      iconColor: PaletteDark.pigeonBlue);
+
   @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, // menu
+      hintColor: PaletteDark.pigeonBlue,
       disabledColor: PaletteDark.deepVioletBlue,
       dialogTheme: super
           .themeData
@@ -148,11 +158,6 @@ class DarkTheme extends ThemeBase {
               decorationColor: PaletteDark
                   .darkOceanBlue // background of tiles (account list)
               ),
-          // body2 -> bodyLarge
-          bodyLarge: TextStyle(
-            color: PaletteDark.deepPurpleBlue, // menu header
-            decorationColor: PaletteDark.deepPurpleBlue, // menu background
-          )
       ),
       primaryTextTheme: TextTheme(
           // title -> titleLarge
@@ -162,7 +167,6 @@ class DarkTheme extends ThemeBase {
               ),
           bodySmall: TextStyle(
               color: PaletteDark.darkCyanBlue, // secondary text
-              decorationColor: PaletteDark.darkOceanBlue // menu divider
               ),
           labelSmall: TextStyle(
             color:
@@ -243,15 +247,7 @@ class DarkTheme extends ThemeBase {
             ),
         labelSmall: TextStyle(
           color: PaletteDark.wildVioletBlue, // checkbox bounds (filter widget)
-          decorationColor: PaletteDark.darkCyanBlue, // menu subname
         ),
-        // display1 -> headlineMedium
-        headlineMedium: TextStyle(
-            color: PaletteDark
-                .deepPurpleBlue, // first gradient color (menu header)
-            decorationColor: PaletteDark
-                .deepPurpleBlue, // second gradient color(menu header)
-            ),
       ),
       );
 }

lib/themes/extensions/menu_theme.dart

@@ -0,0 +1,60 @@
+import 'package:flutter/material.dart';
+
+class CakeMenuTheme extends ThemeExtension<CakeMenuTheme> {
+  final Color headerFirstGradientColor;
+  final Color headerSecondGradientColor;
+  final Color subnameTextColor;
+  final Color dividerColor;
+  final Color backgroundColor;
+  final Color iconColor;
+
+  CakeMenuTheme(
+      {required this.headerFirstGradientColor,
+      required this.headerSecondGradientColor,
+      required this.backgroundColor,
+      required this.subnameTextColor,
+      required this.dividerColor,
+      required this.iconColor});
+
+  @override
+  CakeMenuTheme copyWith(
+          {Color? headerFirstGradientColor,
+          Color? headerSecondGradientColor,
+          Color? backgroundColor,
+          Color? subnameTextColor,
+          Color? dividerColor,
+          Color? iconColor}) =>
+      CakeMenuTheme(
+          headerFirstGradientColor:
+              headerFirstGradientColor ?? this.headerFirstGradientColor,
+          headerSecondGradientColor:
+              headerSecondGradientColor ?? this.headerSecondGradientColor,
+          backgroundColor: backgroundColor ?? this.backgroundColor,
+          subnameTextColor: subnameTextColor ?? this.subnameTextColor,
+          dividerColor: dividerColor ?? this.dividerColor,
+          iconColor: iconColor ?? this.iconColor);
+
+  @override
+  CakeMenuTheme lerp(ThemeExtension<CakeMenuTheme>? other, double t) {
+    if (other is! CakeMenuTheme) {
+      return this;
+    }
+
+    return CakeMenuTheme(
+        headerFirstGradientColor: Color.lerp(
+                headerFirstGradientColor, other.headerFirstGradientColor, t) ??
+            headerFirstGradientColor,
+        headerSecondGradientColor: Color.lerp(headerSecondGradientColor,
+                other.headerSecondGradientColor, t) ??
+            headerSecondGradientColor,
+        backgroundColor:
+            Color.lerp(backgroundColor, other.backgroundColor, t) ??
+                backgroundColor,
+        subnameTextColor:
+            Color.lerp(subnameTextColor, other.subnameTextColor, t) ??
+                subnameTextColor,
+        dividerColor:
+            Color.lerp(dividerColor, other.dividerColor, t) ?? dividerColor,
+        iconColor: Color.lerp(iconColor, other.iconColor, t) ?? iconColor);
+  }
+}

lib/themes/light_theme.dart

@@ -5,6 +5,7 @@ import 'package:cake_wallet/themes/extensions/dashboard_page_theme.dart';
 import 'package:cake_wallet/themes/extensions/exchange_page_theme.dart';
 import 'package:cake_wallet/themes/extensions/indicator_dot_theme.dart';
 import 'package:cake_wallet/themes/extensions/keyboard_theme.dart';
+import 'package:cake_wallet/themes/extensions/menu_theme.dart';
 import 'package:cake_wallet/themes/extensions/new_wallet_theme.dart';
 import 'package:cake_wallet/themes/extensions/pin_code_theme.dart';
 import 'package:cake_wallet/themes/extensions/support_page_theme.dart';
@@ -94,6 +95,15 @@ class LightTheme extends ThemeBase {
               indicatorColor: PaletteDark.darkCyanBlue.withOpacity(0.67),
               activeIndicatorColor: PaletteDark.darkNightBlue));
 
+  @override
+  CakeMenuTheme get menuTheme => CakeMenuTheme(
+      headerFirstGradientColor: Palette.blueCraiola,
+      headerSecondGradientColor: Palette.blueGreyCraiola,
+      backgroundColor: Colors.white,
+      subnameTextColor: Colors.white,
+      dividerColor: Palette.wildLavender,
+      iconColor: Palette.gray);
+
   @override
   ThemeData get themeData => super.themeData.copyWith(
       indicatorColor:
@@ -151,11 +161,6 @@ class LightTheme extends ThemeBase {
               decorationColor:
                   Colors.white // background of tiles (account list)
               ),
-          // body2 -> bodyLarge
-          bodyLarge: TextStyle(
-            color: Palette.moderateLavender, // menu header
-            decorationColor: Colors.white, // menu background
-          )
       ),
       primaryTextTheme: TextTheme(
           // title -> titleLarge
@@ -165,7 +170,6 @@ class LightTheme extends ThemeBase {
               ),
           bodySmall: TextStyle(
               color: PaletteDark.pigeonBlue, // secondary text
-              decorationColor: Palette.wildLavender // menu divider
               ),
           labelSmall: TextStyle(
             color: Palette.darkGray, // transaction/trade details titles
@@ -242,13 +246,7 @@ class LightTheme extends ThemeBase {
             ),
         labelSmall: TextStyle(
           color: Palette.wildPeriwinkle, // checkbox bounds (filter widget)
-          decorationColor: Colors.white, // menu subname
         ),
-        // display1 -> headlineMedium
-        headlineMedium: TextStyle(
-            color: Palette.blueCraiola, // first gradient color (menu header)
-            decorationColor: Palette.blueGreyCraiola, // second gradient color(menu header)
-            ),
       ),
       );
 }

lib/themes/theme_base.dart

@@ -4,6 +4,7 @@ import 'package:cake_wallet/themes/extensions/cake_scrollbar_theme.dart';
 import 'package:cake_wallet/themes/extensions/dashboard_page_theme.dart';
 import 'package:cake_wallet/themes/extensions/exchange_page_theme.dart';
 import 'package:cake_wallet/themes/extensions/keyboard_theme.dart';
+import 'package:cake_wallet/themes/extensions/menu_theme.dart';
 import 'package:cake_wallet/themes/extensions/new_wallet_theme.dart';
 import 'package:cake_wallet/themes/extensions/pin_code_theme.dart';
 import 'package:cake_wallet/themes/extensions/support_page_theme.dart';
@@ -64,6 +65,8 @@ abstract class ThemeBase {
 
   AddressTheme get addressTheme;
 
+  CakeMenuTheme get menuTheme;
+
   ThemeData get themeData => generatedThemeData.copyWith(
       primaryColor: primaryColor,
       cardColor: containerColor,
@@ -79,6 +82,7 @@ abstract class ThemeBase {
         newWalletTheme,
         balancePageTheme,
         addressTheme,
+        menuTheme,
       ],
       scrollbarTheme: ScrollbarThemeData(
           thumbColor: MaterialStateProperty.all(scrollbarTheme.thumbColor),