diff --git a/assets/images/2.0x/wallet_name_light.png b/assets/images/2.0x/wallet_name_light.png new file mode 100644 index 000000000..b59e4c451 Binary files /dev/null and b/assets/images/2.0x/wallet_name_light.png differ diff --git a/assets/images/2.0x/wallet_type_light.png b/assets/images/2.0x/wallet_type_light.png new file mode 100644 index 000000000..791c3a87e Binary files /dev/null and b/assets/images/2.0x/wallet_type_light.png differ diff --git a/assets/images/2.0x/welcome_light.png b/assets/images/2.0x/welcome_light.png new file mode 100644 index 000000000..8386d25b0 Binary files /dev/null and b/assets/images/2.0x/welcome_light.png differ diff --git a/assets/images/3.0x/wallet_name_light.png b/assets/images/3.0x/wallet_name_light.png new file mode 100644 index 000000000..5fecf8f1b Binary files /dev/null and b/assets/images/3.0x/wallet_name_light.png differ diff --git a/assets/images/3.0x/wallet_type_light.png b/assets/images/3.0x/wallet_type_light.png new file mode 100644 index 000000000..5ece2804f Binary files /dev/null and b/assets/images/3.0x/wallet_type_light.png differ diff --git a/assets/images/3.0x/welcome_light.png b/assets/images/3.0x/welcome_light.png new file mode 100644 index 000000000..8b682ed70 Binary files /dev/null and b/assets/images/3.0x/welcome_light.png differ diff --git a/assets/images/wallet_name_light.png b/assets/images/wallet_name_light.png new file mode 100644 index 000000000..0199c1b30 Binary files /dev/null and b/assets/images/wallet_name_light.png differ diff --git a/assets/images/wallet_type_light.png b/assets/images/wallet_type_light.png new file mode 100644 index 000000000..e36c0d3aa Binary files /dev/null and b/assets/images/wallet_type_light.png differ diff --git a/assets/images/welcome_light.png b/assets/images/welcome_light.png new file mode 100644 index 000000000..6feff85d1 Binary files /dev/null and b/assets/images/welcome_light.png differ diff --git a/lib/src/screens/new_wallet/new_wallet_page.dart b/lib/src/screens/new_wallet/new_wallet_page.dart index 870f9db0c..d6ca134d8 100644 --- a/lib/src/screens/new_wallet/new_wallet_page.dart +++ b/lib/src/screens/new_wallet/new_wallet_page.dart @@ -11,11 +11,13 @@ import 'package:cake_wallet/src/domain/services/wallet_list_service.dart'; import 'package:cake_wallet/src/domain/services/wallet_service.dart'; import 'package:cake_wallet/src/screens/base_page.dart'; import 'package:cake_wallet/src/widgets/primary_button.dart'; -import 'package:cake_wallet/src/widgets/scollable_with_bottom_section.dart'; import 'package:cake_wallet/src/stores/seed_language/seed_language_store.dart'; import 'package:cake_wallet/src/screens/new_wallet/widgets/select_button.dart'; import 'package:cake_wallet/src/screens/seed_language/widgets/seed_language_picker.dart'; import 'package:cake_wallet/src/widgets/alert_with_one_action.dart'; +import 'package:cake_wallet/src/widgets/base_text_form_field.dart'; +import 'package:cake_wallet/themes.dart'; +import 'package:cake_wallet/theme_changer.dart'; class NewWalletPage extends BasePage { NewWalletPage( @@ -30,6 +32,9 @@ class NewWalletPage extends BasePage { @override String get title => S.current.new_wallet; + @override + bool get resizeToAvoidBottomPadding => false; + @override Widget body(BuildContext context) => WalletNameForm(); } @@ -44,7 +49,8 @@ class _WalletNameFormState extends State { final _formKey = GlobalKey(); final nameController = TextEditingController(); - final walletNameImage = Image.asset('assets/images/wallet_name.png'); + final walletNameImageLight = Image.asset('assets/images/wallet_name_light.png'); + final walletNameImageDark = Image.asset('assets/images/wallet_name.png'); @override void dispose() { @@ -56,6 +62,9 @@ class _WalletNameFormState extends State { Widget build(BuildContext context) { final walletCreationStore = Provider.of(context); final seedLanguageStore = Provider.of(context); + final _themeChanger = Provider.of(context); + final walletNameImage = _themeChanger.getTheme() == Themes.darkTheme + ? walletNameImageDark : walletNameImageLight; final List seedLocales = [ S.current.seed_language_english, @@ -98,8 +107,90 @@ class _WalletNameFormState extends State { }); return Container( - padding: EdgeInsets.only(top: 24), - child: ScrollableWithBottomSection( + padding: EdgeInsets.all(24), + child: Column( + children: [ + Flexible( + flex: 2, + child: AspectRatio( + aspectRatio: aspectRatioImage, + child: FittedBox(child: walletNameImage, fit: BoxFit.fill) + ) + ), + Flexible( + flex: 3, + child: Column( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Column( + children: [ + Padding( + padding: EdgeInsets.only(top: 24), + child: Form( + key: _formKey, + child: BaseTextFormField( + controller: nameController, + textAlign: TextAlign.center, + textFontSize: 20.0, + hintText: S.of(context).wallet_name, + validator: (value) { + walletCreationStore.validateWalletName(value); + return walletCreationStore.errorMessage; + } + ) + ), + ), + Padding(padding: EdgeInsets.only(top: 24), + child: Text( + S.of(context).seed_language_choose, + textAlign: TextAlign.center, + style: TextStyle( + fontSize: 16.0, + fontWeight: FontWeight.w600, + color: Theme.of(context).primaryTextTheme.title.color + ), + ), + ), + Padding(padding: EdgeInsets.only(top: 24), + child: Observer( + builder: (_) => SelectButton( + image: null, + text: seedLocales[seedLanguages.indexOf(seedLanguageStore.selectedSeedLanguage)], + color: Theme.of(context).accentTextTheme.title.backgroundColor, + textColor: Theme.of(context).primaryTextTheme.title.color, + onTap: () async => await showDialog( + context: context, + builder: (BuildContext context) => SeedLanguagePicker() + ) + ) + ), + ) + ], + ), + Observer( + builder: (context) { + return LoadingPrimaryButton( + onPressed: () { + if (_formKey.currentState.validate()) { + walletCreationStore.create(name: nameController.text, + language: seedLanguageStore.selectedSeedLanguage); + } + }, + text: S.of(context).continue_text, + color: Colors.green, + textColor: Colors.white, + isLoading: walletCreationStore.state is WalletIsCreating, + isDisabled: walletCreationStore.isDisabledStatus, + ); + }, + ) + ], + ) + ) + ], + ) + + /*ScrollableWithBottomSection( contentPadding: EdgeInsets.only(left: 24, right: 24, bottom: 24), content: Column( crossAxisAlignment: CrossAxisAlignment.center, @@ -184,7 +275,7 @@ class _WalletNameFormState extends State { isDisabled: walletCreationStore.isDisabledStatus, ); }, - )), + )),*/ ); } } diff --git a/lib/src/screens/new_wallet/new_wallet_type_page.dart b/lib/src/screens/new_wallet/new_wallet_type_page.dart index 044b52e66..877ac2335 100644 --- a/lib/src/screens/new_wallet/new_wallet_type_page.dart +++ b/lib/src/screens/new_wallet/new_wallet_type_page.dart @@ -3,9 +3,11 @@ import 'package:flutter/cupertino.dart'; import 'package:cake_wallet/generated/i18n.dart'; import 'package:cake_wallet/src/screens/base_page.dart'; import 'package:cake_wallet/src/widgets/primary_button.dart'; -import 'package:cake_wallet/src/widgets/scollable_with_bottom_section.dart'; import 'package:cake_wallet/src/screens/new_wallet/widgets/select_button.dart'; import 'package:cake_wallet/routes.dart'; +import 'package:provider/provider.dart'; +import 'package:cake_wallet/themes.dart'; +import 'package:cake_wallet/theme_changer.dart'; class NewWalletTypePage extends BasePage { @override @@ -25,7 +27,8 @@ class WalletTypeFormState extends State { final moneroIcon = Image.asset('assets/images/monero.png', height: 24, width: 24); final bitcoinIcon = Image.asset('assets/images/bitcoin.png', height: 24, width: 24); - final walletTypeImage = Image.asset('assets/images/wallet_type.png'); + final walletTypeImageLight = Image.asset('assets/images/wallet_type_light.png'); + final walletTypeImageDark = Image.asset('assets/images/wallet_type.png'); bool isDisabledButton; bool isMoneroSelected; @@ -56,64 +59,72 @@ class WalletTypeFormState extends State { @override Widget build(BuildContext context) { + final _themeChanger = Provider.of(context); + final walletTypeImage = _themeChanger.getTheme() == Themes.darkTheme + ? walletTypeImageDark : walletTypeImageLight; + return Container( - padding: EdgeInsets.only(top: 24), - child: ScrollableWithBottomSection( - contentPadding: EdgeInsets.only(left: 24, right: 24, bottom: 24), - content: Column( - crossAxisAlignment: CrossAxisAlignment.center, - children: [ - Padding( - padding: EdgeInsets.only(left: 12, right: 12), - child: AspectRatio( - aspectRatio: aspectRatioImage, - child: FittedBox(child: walletTypeImage, fit: BoxFit.fill)), - ), - Padding( - padding: EdgeInsets.only(top: 48), - child: Text( - S.of(context).choose_wallet_currency, - textAlign: TextAlign.center, - style: TextStyle( - fontSize: 16, - fontWeight: FontWeight.w600, - color: Theme.of(context).primaryTextTheme.title.color - ), - ), - ), - Padding( - padding: EdgeInsets.only(top: 24), - child: SelectButton( - image: bitcoinIcon, - text: 'Bitcoin', - color: bitcoinBackgroundColor, - textColor: bitcoinTextColor, - onTap: () {}), - ), - Padding( - padding: EdgeInsets.only(top: 20), - child: SelectButton( - image: moneroIcon, - text: 'Monero', - color: moneroBackgroundColor, - textColor: moneroTextColor, - onTap: () => onSelectMoneroButton(context)), + padding: EdgeInsets.all(24), + child: Column( + children: [ + Flexible( + flex: 2, + child: AspectRatio( + aspectRatio: aspectRatioImage, + child: FittedBox(child: walletTypeImage, fit: BoxFit.fill) ) - ], - ), - bottomSectionPadding: EdgeInsets.only( - left: 24, - right: 24, - bottom: 24 - ), - bottomSection: PrimaryButton( - onPressed: () => Navigator.of(context).pushNamed(Routes.newWallet), - text: S.of(context).seed_language_next, - color: Colors.green, - textColor: Colors.white, - isDisabled: isDisabledButton, - ), - ), + ), + Flexible( + flex: 3, + child: Column( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Column( + children: [ + Padding( + padding: EdgeInsets.only(top: 24), + child: Text( + S.of(context).choose_wallet_currency, + textAlign: TextAlign.center, + style: TextStyle( + fontSize: 16, + fontWeight: FontWeight.w600, + color: Theme.of(context).primaryTextTheme.title.color + ), + ), + ), + Padding( + padding: EdgeInsets.only(top: 24), + child: SelectButton( + image: bitcoinIcon, + text: 'Bitcoin', + color: bitcoinBackgroundColor, + textColor: bitcoinTextColor, + onTap: () {}), + ), + Padding( + padding: EdgeInsets.only(top: 20), + child: SelectButton( + image: moneroIcon, + text: 'Monero', + color: moneroBackgroundColor, + textColor: moneroTextColor, + onTap: () => onSelectMoneroButton(context)), + ) + ], + ), + PrimaryButton( + onPressed: () => Navigator.of(context).pushNamed(Routes.newWallet), + text: S.of(context).seed_language_next, + color: Colors.green, + textColor: Colors.white, + isDisabled: isDisabledButton, + ) + ], + ) + ) + ], + ) ); } diff --git a/lib/src/screens/seed/seed_page.dart b/lib/src/screens/seed/seed_page.dart index 2be122635..2a2ff8f85 100644 --- a/lib/src/screens/seed/seed_page.dart +++ b/lib/src/screens/seed/seed_page.dart @@ -8,12 +8,14 @@ import 'package:cake_wallet/generated/i18n.dart'; import 'package:cake_wallet/src/widgets/primary_button.dart'; import 'package:cake_wallet/src/stores/wallet_seed/wallet_seed_store.dart'; import 'package:cake_wallet/src/screens/base_page.dart'; -import 'package:cake_wallet/src/widgets/scollable_with_bottom_section.dart'; +import 'package:cake_wallet/themes.dart'; +import 'package:cake_wallet/theme_changer.dart'; class SeedPage extends BasePage { SeedPage({this.onCloseCallback}); - static final image = Image.asset('assets/images/crypto_lock.png'); + static final imageLight = Image.asset('assets/images/crypto_lock_light.png'); + static final imageDark = Image.asset('assets/images/crypto_lock.png'); @override String get title => S.current.seed_title; @@ -58,104 +60,108 @@ class SeedPage extends BasePage { @override Widget body(BuildContext context) { final walletSeedStore = Provider.of(context); + final _themeChanger = Provider.of(context); + final image = _themeChanger.getTheme() == Themes.darkTheme + ? imageDark : imageLight; + String _seed; return Container( - width: double.infinity, - height: double.infinity, - child: ScrollableWithBottomSection( - contentPadding: EdgeInsets.only(left: 40, right: 40, bottom: 20), - content: Column( - children: [ - Padding( - padding: EdgeInsets.only(top: 33), - child: image, - ), - Padding( - padding: EdgeInsets.only(top: 33), - child: Observer( - builder: (_) { - _seed = walletSeedStore.seed; - - return Column( - crossAxisAlignment: CrossAxisAlignment.center, - children: [ - Text( - walletSeedStore.name, - style: TextStyle( - fontSize: 20, - fontWeight: FontWeight.bold, - color: Theme.of(context).primaryTextTheme.title.color - ), - ), - Padding( - padding: EdgeInsets.only(top: 20), - child: Text( - _seed, - textAlign: TextAlign.center, - style: TextStyle( - fontSize: 14, - color: Theme.of(context).primaryTextTheme.caption.color - ), - ), - ) - ], - ); - } - ), + padding: EdgeInsets.all(24), + child: Column( + children: [ + Flexible( + flex: 2, + child: AspectRatio( + aspectRatio: 1, + child: FittedBox(child: image, fit: BoxFit.fill) ) - ], - ), - bottomSectionPadding: EdgeInsets.only( - left: 24, - right: 24, - bottom: 52 - ), - bottomSection: Container( - child: Row( - mainAxisSize: MainAxisSize.max, - children: [ - Flexible( - child: Container( - padding: EdgeInsets.only(right: 8.0), - child: PrimaryButton( - onPressed: () => Share.text( - S.of(context).seed_share, - _seed, - 'text/plain'), - text: S.of(context).save, - color: Colors.green, - textColor: Colors.white), - ) - ), - Flexible( - child: Container( - padding: EdgeInsets.only(left: 8.0), - child: Builder( - builder: (context) => PrimaryButton( - onPressed: () { - Clipboard.setData( - ClipboardData(text: _seed)); - Scaffold.of(context).showSnackBar( - SnackBar( - content: Text(S - .of(context) - .copied_to_clipboard), - backgroundColor: Colors.green, - duration: Duration(milliseconds: 1500), - ), - ); - }, - text: S.of(context).copy, - color: Colors.blue, - textColor: Colors.white) - ), - ) - ) - ], ), - ), - ), + Flexible( + flex: 3, + child: Column( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Padding( + padding: EdgeInsets.only(top: 33), + child: Observer( + builder: (_) { + _seed = walletSeedStore.seed; + + return Column( + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + Text( + walletSeedStore.name, + style: TextStyle( + fontSize: 20, + fontWeight: FontWeight.bold, + color: Theme.of(context).primaryTextTheme.title.color + ), + ), + Padding( + padding: EdgeInsets.only(top: 20), + child: Text( + _seed, + textAlign: TextAlign.center, + style: TextStyle( + fontSize: 14, + color: Theme.of(context).primaryTextTheme.caption.color + ), + ), + ) + ], + ); + } + ), + ), + Row( + mainAxisSize: MainAxisSize.max, + children: [ + Flexible( + child: Container( + padding: EdgeInsets.only(right: 8.0), + child: PrimaryButton( + onPressed: () => Share.text( + S.of(context).seed_share, + _seed, + 'text/plain'), + text: S.of(context).save, + color: Colors.green, + textColor: Colors.white), + ) + ), + Flexible( + child: Container( + padding: EdgeInsets.only(left: 8.0), + child: Builder( + builder: (context) => PrimaryButton( + onPressed: () { + Clipboard.setData( + ClipboardData(text: _seed)); + Scaffold.of(context).showSnackBar( + SnackBar( + content: Text(S + .of(context) + .copied_to_clipboard), + backgroundColor: Colors.green, + duration: Duration(milliseconds: 1500), + ), + ); + }, + text: S.of(context).copy, + color: Colors.blue, + textColor: Colors.white) + ), + ) + ) + ], + ) + ], + ) + ) + ], + ) ); } } diff --git a/lib/src/screens/welcome/welcome_page.dart b/lib/src/screens/welcome/welcome_page.dart index 256fab4b6..46a4fb89f 100644 --- a/lib/src/screens/welcome/welcome_page.dart +++ b/lib/src/screens/welcome/welcome_page.dart @@ -4,11 +4,14 @@ import 'package:cake_wallet/routes.dart'; import 'package:cake_wallet/src/widgets/primary_button.dart'; import 'package:cake_wallet/src/screens/base_page.dart'; import 'package:cake_wallet/generated/i18n.dart'; -import 'package:cake_wallet/src/widgets/scollable_with_bottom_section.dart'; +import 'package:provider/provider.dart'; +import 'package:cake_wallet/themes.dart'; +import 'package:cake_wallet/theme_changer.dart'; class WelcomePage extends BasePage { static const aspectRatioImage = 1.25; - final welcomeImage = Image.asset('assets/images/welcome.png'); + final welcomeImageLight = Image.asset('assets/images/welcome_light.png'); + final welcomeImageDark = Image.asset('assets/images/welcome.png'); @override Widget build(BuildContext context) { @@ -20,6 +23,10 @@ class WelcomePage extends BasePage { @override Widget body(BuildContext context) { + final _themeChanger = Provider.of(context); + final welcomeImage = _themeChanger.getTheme() == Themes.darkTheme + ? welcomeImageDark : welcomeImageLight; + final newWalletImage = Image.asset('assets/images/new_wallet.png', height: 12, width: 12, @@ -30,89 +37,97 @@ class WelcomePage extends BasePage { color: Theme.of(context).primaryTextTheme.title.color); return Container( - padding: EdgeInsets.only(top: 20), - child: ScrollableWithBottomSection( - contentPadding: EdgeInsets.only(bottom: 20), - content: Column( - children: [ - AspectRatio( + padding: EdgeInsets.all(24), + child: Column( + children: [ + Flexible( + flex: 2, + child: AspectRatio( aspectRatio: aspectRatioImage, - child: FittedBox(child: welcomeImage, fit: BoxFit.fill)), - Padding( - padding: EdgeInsets.only(left: 24, right: 24, top: 40), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.center, - children: [ - Text( - S.of(context).welcome, - style: TextStyle( - fontSize: 18, - color: Theme.of(context).primaryTextTheme.caption.color, - ), - textAlign: TextAlign.center, - ), - Padding( - padding: EdgeInsets.only(top: 10), - child: Text( - S.of(context).cake_wallet, - style: TextStyle( - fontSize: 36, - fontWeight: FontWeight.bold, - color: Theme.of(context).primaryTextTheme.title.color, + child: FittedBox(child: welcomeImage, fit: BoxFit.fill) + ) + ), + Flexible( + flex: 3, + child: Column( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Column( + children: [ + Padding( + padding: EdgeInsets.only(top: 24), + child: Text( + S.of(context).welcome, + style: TextStyle( + fontSize: 18, + color: Theme.of(context).primaryTextTheme.caption.color, + ), + textAlign: TextAlign.center, ), - textAlign: TextAlign.center, ), - ), - Padding( - padding: EdgeInsets.only(top: 14), - child: Text( - S.of(context).first_wallet_text, + Padding( + padding: EdgeInsets.only(top: 10), + child: Text( + S.of(context).cake_wallet, + style: TextStyle( + fontSize: 36, + fontWeight: FontWeight.bold, + color: Theme.of(context).primaryTextTheme.title.color, + ), + textAlign: TextAlign.center, + ), + ), + Padding( + padding: EdgeInsets.only(top: 14), + child: Text( + S.of(context).first_wallet_text, + style: TextStyle( + fontSize: 16, + fontWeight: FontWeight.w600, + color: Theme.of(context).primaryTextTheme.caption.color, + ), + textAlign: TextAlign.center, + ), + ), + ], + ), + Column( + children: [ + Text( + S.of(context).please_make_selection, style: TextStyle( - fontSize: 16, - fontWeight: FontWeight.w600, + fontSize: 12, color: Theme.of(context).primaryTextTheme.caption.color, ), textAlign: TextAlign.center, ), - ), - ], - ), + Padding( + padding: EdgeInsets.only(top: 24), + child: PrimaryImageButton( + onPressed: () => Navigator.pushNamed(context, Routes.newWalletFromWelcome), + image: newWalletImage, + text: S.of(context).create_new, + color: Colors.white, + textColor: Palette.oceanBlue, + borderColor: Palette.oceanBlue, + ), + ), + Padding( + padding: EdgeInsets.only(top: 10), + child: PrimaryImageButton( + onPressed: () => Navigator.pushNamed(context, Routes.restoreOptions), + image: restoreWalletImage, + text: S.of(context).restore_wallet, + color: Theme.of(context).primaryTextTheme.overline.color, + textColor: Theme.of(context).primaryTextTheme.title.color), + ) + ], + ) + ], ) - ], - ), - bottomSectionPadding: EdgeInsets.only(left: 24, right: 24, bottom: 20), - bottomSection: Column(children: [ - Text( - S.of(context).please_make_selection, - style: TextStyle( - fontSize: 12, - color: Theme.of(context).primaryTextTheme.caption.color, - ), - textAlign: TextAlign.center, - ), - Padding( - padding: EdgeInsets.only(top: 24), - child: PrimaryImageButton( - onPressed: () => Navigator.pushNamed(context, Routes.newWalletFromWelcome), - image: newWalletImage, - text: S.of(context).create_new, - color: Colors.white, - textColor: Palette.oceanBlue, - borderColor: Palette.oceanBlue, - ), - ), - Padding( - padding: EdgeInsets.only(top: 10), - child: PrimaryImageButton( - onPressed: () => Navigator.pushNamed(context, Routes.restoreOptions), - image: restoreWalletImage, - text: S.of(context).restore_wallet, - color: Theme.of(context).primaryTextTheme.overline.color, - textColor: Theme.of(context).primaryTextTheme.title.color), ) - ]), - ), + ], + ) ); } } diff --git a/lib/src/widgets/base_text_form_field.dart b/lib/src/widgets/base_text_form_field.dart index ff06ce4cd..2798e08de 100644 --- a/lib/src/widgets/base_text_form_field.dart +++ b/lib/src/widgets/base_text_form_field.dart @@ -14,6 +14,8 @@ class BaseTextFormField extends StatelessWidget { this.textColor, this.hintColor, this.borderColor, + this.textFontSize = 16.0, + this.hintFontSize = 16.0, this.prefix, this.suffix, this.suffixIcon, @@ -32,6 +34,8 @@ class BaseTextFormField extends StatelessWidget { final Color textColor; final Color hintColor; final Color borderColor; + final double textFontSize; + final double hintFontSize; final Widget prefix; final Widget suffix; final Widget suffixIcon; @@ -50,7 +54,7 @@ class BaseTextFormField extends StatelessWidget { inputFormatters: inputFormatters, enabled: enabled, style: TextStyle( - fontSize: 16.0, + fontSize: textFontSize, color: textColor ?? Theme.of(context).primaryTextTheme.title.color ), decoration: InputDecoration( @@ -59,7 +63,7 @@ class BaseTextFormField extends StatelessWidget { suffixIcon: suffixIcon, hintStyle: TextStyle( color: hintColor ?? Theme.of(context).primaryTextTheme.caption.color, - fontSize: 16 + fontSize: hintFontSize ), hintText: hintText, focusedBorder: UnderlineInputBorder(