android-apps-mirrors/CakeWallet
0
0
Fork 0
mirror of https://github.com/cake-tech/cake_wallet.git synced 2025-06-28 20:39:51 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
Oleksandr Sobol 2020-08-21 23:26:23 +03:00
parent 1cd5af2471
commit 40aeacfb4b
8 changed files with 367 additions and 257 deletions
Download patch file Download diff file Expand all files Collapse all files

2
lib/palette.dart
View file

@ -30,6 +30,7 @@ class Palette {
static const Color wildPeriwinkle = Color.fromRGBO(219, 227, 243, 1.0);
static const Color darkGray = Color.fromRGBO(122, 147, 186, 1.0);
static const Color shadowWhite = Color.fromRGBO(242, 245, 255, 1.0);
static const Color niagara = Color.fromRGBO(152, 172, 201, 1.0);
// FIXME: Rename.
static const Color eee = Color.fromRGBO(236, 239, 245, 1.0);
@ -77,6 +78,7 @@ class PaletteDark {
static const Color dividerColor = Color.fromRGBO(48, 59, 95, 1.0);
static const Color violetBlue = Color.fromRGBO(59, 72, 119, 1.0);
static const Color distantBlue = Color.fromRGBO(72, 85, 131, 1.0);
static const Color moderateVioletBlue = Color.fromRGBO(62, 73, 113, 1.0);
// FIXME: Rename.
static const Color eee = Color.fromRGBO(236, 239, 245, 1.0);

25
lib/src/screens/exchange/exchange_page.dart
View file

@ -18,10 +18,13 @@ class ExchangePage extends BasePage {
String get title => S.current.exchange;
@override
Color get backgroundLightColor => PaletteDark.wildVioletBlue;
Color get titleColor => Colors.white;
@override
Color get backgroundDarkColor => PaletteDark.wildVioletBlue;
Color get backgroundLightColor => Colors.transparent;
@override
Color get backgroundDarkColor => Colors.transparent;
@override
Widget middle(BuildContext context) =>
@ -36,5 +39,21 @@ class ExchangePage extends BasePage {
@override
Widget body(BuildContext context) =>
BaseExchangeWidget(exchangeViewModel: exchangeViewModel);
BaseExchangeWidget(
exchangeViewModel: exchangeViewModel,
leading: leading(context),
middle: middle(context),
trailing: trailing(context),
);
@override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomPadding: resizeToAvoidBottomPadding,
body: Container(
color: Theme.of(context).backgroundColor,
child: body(context)
)
);
}
}

27
lib/src/screens/exchange/exchange_template_page.dart
View file

@ -1,7 +1,6 @@
import 'dart:ui';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:cake_wallet/palette.dart';
import 'package:cake_wallet/src/screens/base_page.dart';
import 'package:cake_wallet/src/screens/exchange/widgets/present_provider_picker.dart';
import 'package:cake_wallet/src/screens/exchange/widgets/base_exchange_widget.dart';
@ -17,10 +16,13 @@ class ExchangeTemplatePage extends BasePage {
String get title => S.current.exchange_new_template;
@override
Color get backgroundLightColor => PaletteDark.wildVioletBlue;
Color get titleColor => Colors.white;
@override
Color get backgroundDarkColor => PaletteDark.wildVioletBlue;
Color get backgroundLightColor => Colors.transparent;
@override
Color get backgroundDarkColor => Colors.transparent;
@override
Widget trailing(BuildContext context) =>
@ -28,5 +30,22 @@ class ExchangeTemplatePage extends BasePage {
@override
Widget body(BuildContext context) =>
BaseExchangeWidget(exchangeViewModel: exchangeViewModel, isTemplate: true);
BaseExchangeWidget(
exchangeViewModel: exchangeViewModel,
leading: leading(context),
middle: middle(context),
trailing: trailing(context),
isTemplate: true
);
@override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomPadding: resizeToAvoidBottomPadding,
body: Container(
color: Theme.of(context).backgroundColor,
child: body(context)
)
);
}
}

76
lib/src/screens/exchange/widgets/base_exchange_widget.dart
View file

@ -26,16 +26,25 @@ import 'package:cake_wallet/core/amount_validator.dart';
class BaseExchangeWidget extends StatefulWidget {
BaseExchangeWidget({
@ required this.exchangeViewModel,
this.leading,
this.middle,
this.trailing,
this.isTemplate = false,
});
final ExchangeViewModel exchangeViewModel;
final Widget leading;
final Widget middle;
final Widget trailing;
final bool isTemplate;
@override
BaseExchangeWidgetState createState() =>
BaseExchangeWidgetState(
exchangeViewModel: exchangeViewModel,
leading: leading,
middle: middle,
trailing: trailing,
isTemplate: isTemplate
);
}
@ -43,11 +52,18 @@ class BaseExchangeWidget extends StatefulWidget {
class BaseExchangeWidgetState extends State<BaseExchangeWidget> {
BaseExchangeWidgetState({
@ required this.exchangeViewModel,
@ required this.leading,
@ required this.middle,
@ required this.trailing,
@ required this.isTemplate,
});
final ExchangeViewModel exchangeViewModel;
final Widget leading;
final Widget middle;
final Widget trailing;
final bool isTemplate;
final double topPanelHeight = 290;
final depositKey = GlobalKey<ExchangeCardState>();
final receiveKey = GlobalKey<ExchangeCardState>();
@ -79,23 +95,43 @@ class BaseExchangeWidgetState extends State<BaseExchangeWidget> {
WidgetsBinding.instance.addPostFrameCallback(
(_) => _setReactions(context, exchangeViewModel));
return Container(
color: PaletteDark.backgroundColor,
child: Form(
return Form(
key: _formKey,
child: ScrollableWithBottomSection(
contentPadding: EdgeInsets.only(bottom: 24),
content: Column(
children: <Widget>[
TopPanel(
color: PaletteDark.darkNightBlue,
gradient: LinearGradient(colors: [
Theme.of(context).primaryTextTheme.body1.color,
Theme.of(context).primaryTextTheme.body1.decorationColor,
],
stops: [0.35, 1.0],
begin: Alignment.topLeft,
end: Alignment.bottomRight),
edgeInsets: EdgeInsets.only(bottom: 32),
widget: Column(
children: <Widget>[
TopPanel(
edgeInsets: EdgeInsets.fromLTRB(24, 29, 24, 32),
color: PaletteDark.wildVioletBlue,
widget: Observer(
edgeInsets: EdgeInsets.all(0),
gradient: LinearGradient(colors: [
Theme.of(context).primaryTextTheme.subtitle.color,
Theme.of(context).primaryTextTheme.subtitle.decorationColor,
],
begin: Alignment.topLeft,
end: Alignment.bottomRight),
widget: Column(
children: <Widget>[
CupertinoNavigationBar(
leading: leading,
middle: middle,
trailing: trailing,
backgroundColor: Colors.transparent,
border: null,
),
Padding(
padding: EdgeInsets.fromLTRB(24, 29, 24, 32),
child: Observer(
builder: (_) => ExchangeCard(
key: depositKey,
title: S.of(context).you_will_send,
@ -112,13 +148,17 @@ class BaseExchangeWidgetState extends State<BaseExchangeWidget> {
onCurrencySelected: (currency) =>
exchangeViewModel.changeDepositCurrency(currency: currency),
imageArrow: arrowBottomPurple,
currencyButtonColor: PaletteDark.wildVioletBlue,
addressButtonsColor: PaletteDark.moderateBlue,
currencyButtonColor: Colors.transparent,
addressButtonsColor: Theme.of(context).focusColor,
borderColor: Theme.of(context).primaryTextTheme.body2.color,
currencyValueValidator: AmountValidator(
type: exchangeViewModel.wallet.type),
addressTextFieldValidator: AddressValidator(
type: exchangeViewModel.depositCurrency),
),
),
)
],
)
),
Padding(
@ -140,8 +180,9 @@ class BaseExchangeWidgetState extends State<BaseExchangeWidget> {
onCurrencySelected: (currency) => exchangeViewModel
.changeReceiveCurrency(currency: currency),
imageArrow: arrowBottomCakeGreen,
currencyButtonColor: PaletteDark.darkNightBlue,
addressButtonsColor: PaletteDark.moderateBlue,
currencyButtonColor: Colors.transparent,
addressButtonsColor: Theme.of(context).focusColor,
borderColor: Theme.of(context).primaryTextTheme.body2.decorationColor,
currencyValueValidator: AmountValidator(
type: exchangeViewModel.wallet.type),
addressTextFieldValidator: AddressValidator(
@ -167,7 +208,7 @@ class BaseExchangeWidgetState extends State<BaseExchangeWidget> {
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.w600,
color: PaletteDark.darkCyanBlue
color: Theme.of(context).primaryTextTheme.display4.color
),
)
],
@ -191,7 +232,7 @@ class BaseExchangeWidgetState extends State<BaseExchangeWidget> {
child: DottedBorder(
borderType: BorderType.RRect,
dashPattern: [6, 4],
color: PaletteDark.darkCyanBlue,
color: Theme.of(context).primaryTextTheme.display2.decorationColor,
strokeWidth: 2,
radius: Radius.circular(20),
child: Container(
@ -208,7 +249,7 @@ class BaseExchangeWidgetState extends State<BaseExchangeWidget> {
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.w600,
color: PaletteDark.darkCyanBlue
color: Theme.of(context).primaryTextTheme.display3.color
),
),
)
@ -279,7 +320,7 @@ class BaseExchangeWidgetState extends State<BaseExchangeWidget> {
child: Text(
description,
style: TextStyle(
color: PaletteDark.darkCyanBlue,
color: Theme.of(context).primaryTextTheme.display4.decorationColor,
fontWeight: FontWeight.w500,
fontSize: 12
),
@ -315,13 +356,12 @@ class BaseExchangeWidgetState extends State<BaseExchangeWidget> {
exchangeViewModel.createTrade();
}
},
color: Colors.blue,
color: Palette.blueCraiola,
textColor: Colors.white,
isLoading: exchangeViewModel.tradeState is TradeIsCreating,
)),
]),
)),
);
));
}
void applyTemplate(ExchangeViewModel exchangeViewModel,

41
lib/src/screens/exchange/widgets/exchange_card.dart
View file

@ -5,7 +5,6 @@ import 'package:cake_wallet/src/domain/common/crypto_currency.dart';
import 'package:cake_wallet/src/widgets/address_text_field.dart';
import 'package:cake_wallet/src/widgets/base_text_form_field.dart';
import 'package:cake_wallet/src/screens/exchange/widgets/currency_picker.dart';
import 'package:cake_wallet/palette.dart';
class ExchangeCard extends StatefulWidget {
ExchangeCard(
@ -22,6 +21,7 @@ class ExchangeCard extends StatefulWidget {
this.imageArrow,
this.currencyButtonColor = Colors.transparent,
this.addressButtonsColor = Colors.transparent,
this.borderColor = Colors.transparent,
this.currencyValueValidator,
this.addressTextFieldValidator})
: super(key: key);
@ -38,6 +38,7 @@ class ExchangeCard extends StatefulWidget {
final Image imageArrow;
final Color currencyButtonColor;
final Color addressButtonsColor;
final Color borderColor;
final FormFieldValidator<String> currencyValueValidator;
final FormFieldValidator<String> addressTextFieldValidator;
@ -58,10 +59,6 @@ class ExchangeCardState extends State<ExchangeCard> {
bool _isAddressEditable;
bool _isAmountEstimated;
final copyImage = Image.asset('assets/images/copy_content.png',
height: 16, width: 16,
color: Colors.white);
@override
void initState() {
_title = widget.title;
@ -115,6 +112,10 @@ class ExchangeCardState extends State<ExchangeCard> {
@override
Widget build(BuildContext context) {
final copyImage = Image.asset('assets/images/copy_content.png',
height: 16, width: 16,
color: Theme.of(context).primaryTextTheme.display2.color);
return Container(
width: double.infinity,
color: Colors.transparent,
@ -129,7 +130,7 @@ class ExchangeCardState extends State<ExchangeCard> {
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.w600,
color: PaletteDark.lightBlueGrey
color: Theme.of(context).textTheme.headline.color
),
)
],
@ -149,7 +150,7 @@ class ExchangeCardState extends State<ExchangeCard> {
RegExp('[\\-|\\ |\\,]'))
],
hintText: '0.0000',
borderColor: PaletteDark.blueGrey,
borderColor: widget.borderColor,
textStyle: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w600,
@ -158,7 +159,7 @@ class ExchangeCardState extends State<ExchangeCard> {
placeholderTextStyle: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w600,
color: PaletteDark.lightBlueGrey
color: Theme.of(context).textTheme.subhead.decorationColor
),
validator: _isAmountEditable
? widget.currencyValueValidator
@ -206,7 +207,7 @@ class ExchangeCardState extends State<ExchangeCard> {
style: TextStyle(
fontSize: 10,
height: 1.2,
color: PaletteDark.lightBlueGrey),
color: Theme.of(context).textTheme.subhead.decorationColor),
)
: Offstage(),
_min != null ? SizedBox(width: 10) : Offstage(),
@ -217,39 +218,45 @@ class ExchangeCardState extends State<ExchangeCard> {
style: TextStyle(
fontSize: 10,
height: 1.2,
color: PaletteDark.lightBlueGrey))
color: Theme.of(context).textTheme.subhead.decorationColor))
: Offstage(),
]),
),
Padding(
_isAddressEditable
? Offstage()
: Padding(
padding: EdgeInsets.only(top: 20),
child: Text(
_isAddressEditable
? S.of(context).widgets_address
: S.of(context).refund_address,
S.of(context).refund_address,
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.w500,
color: PaletteDark.lightBlueGrey
color: Theme.of(context).textTheme.subhead.decorationColor
),
)
),
_isAddressEditable
? AddressTextField(
? Padding(
padding: EdgeInsets.only(top: 20),
child: AddressTextField(
controller: addressController,
options: [
AddressTextFieldOption.paste,
AddressTextFieldOption.qrCode,
AddressTextFieldOption.addressBook,
],
placeholder: '',
isBorderExist: false,
textStyle: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w600,
color: Colors.white),
hintStyle: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w600,
color: Theme.of(context).textTheme.subhead.decorationColor),
buttonColor: widget.addressButtonsColor,
validator: widget.addressTextFieldValidator,
),
)
: Padding(
padding: EdgeInsets.only(top: 10),

3
lib/src/screens/exchange/widgets/present_provider_picker.dart
View file

@ -5,7 +5,6 @@ import 'package:flutter_mobx/flutter_mobx.dart';
import 'package:cake_wallet/generated/i18n.dart';
import 'package:cake_wallet/src/widgets/picker.dart';
import 'package:cake_wallet/view_model/exchange/exchange_view_model.dart';
import 'package:cake_wallet/palette.dart';
class PresentProviderPicker extends StatelessWidget {
PresentProviderPicker({@required this.exchangeViewModel});
@ -41,7 +40,7 @@ class PresentProviderPicker extends StatelessWidget {
style: TextStyle(
fontSize: 10.0,
fontWeight: FontWeight.w500,
color: PaletteDark.lightBlueGrey)))
color: Theme.of(context).textTheme.headline.color)))
],
),
SizedBox(width: 5),

3
lib/src/widgets/trail_button.dart
View file

@ -1,5 +1,4 @@
import 'package:flutter/material.dart';
import 'package:cake_wallet/palette.dart';
class TrailButton extends StatelessWidget {
TrailButton({
@ -22,7 +21,7 @@ class TrailButton extends StatelessWidget {
child: Text(
caption,
style: TextStyle(
color: PaletteDark.lightBlueGrey,
color: Theme.of(context).textTheme.subhead.decorationColor,
fontWeight: FontWeight.w500,
fontSize: 14),
),

35
lib/themes.dart
View file

@ -101,14 +101,26 @@ class Themes {
decorationColor: Palette.shadowWhite // template background color (send page)
),
display4: TextStyle(
color: Palette.darkBlueCraiola // template title (send page)
color: Palette.darkBlueCraiola, // template title (send page)
decorationColor: Palette.niagara // receive amount text (exchange page)
),
subtitle: TextStyle(
color: Palette.blueCraiola, // first gradient color top panel (exchange page)
decorationColor: Palette.pinkFlamingo // second gradient color top panel (exchange page)
),
body1: TextStyle(
color: Palette.blueCraiola.withOpacity(0.7), // first gradient color bottom panel (exchange page)
decorationColor: Palette.pinkFlamingo.withOpacity(0.7) // second gradient color bottom panel (exchange page)
),
body2: TextStyle(
color: Colors.white.withOpacity(0.5), // text field border on top panel (exchange page)
decorationColor: Colors.white.withOpacity(0.5), // text field border on bottom panel (exchange page)
)
),
focusColor: Colors.white.withOpacity(0.2), // text field button (exchange page)
focusColor: Colors.white, // wallet card border
cardColor: Palette.blueAlice,
cardTheme: CardTheme(
color: Colors.white, // synced card start
@ -237,13 +249,26 @@ class Themes {
decorationColor: PaletteDark.darkVioletBlue // template background color (send page)
),
display4: TextStyle(
color: PaletteDark.cyanBlue // QR code
color: PaletteDark.cyanBlue, // template title (send page)
decorationColor: PaletteDark.darkCyanBlue // receive amount text (exchange page)
),
subtitle: TextStyle(
color: PaletteDark.wildVioletBlue, // first gradient color top panel (exchange page)
decorationColor: PaletteDark.wildVioletBlue // second gradient color top panel (exchange page)
),
body1: TextStyle(
color: PaletteDark.darkNightBlue, // first gradient color bottom panel (exchange page)
decorationColor: PaletteDark.darkNightBlue // second gradient color bottom panel (exchange page)
),
body2: TextStyle(
color: PaletteDark.blueGrey, // text field border on top panel (exchange page)
decorationColor: PaletteDark.moderateVioletBlue, // text field border on bottom panel (exchange page)
)
),
focusColor: PaletteDark.moderateBlue, // text field button (exchange page)
focusColor: PaletteDark.lightDistantBlue, // wallet card border
cardColor: PaletteDark.darkNightBlue,
cardTheme: CardTheme(
color: PaletteDark.moderateBlue, // synced card start