Merge pull request #55 from cake-tech/CWA-207-update-pin-screen

CWA-207 | applied new design to pin code page; added pin alert dialog…

lib/src/screens/auth/auth_page.dart

@@ -8,6 +8,7 @@ import 'package:cake_wallet/src/stores/auth/auth_store.dart';
 import 'package:cake_wallet/src/screens/pin_code/pin_code.dart';
 import 'package:cake_wallet/src/stores/settings/settings_store.dart';
 import 'package:cake_wallet/src/domain/common/biometric_auth.dart';
+import 'package:cake_wallet/palette.dart';
 
 typedef OnAuthenticationFinished = void Function(bool, AuthPageState);
 
@@ -24,6 +25,8 @@ class AuthPage extends StatefulWidget {
 class AuthPageState extends State<AuthPage> {
   final _key = GlobalKey<ScaffoldState>();
   final _pinCodeKey = GlobalKey<PinCodeState>();
+  final _backArrowImageDarkTheme =
+  Image.asset('assets/images/back_arrow_dark_theme.png');
 
   void changeProcessText(String text) {
     _key.currentState.showSnackBar(
@@ -121,8 +124,22 @@ class AuthPageState extends State<AuthPage> {
     return Scaffold(
         key: _key,
         appBar: CupertinoNavigationBar(
-          leading: widget.closable ? CloseButton() : Container(),
+          leading: widget.closable
-          backgroundColor: Theme.of(context).backgroundColor,
+          ? SizedBox(
+            height: 37,
+            width: 20,
+            child: ButtonTheme(
+              minWidth: double.minPositive,
+              child: FlatButton(
+                  highlightColor: Colors.transparent,
+                  splashColor: Colors.transparent,
+                  padding: EdgeInsets.all(0),
+                  onPressed: () => Navigator.of(context).pop(),
+                  child: _backArrowImageDarkTheme),
+            ),
+          )
+          : Container(),
+          backgroundColor: PaletteDark.historyPanel,
           border: null,
         ),
         resizeToAvoidBottomPadding: false,

lib/src/screens/pin_code/pin_code.dart

@@ -30,7 +30,7 @@ class PinCodeState<T extends PinCodeWidget> extends State<T> {
   static const sixPinLength = 6;
   static const fourPinLength = 4;
   static final deleteIconImage = Image.asset('assets/images/delete_icon.png');
-  static final backArrowImage = Image.asset('assets/images/back_arrow.png');
+  static final faceImage = Image.asset('assets/images/face.png');
   final _gridViewKey = GlobalKey();
 
   int pinLength = defaultPinLength;
@@ -91,12 +91,15 @@ class PinCodeState<T extends PinCodeWidget> extends State<T> {
   Widget body(BuildContext context) {
     return SafeArea(
         child: Container(
-      color: Theme.of(context).backgroundColor,
+      color: PaletteDark.historyPanel,
       padding: EdgeInsets.only(left: 40.0, right: 40.0, bottom: 40.0),
       child: Column(children: <Widget>[
         Spacer(flex: 2),
         Text(title,
-            style: TextStyle(fontSize: 24, color: Palette.wildDarkBlue)),
+            style: TextStyle(
+                fontSize: 20,
+                fontWeight: FontWeight.bold,
+                color: Colors.white)),
         Spacer(flex: 3),
         Container(
           width: 180,
@@ -111,8 +114,7 @@ class PinCodeState<T extends PinCodeWidget> extends State<T> {
                   height: size,
                   decoration: BoxDecoration(
                     shape: BoxShape.circle,
-                    color: isFilled ? Palette.deepPurple : Colors.transparent,
+                    color: isFilled ? Colors.white : PaletteDark.walletCardAddressField,
-                    border: Border.all(color: Palette.wildDarkBlue),
                   ));
             }),
           ),
@@ -127,7 +129,7 @@ class PinCodeState<T extends PinCodeWidget> extends State<T> {
               },
               child: Text(
                 _changePinLengthText(),
-                style: TextStyle(fontSize: 16.0, color: Palette.wildDarkBlue),
+                style: TextStyle(fontSize: 14.0, color: PaletteDark.walletCardText),
               ))
         ],
         Spacer(flex: 1),
@@ -149,9 +151,11 @@ class PinCodeState<T extends PinCodeWidget> extends State<T> {
                             return Container(
                               margin: EdgeInsets.only(
                                   left: marginLeft, right: marginRight),
-                              decoration: BoxDecoration(
+                              child: FlatButton(
-                                shape: BoxShape.circle,
+                                onPressed: () {},
-                                color: Theme.of(context).buttonColor,
+                                color: PaletteDark.historyPanel,
+                                shape: CircleBorder(),
+                                child: faceImage,
                               ),
                             );
                           } else if (index == 10) {
@@ -162,7 +166,7 @@ class PinCodeState<T extends PinCodeWidget> extends State<T> {
                                   left: marginLeft, right: marginRight),
                               child: FlatButton(
                                 onPressed: () => _pop(),
-                                color: Theme.of(context).buttonColor,
+                                color: PaletteDark.historyPanel,
                                 shape: CircleBorder(),
                                 child: deleteIconImage,
                               ),
@@ -176,14 +180,13 @@ class PinCodeState<T extends PinCodeWidget> extends State<T> {
                                 left: marginLeft, right: marginRight),
                             child: FlatButton(
                               onPressed: () => _push(index),
-                              color: Theme.of(context)
+                              color: PaletteDark.historyPanel,
-                                  .accentTextTheme
-                                  .title
-                                  .backgroundColor,
                               shape: CircleBorder(),
                               child: Text('$index',
                                   style: TextStyle(
-                                      fontSize: 23.0, color: Palette.blueGrey)),
+                                      fontSize: 30.0,
+                                      fontWeight: FontWeight.bold,
+                                      color: Colors.white)),
                             ),
                           );
                         }),

lib/src/screens/setup_pin_code/setup_pin_code.dart

@@ -7,12 +7,17 @@ import 'package:cake_wallet/src/screens/pin_code/pin_code.dart';
 import 'package:cake_wallet/src/screens/base_page.dart';
 import 'package:cake_wallet/src/stores/settings/settings_store.dart';
 import 'package:cake_wallet/generated/i18n.dart';
+import 'package:cake_wallet/palette.dart';
+import 'package:cake_wallet/src/screens/setup_pin_code/widgets/pin_alert_dialog.dart';
 
 class SetupPinCodePage extends BasePage {
   SetupPinCodePage({this.onPinCodeSetup});
 
   final Function(BuildContext, String) onPinCodeSetup;
 
+  @override
+  Color get backgroundColor => PaletteDark.historyPanel;
+
   @override
   String get title => S.current.setup_pin;
 
@@ -58,37 +63,28 @@ class _SetupPinCodeFormState<WidgetType extends SetupPinCodeForm>
 
         showDialog<void>(
             context: context,
-            barrierDismissible: false,
             builder: (BuildContext context) {
-              return AlertDialog(
+              return PinAlertDialog(
-                content: Text(S.of(context).setup_successful),
+                  pinTitleText: S.current.setup_pin,
-                actions: <Widget>[
+                  pinContentText: S.of(context).setup_successful,
-                  FlatButton(
+                  pinActionButtonText: S.of(context).ok,
-                    child: Text(S.of(context).ok),
+                  pinBarrierDismissible: false,
-                    onPressed: () {
+                  pinAction: () {
                     Navigator.of(context).pop();
                     widget.onPinCodeSetup(context, pin);
                     reset();
-                    },
+                  });
-                  ),
-                ],
-              );
             });
       } else {
         showDialog<void>(
             context: context,
             builder: (BuildContext context) {
-              return AlertDialog(
+              return PinAlertDialog(
-                content: Text(S.of(context).pin_is_incorrect),
+                  pinTitleText: S.current.setup_pin,
-                actions: <Widget>[
+                  pinContentText: S.of(context).pin_is_incorrect,
-                  FlatButton(
+                  pinActionButtonText: S.of(context).ok,
-                    child: Text(S.of(context).ok),
+                  pinBarrierDismissible: true,
-                    onPressed: () {
+                  pinAction: () => Navigator.of(context).pop());
-                      Navigator.of(context).pop();
-                    },
-                  ),
-                ],
-              );
             });
 
         reset();

lib/src/screens/setup_pin_code/widgets/pin_alert_dialog.dart

@@ -0,0 +1,60 @@
+import 'dart:ui';
+import 'package:cake_wallet/src/widgets/base_alert_dialog.dart';
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+
+class PinAlertDialog extends BaseAlertDialog {
+  PinAlertDialog({
+    @required this.pinTitleText,
+    @required this.pinContentText,
+    @required this.pinActionButtonText,
+    @required this.pinAction,
+    @required this.pinBarrierDismissible
+  });
+
+  final String pinTitleText;
+  final String pinContentText;
+  final String pinActionButtonText;
+  final VoidCallback pinAction;
+  final bool pinBarrierDismissible;
+
+  @override
+  String get titleText => pinTitleText;
+  @override
+  String get contentText => pinContentText;
+  @override
+  bool get barrierDismissible => pinBarrierDismissible;
+
+  @override
+  Widget actionButtons(BuildContext context) {
+    return Container(
+      width: 300,
+      height: 52,
+      padding: EdgeInsets.only(left: 12, right: 12),
+      decoration: BoxDecoration(
+          borderRadius: BorderRadius.only(
+            bottomLeft: Radius.circular(24),
+            bottomRight: Radius.circular(24)
+          ),
+          color: Colors.white
+      ),
+      child: ButtonTheme(
+        minWidth: double.infinity,
+        child: FlatButton(
+            onPressed: pinAction,
+            highlightColor: Colors.transparent,
+            splashColor: Colors.transparent,
+            child: Text(
+              pinActionButtonText,
+              textAlign: TextAlign.center,
+              style: TextStyle(
+                fontSize: 15,
+                fontWeight: FontWeight.w600,
+                color: Colors.blue,
+                decoration: TextDecoration.none,
+              ),
+            )),
+      ),
+    );
+  }
+}

lib/src/widgets/base_alert_dialog.dart

@@ -9,6 +9,7 @@ class BaseAlertDialog extends StatelessWidget {
   String get rightActionButtonText => '';
   VoidCallback get actionLeft => () {};
   VoidCallback get actionRight => () {};
+  bool get barrierDismissible => true;
 
   Widget title(BuildContext context) {
     return Text(
@@ -113,7 +114,9 @@ class BaseAlertDialog extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return GestureDetector(
-      onTap: () => Navigator.of(context).pop(),
+      onTap: () => barrierDismissible
+      ? Navigator.of(context).pop()
+      : null,
       child: Container(
         color: Colors.transparent,
         child: BackdropFilter(