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: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<DisclaimerPageBody> {
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<DisclaimerPageBody> {
await showDialog<void>(
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: <Widget>[
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<DisclaimerPageBody> {
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
SizedBox(height: 10.0),
Expanded(
child: Stack(
children: <Widget>[
SingleChildScrollView(
padding: EdgeInsets.only(left: 25.0, right: 25.0),
child: Column(
return Container(
color: PaletteDark.historyPanel,
child: Column(
children: <Widget>[
SizedBox(height: 10.0),
Expanded(
child: Stack(
children: <Widget>[
!_isAccepted
? Row(
SingleChildScrollView(
padding: EdgeInsets.only(left: 24.0, right: 24.0),
child: Column(
children: <Widget>[
!_isAccepted
? Row(
children: <Widget>[
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: <Widget>[
Expanded(
child: Text(
'Legal Disclaimer\nAnd\nTerms of Use',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 12.0, fontWeight: FontWeight.bold),
: Offstage(),
Row(
children: <Widget>[
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: <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),
SizedBox(
height: 16.0,
),
)
],
),
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),
Row(
children: <Widget>[
Expanded(
child: Text(
_fileText,
style: TextStyle(
fontSize: 12.0,
color: Colors.white
),
))
],
),
))
],
),
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,
),
))
],
),
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,
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(
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),
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: <Widget>[
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: <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 '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<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(
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: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
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: <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)),
@ -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<SettingsStore>(context);
@ -95,4 +165,4 @@ class FaqPage extends BasePage {
return 'assets/faq/faq_en.json';
}
}
}
}
Loading…
Cancel
Save