diff --git a/lib/src/screens/dashboard/widgets/filter_widget.dart b/lib/src/screens/dashboard/widgets/filter_widget.dart index 28006d498..b9ffa8a00 100644 --- a/lib/src/screens/dashboard/widgets/filter_widget.dart +++ b/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()!.backgroundColor, child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ diff --git a/lib/src/screens/dashboard/widgets/menu_widget.dart b/lib/src/screens/dashboard/widgets/menu_widget.dart index 56b2e87e6..3ab5ba01c 100644 --- a/lib/src/screens/dashboard/widgets/menu_widget.dart +++ b/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 { final itemCount = SettingActions.all.length; moneroIcon = Image.asset('assets/images/monero_menu.png', - color: Theme.of(context) - .accentTextTheme! - .labelSmall! - .decorationColor!); + color: Theme.of(context).extension()!.subnameTextColor); bitcoinIcon = Image.asset('assets/images/bitcoin_menu.png', - color: Theme.of(context) - .accentTextTheme! - .labelSmall! - .decorationColor!); + color: Theme.of(context).extension()!.subnameTextColor); litecoinIcon = Image.asset('assets/images/litecoin_menu.png'); havenIcon = Image.asset('assets/images/haven_menu.png'); @@ -115,7 +110,7 @@ class MenuWidgetState extends State { topLeft: Radius.circular(24), bottomLeft: Radius.circular(24)), child: Container( color: - Theme.of(context).textTheme!.bodyLarge!.decorationColor!, + Theme.of(context).extension()!.backgroundColor, child: ListView.separated( padding: EdgeInsets.only(top: 0), itemBuilder: (_, index) { @@ -124,14 +119,8 @@ class MenuWidgetState extends State { height: headerHeight, decoration: BoxDecoration( gradient: LinearGradient(colors: [ - Theme.of(context) - .accentTextTheme! - .headlineMedium! - .color!, - Theme.of(context) - .accentTextTheme! - .headlineMedium! - .decorationColor!, ], begin: Alignment.topLeft, end: Alignment.bottomRight), + Theme.of(context).extension()!.headerFirstGradientColor, + Theme.of(context).extension()!.headerSecondGradientColor, ], 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 { builder: (_) => Text( widget.dashboardViewModel.subname, style: TextStyle( - color: Theme.of(context) - .accentTextTheme! - .labelSmall! - .decorationColor!, + color: Theme.of(context).extension()!.subnameTextColor, fontWeight: FontWeight.w500, fontSize: 12), )) @@ -194,10 +180,7 @@ class MenuWidgetState extends State { }, separatorBuilder: (_, index) => Container( height: 1, - color: Theme.of(context) - .primaryTextTheme! - .bodySmall! - .decorationColor!, + color: Theme.of(context).extension()!.dividerColor, ), itemCount: itemCount + 1), ))) diff --git a/lib/src/screens/exchange_trade/information_page.dart b/lib/src/screens/exchange_trade/information_page.dart index 12f847d94..43c2e04dc 100644 --- a/lib/src/screens/exchange_trade/information_page.dart +++ b/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()!.backgroundColor ), child: Column( mainAxisSize: MainAxisSize.min, diff --git a/lib/src/screens/ionia/widgets/ionia_filter_modal.dart b/lib/src/screens/ionia/widgets/ionia_filter_modal.dart index 6efb66ab4..ae042ce2b 100644 --- a/lib/src/screens/ionia/widgets/ionia_filter_modal.dart +++ b/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()!.dividerColor.withOpacity(0.5), border: OutlineInputBorder( borderSide: BorderSide.none, borderRadius: BorderRadius.circular(8), diff --git a/lib/src/screens/settings/desktop_settings/desktop_settings_page.dart b/lib/src/screens/settings/desktop_settings/desktop_settings_page.dart index dabdafb64..bcdb89aec 100644 --- a/lib/src/screens/settings/desktop_settings/desktop_settings_page.dart +++ b/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(); @@ -71,10 +72,7 @@ class _DesktopSettingsPageState extends State { }, separatorBuilder: (_, index) => Container( height: 1, - color: Theme.of(context) - .primaryTextTheme! - .bodySmall! - .decorationColor!, + color: Theme.of(context).extension()!.dividerColor, ), itemCount: itemCount, ), diff --git a/lib/themes/bright_theme.dart b/lib/themes/bright_theme.dart index 8811b4574..552b957d3 100644 --- a/lib/themes/bright_theme.dart +++ b/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) - ), )); } diff --git a/lib/themes/dark_theme.dart b/lib/themes/dark_theme.dart index 5396a67d7..4640584e3 100644 --- a/lib/themes/dark_theme.dart +++ b/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) - ), ), ); } diff --git a/lib/themes/extensions/menu_theme.dart b/lib/themes/extensions/menu_theme.dart new file mode 100644 index 000000000..3f4c0c03f --- /dev/null +++ b/lib/themes/extensions/menu_theme.dart @@ -0,0 +1,60 @@ +import 'package:flutter/material.dart'; + +class CakeMenuTheme extends ThemeExtension { + 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? 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); + } +} diff --git a/lib/themes/light_theme.dart b/lib/themes/light_theme.dart index f534462bd..247fbc819 100644 --- a/lib/themes/light_theme.dart +++ b/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) - ), ), ); } diff --git a/lib/themes/theme_base.dart b/lib/themes/theme_base.dart index b719baf8d..158522847 100644 --- a/lib/themes/theme_base.dart +++ b/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),