CAKE-31 | applied new design to restore wallet from seed page and seed widget
OleksandrSobol committed
Sep 2, 2020 at 21:31 UTC
9c2d3d339f1a8fdeb17c02ed1c27c08cc9f20a6d
4 files changed
+134
-91
lib/router.dart
+1
-1
@@ -196,7 +196,7 @@ class Router {
196
? Routes.seedLanguage
197
: Routes.restoreWalletFromKeys;
198
final args = type == WalletType.monero
199
- ? [type, Routes.restoreWalletFromSeed]
199
+ ? [type, Routes.restoreWalletFromKeys]
200
: [type];
201
202
Navigator.of(context).pushNamed(route, arguments: args);
lib/src/screens/restore/restore_wallet_from_seed_page.dart
+35
-16
@@ -20,20 +20,40 @@ class RestoreWalletFromSeedPage extends BasePage {
20
String get title => S.current.restore_title_from_seed;
21
22
@override
23
- Color get backgroundLightColor => Palette.lavender;
23
+ Color get titleColor => Colors.white;
24
25
@override
26
- Color get backgroundDarkColor => PaletteDark.lightNightBlue;
26
+ Color get backgroundLightColor => Colors.transparent;
27
+
28
+ @override
29
+ Color get backgroundDarkColor => Colors.transparent;
30
+
31
+ @override
32
+ bool get resizeToAvoidBottomPadding => false;
33
34
@override
35
Widget body(BuildContext context) =>
30
- RestoreFromSeedForm(key: formKey, type: type, language: language);
36
+ RestoreFromSeedForm(key: formKey, type: type, language: language,
37
+ leading: leading(context), middle: middle(context));
38
+
39
+ @override
40
+ Widget build(BuildContext context) {
41
+ return Scaffold(
42
+ resizeToAvoidBottomPadding: resizeToAvoidBottomPadding,
43
+ body: Container(
44
+ color: Theme.of(context).backgroundColor,
45
+ child: body(context)
46
+ )
47
+ );
48
+ }
49
}
50
51
class RestoreFromSeedForm extends StatefulWidget {
34
- RestoreFromSeedForm({Key key, this.type, this.language}) : super(key: key);
52
+ RestoreFromSeedForm({Key key, this.type, this.language, this.leading, this.middle}) : super(key: key);
53
final WalletType type;
54
final String language;
55
+ final Widget leading;
56
+ final Widget middle;
57
58
@override
59
_RestoreFromSeedFormState createState() => _RestoreFromSeedFormState();
@@ -49,18 +69,17 @@ class _RestoreFromSeedFormState extends State<RestoreFromSeedForm> {
69
return GestureDetector(
70
onTap: () =>
71
SystemChannels.textInput.invokeMethod<void>('TextInput.hide'),
52
- child: Container(
53
- color: Theme.of(context).backgroundColor,
54
- child: SeedWidget(
55
- key: _seedKey,
56
- maxLength: mnemonicLength(widget.type),
57
- onMnemonicChange: (seed) => null,
58
- onFinish: () => Navigator.of(context).pushNamed(
59
- Routes.restoreWalletFromSeedDetails,
60
- arguments: [widget.type, widget.language, mnemonic()]),
61
- validator:
62
- SeedValidator(type: widget.type, language: widget.language),
63
- ),
72
+ child: SeedWidget(
73
+ key: _seedKey,
74
+ maxLength: mnemonicLength(widget.type),
75
+ onMnemonicChange: (seed) => null,
76
+ onFinish: () => Navigator.of(context).pushNamed(
77
+ Routes.restoreWalletFromSeedDetails,
78
+ arguments: [widget.type, widget.language, mnemonic()]),
79
+ leading: widget.leading,
80
+ middle: widget.middle,
81
+ validator:
82
+ SeedValidator(type: widget.type, language: widget.language),
83
),
84
);
85
}
lib/src/widgets/seed_widget.dart
+96
-74
@@ -6,6 +6,7 @@ import 'package:cake_wallet/core/seed_validator.dart';
6
import 'package:cake_wallet/src/widgets/primary_button.dart';
7
import 'package:cake_wallet/src/domain/common/mnemonic_item.dart';
8
import 'package:cake_wallet/generated/i18n.dart';
9
+import 'package:flutter/widgets.dart';
10
11
class SeedWidget extends StatefulWidget {
12
SeedWidget(
@@ -13,6 +14,8 @@ class SeedWidget extends StatefulWidget {
14
this.maxLength,
15
this.onMnemonicChange,
16
this.onFinish,
17
+ this.leading,
18
+ this.middle,
19
this.validator})
20
: super(key: key);
21
@@ -20,6 +23,8 @@ class SeedWidget extends StatefulWidget {
23
final Function(List<MnemonicItem>) onMnemonicChange;
24
final Function() onFinish;
25
final SeedValidator validator;
26
+ final Widget leading;
27
+ final Widget middle;
28
29
@override
30
SeedWidgetState createState() => SeedWidgetState(maxLength: maxLength);
@@ -199,74 +204,91 @@ class SeedWidgetState extends State<SeedWidget> {
204
child: Column(children: [
205
Flexible(
206
fit: FlexFit.tight,
202
- flex: 1,
207
+ flex: 2,
208
child: Container(
209
width: double.infinity,
210
height: double.infinity,
206
- padding: EdgeInsets.all(24),
211
+ padding: EdgeInsets.all(0),
212
decoration: BoxDecoration(
213
borderRadius: BorderRadius.only(
214
bottomLeft: Radius.circular(24),
215
bottomRight: Radius.circular(24)),
211
- color: Theme.of(context).accentTextTheme.title.backgroundColor),
212
- child: SingleChildScrollView(
213
- child: Column(
214
- mainAxisAlignment: MainAxisAlignment.start,
215
- crossAxisAlignment: CrossAxisAlignment.start,
216
- children: <Widget>[
217
- Text(
218
- S.of(context).restore_active_seed,
219
- style: TextStyle(
220
- fontSize: 14,
221
- color:
222
- Theme.of(context).primaryTextTheme.caption.color),
223
- ),
224
- Padding(
225
- padding: EdgeInsets.only(top: 5),
226
- child: Wrap(
227
- children: items.map((item) {
228
- final isValid = widget.validator.isValid(item);
229
- final isSelected = selectedItem == item;
230
-
231
- return InkWell(
232
- onTap: () => onMnemonicTap(item),
233
- child: Container(
234
- decoration: BoxDecoration(
235
- color: isValid
236
- ? Colors.transparent
237
- : Palette.red),
238
- margin: EdgeInsets.only(right: 7, bottom: 8),
239
- child: Text(
240
- item.toString(),
241
- style: TextStyle(
242
- color: isValid
243
- ? Theme.of(context)
244
- .primaryTextTheme
245
- .title
246
- .color
247
- : Theme.of(context)
248
- .primaryTextTheme
249
- .caption
250
- .color,
251
- fontSize: 16,
252
- fontWeight: isSelected
253
- ? FontWeight.w900
254
- : FontWeight.w400,
255
- decoration: isSelected
256
- ? TextDecoration.underline
257
- : TextDecoration.none),
258
- )),
259
- );
260
- }).toList(),
261
- ))
216
+ gradient: LinearGradient(colors: [
217
+ Theme.of(context).primaryTextTheme.subhead.color,
218
+ Theme.of(context).primaryTextTheme.subhead.decorationColor,
219
],
263
- ),
220
+ begin: Alignment.topLeft,
221
+ end: Alignment.bottomRight)
222
),
223
+ child: Column(
224
+ children: <Widget>[
225
+ CupertinoNavigationBar(
226
+ leading: widget.leading,
227
+ middle: widget.middle,
228
+ backgroundColor: Colors.transparent,
229
+ border: null,
230
+ ),
231
+ Expanded(
232
+ child: Container(
233
+ padding: EdgeInsets.all(24),
234
+ alignment: Alignment.topLeft,
235
+ child: SingleChildScrollView(
236
+ child: Column(
237
+ mainAxisAlignment: MainAxisAlignment.start,
238
+ crossAxisAlignment: CrossAxisAlignment.start,
239
+ children: <Widget>[
240
+ Text(
241
+ S.of(context).restore_active_seed,
242
+ style: TextStyle(
243
+ fontSize: 14,
244
+ fontWeight: FontWeight.w500,
245
+ color:
246
+ Theme.of(context).textTheme.overline.backgroundColor),
247
+ ),
248
+ Padding(
249
+ padding: EdgeInsets.only(top: 5),
250
+ child: Wrap(
251
+ children: items.map((item) {
252
+ final isValid = widget.validator.isValid(item);
253
+ final isSelected = selectedItem == item;
254
+
255
+ return InkWell(
256
+ onTap: () => onMnemonicTap(item),
257
+ child: Container(
258
+ decoration: BoxDecoration(
259
+ color: isValid
260
+ ? Colors.transparent
261
+ : Palette.red),
262
+ margin: EdgeInsets.only(right: 7, bottom: 8),
263
+ child: Text(
264
+ item.toString(),
265
+ style: TextStyle(
266
+ color: isValid
267
+ ? Colors.white
268
+ : Colors.grey,
269
+ fontSize: 16,
270
+ fontWeight: isSelected
271
+ ? FontWeight.w900
272
+ : FontWeight.w600,
273
+ decoration: isSelected
274
+ ? TextDecoration.underline
275
+ : TextDecoration.none),
276
+ )),
277
+ );
278
+ }).toList(),
279
+ ))
280
+ ],
281
+ ),
282
+ ),
283
+ )
284
+ )
285
+ ],
286
+ )
287
),
288
),
289
Flexible(
290
fit: FlexFit.tight,
269
- flex: 2,
291
+ flex: 3,
292
child: Padding(
293
padding:
294
EdgeInsets.only(left: 24, top: 48, right: 24, bottom: 24),
@@ -277,8 +299,8 @@ class SeedWidgetState extends State<SeedWidget> {
299
Text(
300
S.of(context).restore_new_seed,
301
style: TextStyle(
280
- fontSize: 18,
281
- fontWeight: FontWeight.bold,
302
+ fontSize: 20,
303
+ fontWeight: FontWeight.w500,
304
color:
305
Theme.of(context).primaryTextTheme.title.color),
306
),
@@ -291,6 +313,7 @@ class SeedWidgetState extends State<SeedWidget> {
313
: null,
314
style: TextStyle(
315
fontSize: 16.0,
316
+ fontWeight: FontWeight.normal,
317
color:
318
Theme.of(context).primaryTextTheme.title.color),
319
controller: _seedController,
@@ -306,10 +329,11 @@ class SeedWidgetState extends State<SeedWidget> {
329
Text('${items.length}/$maxLength',
330
style: TextStyle(
331
color: Theme.of(context)
309
- .primaryTextTheme
310
- .caption
311
- .color,
312
- fontSize: 14)),
332
+ .accentTextTheme
333
+ .display2
334
+ .decorationColor,
335
+ fontWeight: FontWeight.normal,
336
+ fontSize: 16)),
337
SizedBox(width: 10),
338
InkWell(
339
onTap: () async =>
@@ -322,17 +346,14 @@ class SeedWidgetState extends State<SeedWidget> {
346
decoration: BoxDecoration(
347
color: Theme.of(context)
348
.accentTextTheme
325
- .title
326
- .backgroundColor,
349
+ .caption
350
+ .color,
351
borderRadius:
352
BorderRadius.circular(10.0)),
353
child: Text(
354
S.of(context).paste,
355
style: TextStyle(
332
- color: Theme.of(context)
333
- .primaryTextTheme
334
- .title
335
- .color),
356
+ color: Palette.blueCraiola),
357
)),
358
)
359
],
@@ -341,20 +362,21 @@ class SeedWidgetState extends State<SeedWidget> {
362
),
363
hintStyle: TextStyle(
364
color: Theme.of(context)
344
- .primaryTextTheme
345
- .caption
346
- .color,
365
+ .accentTextTheme
366
+ .display2
367
+ .decorationColor,
368
+ fontWeight: FontWeight.normal,
369
fontSize: 16),
370
hintText:
371
S.of(context).restore_from_seed_placeholder,
372
errorText: _errorMessage,
373
focusedBorder: UnderlineInputBorder(
374
borderSide: BorderSide(
353
- color: Theme.of(context).dividerColor,
375
+ color: Theme.of(context).accentTextTheme.subtitle.backgroundColor,
376
width: 1.0)),
377
enabledBorder: UnderlineInputBorder(
378
borderSide: BorderSide(
357
- color: Theme.of(context).dividerColor,
379
+ color: Theme.of(context).accentTextTheme.subtitle.backgroundColor,
380
width: 1.0))),
381
enableInteractiveSelection: false,
382
),
@@ -386,7 +408,7 @@ class SeedWidgetState extends State<SeedWidget> {
408
onPressed: () => widget.onFinish != null
409
? widget.onFinish()
410
: null,
389
- color: Colors.green,
411
+ color: Palette.blueCraiola,
412
textColor: Colors.white)
413
: PrimaryButton(
414
text: selectedItem != null
@@ -397,7 +419,7 @@ class SeedWidgetState extends State<SeedWidget> {
419
: null,
420
onDisabledPressed: () => showErrorIfExist(),
421
isDisabled: !isCurrentMnemonicValid,
400
- color: Colors.green,
422
+ color: Palette.blueCraiola,
423
textColor: Colors.white),
424
),
425
)
lib/themes.dart
+2
@@ -154,6 +154,7 @@ class Themes {
154
),
155
display2: TextStyle(
156
color: Palette.shadowWhite, // action button color (address text field)
157
+ decorationColor: Palette.darkGray // hint text (seed widget)
158
),
159
),
160
@@ -320,6 +321,7 @@ class Themes {
321
),
322
display2: TextStyle(
323
color: PaletteDark.nightBlue, // action button color (address text field)
324
+ decorationColor: PaletteDark.darkCyanBlue // hint text (seed widget)
325
),
326
),
327