CAKE-28 | applied light theme to exchange and exchange template pages; changed base exchange widget, exchange card, present provider picker and trail button

Oleksandr Sobol committed Aug 21, 2020 at 23:26 UTC 40aeacfb4b2497304ab7533b24d6d6e4ce10588b
8 files changed +369 -259
lib/palette.dart
+2
@@ -30,6 +30,7 @@ class Palette {
30 static const Color wildPeriwinkle = Color.fromRGBO(219, 227, 243, 1.0);
31 static const Color darkGray = Color.fromRGBO(122, 147, 186, 1.0);
32 static const Color shadowWhite = Color.fromRGBO(242, 245, 255, 1.0);
33 + static const Color niagara = Color.fromRGBO(152, 172, 201, 1.0);
34
35 // FIXME: Rename.
36 static const Color eee = Color.fromRGBO(236, 239, 245, 1.0);
@@ -77,6 +78,7 @@ class PaletteDark {
78 static const Color dividerColor = Color.fromRGBO(48, 59, 95, 1.0);
79 static const Color violetBlue = Color.fromRGBO(59, 72, 119, 1.0);
80 static const Color distantBlue = Color.fromRGBO(72, 85, 131, 1.0);
81 + static const Color moderateVioletBlue = Color.fromRGBO(62, 73, 113, 1.0);
82
83 // FIXME: Rename.
84 static const Color eee = Color.fromRGBO(236, 239, 245, 1.0);
lib/src/screens/exchange/exchange_page.dart
+22 -3
@@ -18,10 +18,13 @@ class ExchangePage extends BasePage {
18 String get title => S.current.exchange;
19
20 @override
21 - Color get backgroundLightColor => PaletteDark.wildVioletBlue;
21 + Color get titleColor => Colors.white;
22
23 @override
24 - Color get backgroundDarkColor => PaletteDark.wildVioletBlue;
24 + Color get backgroundLightColor => Colors.transparent;
25 +
26 + @override
27 + Color get backgroundDarkColor => Colors.transparent;
28
29 @override
30 Widget middle(BuildContext context) =>
@@ -36,5 +39,21 @@ class ExchangePage extends BasePage {
39
40 @override
41 Widget body(BuildContext context) =>
39 - BaseExchangeWidget(exchangeViewModel: exchangeViewModel);
42 + BaseExchangeWidget(
43 + exchangeViewModel: exchangeViewModel,
44 + leading: leading(context),
45 + middle: middle(context),
46 + trailing: trailing(context),
47 + );
48 +
49 + @override
50 + Widget build(BuildContext context) {
51 + return Scaffold(
52 + resizeToAvoidBottomPadding: resizeToAvoidBottomPadding,
53 + body: Container(
54 + color: Theme.of(context).backgroundColor,
55 + child: body(context)
56 + )
57 + );
58 + }
59 }
lib/src/screens/exchange/exchange_template_page.dart
+23 -4
@@ -1,7 +1,6 @@
1 import 'dart:ui';
2 import 'package:flutter/cupertino.dart';
3 import 'package:flutter/material.dart';
4 -import 'package:cake_wallet/palette.dart';
4 import 'package:cake_wallet/src/screens/base_page.dart';
5 import 'package:cake_wallet/src/screens/exchange/widgets/present_provider_picker.dart';
6 import 'package:cake_wallet/src/screens/exchange/widgets/base_exchange_widget.dart';
@@ -17,10 +16,13 @@ class ExchangeTemplatePage extends BasePage {
16 String get title => S.current.exchange_new_template;
17
18 @override
20 - Color get backgroundLightColor => PaletteDark.wildVioletBlue;
19 + Color get titleColor => Colors.white;
20
21 @override
23 - Color get backgroundDarkColor => PaletteDark.wildVioletBlue;
22 + Color get backgroundLightColor => Colors.transparent;
23 +
24 + @override
25 + Color get backgroundDarkColor => Colors.transparent;
26
27 @override
28 Widget trailing(BuildContext context) =>
@@ -28,5 +30,22 @@ class ExchangeTemplatePage extends BasePage {
30
31 @override
32 Widget body(BuildContext context) =>
31 - BaseExchangeWidget(exchangeViewModel: exchangeViewModel, isTemplate: true);
33 + BaseExchangeWidget(
34 + exchangeViewModel: exchangeViewModel,
35 + leading: leading(context),
36 + middle: middle(context),
37 + trailing: trailing(context),
38 + isTemplate: true
39 + );
40 +
41 + @override
42 + Widget build(BuildContext context) {
43 + return Scaffold(
44 + resizeToAvoidBottomPadding: resizeToAvoidBottomPadding,
45 + body: Container(
46 + color: Theme.of(context).backgroundColor,
47 + child: body(context)
48 + )
49 + );
50 + }
51 }
\ No newline at end of file
lib/src/screens/exchange/widgets/base_exchange_widget.dart
+266 -226
@@ -26,16 +26,25 @@ import 'package:cake_wallet/core/amount_validator.dart';
26 class BaseExchangeWidget extends StatefulWidget {
27 BaseExchangeWidget({
28 @ required this.exchangeViewModel,
29 + this.leading,
30 + this.middle,
31 + this.trailing,
32 this.isTemplate = false,
33 });
34
35 final ExchangeViewModel exchangeViewModel;
36 + final Widget leading;
37 + final Widget middle;
38 + final Widget trailing;
39 final bool isTemplate;
40
41 @override
42 BaseExchangeWidgetState createState() =>
43 BaseExchangeWidgetState(
44 exchangeViewModel: exchangeViewModel,
45 + leading: leading,
46 + middle: middle,
47 + trailing: trailing,
48 isTemplate: isTemplate
49 );
50 }
@@ -43,11 +52,18 @@ class BaseExchangeWidget extends StatefulWidget {
52 class BaseExchangeWidgetState extends State<BaseExchangeWidget> {
53 BaseExchangeWidgetState({
54 @ required this.exchangeViewModel,
55 + @ required this.leading,
56 + @ required this.middle,
57 + @ required this.trailing,
58 @ required this.isTemplate,
59 });
60
61 final ExchangeViewModel exchangeViewModel;
62 + final Widget leading;
63 + final Widget middle;
64 + final Widget trailing;
65 final bool isTemplate;
66 + final double topPanelHeight = 290;
67
68 final depositKey = GlobalKey<ExchangeCardState>();
69 final receiveKey = GlobalKey<ExchangeCardState>();
@@ -79,249 +95,273 @@ class BaseExchangeWidgetState extends State<BaseExchangeWidget> {
95 WidgetsBinding.instance.addPostFrameCallback(
96 (_) => _setReactions(context, exchangeViewModel));
97
82 - return Container(
83 - color: PaletteDark.backgroundColor,
84 - child: Form(
85 - key: _formKey,
86 - child: ScrollableWithBottomSection(
87 - contentPadding: EdgeInsets.only(bottom: 24),
88 - content: Column(
89 - children: <Widget>[
90 - TopPanel(
91 - color: PaletteDark.darkNightBlue,
92 - edgeInsets: EdgeInsets.only(bottom: 32),
93 - widget: Column(
94 - children: <Widget>[
95 - TopPanel(
96 - edgeInsets: EdgeInsets.fromLTRB(24, 29, 24, 32),
97 - color: PaletteDark.wildVioletBlue,
98 - widget: Observer(
99 - builder: (_) => ExchangeCard(
100 - key: depositKey,
101 - title: S.of(context).you_will_send,
102 - initialCurrency: exchangeViewModel.depositCurrency,
103 - initialWalletName: depositWalletName,
104 - initialAddress:
105 - exchangeViewModel.depositCurrency == exchangeViewModel.wallet.currency
106 - ? exchangeViewModel.wallet.address
107 - : exchangeViewModel.depositAddress,
108 - initialIsAmountEditable: true,
109 - initialIsAddressEditable: exchangeViewModel.isDepositAddressEnabled,
110 - isAmountEstimated: false,
111 - currencies: CryptoCurrency.all,
112 - onCurrencySelected: (currency) =>
113 - exchangeViewModel.changeDepositCurrency(currency: currency),
114 - imageArrow: arrowBottomPurple,
115 - currencyButtonColor: PaletteDark.wildVioletBlue,
116 - addressButtonsColor: PaletteDark.moderateBlue,
117 - currencyValueValidator: AmountValidator(
118 - type: exchangeViewModel.wallet.type),
119 - addressTextFieldValidator: AddressValidator(
120 - type: exchangeViewModel.depositCurrency),
121 - ),
122 - )
123 - ),
124 - Padding(
125 - padding: EdgeInsets.only(top: 29, left: 24, right: 24),
126 - child: Observer(
127 - builder: (_) => ExchangeCard(
128 - key: receiveKey,
129 - title: S.of(context).you_will_get,
130 - initialCurrency: exchangeViewModel.receiveCurrency,
131 - initialWalletName: receiveWalletName,
132 - initialAddress:
133 - exchangeViewModel.receiveCurrency == exchangeViewModel.wallet.currency
134 - ? exchangeViewModel.wallet.address
135 - : exchangeViewModel.receiveAddress,
136 - initialIsAmountEditable: false,
137 - initialIsAddressEditable: exchangeViewModel.isReceiveAddressEnabled,
138 - isAmountEstimated: true,
139 - currencies: CryptoCurrency.all,
140 - onCurrencySelected: (currency) => exchangeViewModel
141 - .changeReceiveCurrency(currency: currency),
142 - imageArrow: arrowBottomCakeGreen,
143 - currencyButtonColor: PaletteDark.darkNightBlue,
144 - addressButtonsColor: PaletteDark.moderateBlue,
145 - currencyValueValidator: AmountValidator(
146 - type: exchangeViewModel.wallet.type),
147 - addressTextFieldValidator: AddressValidator(
148 - type: exchangeViewModel.receiveCurrency),
149 - )),
150 - )
151 - ],
152 - )
153 - ),
154 - isTemplate
155 - ? Offstage()
156 - : Padding(
157 - padding: EdgeInsets.only(
158 - top: 30,
159 - left: 24,
160 - bottom: 24
161 - ),
162 - child: Row(
163 - mainAxisAlignment: MainAxisAlignment.start,
98 + return Form(
99 + key: _formKey,
100 + child: ScrollableWithBottomSection(
101 + contentPadding: EdgeInsets.only(bottom: 24),
102 + content: Column(
103 + children: <Widget>[
104 + TopPanel(
105 + gradient: LinearGradient(colors: [
106 + Theme.of(context).primaryTextTheme.body1.color,
107 + Theme.of(context).primaryTextTheme.body1.decorationColor,
108 + ],
109 + stops: [0.35, 1.0],
110 + begin: Alignment.topLeft,
111 + end: Alignment.bottomRight),
112 + edgeInsets: EdgeInsets.only(bottom: 32),
113 + widget: Column(
114 children: <Widget>[
165 - Text(
166 - S.of(context).send_templates,
167 - style: TextStyle(
168 - fontSize: 18,
169 - fontWeight: FontWeight.w600,
170 - color: PaletteDark.darkCyanBlue
171 - ),
115 + TopPanel(
116 + edgeInsets: EdgeInsets.all(0),
117 + gradient: LinearGradient(colors: [
118 + Theme.of(context).primaryTextTheme.subtitle.color,
119 + Theme.of(context).primaryTextTheme.subtitle.decorationColor,
120 + ],
121 + begin: Alignment.topLeft,
122 + end: Alignment.bottomRight),
123 + widget: Column(
124 + children: <Widget>[
125 + CupertinoNavigationBar(
126 + leading: leading,
127 + middle: middle,
128 + trailing: trailing,
129 + backgroundColor: Colors.transparent,
130 + border: null,
131 + ),
132 + Padding(
133 + padding: EdgeInsets.fromLTRB(24, 29, 24, 32),
134 + child: Observer(
135 + builder: (_) => ExchangeCard(
136 + key: depositKey,
137 + title: S.of(context).you_will_send,
138 + initialCurrency: exchangeViewModel.depositCurrency,
139 + initialWalletName: depositWalletName,
140 + initialAddress:
141 + exchangeViewModel.depositCurrency == exchangeViewModel.wallet.currency
142 + ? exchangeViewModel.wallet.address
143 + : exchangeViewModel.depositAddress,
144 + initialIsAmountEditable: true,
145 + initialIsAddressEditable: exchangeViewModel.isDepositAddressEnabled,
146 + isAmountEstimated: false,
147 + currencies: CryptoCurrency.all,
148 + onCurrencySelected: (currency) =>
149 + exchangeViewModel.changeDepositCurrency(currency: currency),
150 + imageArrow: arrowBottomPurple,
151 + currencyButtonColor: Colors.transparent,
152 + addressButtonsColor: Theme.of(context).focusColor,
153 + borderColor: Theme.of(context).primaryTextTheme.body2.color,
154 + currencyValueValidator: AmountValidator(
155 + type: exchangeViewModel.wallet.type),
156 + addressTextFieldValidator: AddressValidator(
157 + type: exchangeViewModel.depositCurrency),
158 + ),
159 + ),
160 + )
161 + ],
162 + )
163 + ),
164 + Padding(
165 + padding: EdgeInsets.only(top: 29, left: 24, right: 24),
166 + child: Observer(
167 + builder: (_) => ExchangeCard(
168 + key: receiveKey,
169 + title: S.of(context).you_will_get,
170 + initialCurrency: exchangeViewModel.receiveCurrency,
171 + initialWalletName: receiveWalletName,
172 + initialAddress:
173 + exchangeViewModel.receiveCurrency == exchangeViewModel.wallet.currency
174 + ? exchangeViewModel.wallet.address
175 + : exchangeViewModel.receiveAddress,
176 + initialIsAmountEditable: false,
177 + initialIsAddressEditable: exchangeViewModel.isReceiveAddressEnabled,
178 + isAmountEstimated: true,
179 + currencies: CryptoCurrency.all,
180 + onCurrencySelected: (currency) => exchangeViewModel
181 + .changeReceiveCurrency(currency: currency),
182 + imageArrow: arrowBottomCakeGreen,
183 + currencyButtonColor: Colors.transparent,
184 + addressButtonsColor: Theme.of(context).focusColor,
185 + borderColor: Theme.of(context).primaryTextTheme.body2.decorationColor,
186 + currencyValueValidator: AmountValidator(
187 + type: exchangeViewModel.wallet.type),
188 + addressTextFieldValidator: AddressValidator(
189 + type: exchangeViewModel.receiveCurrency),
190 + )),
191 )
192 ],
174 - ),
193 + )
194 + ),
195 + isTemplate
196 + ? Offstage()
197 + : Padding(
198 + padding: EdgeInsets.only(
199 + top: 30,
200 + left: 24,
201 + bottom: 24
202 ),
176 - isTemplate
177 - ? Offstage()
178 - : Container(
203 + child: Row(
204 + mainAxisAlignment: MainAxisAlignment.start,
205 + children: <Widget>[
206 + Text(
207 + S.of(context).send_templates,
208 + style: TextStyle(
209 + fontSize: 18,
210 + fontWeight: FontWeight.w600,
211 + color: Theme.of(context).primaryTextTheme.display4.color
212 + ),
213 + )
214 + ],
215 + ),
216 + ),
217 + isTemplate
218 + ? Offstage()
219 + : Container(
220 height: 40,
221 width: double.infinity,
222 padding: EdgeInsets.only(left: 24),
223 child: SingleChildScrollView(
183 - scrollDirection: Axis.horizontal,
184 - child: Row(
185 - children: <Widget>[
186 - GestureDetector(
187 - onTap: () => Navigator.of(context)
188 - .pushNamed(Routes.exchangeTemplate),
189 - child: Container(
190 - padding: EdgeInsets.only(left: 1, right: 10),
191 - child: DottedBorder(
192 - borderType: BorderType.RRect,
193 - dashPattern: [6, 4],
194 - color: PaletteDark.darkCyanBlue,
195 - strokeWidth: 2,
196 - radius: Radius.circular(20),
197 - child: Container(
198 - height: 34,
199 - width: 75,
200 - padding: EdgeInsets.only(left: 10, right: 10),
201 - alignment: Alignment.center,
202 - decoration: BoxDecoration(
203 - borderRadius: BorderRadius.all(Radius.circular(20)),
204 - color: Colors.transparent,
205 - ),
206 - child: Text(
207 - S.of(context).send_new,
208 - style: TextStyle(
209 - fontSize: 14,
210 - fontWeight: FontWeight.w600,
211 - color: PaletteDark.darkCyanBlue
224 + scrollDirection: Axis.horizontal,
225 + child: Row(
226 + children: <Widget>[
227 + GestureDetector(
228 + onTap: () => Navigator.of(context)
229 + .pushNamed(Routes.exchangeTemplate),
230 + child: Container(
231 + padding: EdgeInsets.only(left: 1, right: 10),
232 + child: DottedBorder(
233 + borderType: BorderType.RRect,
234 + dashPattern: [6, 4],
235 + color: Theme.of(context).primaryTextTheme.display2.decorationColor,
236 + strokeWidth: 2,
237 + radius: Radius.circular(20),
238 + child: Container(
239 + height: 34,
240 + width: 75,
241 + padding: EdgeInsets.only(left: 10, right: 10),
242 + alignment: Alignment.center,
243 + decoration: BoxDecoration(
244 + borderRadius: BorderRadius.all(Radius.circular(20)),
245 + color: Colors.transparent,
246 ),
213 - ),
214 - )
247 + child: Text(
248 + S.of(context).send_new,
249 + style: TextStyle(
250 + fontSize: 14,
251 + fontWeight: FontWeight.w600,
252 + color: Theme.of(context).primaryTextTheme.display3.color
253 + ),
254 + ),
255 + )
256 + ),
257 ),
258 ),
217 - ),
218 - Observer(
219 - builder: (_) {
220 - final templates = exchangeViewModel.templates;
221 - final itemCount = exchangeViewModel.templates.length;
222 -
223 - return ListView.builder(
224 - scrollDirection: Axis.horizontal,
225 - shrinkWrap: true,
226 - physics: NeverScrollableScrollPhysics(),
227 - itemCount: itemCount,
228 - itemBuilder: (context, index) {
229 - final template = templates[index];
230 -
231 - return TemplateTile(
232 - key: UniqueKey(),
233 - amount: template.amount,
234 - from: template.depositCurrency,
235 - to: template.receiveCurrency,
236 - onTap: () {
237 - applyTemplate(exchangeViewModel, template);
238 - },
239 - onRemove: () {
240 - showDialog<void>(
241 - context: context,
242 - builder: (dialogContext) {
243 - return AlertWithTwoActions(
244 - alertTitle: S.of(context).template,
245 - alertContent: S.of(context).confirm_delete_template,
246 - leftButtonText: S.of(context).delete,
247 - rightButtonText: S.of(context).cancel,
248 - actionLeftButton: () {
249 - Navigator.of(dialogContext).pop();
250 - exchangeViewModel.exchangeTemplateStore.remove(template: template);
251 - exchangeViewModel.exchangeTemplateStore.update();
252 - },
253 - actionRightButton: () => Navigator.of(dialogContext).pop()
254 - );
255 - }
256 - );
257 - },
258 - );
259 - }
260 - );
261 - }
262 - ),
263 - ],
264 - )
259 + Observer(
260 + builder: (_) {
261 + final templates = exchangeViewModel.templates;
262 + final itemCount = exchangeViewModel.templates.length;
263 +
264 + return ListView.builder(
265 + scrollDirection: Axis.horizontal,
266 + shrinkWrap: true,
267 + physics: NeverScrollableScrollPhysics(),
268 + itemCount: itemCount,
269 + itemBuilder: (context, index) {
270 + final template = templates[index];
271 +
272 + return TemplateTile(
273 + key: UniqueKey(),
274 + amount: template.amount,
275 + from: template.depositCurrency,
276 + to: template.receiveCurrency,
277 + onTap: () {
278 + applyTemplate(exchangeViewModel, template);
279 + },
280 + onRemove: () {
281 + showDialog<void>(
282 + context: context,
283 + builder: (dialogContext) {
284 + return AlertWithTwoActions(
285 + alertTitle: S.of(context).template,
286 + alertContent: S.of(context).confirm_delete_template,
287 + leftButtonText: S.of(context).delete,
288 + rightButtonText: S.of(context).cancel,
289 + actionLeftButton: () {
290 + Navigator.of(dialogContext).pop();
291 + exchangeViewModel.exchangeTemplateStore.remove(template: template);
292 + exchangeViewModel.exchangeTemplateStore.update();
293 + },
294 + actionRightButton: () => Navigator.of(dialogContext).pop()
295 + );
296 + }
297 + );
298 + },
299 + );
300 + }
301 + );
302 + }
303 + ),
304 + ],
305 + )
306 )
266 - )
267 - ],
268 - ),
269 - bottomSectionPadding: EdgeInsets.only(left: 24, right: 24, bottom: 24),
270 - bottomSection: Column(children: <Widget>[
271 - Padding(
272 - padding: EdgeInsets.only(bottom: 15),
273 - child: Observer(builder: (_) {
274 - final description =
275 - exchangeViewModel.provider is XMRTOExchangeProvider
276 - ? S.of(context).amount_is_guaranteed
277 - : S.of(context).amount_is_estimate;
278 - return Center(
279 - child: Text(
280 - description,
281 - style: TextStyle(
282 - color: PaletteDark.darkCyanBlue,
283 - fontWeight: FontWeight.w500,
284 - fontSize: 12
285 - ),
307 + )
308 + ],
309 + ),
310 + bottomSectionPadding: EdgeInsets.only(left: 24, right: 24, bottom: 24),
311 + bottomSection: Column(children: <Widget>[
312 + Padding(
313 + padding: EdgeInsets.only(bottom: 15),
314 + child: Observer(builder: (_) {
315 + final description =
316 + exchangeViewModel.provider is XMRTOExchangeProvider
317 + ? S.of(context).amount_is_guaranteed
318 + : S.of(context).amount_is_estimate;
319 + return Center(
320 + child: Text(
321 + description,
322 + style: TextStyle(
323 + color: Theme.of(context).primaryTextTheme.display4.decorationColor,
324 + fontWeight: FontWeight.w500,
325 + fontSize: 12
326 ),
287 - );
288 - }),
289 - ),
290 - isTemplate
291 - ? PrimaryButton(
327 + ),
328 + );
329 + }),
330 + ),
331 + isTemplate
332 + ? PrimaryButton(
333 + onPressed: () {
334 + if (_formKey.currentState.validate()) {
335 + exchangeViewModel.exchangeTemplateStore.addTemplate(
336 + amount: exchangeViewModel.depositAmount,
337 + depositCurrency: exchangeViewModel.depositCurrency.toString(),
338 + receiveCurrency: exchangeViewModel.receiveCurrency.toString(),
339 + provider: exchangeViewModel.provider.toString(),
340 + depositAddress: exchangeViewModel.depositAddress,
341 + receiveAddress: exchangeViewModel.receiveAddress
342 + );
343 + exchangeViewModel.exchangeTemplateStore.update();
344 + Navigator.of(context).pop();
345 + }
346 + },
347 + text: S.of(context).save,
348 + color: Colors.green,
349 + textColor: Colors.white
350 + )
351 + : Observer(
352 + builder: (_) => LoadingPrimaryButton(
353 + text: S.of(context).exchange,
354 onPressed: () {
355 if (_formKey.currentState.validate()) {
294 - exchangeViewModel.exchangeTemplateStore.addTemplate(
295 - amount: exchangeViewModel.depositAmount,
296 - depositCurrency: exchangeViewModel.depositCurrency.toString(),
297 - receiveCurrency: exchangeViewModel.receiveCurrency.toString(),
298 - provider: exchangeViewModel.provider.toString(),
299 - depositAddress: exchangeViewModel.depositAddress,
300 - receiveAddress: exchangeViewModel.receiveAddress
301 - );
302 - exchangeViewModel.exchangeTemplateStore.update();
303 - Navigator.of(context).pop();
356 + exchangeViewModel.createTrade();
357 }
358 },
306 - text: S.of(context).save,
307 - color: Colors.green,
308 - textColor: Colors.white
309 - )
310 - : Observer(
311 - builder: (_) => LoadingPrimaryButton(
312 - text: S.of(context).exchange,
313 - onPressed: () {
314 - if (_formKey.currentState.validate()) {
315 - exchangeViewModel.createTrade();
316 - }
317 - },
318 - color: Colors.blue,
319 - textColor: Colors.white,
320 - isLoading: exchangeViewModel.tradeState is TradeIsCreating,
321 - )),
322 - ]),
323 - )),
324 - );
359 + color: Palette.blueCraiola,
360 + textColor: Colors.white,
361 + isLoading: exchangeViewModel.tradeState is TradeIsCreating,
362 + )),
363 + ]),
364 + ));
365 }
366
367 void applyTemplate(ExchangeViewModel exchangeViewModel,
lib/src/screens/exchange/widgets/exchange_card.dart
+24 -17
@@ -5,7 +5,6 @@ import 'package:cake_wallet/src/domain/common/crypto_currency.dart';
5 import 'package:cake_wallet/src/widgets/address_text_field.dart';
6 import 'package:cake_wallet/src/widgets/base_text_form_field.dart';
7 import 'package:cake_wallet/src/screens/exchange/widgets/currency_picker.dart';
8 -import 'package:cake_wallet/palette.dart';
8
9 class ExchangeCard extends StatefulWidget {
10 ExchangeCard(
@@ -22,6 +21,7 @@ class ExchangeCard extends StatefulWidget {
21 this.imageArrow,
22 this.currencyButtonColor = Colors.transparent,
23 this.addressButtonsColor = Colors.transparent,
24 + this.borderColor = Colors.transparent,
25 this.currencyValueValidator,
26 this.addressTextFieldValidator})
27 : super(key: key);
@@ -38,6 +38,7 @@ class ExchangeCard extends StatefulWidget {
38 final Image imageArrow;
39 final Color currencyButtonColor;
40 final Color addressButtonsColor;
41 + final Color borderColor;
42 final FormFieldValidator<String> currencyValueValidator;
43 final FormFieldValidator<String> addressTextFieldValidator;
44
@@ -58,10 +59,6 @@ class ExchangeCardState extends State<ExchangeCard> {
59 bool _isAddressEditable;
60 bool _isAmountEstimated;
61
61 - final copyImage = Image.asset('assets/images/copy_content.png',
62 - height: 16, width: 16,
63 - color: Colors.white);
64 -
62 @override
63 void initState() {
64 _title = widget.title;
@@ -115,6 +112,10 @@ class ExchangeCardState extends State<ExchangeCard> {
112
113 @override
114 Widget build(BuildContext context) {
115 + final copyImage = Image.asset('assets/images/copy_content.png',
116 + height: 16, width: 16,
117 + color: Theme.of(context).primaryTextTheme.display2.color);
118 +
119 return Container(
120 width: double.infinity,
121 color: Colors.transparent,
@@ -129,7 +130,7 @@ class ExchangeCardState extends State<ExchangeCard> {
130 style: TextStyle(
131 fontSize: 18,
132 fontWeight: FontWeight.w600,
132 - color: PaletteDark.lightBlueGrey
133 + color: Theme.of(context).textTheme.headline.color
134 ),
135 )
136 ],
@@ -149,7 +150,7 @@ class ExchangeCardState extends State<ExchangeCard> {
150 RegExp('[\\-|\\ |\\,]'))
151 ],
152 hintText: '0.0000',
152 - borderColor: PaletteDark.blueGrey,
153 + borderColor: widget.borderColor,
154 textStyle: TextStyle(
155 fontSize: 16,
156 fontWeight: FontWeight.w600,
@@ -158,7 +159,7 @@ class ExchangeCardState extends State<ExchangeCard> {
159 placeholderTextStyle: TextStyle(
160 fontSize: 16,
161 fontWeight: FontWeight.w600,
161 - color: PaletteDark.lightBlueGrey
162 + color: Theme.of(context).textTheme.subhead.decorationColor
163 ),
164 validator: _isAmountEditable
165 ? widget.currencyValueValidator
@@ -206,7 +207,7 @@ class ExchangeCardState extends State<ExchangeCard> {
207 style: TextStyle(
208 fontSize: 10,
209 height: 1.2,
209 - color: PaletteDark.lightBlueGrey),
210 + color: Theme.of(context).textTheme.subhead.decorationColor),
211 )
212 : Offstage(),
213 _min != null ? SizedBox(width: 10) : Offstage(),
@@ -217,39 +218,45 @@ class ExchangeCardState extends State<ExchangeCard> {
218 style: TextStyle(
219 fontSize: 10,
220 height: 1.2,
220 - color: PaletteDark.lightBlueGrey))
221 + color: Theme.of(context).textTheme.subhead.decorationColor))
222 : Offstage(),
223 ]),
224 ),
224 - Padding(
225 + _isAddressEditable
226 + ? Offstage()
227 + : Padding(
228 padding: EdgeInsets.only(top: 20),
229 child: Text(
227 - _isAddressEditable
228 - ? S.of(context).widgets_address
229 - : S.of(context).refund_address,
230 + S.of(context).refund_address,
231 style: TextStyle(
232 fontSize: 14,
233 fontWeight: FontWeight.w500,
233 - color: PaletteDark.lightBlueGrey
234 + color: Theme.of(context).textTheme.subhead.decorationColor
235 ),
236 )
237 ),
238 _isAddressEditable
238 - ? AddressTextField(
239 + ? Padding(
240 + padding: EdgeInsets.only(top: 20),
241 + child: AddressTextField(
242 controller: addressController,
243 options: [
244 AddressTextFieldOption.paste,
245 AddressTextFieldOption.qrCode,
246 AddressTextFieldOption.addressBook,
247 ],
245 - placeholder: '',
248 isBorderExist: false,
249 textStyle: TextStyle(
250 fontSize: 16,
251 fontWeight: FontWeight.w600,
252 color: Colors.white),
253 + hintStyle: TextStyle(
254 + fontSize: 16,
255 + fontWeight: FontWeight.w600,
256 + color: Theme.of(context).textTheme.subhead.decorationColor),
257 buttonColor: widget.addressButtonsColor,
258 validator: widget.addressTextFieldValidator,
259 + ),
260 )
261 : Padding(
262 padding: EdgeInsets.only(top: 10),
lib/src/screens/exchange/widgets/present_provider_picker.dart
+1 -2
@@ -5,7 +5,6 @@ import 'package:flutter_mobx/flutter_mobx.dart';
5 import 'package:cake_wallet/generated/i18n.dart';
6 import 'package:cake_wallet/src/widgets/picker.dart';
7 import 'package:cake_wallet/view_model/exchange/exchange_view_model.dart';
8 -import 'package:cake_wallet/palette.dart';
8
9 class PresentProviderPicker extends StatelessWidget {
10 PresentProviderPicker({@required this.exchangeViewModel});
@@ -41,7 +40,7 @@ class PresentProviderPicker extends StatelessWidget {
40 style: TextStyle(
41 fontSize: 10.0,
42 fontWeight: FontWeight.w500,
44 - color: PaletteDark.lightBlueGrey)))
43 + color: Theme.of(context).textTheme.headline.color)))
44 ],
45 ),
46 SizedBox(width: 5),
lib/src/widgets/trail_button.dart
+1 -2
@@ -1,5 +1,4 @@
1 import 'package:flutter/material.dart';
2 -import 'package:cake_wallet/palette.dart';
2
3 class TrailButton extends StatelessWidget {
4 TrailButton({
@@ -22,7 +21,7 @@ class TrailButton extends StatelessWidget {
21 child: Text(
22 caption,
23 style: TextStyle(
25 - color: PaletteDark.lightBlueGrey,
24 + color: Theme.of(context).textTheme.subhead.decorationColor,
25 fontWeight: FontWeight.w500,
26 fontSize: 14),
27 ),
lib/themes.dart
+30 -5
@@ -101,14 +101,26 @@ class Themes {
101 decorationColor: Palette.shadowWhite // template background color (send page)
102 ),
103 display4: TextStyle(
104 - color: Palette.darkBlueCraiola // template title (send page)
104 + color: Palette.darkBlueCraiola, // template title (send page)
105 + decorationColor: Palette.niagara // receive amount text (exchange page)
106 ),
107 + subtitle: TextStyle(
108 + color: Palette.blueCraiola, // first gradient color top panel (exchange page)
109 + decorationColor: Palette.pinkFlamingo // second gradient color top panel (exchange page)
110 + ),
111 + body1: TextStyle(
112 + color: Palette.blueCraiola.withOpacity(0.7), // first gradient color bottom panel (exchange page)
113 + decorationColor: Palette.pinkFlamingo.withOpacity(0.7) // second gradient color bottom panel (exchange page)
114 + ),
115 + body2: TextStyle(
116 + color: Colors.white.withOpacity(0.5), // text field border on top panel (exchange page)
117 + decorationColor: Colors.white.withOpacity(0.5), // text field border on bottom panel (exchange page)
118 + )
119 ),
120 + focusColor: Colors.white.withOpacity(0.2), // text field button (exchange page)
121
122
123
110 - focusColor: Colors.white, // wallet card border
111 -
124 cardColor: Palette.blueAlice,
125 cardTheme: CardTheme(
126 color: Colors.white, // synced card start
@@ -237,13 +249,26 @@ class Themes {
249 decorationColor: PaletteDark.darkVioletBlue // template background color (send page)
250 ),
251 display4: TextStyle(
240 - color: PaletteDark.cyanBlue // QR code
252 + color: PaletteDark.cyanBlue, // template title (send page)
253 + decorationColor: PaletteDark.darkCyanBlue // receive amount text (exchange page)
254 ),
255 + subtitle: TextStyle(
256 + color: PaletteDark.wildVioletBlue, // first gradient color top panel (exchange page)
257 + decorationColor: PaletteDark.wildVioletBlue // second gradient color top panel (exchange page)
258 + ),
259 + body1: TextStyle(
260 + color: PaletteDark.darkNightBlue, // first gradient color bottom panel (exchange page)
261 + decorationColor: PaletteDark.darkNightBlue // second gradient color bottom panel (exchange page)
262 + ),
263 + body2: TextStyle(
264 + color: PaletteDark.blueGrey, // text field border on top panel (exchange page)
265 + decorationColor: PaletteDark.moderateVioletBlue, // text field border on bottom panel (exchange page)
266 + )
267 ),
268 + focusColor: PaletteDark.moderateBlue, // text field button (exchange page)
269
270
271
246 - focusColor: PaletteDark.lightDistantBlue, // wallet card border
272 cardColor: PaletteDark.darkNightBlue,
273 cardTheme: CardTheme(
274 color: PaletteDark.moderateBlue, // synced card start