From 7d3a9bf0d9b583ef41040807c631bdeaeb5ef8b2 Mon Sep 17 00:00:00 2001 From: julian Date: Wed, 21 Sep 2022 11:59:18 -0600 Subject: [PATCH] home + pinpad dark colors --- lib/pages/home_view/home_view.dart | 9 +- .../sub_widgets/home_view_button_bar.dart | 17 +-- lib/pages/pinpad_views/create_pin_view.dart | 7 +- lib/utilities/theme/color_theme.dart | 2 + lib/utilities/theme/dark_colors.dart | 3 + lib/utilities/theme/light_colors.dart | 3 + lib/utilities/theme/stack_theme.dart | 6 + .../custom_buttons/app_bar_icon_button.dart | 5 +- lib/widgets/custom_pin_put/pin_keyboard.dart | 111 +++++++++--------- 9 files changed, 89 insertions(+), 74 deletions(-) diff --git a/lib/pages/home_view/home_view.dart b/lib/pages/home_view/home_view.dart index eea7566d8..665de4277 100644 --- a/lib/pages/home_view/home_view.dart +++ b/lib/pages/home_view/home_view.dart @@ -15,7 +15,6 @@ import 'package:stackwallet/providers/ui/home_view_index_provider.dart'; import 'package:stackwallet/providers/ui/unread_notifications_provider.dart'; import 'package:stackwallet/services/change_now/change_now_loading_service.dart'; import 'package:stackwallet/utilities/assets.dart'; -import 'package:stackwallet/utilities/cfcolors.dart'; import 'package:stackwallet/utilities/constants.dart'; import 'package:stackwallet/utilities/text_styles.dart'; import 'package:stackwallet/utilities/theme/stack_theme.dart'; @@ -180,6 +179,10 @@ class _HomeViewState extends ConsumerState { : Assets.svg.bell, width: 20, height: 20, + color: ref.watch(notificationsProvider + .select((value) => value.hasUnreadNotifications)) + ? null + : StackTheme.instance.color.topNavIconPrimary, ), onPressed: () { // reset unread state @@ -228,7 +231,7 @@ class _HomeViewState extends ConsumerState { color: StackTheme.instance.color.background, icon: SvgPicture.asset( Assets.svg.gear, - color: CFColors.stackAccent, + color: StackTheme.instance.color.topNavIconPrimary, width: 20, height: 20, ), @@ -251,7 +254,7 @@ class _HomeViewState extends ConsumerState { decoration: BoxDecoration( color: StackTheme.instance.color.background, boxShadow: [ - CFColors.standardBoxShadow, + StackTheme.instance.standardBoxShadow, ], ), child: const Padding( diff --git a/lib/pages/home_view/sub_widgets/home_view_button_bar.dart b/lib/pages/home_view/sub_widgets/home_view_button_bar.dart index 8928fc508..369b37375 100644 --- a/lib/pages/home_view/sub_widgets/home_view_button_bar.dart +++ b/lib/pages/home_view/sub_widgets/home_view_button_bar.dart @@ -10,7 +10,6 @@ import 'package:stackwallet/providers/exchange/estimate_rate_exchange_form_provi import 'package:stackwallet/providers/exchange/fixed_rate_exchange_form_provider.dart'; import 'package:stackwallet/providers/exchange/fixed_rate_market_pairs_provider.dart'; import 'package:stackwallet/providers/providers.dart'; -import 'package:stackwallet/utilities/cfcolors.dart'; import 'package:stackwallet/utilities/logger.dart'; import 'package:stackwallet/utilities/text_styles.dart'; import 'package:stackwallet/utilities/theme/stack_theme.dart'; @@ -156,7 +155,7 @@ class _HomeViewButtonBarState extends ConsumerState { MaterialStateProperty.all(const Size(46, 36)), ) : StackTheme.instance - .getPrimaryDisabledButtonColor(context)! + .getSecondaryEnabledButtonColor(context)! .copyWith( minimumSize: MaterialStateProperty.all(const Size(46, 36)), @@ -171,8 +170,9 @@ class _HomeViewButtonBarState extends ConsumerState { "Wallets", style: STextStyles.button.copyWith( fontSize: 14, - color: - selectedIndex == 0 ? CFColors.light1 : CFColors.stackAccent, + color: selectedIndex == 0 + ? StackTheme.instance.color.buttonTextPrimary + : StackTheme.instance.color.textDark, ), ), ), @@ -182,7 +182,7 @@ class _HomeViewButtonBarState extends ConsumerState { ), Expanded( child: TextButton( - style: selectedIndex == 0 + style: selectedIndex == 1 ? StackTheme.instance .getPrimaryEnabledButtonColor(context)! .copyWith( @@ -190,7 +190,7 @@ class _HomeViewButtonBarState extends ConsumerState { MaterialStateProperty.all(const Size(46, 36)), ) : StackTheme.instance - .getPrimaryDisabledButtonColor(context)! + .getSecondaryEnabledButtonColor(context)! .copyWith( minimumSize: MaterialStateProperty.all(const Size(46, 36)), @@ -228,8 +228,9 @@ class _HomeViewButtonBarState extends ConsumerState { "Exchange", style: STextStyles.button.copyWith( fontSize: 14, - color: - selectedIndex == 1 ? CFColors.light1 : CFColors.stackAccent, + color: selectedIndex == 1 + ? StackTheme.instance.color.buttonTextPrimary + : StackTheme.instance.color.textDark, ), ), ), diff --git a/lib/pages/pinpad_views/create_pin_view.dart b/lib/pages/pinpad_views/create_pin_view.dart index f3e7044fe..e1d0ab7f2 100644 --- a/lib/pages/pinpad_views/create_pin_view.dart +++ b/lib/pages/pinpad_views/create_pin_view.dart @@ -1,6 +1,5 @@ import 'dart:io'; -import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import 'package:flutter_riverpod/flutter_riverpod.dart'; import 'package:flutter_secure_storage/flutter_secure_storage.dart'; @@ -10,7 +9,6 @@ import 'package:stackwallet/pages/home_view/home_view.dart'; import 'package:stackwallet/providers/global/prefs_provider.dart'; import 'package:stackwallet/utilities/assets.dart'; import 'package:stackwallet/utilities/biometrics.dart'; -import 'package:stackwallet/utilities/cfcolors.dart'; import 'package:stackwallet/utilities/constants.dart'; import 'package:stackwallet/utilities/enums/flush_bar_type.dart'; import 'package:stackwallet/utilities/flutter_secure_storage_interface.dart'; @@ -42,8 +40,9 @@ class CreatePinView extends ConsumerStatefulWidget { class _CreatePinViewState extends ConsumerState { BoxDecoration get _pinPutDecoration { return BoxDecoration( - color: CFColors.gray3, - border: Border.all(width: 1, color: CFColors.gray3), + color: StackTheme.instance.color.textSubtitle3, + border: + Border.all(width: 1, color: StackTheme.instance.color.textSubtitle3), borderRadius: BorderRadius.circular(6), ); } diff --git a/lib/utilities/theme/color_theme.dart b/lib/utilities/theme/color_theme.dart index 37e41d1e3..6479aefc6 100644 --- a/lib/utilities/theme/color_theme.dart +++ b/lib/utilities/theme/color_theme.dart @@ -15,6 +15,8 @@ abstract class StackColorTheme { Color get accentColorOrange; Color get accentColorDark; + Color get shadow; + Color get textDark; Color get textDark2; Color get textDark3; diff --git a/lib/utilities/theme/dark_colors.dart b/lib/utilities/theme/dark_colors.dart index 167aabf7e..87e6620b3 100644 --- a/lib/utilities/theme/dark_colors.dart +++ b/lib/utilities/theme/dark_colors.dart @@ -20,6 +20,9 @@ class DarkColors extends StackColorTheme { @override Color get accentColorDark => const Color(0xFFF3F3F3); + @override + Color get shadow => const Color(0x0F2D3132); + @override Color get textDark => const Color(0xFFF3F3F3); @override diff --git a/lib/utilities/theme/light_colors.dart b/lib/utilities/theme/light_colors.dart index 0c33cc2ae..e8dd7d8b0 100644 --- a/lib/utilities/theme/light_colors.dart +++ b/lib/utilities/theme/light_colors.dart @@ -20,6 +20,9 @@ class LightColors extends StackColorTheme { @override Color get accentColorDark => const Color(0xFF232323); + @override + Color get shadow => const Color(0x0F2D3132); + @override Color get textDark => const Color(0xFF232323); @override diff --git a/lib/utilities/theme/stack_theme.dart b/lib/utilities/theme/stack_theme.dart index 22a24cb81..54f325fb4 100644 --- a/lib/utilities/theme/stack_theme.dart +++ b/lib/utilities/theme/stack_theme.dart @@ -23,6 +23,12 @@ class StackTheme { } } + BoxShadow get standardBoxShadow => BoxShadow( + color: color.shadow, + spreadRadius: 3, + blurRadius: 4, + ); + ButtonStyle? getPrimaryEnabledButtonColor(BuildContext context) => Theme.of(context).textButtonTheme.style?.copyWith( backgroundColor: MaterialStateProperty.all( diff --git a/lib/widgets/custom_buttons/app_bar_icon_button.dart b/lib/widgets/custom_buttons/app_bar_icon_button.dart index bf67078a4..806e19add 100644 --- a/lib/widgets/custom_buttons/app_bar_icon_button.dart +++ b/lib/widgets/custom_buttons/app_bar_icon_button.dart @@ -30,7 +30,7 @@ class AppBarIconButton extends StatelessWidget { width: size, decoration: BoxDecoration( borderRadius: BorderRadius.circular(1000), - color: color ?? CFColors.white, + color: color ?? StackTheme.instance.color.background, boxShadow: shadows, ), child: MaterialButton( @@ -65,13 +65,14 @@ class AppBarBackButton extends StatelessWidget { child: AppBarIconButton( size: isDesktop ? 56 : 32, color: isDesktop - ? CFColors.textFieldDefaultBackground + ? StackTheme.instance.color.textFieldDefaultBG : StackTheme.instance.color.background, shadows: const [], icon: SvgPicture.asset( Assets.svg.arrowLeft, width: 24, height: 24, + color: StackTheme.instance.color.topNavIconPrimary, ), onPressed: onPressed ?? Navigator.of(context).pop, ), diff --git a/lib/widgets/custom_pin_put/pin_keyboard.dart b/lib/widgets/custom_pin_put/pin_keyboard.dart index d307e23af..1218d2ae2 100644 --- a/lib/widgets/custom_pin_put/pin_keyboard.dart +++ b/lib/widgets/custom_pin_put/pin_keyboard.dart @@ -2,7 +2,6 @@ import 'package:flutter/material.dart'; import 'package:flutter_svg/flutter_svg.dart'; import 'package:google_fonts/google_fonts.dart'; import 'package:stackwallet/utilities/assets.dart'; -import 'package:stackwallet/utilities/cfcolors.dart'; import 'package:stackwallet/utilities/theme/stack_theme.dart'; class NumberKey extends StatefulWidget { @@ -23,7 +22,7 @@ class _NumberKeyState extends State { late final String number; late final ValueSetter onPressed; - Color _color = CFColors.white; + Color _color = StackTheme.instance.color.numberBackDefault; @override void initState() { @@ -52,13 +51,14 @@ class _NumberKeyState extends State { onPressed: () async { onPressed.call(number); setState(() { - _color = CFColors.splashLight; + _color = + StackTheme.instance.color.numberBackDefault.withOpacity(0.8); }); Future.delayed(const Duration(milliseconds: 200), () { if (mounted) { setState(() { - _color = CFColors.white; + _color = StackTheme.instance.color.numberBackDefault; }); } }); @@ -67,7 +67,7 @@ class _NumberKeyState extends State { child: Text( number, style: GoogleFonts.roboto( - color: CFColors.stackAccent, + color: StackTheme.instance.color.numberTextDefault, fontWeight: FontWeight.w400, fontSize: 26, ), @@ -93,7 +93,7 @@ class BackspaceKey extends StatefulWidget { class _BackspaceKeyState extends State { late final VoidCallback onPressed; - Color _color = CFColors.stackAccent; + Color _color = StackTheme.instance.color.numpadBackDefault; @override void initState() { @@ -120,13 +120,14 @@ class _BackspaceKeyState extends State { onPressed: () { onPressed.call(); setState(() { - _color = CFColors.stackAccent.withOpacity(0.8); + _color = + StackTheme.instance.color.numpadBackDefault.withOpacity(0.8); }); Future.delayed(const Duration(milliseconds: 200), () { if (mounted) { setState(() { - _color = CFColors.stackAccent; + _color = StackTheme.instance.color.numpadBackDefault; }); } }); @@ -136,6 +137,7 @@ class _BackspaceKeyState extends State { Assets.svg.delete, width: 20, height: 20, + color: StackTheme.instance.color.numpadTextDefault, ), ), ), @@ -143,44 +145,43 @@ class _BackspaceKeyState extends State { } } -// class SubmitKey extends StatelessWidget { -// const SubmitKey({ -// Key? key, -// required this.onPressed, -// }) : super(key: key); -// -// final VoidCallback onPressed; -// -// @override -// Widget build(BuildContext context) { -// return Container( -// height: 72, -// width: 72, -// decoration: ShapeDecoration( -// shape: StadiumBorder(), -// color: CFColors.stackAccent, -// shadows: [], -// ), -// child: MaterialButton( -// // splashColor: CFColors.splashLight, -// materialTapTargetSize: MaterialTapTargetSize.shrinkWrap, -// shape: StadiumBorder(), -// onPressed: () { -// onPressed.call(); -// }, -// child: Container( -// child: Center( -// child: SvgPicture.asset( -// Assets.svg.arrowRight, -// width: 20, -// height: 20, -// ), -// ), -// ), -// ), -// ); -// } -// } +class SubmitKey extends StatelessWidget { + const SubmitKey({ + Key? key, + required this.onPressed, + }) : super(key: key); + + final VoidCallback onPressed; + + @override + Widget build(BuildContext context) { + return Container( + height: 72, + width: 72, + decoration: ShapeDecoration( + shape: const StadiumBorder(), + color: StackTheme.instance.color.numpadBackDefault, + shadows: const [], + ), + child: MaterialButton( + // splashColor: CFColors.splashLight, + materialTapTargetSize: MaterialTapTargetSize.shrinkWrap, + shape: const StadiumBorder(), + onPressed: () { + onPressed.call(); + }, + child: Center( + child: SvgPicture.asset( + Assets.svg.arrowRight, + width: 20, + height: 20, + color: StackTheme.instance.color.numpadTextDefault, + ), + ), + ), + ); + } +} class PinKeyboard extends StatelessWidget { const PinKeyboard({ @@ -204,9 +205,9 @@ class PinKeyboard extends StatelessWidget { onBackPressed.call(); } - // void _submitHandler() { - // onSubmitPressed.call(); - // } + void _submitHandler() { + onSubmitPressed.call(); + } void _numberHandler(String number) { onNumberKeyPressed.call(number); @@ -297,9 +298,8 @@ class PinKeyboard extends StatelessWidget { ), Row( children: [ - const SizedBox( - height: 72, - width: 72, + BackspaceKey( + onPressed: _backHandler, ), const SizedBox( width: 24, @@ -311,11 +311,8 @@ class PinKeyboard extends StatelessWidget { const SizedBox( width: 24, ), - // SubmitKey( - // onPressed: _submitHandler, - // ) - BackspaceKey( - onPressed: _backHandler, + SubmitKey( + onPressed: _submitHandler, ), ], )