refactor: create FilterTheme

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

@@ -1,4 +1,5 @@
 import 'package:cake_wallet/src/screens/dashboard/widgets/filter_widget.dart';
+import 'package:cake_wallet/themes/extensions/filter_theme.dart';
 import 'package:cake_wallet/utils/show_pop_up.dart';
 import 'package:flutter/material.dart';
 import 'package:cake_wallet/generated/i18n.dart';
@@ -13,7 +14,7 @@ class HeaderRow extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final filterIcon = Image.asset('assets/images/filter_icon.png',
-        color: Theme.of(context).textTheme!.bodySmall!.decorationColor!);
+        color: Theme.of(context).extension<FilterTheme>()!.iconColor);
 
     return Container(
       height: 52,
@@ -43,7 +44,7 @@ class HeaderRow extends StatelessWidget {
               width: 36,
               decoration: BoxDecoration(
                   shape: BoxShape.circle,
-                  color: Theme.of(context).textTheme!.labelSmall!.color!),
+                  color: Theme.of(context).extension<FilterTheme>()!.buttonColor),
               child: filterIcon,
             ),
           )

lib/src/screens/ionia/cards/ionia_manage_cards_page.dart

@@ -20,6 +20,7 @@ import 'package:cake_wallet/generated/i18n.dart';
 import 'package:flutter_mobx/flutter_mobx.dart';
 import 'package:cake_wallet/themes/extensions/dashboard_page_theme.dart';
 import 'package:cake_wallet/themes/extensions/balance_page_theme.dart';
+import 'package:cake_wallet/themes/extensions/filter_theme.dart';
 
 class IoniaManageCardsPage extends BasePage {
   IoniaManageCardsPage(this._cardsListViewModel): searchFocusNode = FocusNode()  {
@@ -125,7 +126,7 @@ class IoniaManageCardsPage extends BasePage {
           ),
           child: Image.asset(
             'assets/images/filter.png',
-            color: Theme.of(context).textTheme!.bodySmall!.decorationColor!,
+            color: Theme.of(context).extension<FilterTheme>()!.iconColor,
           ),
         )
     );
@@ -238,8 +239,8 @@ class _IoniaManageCardsPageBodyState extends State<IoniaManageCardsPageBody> {
                 thumbHeight: thumbHeight,
                 rightOffset: 1,
                 width: 3,
-                backgroundColor: Theme.of(context).textTheme!.bodySmall!.decorationColor!.withOpacity(0.05),
+                backgroundColor: Theme.of(context).extension<FilterTheme>()!.iconColor.withOpacity(0.05),
-                thumbColor: Theme.of(context).textTheme!.bodySmall!.decorationColor!.withOpacity(0.5),
+                thumbColor: Theme.of(context).extension<FilterTheme>()!.iconColor.withOpacity(0.5),
                 fromTop: widget.cardsListViewModel.scrollOffsetFromTop,
               )
             : Offstage()
@@ -270,7 +271,7 @@ class _SearchWidget extends StatelessWidget {
       padding: EdgeInsets.all(8),
       child: Image.asset(
         'assets/images/mini_search_icon.png',
-        color: Theme.of(context).textTheme!.bodySmall!.decorationColor!,
+        color: Theme.of(context).extension<FilterTheme>()!.iconColor,
       ),
     );
 

lib/src/screens/new_wallet/widgets/select_button.dart

@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:cake_wallet/themes/extensions/filter_theme.dart';
 
 class SelectButton extends StatelessWidget {
   SelectButton({
@@ -29,10 +30,7 @@ class SelectButton extends StatelessWidget {
             .accentTextTheme!
             .headlineSmall!
             .decorationColor!
-        : Theme.of(context)
+        : Theme.of(context).extension<FilterTheme>()!.titlesColor;
-            .accentTextTheme!
-            .titleMedium!
-            .color!;
 
     final selectArrowImage = Image.asset('assets/images/select_arrow.png',
           color: arrowColor);

lib/src/screens/nodes/widgets/node_list_row.dart

@@ -1,6 +1,7 @@
 import 'package:cake_wallet/src/screens/nodes/widgets/node_indicator.dart';
 import 'package:cake_wallet/src/widgets/standard_list.dart';
 import 'package:flutter/material.dart';
+import 'package:cake_wallet/themes/extensions/filter_theme.dart';
 
 class NodeListRow extends StandardListRow {
   NodeListRow(
@@ -36,7 +37,7 @@ class NodeHeaderListRow extends StandardListRow {
     return SizedBox(
       width: 20,
       child: Icon(Icons.add,
-          color: Theme.of(context).accentTextTheme!.titleMedium!.color,size: 24.0),
+          color: Theme.of(context).extension<FilterTheme>()!.titlesColor,size: 24.0),
     );
   }
 }

lib/src/widgets/check_box_picker.dart

@@ -2,6 +2,7 @@ import 'package:cake_wallet/palette.dart';
 import 'package:cake_wallet/utils/responsive_layout_util.dart';
 import 'package:flutter/material.dart';
 import 'package:cake_wallet/src/widgets/picker_wrapper_widget.dart';
+import 'package:cake_wallet/themes/extensions/filter_theme.dart';
 
 class CheckBoxPicker extends StatefulWidget {
   CheckBoxPicker({
@@ -125,10 +126,7 @@ class CheckBoxPickerState extends State<CheckBoxPicker> {
           value: item.value,
           activeColor: item.value
               ? Palette.blueCraiola
-              : Theme.of(context)
+              : Theme.of(context).extension<FilterTheme>()!.checkboxBackgroundColor,
-                  .accentTextTheme!
-                  .titleMedium!
-                  .decorationColor!,
           checkColor: Colors.white,
           title: widget.displayItem?.call(item) ??
               Text(

lib/src/widgets/checkbox_widget.dart

@@ -2,6 +2,7 @@ import 'dart:ui';
 import 'package:cake_wallet/palette.dart';
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
+import 'package:cake_wallet/themes/extensions/filter_theme.dart';
 
 class CheckboxWidget extends StatefulWidget {
   CheckboxWidget({
@@ -42,18 +43,12 @@ class CheckboxWidgetState extends State<CheckboxWidget> {
             decoration: BoxDecoration(
                 color: value
                     ? Palette.blueCraiola
-                    : Theme.of(context)
+                    : Theme.of(context).extension<FilterTheme>()!.checkboxBackgroundColor,
-                        .accentTextTheme!
-                        .titleMedium!
-                        .decorationColor!,
                 borderRadius: BorderRadius.all(Radius.circular(2)),
                 border: Border.all(
                     color: value
                         ? Palette.blueCraiola
-                        : Theme.of(context)
+                        : Theme.of(context).extension<FilterTheme>()!.checkboxBoundsColor,
-                            .accentTextTheme!
-                            .labelSmall!
-                            .color!,
                     width: 1)),
             child: value
                 ? Center(

lib/themes/bright_theme.dart

@@ -1,6 +1,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/filter_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';
@@ -62,6 +63,12 @@ class BrightTheme extends LightTheme {
       headerSecondGradientColor: Palette.pinkFlamingo,
       iconColor: PaletteDark.pigeonBlue);
 
+  @override
+  FilterTheme get filterTheme => super.filterTheme.copyWith(
+      checkboxBackgroundColor: Colors.white,
+      buttonColor: Colors.white.withOpacity(0.2),
+      iconColor: Colors.white);
+
   @override
   ThemeData get themeData => super.themeData.copyWith(
       indicatorColor: Colors.white.withOpacity(0.5), // page indicator
@@ -69,11 +76,7 @@ class BrightTheme extends LightTheme {
       dividerColor: Palette.paleBlue,
       hintColor: Palette.gray,
       textTheme: TextTheme(
-          bodySmall: TextStyle(
-            decorationColor: Colors.white, // filter icon
-          ),
           labelSmall: TextStyle(
-              color: Colors.white.withOpacity(0.2), // filter button
               backgroundColor:
                   Colors.white.withOpacity(0.5), // date section row
               decorationColor: Colors.white
@@ -193,15 +196,5 @@ class BrightTheme extends LightTheme {
             decorationColor: Colors
                 .white // restore wallet button text color (wallet list page)
             ),
-        // subhead -> titleMedium
-        titleMedium: TextStyle(
-            color: Palette.darkGray, // titles color (filter widget)
-            backgroundColor:
-                Palette.periwinkle, // divider color (filter widget)
-            decorationColor: Colors.white // checkbox background (filter widget)
-            ),
-        labelSmall: TextStyle(
-          color: Palette.wildPeriwinkle, // checkbox bounds (filter widget)
-        ),
       ));
 }

lib/themes/dark_theme.dart

@@ -3,6 +3,7 @@ import 'package:cake_wallet/themes/extensions/balance_page_theme.dart';
 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/filter_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';
@@ -103,6 +104,14 @@ class DarkTheme extends ThemeBase {
       dividerColor: PaletteDark.darkOceanBlue,
       iconColor: PaletteDark.pigeonBlue);
 
+  @override
+  FilterTheme get filterTheme => FilterTheme(
+      checkboxBoundsColor: PaletteDark.wildVioletBlue,
+      checkboxBackgroundColor: PaletteDark.wildVioletBlue.withOpacity(0.3),
+      titlesColor: Colors.white,
+      buttonColor: PaletteDark.oceanBlue,
+      iconColor: PaletteDark.wildBlue);
+
   @override
   ThemeData get themeData => super.themeData.copyWith(
       indicatorColor: PaletteDark.cyanBlue, // page indicator
@@ -115,11 +124,7 @@ class DarkTheme extends ThemeBase {
           .dialogTheme
           .copyWith(backgroundColor: PaletteDark.nightBlue),
       textTheme: TextTheme(
-          bodySmall: TextStyle(
-            decorationColor: PaletteDark.wildBlue, // filter icon
-          ),
           labelSmall: TextStyle(
-              color: PaletteDark.oceanBlue, // filter button
               backgroundColor: PaletteDark.darkCyanBlue, // date section row
               decorationColor: PaletteDark
                   .wildNightBlue // icons (transaction and trade rows)
@@ -237,17 +242,6 @@ class DarkTheme extends ThemeBase {
             decorationColor: Palette
                 .darkBlueCraiola // restore wallet button text color (wallet list page)
             ),
-        // subhead -> titleMedium
-        titleMedium: TextStyle(
-            color: Colors.white, // titles color (filter widget)
-            backgroundColor:
-                PaletteDark.darkOceanBlue, // divider color (filter widget)
-            decorationColor: PaletteDark.wildVioletBlue
-                .withOpacity(0.3) // checkbox background (filter widget)
-            ),
-        labelSmall: TextStyle(
-          color: PaletteDark.wildVioletBlue, // checkbox bounds (filter widget)
-        ),
       ),
       );
 }

lib/themes/extensions/dashboard_page_theme.dart

@@ -1,3 +1,4 @@
+import 'package:cake_wallet/themes/extensions/indicator_dot_theme.dart';
 import 'package:flutter/material.dart';
 
 class DashboardPageTheme extends ThemeExtension<DashboardPageTheme> {
@@ -6,21 +7,22 @@ class DashboardPageTheme extends ThemeExtension<DashboardPageTheme> {
   final Color thirdGradientBackgroundColor;
   final Color textColor;
 
+  final IndicatorDotTheme? indicatorDotTheme;
+
   DashboardPageTheme(
       {required this.firstGradientBackgroundColor,
       required this.secondGradientBackgroundColor,
       required this.thirdGradientBackgroundColor,
-      required this.textColor});
+      required this.textColor,
-
+      this.indicatorDotTheme});
-  @override
-  Object get type => DashboardPageTheme;
 
   @override
   DashboardPageTheme copyWith(
           {Color? firstGradientBackgroundColor,
           Color? secondGradientBackgroundColor,
           Color? thirdGradientBackgroundColor,
-          Color? textColor}) =>
+          Color? textColor,
+          IndicatorDotTheme? indicatorDotTheme}) =>
       DashboardPageTheme(
           firstGradientBackgroundColor:
               firstGradientBackgroundColor ?? this.firstGradientBackgroundColor,
@@ -28,7 +30,8 @@ class DashboardPageTheme extends ThemeExtension<DashboardPageTheme> {
               this.secondGradientBackgroundColor,
           thirdGradientBackgroundColor:
               thirdGradientBackgroundColor ?? this.thirdGradientBackgroundColor,
-          textColor: textColor ?? this.textColor);
+          textColor: textColor ?? this.textColor,
+          indicatorDotTheme: indicatorDotTheme ?? this.indicatorDotTheme);
 
   @override
   DashboardPageTheme lerp(ThemeExtension<DashboardPageTheme>? other, double t) {
@@ -46,6 +49,7 @@ class DashboardPageTheme extends ThemeExtension<DashboardPageTheme> {
         thirdGradientBackgroundColor: Color.lerp(thirdGradientBackgroundColor,
                 other.thirdGradientBackgroundColor, t) ??
             thirdGradientBackgroundColor,
-        textColor: Color.lerp(textColor, other.textColor, t) ?? textColor);
+        textColor: Color.lerp(textColor, other.textColor, t) ?? textColor,
+        indicatorDotTheme: indicatorDotTheme?.lerp(other.indicatorDotTheme, t));
   }
 }

lib/themes/extensions/filter_theme.dart

@@ -0,0 +1,53 @@
+import 'package:flutter/material.dart';
+
+class FilterTheme extends ThemeExtension<FilterTheme> {
+  final Color checkboxBoundsColor;
+  final Color checkboxBackgroundColor;
+  final Color titlesColor;
+  final Color buttonColor;
+  final Color iconColor;
+
+  FilterTheme(
+      {required this.checkboxBoundsColor,
+      required this.checkboxBackgroundColor,
+      required this.titlesColor,
+      required this.buttonColor,
+      required this.iconColor});
+
+  @override
+  FilterTheme copyWith({
+    Color? checkboxBoundsColor,
+    Color? checkboxBackgroundColor,
+    Color? titlesColor,
+    Color? buttonColor,
+    Color? iconColor,
+  }) =>
+      FilterTheme(
+        checkboxBoundsColor: checkboxBoundsColor ?? this.checkboxBoundsColor,
+        checkboxBackgroundColor:
+            checkboxBackgroundColor ?? this.checkboxBackgroundColor,
+        titlesColor: titlesColor ?? this.titlesColor,
+        buttonColor: buttonColor ?? this.buttonColor,
+        iconColor: iconColor ?? this.iconColor,
+      );
+
+  @override
+  FilterTheme lerp(ThemeExtension<FilterTheme>? other, double t) {
+    if (other is! FilterTheme) {
+      return this;
+    }
+
+    return FilterTheme(
+        checkboxBoundsColor:
+            Color.lerp(checkboxBoundsColor, other.checkboxBoundsColor, t) ??
+                this.checkboxBoundsColor,
+        checkboxBackgroundColor: Color.lerp(
+                checkboxBackgroundColor, other.checkboxBackgroundColor, t) ??
+            this.checkboxBackgroundColor,
+        titlesColor:
+            Color.lerp(titlesColor, other.titlesColor, t) ?? this.titlesColor,
+        buttonColor:
+            Color.lerp(buttonColor, other.buttonColor, t) ?? this.buttonColor,
+        iconColor: Color.lerp(iconColor, other.iconColor, t) ?? this.iconColor);
+  }
+}

lib/themes/extensions/indicator_dot_theme.dart

@@ -0,0 +1,30 @@
+import 'package:flutter/material.dart';
+
+class IndicatorDotTheme extends ThemeExtension<IndicatorDotTheme> {
+  final Color indicatorColor;
+  final Color activeIndicatorColor;
+
+  IndicatorDotTheme(
+      {required this.indicatorColor, required this.activeIndicatorColor});
+
+  @override
+  IndicatorDotTheme copyWith(
+          {Color? indicatorColor, Color? actionButtonColor}) =>
+      IndicatorDotTheme(
+          indicatorColor: indicatorColor ?? this.indicatorColor,
+          activeIndicatorColor: actionButtonColor ?? this.activeIndicatorColor);
+
+  @override
+  IndicatorDotTheme lerp(ThemeExtension<IndicatorDotTheme>? other, double t) {
+    if (other is! IndicatorDotTheme) {
+      return this;
+    }
+
+    return IndicatorDotTheme(
+        indicatorColor: Color.lerp(indicatorColor, other.indicatorColor, t) ??
+            indicatorColor,
+        activeIndicatorColor:
+            Color.lerp(activeIndicatorColor, other.activeIndicatorColor, t) ??
+                activeIndicatorColor);
+  }
+}

lib/themes/light_theme.dart

@@ -3,6 +3,7 @@ import 'package:cake_wallet/themes/extensions/balance_page_theme.dart';
 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/filter_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';
@@ -104,6 +105,14 @@ class LightTheme extends ThemeBase {
       dividerColor: Palette.wildLavender,
       iconColor: Palette.gray);
 
+  @override
+  FilterTheme get filterTheme => FilterTheme(
+      checkboxBoundsColor: Palette.wildPeriwinkle,
+      checkboxBackgroundColor: Colors.white,
+      titlesColor: Palette.darkGray,
+      buttonColor: Palette.blueAlice,
+      iconColor: PaletteDark.wildBlue);
+
   @override
   ThemeData get themeData => super.themeData.copyWith(
       indicatorColor:
@@ -117,11 +126,7 @@ class LightTheme extends ThemeBase {
           .dialogTheme
           .copyWith(backgroundColor: Colors.white),
       textTheme: TextTheme(
-          bodySmall: TextStyle(
-            decorationColor: PaletteDark.wildBlue, // filter icon
-          ),
           labelSmall: TextStyle(
-              color: Palette.blueAlice, // filter button
               backgroundColor: PaletteDark.darkCyanBlue, // date section row
               decorationColor:
                   Palette.blueAlice // icons (transaction and trade rows)
@@ -238,15 +243,6 @@ class LightTheme extends ThemeBase {
             decorationColor: Colors
                 .white // restore wallet button text color (wallet list page)
             ),
-        // subhead -> titleMedium
-        titleMedium: TextStyle(
-            color: Palette.darkGray, // titles color (filter widget)
-            backgroundColor: Palette.periwinkle, // divider color (filter widget)
-            decorationColor: Colors.white // checkbox background (filter widget)
-            ),
-        labelSmall: TextStyle(
-          color: Palette.wildPeriwinkle, // checkbox bounds (filter widget)
-        ),
       ),
       );
 }

lib/themes/theme_base.dart

@@ -3,6 +3,7 @@ import 'package:cake_wallet/themes/extensions/balance_page_theme.dart';
 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/filter_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';
@@ -67,6 +68,8 @@ abstract class ThemeBase {
 
   CakeMenuTheme get menuTheme;
 
+  FilterTheme get filterTheme;
+
   ThemeData get themeData => generatedThemeData.copyWith(
       primaryColor: primaryColor,
       cardColor: containerColor,
@@ -83,6 +86,7 @@ abstract class ThemeBase {
         balancePageTheme,
         addressTheme,
         menuTheme,
+        filterTheme,
       ],
       scrollbarTheme: ScrollbarThemeData(
           thumbColor: MaterialStateProperty.all(scrollbarTheme.thumbColor),