From 03d3ff87f2f4ab7c4359465e93eca7c71e0efe48 Mon Sep 17 00:00:00 2001 From: Oleksandr Sobol Date: Mon, 27 Apr 2020 20:31:39 +0300 Subject: [PATCH] CWA-207 | applied new design to pin code page; added pin alert dialog; added barrier dismissible property to base alert page --- assets/images/2.0x/delete_icon.png | Bin 897 -> 762 bytes assets/images/2.0x/face.png | Bin 0 -> 836 bytes assets/images/3.0x/delete_icon.png | Bin 1302 -> 1205 bytes assets/images/3.0x/face.png | Bin 0 -> 1251 bytes assets/images/delete_icon.png | Bin 505 -> 431 bytes assets/images/face.png | Bin 0 -> 497 bytes lib/src/screens/auth/auth_page.dart | 21 +++++- lib/src/screens/pin_code/pin_code.dart | 33 +++++----- .../setup_pin_code/setup_pin_code.dart | 46 ++++++-------- .../widgets/pin_alert_dialog.dart | 60 ++++++++++++++++++ lib/src/widgets/base_alert_dialog.dart | 5 +- 11 files changed, 122 insertions(+), 43 deletions(-) create mode 100644 assets/images/2.0x/face.png create mode 100644 assets/images/3.0x/face.png create mode 100644 assets/images/face.png create mode 100644 lib/src/screens/setup_pin_code/widgets/pin_alert_dialog.dart diff --git a/assets/images/2.0x/delete_icon.png b/assets/images/2.0x/delete_icon.png index 8d5889f8aa2267cc832fa6ee80db1cf0e66821d3..63e14ff30c4f949cc627871908b76e6e9cfeab04 100644 GIT binary patch delta 724 zcmV;_0xSK22l@peiBL{Q4GJ0x0000DNk~Le0000$0000$2nGNE0IF$m-jN|Re*%w5 zL_t(|0qvUYk()3OhL@y)O9yrZp@UFDQo)f5a;X5N0$&HdRN!<#IZT%i@*OB}tNsLczi_P9>Jj znbRZrhK(w$3q`)b`o!OO((Rx0e-A+2lLf7p{d;nR#pj$IXyrJ00E|6f8QX$B>o9u zIUDNUVYm|xj_>s{WGKZv9ED<}0W29@y=KBkQGKkaOSn9S7JfGC& zuCaSAZ50WDY}V+dYw(KuqDTOjKVc$mV{`rZ#<1G5f~VlD9SSdHfun_eHWfhaDPH#W zM61D>&^x%*NSW~v){=Gye^j&#zVf=}Vk*GTe{l9pzQMfne;*>ZhKK(^_Y?5ntM(`! z*`Iw6Fc1T9`JA)gcy+?yK6^BH+vh%(k zAcMgiVL3U98CwyG298W1?4H2RLHrGq=M)e?V@M57sTeXhRs%Nte{G4ij2_^htW$@} z-(2;y^(Zkww!r_+@RideYT+5&r!s}wbF`gj2$39&=qX4ajHI+7L}!E8;OUU-;pk>M zVaoCN77j@-PWu7Pa`g+XpUc!MGC5~QS}*%aJ3{OUFPte_C(7HsK?I5x1LFT;7wTZ7 z#Ih;TIhGG`RaVaoDj#WC{3U%MDoI``5{X12kw_#G`OiNcBi0zHET60Z000004_EXj(|v1m3 zB45cs2%9J{&8r+JmRD3fP<+13%te7t+3eZ#e{y;Mx8FFwD@1SvL1MSF1$O^Bgu$~l!kAc@!n&*llp*K| z1580!kW4bDW?4mZoUiE!Wo)q-S*XZmF(C@Z6#QoAY*j}nV~Z8WW3+oe3yz6h9aBNZ z5olt-%n{m_U9pb~O^6cCqn-A-mZ>bTK@(dnzr90=dr}5=u^_4!fBV-+u%Tn?hJis) zg0PG!)S+^@ccmlP6}y-)&cm-R=2Sv0>%{aM>j}<-YIg6%R`xW9U=(2j_(7}Xy{Dtb zxQ8>4zS`+gv2kz;mAhcw?;d^GpjtkVp@26q0bDJO%B@bb>E>}o9u^>ys(TEjE{y-% zm^2&)MR2{rD>_tffAj?Baz*!Zekg&c^y%eCLqMdlnaf}Gj mAK2LkAJBM`xc}m9)tUb#P=7yw$*cbW0000D_lBq6e$II%(h zJwKC&V#~6TV_OD55ClOGgjdQ60zpJYnf4GhtJSK486cfBWr`8IqjZ@}CsJZVX^&xO zNQ|um!`Qn{o>Yk~#&HITp*l`6j_*F@zw=N)Q5M@!1L?VfICj*w4JX9vIgH zih0%gpuaE!c7#**l@U|W(+<+{8;qz}^$g7)P$;DPNl$w|LM-(1QLC^$6b^PLnn7R0 z`Ji>{xq|YkLWEf-{nil!F^GW}#6S#UAOrfHc&q2%ySr6Zzr6h=jyiv zu-=_Gqr|P>1R-bKZh*=~J}XG^UyT*>$tk%yeB9@eoMLrZ6 z#6S#UAOOC6YGG2fB1^Fbp=7l z53G+{Zr#-G?QgJ-3=4j*I9wx}Sm%5+Ag{3-5teLwwGW>lPEDEZwb4PDu5s(0Umb$H z;prsT%IKG5NskXOPLC~RpDF#PvJAw6-5}0U!yDt{tsh5E0v+^_JohE7ndcy=w|10$ zg19ebL+Q%|p~dav=D{e}*_Rsjt^}oHcrsKqAa4KkepAvmo_VgjA5GrFLb%3SLmlpc zK;4rMKIh@$$qg*bVg_nLhOiDg*|zBzWW$U>48$M?Vh{r{gc?Xe`KZ=&{BaTXUxz9$ z7RQ18*P+zVJ943J%!N8v`3B=jzBPg4)_004pY=iRBkmaDVDE%ZKx`=QcG9H_*8XUZ zVI+@3#<*+Y-W?bFj|J>r%9;_ii_&pX?4CHCd^*GAu)Y%nK@bEX3+@5vH%^00vo9C` O0000H=wLF! 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 p$y+GOyN!8Qbj&@pfsGz_%YSLe>>)gOuD z_D`NWpL(^eSBjL_L@O%~Mx-oa<{iu{Eypj$j}YPQhXIa)4*(!G&-DSd|7({eqb jOZ00000NkvXXu0mjf3*N2A delta 464 zcmV;>0Wbcq1Nj3XiBL{Q4GJ0x0000DNk~Le0000M0000H2nGNE0NJrzgOMRMe~w8+ zK~#7FrISxi!ax+pzc+}19Y??$a0B54>IsC6G(uuQS-1jME(lT=pb!(v4d4WF1G#~{ zflV|K#q`;!jcM&5Rldb!=DnF;-n>5qg|uor?>ORwh;oQ8O919guRfLsia?J$MJ9~! zf0={cX(2b|sVpl%A>Xqz5FO*RJo`qU4=_G{qf(z9vZ15WT`C~CQsD;;^Uh}EB)r;}7L zjGC?TYSm7Q8O=Z-7U_C7^SX4NuvTh#1nPsuVu6^&;@r#o$8N;RI8@yhf2kB~!~@Uo z`i*JC3g=o0{`wlt@GBEmI{92sxrV)lL5x-eEEh_?mAsZ(CBnooEG2hp&B;=Z}FvQZ4gJfz&YdyEfG*A$ zkPkP@%(`ZfEu9~eeFyBPH@X>+q6uWxRo`boN4o0k7_-dBB+!0Czu&lX+4n=6y;4Qz zB|{u*8VU$zZq+x>Gz1XH0&-6y7MPJIUZ%BO$eH??b-K3`nrq#Jng#U7JLJ>Rtvo&w zuD7RkMlm}}$sf4l;9b%tdrF^*|B`L!!T1lCp-X;41t}ok(04irTL)wXCf!b2Gq`VA z34NJskh1$C!Pso*nB { final _key = GlobalKey(); final _pinCodeKey = GlobalKey(); + 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 { return Scaffold( key: _key, appBar: CupertinoNavigationBar( - leading: widget.closable ? CloseButton() : Container(), - backgroundColor: Theme.of(context).backgroundColor, + leading: widget.closable + ? 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, diff --git a/lib/src/screens/pin_code/pin_code.dart b/lib/src/screens/pin_code/pin_code.dart index 63c86f80f..e8d7ad649 100644 --- a/lib/src/screens/pin_code/pin_code.dart +++ b/lib/src/screens/pin_code/pin_code.dart @@ -30,7 +30,7 @@ class PinCodeState extends State { 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 extends State { 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: [ 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 extends State { height: size, decoration: BoxDecoration( shape: BoxShape.circle, - color: isFilled ? Palette.deepPurple : Colors.transparent, - border: Border.all(color: Palette.wildDarkBlue), + color: isFilled ? Colors.white : PaletteDark.walletCardAddressField, )); }), ), @@ -127,7 +129,7 @@ class PinCodeState extends State { }, 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 extends State { return Container( margin: EdgeInsets.only( left: marginLeft, right: marginRight), - decoration: BoxDecoration( - shape: BoxShape.circle, - color: Theme.of(context).buttonColor, + child: FlatButton( + onPressed: () {}, + color: PaletteDark.historyPanel, + shape: CircleBorder(), + child: faceImage, ), ); } else if (index == 10) { @@ -162,7 +166,7 @@ class PinCodeState extends State { 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 extends State { left: marginLeft, right: marginRight), child: FlatButton( onPressed: () => _push(index), - color: Theme.of(context) - .accentTextTheme - .title - .backgroundColor, + color: PaletteDark.historyPanel, shape: CircleBorder(), child: Text('$index', style: TextStyle( - fontSize: 23.0, color: Palette.blueGrey)), + fontSize: 30.0, + fontWeight: FontWeight.bold, + color: Colors.white)), ), ); }), diff --git a/lib/src/screens/setup_pin_code/setup_pin_code.dart b/lib/src/screens/setup_pin_code/setup_pin_code.dart index 3a6308318..301dfd5ea 100644 --- a/lib/src/screens/setup_pin_code/setup_pin_code.dart +++ b/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 showDialog( context: context, - barrierDismissible: false, builder: (BuildContext context) { - return AlertDialog( - content: Text(S.of(context).setup_successful), - actions: [ - FlatButton( - child: Text(S.of(context).ok), - onPressed: () { - Navigator.of(context).pop(); - widget.onPinCodeSetup(context, pin); - reset(); - }, - ), - ], - ); + return PinAlertDialog( + pinTitleText: S.current.setup_pin, + pinContentText: S.of(context).setup_successful, + pinActionButtonText: S.of(context).ok, + pinBarrierDismissible: false, + pinAction: () { + Navigator.of(context).pop(); + widget.onPinCodeSetup(context, pin); + reset(); + }); }); } else { showDialog( context: context, builder: (BuildContext context) { - return AlertDialog( - content: Text(S.of(context).pin_is_incorrect), - actions: [ - FlatButton( - child: Text(S.of(context).ok), - onPressed: () { - Navigator.of(context).pop(); - }, - ), - ], - ); + return PinAlertDialog( + pinTitleText: S.current.setup_pin, + pinContentText: S.of(context).pin_is_incorrect, + pinActionButtonText: S.of(context).ok, + pinBarrierDismissible: true, + pinAction: () => Navigator.of(context).pop()); }); reset(); diff --git a/lib/src/screens/setup_pin_code/widgets/pin_alert_dialog.dart b/lib/src/screens/setup_pin_code/widgets/pin_alert_dialog.dart new file mode 100644 index 000000000..426195301 --- /dev/null +++ b/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, + ), + )), + ), + ); + } +} \ No newline at end of file diff --git a/lib/src/widgets/base_alert_dialog.dart b/lib/src/widgets/base_alert_dialog.dart index 1bebcd23b..494b69ab4 100644 --- a/lib/src/widgets/base_alert_dialog.dart +++ b/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(