CWA-201 | applied new design to primary button and seed page; added base alert dialog and reconnect alert dialog

This commit is contained in:
Oleksandr Sobol 2020-04-24 20:34:32 +03:00
parent 6a799df7da
commit df64e7b5e1
19 changed files with 403 additions and 177 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 183 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 376 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 57 KiB

View file

@ -87,5 +87,4 @@ class PaletteDark {
static const Color historyPanelButton = Color.fromRGBO(39, 53, 96, 1.0);
static const Color menuHeader = Color.fromRGBO(41, 52, 84, 1.0);
static const Color menuList = Color.fromRGBO(48, 59, 95, 1.0);
static const Color menuDivider = Color.fromRGBO(48, 59, 95, 1.0);
}

View file

@ -195,8 +195,8 @@ class ContactFormState extends State<ContactForm> {
text: S.of(context).reset,
color:
Theme.of(context).accentTextTheme.button.backgroundColor,
borderColor:
Theme.of(context).accentTextTheme.button.decorationColor),
textColor:
Theme.of(context).primaryTextTheme.button.color),
),
SizedBox(width: 20),
Expanded(
@ -248,10 +248,10 @@ class ContactFormState extends State<ContactForm> {
.primaryTextTheme
.button
.backgroundColor,
borderColor: Theme.of(context)
textColor: Theme.of(context)
.primaryTextTheme
.button
.decorationColor))
.color))
],
));
}

View file

@ -31,13 +31,16 @@ abstract class BasePage extends StatelessWidget {
final _themeChanger = Provider.of<ThemeChanger>(context);
Image _closeButton, _backButton;
if (_themeChanger.getTheme() == Themes.darkTheme) {
_backButton = _backArrowImageDarkTheme;
_closeButton = _closeButtonImageDarkTheme;
/*if (_themeChanger.getTheme() == Themes.darkTheme) {
_backButton = _backArrowImageDarkTheme;
_closeButton = _closeButtonImageDarkTheme;
} else {
_backButton = _backArrowImage;
_closeButton = _closeButtonImage;
}
}*/
return SizedBox(
height: 37,
@ -60,9 +63,10 @@ abstract class BasePage extends StatelessWidget {
: Text(
title,
style: TextStyle(
fontSize: 16.0,
fontWeight: FontWeight.w600,
color: Theme.of(context).primaryTextTheme.title.color),
fontSize: 22.0,
fontWeight: FontWeight.bold,
color: Colors.white),
//color: Theme.of(context).primaryTextTheme.title.color),
);
}
@ -81,9 +85,10 @@ abstract class BasePage extends StatelessWidget {
leading: leading(context),
middle: middle(context),
trailing: trailing(context),
backgroundColor: _isDarkTheme
backgroundColor: backgroundColor);
/*backgroundColor: _isDarkTheme
? Theme.of(context).backgroundColor
: backgroundColor);
: backgroundColor);*/
case AppBarStyle.withShadow:
return NavBar.withShadow(
@ -91,9 +96,10 @@ abstract class BasePage extends StatelessWidget {
leading: leading(context),
middle: middle(context),
trailing: trailing(context),
backgroundColor: _isDarkTheme
backgroundColor: backgroundColor);
/*backgroundColor: _isDarkTheme
? Theme.of(context).backgroundColor
: backgroundColor);
: backgroundColor);*/
default:
return NavBar(
@ -101,9 +107,10 @@ abstract class BasePage extends StatelessWidget {
leading: leading(context),
middle: middle(context),
trailing: trailing(context),
backgroundColor: _isDarkTheme
backgroundColor: backgroundColor);
/*backgroundColor: _isDarkTheme
? Theme.of(context).backgroundColor
: backgroundColor);
: backgroundColor);*/
}
}

View file

@ -4,6 +4,7 @@ import 'package:provider/provider.dart';
import 'package:cake_wallet/generated/i18n.dart';
import 'package:cake_wallet/src/stores/wallet/wallet_store.dart';
import 'package:cake_wallet/src/screens/auth/auth_page.dart';
import 'package:cake_wallet/src/screens/dashboard/widgets/reconnect_alert_dialog.dart';
class WalletMenu {
WalletMenu(this.context);
@ -74,7 +75,19 @@ class WalletMenu {
await showDialog<void>(
context: context,
builder: (BuildContext context) {
return AlertDialog(
return ReconnectAlertDialog(
reconnectTitleText: S.of(context).reconnection,
reconnectContentText: S.of(context).reconnect_alert_text,
reconnectLeftActionButtonText: S.of(context).ok,
reconnectRightActionButtonText: S.of(context).cancel,
reconnectActionLeft: () {
walletStore.reconnect();
Navigator.of(context).pop();
},
reconnectActionRight: () => Navigator.of(context).pop()
);
/*AlertDialog(
title: Text(
S.of(context).reconnection,
textAlign: TextAlign.center,
@ -91,7 +104,7 @@ class WalletMenu {
},
child: Text(S.of(context).ok))
],
);
);*/
});
}
}

View file

@ -0,0 +1,34 @@
import 'dart:ui';
import 'package:cake_wallet/src/widgets/base_alert_dialog.dart';
import 'package:flutter/cupertino.dart';
class ReconnectAlertDialog extends BaseAlertDialog {
ReconnectAlertDialog({
@required this.reconnectTitleText,
@required this.reconnectContentText,
@required this.reconnectLeftActionButtonText,
@required this.reconnectRightActionButtonText,
@required this.reconnectActionLeft,
@required this.reconnectActionRight
});
final String reconnectTitleText;
final String reconnectContentText;
final String reconnectLeftActionButtonText;
final String reconnectRightActionButtonText;
final VoidCallback reconnectActionLeft;
final VoidCallback reconnectActionRight;
@override
String get titleText => reconnectTitleText;
@override
String get contentText => reconnectContentText;
@override
String get leftActionButtonText => reconnectLeftActionButtonText;
@override
String get rightActionButtonText => reconnectRightActionButtonText;
@override
VoidCallback get actionLeft => reconnectActionLeft;
@override
VoidCallback get actionRight => reconnectActionRight;
}

View file

@ -311,10 +311,10 @@ class DisclaimerBodyState extends State<DisclaimerPageBody> {
.primaryTextTheme
.button
.backgroundColor,
borderColor: Theme.of(context)
textColor: Theme.of(context)
.primaryTextTheme
.button
.decorationColor,
.color,
),
)
: Offstage(),

View file

@ -69,10 +69,10 @@ class ExchangeConfirmPage extends BasePage {
.accentTextTheme
.caption
.backgroundColor,
borderColor: Theme.of(context)
.accentTextTheme
.caption
.decorationColor)
textColor: Theme.of(context)
.primaryTextTheme
.button
.color)
],
),
))),
@ -83,8 +83,8 @@ class ExchangeConfirmPage extends BasePage {
.pushReplacementNamed(Routes.exchangeTrade, arguments: trade),
text: S.of(context).saved_the_trade_id,
color: Theme.of(context).primaryTextTheme.button.backgroundColor,
borderColor:
Theme.of(context).primaryTextTheme.button.decorationColor),
textColor:
Theme.of(context).primaryTextTheme.button.color),
)
],
);

View file

@ -173,10 +173,10 @@ class NewNodeFormState extends State<NewNodePageForm> {
.accentTextTheme
.button
.backgroundColor,
borderColor: Theme.of(context)
.accentTextTheme
textColor: Theme.of(context)
.primaryTextTheme
.button
.decorationColor),
.color),
)),
Flexible(
child: Container(
@ -200,10 +200,10 @@ class NewNodeFormState extends State<NewNodePageForm> {
.primaryTextTheme
.button
.backgroundColor,
borderColor: Theme.of(context)
textColor: Theme.of(context)
.primaryTextTheme
.button
.decorationColor,
.color,
),
)),
],

View file

@ -9,14 +9,15 @@ import 'package:cake_wallet/generated/i18n.dart';
import 'package:cake_wallet/src/widgets/primary_button.dart';
import 'package:cake_wallet/src/stores/wallet_seed/wallet_seed_store.dart';
import 'package:cake_wallet/src/screens/base_page.dart';
import 'package:cake_wallet/src/widgets/scollable_with_bottom_section.dart';
class SeedPage extends BasePage {
SeedPage({this.onCloseCallback});
static final image = Image.asset('assets/images/seed_image.png');
static final image = Image.asset('assets/images/crypto_lock.png');
@override
bool get isModalBackButton => true;
Color get backgroundColor => PaletteDark.historyPanel;
@override
String get title => S.current.seed_title;
@ -32,135 +33,132 @@ class SeedPage extends BasePage {
return onCloseCallback != null ? Offstage() : super.leading(context);
}
@override
Widget trailing(BuildContext context) {
return onCloseCallback != null
? GestureDetector(
onTap: () => onClose(context),
child: Container(
width: 70,
height: 32,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(16)),
color: PaletteDark.menuList
),
child: Text(
S.of(context).seed_language_next,
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.w600,
color: Colors.blue
),
),
),
)
: Offstage();
}
@override
Widget body(BuildContext context) {
final walletSeedStore = Provider.of<WalletSeedStore>(context);
String _seed;
return Container(
padding: EdgeInsets.all(30.0),
child: Column(
children: <Widget>[
Expanded(
child: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
image,
Container(
margin: EdgeInsets.only(left: 30.0, top: 10.0, right: 30.0),
child: Observer(builder: (_) {
_seed = walletSeedStore.seed;
return Column(
children: <Widget>[
Row(
children: <Widget>[
Expanded(
child: Container(
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
width: 1.0,
color: Theme.of(context)
.dividerColor))),
padding: EdgeInsets.only(bottom: 20.0),
margin: EdgeInsets.only(bottom: 10.0),
child: Text(
walletSeedStore.name,
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 18.0,
color: Theme.of(context)
.primaryTextTheme
.button
.color),
),
))
],
),
SizedBox(
height: 10.0,
),
Text(
walletSeedStore.seed,
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 14.0,
color: Theme.of(context)
.primaryTextTheme
.title
.color),
)
],
);
}),
),
Container(
margin: EdgeInsets.only(top: 30.0),
child: Row(
children: <Widget>[
Flexible(
child: Container(
padding: EdgeInsets.only(right: 8.0),
child: PrimaryButton(
onPressed: () => Share.text(
S.of(context).seed_share,
_seed,
'text/plain'),
color: Theme.of(context)
.primaryTextTheme
.button
.backgroundColor,
borderColor: Theme.of(context)
.primaryTextTheme
.button
.decorationColor,
text: S.of(context).save),
)),
Flexible(
child: Container(
padding: EdgeInsets.only(left: 8.0),
child: Builder(
builder: (context) => PrimaryButton(
onPressed: () {
Clipboard.setData(
ClipboardData(text: _seed));
Scaffold.of(context).showSnackBar(
SnackBar(
content: Text(S
.of(context)
.copied_to_clipboard),
backgroundColor: Colors.green,
duration:
Duration(milliseconds: 1500),
),
);
},
text: S.of(context).copy,
color: Theme.of(context)
.accentTextTheme
.caption
.backgroundColor,
borderColor: Theme.of(context)
.accentTextTheme
.caption
.decorationColor),
)))
],
),
)
],
),
width: double.infinity,
height: double.infinity,
color: PaletteDark.historyPanel,
child: ScrollableWithBottomSection(
contentPadding: EdgeInsets.only(left: 40, right: 40, bottom: 20),
content: Column(
children: <Widget>[
Padding(
padding: EdgeInsets.only(top: 33),
child: image,
),
Padding(
padding: EdgeInsets.only(top: 33),
child: Observer(
builder: (_) {
_seed = walletSeedStore.seed;
return Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Text(
walletSeedStore.name,
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.white
),
),
Padding(
padding: EdgeInsets.only(top: 20),
child: Text(
_seed,
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 14,
color: PaletteDark.walletCardText
),
),
)
],
);
}
),
)
],
),
bottomSectionPadding: EdgeInsets.only(
left: 24,
right: 24,
bottom: 52
),
bottomSection: Container(
child: Row(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Flexible(
child: Container(
padding: EdgeInsets.only(right: 8.0),
child: PrimaryButton(
onPressed: () => Share.text(
S.of(context).seed_share,
_seed,
'text/plain'),
text: S.of(context).save,
color: Colors.green,
textColor: Colors.white),
)
),
Flexible(
child: Container(
padding: EdgeInsets.only(left: 8.0),
child: Builder(
builder: (context) => PrimaryButton(
onPressed: () {
Clipboard.setData(
ClipboardData(text: _seed));
Scaffold.of(context).showSnackBar(
SnackBar(
content: Text(S
.of(context)
.copied_to_clipboard),
backgroundColor: Colors.green,
duration: Duration(milliseconds: 1500),
),
);
},
text: S.of(context).copy,
color: Colors.blue,
textColor: Colors.white)
),
)
)
],
),
onCloseCallback != null
? PrimaryButton(
onPressed: () => onClose(context),
text: S.of(context).restore_next,
color: Palette.darkGrey,
borderColor: Palette.darkGrey)
: Offstage()
],
),
),
);
}

View file

@ -43,8 +43,8 @@ class SeedLanguage extends BasePage {
text: S.of(context).seed_language_next,
color:
Theme.of(context).primaryTextTheme.button.backgroundColor,
borderColor:
Theme.of(context).primaryTextTheme.button.decorationColor),
textColor:
Theme.of(context).primaryTextTheme.button.color),
],
),
);

View file

@ -16,7 +16,7 @@ import 'package:cake_wallet/src/screens/wallet_list/widgets/wallet_tile.dart';
class WalletListPage extends BasePage {
@override
ObstructingPreferredSizeWidget appBar(BuildContext context) => null;
Color get backgroundColor => PaletteDark.historyPanel;
@override
Widget body(BuildContext context) => WalletListBody();
@ -30,7 +30,7 @@ class WalletListBody extends StatefulWidget {
class WalletListBodyState extends State<WalletListBody> {
final moneroIcon = Image.asset('assets/images/monero.png', height: 24, width: 24);
final newWalletImage = Image.asset('assets/images/new_wallet.png', height: 12, width: 12, color: PaletteDark.historyPanel);
final restoreWalletImage = Image.asset('assets/images/restore_wallet.png', height: 12, width: 12, color: Colors.white,);
final restoreWalletImage = Image.asset('assets/images/restore_wallet.png', height: 12, width: 12, color: Colors.white);
WalletListStore _walletListStore;
ScrollController scrollController = ScrollController();
@ -41,7 +41,7 @@ class WalletListBodyState extends State<WalletListBody> {
return SafeArea(
child: Container(
padding: EdgeInsets.only(top: 32),
padding: EdgeInsets.only(top: 16),
color: PaletteDark.historyPanel,
child: ScrollableWithBottomSection(
contentPadding: EdgeInsets.only(bottom: 20),

View file

@ -77,16 +77,16 @@ class WelcomePage extends BasePage {
text: S.of(context).create_new,
color:
Theme.of(context).primaryTextTheme.button.backgroundColor,
borderColor:
Theme.of(context).primaryTextTheme.button.decorationColor),
textColor:
Theme.of(context).primaryTextTheme.button.color),
SizedBox(height: 10),
PrimaryButton(
onPressed: () {
Navigator.pushNamed(context, Routes.restoreOptions);
},
color: Theme.of(context).accentTextTheme.caption.backgroundColor,
borderColor:
Theme.of(context).accentTextTheme.caption.decorationColor,
textColor:
Theme.of(context).primaryTextTheme.button.color,
text: S.of(context).restore_wallet,
)
]))

View file

@ -0,0 +1,169 @@
import 'dart:ui';
import 'package:flutter/material.dart';
import 'package:cake_wallet/palette.dart';
class BaseAlertDialog extends StatelessWidget {
String get titleText => '';
String get contentText => '';
String get leftActionButtonText => '';
String get rightActionButtonText => '';
VoidCallback get actionLeft => () {};
VoidCallback get actionRight => () {};
Widget title(BuildContext context) {
return Text(
titleText,
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.w600,
color: Colors.white,
decoration: TextDecoration.none,
),
);
}
Widget content(BuildContext context) {
return Text(
contentText,
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w600,
color: Colors.white,
decoration: TextDecoration.none,
),
);
}
Widget actionButtons(BuildContext context) {
return Container(
width: 300,
height: 52,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(24),
bottomRight: Radius.circular(24)
),
color: Colors.white
),
child: Row(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Flexible(
child: Container(
padding: EdgeInsets.only(left: 12, right: 12),
decoration: BoxDecoration(
borderRadius: BorderRadius.only(bottomLeft: Radius.circular(24)),
),
child: ButtonTheme(
minWidth: double.infinity,
child: FlatButton(
onPressed: actionLeft,
highlightColor: Colors.transparent,
splashColor: Colors.transparent,
child: Text(
leftActionButtonText,
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.w600,
color: Colors.blue,
decoration: TextDecoration.none,
),
)),
),
)
),
Flexible(
child: Container(
padding: EdgeInsets.only(left: 12, right: 12),
decoration: BoxDecoration(
borderRadius: BorderRadius.only(bottomRight: Radius.circular(24)),
),
child: ButtonTheme(
minWidth: double.infinity,
child: FlatButton(
onPressed: actionRight,
highlightColor: Colors.transparent,
splashColor: Colors.transparent,
child: Text(
rightActionButtonText,
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.w600,
color: Colors.red,
decoration: TextDecoration.none,
),
)),
),
)
)
],
),
);
}
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () => Navigator.of(context).pop(),
child: Container(
color: Colors.transparent,
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 3.0, sigmaY: 3.0),
child: Container(
decoration: BoxDecoration(color: PaletteDark.historyPanel.withOpacity(0.75)),
child: Center(
child: GestureDetector(
onTap: () => null,
child: Container(
width: 300,
height: 257,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(24)),
color: PaletteDark.menuHeader
),
child: Column(
//mainAxisSize: MainAxisSize.max,
children: <Widget>[
Container(
width: 300,
height: 77,
padding: EdgeInsets.all(24),
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(24),
topRight: Radius.circular(24)
),
),
child: Center(
child: title(context),
),
),
Container(
width: 300,
height: 1,
color: PaletteDark.menuList,
),
Container(
width: 300,
height: 127,
padding: EdgeInsets.all(24),
child: Center(
child: content(context),
),
),
actionButtons(context)
],
),
),
),
),
),
),
),
);
}
}

View file

@ -19,8 +19,9 @@ class NavBar extends StatelessWidget implements ObstructingPreferredSizeWidget {
middle: middle,
trailing: trailing,
height: _height,
backgroundColor:
_isDarkTheme ? Theme.of(context).backgroundColor : backgroundColor);
backgroundColor: backgroundColor);
/*backgroundColor:
_isDarkTheme ? Theme.of(context).backgroundColor : backgroundColor);*/
}
factory NavBar.withShadow(
@ -37,8 +38,9 @@ class NavBar extends StatelessWidget implements ObstructingPreferredSizeWidget {
middle: middle,
trailing: trailing,
height: 80,
backgroundColor:
_isDarkTheme ? Theme.of(context).backgroundColor : backgroundColor,
backgroundColor: backgroundColor,
/*backgroundColor:
_isDarkTheme ? Theme.of(context).backgroundColor : backgroundColor,*/
decoration: BoxDecoration(
color: _isDarkTheme
? Theme.of(context).backgroundColor

View file

@ -7,14 +7,14 @@ class PrimaryButton extends StatelessWidget {
{@required this.onPressed,
@required this.text,
@required this.color,
@required this.borderColor,
@required this.textColor,
this.isDisabled = false,
this.onDisabledPressed});
final VoidCallback onPressed;
final VoidCallback onDisabledPressed;
final Color color;
final Color borderColor;
final Color textColor;
final String text;
final bool isDisabled;
@ -22,21 +22,21 @@ class PrimaryButton extends StatelessWidget {
Widget build(BuildContext context) {
return ButtonTheme(
minWidth: double.infinity,
height: 56.0,
height: 52.0,
child: FlatButton(
onPressed: isDisabled
? (onDisabledPressed != null ? onDisabledPressed : null)
: onPressed,
color: isDisabled ? Colors.transparent : color,
shape: RoundedRectangleBorder(
side: BorderSide(color: borderColor),
borderRadius: BorderRadius.circular(10.0)),
borderRadius: BorderRadius.circular(26.0)),
child: Text(text,
style: TextStyle(
fontSize: 16.0,
fontSize: 15.0,
fontWeight: FontWeight.w600,
color: isDisabled
? Palette.darkGrey
: Theme.of(context).primaryTextTheme.button.color)),
: textColor)),
));
}
}
@ -172,6 +172,7 @@ class PrimaryImageButton extends StatelessWidget {
text,
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.w600,
color: textColor
),
)

View file

@ -337,10 +337,10 @@ class SeedWidgetState extends State<SeedWidget> {
.primaryTextTheme
.button
.backgroundColor,
borderColor: Theme.of(context)
textColor: Theme.of(context)
.primaryTextTheme
.button
.decorationColor)
.color)
: PrimaryButton(
text: selectedItem != null
? S.of(context).save
@ -351,7 +351,10 @@ class SeedWidgetState extends State<SeedWidget> {
onDisabledPressed: () => showErrorIfExist(),
isDisabled: !isCurrentMnemoticValid,
color: PaletteDark.darkThemeBlueButton,
borderColor: Palette.brightBlue))
textColor: Theme.of(context)
.primaryTextTheme
.button
.color))
]))
]),
);