From 1bed82327b87fed4df2eb4f8cb10ae3c7d237bd8 Mon Sep 17 00:00:00 2001 From: Oleksandr Sobol Date: Thu, 21 May 2020 21:01:12 +0300 Subject: [PATCH] CWA-216 | applied new design to settings page and change language page; reworked settings widgets, standard switch and picker; deleted provider picker; changed background colors in the faq page --- .../widgets/present_provider_picker.dart | 4 +- .../exchange/widgets/provider_picker.dart | 124 ---------- lib/src/screens/faq/faq_page.dart | 69 ++++-- lib/src/screens/settings/change_language.dart | 121 +++++---- lib/src/screens/settings/settings.dart | 232 +++++++++--------- .../widgets/settings_arrow_list_row.dart | 12 +- .../widgets/settings_header_list_row.dart | 6 +- .../widgets/settings_link_list_row.dart | 11 +- .../widgets/settings_raw_widget_list_row.dart | 3 +- .../widgets/settings_switch_list_row.dart | 9 +- .../widgets/settings_text_list_row.dart | 9 +- lib/src/widgets/picker.dart | 181 ++++++++------ lib/src/widgets/standart_switch.dart | 31 +-- 13 files changed, 375 insertions(+), 437 deletions(-) delete mode 100644 lib/src/screens/exchange/widgets/provider_picker.dart diff --git a/lib/src/screens/exchange/widgets/present_provider_picker.dart b/lib/src/screens/exchange/widgets/present_provider_picker.dart index 0424d6c32..079e52a06 100644 --- a/lib/src/screens/exchange/widgets/present_provider_picker.dart +++ b/lib/src/screens/exchange/widgets/present_provider_picker.dart @@ -2,10 +2,10 @@ import 'package:flutter/material.dart'; import 'package:cake_wallet/src/stores/exchange/exchange_store.dart'; import 'package:cake_wallet/src/domain/exchange/exchange_provider_description.dart'; import 'package:cake_wallet/src/domain/exchange/exchange_provider.dart'; -import 'package:cake_wallet/src/screens/exchange/widgets/provider_picker.dart'; import 'package:flutter_mobx/flutter_mobx.dart'; import 'package:cake_wallet/generated/i18n.dart'; import 'package:cake_wallet/palette.dart'; +import 'package:cake_wallet/src/widgets/picker.dart'; class PresentProviderPicker extends StatelessWidget { PresentProviderPicker({@required this.exchangeStore}); @@ -72,7 +72,7 @@ class PresentProviderPicker extends StatelessWidget { } showDialog( - builder: (_) => ProviderPicker( + builder: (_) => Picker( items: items, images: images, selectedAtIndex: selectedItem, diff --git a/lib/src/screens/exchange/widgets/provider_picker.dart b/lib/src/screens/exchange/widgets/provider_picker.dart deleted file mode 100644 index 28b9621bd..000000000 --- a/lib/src/screens/exchange/widgets/provider_picker.dart +++ /dev/null @@ -1,124 +0,0 @@ -import 'dart:ui'; -import 'package:flutter/cupertino.dart'; -import 'package:flutter/material.dart'; -import 'package:cake_wallet/palette.dart'; -import 'package:cake_wallet/src/domain/exchange/exchange_provider.dart'; - -class ProviderPicker extends StatelessWidget { - ProviderPicker({ - @required this.selectedAtIndex, - @required this.items, - @required this.images, - @required this.title, - @required this.onItemSelected, - }); - - final int selectedAtIndex; - final List items; - final List images; - final String title; - final Function(ExchangeProvider) onItemSelected; - - @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: Column( - mainAxisSize: MainAxisSize.min, - children: [ - Container( - padding: EdgeInsets.only(left: 24, right: 24), - child: Text( - title, - textAlign: TextAlign.center, - style: TextStyle( - fontSize: 18, - fontWeight: FontWeight.bold, - decoration: TextDecoration.none, - color: Colors.white - ), - ), - ), - Padding( - padding: EdgeInsets.only(left: 24, right: 24, top: 24), - child: GestureDetector( - onTap: () => null, - child: ClipRRect( - borderRadius: BorderRadius.all(Radius.circular(14)), - child: Container( - height: 233, - color: PaletteDark.menuList, - child: ListView.separated( - separatorBuilder: (context, index) => Divider( - color: PaletteDark.mainBackgroundColor, - height: 1, - ), - itemCount: items == null ? 0 : items.length, - itemBuilder: (context, index) { - final item = items[index]; - final image = images[index]; - final isItemSelected = index == selectedAtIndex; - - final color = isItemSelected - ? PaletteDark.menuHeader - : Colors.transparent; - final textColor = isItemSelected - ? Colors.blue - : Colors.white; - - return GestureDetector( - onTap: () { - if (onItemSelected == null) { - return; - } - Navigator.of(context).pop(); - onItemSelected(item); - }, - child: Container( - height: 77, - padding: EdgeInsets.only(left: 24, right: 24), - color: color, - child: Row( - mainAxisSize: MainAxisSize.min, - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.center, - children: [ - image, - Padding( - padding: EdgeInsets.only(left: 12), - child: Text( - item.toString(), - style: TextStyle( - fontSize: 18, - fontWeight: FontWeight.bold, - color: textColor, - decoration: TextDecoration.none, - ), - ), - ) - ], - ), - ), - ); - }, - ) - ), - ), - ), - ) - ], - ), - ) - ), - ), - ), - ); - } -} \ No newline at end of file diff --git a/lib/src/screens/faq/faq_page.dart b/lib/src/screens/faq/faq_page.dart index f28401ca8..b0c657eb2 100644 --- a/lib/src/screens/faq/faq_page.dart +++ b/lib/src/screens/faq/faq_page.dart @@ -1,4 +1,5 @@ import 'dart:convert'; +import 'package:cake_wallet/palette.dart'; import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; import 'package:provider/provider.dart'; @@ -10,41 +11,55 @@ class FaqPage extends BasePage { @override String get title => S.current.faq; + @override + Color get backgroundColor => PaletteDark.historyPanel; + @override Widget body(BuildContext context) { - return FutureBuilder( - builder: (context, snapshot) { - final faqItems = jsonDecode(snapshot.data.toString()) as List; + return Container( + color: PaletteDark.historyPanel, + padding: EdgeInsets.only(top: 12), + child: Container( + color: PaletteDark.menuList, + child: FutureBuilder( + builder: (context, snapshot) { + final faqItems = jsonDecode(snapshot.data.toString()) as List; - return ListView.separated( - itemBuilder: (BuildContext context, int index) { - final itemTitle = faqItems[index]["question"].toString(); - final itemChild = faqItems[index]["answer"].toString(); + return ListView.separated( + itemBuilder: (BuildContext context, int index) { + final itemTitle = faqItems[index]["question"].toString(); + final itemChild = faqItems[index]["answer"].toString(); - return ExpansionTile( - title: Text(itemTitle), - children: [ - Row( - mainAxisAlignment: MainAxisAlignment.start, + return ExpansionTile( + title: Padding( + padding: EdgeInsets.only(left: 8, top: 12, bottom: 12), + child: Text(itemTitle), + ), + backgroundColor: PaletteDark.menuHeader, children: [ - Expanded( - child: Container( - padding: EdgeInsets.only(left: 15.0, right: 15.0), - child: Text( - itemChild, - ), - )) + Row( + mainAxisAlignment: MainAxisAlignment.start, + children: [ + Expanded( + child: Container( + padding: EdgeInsets.only(left: 24.0, right: 24.0, bottom: 4), + child: Text( + itemChild, + ), + )) + ], + ) ], - ) - ], + ); + }, + separatorBuilder: (_, __) => + Divider(color: PaletteDark.mainBackgroundColor, height: 1.0), + itemCount: faqItems == null ? 0 : faqItems.length, ); }, - separatorBuilder: (_, __) => - Divider(color: Theme.of(context).dividerTheme.color, height: 1.0), - itemCount: faqItems == null ? 0 : faqItems.length, - ); - }, - future: rootBundle.loadString(getFaqPath(context)), + future: rootBundle.loadString(getFaqPath(context)), + ), + ), ); } diff --git a/lib/src/screens/settings/change_language.dart b/lib/src/screens/settings/change_language.dart index 317fa394a..a09188bea 100644 --- a/lib/src/screens/settings/change_language.dart +++ b/lib/src/screens/settings/change_language.dart @@ -5,76 +5,101 @@ import 'package:cake_wallet/generated/i18n.dart'; import 'package:cake_wallet/src/domain/common/language.dart'; import 'package:cake_wallet/src/stores/settings/settings_store.dart'; import 'package:cake_wallet/src/screens/base_page.dart'; +import 'package:cake_wallet/palette.dart'; +import 'package:cake_wallet/src/widgets/alert_with_two_actions.dart'; class ChangeLanguage extends BasePage { @override String get title => S.current.settings_change_language; + @override + Color get backgroundColor => PaletteDark.historyPanel; + @override Widget body(BuildContext context) { final settingsStore = Provider.of(context); final currentLanguage = Provider.of(context); - final currentColor = Theme.of(context).selectedRowColor; - final notCurrentColor = Theme.of(context).accentTextTheme.subhead.backgroundColor; + final currentColor = Colors.green; + final notCurrentColor = Colors.white; + + final shortDivider = Container( + height: 1, + padding: EdgeInsets.only(left: 24), + color: PaletteDark.menuList, + child: Container( + height: 1, + color: PaletteDark.mainBackgroundColor, + ), + ); + + final longDivider = Container( + height: 1, + color: PaletteDark.mainBackgroundColor, + ); return Container( - padding: EdgeInsets.only(top: 10.0, bottom: 10.0), + color: PaletteDark.historyPanel, + padding: EdgeInsets.only(top: 10.0), child: ListView.builder( itemCount: languages.values.length, itemBuilder: (BuildContext context, int index) { + final item = languages.values.elementAt(index); + final code = languages.keys.elementAt(index); + final isCurrent = settingsStore.languageCode == null ? false - : languages.keys.elementAt(index) == - settingsStore.languageCode; + : code == settingsStore.languageCode; - return Container( - margin: EdgeInsets.only(top: 10.0, bottom: 10.0), - color: isCurrent ? currentColor : notCurrentColor, - child: ListTile( - title: Text( - languages.values.elementAt(index), - style: TextStyle( - fontSize: 16.0, - color: Theme.of(context).primaryTextTheme.title.color), - ), - onTap: () async { - if (!isCurrent) { - await showDialog( - context: context, - builder: (BuildContext context) { - return AlertDialog( - title: Text( - S.of(context).change_language, - textAlign: TextAlign.center, - ), - content: Text( - S.of(context).change_language_to( - languages.values.elementAt(index)), - textAlign: TextAlign.center, - ), - actions: [ - FlatButton( - onPressed: () => Navigator.of(context).pop(), - child: Text(S.of(context).cancel)), - FlatButton( - onPressed: () { + return Column( + children: [ + index == 0 ? longDivider : Offstage(), + Container( + padding: EdgeInsets.only(top: 4, bottom: 4), + color: PaletteDark.menuList, + child: ListTile( + contentPadding: EdgeInsets.only(left: 24, right: 24), + title: Text( + item, + style: TextStyle( + fontSize: 14.0, + fontWeight: FontWeight.w600, + color: isCurrent ? currentColor : notCurrentColor + ), + ), + trailing: isCurrent + ? Icon(Icons.done, color: currentColor) + : Offstage(), + onTap: () async { + if (!isCurrent) { + await showDialog( + context: context, + builder: (BuildContext context) { + return AlertWithTwoActions( + alertTitle: S.of(context).change_language, + alertContent: S.of(context).change_language_to(item), + leftButtonText: S.of(context).change, + rightButtonText: S.of(context).cancel, + actionLeftButton: () { settingsStore.saveLanguageCode( - languageCode: - languages.keys.elementAt(index)); - currentLanguage.setCurrentLanguage( - languages.keys.elementAt(index)); + languageCode: code); + currentLanguage.setCurrentLanguage(code); Navigator.of(context).pop(); }, - child: Text(S.of(context).change)), - ], - ); - }); - } - }, - ), + actionRightButton: () => Navigator.of(context).pop() + ); + }); + } + }, + ), + ), + item == languages.values.last + ? longDivider + : shortDivider + ], ); }, - )); + ) + ); } } diff --git a/lib/src/screens/settings/settings.dart b/lib/src/screens/settings/settings.dart index 2b2b7d6da..4ff2eca7d 100644 --- a/lib/src/screens/settings/settings.dart +++ b/lib/src/screens/settings/settings.dart @@ -17,7 +17,7 @@ import 'package:cake_wallet/src/screens/settings/attributes.dart'; import 'package:cake_wallet/src/screens/disclaimer/disclaimer_page.dart'; import 'package:cake_wallet/src/screens/settings/items/settings_item.dart'; import 'package:cake_wallet/src/screens/settings/items/item_headers.dart'; -import 'package:cake_wallet/src/widgets/present_picker.dart'; +import 'package:cake_wallet/src/widgets/picker.dart'; // Settings widgets import 'package:cake_wallet/src/screens/settings/widgets/settings_arrow_list_row.dart'; import 'package:cake_wallet/src/screens/settings/widgets/settings_header_list_row.dart'; @@ -31,10 +31,7 @@ class SettingsPage extends BasePage { String get title => S.current.settings_title; @override - bool get isModalBackButton => true; - - @override - Color get backgroundColor => Palette.lightGrey2; + Color get backgroundColor => PaletteDark.historyPanel; @override Widget body(BuildContext context) { @@ -73,21 +70,6 @@ class SettingsFormState extends State { settingsStore.setItemHeaders(); _items.addAll([ - SettingsItem(title: ItemHeaders.nodes, attribute: Attributes.header), - SettingsItem( - onTaped: () => Navigator.of(context).pushNamed(Routes.nodeList), - title: ItemHeaders.currentNode, - widget: Observer( - builder: (_) => Text( - settingsStore.node == null ? '' : settingsStore.node.uri, - textAlign: TextAlign.right, - style: TextStyle( - fontSize: 16.0, - color: - Theme.of(context).primaryTextTheme.subtitle.color), - )), - attribute: Attributes.widget), - SettingsItem(title: ItemHeaders.wallets, attribute: Attributes.header), SettingsItem( onTaped: () => _setBalance(context), title: ItemHeaders.displayBalanceAs, @@ -96,9 +78,8 @@ class SettingsFormState extends State { settingsStore.balanceDisplayMode.toString(), textAlign: TextAlign.right, style: TextStyle( - fontSize: 16.0, - color: - Theme.of(context).primaryTextTheme.subtitle.color), + fontSize: 14.0, + color: PaletteDark.walletCardText), )), attribute: Attributes.widget), SettingsItem( @@ -109,9 +90,8 @@ class SettingsFormState extends State { settingsStore.fiatCurrency.toString(), textAlign: TextAlign.right, style: TextStyle( - fontSize: 16.0, - color: - Theme.of(context).primaryTextTheme.subtitle.color), + fontSize: 14.0, + color: PaletteDark.walletCardText), )), attribute: Attributes.widget), SettingsItem( @@ -122,15 +102,14 @@ class SettingsFormState extends State { settingsStore.transactionPriority.toString(), textAlign: TextAlign.right, style: TextStyle( - fontSize: 16.0, - color: - Theme.of(context).primaryTextTheme.subtitle.color), + fontSize: 14.0, + color: PaletteDark.walletCardText), )), attribute: Attributes.widget), SettingsItem( title: ItemHeaders.saveRecipientAddress, attribute: Attributes.switcher), - SettingsItem(title: ItemHeaders.personal, attribute: Attributes.header), + SettingsItem(title: '', attribute: Attributes.header), SettingsItem( onTaped: () { Navigator.of(context).pushNamed(Routes.auth, @@ -196,17 +175,14 @@ class SettingsFormState extends State { ], child: Container( height: 56, - padding: EdgeInsets.only(left: 20, right: 20), + padding: EdgeInsets.only(left: 24, right: 24), child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Text(S.of(context).settings_display_on_dashboard_list, style: TextStyle( - fontSize: 16, - color: Theme.of(context) - .primaryTextTheme - .title - .color)), + fontSize: 14, + color: Colors.white)), Observer(builder: (_) { var title = ''; @@ -233,17 +209,14 @@ class SettingsFormState extends State { return Text(title, style: TextStyle( - fontSize: 16.0, - color: Theme.of(context) - .primaryTextTheme - .subtitle - .color)); + fontSize: 14.0, + color: PaletteDark.walletCardText)); }) ]), )); }, attribute: Attributes.rawWidget), - SettingsItem(title: ItemHeaders.support, attribute: Attributes.header), + SettingsItem(title: '', attribute: Attributes.header), SettingsItem( onTaped: () => _launchUrl(_emailUrl), title: 'Email', @@ -253,13 +226,13 @@ class SettingsFormState extends State { SettingsItem( onTaped: () => _launchUrl(_telegramUrl), title: 'Telegram', - link: 't.me/cakewallet_bot', + link: 'Cake_Wallet', image: _telegramImage, attribute: Attributes.link), SettingsItem( onTaped: () => _launchUrl(_twitterUrl), title: 'Twitter', - link: 'twitter.com/CakewalletXMR', + link: '@CakeWalletXMR', image: _twitterImage, attribute: Attributes.link), SettingsItem( @@ -268,18 +241,18 @@ class SettingsFormState extends State { link: 'support@changenow.io', image: _changeNowImage, attribute: Attributes.link), + SettingsItem( + onTaped: () => _launchUrl(_morphUrl), + title: 'Morph', + link: 'support@morphtoken.com', + image: _morphImage, + attribute: Attributes.link), SettingsItem( onTaped: () => _launchUrl(_xmrToUrl), title: 'XMR.to', link: 'support@xmr.to', image: _xmrBtcImage, attribute: Attributes.link), - SettingsItem( - onTaped: () => _launchUrl(_morphUrl), - title: 'MorphToken', - link: 'support@morphtoken.com', - image: _morphImage, - attribute: Attributes.link), SettingsItem( onTaped: () { Navigator.push( @@ -345,87 +318,116 @@ class SettingsFormState extends State { final settingsStore = Provider.of(context); settingsStore.setItemHeaders(); - return SingleChildScrollView( - child: Column( - children: [ - ListView.builder( - shrinkWrap: true, - physics: NeverScrollableScrollPhysics(), - itemCount: _items.length, - itemBuilder: (context, index) { - final item = _items[index]; - bool _isDrawDivider = true; + final shortDivider = Container( + height: 1, + padding: EdgeInsets.only(left: 24), + color: PaletteDark.menuList, + child: Container( + height: 1, + color: PaletteDark.mainBackgroundColor, + ), + ); - if (item.attribute == Attributes.header || item == _items.last) { - _isDrawDivider = false; - } else { - if (_items[index + 1].attribute == Attributes.header) { - _isDrawDivider = false; - } - } + final longDivider = Container( + height: 1, + color: PaletteDark.mainBackgroundColor, + ); - return Column( - children: [ - _getWidget(item), - _isDrawDivider - ? Container( - color: Theme.of(context) - .accentTextTheme - .headline - .backgroundColor, - padding: EdgeInsets.only( - left: 20.0, - right: 20.0, - ), - child: Divider( - color: Theme.of(context).dividerColor, - height: 1.0, - ), - ) - : Offstage() - ], - ); - }), - ListTile( - contentPadding: EdgeInsets.only(left: 20.0), - title: Text( - settingsStore.itemHeaders[ItemHeaders.version], - style: TextStyle( - fontSize: 14.0, color: Palette.wildDarkBlue) - ), - ) - ], - )); + return Container( + color: PaletteDark.historyPanel, + padding: EdgeInsets.only(top: 12), + child: SingleChildScrollView( + child: Column( + children: [ + longDivider, + ListView.builder( + shrinkWrap: true, + physics: NeverScrollableScrollPhysics(), + itemCount: _items.length, + itemBuilder: (context, index) { + final item = _items[index]; + + Widget divider; + + if (item.attribute == Attributes.header || item == _items.last) { + divider = longDivider; + } else if (_items[index + 1].attribute == Attributes.header){ + divider = longDivider; + } else { + divider = shortDivider; + } + + return Column( + children: [ + _getWidget(item), + divider + ], + ); + }), + Padding( + padding: EdgeInsets.only(top: 12), + child: ListTile( + title: Center( + child: Text( + settingsStore.itemHeaders[ItemHeaders.version], + style: TextStyle( + fontSize: 14.0, color: PaletteDark.walletCardText) + ), + ), + ), + ) + ], + )), + ); } Future _setBalance(BuildContext context) async { final settingsStore = Provider.of(context); - final selectedDisplayMode = - await presentPicker(context, BalanceDisplayMode.all); + final items = BalanceDisplayMode.all; + final selectedItem = items.indexOf(settingsStore.balanceDisplayMode); - if (selectedDisplayMode != null) { - await settingsStore.setCurrentBalanceDisplayMode( - balanceDisplayMode: selectedDisplayMode); - } + await showDialog( + builder: (_) => Picker( + items: items, + selectedAtIndex: selectedItem, + title: S.of(context).please_select, + mainAxisAlignment: MainAxisAlignment.center, + onItemSelected: (BalanceDisplayMode mode) async => + await settingsStore.setCurrentBalanceDisplayMode( + balanceDisplayMode: mode)), + context: context); } Future _setCurrency(BuildContext context) async { final settingsStore = Provider.of(context); - final selectedCurrency = await presentPicker(context, FiatCurrency.all); + final items = FiatCurrency.all; + final selectedItem = items.indexOf(settingsStore.fiatCurrency); - if (selectedCurrency != null) { - await settingsStore.setCurrentFiatCurrency(currency: selectedCurrency); - } + await showDialog( + builder: (_) => Picker( + items: items, + selectedAtIndex: selectedItem, + title: S.of(context).please_select, + mainAxisAlignment: MainAxisAlignment.center, + onItemSelected: (FiatCurrency currency) async => + await settingsStore.setCurrentFiatCurrency(currency: currency)), + context: context); } Future _setTransactionPriority(BuildContext context) async { final settingsStore = Provider.of(context); - final selectedPriority = - await presentPicker(context, TransactionPriority.all); + final items = TransactionPriority.all; + final selectedItem = items.indexOf(settingsStore.transactionPriority); - if (selectedPriority != null) { - await settingsStore.setCurrentTransactionPriority( - priority: selectedPriority); - } + await showDialog( + builder: (_) => Picker( + items: items, + selectedAtIndex: selectedItem, + title: S.of(context).please_select, + mainAxisAlignment: MainAxisAlignment.center, + onItemSelected: (TransactionPriority priority) async => + await settingsStore.setCurrentTransactionPriority( + priority: priority)), + context: context); } } diff --git a/lib/src/screens/settings/widgets/settings_arrow_list_row.dart b/lib/src/screens/settings/widgets/settings_arrow_list_row.dart index 5abbf3ce7..7e5dd4c92 100644 --- a/lib/src/screens/settings/widgets/settings_arrow_list_row.dart +++ b/lib/src/screens/settings/widgets/settings_arrow_list_row.dart @@ -1,3 +1,4 @@ +import 'package:cake_wallet/palette.dart'; import 'package:provider/provider.dart'; import 'package:flutter/material.dart'; import 'package:flutter_mobx/flutter_mobx.dart'; @@ -8,22 +9,23 @@ class SettingsArrowListRow extends StatelessWidget { final VoidCallback onTaped; final String title; - final _cakeArrowImage = Image.asset('assets/images/cake_arrow.png'); + final _cakeArrowImage = Image.asset('assets/images/select_arrow.png', + color: PaletteDark.walletCardText); @override Widget build(BuildContext context) { final settingsStore = Provider.of(context); return Container( - color: Theme.of(context).accentTextTheme.headline.backgroundColor, + color: PaletteDark.menuList, child: ListTile( - contentPadding: EdgeInsets.only(left: 20.0, right: 20.0), + contentPadding: EdgeInsets.only(left: 24.0, right: 24.0), title: Observer( builder: (_) => Text( settingsStore.itemHeaders[title], style: TextStyle( - fontSize: 16.0, - color: Theme.of(context).primaryTextTheme.title.color), + fontSize: 14.0, + color: Colors.white), )), trailing: _cakeArrowImage, onTap: onTaped), diff --git a/lib/src/screens/settings/widgets/settings_header_list_row.dart b/lib/src/screens/settings/widgets/settings_header_list_row.dart index a068b262b..30fdc14c7 100644 --- a/lib/src/screens/settings/widgets/settings_header_list_row.dart +++ b/lib/src/screens/settings/widgets/settings_header_list_row.dart @@ -16,7 +16,7 @@ class SettingsHeaderListRow extends StatelessWidget { return Column( children: [ SizedBox( - height: 28.0, + height: 20.0, ), Container( padding: EdgeInsets.only(left: 20.0), @@ -25,7 +25,9 @@ class SettingsHeaderListRow extends StatelessWidget { children: [ Observer( builder: (_) => Text( - settingsStore.itemHeaders[title], + title.isNotEmpty + ? settingsStore.itemHeaders[title] + : '', style: TextStyle( fontSize: 15.0, color: Palette.wildDarkBlue), )) diff --git a/lib/src/screens/settings/widgets/settings_link_list_row.dart b/lib/src/screens/settings/widgets/settings_link_list_row.dart index 0b41ef9b8..db82b4097 100644 --- a/lib/src/screens/settings/widgets/settings_link_list_row.dart +++ b/lib/src/screens/settings/widgets/settings_link_list_row.dart @@ -13,9 +13,9 @@ class SettingsLinktListRow extends StatelessWidget { @override Widget build(BuildContext context) { return Container( - color: Theme.of(context).accentTextTheme.headline.backgroundColor, + color: PaletteDark.menuList, child: ListTile( - contentPadding: EdgeInsets.only(left: 20.0, right: 20.0), + contentPadding: EdgeInsets.only(left: 24.0, right: 24.0), title: Row( mainAxisAlignment: MainAxisAlignment.start, mainAxisSize: MainAxisSize.min, @@ -26,16 +26,15 @@ class SettingsLinktListRow extends StatelessWidget { child: Text( title, style: TextStyle( - fontSize: 15.0, - fontWeight: FontWeight.w500, - color: Theme.of(context).primaryTextTheme.title.color), + fontSize: 14.0, + color: Colors.white), ), ) ], ), trailing: Text( link, - style: TextStyle(fontSize: 14.0, color: Palette.cakeGreen), + style: TextStyle(fontSize: 14.0, color: Colors.blue), ), onTap: onTaped, ), diff --git a/lib/src/screens/settings/widgets/settings_raw_widget_list_row.dart b/lib/src/screens/settings/widgets/settings_raw_widget_list_row.dart index 8dd71a57d..aa64d846e 100644 --- a/lib/src/screens/settings/widgets/settings_raw_widget_list_row.dart +++ b/lib/src/screens/settings/widgets/settings_raw_widget_list_row.dart @@ -1,4 +1,5 @@ import 'package:flutter/material.dart'; +import 'package:cake_wallet/palette.dart'; class SettingRawWidgetListRow extends StatelessWidget { SettingRawWidgetListRow({@required this.widgetBuilder}); @@ -8,7 +9,7 @@ class SettingRawWidgetListRow extends StatelessWidget { @override Widget build(BuildContext context) { return Container( - color: Theme.of(context).accentTextTheme.headline.backgroundColor, + color: PaletteDark.menuList, child: widgetBuilder(context) ?? Container(), ); } diff --git a/lib/src/screens/settings/widgets/settings_switch_list_row.dart b/lib/src/screens/settings/widgets/settings_switch_list_row.dart index 16b2e2a29..78a7ce90d 100644 --- a/lib/src/screens/settings/widgets/settings_switch_list_row.dart +++ b/lib/src/screens/settings/widgets/settings_switch_list_row.dart @@ -1,3 +1,4 @@ +import 'package:cake_wallet/palette.dart'; import 'package:flutter/material.dart'; import 'package:provider/provider.dart'; import 'package:flutter_mobx/flutter_mobx.dart'; @@ -61,14 +62,14 @@ class SettingsSwitchListRow extends StatelessWidget { final settingsStore = Provider.of(context); return Container( - color: Theme.of(context).accentTextTheme.headline.backgroundColor, + color: PaletteDark.menuList, child: ListTile( - contentPadding: EdgeInsets.only(left: 20.0, right: 20.0), + contentPadding: EdgeInsets.only(left: 24.0, right: 24.0), title: Observer( builder: (_) => Text(settingsStore.itemHeaders[title], style: TextStyle( - fontSize: 16.0, - color: Theme.of(context).primaryTextTheme.title.color)), + fontSize: 14, + color: Colors.white)), ), trailing: _getSwitch(context)), ); diff --git a/lib/src/screens/settings/widgets/settings_text_list_row.dart b/lib/src/screens/settings/widgets/settings_text_list_row.dart index 23102bd40..da699a772 100644 --- a/lib/src/screens/settings/widgets/settings_text_list_row.dart +++ b/lib/src/screens/settings/widgets/settings_text_list_row.dart @@ -1,3 +1,4 @@ +import 'package:cake_wallet/palette.dart'; import 'package:provider/provider.dart'; import 'package:flutter/material.dart'; import 'package:flutter_mobx/flutter_mobx.dart'; @@ -15,9 +16,9 @@ class SettingsTextListRow extends StatelessWidget { final settingsStore = Provider.of(context); return Container( - color: Theme.of(context).accentTextTheme.headline.backgroundColor, + color: PaletteDark.menuList, child: ListTile( - contentPadding: EdgeInsets.only(left: 20.0, right: 20.0), + contentPadding: EdgeInsets.only(left: 24.0, right: 24.0), title: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ @@ -26,8 +27,8 @@ class SettingsTextListRow extends StatelessWidget { builder: (_) => Text( settingsStore.itemHeaders[title], style: TextStyle( - fontSize: 16.0, - color: Theme.of(context).primaryTextTheme.title.color), + fontSize: 14.0, + color: Colors.white), )), ), Flexible( diff --git a/lib/src/widgets/picker.dart b/lib/src/widgets/picker.dart index 7e34e56b9..c34e31895 100644 --- a/lib/src/widgets/picker.dart +++ b/lib/src/widgets/picker.dart @@ -1,19 +1,23 @@ import 'dart:ui'; import 'package:flutter/material.dart'; +import 'package:cake_wallet/palette.dart'; class Picker extends StatelessWidget { - Picker( - {@required this.selectedAtIndex, - @required this.items, - @required this.title, - this.pickerHeight = 300, - this.onItemSelected}); + Picker({ + @required this.selectedAtIndex, + @required this.items, + this.images, + @required this.title, + @required this.onItemSelected, + this.mainAxisAlignment = MainAxisAlignment.start + }); final int selectedAtIndex; final List items; + final List images; final String title; - final double pickerHeight; final Function(Item) onItemSelected; + final MainAxisAlignment mainAxisAlignment; @override Widget build(BuildContext context) { @@ -24,83 +28,98 @@ class Picker extends StatelessWidget { child: BackdropFilter( filter: ImageFilter.blur(sigmaX: 3.0, sigmaY: 3.0), child: Container( - decoration: BoxDecoration(color: Colors.white.withOpacity(0.55)), - child: Column( - mainAxisAlignment: MainAxisAlignment.end, - children: [ - GestureDetector( - onTap: () => null, - child: Container( - width: double.infinity, - height: pickerHeight, - color: Theme.of(context).backgroundColor, - child: ListView.separated( - itemCount: items.length + 1, - separatorBuilder: (_, index) => index == 0 - ? SizedBox() - : Divider( - height: 1, - color: Color.fromRGBO(235, 238, 242, 1)), - itemBuilder: (_, index) { - if (index == 0) { - return Container( - height: 100, - width: double.infinity, - color: Theme.of(context).backgroundColor, - child: Center( - child: Text( - title, - textAlign: TextAlign.center, - style: TextStyle( - fontSize: 26, - fontWeight: FontWeight.w600, - fontFamily: 'Lato', - decoration: TextDecoration.none, - color: Theme.of(context) - .primaryTextTheme - .caption - .color), + decoration: BoxDecoration(color: PaletteDark.historyPanel.withOpacity(0.75)), + child: Center( + child: Column( + mainAxisSize: MainAxisSize.min, + children: [ + Container( + padding: EdgeInsets.only(left: 24, right: 24), + child: Text( + title, + textAlign: TextAlign.center, + style: TextStyle( + fontSize: 18, + fontWeight: FontWeight.bold, + decoration: TextDecoration.none, + color: Colors.white + ), + ), + ), + Padding( + padding: EdgeInsets.only(left: 24, right: 24, top: 24), + child: GestureDetector( + onTap: () => null, + child: ClipRRect( + borderRadius: BorderRadius.all(Radius.circular(14)), + child: Container( + height: 233, + color: PaletteDark.menuList, + child: ListView.separated( + separatorBuilder: (context, index) => Divider( + color: PaletteDark.mainBackgroundColor, + height: 1, ), - ), - ); - } + itemCount: items == null ? 0 : items.length, + itemBuilder: (context, index) { + final item = items[index]; + final image = images != null? images[index] : null; + final isItemSelected = index == selectedAtIndex; - index -= 1; - final item = items[index]; + final color = isItemSelected + ? PaletteDark.menuHeader + : Colors.transparent; + final textColor = isItemSelected + ? Colors.blue + : Colors.white; - return GestureDetector( - onTap: () { - if (onItemSelected == null) { - return; - } - Navigator.of(context).pop(); - onItemSelected(item); - }, - child: Container( - color: Colors.transparent, - padding: EdgeInsets.only(top: 18, bottom: 18), - child: Center( - child: Text( - item.toString(), - style: TextStyle( - decoration: TextDecoration.none, - fontSize: 18, - fontWeight: FontWeight.normal, - fontFamily: 'Lato', - color: index == selectedAtIndex - ? Color.fromRGBO(138, 80, 255, 1) - : Theme.of(context) - .primaryTextTheme - .caption - .color), - )), - ), - ); - }, - )), - ) - ], - ), + return GestureDetector( + onTap: () { + if (onItemSelected == null) { + return; + } + Navigator.of(context).pop(); + onItemSelected(item); + }, + child: Container( + height: 77, + padding: EdgeInsets.only(left: 24, right: 24), + color: color, + child: Row( + mainAxisSize: MainAxisSize.max, + mainAxisAlignment: mainAxisAlignment, + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + image != null + ? image + : Offstage(), + Padding( + padding: EdgeInsets.only( + left: image != null ? 12 : 0 + ), + child: Text( + item.toString(), + style: TextStyle( + fontSize: 18, + fontWeight: FontWeight.bold, + color: textColor, + decoration: TextDecoration.none, + ), + ), + ) + ], + ), + ), + ); + }, + ) + ), + ), + ), + ) + ], + ), + ) ), ), ), diff --git a/lib/src/widgets/standart_switch.dart b/lib/src/widgets/standart_switch.dart index 1232fe57a..359651da8 100644 --- a/lib/src/widgets/standart_switch.dart +++ b/lib/src/widgets/standart_switch.dart @@ -1,3 +1,5 @@ +import 'package:cake_wallet/palette.dart'; +import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; class StandartSwitch extends StatefulWidget { @@ -16,29 +18,22 @@ class StandartSwitchState extends State { return GestureDetector( onTap: widget.onTaped, child: AnimatedContainer( - padding: EdgeInsets.only(left: 4.0, right: 4.0), + padding: EdgeInsets.only(left: 2.0, right: 2.0), alignment: widget.value ? Alignment.centerRight : Alignment.centerLeft, duration: Duration(milliseconds: 250), - width: 55.0, - height: 33.0, + width: 50, + height: 28, decoration: BoxDecoration( - color: Theme.of(context).toggleButtonsTheme.color, - border: Border.all( - color: Theme.of(context).toggleButtonsTheme.borderColor), - borderRadius: BorderRadius.all(Radius.circular(10.0))), + color: widget.value + ? Colors.green + : PaletteDark.mainBackgroundColor, + borderRadius: BorderRadius.all(Radius.circular(14.0))), child: Container( - width: 25.0, - height: 25.0, + width: 24.0, + height: 24.0, decoration: BoxDecoration( - color: widget.value - ? Theme.of(context).toggleButtonsTheme.selectedColor - : Theme.of(context).toggleButtonsTheme.disabledColor, - borderRadius: BorderRadius.all(Radius.circular(8.0))), - child: Icon( - widget.value ? Icons.check : Icons.close, - color: Colors.white, - size: 16.0, - ), + color: Colors.white, + shape: BoxShape.circle), ), ), );