diff --git a/assets/svg/forest-theme.svg b/assets/svg/forest-theme.svg new file mode 100644 index 000000000..1472bcbf5 --- /dev/null +++ b/assets/svg/forest-theme.svg @@ -0,0 +1,63 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/svg/forest/bell-new.svg b/assets/svg/forest/bell-new.svg new file mode 100644 index 000000000..8cef32715 --- /dev/null +++ b/assets/svg/forest/bell-new.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/assets/svg/forest/buy-coins-icon.svg b/assets/svg/forest/buy-coins-icon.svg new file mode 100644 index 000000000..d9613bccb --- /dev/null +++ b/assets/svg/forest/buy-coins-icon.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/assets/svg/forest/exchange-2.svg b/assets/svg/forest/exchange-2.svg new file mode 100644 index 000000000..7baeaf87f --- /dev/null +++ b/assets/svg/forest/exchange-2.svg @@ -0,0 +1,4 @@ + + + + diff --git a/assets/svg/forest/stack-icon1.svg b/assets/svg/forest/stack-icon1.svg new file mode 100644 index 000000000..f316012d7 --- /dev/null +++ b/assets/svg/forest/stack-icon1.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/assets/svg/forest/tx-exchange-icon-failed.svg b/assets/svg/forest/tx-exchange-icon-failed.svg new file mode 100644 index 000000000..a54836bba --- /dev/null +++ b/assets/svg/forest/tx-exchange-icon-failed.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/assets/svg/forest/tx-exchange-icon-pending.svg b/assets/svg/forest/tx-exchange-icon-pending.svg new file mode 100644 index 000000000..5f9aa4256 --- /dev/null +++ b/assets/svg/forest/tx-exchange-icon-pending.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/assets/svg/forest/tx-exchange-icon.svg b/assets/svg/forest/tx-exchange-icon.svg new file mode 100644 index 000000000..fcd3ef9dc --- /dev/null +++ b/assets/svg/forest/tx-exchange-icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/assets/svg/forest/tx-icon-receive-failed.svg b/assets/svg/forest/tx-icon-receive-failed.svg new file mode 100644 index 000000000..189bd15c9 --- /dev/null +++ b/assets/svg/forest/tx-icon-receive-failed.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/assets/svg/forest/tx-icon-receive-pending.svg b/assets/svg/forest/tx-icon-receive-pending.svg new file mode 100644 index 000000000..64ea8da3d --- /dev/null +++ b/assets/svg/forest/tx-icon-receive-pending.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/assets/svg/forest/tx-icon-receive.svg b/assets/svg/forest/tx-icon-receive.svg new file mode 100644 index 000000000..1076d8d57 --- /dev/null +++ b/assets/svg/forest/tx-icon-receive.svg @@ -0,0 +1,4 @@ + + + + diff --git a/assets/svg/forest/tx-icon-send-failed.svg b/assets/svg/forest/tx-icon-send-failed.svg new file mode 100644 index 000000000..9751b61e8 --- /dev/null +++ b/assets/svg/forest/tx-icon-send-failed.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/assets/svg/forest/tx-icon-send-pending.svg b/assets/svg/forest/tx-icon-send-pending.svg new file mode 100644 index 000000000..e4ec777e3 --- /dev/null +++ b/assets/svg/forest/tx-icon-send-pending.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/assets/svg/forest/tx-icon-send.svg b/assets/svg/forest/tx-icon-send.svg new file mode 100644 index 000000000..ee32aa6b4 --- /dev/null +++ b/assets/svg/forest/tx-icon-send.svg @@ -0,0 +1,4 @@ + + + + diff --git a/crypto_plugins/flutter_libmonero b/crypto_plugins/flutter_libmonero index af88796d5..e81b1b7c2 160000 --- a/crypto_plugins/flutter_libmonero +++ b/crypto_plugins/flutter_libmonero @@ -1 +1 @@ -Subproject commit af88796d5e4988c03422320c3842af5cf6c049ef +Subproject commit e81b1b7c2d8114435a9458ab2e439f4393f626e7 diff --git a/lib/main.dart b/lib/main.dart index 11c694fff..ac8c62221 100644 --- a/lib/main.dart +++ b/lib/main.dart @@ -58,6 +58,7 @@ import 'package:stackwallet/utilities/logger.dart'; import 'package:stackwallet/utilities/stack_file_system.dart'; import 'package:stackwallet/utilities/theme/color_theme.dart'; import 'package:stackwallet/utilities/theme/dark_colors.dart'; +import 'package:stackwallet/utilities/theme/forest_colors.dart'; import 'package:stackwallet/utilities/theme/fruit_sorbet_colors.dart'; import 'package:stackwallet/utilities/theme/light_colors.dart'; import 'package:stackwallet/utilities/theme/ocean_breeze_colors.dart'; @@ -347,6 +348,9 @@ class _MaterialAppWithThemeState extends ConsumerState case "fruitSorbet": colorTheme = FruitSorbetColors(); break; + case "forest": + colorTheme = ForestColors(); + break; case "light": default: colorTheme = LightColors(); diff --git a/lib/pages/settings_views/global_settings_view/appearance_settings_view.dart b/lib/pages/settings_views/global_settings_view/appearance_settings_view.dart index cefde08bb..d25a650e3 100644 --- a/lib/pages/settings_views/global_settings_view/appearance_settings_view.dart +++ b/lib/pages/settings_views/global_settings_view/appearance_settings_view.dart @@ -7,6 +7,7 @@ import 'package:stackwallet/utilities/constants.dart'; import 'package:stackwallet/utilities/text_styles.dart'; import 'package:stackwallet/utilities/theme/color_theme.dart'; import 'package:stackwallet/utilities/theme/dark_colors.dart'; +import 'package:stackwallet/utilities/theme/forest_colors.dart'; import 'package:stackwallet/utilities/theme/fruit_sorbet_colors.dart'; import 'package:stackwallet/utilities/theme/light_colors.dart'; import 'package:stackwallet/utilities/theme/ocean_breeze_colors.dart'; @@ -26,14 +27,16 @@ class AppearanceSettingsView extends ConsumerWidget { switch (type) { case ThemeType.light: return "Light theme"; - case ThemeType.oceanBreeze: - return "Ocean theme"; case ThemeType.dark: return "Dark theme"; + case ThemeType.oceanBreeze: + return "Ocean theme"; case ThemeType.oledBlack: return "Oled Black theme"; case ThemeType.fruitSorbet: return "Fruit Sorbet theme"; + case ThemeType.forest: + return "Forest theme"; } } @@ -277,87 +280,6 @@ class _ThemeOptionsView extends ConsumerState { const SizedBox( height: 10, ), - MaterialButton( - splashColor: Colors.transparent, - hoverColor: Colors.transparent, - padding: const EdgeInsets.all(0), - materialTapTargetSize: MaterialTapTargetSize.shrinkWrap, - shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular( - Constants.size.circularBorderRadius, - ), - ), - onPressed: () { - DB.instance.put( - boxName: DB.boxNameTheme, - key: "colorScheme", - value: ThemeType.oceanBreeze.name, - ); - ref.read(colorThemeProvider.state).state = - StackColors.fromStackColorTheme( - OceanBreezeColors(), - ); - - setState(() { - _selectedTheme = "oceanBreeze"; - }); - }, - child: SizedBox( - width: 200, - child: Column( - mainAxisSize: MainAxisSize.min, - children: [ - Row( - children: [ - SizedBox( - width: 10, - height: 10, - child: Radio( - activeColor: Theme.of(context) - .extension()! - .radioButtonIconEnabled, - value: "oceanBreeze", - groupValue: _selectedTheme, - onChanged: (newValue) { - if (newValue is String && newValue == "oceanBreeze") { - DB.instance.put( - boxName: DB.boxNameTheme, - key: "colorScheme", - value: ThemeType.oceanBreeze.name, - ); - ref.read(colorThemeProvider.state).state = - StackColors.fromStackColorTheme( - OceanBreezeColors(), - ); - - setState(() { - _selectedTheme = "oceanBreeze"; - }); - } - }, - ), - ), - const SizedBox( - width: 14, - ), - Text( - "Ocean Breeze", - style: - STextStyles.desktopTextExtraSmall(context).copyWith( - color: Theme.of(context) - .extension()! - .textDark2, - ), - ), - ], - ), - ], - ), - ), - ), - const SizedBox( - height: 10, - ), MaterialButton( splashColor: Colors.transparent, hoverColor: Colors.transparent, @@ -439,6 +361,87 @@ class _ThemeOptionsView extends ConsumerState { const SizedBox( height: 10, ), + MaterialButton( + splashColor: Colors.transparent, + hoverColor: Colors.transparent, + padding: const EdgeInsets.all(0), + materialTapTargetSize: MaterialTapTargetSize.shrinkWrap, + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular( + Constants.size.circularBorderRadius, + ), + ), + onPressed: () { + DB.instance.put( + boxName: DB.boxNameTheme, + key: "colorScheme", + value: ThemeType.oceanBreeze.name, + ); + ref.read(colorThemeProvider.state).state = + StackColors.fromStackColorTheme( + OceanBreezeColors(), + ); + + setState(() { + _selectedTheme = "oceanBreeze"; + }); + }, + child: SizedBox( + width: 200, + child: Column( + mainAxisSize: MainAxisSize.min, + children: [ + Row( + children: [ + SizedBox( + width: 10, + height: 10, + child: Radio( + activeColor: Theme.of(context) + .extension()! + .radioButtonIconEnabled, + value: "oceanBreeze", + groupValue: _selectedTheme, + onChanged: (newValue) { + if (newValue is String && newValue == "oceanBreeze") { + DB.instance.put( + boxName: DB.boxNameTheme, + key: "colorScheme", + value: ThemeType.oceanBreeze.name, + ); + ref.read(colorThemeProvider.state).state = + StackColors.fromStackColorTheme( + OceanBreezeColors(), + ); + + setState(() { + _selectedTheme = "oceanBreeze"; + }); + } + }, + ), + ), + const SizedBox( + width: 14, + ), + Text( + "Ocean Breeze", + style: + STextStyles.desktopTextExtraSmall(context).copyWith( + color: Theme.of(context) + .extension()! + .textDark2, + ), + ), + ], + ), + ], + ), + ), + ), + const SizedBox( + height: 10, + ), MaterialButton( splashColor: Colors.transparent, hoverColor: Colors.transparent, @@ -598,6 +601,87 @@ class _ThemeOptionsView extends ConsumerState { ), ), ), + const SizedBox( + height: 10, + ), + MaterialButton( + splashColor: Colors.transparent, + hoverColor: Colors.transparent, + padding: const EdgeInsets.all(0), + materialTapTargetSize: MaterialTapTargetSize.shrinkWrap, + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular( + Constants.size.circularBorderRadius, + ), + ), + onPressed: () { + DB.instance.put( + boxName: DB.boxNameTheme, + key: "colorScheme", + value: ThemeType.forest.name, + ); + ref.read(colorThemeProvider.state).state = + StackColors.fromStackColorTheme( + ForestColors(), + ); + + setState(() { + _selectedTheme = "forest"; + }); + }, + child: SizedBox( + width: 200, + child: Column( + mainAxisSize: MainAxisSize.min, + children: [ + Row( + children: [ + SizedBox( + width: 10, + height: 10, + child: Radio( + activeColor: Theme.of(context) + .extension()! + .radioButtonIconEnabled, + value: "forest", + groupValue: _selectedTheme, + onChanged: (newValue) { + if (newValue is String && newValue == "forest") { + DB.instance.put( + boxName: DB.boxNameTheme, + key: "colorScheme", + value: ThemeType.forest.name, + ); + ref.read(colorThemeProvider.state).state = + StackColors.fromStackColorTheme( + ForestColors(), + ); + + setState(() { + _selectedTheme = "forest"; + }); + } + }, + ), + ), + const SizedBox( + width: 14, + ), + Text( + "Forest", + style: + STextStyles.desktopTextExtraSmall(context).copyWith( + color: Theme.of(context) + .extension()! + .textDark2, + ), + ), + ], + ), + ], + ), + ), + ), ], ); } diff --git a/lib/pages_desktop_specific/my_stack_view/desktop_favorite_wallets.dart b/lib/pages_desktop_specific/my_stack_view/desktop_favorite_wallets.dart index 5694c66ed..97e901747 100644 --- a/lib/pages_desktop_specific/my_stack_view/desktop_favorite_wallets.dart +++ b/lib/pages_desktop_specific/my_stack_view/desktop_favorite_wallets.dart @@ -64,12 +64,14 @@ class DesktopFavoriteWallets extends ConsumerWidget { children: [ ...favorites.map((p0) { final walletId = ref.read(p0).walletId; + final walletName = ref.read(p0).walletName; final managerProvider = ref .read(walletsChangeNotifierProvider) .getManagerProvider(walletId); return FavoriteCard( walletId: walletId, + key: Key(walletName), width: cardWidth, height: cardHeight, managerProvider: managerProvider, diff --git a/lib/pages_desktop_specific/settings/settings_menu/appearance_settings.dart b/lib/pages_desktop_specific/settings/settings_menu/appearance_settings.dart index b754f5c28..ebe94ed12 100644 --- a/lib/pages_desktop_specific/settings/settings_menu/appearance_settings.dart +++ b/lib/pages_desktop_specific/settings/settings_menu/appearance_settings.dart @@ -27,7 +27,8 @@ class _AppearanceOptionSettings @override Widget build(BuildContext context) { debugPrint("BUILD: $runtimeType"); - return Column( + return SingleChildScrollView( + child: Column( children: [ Padding( padding: const EdgeInsets.only( @@ -145,7 +146,7 @@ class _AppearanceOptionSettings ), ), ], - ); + )); } } @@ -171,6 +172,8 @@ class _ThemeToggle extends ConsumerState { return Assets.svg.themeOledBlack; case ThemeType.fruitSorbet: return Assets.svg.themeFruit; + case ThemeType.forest: + return Assets.svg.themeForest; } } diff --git a/lib/utilities/assets.dart b/lib/utilities/assets.dart index ded54a061..6a006b0fa 100644 --- a/lib/utilities/assets.dart +++ b/lib/utilities/assets.dart @@ -55,6 +55,7 @@ class _SVG { case ThemeType.light: case ThemeType.dark: case ThemeType.oledBlack: + case ThemeType.forest: return null; case ThemeType.oceanBreeze: @@ -94,6 +95,7 @@ class _SVG { "assets/svg/${Theme.of(context).extension()!.themeType.name}/tx-exchange-icon-failed.svg"; String get themeFruit => "assets/svg/fruit-sorbet-theme.svg"; + String get themeForest => "assets/svg/forest-theme.svg"; String get themeOledBlack => "assets/svg/oled-black-theme.svg"; String get themeOcean => "assets/svg/ocean-breeze-theme.svg"; String get themeLight => "assets/svg/light-mode.svg"; @@ -265,6 +267,8 @@ class _SVG { class _PNG { const _PNG(); + // String get themeFruit => "assets/svg/fruit-sorbet-theme.png"; + String get stack => "assets/images/stack.png"; String get unclaimedPaynym => "assets/images/unclaimed.png"; String get splash => "assets/images/splash.png"; diff --git a/lib/utilities/text_styles.dart b/lib/utilities/text_styles.dart index 98878b6b6..11a1c3a97 100644 --- a/lib/utilities/text_styles.dart +++ b/lib/utilities/text_styles.dart @@ -39,6 +39,12 @@ class STextStyles { fontWeight: FontWeight.w500, fontSize: 14, ); + case ThemeType.forest: + return GoogleFonts.inter( + color: _theme(context).textDark3, + fontWeight: FontWeight.w500, + fontSize: 12, + ); } } @@ -74,6 +80,12 @@ class STextStyles { fontWeight: FontWeight.w600, fontSize: 20, ); + case ThemeType.forest: + return GoogleFonts.inter( + color: _theme(context).textDark, + fontWeight: FontWeight.w600, + fontSize: 20, + ); } } @@ -109,6 +121,12 @@ class STextStyles { fontWeight: FontWeight.w600, fontSize: 18, ); + case ThemeType.forest: + return GoogleFonts.inter( + color: _theme(context).textDark, + fontWeight: FontWeight.w600, + fontSize: 18, + ); } } @@ -144,6 +162,12 @@ class STextStyles { fontWeight: FontWeight.w600, fontSize: 16, ); + case ThemeType.forest: + return GoogleFonts.inter( + color: _theme(context).textDark, + fontWeight: FontWeight.w600, + fontSize: 16, + ); } } @@ -179,6 +203,12 @@ class STextStyles { fontWeight: FontWeight.w600, fontSize: 16, ); + case ThemeType.forest: + return GoogleFonts.inter( + color: _theme(context).textDark, + fontWeight: FontWeight.w600, + fontSize: 16, + ); } } @@ -214,6 +244,12 @@ class STextStyles { fontWeight: FontWeight.w400, fontSize: 16, ); + case ThemeType.forest: + return GoogleFonts.inter( + color: _theme(context).textDark, + fontWeight: FontWeight.w400, + fontSize: 16, + ); } } @@ -249,6 +285,12 @@ class STextStyles { fontWeight: FontWeight.w400, fontSize: 16, ); + case ThemeType.forest: + return GoogleFonts.inter( + color: _theme(context).textDark, + fontWeight: FontWeight.w400, + fontSize: 16, + ); } } @@ -284,6 +326,12 @@ class STextStyles { fontWeight: FontWeight.w500, fontSize: 16, ); + case ThemeType.forest: + return GoogleFonts.inter( + color: _theme(context).textDark, + fontWeight: FontWeight.w500, + fontSize: 16, + ); } } @@ -319,6 +367,12 @@ class STextStyles { fontWeight: FontWeight.w600, fontSize: 16, ); + case ThemeType.forest: + return GoogleFonts.inter( + color: _theme(context).textDark, + fontWeight: FontWeight.w600, + fontSize: 16, + ); } } @@ -354,6 +408,12 @@ class STextStyles { fontWeight: FontWeight.w500, fontSize: 16, ); + case ThemeType.forest: + return GoogleFonts.inter( + color: _theme(context).buttonTextPrimary, + fontWeight: FontWeight.w500, + fontSize: 16, + ); } } @@ -389,6 +449,12 @@ class STextStyles { fontWeight: FontWeight.w500, fontSize: 16, ); + case ThemeType.forest: + return GoogleFonts.inter( + color: _theme(context).textDark, + fontWeight: FontWeight.w500, + fontSize: 16, + ); } } @@ -424,6 +490,12 @@ class STextStyles { fontWeight: FontWeight.w500, fontSize: 16, ); + case ThemeType.forest: + return GoogleFonts.inter( + color: _theme(context).textDark3, + fontWeight: FontWeight.w500, + fontSize: 16, + ); } } @@ -459,6 +531,12 @@ class STextStyles { fontWeight: FontWeight.w500, fontSize: 14, ); + case ThemeType.forest: + return GoogleFonts.inter( + color: _theme(context).textDark3, + fontWeight: FontWeight.w500, + fontSize: 14, + ); } } @@ -494,6 +572,12 @@ class STextStyles { fontWeight: FontWeight.w500, fontSize: 12, ); + case ThemeType.forest: + return GoogleFonts.inter( + color: _theme(context).textSubtitle1, + fontWeight: FontWeight.w500, + fontSize: 12, + ); } } @@ -534,6 +618,13 @@ class STextStyles { fontSize: 14, height: 14 / 14, ); + case ThemeType.forest: + return GoogleFonts.inter( + color: _theme(context).textFieldActiveSearchIconRight, + fontWeight: FontWeight.w500, + fontSize: 14, + height: 14 / 14, + ); } } @@ -569,6 +660,12 @@ class STextStyles { fontWeight: FontWeight.w700, fontSize: 12, ); + case ThemeType.forest: + return GoogleFonts.inter( + color: _theme(context).textSubtitle1, + fontWeight: FontWeight.w700, + fontSize: 12, + ); } } @@ -604,6 +701,12 @@ class STextStyles { fontWeight: FontWeight.w500, fontSize: 14, ); + case ThemeType.forest: + return GoogleFonts.inter( + color: _theme(context).infoItemLabel, + fontWeight: FontWeight.w500, + fontSize: 14, + ); } } @@ -639,6 +742,12 @@ class STextStyles { fontWeight: FontWeight.w500, fontSize: 14, ); + case ThemeType.forest: + return GoogleFonts.inter( + color: _theme(context).textDark, + fontWeight: FontWeight.w500, + fontSize: 14, + ); } } @@ -674,6 +783,12 @@ class STextStyles { fontWeight: FontWeight.w500, fontSize: 14, ); + case ThemeType.forest: + return GoogleFonts.inter( + color: _theme(context).textDark, + fontWeight: FontWeight.w500, + fontSize: 14, + ); } } @@ -714,6 +829,13 @@ class STextStyles { fontSize: 14, height: 1.5, ); + case ThemeType.forest: + return GoogleFonts.inter( + color: _theme(context).textSubtitle2, + fontWeight: FontWeight.w500, + fontSize: 14, + height: 1.5, + ); } } @@ -754,6 +876,13 @@ class STextStyles { fontSize: 14, height: 1.5, ); + case ThemeType.forest: + return GoogleFonts.inter( + color: _theme(context).textDark, + fontWeight: FontWeight.w500, + fontSize: 14, + height: 1.5, + ); } } @@ -789,6 +918,12 @@ class STextStyles { fontWeight: FontWeight.w400, fontSize: 14, ); + case ThemeType.forest: + return GoogleFonts.inter( + color: _theme(context).textDark, + fontWeight: FontWeight.w400, + fontSize: 14, + ); } } @@ -824,6 +959,12 @@ class STextStyles { fontWeight: FontWeight.w500, fontSize: 14, ); + case ThemeType.forest: + return GoogleFonts.inter( + color: _theme(context).accentColorRed, + fontWeight: FontWeight.w500, + fontSize: 14, + ); } } @@ -859,6 +1000,12 @@ class STextStyles { fontWeight: FontWeight.w500, fontSize: 14, ); + case ThemeType.forest: + return GoogleFonts.inter( + color: _theme(context).infoItemIcons, + fontWeight: FontWeight.w500, + fontSize: 14, + ); } } @@ -894,6 +1041,12 @@ class STextStyles { fontWeight: FontWeight.w500, fontSize: 12, ); + case ThemeType.forest: + return GoogleFonts.inter( + color: _theme(context).accentColorBlue, + fontWeight: FontWeight.w500, + fontSize: 12, + ); } } @@ -929,6 +1082,12 @@ class STextStyles { fontWeight: FontWeight.w600, fontSize: 12, ); + case ThemeType.forest: + return GoogleFonts.inter( + color: _theme(context).textDark, + fontWeight: FontWeight.w600, + fontSize: 12, + ); } } @@ -964,6 +1123,12 @@ class STextStyles { fontWeight: FontWeight.w600, fontSize: 14, ); + case ThemeType.forest: + return GoogleFonts.inter( + color: _theme(context).textDark, + fontWeight: FontWeight.w600, + fontSize: 14, + ); } } @@ -999,6 +1164,12 @@ class STextStyles { fontWeight: FontWeight.w500, fontSize: 14, ); + case ThemeType.forest: + return GoogleFonts.inter( + color: _theme(context).textDark, + fontWeight: FontWeight.w500, + fontSize: 14, + ); } } @@ -1034,6 +1205,12 @@ class STextStyles { fontWeight: FontWeight.w500, fontSize: 12, ); + case ThemeType.forest: + return GoogleFonts.inter( + color: _theme(context).textDark, + fontWeight: FontWeight.w500, + fontSize: 12, + ); } } @@ -1069,6 +1246,12 @@ class STextStyles { fontWeight: FontWeight.w500, fontSize: 10, ); + case ThemeType.forest: + return GoogleFonts.inter( + color: _theme(context).textDark, + fontWeight: FontWeight.w500, + fontSize: 10, + ); } } @@ -1104,6 +1287,12 @@ class STextStyles { fontWeight: FontWeight.w500, fontSize: 12, ); + case ThemeType.forest: + return GoogleFonts.inter( + color: _theme(context).textDark, + fontWeight: FontWeight.w500, + fontSize: 12, + ); } } @@ -1139,6 +1328,12 @@ class STextStyles { fontWeight: FontWeight.w500, fontSize: 12, ); + case ThemeType.forest: + return GoogleFonts.inter( + color: _theme(context).textDark, + fontWeight: FontWeight.w500, + fontSize: 12, + ); } } @@ -1174,6 +1369,12 @@ class STextStyles { fontWeight: FontWeight.w500, fontSize: 10, ); + case ThemeType.forest: + return GoogleFonts.inter( + color: _theme(context).textError, + fontWeight: FontWeight.w500, + fontSize: 10, + ); } } @@ -1209,6 +1410,12 @@ class STextStyles { fontWeight: FontWeight.w500, fontSize: 10, ); + case ThemeType.forest: + return GoogleFonts.inter( + color: _theme(context).textSubtitle1, + fontWeight: FontWeight.w500, + fontSize: 10, + ); } } @@ -1251,6 +1458,13 @@ class STextStyles { fontSize: 40, height: 40 / 40, ); + case ThemeType.forest: + return GoogleFonts.inter( + color: _theme(context).textDark, + fontWeight: FontWeight.w600, + fontSize: 40, + height: 40 / 40, + ); } } @@ -1291,6 +1505,13 @@ class STextStyles { fontSize: 32, height: 32 / 32, ); + case ThemeType.forest: + return GoogleFonts.inter( + color: _theme(context).textDark, + fontWeight: FontWeight.w600, + fontSize: 32, + height: 32 / 32, + ); } } @@ -1331,6 +1552,13 @@ class STextStyles { fontSize: 24, height: 24 / 24, ); + case ThemeType.forest: + return GoogleFonts.inter( + color: _theme(context).textDark, + fontWeight: FontWeight.w600, + fontSize: 24, + height: 24 / 24, + ); } } @@ -1371,6 +1599,13 @@ class STextStyles { fontSize: 24, height: 24 / 24, ); + case ThemeType.forest: + return GoogleFonts.inter( + color: _theme(context).textDark, + fontWeight: FontWeight.w500, + fontSize: 24, + height: 24 / 24, + ); } } @@ -1411,6 +1646,13 @@ class STextStyles { fontSize: 20, height: 30 / 20, ); + case ThemeType.forest: + return GoogleFonts.inter( + color: _theme(context).textDark, + fontWeight: FontWeight.w500, + fontSize: 20, + height: 30 / 20, + ); } } @@ -1451,6 +1693,13 @@ class STextStyles { fontSize: 20, height: 30 / 20, ); + case ThemeType.forest: + return GoogleFonts.inter( + color: _theme(context).textDark, + fontWeight: FontWeight.w400, + fontSize: 20, + height: 30 / 20, + ); } } @@ -1491,6 +1740,13 @@ class STextStyles { fontSize: 20, height: 28 / 20, ); + case ThemeType.forest: + return GoogleFonts.inter( + color: _theme(context).textDark, + fontWeight: FontWeight.w400, + fontSize: 20, + height: 28 / 20, + ); } } @@ -1531,6 +1787,13 @@ class STextStyles { fontSize: 24, height: 33 / 24, ); + case ThemeType.forest: + return GoogleFonts.inter( + color: _theme(context).textDark, + fontWeight: FontWeight.w400, + fontSize: 24, + height: 33 / 24, + ); } } @@ -1571,6 +1834,13 @@ class STextStyles { fontSize: 20, height: 26 / 20, ); + case ThemeType.forest: + return GoogleFonts.inter( + color: _theme(context).buttonTextPrimary, + fontWeight: FontWeight.w500, + fontSize: 20, + height: 26 / 20, + ); } } @@ -1611,6 +1881,13 @@ class STextStyles { fontSize: 20, height: 26 / 20, ); + case ThemeType.forest: + return GoogleFonts.inter( + color: _theme(context).buttonTextPrimaryDisabled, + fontWeight: FontWeight.w500, + fontSize: 20, + height: 26 / 20, + ); } } @@ -1651,6 +1928,13 @@ class STextStyles { fontSize: 20, height: 26 / 20, ); + case ThemeType.forest: + return GoogleFonts.inter( + color: _theme(context).buttonTextSecondary, + fontWeight: FontWeight.w500, + fontSize: 20, + height: 26 / 20, + ); } } @@ -1691,6 +1975,13 @@ class STextStyles { fontSize: 20, height: 26 / 20, ); + case ThemeType.forest: + return GoogleFonts.inter( + color: _theme(context).buttonTextSecondaryDisabled, + fontWeight: FontWeight.w500, + fontSize: 20, + height: 26 / 20, + ); } } @@ -1731,6 +2022,13 @@ class STextStyles { fontSize: 18, height: 27 / 18, ); + case ThemeType.forest: + return GoogleFonts.inter( + color: _theme(context).textDark, + fontWeight: FontWeight.w500, + fontSize: 18, + height: 27 / 18, + ); } } @@ -1771,6 +2069,13 @@ class STextStyles { fontSize: 18, height: 27 / 18, ); + case ThemeType.forest: + return GoogleFonts.inter( + color: _theme(context).textDark, + fontWeight: FontWeight.w700, + fontSize: 18, + height: 27 / 18, + ); } } @@ -1811,6 +2116,13 @@ class STextStyles { fontSize: 16, height: 24 / 16, ); + case ThemeType.forest: + return GoogleFonts.inter( + color: _theme(context).buttonTextPrimaryDisabled, + fontWeight: FontWeight.w500, + fontSize: 16, + height: 24 / 16, + ); } } @@ -1851,6 +2163,13 @@ class STextStyles { fontSize: 14, height: 21 / 14, ); + case ThemeType.forest: + return GoogleFonts.inter( + color: _theme(context).textSubtitle1, + fontWeight: FontWeight.w500, + fontSize: 14, + height: 21 / 14, + ); } } @@ -1891,6 +2210,13 @@ class STextStyles { fontSize: 14, height: 21 / 14, ); + case ThemeType.forest: + return GoogleFonts.inter( + color: _theme(context).textDark, + fontWeight: FontWeight.w600, + fontSize: 14, + height: 21 / 14, + ); } } @@ -1931,6 +2257,13 @@ class STextStyles { fontSize: 16, height: 24 / 16, ); + case ThemeType.forest: + return GoogleFonts.inter( + color: _theme(context).buttonTextSecondary, + fontWeight: FontWeight.w500, + fontSize: 16, + height: 24 / 16, + ); } } @@ -1971,6 +2304,13 @@ class STextStyles { fontSize: 20, height: 30 / 20, ); + case ThemeType.forest: + return GoogleFonts.inter( + color: _theme(context).textSubtitle2, + fontWeight: FontWeight.w500, + fontSize: 20, + height: 30 / 20, + ); } } @@ -2011,6 +2351,13 @@ class STextStyles { fontSize: 16, height: 20.8 / 16, ); + case ThemeType.forest: + return GoogleFonts.inter( + color: _theme(context).textDark.withOpacity(0.8), + fontWeight: FontWeight.w500, + fontSize: 16, + height: 20.8 / 16, + ); } } @@ -2051,6 +2398,13 @@ class STextStyles { fontSize: 16, height: 20.8 / 16, ); + case ThemeType.forest: + return GoogleFonts.inter( + color: _theme(context).textDark, + fontWeight: FontWeight.w500, + fontSize: 16, + height: 20.8 / 16, + ); } } @@ -2091,6 +2445,13 @@ class STextStyles { fontSize: 16, height: 20.8 / 16, ); + case ThemeType.forest: + return GoogleFonts.inter( + color: _theme(context).textDark.withOpacity(0.5), + fontWeight: FontWeight.w500, + fontSize: 16, + height: 20.8 / 16, + ); } } @@ -2131,6 +2492,13 @@ class STextStyles { fontSize: 16, height: 20.8 / 16, ); + case ThemeType.forest: + return GoogleFonts.inter( + color: _theme(context).textDark, + fontWeight: FontWeight.w500, + fontSize: 16, + height: 20.8 / 16, + ); } } @@ -2166,6 +2534,12 @@ class STextStyles { fontWeight: FontWeight.w600, fontSize: 8, ); + case ThemeType.forest: + return GoogleFonts.roboto( + color: _theme(context).textDark, + fontWeight: FontWeight.w600, + fontSize: 8, + ); } } @@ -2201,6 +2575,12 @@ class STextStyles { fontWeight: FontWeight.w400, fontSize: 26, ); + case ThemeType.forest: + return GoogleFonts.roboto( + color: _theme(context).numberTextDefault, + fontWeight: FontWeight.w400, + fontSize: 26, + ); } } @@ -2241,6 +2621,13 @@ class STextStyles { fontWeight: FontWeight.w400, fontSize: 12, ); + case ThemeType.forest: + return GoogleFonts.inter( + letterSpacing: 0.5, + color: _theme(context).accentColorDark, + fontWeight: FontWeight.w400, + fontSize: 12, + ); } } @@ -2281,6 +2668,13 @@ class STextStyles { fontWeight: FontWeight.w600, fontSize: 16, ); + case ThemeType.forest: + return GoogleFonts.inter( + letterSpacing: 0.5, + color: _theme(context).accentColorDark, + fontWeight: FontWeight.w600, + fontSize: 16, + ); } } } diff --git a/lib/utilities/theme/color_theme.dart b/lib/utilities/theme/color_theme.dart index dfd62a6a0..1e7b3ab82 100644 --- a/lib/utilities/theme/color_theme.dart +++ b/lib/utilities/theme/color_theme.dart @@ -1,12 +1,13 @@ import 'package:flutter/material.dart'; import 'package:stackwallet/utilities/enums/coin_enum.dart'; import 'package:stackwallet/utilities/theme/dark_colors.dart'; +import 'package:stackwallet/utilities/theme/forest_colors.dart'; import 'package:stackwallet/utilities/theme/fruit_sorbet_colors.dart'; import 'package:stackwallet/utilities/theme/light_colors.dart'; import 'package:stackwallet/utilities/theme/ocean_breeze_colors.dart'; import 'package:stackwallet/utilities/theme/oled_black_colors.dart'; -enum ThemeType { light, dark, oceanBreeze, oledBlack, fruitSorbet } +enum ThemeType { light, dark, oceanBreeze, oledBlack, fruitSorbet, forest } // adjust this file @@ -23,6 +24,8 @@ extension ThemeTypeExt on ThemeType { return OledBlackColors(); case ThemeType.fruitSorbet: return FruitSorbetColors(); + case ThemeType.forest: + return ForestColors(); } } @@ -35,9 +38,11 @@ extension ThemeTypeExt on ThemeType { case ThemeType.oceanBreeze: return "Ocean Breeze"; case ThemeType.oledBlack: - return "Oled Black"; + return "OLED Black"; case ThemeType.fruitSorbet: return "Fruit Sorbet"; + case ThemeType.forest: + return "Forest"; } } } diff --git a/lib/utilities/theme/forest_colors.dart b/lib/utilities/theme/forest_colors.dart new file mode 100644 index 000000000..ad4942a80 --- /dev/null +++ b/lib/utilities/theme/forest_colors.dart @@ -0,0 +1,345 @@ +import 'package:flutter/material.dart'; +import 'package:stackwallet/utilities/theme/color_theme.dart'; + +class ForestColors extends StackColorTheme { + @override + ThemeType get themeType => ThemeType.forest; + + @override + Color get background => const Color(0xFFF3FAF5); + @override + Color get backgroundAppBar => background; + @override + Gradient? get gradientBackground => null; + + @override + Color get overlay => const Color(0xFF111215); + + @override + Color get accentColorBlue => const Color(0xFF077CBE); + @override + Color get accentColorGreen => const Color(0xFF00A591); + @override + Color get accentColorYellow => const Color(0xFFF4C517); + @override + Color get accentColorRed => const Color(0xFFD1382D); + @override + Color get accentColorOrange => const Color(0xFFFF985F); + @override + Color get accentColorDark => const Color(0xFF22867A); + + @override + Color get shadow => const Color(0x0F2D3132); + + @override + Color get textDark => const Color(0xFF232323); + @override + Color get textDark2 => const Color(0xFF333333); + @override + Color get textDark3 => const Color(0xFF696B6C); + @override + Color get textSubtitle1 => const Color(0xFF7E8284); + @override + Color get textSubtitle2 => const Color(0xFF919393); + @override + Color get textSubtitle3 => const Color(0xFFB0B2B2); + @override + Color get textSubtitle4 => const Color(0xFFD1D3D3); + @override + Color get textSubtitle5 => const Color(0xFFDEDFE1); + @override + Color get textSubtitle6 => const Color(0xFFF1F1F1); + @override + Color get textWhite => const Color(0xFFFFFFFF); + @override + Color get textFavoriteCard => const Color(0xFF232323); + @override + Color get textError => const Color(0xFF8D0006); + @override + Color get textRestore => overlay; + + // button background + @override + Color get buttonBackPrimary => const Color(0xFF22867A); + @override + Color get buttonBackSecondary => const Color(0xFFC2E2D5); + @override + Color get buttonBackPrimaryDisabled => const Color(0xFFBDDBCB); + @override + Color get buttonBackSecondaryDisabled => const Color(0xFFBDBDBD); + @override + Color get buttonBackBorder => const Color(0xFF22867A); + @override + Color get buttonBackBorderDisabled => const Color(0xFFBDD5DB); + @override + Color get buttonBackBorderSecondary => buttonBackSecondary; + @override + Color get buttonBackBorderSecondaryDisabled => buttonBackSecondaryDisabled; + + @override + Color get numberBackDefault => const Color(0xFFFFFFFF); + @override + Color get numpadBackDefault => const Color(0xFF22867A); + @override + Color get bottomNavBack => const Color(0xFFFFFFFF); + + // button text/element + @override + Color get buttonTextPrimary => const Color(0xFFFFFFFF); + @override + Color get buttonTextSecondary => const Color(0xFF232323); + @override + Color get buttonTextPrimaryDisabled => const Color(0xFFFFFFFF); + @override + Color get buttonTextSecondaryDisabled => const Color(0xFFBDD5DB); + @override + Color get buttonTextBorder => const Color(0xFFBDD5DB); + @override + Color get buttonTextDisabled => const Color(0xFF22867A); + @override + Color get buttonTextBorderless => const Color(0xFFFFFFFF); + @override + Color get buttonTextBorderlessDisabled => const Color(0xFF056EC6); + @override + Color get numberTextDefault => const Color(0xFF232323); + @override + Color get numpadTextDefault => const Color(0xFFFFFFFF); + @override + Color get bottomNavText => const Color(0xFF232323); + + // switch + @override + Color get switchBGOn => const Color(0xFF2DAB9C); + @override + Color get switchBGOff => const Color(0xFFD6F0E8); + @override + Color get switchBGDisabled => const Color(0xFFC5C6C9); + @override + Color get switchCircleOn => const Color(0xFFDEFFF2); + @override + Color get switchCircleOff => const Color(0xFFFBFCFF); + @override + Color get switchCircleDisabled => const Color(0xFFFBFCFF); + + // step indicator background + @override + Color get stepIndicatorBGCheck => const Color(0xFFBBF0DB); + @override + Color get stepIndicatorBGNumber => const Color(0xFFCDD9FF); + @override + Color get stepIndicatorBGInactive => const Color(0xFFD2EDE5); + @override + Color get stepIndicatorBGLines => const Color(0xFF90B8DC); + @override + Color get stepIndicatorBGLinesInactive => const Color(0xFFBCEAD9); + @override + Color get stepIndicatorIconText => const Color(0xFF22867A); + @override + Color get stepIndicatorIconNumber => const Color(0xFF005BAF); + @override + Color get stepIndicatorIconInactive => const Color(0xFFD4DFFF); + + // checkbox + @override + Color get checkboxBGChecked => const Color(0xFF22867A); + @override + Color get checkboxBorderEmpty => const Color(0xFF8C8F90); + @override + Color get checkboxBGDisabled => const Color(0xFFB0C9ED); + @override + Color get checkboxIconChecked => const Color(0xFFFFFFFF); + @override + Color get checkboxIconDisabled => const Color(0xFFFFFFFF); + @override + Color get checkboxTextLabel => const Color(0xFF232323); + + // snack bar + @override + Color get snackBarBackSuccess => const Color(0xFFADD6D2); + @override + Color get snackBarBackError => const Color(0xFFADD6D2); + @override + Color get snackBarBackInfo => const Color(0xFFCCD7FF); + @override + Color get snackBarTextSuccess => const Color(0xFF075547); + @override + Color get snackBarTextError => const Color(0xFF8D0006); + @override + Color get snackBarTextInfo => const Color(0xFF002569); + + // icons + @override + Color get bottomNavIconBack => const Color(0xFFA7C7CF); + @override + Color get bottomNavIconIcon => const Color(0xFF227386); + + @override + Color get topNavIconPrimary => const Color(0xFF227386); + @override + Color get topNavIconGreen => const Color(0xFF00A591); + @override + Color get topNavIconYellow => const Color(0xFFFDD33A); + @override + Color get topNavIconRed => const Color(0xFFEA4649); + + @override + Color get settingsIconBack => const Color(0xFFE0E3E3); + @override + Color get settingsIconIcon => const Color(0xFF232323); + @override + Color get settingsIconBack2 => const Color(0xFF80D2C8); + @override + Color get settingsIconElement => const Color(0xFF00A591); + + // text field + @override + Color get textFieldActiveBG => const Color(0xFFE3FFF3); + @override + Color get textFieldDefaultBG => const Color(0xFFDDF3EA); + @override + Color get textFieldErrorBG => const Color(0xFFF6C7C3); + @override + Color get textFieldSuccessBG => const Color(0xFFADD6D2); + @override + Color get textFieldErrorBorder => textFieldErrorBG; + @override + Color get textFieldSuccessBorder => textFieldSuccessBG; + + @override + Color get textFieldActiveSearchIconLeft => const Color(0xFF86898C); + @override + Color get textFieldDefaultSearchIconLeft => const Color(0xFF86898C); + @override + Color get textFieldErrorSearchIconLeft => const Color(0xFF8D0006); + @override + Color get textFieldSuccessSearchIconLeft => const Color(0xFF006C4D); + + @override + Color get textFieldActiveText => const Color(0xFF232323); + @override + Color get textFieldDefaultText => const Color(0xFF86898C); + @override + Color get textFieldErrorText => const Color(0xFF000000); + @override + Color get textFieldSuccessText => const Color(0xFF000000); + + @override + Color get textFieldActiveLabel => const Color(0xFF86898C); + @override + Color get textFieldErrorLabel => const Color(0xFF8D0006); + @override + Color get textFieldSuccessLabel => const Color(0xFF077C6E); + + @override + Color get textFieldActiveSearchIconRight => const Color(0xFF22867A); + @override + Color get textFieldDefaultSearchIconRight => const Color(0xFF22867A); + @override + Color get textFieldErrorSearchIconRight => const Color(0xFF8D0006); + @override + Color get textFieldSuccessSearchIconRight => const Color(0xFF077C6E); + + // settings item level2 + @override + Color get settingsItem2ActiveBG => const Color(0xFFFFFFFF); + @override + Color get settingsItem2ActiveText => const Color(0xFF232323); + @override + Color get settingsItem2ActiveSub => const Color(0xFF8C8F90); + + // radio buttons + @override + Color get radioButtonIconBorder => const Color(0xFF056EC6); + @override + Color get radioButtonIconBorderDisabled => const Color(0xFF8C8D97); + @override + Color get radioButtonBorderEnabled => const Color(0xFF056EC6); + @override + Color get radioButtonBorderDisabled => const Color(0xFF8C8D97); + @override + Color get radioButtonIconCircle => const Color(0xFF056EC6); + @override + Color get radioButtonIconEnabled => const Color(0xFF056EC6); + @override + Color get radioButtonTextEnabled => const Color(0xFF42444B); + @override + Color get radioButtonTextDisabled => const Color(0xFF42444B); + @override + Color get radioButtonLabelEnabled => const Color(0xFF8C8F90); + @override + Color get radioButtonLabelDisabled => const Color(0xFF8C8F90); + + // info text + @override + Color get infoItemBG => const Color(0xFFFFFFFF); + @override + Color get infoItemLabel => const Color(0xFF838788); + @override + Color get infoItemText => const Color(0xFF232323); + @override + Color get infoItemIcons => const Color(0xFF056EC6); + + // popup + @override + Color get popupBG => const Color(0xFFFFFFFF); + + // currency list + @override + Color get currencyListItemBG => const Color(0xFFF0F5F7); + + // bottom nav + @override + Color get stackWalletBG => const Color(0xFFFFFFFF); + @override + Color get stackWalletMid => const Color(0xFFFFFFFF); + @override + Color get stackWalletBottom => const Color(0xFF232323); + @override + Color get bottomNavShadow => const Color(0xFF388192); + + @override + Color get favoriteStarActive => const Color(0xFFF4C517); + @override + Color get favoriteStarInactive => const Color(0xFFB0B2B2); + + @override + Color get splash => const Color(0xFF8E9192); + @override + Color get highlight => const Color(0xFFA9ACAC); + @override + Color get warningForeground => const Color(0xFF232323); + @override + Color get warningBackground => const Color(0xFFF6C7C3); + @override + Color get loadingOverlayTextColor => const Color(0xFFF7F7F7); + @override + Color get myStackContactIconBG => const Color(0xFFD8E7EB); + @override + Color get textConfirmTotalAmount => const Color(0xFF232323); + @override + Color get textSelectedWordTableItem => const Color(0xFF232323); + + //rate type toggle + @override + Color get rateTypeToggleColorOn => textFieldDefaultBG; + @override + Color get rateTypeToggleColorOff => popupBG; + @override + Color get rateTypeToggleDesktopColorOn => textFieldDefaultBG; + @override + Color get rateTypeToggleDesktopColorOff => buttonBackSecondary; + + @override + BoxShadow get standardBoxShadow => BoxShadow( + color: shadow, + spreadRadius: 3, + blurRadius: 4, + ); + + @override + BoxShadow? get homeViewButtonBarBoxShadow => BoxShadow( + color: shadow, + spreadRadius: 3, + blurRadius: 4, + ); +} diff --git a/lib/widgets/background.dart b/lib/widgets/background.dart index 353e3d138..aa8836570 100644 --- a/lib/widgets/background.dart +++ b/lib/widgets/background.dart @@ -23,6 +23,7 @@ class Background extends StatelessWidget { case ThemeType.light: case ThemeType.dark: case ThemeType.oledBlack: + case ThemeType.forest: color = Theme.of(context).extension()!.background; break; case ThemeType.oceanBreeze: diff --git a/pubspec.yaml b/pubspec.yaml index bac178729..45e11600f 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -353,6 +353,7 @@ flutter: - assets/svg/ocean-breeze-theme.svg - assets/svg/oled-black-theme.svg - assets/svg/fruit-sorbet-theme.svg + - assets/svg/forest-theme.svg # light theme specific - assets/svg/light/tx-exchange-icon.svg