From 2356cda87918e2d557888735ae5bec35116320b6 Mon Sep 17 00:00:00 2001 From: Oleksandr Sobol Date: Fri, 22 May 2020 19:15:06 +0300 Subject: [PATCH] CWA-216 | applied new design to disclaimer page and faq page --- .../screens/disclaimer/disclaimer_page.dart | 459 +++++++++--------- lib/src/screens/faq/faq_page.dart | 134 +++-- 2 files changed, 332 insertions(+), 261 deletions(-) diff --git a/lib/src/screens/disclaimer/disclaimer_page.dart b/lib/src/screens/disclaimer/disclaimer_page.dart index ee2fa494..73fd9f3f 100644 --- a/lib/src/screens/disclaimer/disclaimer_page.dart +++ b/lib/src/screens/disclaimer/disclaimer_page.dart @@ -6,6 +6,8 @@ import 'package:cake_wallet/palette.dart'; import 'package:url_launcher/url_launcher.dart'; import 'package:cake_wallet/src/screens/base_page.dart'; import 'package:cake_wallet/src/widgets/primary_button.dart'; +import 'package:cake_wallet/src/widgets/alert_with_one_action.dart'; +import 'package:cake_wallet/generated/i18n.dart'; class DisclaimerPage extends BasePage { DisclaimerPage({this.isReadOnly = false}); @@ -13,7 +15,7 @@ class DisclaimerPage extends BasePage { final bool isReadOnly; @override - bool get isModalBackButton => false; + Color get backgroundColor => PaletteDark.historyPanel; @override String get title => 'Terms of Use'; @@ -34,7 +36,7 @@ class DisclaimerPageBody extends StatefulWidget { class DisclaimerBodyState extends State { DisclaimerBodyState(this._isAccepted); - static const xmrtoUrl = 'https://xmr.to/app_static/html/tos.html'; + static const xmrtoUrl = 'https://xmr.to/terms-of-service'; static const changenowUrl = 'https://changenow.io/terms-of-use'; static const morphUrl = 'http://morphtoken.com/terms'; @@ -55,22 +57,11 @@ class DisclaimerBodyState extends State { await showDialog( context: context, builder: (BuildContext context) { - return AlertDialog( - title: Text( - 'Terms and conditions', - textAlign: TextAlign.center, - ), - content: Text( - 'By using this app, you agree to the Terms of Agreement set forth to below', - textAlign: TextAlign.center, - ), - actions: [ - FlatButton( - onPressed: () { - Navigator.of(context).pop(); - }, - child: Text('OK')), - ], + return AlertWithOneAction( + alertTitle: 'Terms and conditions', + alertContent: 'By using this app, you agree to the Terms of Agreement set forth to below', + buttonText: S.of(context).ok, + buttonAction: () => Navigator.of(context).pop() ); }); } @@ -86,245 +77,255 @@ class DisclaimerBodyState extends State { @override Widget build(BuildContext context) { - return Column( - children: [ - SizedBox(height: 10.0), - Expanded( - child: Stack( - children: [ - SingleChildScrollView( - padding: EdgeInsets.only(left: 25.0, right: 25.0), - child: Column( + return Container( + color: PaletteDark.historyPanel, + child: Column( + children: [ + SizedBox(height: 10.0), + Expanded( + child: Stack( children: [ - !_isAccepted - ? Row( + SingleChildScrollView( + padding: EdgeInsets.only(left: 24.0, right: 24.0), + child: Column( + children: [ + !_isAccepted + ? Row( children: [ Expanded( child: Text( 'Terms and conditions', textAlign: TextAlign.center, style: TextStyle( - fontSize: 20.0, - fontWeight: FontWeight.bold), + fontSize: 20.0, + fontWeight: FontWeight.bold, + color: Colors.white + ), ), ) ], ) - : Offstage(), - !_isAccepted - ? SizedBox( + : Offstage(), + !_isAccepted + ? SizedBox( height: 20.0, ) - : Offstage(), - Row( - children: [ - Expanded( - child: Text( - 'Legal Disclaimer\nAnd\nTerms of Use', - textAlign: TextAlign.center, - style: TextStyle( - fontSize: 12.0, fontWeight: FontWeight.bold), + : Offstage(), + Row( + children: [ + Expanded( + child: Text( + 'Legal Disclaimer\nAnd\nTerms of Use', + textAlign: TextAlign.center, + style: TextStyle( + fontSize: 12.0, + fontWeight: FontWeight.bold, + color: Colors.white + ), + ), + ) + ], ), - ) - ], - ), - SizedBox( - height: 16.0, - ), - Row( - children: [ - Expanded( - child: Text( - _fileText, - style: TextStyle(fontSize: 12.0), - )) - ], - ), - SizedBox( - height: 16.0, - ), - Row( - mainAxisAlignment: MainAxisAlignment.start, - children: [ - Expanded( - child: Text( - 'Other Terms and Conditions', - textAlign: TextAlign.left, - style: TextStyle( - fontSize: 14.0, fontWeight: FontWeight.bold), + SizedBox( + height: 16.0, ), - ) - ], - ), - SizedBox( - height: 16.0, - ), - Row( - mainAxisAlignment: MainAxisAlignment.start, - children: [ - Expanded( - child: GestureDetector( - onTap: () => launchUrl(xmrtoUrl), - child: Text( - xmrtoUrl, - textAlign: TextAlign.left, - style: TextStyle( - color: Colors.blue, - fontSize: 14.0, - fontWeight: FontWeight.normal, - decoration: TextDecoration.underline), + Row( + children: [ + Expanded( + child: Text( + _fileText, + style: TextStyle( + fontSize: 12.0, + color: Colors.white + ), + )) + ], ), - )) - ], - ), - SizedBox( - height: 16.0, - ), - Row( - mainAxisAlignment: MainAxisAlignment.start, - children: [ - Expanded( - child: GestureDetector( - onTap: () => launchUrl(changenowUrl), - child: Text( - changenowUrl, - textAlign: TextAlign.left, - style: TextStyle( - color: Colors.blue, - fontSize: 14.0, - fontWeight: FontWeight.normal, - decoration: TextDecoration.underline), + SizedBox( + height: 16.0, ), - )) - ], - ), - SizedBox( - height: 16.0, + Row( + mainAxisAlignment: MainAxisAlignment.start, + children: [ + Expanded( + child: Text( + 'Other Terms and Conditions', + textAlign: TextAlign.left, + style: TextStyle( + fontSize: 14.0, + fontWeight: FontWeight.bold, + color: Colors.white + ), + ), + ) + ], + ), + SizedBox( + height: 16.0, + ), + Row( + mainAxisAlignment: MainAxisAlignment.start, + children: [ + Expanded( + child: GestureDetector( + onTap: () => launchUrl(xmrtoUrl), + child: Text( + xmrtoUrl, + textAlign: TextAlign.left, + style: TextStyle( + color: Colors.blue, + fontSize: 14.0, + fontWeight: FontWeight.normal, + decoration: TextDecoration.underline), + ), + )) + ], + ), + SizedBox( + height: 16.0, + ), + Row( + mainAxisAlignment: MainAxisAlignment.start, + children: [ + Expanded( + child: GestureDetector( + onTap: () => launchUrl(changenowUrl), + child: Text( + changenowUrl, + textAlign: TextAlign.left, + style: TextStyle( + color: Colors.blue, + fontSize: 14.0, + fontWeight: FontWeight.normal, + decoration: TextDecoration.underline), + ), + )) + ], + ), + SizedBox( + height: 16.0, + ), + Row( + mainAxisAlignment: MainAxisAlignment.start, + children: [ + Expanded( + child: GestureDetector( + onTap: () => launchUrl(morphUrl), + child: Text( + morphUrl, + textAlign: TextAlign.left, + style: TextStyle( + color: Colors.blue, + fontSize: 14.0, + fontWeight: FontWeight.normal, + decoration: TextDecoration.underline), + ), + )) + ], + ), + SizedBox( + height: 16.0, + ) + ], + ), ), - Row( - mainAxisAlignment: MainAxisAlignment.start, - children: [ - Expanded( - child: GestureDetector( - onTap: () => launchUrl(morphUrl), - child: Text( - morphUrl, - textAlign: TextAlign.left, - style: TextStyle( - color: Colors.blue, - fontSize: 14.0, - fontWeight: FontWeight.normal, - decoration: TextDecoration.underline), + Container( + alignment: Alignment.bottomCenter, + child: Container( + height: 12.0, + child: ClipRect( + child: BackdropFilter( + filter: ImageFilter.blur(sigmaX: 0.7, sigmaY: 0.7), + child: Container( + decoration: BoxDecoration( + gradient: LinearGradient( + colors: [ + PaletteDark.historyPanel.withOpacity(0.0), + PaletteDark.historyPanel, + ], + begin: FractionalOffset.topCenter, + end: FractionalOffset.bottomCenter, + ), ), - )) - ], - ), - SizedBox( - height: 16.0, + ), + ), + ), + ), ) ], - ), - ), - Container( - alignment: Alignment.bottomCenter, - child: Container( - height: 12.0, - child: ClipRect( - child: BackdropFilter( - filter: ImageFilter.blur(sigmaX: 0.7, sigmaY: 0.7), - child: Container( - decoration: BoxDecoration( - gradient: LinearGradient( - colors: [ - Theme.of(context).backgroundColor.withOpacity(0.0), - Theme.of(context).backgroundColor, + )), + if (!widget.isReadOnly) ...[ + !_isAccepted + ? Row( + children: [ + Expanded( + child: Container( + padding: EdgeInsets.only( + left: 24.0, top: 10.0, right: 24.0, bottom: 10.0), + child: InkWell( + onTap: () { + setState(() { + _checked = !_checked; + }); + }, + child: Row( + mainAxisAlignment: MainAxisAlignment.start, + children: [ + Container( + height: 24.0, + width: 24.0, + margin: EdgeInsets.only( + right: 10.0, + ), + decoration: BoxDecoration( + border: Border.all( + color: Palette.lightGrey, width: 1.0), + borderRadius: BorderRadius.all( + Radius.circular(8.0)), + color: PaletteDark.historyPanel), + child: _checked + ? Icon( + Icons.check, + color: Colors.blue, + size: 20.0, + ) + : null, + ), + Text( + 'I agree to Terms of Use', + style: TextStyle( + fontWeight: FontWeight.bold, + fontSize: 14.0, + color: Colors.white + ), + ) ], - begin: FractionalOffset.topCenter, - end: FractionalOffset.bottomCenter, ), - ), - ), - ), + )), ), + ], + ) + : Offstage(), + !_isAccepted + ? Container( + padding: + EdgeInsets.only(left: 24.0, right: 24.0, bottom: 24.0), + child: PrimaryButton( + onPressed: _checked ? () {} : null, + text: 'Accept', + color: Colors.green, + textColor: Colors.white, ), ) + : Offstage(), + _isAccepted + ? SizedBox( + height: 24.0, + ) + : Offstage() ], - )), - if (!widget.isReadOnly) ...[ - !_isAccepted - ? Row( - children: [ - Expanded( - child: Container( - padding: EdgeInsets.only( - left: 25.0, top: 10.0, right: 25.0, bottom: 10.0), - child: InkWell( - onTap: () { - setState(() { - _checked = !_checked; - }); - }, - child: Row( - mainAxisAlignment: MainAxisAlignment.start, - children: [ - Container( - height: 25.0, - width: 25.0, - margin: EdgeInsets.only( - right: 10.0, - ), - decoration: BoxDecoration( - border: Border.all( - color: Palette.lightGrey, width: 1.0), - borderRadius: BorderRadius.all( - Radius.circular(8.0)), - color: Theme.of(context).backgroundColor), - child: _checked - ? Icon( - Icons.check, - color: Colors.blue, - size: 20.0, - ) - : null, - ), - Text( - 'I agree to Terms of Use', - style: TextStyle( - fontWeight: FontWeight.bold, - fontSize: 14.0), - ) - ], - ), - )), - ), - ], - ) - : Offstage(), - !_isAccepted - ? Container( - padding: - EdgeInsets.only(left: 25.0, right: 25.0, bottom: 25.0), - child: PrimaryButton( - onPressed: _checked ? () {} : null, - text: 'Accept', - color: Theme.of(context) - .primaryTextTheme - .button - .backgroundColor, - textColor: Theme.of(context) - .primaryTextTheme - .button - .color, - ), - ) - : Offstage(), - _isAccepted - ? SizedBox( - height: 20.0, - ) - : Offstage() ], - ], + ), ); } } diff --git a/lib/src/screens/faq/faq_page.dart b/lib/src/screens/faq/faq_page.dart index b0c657eb..eb285b3b 100644 --- a/lib/src/screens/faq/faq_page.dart +++ b/lib/src/screens/faq/faq_page.dart @@ -1,11 +1,11 @@ import 'dart:convert'; -import 'package:cake_wallet/palette.dart'; import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; import 'package:provider/provider.dart'; import 'package:cake_wallet/generated/i18n.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'; class FaqPage extends BasePage { @override @@ -15,7 +15,23 @@ class FaqPage extends BasePage { Color get backgroundColor => PaletteDark.historyPanel; @override - Widget body(BuildContext context) { + Widget body(BuildContext context) => FaqForm(); +} + +class FaqForm extends StatefulWidget { + @override + FaqFormState createState() => FaqFormState(); +} + +class FaqFormState extends State { + final addIcon = Icon(Icons.add, color: Colors.white); + final removeIcon = Icon(Icons.remove, color: Colors.green); + List icons; + List colors; + bool isLoaded = false; + + @override + Widget build(BuildContext context) { return Container( color: PaletteDark.historyPanel, padding: EdgeInsets.only(top: 12), @@ -25,36 +41,79 @@ class FaqPage extends BasePage { 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(); + if (snapshot.hasData) { + setIconsAndColors(faqItems.length); + } + + return SingleChildScrollView( + child: ListView.separated( + shrinkWrap: true, + physics: NeverScrollableScrollPhysics(), + itemBuilder: (BuildContext context, int index) { + final itemTitle = faqItems[index]["question"].toString(); + final itemChild = faqItems[index]["answer"].toString(); - return ExpansionTile( - title: Padding( - padding: EdgeInsets.only(left: 8, top: 12, bottom: 12), - child: Text(itemTitle), - ), - backgroundColor: PaletteDark.menuHeader, - children: [ - 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, + return ExpansionTile( + title: Padding( + padding: EdgeInsets.only(left: 8, top: 12, bottom: 12), + child: Text( + itemTitle, + style: TextStyle( + fontSize: 14, + fontWeight: FontWeight.w600, + color: colors[index] + ), + ), + ), + trailing: Padding( + padding: EdgeInsets.only(right: 24), + child: Container( + width: double.minPositive, + child: Center( + child: icons[index] + ), + ), + ), + backgroundColor: PaletteDark.menuHeader, + onExpansionChanged: (value) { + setState(() { + if (value) { + icons[index] = removeIcon; + colors[index] = Colors.green; + } else { + icons[index] = addIcon; + colors[index] = Colors.white; + } + }); + }, + children: [ + Row( + mainAxisAlignment: MainAxisAlignment.start, + children: [ + Expanded( + child: Container( + padding: EdgeInsets.only( + left: 24.0, + right: 24.0, + bottom: 8 + ), + child: Text( + itemChild, + style: TextStyle( + fontSize: 12, + color: Colors.white + ), + ), + )) + ], + ) + ], + ); + }, + separatorBuilder: (_, __) => + Container(color: PaletteDark.mainBackgroundColor, height: 1.0), + itemCount: faqItems == null ? 0 : faqItems.length, + ), ); }, future: rootBundle.loadString(getFaqPath(context)), @@ -63,6 +122,17 @@ class FaqPage extends BasePage { ); } + void setIconsAndColors(int index) { + if (isLoaded) { + return; + } + + icons = List.generate(index, (int i) => addIcon); + colors = List.generate(index, (int i) => Colors.white); + + isLoaded = true; + } + String getFaqPath(BuildContext context) { final settingsStore = Provider.of(context); @@ -95,4 +165,4 @@ class FaqPage extends BasePage { return 'assets/faq/faq_en.json'; } } -} +} \ No newline at end of file