From 9c2d3d339f1a8fdeb17c02ed1c27c08cc9f20a6d Mon Sep 17 00:00:00 2001 From: OleksandrSobol Date: Wed, 2 Sep 2020 21:31:43 +0300 Subject: [PATCH] CAKE-31 | applied new design to restore wallet from seed page and seed widget --- lib/router.dart | 2 +- .../restore_wallet_from_seed_page.dart | 51 ++++-- lib/src/widgets/seed_widget.dart | 170 ++++++++++-------- lib/themes.dart | 2 + 4 files changed, 134 insertions(+), 91 deletions(-) diff --git a/lib/router.dart b/lib/router.dart index 9fd37dca3..ccff5677a 100644 --- a/lib/router.dart +++ b/lib/router.dart @@ -196,7 +196,7 @@ class Router { ? Routes.seedLanguage : Routes.restoreWalletFromKeys; final args = type == WalletType.monero - ? [type, Routes.restoreWalletFromSeed] + ? [type, Routes.restoreWalletFromKeys] : [type]; Navigator.of(context).pushNamed(route, arguments: args); diff --git a/lib/src/screens/restore/restore_wallet_from_seed_page.dart b/lib/src/screens/restore/restore_wallet_from_seed_page.dart index 5c46b32ef..bc30a48d8 100644 --- a/lib/src/screens/restore/restore_wallet_from_seed_page.dart +++ b/lib/src/screens/restore/restore_wallet_from_seed_page.dart @@ -20,20 +20,40 @@ class RestoreWalletFromSeedPage extends BasePage { String get title => S.current.restore_title_from_seed; @override - Color get backgroundLightColor => Palette.lavender; + Color get titleColor => Colors.white; @override - Color get backgroundDarkColor => PaletteDark.lightNightBlue; + Color get backgroundLightColor => Colors.transparent; + + @override + Color get backgroundDarkColor => Colors.transparent; + + @override + bool get resizeToAvoidBottomPadding => false; @override Widget body(BuildContext context) => - RestoreFromSeedForm(key: formKey, type: type, language: language); + RestoreFromSeedForm(key: formKey, type: type, language: language, + leading: leading(context), middle: middle(context)); + + @override + Widget build(BuildContext context) { + return Scaffold( + resizeToAvoidBottomPadding: resizeToAvoidBottomPadding, + body: Container( + color: Theme.of(context).backgroundColor, + child: body(context) + ) + ); + } } class RestoreFromSeedForm extends StatefulWidget { - RestoreFromSeedForm({Key key, this.type, this.language}) : super(key: key); + RestoreFromSeedForm({Key key, this.type, this.language, this.leading, this.middle}) : super(key: key); final WalletType type; final String language; + final Widget leading; + final Widget middle; @override _RestoreFromSeedFormState createState() => _RestoreFromSeedFormState(); @@ -49,18 +69,17 @@ class _RestoreFromSeedFormState extends State { return GestureDetector( onTap: () => SystemChannels.textInput.invokeMethod('TextInput.hide'), - child: Container( - color: Theme.of(context).backgroundColor, - child: SeedWidget( - key: _seedKey, - maxLength: mnemonicLength(widget.type), - onMnemonicChange: (seed) => null, - onFinish: () => Navigator.of(context).pushNamed( - Routes.restoreWalletFromSeedDetails, - arguments: [widget.type, widget.language, mnemonic()]), - validator: - SeedValidator(type: widget.type, language: widget.language), - ), + child: SeedWidget( + key: _seedKey, + maxLength: mnemonicLength(widget.type), + onMnemonicChange: (seed) => null, + onFinish: () => Navigator.of(context).pushNamed( + Routes.restoreWalletFromSeedDetails, + arguments: [widget.type, widget.language, mnemonic()]), + leading: widget.leading, + middle: widget.middle, + validator: + SeedValidator(type: widget.type, language: widget.language), ), ); } diff --git a/lib/src/widgets/seed_widget.dart b/lib/src/widgets/seed_widget.dart index c9b918556..5da136c74 100644 --- a/lib/src/widgets/seed_widget.dart +++ b/lib/src/widgets/seed_widget.dart @@ -6,6 +6,7 @@ import 'package:cake_wallet/core/seed_validator.dart'; import 'package:cake_wallet/src/widgets/primary_button.dart'; import 'package:cake_wallet/src/domain/common/mnemonic_item.dart'; import 'package:cake_wallet/generated/i18n.dart'; +import 'package:flutter/widgets.dart'; class SeedWidget extends StatefulWidget { SeedWidget( @@ -13,6 +14,8 @@ class SeedWidget extends StatefulWidget { this.maxLength, this.onMnemonicChange, this.onFinish, + this.leading, + this.middle, this.validator}) : super(key: key); @@ -20,6 +23,8 @@ class SeedWidget extends StatefulWidget { final Function(List) onMnemonicChange; final Function() onFinish; final SeedValidator validator; + final Widget leading; + final Widget middle; @override SeedWidgetState createState() => SeedWidgetState(maxLength: maxLength); @@ -199,74 +204,91 @@ class SeedWidgetState extends State { child: Column(children: [ Flexible( fit: FlexFit.tight, - flex: 1, + flex: 2, child: Container( width: double.infinity, height: double.infinity, - padding: EdgeInsets.all(24), + padding: EdgeInsets.all(0), decoration: BoxDecoration( borderRadius: BorderRadius.only( bottomLeft: Radius.circular(24), bottomRight: Radius.circular(24)), - color: Theme.of(context).accentTextTheme.title.backgroundColor), - child: SingleChildScrollView( - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - S.of(context).restore_active_seed, - style: TextStyle( - fontSize: 14, - color: - Theme.of(context).primaryTextTheme.caption.color), - ), - Padding( - padding: EdgeInsets.only(top: 5), - child: Wrap( - children: items.map((item) { - final isValid = widget.validator.isValid(item); - final isSelected = selectedItem == item; - - return InkWell( - onTap: () => onMnemonicTap(item), - child: Container( - decoration: BoxDecoration( - color: isValid - ? Colors.transparent - : Palette.red), - margin: EdgeInsets.only(right: 7, bottom: 8), - child: Text( - item.toString(), - style: TextStyle( - color: isValid - ? Theme.of(context) - .primaryTextTheme - .title - .color - : Theme.of(context) - .primaryTextTheme - .caption - .color, - fontSize: 16, - fontWeight: isSelected - ? FontWeight.w900 - : FontWeight.w400, - decoration: isSelected - ? TextDecoration.underline - : TextDecoration.none), - )), - ); - }).toList(), - )) + gradient: LinearGradient(colors: [ + Theme.of(context).primaryTextTheme.subhead.color, + Theme.of(context).primaryTextTheme.subhead.decorationColor, ], - ), + begin: Alignment.topLeft, + end: Alignment.bottomRight) ), + child: Column( + children: [ + CupertinoNavigationBar( + leading: widget.leading, + middle: widget.middle, + backgroundColor: Colors.transparent, + border: null, + ), + Expanded( + child: Container( + padding: EdgeInsets.all(24), + alignment: Alignment.topLeft, + child: SingleChildScrollView( + child: Column( + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + S.of(context).restore_active_seed, + style: TextStyle( + fontSize: 14, + fontWeight: FontWeight.w500, + color: + Theme.of(context).textTheme.overline.backgroundColor), + ), + Padding( + padding: EdgeInsets.only(top: 5), + child: Wrap( + children: items.map((item) { + final isValid = widget.validator.isValid(item); + final isSelected = selectedItem == item; + + return InkWell( + onTap: () => onMnemonicTap(item), + child: Container( + decoration: BoxDecoration( + color: isValid + ? Colors.transparent + : Palette.red), + margin: EdgeInsets.only(right: 7, bottom: 8), + child: Text( + item.toString(), + style: TextStyle( + color: isValid + ? Colors.white + : Colors.grey, + fontSize: 16, + fontWeight: isSelected + ? FontWeight.w900 + : FontWeight.w600, + decoration: isSelected + ? TextDecoration.underline + : TextDecoration.none), + )), + ); + }).toList(), + )) + ], + ), + ), + ) + ) + ], + ) ), ), Flexible( fit: FlexFit.tight, - flex: 2, + flex: 3, child: Padding( padding: EdgeInsets.only(left: 24, top: 48, right: 24, bottom: 24), @@ -277,8 +299,8 @@ class SeedWidgetState extends State { Text( S.of(context).restore_new_seed, style: TextStyle( - fontSize: 18, - fontWeight: FontWeight.bold, + fontSize: 20, + fontWeight: FontWeight.w500, color: Theme.of(context).primaryTextTheme.title.color), ), @@ -291,6 +313,7 @@ class SeedWidgetState extends State { : null, style: TextStyle( fontSize: 16.0, + fontWeight: FontWeight.normal, color: Theme.of(context).primaryTextTheme.title.color), controller: _seedController, @@ -306,10 +329,11 @@ class SeedWidgetState extends State { Text('${items.length}/$maxLength', style: TextStyle( color: Theme.of(context) - .primaryTextTheme - .caption - .color, - fontSize: 14)), + .accentTextTheme + .display2 + .decorationColor, + fontWeight: FontWeight.normal, + fontSize: 16)), SizedBox(width: 10), InkWell( onTap: () async => @@ -322,17 +346,14 @@ class SeedWidgetState extends State { decoration: BoxDecoration( color: Theme.of(context) .accentTextTheme - .title - .backgroundColor, + .caption + .color, borderRadius: BorderRadius.circular(10.0)), child: Text( S.of(context).paste, style: TextStyle( - color: Theme.of(context) - .primaryTextTheme - .title - .color), + color: Palette.blueCraiola), )), ) ], @@ -341,20 +362,21 @@ class SeedWidgetState extends State { ), hintStyle: TextStyle( color: Theme.of(context) - .primaryTextTheme - .caption - .color, + .accentTextTheme + .display2 + .decorationColor, + fontWeight: FontWeight.normal, fontSize: 16), hintText: S.of(context).restore_from_seed_placeholder, errorText: _errorMessage, focusedBorder: UnderlineInputBorder( borderSide: BorderSide( - color: Theme.of(context).dividerColor, + color: Theme.of(context).accentTextTheme.subtitle.backgroundColor, width: 1.0)), enabledBorder: UnderlineInputBorder( borderSide: BorderSide( - color: Theme.of(context).dividerColor, + color: Theme.of(context).accentTextTheme.subtitle.backgroundColor, width: 1.0))), enableInteractiveSelection: false, ), @@ -386,7 +408,7 @@ class SeedWidgetState extends State { onPressed: () => widget.onFinish != null ? widget.onFinish() : null, - color: Colors.green, + color: Palette.blueCraiola, textColor: Colors.white) : PrimaryButton( text: selectedItem != null @@ -397,7 +419,7 @@ class SeedWidgetState extends State { : null, onDisabledPressed: () => showErrorIfExist(), isDisabled: !isCurrentMnemonicValid, - color: Colors.green, + color: Palette.blueCraiola, textColor: Colors.white), ), ) diff --git a/lib/themes.dart b/lib/themes.dart index a25a61de1..452264e21 100644 --- a/lib/themes.dart +++ b/lib/themes.dart @@ -154,6 +154,7 @@ class Themes { ), display2: TextStyle( color: Palette.shadowWhite, // action button color (address text field) + decorationColor: Palette.darkGray // hint text (seed widget) ), ), @@ -320,6 +321,7 @@ class Themes { ), display2: TextStyle( color: PaletteDark.nightBlue, // action button color (address text field) + decorationColor: PaletteDark.darkCyanBlue // hint text (seed widget) ), ),