CWA-207 | applied new design to pin code page; added pin alert dialog; added barrier dismissible property to base alert page
Oleksandr Sobol committed
Apr 27, 2020 at 20:31 UTC
03d3ff87f2f4ab7c4359465e93eca7c71e0efe48
11 files changed
+122
-43
assets/images/2.0x/delete_icon.png
Binary files a/assets/images/2.0x/delete_icon.png and b/assets/images/2.0x/delete_icon.png differ
assets/images/2.0x/face.png
Binary files /dev/null and b/assets/images/2.0x/face.png differ
assets/images/3.0x/delete_icon.png
Binary files a/assets/images/3.0x/delete_icon.png and b/assets/images/3.0x/delete_icon.png differ
assets/images/3.0x/face.png
Binary files /dev/null and b/assets/images/3.0x/face.png differ
assets/images/delete_icon.png
Binary files a/assets/images/delete_icon.png and b/assets/images/delete_icon.png differ
assets/images/face.png
Binary files /dev/null and b/assets/images/face.png differ
lib/src/screens/auth/auth_page.dart
+19
-2
@@ -8,6 +8,7 @@ import 'package:cake_wallet/src/stores/auth/auth_store.dart';
8
import 'package:cake_wallet/src/screens/pin_code/pin_code.dart';
9
import 'package:cake_wallet/src/stores/settings/settings_store.dart';
10
import 'package:cake_wallet/src/domain/common/biometric_auth.dart';
11
+import 'package:cake_wallet/palette.dart';
12
13
typedef OnAuthenticationFinished = void Function(bool, AuthPageState);
14
@@ -24,6 +25,8 @@ class AuthPage extends StatefulWidget {
25
class AuthPageState extends State<AuthPage> {
26
final _key = GlobalKey<ScaffoldState>();
27
final _pinCodeKey = GlobalKey<PinCodeState>();
28
+ final _backArrowImageDarkTheme =
29
+ Image.asset('assets/images/back_arrow_dark_theme.png');
30
31
void changeProcessText(String text) {
32
_key.currentState.showSnackBar(
@@ -121,8 +124,22 @@ class AuthPageState extends State<AuthPage> {
124
return Scaffold(
125
key: _key,
126
appBar: CupertinoNavigationBar(
124
- leading: widget.closable ? CloseButton() : Container(),
125
- backgroundColor: Theme.of(context).backgroundColor,
127
+ leading: widget.closable
128
+ ? SizedBox(
129
+ height: 37,
130
+ width: 20,
131
+ child: ButtonTheme(
132
+ minWidth: double.minPositive,
133
+ child: FlatButton(
134
+ highlightColor: Colors.transparent,
135
+ splashColor: Colors.transparent,
136
+ padding: EdgeInsets.all(0),
137
+ onPressed: () => Navigator.of(context).pop(),
138
+ child: _backArrowImageDarkTheme),
139
+ ),
140
+ )
141
+ : Container(),
142
+ backgroundColor: PaletteDark.historyPanel,
143
border: null,
144
),
145
resizeToAvoidBottomPadding: false,
lib/src/screens/pin_code/pin_code.dart
+18
-15
@@ -30,7 +30,7 @@ class PinCodeState<T extends PinCodeWidget> extends State<T> {
30
static const sixPinLength = 6;
31
static const fourPinLength = 4;
32
static final deleteIconImage = Image.asset('assets/images/delete_icon.png');
33
- static final backArrowImage = Image.asset('assets/images/back_arrow.png');
33
+ static final faceImage = Image.asset('assets/images/face.png');
34
final _gridViewKey = GlobalKey();
35
36
int pinLength = defaultPinLength;
@@ -91,12 +91,15 @@ class PinCodeState<T extends PinCodeWidget> extends State<T> {
91
Widget body(BuildContext context) {
92
return SafeArea(
93
child: Container(
94
- color: Theme.of(context).backgroundColor,
94
+ color: PaletteDark.historyPanel,
95
padding: EdgeInsets.only(left: 40.0, right: 40.0, bottom: 40.0),
96
child: Column(children: <Widget>[
97
Spacer(flex: 2),
98
Text(title,
99
- style: TextStyle(fontSize: 24, color: Palette.wildDarkBlue)),
99
+ style: TextStyle(
100
+ fontSize: 20,
101
+ fontWeight: FontWeight.bold,
102
+ color: Colors.white)),
103
Spacer(flex: 3),
104
Container(
105
width: 180,
@@ -111,8 +114,7 @@ class PinCodeState<T extends PinCodeWidget> extends State<T> {
114
height: size,
115
decoration: BoxDecoration(
116
shape: BoxShape.circle,
114
- color: isFilled ? Palette.deepPurple : Colors.transparent,
115
- border: Border.all(color: Palette.wildDarkBlue),
117
+ color: isFilled ? Colors.white : PaletteDark.walletCardAddressField,
118
));
119
}),
120
),
@@ -127,7 +129,7 @@ class PinCodeState<T extends PinCodeWidget> extends State<T> {
129
},
130
child: Text(
131
_changePinLengthText(),
130
- style: TextStyle(fontSize: 16.0, color: Palette.wildDarkBlue),
132
+ style: TextStyle(fontSize: 14.0, color: PaletteDark.walletCardText),
133
))
134
],
135
Spacer(flex: 1),
@@ -149,9 +151,11 @@ class PinCodeState<T extends PinCodeWidget> extends State<T> {
151
return Container(
152
margin: EdgeInsets.only(
153
left: marginLeft, right: marginRight),
152
- decoration: BoxDecoration(
153
- shape: BoxShape.circle,
154
- color: Theme.of(context).buttonColor,
154
+ child: FlatButton(
155
+ onPressed: () {},
156
+ color: PaletteDark.historyPanel,
157
+ shape: CircleBorder(),
158
+ child: faceImage,
159
),
160
);
161
} else if (index == 10) {
@@ -162,7 +166,7 @@ class PinCodeState<T extends PinCodeWidget> extends State<T> {
166
left: marginLeft, right: marginRight),
167
child: FlatButton(
168
onPressed: () => _pop(),
165
- color: Theme.of(context).buttonColor,
169
+ color: PaletteDark.historyPanel,
170
shape: CircleBorder(),
171
child: deleteIconImage,
172
),
@@ -176,14 +180,13 @@ class PinCodeState<T extends PinCodeWidget> extends State<T> {
180
left: marginLeft, right: marginRight),
181
child: FlatButton(
182
onPressed: () => _push(index),
179
- color: Theme.of(context)
180
- .accentTextTheme
181
- .title
182
- .backgroundColor,
183
+ color: PaletteDark.historyPanel,
184
shape: CircleBorder(),
185
child: Text('$index',
186
style: TextStyle(
186
- fontSize: 23.0, color: Palette.blueGrey)),
187
+ fontSize: 30.0,
188
+ fontWeight: FontWeight.bold,
189
+ color: Colors.white)),
190
),
191
);
192
}),
lib/src/screens/setup_pin_code/setup_pin_code.dart
+21
-25
@@ -7,12 +7,17 @@ import 'package:cake_wallet/src/screens/pin_code/pin_code.dart';
7
import 'package:cake_wallet/src/screens/base_page.dart';
8
import 'package:cake_wallet/src/stores/settings/settings_store.dart';
9
import 'package:cake_wallet/generated/i18n.dart';
10
+import 'package:cake_wallet/palette.dart';
11
+import 'package:cake_wallet/src/screens/setup_pin_code/widgets/pin_alert_dialog.dart';
12
13
class SetupPinCodePage extends BasePage {
14
SetupPinCodePage({this.onPinCodeSetup});
15
16
final Function(BuildContext, String) onPinCodeSetup;
17
18
+ @override
19
+ Color get backgroundColor => PaletteDark.historyPanel;
20
+
21
@override
22
String get title => S.current.setup_pin;
23
@@ -58,37 +63,28 @@ class _SetupPinCodeFormState<WidgetType extends SetupPinCodeForm>
63
64
showDialog<void>(
65
context: context,
61
- barrierDismissible: false,
66
builder: (BuildContext context) {
63
- return AlertDialog(
64
- content: Text(S.of(context).setup_successful),
65
- actions: <Widget>[
66
- FlatButton(
67
- child: Text(S.of(context).ok),
68
- onPressed: () {
69
- Navigator.of(context).pop();
70
- widget.onPinCodeSetup(context, pin);
71
- reset();
72
- },
73
- ),
74
- ],
75
- );
67
+ return PinAlertDialog(
68
+ pinTitleText: S.current.setup_pin,
69
+ pinContentText: S.of(context).setup_successful,
70
+ pinActionButtonText: S.of(context).ok,
71
+ pinBarrierDismissible: false,
72
+ pinAction: () {
73
+ Navigator.of(context).pop();
74
+ widget.onPinCodeSetup(context, pin);
75
+ reset();
76
+ });
77
});
78
} else {
79
showDialog<void>(
80
context: context,
81
builder: (BuildContext context) {
81
- return AlertDialog(
82
- content: Text(S.of(context).pin_is_incorrect),
83
- actions: <Widget>[
84
- FlatButton(
85
- child: Text(S.of(context).ok),
86
- onPressed: () {
87
- Navigator.of(context).pop();
88
- },
89
- ),
90
- ],
91
- );
82
+ return PinAlertDialog(
83
+ pinTitleText: S.current.setup_pin,
84
+ pinContentText: S.of(context).pin_is_incorrect,
85
+ pinActionButtonText: S.of(context).ok,
86
+ pinBarrierDismissible: true,
87
+ pinAction: () => Navigator.of(context).pop());
88
});
89
90
reset();
lib/src/screens/setup_pin_code/widgets/pin_alert_dialog.dart
new
+60
@@ -0,0 +1,60 @@
1
+import 'dart:ui';
2
+import 'package:cake_wallet/src/widgets/base_alert_dialog.dart';
3
+import 'package:flutter/cupertino.dart';
4
+import 'package:flutter/material.dart';
5
+
6
+class PinAlertDialog extends BaseAlertDialog {
7
+ PinAlertDialog({
8
+ @required this.pinTitleText,
9
+ @required this.pinContentText,
10
+ @required this.pinActionButtonText,
11
+ @required this.pinAction,
12
+ @required this.pinBarrierDismissible
13
+ });
14
+
15
+ final String pinTitleText;
16
+ final String pinContentText;
17
+ final String pinActionButtonText;
18
+ final VoidCallback pinAction;
19
+ final bool pinBarrierDismissible;
20
+
21
+ @override
22
+ String get titleText => pinTitleText;
23
+ @override
24
+ String get contentText => pinContentText;
25
+ @override
26
+ bool get barrierDismissible => pinBarrierDismissible;
27
+
28
+ @override
29
+ Widget actionButtons(BuildContext context) {
30
+ return Container(
31
+ width: 300,
32
+ height: 52,
33
+ padding: EdgeInsets.only(left: 12, right: 12),
34
+ decoration: BoxDecoration(
35
+ borderRadius: BorderRadius.only(
36
+ bottomLeft: Radius.circular(24),
37
+ bottomRight: Radius.circular(24)
38
+ ),
39
+ color: Colors.white
40
+ ),
41
+ child: ButtonTheme(
42
+ minWidth: double.infinity,
43
+ child: FlatButton(
44
+ onPressed: pinAction,
45
+ highlightColor: Colors.transparent,
46
+ splashColor: Colors.transparent,
47
+ child: Text(
48
+ pinActionButtonText,
49
+ textAlign: TextAlign.center,
50
+ style: TextStyle(
51
+ fontSize: 15,
52
+ fontWeight: FontWeight.w600,
53
+ color: Colors.blue,
54
+ decoration: TextDecoration.none,
55
+ ),
56
+ )),
57
+ ),
58
+ );
59
+ }
60
+}
\ No newline at end of file
lib/src/widgets/base_alert_dialog.dart
+4
-1
@@ -9,6 +9,7 @@ class BaseAlertDialog extends StatelessWidget {
9
String get rightActionButtonText => '';
10
VoidCallback get actionLeft => () {};
11
VoidCallback get actionRight => () {};
12
+ bool get barrierDismissible => true;
13
14
Widget title(BuildContext context) {
15
return Text(
@@ -113,7 +114,9 @@ class BaseAlertDialog extends StatelessWidget {
114
@override
115
Widget build(BuildContext context) {
116
return GestureDetector(
116
- onTap: () => Navigator.of(context).pop(),
117
+ onTap: () => barrierDismissible
118
+ ? Navigator.of(context).pop()
119
+ : null,
120
child: Container(
121
color: Colors.transparent,
122
child: BackdropFilter(