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

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

View file

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

View file

@ -18,10 +18,13 @@ class ExchangePage extends BasePage {
String get title => S.current.exchange; String get title => S.current.exchange;
@override @override
Color get backgroundLightColor => PaletteDark.wildVioletBlue; Color get titleColor => Colors.white;
@override @override
Color get backgroundDarkColor => PaletteDark.wildVioletBlue; Color get backgroundLightColor => Colors.transparent;
@override
Color get backgroundDarkColor => Colors.transparent;
@override @override
Widget middle(BuildContext context) => Widget middle(BuildContext context) =>
@ -36,5 +39,21 @@ class ExchangePage extends BasePage {
@override @override
Widget body(BuildContext context) => 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)
)
);
}
} }

View file

@ -1,7 +1,6 @@
import 'dart:ui'; import 'dart:ui';
import 'package:flutter/cupertino.dart'; import 'package:flutter/cupertino.dart';
import 'package:flutter/material.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/base_page.dart';
import 'package:cake_wallet/src/screens/exchange/widgets/present_provider_picker.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'; 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; String get title => S.current.exchange_new_template;
@override @override
Color get backgroundLightColor => PaletteDark.wildVioletBlue; Color get titleColor => Colors.white;
@override @override
Color get backgroundDarkColor => PaletteDark.wildVioletBlue; Color get backgroundLightColor => Colors.transparent;
@override
Color get backgroundDarkColor => Colors.transparent;
@override @override
Widget trailing(BuildContext context) => Widget trailing(BuildContext context) =>
@ -28,5 +30,22 @@ class ExchangeTemplatePage extends BasePage {
@override @override
Widget body(BuildContext context) => 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)
)
);
}
} }

View file

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

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

View file

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

View file

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

View file

@ -101,14 +101,26 @@ class Themes {
decorationColor: Palette.shadowWhite // template background color (send page) decorationColor: Palette.shadowWhite // template background color (send page)
), ),
display4: TextStyle( 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, cardColor: Palette.blueAlice,
cardTheme: CardTheme( cardTheme: CardTheme(
color: Colors.white, // synced card start color: Colors.white, // synced card start
@ -237,13 +249,26 @@ class Themes {
decorationColor: PaletteDark.darkVioletBlue // template background color (send page) decorationColor: PaletteDark.darkVioletBlue // template background color (send page)
), ),
display4: TextStyle( 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, cardColor: PaletteDark.darkNightBlue,
cardTheme: CardTheme( cardTheme: CardTheme(
color: PaletteDark.moderateBlue, // synced card start color: PaletteDark.moderateBlue, // synced card start