CWA-216 | applied new design to disclaimer page and faq page

wownero
Oleksandr Sobol 4 years ago
parent 1bed82327b
commit 2356cda879

@ -6,6 +6,8 @@ import 'package:cake_wallet/palette.dart';
import 'package:url_launcher/url_launcher.dart'; import 'package:url_launcher/url_launcher.dart';
import 'package:cake_wallet/src/screens/base_page.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/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 { class DisclaimerPage extends BasePage {
DisclaimerPage({this.isReadOnly = false}); DisclaimerPage({this.isReadOnly = false});
@ -13,7 +15,7 @@ class DisclaimerPage extends BasePage {
final bool isReadOnly; final bool isReadOnly;
@override @override
bool get isModalBackButton => false; Color get backgroundColor => PaletteDark.historyPanel;
@override @override
String get title => 'Terms of Use'; String get title => 'Terms of Use';
@ -34,7 +36,7 @@ class DisclaimerPageBody extends StatefulWidget {
class DisclaimerBodyState extends State<DisclaimerPageBody> { class DisclaimerBodyState extends State<DisclaimerPageBody> {
DisclaimerBodyState(this._isAccepted); 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 changenowUrl = 'https://changenow.io/terms-of-use';
static const morphUrl = 'http://morphtoken.com/terms'; static const morphUrl = 'http://morphtoken.com/terms';
@ -55,22 +57,11 @@ class DisclaimerBodyState extends State<DisclaimerPageBody> {
await showDialog<void>( await showDialog<void>(
context: context, context: context,
builder: (BuildContext context) { builder: (BuildContext context) {
return AlertDialog( return AlertWithOneAction(
title: Text( alertTitle: 'Terms and conditions',
'Terms and conditions', alertContent: 'By using this app, you agree to the Terms of Agreement set forth to below',
textAlign: TextAlign.center, buttonText: S.of(context).ok,
), buttonAction: () => Navigator.of(context).pop()
content: Text(
'By using this app, you agree to the Terms of Agreement set forth to below',
textAlign: TextAlign.center,
),
actions: <Widget>[
FlatButton(
onPressed: () {
Navigator.of(context).pop();
},
child: Text('OK')),
],
); );
}); });
} }
@ -86,245 +77,255 @@ class DisclaimerBodyState extends State<DisclaimerPageBody> {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Column( return Container(
children: <Widget>[ color: PaletteDark.historyPanel,
SizedBox(height: 10.0), child: Column(
Expanded( children: <Widget>[
child: Stack( SizedBox(height: 10.0),
children: <Widget>[ Expanded(
SingleChildScrollView( child: Stack(
padding: EdgeInsets.only(left: 25.0, right: 25.0),
child: Column(
children: <Widget>[ children: <Widget>[
!_isAccepted SingleChildScrollView(
? Row( padding: EdgeInsets.only(left: 24.0, right: 24.0),
child: Column(
children: <Widget>[
!_isAccepted
? Row(
children: <Widget>[ children: <Widget>[
Expanded( Expanded(
child: Text( child: Text(
'Terms and conditions', 'Terms and conditions',
textAlign: TextAlign.center, textAlign: TextAlign.center,
style: TextStyle( style: TextStyle(
fontSize: 20.0, fontSize: 20.0,
fontWeight: FontWeight.bold), fontWeight: FontWeight.bold,
color: Colors.white
),
), ),
) )
], ],
) )
: Offstage(), : Offstage(),
!_isAccepted !_isAccepted
? SizedBox( ? SizedBox(
height: 20.0, height: 20.0,
) )
: Offstage(), : Offstage(),
Row( Row(
children: <Widget>[ children: <Widget>[
Expanded( Expanded(
child: Text( child: Text(
'Legal Disclaimer\nAnd\nTerms of Use', 'Legal Disclaimer\nAnd\nTerms of Use',
textAlign: TextAlign.center, textAlign: TextAlign.center,
style: TextStyle( style: TextStyle(
fontSize: 12.0, fontWeight: FontWeight.bold), fontSize: 12.0,
fontWeight: FontWeight.bold,
color: Colors.white
),
),
)
],
), ),
) SizedBox(
], height: 16.0,
),
SizedBox(
height: 16.0,
),
Row(
children: <Widget>[
Expanded(
child: Text(
_fileText,
style: TextStyle(fontSize: 12.0),
))
],
),
SizedBox(
height: 16.0,
),
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Expanded(
child: Text(
'Other Terms and Conditions',
textAlign: TextAlign.left,
style: TextStyle(
fontSize: 14.0, fontWeight: FontWeight.bold),
), ),
) Row(
], children: <Widget>[
), Expanded(
SizedBox( child: Text(
height: 16.0, _fileText,
), style: TextStyle(
Row( fontSize: 12.0,
mainAxisAlignment: MainAxisAlignment.start, color: Colors.white
children: <Widget>[ ),
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,
),
SizedBox(
height: 16.0,
),
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
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),
), ),
)) Row(
], mainAxisAlignment: MainAxisAlignment.start,
), children: <Widget>[
SizedBox( Expanded(
height: 16.0, 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: <Widget>[
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: <Widget>[
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: <Widget>[
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( Container(
mainAxisAlignment: MainAxisAlignment.start, alignment: Alignment.bottomCenter,
children: <Widget>[ child: Container(
Expanded( height: 12.0,
child: GestureDetector( child: ClipRect(
onTap: () => launchUrl(morphUrl), child: BackdropFilter(
child: Text( filter: ImageFilter.blur(sigmaX: 0.7, sigmaY: 0.7),
morphUrl, child: Container(
textAlign: TextAlign.left, decoration: BoxDecoration(
style: TextStyle( gradient: LinearGradient(
color: Colors.blue, colors: [
fontSize: 14.0, PaletteDark.historyPanel.withOpacity(0.0),
fontWeight: FontWeight.normal, PaletteDark.historyPanel,
decoration: TextDecoration.underline), ],
begin: FractionalOffset.topCenter,
end: FractionalOffset.bottomCenter,
),
), ),
)) ),
], ),
), ),
SizedBox( ),
height: 16.0,
) )
], ],
), )),
), if (!widget.isReadOnly) ...[
Container( !_isAccepted
alignment: Alignment.bottomCenter, ? Row(
child: Container( children: <Widget>[
height: 12.0, Expanded(
child: ClipRect( child: Container(
child: BackdropFilter( padding: EdgeInsets.only(
filter: ImageFilter.blur(sigmaX: 0.7, sigmaY: 0.7), left: 24.0, top: 10.0, right: 24.0, bottom: 10.0),
child: Container( child: InkWell(
decoration: BoxDecoration( onTap: () {
gradient: LinearGradient( setState(() {
colors: [ _checked = !_checked;
Theme.of(context).backgroundColor.withOpacity(0.0), });
Theme.of(context).backgroundColor, },
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
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: <Widget>[
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: <Widget>[
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()
], ],
], ),
); );
} }
} }

@ -1,11 +1,11 @@
import 'dart:convert'; import 'dart:convert';
import 'package:cake_wallet/palette.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter/services.dart'; import 'package:flutter/services.dart';
import 'package:provider/provider.dart'; import 'package:provider/provider.dart';
import 'package:cake_wallet/generated/i18n.dart'; import 'package:cake_wallet/generated/i18n.dart';
import 'package:cake_wallet/src/stores/settings/settings_store.dart'; import 'package:cake_wallet/src/stores/settings/settings_store.dart';
import 'package:cake_wallet/src/screens/base_page.dart'; import 'package:cake_wallet/src/screens/base_page.dart';
import 'package:cake_wallet/palette.dart';
class FaqPage extends BasePage { class FaqPage extends BasePage {
@override @override
@ -15,7 +15,23 @@ class FaqPage extends BasePage {
Color get backgroundColor => PaletteDark.historyPanel; Color get backgroundColor => PaletteDark.historyPanel;
@override @override
Widget body(BuildContext context) { Widget body(BuildContext context) => FaqForm();
}
class FaqForm extends StatefulWidget {
@override
FaqFormState createState() => FaqFormState();
}
class FaqFormState extends State<FaqForm> {
final addIcon = Icon(Icons.add, color: Colors.white);
final removeIcon = Icon(Icons.remove, color: Colors.green);
List<Icon> icons;
List<Color> colors;
bool isLoaded = false;
@override
Widget build(BuildContext context) {
return Container( return Container(
color: PaletteDark.historyPanel, color: PaletteDark.historyPanel,
padding: EdgeInsets.only(top: 12), padding: EdgeInsets.only(top: 12),
@ -25,36 +41,79 @@ class FaqPage extends BasePage {
builder: (context, snapshot) { builder: (context, snapshot) {
final faqItems = jsonDecode(snapshot.data.toString()) as List; final faqItems = jsonDecode(snapshot.data.toString()) as List;
return ListView.separated( if (snapshot.hasData) {
itemBuilder: (BuildContext context, int index) { setIconsAndColors(faqItems.length);
final itemTitle = faqItems[index]["question"].toString(); }
final itemChild = faqItems[index]["answer"].toString();
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( return ExpansionTile(
title: Padding( title: Padding(
padding: EdgeInsets.only(left: 8, top: 12, bottom: 12), padding: EdgeInsets.only(left: 8, top: 12, bottom: 12),
child: Text(itemTitle), child: Text(
), itemTitle,
backgroundColor: PaletteDark.menuHeader, style: TextStyle(
children: <Widget>[ fontSize: 14,
Row( fontWeight: FontWeight.w600,
mainAxisAlignment: MainAxisAlignment.start, color: colors[index]
children: <Widget>[ ),
Expanded( ),
child: Container( ),
padding: EdgeInsets.only(left: 24.0, right: 24.0, bottom: 4), trailing: Padding(
child: Text( padding: EdgeInsets.only(right: 24),
itemChild, child: Container(
), width: double.minPositive,
)) child: Center(
], child: icons[index]
) ),
], ),
); ),
}, backgroundColor: PaletteDark.menuHeader,
separatorBuilder: (_, __) => onExpansionChanged: (value) {
Divider(color: PaletteDark.mainBackgroundColor, height: 1.0), setState(() {
itemCount: faqItems == null ? 0 : faqItems.length, if (value) {
icons[index] = removeIcon;
colors[index] = Colors.green;
} else {
icons[index] = addIcon;
colors[index] = Colors.white;
}
});
},
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
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)), 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) { String getFaqPath(BuildContext context) {
final settingsStore = Provider.of<SettingsStore>(context); final settingsStore = Provider.of<SettingsStore>(context);
@ -95,4 +165,4 @@ class FaqPage extends BasePage {
return 'assets/faq/faq_en.json'; return 'assets/faq/faq_en.json';
} }
} }
} }
Loading…
Cancel
Save