diff --git a/assets/svg/oled-black-theme.svg b/assets/svg/oled-black-theme.svg new file mode 100644 index 000000000..70a14e115 --- /dev/null +++ b/assets/svg/oled-black-theme.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/svg/oledBlack/bell-new.svg b/assets/svg/oledBlack/bell-new.svg new file mode 100644 index 000000000..f976e0986 --- /dev/null +++ b/assets/svg/oledBlack/bell-new.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/assets/svg/oledBlack/buy-coins-icon.svg b/assets/svg/oledBlack/buy-coins-icon.svg new file mode 100644 index 000000000..9170c4190 --- /dev/null +++ b/assets/svg/oledBlack/buy-coins-icon.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/assets/svg/oledBlack/exchange-2.svg b/assets/svg/oledBlack/exchange-2.svg new file mode 100644 index 000000000..ee04dcebe --- /dev/null +++ b/assets/svg/oledBlack/exchange-2.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/assets/svg/oledBlack/oled-black-theme.svg b/assets/svg/oledBlack/oled-black-theme.svg new file mode 100644 index 000000000..70a14e115 --- /dev/null +++ b/assets/svg/oledBlack/oled-black-theme.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/svg/oledBlack/stack-icon1.svg b/assets/svg/oledBlack/stack-icon1.svg new file mode 100644 index 000000000..4fb16176a --- /dev/null +++ b/assets/svg/oledBlack/stack-icon1.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/assets/svg/oledBlack/tx-exchange-icon-failed.svg b/assets/svg/oledBlack/tx-exchange-icon-failed.svg new file mode 100644 index 000000000..64acda4e9 --- /dev/null +++ b/assets/svg/oledBlack/tx-exchange-icon-failed.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/assets/svg/oledBlack/tx-exchange-icon-pending.svg b/assets/svg/oledBlack/tx-exchange-icon-pending.svg new file mode 100644 index 000000000..f9cdeb7c2 --- /dev/null +++ b/assets/svg/oledBlack/tx-exchange-icon-pending.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/assets/svg/oledBlack/tx-exchange-icon.svg b/assets/svg/oledBlack/tx-exchange-icon.svg new file mode 100644 index 000000000..36b2cf7cc --- /dev/null +++ b/assets/svg/oledBlack/tx-exchange-icon.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/assets/svg/oledBlack/tx-icon-receive-failed.svg b/assets/svg/oledBlack/tx-icon-receive-failed.svg new file mode 100644 index 000000000..cb1d500b1 --- /dev/null +++ b/assets/svg/oledBlack/tx-icon-receive-failed.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/assets/svg/oledBlack/tx-icon-receive-pending.svg b/assets/svg/oledBlack/tx-icon-receive-pending.svg new file mode 100644 index 000000000..efb8350b3 --- /dev/null +++ b/assets/svg/oledBlack/tx-icon-receive-pending.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/assets/svg/oledBlack/tx-icon-receive.svg b/assets/svg/oledBlack/tx-icon-receive.svg new file mode 100644 index 000000000..15be19d52 --- /dev/null +++ b/assets/svg/oledBlack/tx-icon-receive.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/assets/svg/oledBlack/tx-icon-send-failed.svg b/assets/svg/oledBlack/tx-icon-send-failed.svg new file mode 100644 index 000000000..2be637ef3 --- /dev/null +++ b/assets/svg/oledBlack/tx-icon-send-failed.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/assets/svg/oledBlack/tx-icon-send-pending.svg b/assets/svg/oledBlack/tx-icon-send-pending.svg new file mode 100644 index 000000000..50cca5a9e --- /dev/null +++ b/assets/svg/oledBlack/tx-icon-send-pending.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/assets/svg/oledBlack/tx-icon-send.svg b/assets/svg/oledBlack/tx-icon-send.svg new file mode 100644 index 000000000..0e64ee37e --- /dev/null +++ b/assets/svg/oledBlack/tx-icon-send.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/lib/main.dart b/lib/main.dart index 4303889b7..ce9053e2c 100644 --- a/lib/main.dart +++ b/lib/main.dart @@ -59,6 +59,7 @@ import 'package:stackwallet/utilities/theme/color_theme.dart'; import 'package:stackwallet/utilities/theme/dark_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'; import 'package:stackwallet/utilities/theme/stack_colors.dart'; import 'package:stackwallet/utilities/util.dart'; import 'package:window_size/window_size.dart'; @@ -75,7 +76,6 @@ void main() async { if (Platform.isIOS) { Util.libraryPath = await getLibraryDirectory(); } - Screen? screen; if (Platform.isLinux || (Util.isDesktop && !Platform.isIOS)) { screen = await getCurrentScreen(); @@ -323,6 +323,9 @@ class _MaterialAppWithThemeState extends ConsumerState case "dark": colorTheme = DarkColors(); break; + case "oledBlack": + colorTheme = OledBlackColors(); + break; case "oceanBreeze": colorTheme = OceanBreezeColors(); break; diff --git a/lib/pages/exchange_view/exchange_form.dart b/lib/pages/exchange_view/exchange_form.dart index 032afacdb..0366b8da3 100644 --- a/lib/pages/exchange_view/exchange_form.dart +++ b/lib/pages/exchange_view/exchange_form.dart @@ -248,6 +248,29 @@ class _ExchangeFormState extends ConsumerState { fromTicker: ref.read(exchangeFormStateProvider).fromTicker ?? "", onSelected: (to) => ref.read(exchangeFormStateProvider).updateTo(to, true)); + + unawaited( + showDialog( + context: context, + barrierDismissible: false, + builder: (_) => WillPopScope( + onWillPop: () async => false, + child: Container( + color: Theme.of(context) + .extension()! + .overlay + .withOpacity(0.6), + child: const CustomLoadingOverlay( + message: "Updating exchange rate", + eventBus: null, + ), + ), + ), + ), + ); + + await Future.delayed(const Duration(milliseconds: 300)); + Navigator.of(context).pop(); } else { final fromTicker = ref.read(exchangeFormStateProvider).fromTicker ?? ""; final toTicker = ref.read(exchangeFormStateProvider).toTicker ?? ""; 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 693f39f02..73da50719 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 @@ -9,6 +9,7 @@ import 'package:stackwallet/utilities/theme/color_theme.dart'; import 'package:stackwallet/utilities/theme/dark_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'; import 'package:stackwallet/utilities/theme/stack_colors.dart'; import 'package:stackwallet/widgets/background.dart'; import 'package:stackwallet/widgets/custom_buttons/app_bar_icon_button.dart'; @@ -28,6 +29,8 @@ class AppearanceSettingsView extends ConsumerWidget { return "Ocean theme"; case ThemeType.dark: return "Dark theme"; + case ThemeType.oledBlack: + return "Oled Black theme"; } } @@ -430,6 +433,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.oledBlack.name, + ); + ref.read(colorThemeProvider.state).state = + StackColors.fromStackColorTheme( + OledBlackColors(), + ); + + setState(() { + _selectedTheme = "oledBlack"; + }); + }, + 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: "oledBlack", + groupValue: _selectedTheme, + onChanged: (newValue) { + if (newValue is String && newValue == "oledBlack") { + DB.instance.put( + boxName: DB.boxNameTheme, + key: "colorScheme", + value: ThemeType.oledBlack.name, + ); + ref.read(colorThemeProvider.state).state = + StackColors.fromStackColorTheme( + OledBlackColors(), + ); + + setState(() { + _selectedTheme = "oledBlack"; + }); + } + }, + ), + ), + const SizedBox( + width: 14, + ), + Text( + "OLED Black", + style: + STextStyles.desktopTextExtraSmall(context).copyWith( + color: Theme.of(context) + .extension()! + .textDark2, + ), + ), + ], + ), + ], + ), + ), + ), ], ); } 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 8486e64f6..f1bb52244 100644 --- a/lib/pages_desktop_specific/settings/settings_menu/appearance_settings.dart +++ b/lib/pages_desktop_specific/settings/settings_menu/appearance_settings.dart @@ -35,106 +35,110 @@ class _AppearanceOptionSettings ), child: RoundedWhiteContainer( radiusMultiplier: 2, - child: Column( - crossAxisAlignment: CrossAxisAlignment.start, + child: Wrap( children: [ - Padding( - padding: const EdgeInsets.all(8.0), - child: SvgPicture.asset( - Assets.svg.circleSun, - width: 48, - height: 48, - ), - ), Column( - crossAxisAlignment: CrossAxisAlignment.stretch, + crossAxisAlignment: CrossAxisAlignment.start, children: [ Padding( - padding: const EdgeInsets.all(10), - child: RichText( - textAlign: TextAlign.left, - text: TextSpan( - children: [ - TextSpan( - text: "Appearances", - style: STextStyles.desktopTextSmall(context), - ), - TextSpan( - text: - "\n\nCustomize how your Stack Wallet looks according to your preferences.", - style: STextStyles.desktopTextExtraExtraSmall( - context), - ), - ], - ), + padding: const EdgeInsets.all(8.0), + child: SvgPicture.asset( + Assets.svg.circleSun, + width: 48, + height: 48, ), ), - ], - ), - const Padding( - padding: EdgeInsets.all(10.0), - child: Divider( - thickness: 0.5, - ), - ), - Padding( - padding: const EdgeInsets.all(10.0), - child: Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: [ - Text( - "Display favorite wallets", - style: STextStyles.desktopTextExtraSmall(context) - .copyWith( - color: Theme.of(context) - .extension()! - .textDark), - textAlign: TextAlign.left, - ), - SizedBox( - height: 20, - width: 40, - child: DraggableSwitchButton( - isOn: ref.watch( - prefsChangeNotifierProvider - .select((value) => value.showFavoriteWallets), + Column( + crossAxisAlignment: CrossAxisAlignment.stretch, + children: [ + Padding( + padding: const EdgeInsets.all(10), + child: RichText( + textAlign: TextAlign.left, + text: TextSpan( + children: [ + TextSpan( + text: "Appearances", + style: STextStyles.desktopTextSmall(context), + ), + TextSpan( + text: + "\n\nCustomize how your Stack Wallet looks according to your preferences.", + style: STextStyles.desktopTextExtraExtraSmall( + context), + ), + ], + ), ), - onValueChanged: (newValue) { - ref - .read(prefsChangeNotifierProvider) - .showFavoriteWallets = newValue; - }, ), - ) - ], - ), - ), - const Padding( - padding: EdgeInsets.all(10.0), - child: Divider( - thickness: 0.5, - ), - ), - Padding( - padding: const EdgeInsets.all(10.0), - child: Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: [ - Text( - "Choose theme", - style: STextStyles.desktopTextExtraSmall(context) - .copyWith( - color: Theme.of(context) - .extension()! - .textDark), - textAlign: TextAlign.left, + ], + ), + const Padding( + padding: EdgeInsets.all(10.0), + child: Divider( + thickness: 0.5, ), - ], - ), - ), - const Padding( - padding: EdgeInsets.all(10), - child: ThemeToggle(), + ), + Padding( + padding: const EdgeInsets.all(10.0), + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Text( + "Display favorite wallets", + style: STextStyles.desktopTextExtraSmall(context) + .copyWith( + color: Theme.of(context) + .extension()! + .textDark), + textAlign: TextAlign.left, + ), + SizedBox( + height: 20, + width: 40, + child: DraggableSwitchButton( + isOn: ref.watch( + prefsChangeNotifierProvider.select( + (value) => value.showFavoriteWallets), + ), + onValueChanged: (newValue) { + ref + .read(prefsChangeNotifierProvider) + .showFavoriteWallets = newValue; + }, + ), + ) + ], + ), + ), + const Padding( + padding: EdgeInsets.all(10.0), + child: Divider( + thickness: 0.5, + ), + ), + Padding( + padding: const EdgeInsets.all(10.0), + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Text( + "Choose theme", + style: STextStyles.desktopTextExtraSmall(context) + .copyWith( + color: Theme.of(context) + .extension()! + .textDark), + textAlign: TextAlign.left, + ), + ], + ), + ), + Padding( + padding: EdgeInsets.all(10), + child: ThemeToggle(), + ), + ], ), ], ), @@ -163,12 +167,16 @@ class _ThemeToggle extends ConsumerState { return Assets.svg.themeDark; case ThemeType.oceanBreeze: return Assets.svg.themeOcean; + case ThemeType.oledBlack: + return Assets.svg.themeOledBlack; } } @override Widget build(BuildContext context) { - return Row( + return Wrap( + spacing: 16, + runSpacing: 16, children: [ for (int i = 0; i < ThemeType.values.length; i++) Row( diff --git a/lib/utilities/assets.dart b/lib/utilities/assets.dart index b02c6584e..f9128205d 100644 --- a/lib/utilities/assets.dart +++ b/lib/utilities/assets.dart @@ -33,6 +33,7 @@ class _SVG { switch (Theme.of(context).extension()!.themeType) { case ThemeType.light: case ThemeType.dark: + case ThemeType.oledBlack: return null; case ThemeType.oceanBreeze: @@ -70,6 +71,7 @@ class _SVG { String txExchangeFailed(BuildContext context) => "assets/svg/${Theme.of(context).extension()!.themeType.name}/tx-exchange-icon-failed.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"; String get themeDark => "assets/svg/dark-theme.svg"; diff --git a/lib/utilities/text_styles.dart b/lib/utilities/text_styles.dart index 56c313219..3d1a38c12 100644 --- a/lib/utilities/text_styles.dart +++ b/lib/utilities/text_styles.dart @@ -27,6 +27,12 @@ class STextStyles { fontWeight: FontWeight.w600, fontSize: 20, ); + case ThemeType.oledBlack: + return GoogleFonts.inter( + color: _theme(context).textDark, + fontWeight: FontWeight.w600, + fontSize: 20, + ); } } @@ -50,6 +56,12 @@ class STextStyles { fontWeight: FontWeight.w600, fontSize: 18, ); + case ThemeType.oledBlack: + return GoogleFonts.inter( + color: _theme(context).textDark, + fontWeight: FontWeight.w600, + fontSize: 18, + ); } } @@ -73,6 +85,12 @@ class STextStyles { fontWeight: FontWeight.w600, fontSize: 16, ); + case ThemeType.oledBlack: + return GoogleFonts.inter( + color: _theme(context).textDark, + fontWeight: FontWeight.w600, + fontSize: 16, + ); } } @@ -96,6 +114,12 @@ class STextStyles { fontWeight: FontWeight.w600, fontSize: 16, ); + case ThemeType.oledBlack: + return GoogleFonts.inter( + color: _theme(context).textDark, + fontWeight: FontWeight.w600, + fontSize: 16, + ); } } @@ -119,6 +143,12 @@ class STextStyles { fontWeight: FontWeight.w400, fontSize: 16, ); + case ThemeType.oledBlack: + return GoogleFonts.inter( + color: _theme(context).textDark, + fontWeight: FontWeight.w400, + fontSize: 16, + ); } } @@ -142,6 +172,12 @@ class STextStyles { fontWeight: FontWeight.w400, fontSize: 16, ); + case ThemeType.oledBlack: + return GoogleFonts.inter( + color: _theme(context).textDark, + fontWeight: FontWeight.w400, + fontSize: 16, + ); } } @@ -165,6 +201,12 @@ class STextStyles { fontWeight: FontWeight.w500, fontSize: 16, ); + case ThemeType.oledBlack: + return GoogleFonts.inter( + color: _theme(context).textDark, + fontWeight: FontWeight.w500, + fontSize: 16, + ); } } @@ -188,6 +230,12 @@ class STextStyles { fontWeight: FontWeight.w600, fontSize: 16, ); + case ThemeType.oledBlack: + return GoogleFonts.inter( + color: _theme(context).textDark, + fontWeight: FontWeight.w600, + fontSize: 16, + ); } } @@ -211,6 +259,12 @@ class STextStyles { fontWeight: FontWeight.w500, fontSize: 16, ); + case ThemeType.oledBlack: + return GoogleFonts.inter( + color: _theme(context).buttonTextPrimary, + fontWeight: FontWeight.w500, + fontSize: 16, + ); } } @@ -234,6 +288,12 @@ class STextStyles { fontWeight: FontWeight.w500, fontSize: 16, ); + case ThemeType.oledBlack: + return GoogleFonts.inter( + color: _theme(context).textDark, + fontWeight: FontWeight.w500, + fontSize: 16, + ); } } @@ -257,6 +317,12 @@ class STextStyles { fontWeight: FontWeight.w500, fontSize: 16, ); + case ThemeType.oledBlack: + return GoogleFonts.inter( + color: _theme(context).textDark3, + fontWeight: FontWeight.w500, + fontSize: 16, + ); } } @@ -280,6 +346,12 @@ class STextStyles { fontWeight: FontWeight.w500, fontSize: 14, ); + case ThemeType.oledBlack: + return GoogleFonts.inter( + color: _theme(context).textDark3, + fontWeight: FontWeight.w500, + fontSize: 14, + ); } } @@ -303,6 +375,12 @@ class STextStyles { fontWeight: FontWeight.w500, fontSize: 12, ); + case ThemeType.oledBlack: + return GoogleFonts.inter( + color: _theme(context).textSubtitle1, + fontWeight: FontWeight.w500, + fontSize: 12, + ); } } @@ -329,6 +407,13 @@ class STextStyles { fontSize: 14, height: 14 / 14, ); + case ThemeType.oledBlack: + return GoogleFonts.inter( + color: _theme(context).textFieldActiveSearchIconRight, + fontWeight: FontWeight.w500, + fontSize: 14, + height: 14 / 14, + ); } } @@ -352,6 +437,12 @@ class STextStyles { fontWeight: FontWeight.w700, fontSize: 12, ); + case ThemeType.oledBlack: + return GoogleFonts.inter( + color: _theme(context).textSubtitle1, + fontWeight: FontWeight.w700, + fontSize: 12, + ); } } @@ -375,6 +466,12 @@ class STextStyles { fontWeight: FontWeight.w500, fontSize: 14, ); + case ThemeType.oledBlack: + return GoogleFonts.inter( + color: _theme(context).infoItemLabel, + fontWeight: FontWeight.w500, + fontSize: 14, + ); } } @@ -398,6 +495,12 @@ class STextStyles { fontWeight: FontWeight.w500, fontSize: 14, ); + case ThemeType.oledBlack: + return GoogleFonts.inter( + color: _theme(context).textDark, + fontWeight: FontWeight.w500, + fontSize: 14, + ); } } @@ -421,6 +524,12 @@ class STextStyles { fontWeight: FontWeight.w500, fontSize: 14, ); + case ThemeType.oledBlack: + return GoogleFonts.inter( + color: _theme(context).textDark, + fontWeight: FontWeight.w500, + fontSize: 14, + ); } } @@ -447,6 +556,13 @@ class STextStyles { fontSize: 14, height: 1.5, ); + case ThemeType.oledBlack: + return GoogleFonts.inter( + color: _theme(context).textSubtitle2, + fontWeight: FontWeight.w500, + fontSize: 14, + height: 1.5, + ); } } @@ -473,6 +589,13 @@ class STextStyles { fontSize: 14, height: 1.5, ); + case ThemeType.oledBlack: + return GoogleFonts.inter( + color: _theme(context).textDark, + fontWeight: FontWeight.w500, + fontSize: 14, + height: 1.5, + ); } } @@ -496,6 +619,12 @@ class STextStyles { fontWeight: FontWeight.w400, fontSize: 14, ); + case ThemeType.oledBlack: + return GoogleFonts.inter( + color: _theme(context).textDark, + fontWeight: FontWeight.w400, + fontSize: 14, + ); } } @@ -519,6 +648,12 @@ class STextStyles { fontWeight: FontWeight.w500, fontSize: 14, ); + case ThemeType.oledBlack: + return GoogleFonts.inter( + color: _theme(context).accentColorRed, + fontWeight: FontWeight.w500, + fontSize: 14, + ); } } @@ -542,6 +677,12 @@ class STextStyles { fontWeight: FontWeight.w500, fontSize: 14, ); + case ThemeType.oledBlack: + return GoogleFonts.inter( + color: _theme(context).infoItemIcons, + fontWeight: FontWeight.w500, + fontSize: 14, + ); } } @@ -565,6 +706,12 @@ class STextStyles { fontWeight: FontWeight.w500, fontSize: 12, ); + case ThemeType.oledBlack: + return GoogleFonts.inter( + color: _theme(context).accentColorBlue, + fontWeight: FontWeight.w500, + fontSize: 12, + ); } } @@ -588,6 +735,12 @@ class STextStyles { fontWeight: FontWeight.w600, fontSize: 12, ); + case ThemeType.oledBlack: + return GoogleFonts.inter( + color: _theme(context).textDark, + fontWeight: FontWeight.w600, + fontSize: 12, + ); } } @@ -611,6 +764,12 @@ class STextStyles { fontWeight: FontWeight.w500, fontSize: 12, ); + case ThemeType.oledBlack: + return GoogleFonts.inter( + color: _theme(context).textDark, + fontWeight: FontWeight.w500, + fontSize: 12, + ); } } @@ -634,6 +793,12 @@ class STextStyles { fontWeight: FontWeight.w500, fontSize: 12, ); + case ThemeType.oledBlack: + return GoogleFonts.inter( + color: _theme(context).textDark, + fontWeight: FontWeight.w500, + fontSize: 12, + ); } } @@ -657,6 +822,12 @@ class STextStyles { fontWeight: FontWeight.w500, fontSize: 10, ); + case ThemeType.oledBlack: + return GoogleFonts.inter( + color: _theme(context).textError, + fontWeight: FontWeight.w500, + fontSize: 10, + ); } } @@ -680,6 +851,12 @@ class STextStyles { fontWeight: FontWeight.w500, fontSize: 10, ); + case ThemeType.oledBlack: + return GoogleFonts.inter( + color: _theme(context).textSubtitle1, + fontWeight: FontWeight.w500, + fontSize: 10, + ); } } @@ -708,6 +885,13 @@ class STextStyles { fontSize: 40, height: 40 / 40, ); + case ThemeType.oledBlack: + return GoogleFonts.inter( + color: _theme(context).textDark, + fontWeight: FontWeight.w600, + fontSize: 40, + height: 40 / 40, + ); } } @@ -734,6 +918,13 @@ class STextStyles { fontSize: 32, height: 32 / 32, ); + case ThemeType.oledBlack: + return GoogleFonts.inter( + color: _theme(context).textDark, + fontWeight: FontWeight.w600, + fontSize: 32, + height: 32 / 32, + ); } } @@ -760,6 +951,13 @@ class STextStyles { fontSize: 24, height: 24 / 24, ); + case ThemeType.oledBlack: + return GoogleFonts.inter( + color: _theme(context).textDark, + fontWeight: FontWeight.w600, + fontSize: 24, + height: 24 / 24, + ); } } @@ -786,6 +984,13 @@ class STextStyles { fontSize: 20, height: 30 / 20, ); + case ThemeType.oledBlack: + return GoogleFonts.inter( + color: _theme(context).textDark, + fontWeight: FontWeight.w500, + fontSize: 20, + height: 30 / 20, + ); } } @@ -812,6 +1017,13 @@ class STextStyles { fontSize: 20, height: 30 / 20, ); + case ThemeType.oledBlack: + return GoogleFonts.inter( + color: _theme(context).textDark, + fontWeight: FontWeight.w400, + fontSize: 20, + height: 30 / 20, + ); } } @@ -838,6 +1050,13 @@ class STextStyles { fontSize: 20, height: 28 / 20, ); + case ThemeType.oledBlack: + return GoogleFonts.inter( + color: _theme(context).textDark, + fontWeight: FontWeight.w400, + fontSize: 20, + height: 28 / 20, + ); } } @@ -864,6 +1083,13 @@ class STextStyles { fontSize: 24, height: 33 / 24, ); + case ThemeType.oledBlack: + return GoogleFonts.inter( + color: _theme(context).textDark, + fontWeight: FontWeight.w400, + fontSize: 24, + height: 33 / 24, + ); } } @@ -890,6 +1116,13 @@ class STextStyles { fontSize: 20, height: 26 / 20, ); + case ThemeType.oledBlack: + return GoogleFonts.inter( + color: _theme(context).buttonTextPrimary, + fontWeight: FontWeight.w500, + fontSize: 20, + height: 26 / 20, + ); } } @@ -916,6 +1149,13 @@ class STextStyles { fontSize: 20, height: 26 / 20, ); + case ThemeType.oledBlack: + return GoogleFonts.inter( + color: _theme(context).buttonTextPrimaryDisabled, + fontWeight: FontWeight.w500, + fontSize: 20, + height: 26 / 20, + ); } } @@ -942,6 +1182,13 @@ class STextStyles { fontSize: 20, height: 26 / 20, ); + case ThemeType.oledBlack: + return GoogleFonts.inter( + color: _theme(context).buttonTextSecondary, + fontWeight: FontWeight.w500, + fontSize: 20, + height: 26 / 20, + ); } } @@ -968,6 +1215,13 @@ class STextStyles { fontSize: 20, height: 26 / 20, ); + case ThemeType.oledBlack: + return GoogleFonts.inter( + color: _theme(context).buttonTextSecondaryDisabled, + fontWeight: FontWeight.w500, + fontSize: 20, + height: 26 / 20, + ); } } @@ -994,6 +1248,13 @@ class STextStyles { fontSize: 18, height: 27 / 18, ); + case ThemeType.oledBlack: + return GoogleFonts.inter( + color: _theme(context).textDark, + fontWeight: FontWeight.w500, + fontSize: 18, + height: 27 / 18, + ); } } @@ -1020,6 +1281,13 @@ class STextStyles { fontSize: 18, height: 27 / 18, ); + case ThemeType.oledBlack: + return GoogleFonts.inter( + color: _theme(context).buttonTextPrimaryDisabled, + fontWeight: FontWeight.w700, + fontSize: 18, + height: 27 / 18, + ); } } @@ -1046,6 +1314,13 @@ class STextStyles { fontSize: 16, height: 24 / 16, ); + case ThemeType.oledBlack: + return GoogleFonts.inter( + color: _theme(context).buttonTextPrimaryDisabled, + fontWeight: FontWeight.w500, + fontSize: 16, + height: 24 / 16, + ); } } @@ -1072,6 +1347,13 @@ class STextStyles { fontSize: 14, height: 21 / 14, ); + case ThemeType.oledBlack: + return GoogleFonts.inter( + color: _theme(context).textSubtitle1, + fontWeight: FontWeight.w500, + fontSize: 14, + height: 21 / 14, + ); } } @@ -1098,6 +1380,13 @@ class STextStyles { fontSize: 14, height: 21 / 14, ); + case ThemeType.oledBlack: + return GoogleFonts.inter( + color: _theme(context).textDark, + fontWeight: FontWeight.w600, + fontSize: 14, + height: 21 / 14, + ); } } @@ -1124,6 +1413,13 @@ class STextStyles { fontSize: 16, height: 24 / 16, ); + case ThemeType.oledBlack: + return GoogleFonts.inter( + color: _theme(context).buttonTextSecondary, + fontWeight: FontWeight.w500, + fontSize: 16, + height: 24 / 16, + ); } } @@ -1150,6 +1446,13 @@ class STextStyles { fontSize: 20, height: 30 / 20, ); + case ThemeType.oledBlack: + return GoogleFonts.inter( + color: _theme(context).textSubtitle2, + fontWeight: FontWeight.w500, + fontSize: 20, + height: 30 / 20, + ); } } @@ -1176,6 +1479,13 @@ class STextStyles { fontSize: 16, height: 20.8 / 16, ); + case ThemeType.oledBlack: + return GoogleFonts.inter( + color: _theme(context).textDark.withOpacity(0.8), + fontWeight: FontWeight.w500, + fontSize: 16, + height: 20.8 / 16, + ); } } @@ -1202,6 +1512,13 @@ class STextStyles { fontSize: 16, height: 20.8 / 16, ); + case ThemeType.oledBlack: + return GoogleFonts.inter( + color: _theme(context).textDark, + fontWeight: FontWeight.w500, + fontSize: 16, + height: 20.8 / 16, + ); } } @@ -1228,6 +1545,13 @@ class STextStyles { fontSize: 16, height: 20.8 / 16, ); + case ThemeType.oledBlack: + return GoogleFonts.inter( + color: _theme(context).textDark.withOpacity(0.5), + fontWeight: FontWeight.w500, + fontSize: 16, + height: 20.8 / 16, + ); } } @@ -1254,6 +1578,13 @@ class STextStyles { fontSize: 16, height: 20.8 / 16, ); + case ThemeType.oledBlack: + return GoogleFonts.inter( + color: _theme(context).textDark, + fontWeight: FontWeight.w500, + fontSize: 16, + height: 20.8 / 16, + ); } } @@ -1277,6 +1608,12 @@ class STextStyles { fontWeight: FontWeight.w600, fontSize: 8, ); + case ThemeType.oledBlack: + return GoogleFonts.roboto( + color: _theme(context).textDark, + fontWeight: FontWeight.w600, + fontSize: 8, + ); } } @@ -1300,6 +1637,12 @@ class STextStyles { fontWeight: FontWeight.w400, fontSize: 26, ); + case ThemeType.oledBlack: + return GoogleFonts.roboto( + color: _theme(context).numberTextDefault, + fontWeight: FontWeight.w400, + fontSize: 26, + ); } } @@ -1326,6 +1669,13 @@ class STextStyles { fontWeight: FontWeight.w400, fontSize: 12, ); + case ThemeType.oledBlack: + return GoogleFonts.inter( + letterSpacing: 0.5, + color: _theme(context).accentColorDark, + fontWeight: FontWeight.w400, + fontSize: 12, + ); } } @@ -1352,6 +1702,13 @@ class STextStyles { fontWeight: FontWeight.w600, fontSize: 16, ); + case ThemeType.oledBlack: + 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 43012ffe6..94544ff11 100644 --- a/lib/utilities/theme/color_theme.dart +++ b/lib/utilities/theme/color_theme.dart @@ -3,12 +3,9 @@ import 'package:stackwallet/utilities/enums/coin_enum.dart'; import 'package:stackwallet/utilities/theme/dark_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, -} +enum ThemeType { light, dark, oceanBreeze, oledBlack } extension ThemeTypeExt on ThemeType { StackColorTheme get colorTheme { @@ -19,6 +16,8 @@ extension ThemeTypeExt on ThemeType { return DarkColors(); case ThemeType.oceanBreeze: return OceanBreezeColors(); + case ThemeType.oledBlack: + return OledBlackColors(); } } @@ -30,6 +29,8 @@ extension ThemeTypeExt on ThemeType { return "Dark"; case ThemeType.oceanBreeze: return "Ocean Breeze"; + case ThemeType.oledBlack: + return "Oled Black"; } } } diff --git a/lib/utilities/theme/oled_black_colors.dart b/lib/utilities/theme/oled_black_colors.dart new file mode 100644 index 000000000..102dc96f5 --- /dev/null +++ b/lib/utilities/theme/oled_black_colors.dart @@ -0,0 +1,312 @@ +import 'package:flutter/material.dart'; +import 'package:stackwallet/utilities/theme/color_theme.dart'; + +class OledBlackColors extends StackColorTheme { + @override + ThemeType get themeType => ThemeType.oledBlack; + + @override + Color get background => const Color(0xFF000000); + @override + Color get backgroundAppBar => background; + @override + Gradient? get gradientBackground => null; + + @override + Color get overlay => const Color(0xFF121212); + + @override + Color get accentColorBlue => const Color(0xFF77A7F9); + @override + Color get accentColorGreen => const Color(0xFF4CC0A0); + @override + Color get accentColorYellow => const Color(0xFFD4A51E); + @override + Color get accentColorRed => const Color(0xFFD34E50); + @override + Color get accentColorOrange => const Color(0xFFDE7456); + //accent color white (0xFFDEDEDE) + @override + Color get accentColorDark => const Color(0xFFDEDEDE); + + @override + Color get shadow => const Color(0x0F2D3132); //not done yet + + @override + Color get textDark => const Color(0xFFDEDEDE); + @override + Color get textDark2 => const Color(0xFFCCCCCC); + @override + Color get textDark3 => const Color(0xFFB2B2B2); + @override + Color get textSubtitle1 => const Color(0xFFB2B2B2); + @override + Color get textSubtitle2 => const Color(0xFFA0A0A0); + @override + Color get textSubtitle3 => const Color(0xFF878A8A); + @override + Color get textSubtitle4 => const Color(0xFF878A8A); + @override + Color get textSubtitle5 => const Color(0xFF878A8A); + @override + Color get textSubtitle6 => const Color(0xFF878A8A); + @override + Color get textWhite => const Color(0xFFDEDEDE); + @override + Color get textFavoriteCard => const Color(0xFFDEDEDE); + @override + Color get textError => const Color(0xFFCF6679); + + // button background + @override + Color get buttonBackPrimary => const Color(0xFF6F9CE9); + @override + Color get buttonBackSecondary => const Color(0xFF1F1F1F); + @override + Color get buttonBackPrimaryDisabled => const Color(0xFF212F46); + @override + Color get buttonBackSecondaryDisabled => const Color(0xFF3D3D3D); + @override + Color get buttonBackBorder => const Color(0xFF6F9CE9); + @override + Color get buttonBackBorderDisabled => const Color(0xFF212F46); + + @override + Color get numberBackDefault => const Color(0xFF242424); + @override + Color get numpadBackDefault => const Color(0xFF6F9CE9); + @override + Color get bottomNavBack => const Color(0xFFDEDEDE); + + // button text/element + @override + Color get buttonTextPrimary => const Color(0xFF000000); + @override + Color get buttonTextSecondary => const Color(0xFFDEDEDE); + @override + Color get buttonTextPrimaryDisabled => const Color(0xFF000000); + @override + Color get buttonTextSecondaryDisabled => const Color(0xFF090909); + @override + Color get buttonTextBorder => const Color(0xFF6F9CE9); + @override + Color get buttonTextDisabled => const Color(0xFF000000); + @override + Color get buttonTextBorderless => const Color(0xFF6F9CE9); + @override + Color get buttonTextBorderlessDisabled => const Color(0xFF212F46); + @override + Color get numberTextDefault => const Color(0xFFD3D3D3); + @override + Color get numpadTextDefault => const Color(0xFF000000); + @override + Color get bottomNavText => const Color(0xFFDEDEDE); + + // switch + @override + Color get switchBGOn => const Color(0xFF77A7F9); + @override + Color get switchBGOff => const Color(0xFF445C85); + @override + Color get switchBGDisabled => const Color(0xFF333538); + @override + Color get switchCircleOn => const Color(0xFFC9DDF5); + @override + Color get switchCircleOff => const Color(0xFF94AAC9); + @override + Color get switchCircleDisabled => const Color(0xFF848484); + + // step indicator background + @override + Color get stepIndicatorBGCheck => const Color(0xFF77A7F9); + @override + Color get stepIndicatorBGNumber => const Color(0xFF77A7F9); + @override + Color get stepIndicatorBGInactive => const Color(0xFF3B3F46); + @override + Color get stepIndicatorBGLines => const Color(0xFF6393E5); + @override + Color get stepIndicatorBGLinesInactive => const Color(0xFF63676E); + @override + Color get stepIndicatorIconText => const Color(0xFF000000); + @override + Color get stepIndicatorIconNumber => const Color(0xFF000000); + @override + Color get stepIndicatorIconInactive => const Color(0xFFA5A5A5); + + // checkbox + @override + Color get checkboxBGChecked => const Color(0xFF77A7F9); + @override + Color get checkboxBorderEmpty => const Color(0xFF353536); + @override + Color get checkboxBGDisabled => const Color(0xFF5D759B); + @override + Color get checkboxIconChecked => const Color(0xFF000000); + @override + Color get checkboxIconDisabled => const Color(0xFF000000); + @override + Color get checkboxTextLabel => const Color(0xFFDEDEDE); + + // snack bar + @override + Color get snackBarBackSuccess => const Color(0xFF1F1F1F); + @override + Color get snackBarBackError => const Color(0xFF1F1F1F); + @override + Color get snackBarBackInfo => const Color(0xFF1F1F1F); + @override + Color get snackBarTextSuccess => const Color(0xFF69C297); + @override + Color get snackBarTextError => const Color(0xFFCF6679); + @override + Color get snackBarTextInfo => const Color(0xFFABAEFF); + + // icons + @override + Color get bottomNavIconBack => const Color(0xFF69696A); + @override + Color get bottomNavIconIcon => const Color(0xFFDEDEDE); + + @override + Color get topNavIconPrimary => const Color(0xFFDEDEDE); + @override + Color get topNavIconGreen => const Color(0xFF4CC0A0); + @override + Color get topNavIconYellow => const Color(0xFFD4A51E); + @override + Color get topNavIconRed => const Color(0xFFD34E50); + + @override + Color get settingsIconBack => const Color(0xFFDEDEDE); + @override + Color get settingsIconIcon => const Color(0xFF232323); + @override + Color get settingsIconBack2 => const Color(0xFF94D6C4); + @override + Color get settingsIconElement => const Color(0xFF4CC0A0); + + // text field + @override + Color get textFieldActiveBG => const Color(0xFF232323); + @override + Color get textFieldDefaultBG => const Color(0xFF171717); + @override + Color get textFieldErrorBG => const Color(0xFF141414); + @override + Color get textFieldSuccessBG => const Color(0xFF141414); + + @override + Color get textFieldActiveSearchIconLeft => const Color(0xFF9C9C9C); + @override + Color get textFieldDefaultSearchIconLeft => const Color(0xFF979797); + @override + Color get textFieldErrorSearchIconLeft => const Color(0xFFCF6679); + @override + Color get textFieldSuccessSearchIconLeft => const Color(0xFF23CFA1); + + @override + Color get textFieldActiveText => const Color(0xFFC2C2C2); + @override + Color get textFieldDefaultText => const Color(0xFF979797); + @override + Color get textFieldErrorText => const Color(0xFFCF6679); + @override + Color get textFieldSuccessText => const Color(0xFFDEDEDE); + + @override + Color get textFieldActiveLabel => const Color(0xFF979797); + @override + Color get textFieldErrorLabel => const Color(0xFFCF6679); + @override + Color get textFieldSuccessLabel => const Color(0xFF69C297); + + @override + Color get textFieldActiveSearchIconRight => const Color(0xFF9C9C9C); + @override + Color get textFieldDefaultSearchIconRight => const Color(0xFF5D5D5D); + @override + Color get textFieldErrorSearchIconRight => const Color(0xFFCF6679); + @override + Color get textFieldSuccessSearchIconRight => const Color(0xFF69C297); + + // settings item level2 + @override + Color get settingsItem2ActiveBG => const Color(0xFF242424); + @override + Color get settingsItem2ActiveText => const Color(0xFFD3D3D3); + @override + Color get settingsItem2ActiveSub => const Color(0xFFB2B2B2); + + // radio buttons + @override + Color get radioButtonIconBorder => const Color(0xFF77A7F9); + @override + Color get radioButtonIconBorderDisabled => const Color(0xFF7D7D7D); + @override + Color get radioButtonBorderEnabled => const Color(0xFF77A7F9); + @override + Color get radioButtonBorderDisabled => const Color(0xFF7D7D7D); + @override + Color get radioButtonIconCircle => const Color(0xFF77A7F9); + @override + Color get radioButtonIconEnabled => const Color(0xFF77A7F9); + @override + Color get radioButtonTextEnabled => const Color(0xFFA8AAB2); + @override + Color get radioButtonTextDisabled => const Color(0xFFA8AAB2); + @override + Color get radioButtonLabelEnabled => const Color(0xFF878A8A); + @override + Color get radioButtonLabelDisabled => const Color(0xFF878A8A); + + // info text + @override + Color get infoItemBG => const Color(0xFF141414); + @override + Color get infoItemLabel => const Color(0xFFB2B2B2); + @override + Color get infoItemText => const Color(0xFFDEDEDE); + @override + Color get infoItemIcons => const Color(0xFF77A7F9); + + // popup + @override + Color get popupBG => const Color(0xFF212121); + + // currency list + @override + Color get currencyListItemBG => const Color(0xFF252525); + + // bottom nav + @override + Color get stackWalletBG => const Color(0xFF35383D); + @override + Color get stackWalletMid => const Color(0xFF292D34); + @override + Color get stackWalletBottom => const Color(0xFF292D34); + @override + Color get bottomNavShadow => const Color(0xFF282E33); + + @override + Color get favoriteStarActive => accentColorYellow; + @override + Color get favoriteStarInactive => textSubtitle2; + + @override + Color get splash => const Color(0xFF7A7D7E); + @override + Color get highlight => const Color(0xFF878A8A); + @override + Color get warningForeground => snackBarTextError; + @override + Color get warningBackground => const Color(0xFF1F1F1F); + @override + Color get loadingOverlayTextColor => const Color(0xFFCFCFCF); + @override + Color get myStackContactIconBG => const Color(0xFF747778); + @override + Color get textConfirmTotalAmount => const Color(0xFF144D35); + @override + Color get textSelectedWordTableItem => const Color(0xFF143D8E); +} diff --git a/lib/widgets/background.dart b/lib/widgets/background.dart index 67ff44f55..0a14e2df6 100644 --- a/lib/widgets/background.dart +++ b/lib/widgets/background.dart @@ -20,6 +20,7 @@ class Background extends StatelessWidget { switch (Theme.of(context).extension()!.themeType) { case ThemeType.light: case ThemeType.dark: + case ThemeType.oledBlack: color = Theme.of(context).extension()!.background; break; case ThemeType.oceanBreeze: diff --git a/pubspec.yaml b/pubspec.yaml index 27f63c7c6..b6949e41d 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -337,6 +337,7 @@ flutter: - assets/svg/dark-theme.svg - assets/svg/light-mode.svg - assets/svg/ocean-breeze-theme.svg + - assets/svg/oled-black-theme.svg # light theme specific - assets/svg/light/tx-exchange-icon.svg @@ -384,6 +385,21 @@ flutter: - assets/svg/oceanBreeze/buy-coins-icon.svg - assets/svg/oceanBreeze/bg.svg + # OLED black theme specific + - assets/svg/oledBlack/tx-exchange-icon.svg + - assets/svg/oledBlack/tx-exchange-icon-pending.svg + - assets/svg/oledBlack/tx-exchange-icon-failed.svg + - assets/svg/oledBlack/tx-icon-send.svg + - assets/svg/oledBlack/tx-icon-send-pending.svg + - assets/svg/oledBlack/tx-icon-send-failed.svg + - assets/svg/oledBlack/tx-icon-receive.svg + - assets/svg/oledBlack/tx-icon-receive-pending.svg + - assets/svg/oledBlack/tx-icon-receive-failed.svg + - assets/svg/oledBlack/exchange-2.svg + - assets/svg/oledBlack/bell-new.svg + - assets/svg/oledBlack/stack-icon1.svg + - assets/svg/oledBlack/buy-coins-icon.svg + # An image asset can refer to one or more resolution-specific "variants", see # https://flutter.dev/assets-and-images/#resolution-aware. # For details regarding adding assets from package dependencies, see