refactor: create ExchangePageTheme

This commit is contained in:
Rafael Saes 2023-07-03 14:56:29 -03:00
parent bacd8658a4
commit 09e2567953
22 changed files with 255 additions and 264 deletions

View file

@ -3,6 +3,7 @@ import 'package:cake_wallet/buy/buy_provider.dart';
import 'package:cake_wallet/buy/moonpay/moonpay_buy_provider.dart';
import 'package:cake_wallet/entities/fiat_currency.dart';
import 'package:cake_wallet/src/widgets/picker.dart';
import 'package:cake_wallet/themes/extensions/exchange_page_theme.dart';
import 'package:cake_wallet/themes/extensions/keyboard_theme.dart';
import 'package:cw_core/wallet_type.dart';
import 'package:cake_wallet/src/screens/buy/widgets/buy_list_item.dart';
@ -160,7 +161,7 @@ class PreOrderPage extends BasePage {
),
),
hintText: '0.00',
borderColor: Theme.of(context).primaryTextTheme!.bodyLarge!.decorationColor!,
borderColor: Theme.of(context).extension<ExchangePageTheme>()!.textFieldBorderBottomPanelColor,
borderWidth: 0.5,
textStyle: TextStyle(fontSize: 36, fontWeight: FontWeight.w500, color: Colors.white),
placeholderTextStyle: TextStyle(

View file

@ -1,3 +1,4 @@
import 'package:cake_wallet/themes/extensions/exchange_page_theme.dart';
import 'package:cake_wallet/themes/extensions/keyboard_theme.dart';
import 'package:cake_wallet/di.dart';
import 'package:cake_wallet/src/screens/exchange/widgets/desktop_exchange_cards_section.dart';
@ -208,10 +209,7 @@ class ExchangePage extends BasePage {
description,
textAlign: TextAlign.center,
style: TextStyle(
color: Theme.of(context)
.primaryTextTheme!
.displayLarge!
.decorationColor!,
color: Theme.of(context).extension<ExchangePageTheme>()!.receiveAmountColor,
fontWeight: FontWeight.w500,
fontSize: 12),
),
@ -654,8 +652,8 @@ class ExchangePage extends BasePage {
},
imageArrow: arrowBottomPurple,
currencyButtonColor: Colors.transparent,
addressButtonsColor: Theme.of(context).focusColor!,
borderColor: Theme.of(context).primaryTextTheme!.bodyLarge!.color!,
addressButtonsColor: Theme.of(context).extension<ExchangePageTheme>()!.textFieldButtonColor!,
borderColor: Theme.of(context).extension<ExchangePageTheme>()!.textFieldBorderBottomPanelColor,
currencyValueValidator: (value) {
return !exchangeViewModel.isFixedRateMode
? AmountValidator(
@ -703,9 +701,9 @@ class ExchangePage extends BasePage {
exchangeViewModel.changeReceiveCurrency(currency: currency),
imageArrow: arrowBottomCakeGreen,
currencyButtonColor: Colors.transparent,
addressButtonsColor: Theme.of(context).focusColor!,
addressButtonsColor: Theme.of(context).extension<ExchangePageTheme>()!.textFieldButtonColor!,
borderColor:
Theme.of(context).primaryTextTheme!.bodyLarge!.decorationColor!,
Theme.of(context).extension<ExchangePageTheme>()!.textFieldBorderBottomPanelColor,
currencyValueValidator: (value) {
return exchangeViewModel.isFixedRateMode
? AmountValidator(

View file

@ -1,3 +1,4 @@
import 'package:cake_wallet/themes/extensions/exchange_page_theme.dart';
import 'package:cake_wallet/themes/extensions/keyboard_theme.dart';
import 'package:cake_wallet/exchange/exchange_provider.dart';
import 'package:cake_wallet/src/screens/base_page.dart';
@ -99,8 +100,8 @@ class ExchangeTemplatePage extends BasePage {
),
gradient: LinearGradient(
colors: [
Theme.of(context).primaryTextTheme!.bodyMedium!.color!,
Theme.of(context).primaryTextTheme!.bodyMedium!.decorationColor!,
Theme.of(context).extension<ExchangePageTheme>()!.firstGradientBottomPanelColor,
Theme.of(context).extension<ExchangePageTheme>()!.secondGradientBottomPanelColor,
],
stops: [0.35, 1.0],
begin: Alignment.topLeft,
@ -118,12 +119,8 @@ class ExchangeTemplatePage extends BasePage {
),
gradient: LinearGradient(
colors: [
Theme.of(context)
.primaryTextTheme!.titleSmall!
.color!,
Theme.of(context)
.primaryTextTheme!.titleSmall!
.decorationColor!,
Theme.of(context).extension<ExchangePageTheme>()!.firstGradientTopPanelColor,
Theme.of(context).extension<ExchangePageTheme>()!.secondGradientTopPanelColor,
],
begin: Alignment.topLeft,
end: Alignment.bottomRight),
@ -155,10 +152,8 @@ class ExchangeTemplatePage extends BasePage {
imageArrow: arrowBottomPurple,
currencyButtonColor: Colors.transparent,
addressButtonsColor:
Theme.of(context).focusColor,
borderColor: Theme.of(context)
.primaryTextTheme!.bodyLarge!
.color!,
Theme.of(context).extension<ExchangePageTheme>()!.textFieldButtonColor,
borderColor: Theme.of(context).extension<ExchangePageTheme>()!.textFieldBorderBottomPanelColor,
currencyValueValidator: AmountValidator(
currency: exchangeViewModel.depositCurrency),
//addressTextFieldValidator: AddressValidator(
@ -195,10 +190,8 @@ class ExchangeTemplatePage extends BasePage {
imageArrow: arrowBottomCakeGreen,
currencyButtonColor: Colors.transparent,
addressButtonsColor:
Theme.of(context).focusColor,
borderColor: Theme.of(context)
.primaryTextTheme!.bodyLarge!
.decorationColor!,
Theme.of(context).extension<ExchangePageTheme>()!.textFieldButtonColor,
borderColor: Theme.of(context).extension<ExchangePageTheme>()!.textFieldBorderBottomPanelColor,
currencyValueValidator: AmountValidator(
currency: exchangeViewModel.receiveCurrency),
//addressTextFieldValidator: AddressValidator(
@ -224,9 +217,7 @@ class ExchangeTemplatePage extends BasePage {
description,
textAlign: TextAlign.center,
style: TextStyle(
color: Theme.of(context)
.primaryTextTheme!.displayLarge!
.decorationColor!,
color: Theme.of(context).extension<ExchangePageTheme>()!.receiveAmountColor,
fontWeight: FontWeight.w500,
fontSize: 12),
),

View file

@ -1,6 +1,7 @@
import 'package:cake_wallet/entities/contact_base.dart';
import 'package:cake_wallet/routes.dart';
import 'package:cake_wallet/src/widgets/alert_with_two_actions.dart';
import 'package:cake_wallet/themes/extensions/exchange_page_theme.dart';
import 'package:cake_wallet/utils/show_bar.dart';
import 'package:cake_wallet/utils/show_pop_up.dart';
import 'package:cake_wallet/utils/payment_request.dart';
@ -268,10 +269,7 @@ class ExchangeCardState extends State<ExchangeCard> {
placeholderTextStyle: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w600,
color: Theme.of(context)
.accentTextTheme!
.displayLarge!
.decorationColor!),
color: Theme.of(context).extension<ExchangePageTheme>()!.hintTextColor),
validator: _isAmountEditable
? widget.currencyValueValidator
: null),
@ -329,10 +327,7 @@ class ExchangeCardState extends State<ExchangeCard> {
style: TextStyle(
fontSize: 10,
height: 1.2,
color: Theme.of(context)
.accentTextTheme!
.displayLarge!
.decorationColor!),
color: Theme.of(context).extension<ExchangePageTheme>()!.hintTextColor),
)
: Offstage(),
_min != null ? SizedBox(width: 10) : Offstage(),
@ -344,10 +339,7 @@ class ExchangeCardState extends State<ExchangeCard> {
style: TextStyle(
fontSize: 10,
height: 1.2,
color: Theme.of(context)
.accentTextTheme!
.displayLarge!
.decorationColor!))
color: Theme.of(context).extension<ExchangePageTheme>()!.hintTextColor))
: Offstage(),
])),
),
@ -359,10 +351,7 @@ class ExchangeCardState extends State<ExchangeCard> {
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.w500,
color: Theme.of(context)
.accentTextTheme!
.displayLarge!
.decorationColor!),
color: Theme.of(context).extension<ExchangePageTheme>()!.hintTextColor),
))
: Offstage(),
_isAddressEditable
@ -400,10 +389,7 @@ class ExchangeCardState extends State<ExchangeCard> {
hintStyle: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w600,
color: Theme.of(context)
.accentTextTheme!
.displayLarge!
.decorationColor!),
color: Theme.of(context).extension<ExchangePageTheme>()!.hintTextColor),
buttonColor: widget.addressButtonsColor,
validator: widget.addressTextFieldValidator,
onPushPasteButton: widget.onPushPasteButton,

View file

@ -1,3 +1,4 @@
import 'package:cake_wallet/themes/extensions/exchange_page_theme.dart';
import 'package:flutter/material.dart';
class MobileExchangeCardsSection extends StatelessWidget {
@ -21,8 +22,8 @@ class MobileExchangeCardsSection extends StatelessWidget {
),
gradient: LinearGradient(
colors: [
Theme.of(context).primaryTextTheme!.bodyMedium!.color!,
Theme.of(context).primaryTextTheme!.bodyMedium!.decorationColor!,
Theme.of(context).extension<ExchangePageTheme>()!.firstGradientBottomPanelColor,
Theme.of(context).extension<ExchangePageTheme>()!.secondGradientBottomPanelColor,
],
stops: [0.35, 1.0],
begin: Alignment.topLeft,
@ -37,11 +38,8 @@ class MobileExchangeCardsSection extends StatelessWidget {
bottomLeft: Radius.circular(24), bottomRight: Radius.circular(24)),
gradient: LinearGradient(
colors: [
Theme.of(context).primaryTextTheme!.titleSmall!.color!,
Theme.of(context)
.primaryTextTheme!
.titleSmall!
.decorationColor!,
Theme.of(context).extension<ExchangePageTheme>()!.firstGradientTopPanelColor,
Theme.of(context).extension<ExchangePageTheme>()!.secondGradientTopPanelColor,
],
begin: Alignment.topLeft,
end: Alignment.bottomRight,

View file

@ -1,5 +1,6 @@
import 'package:cake_wallet/exchange/exchange_provider_description.dart';
import 'package:cake_wallet/store/dashboard/trades_store.dart';
import 'package:cake_wallet/themes/extensions/exchange_page_theme.dart';
import 'package:cake_wallet/utils/show_bar.dart';
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
@ -94,10 +95,7 @@ class ExchangeConfirmPage extends BasePage {
context, S.of(context).copied_to_clipboard);
},
text: S.of(context).copy_id,
color: Theme.of(context)
.accentTextTheme!
.bodySmall!
.backgroundColor!,
color: Theme.of(context).extension<ExchangePageTheme>()!.buttonBackgroundColor,
textColor: Theme.of(context)
.primaryTextTheme!
.titleLarge!

View file

@ -1,4 +1,5 @@
import 'dart:ui';
import 'package:cake_wallet/themes/extensions/exchange_page_theme.dart';
import 'package:cake_wallet/utils/request_review_handler.dart';
import 'package:mobx/mobx.dart';
import 'package:flutter_mobx/flutter_mobx.dart';
@ -160,10 +161,7 @@ class ExchangeTradeState extends State<ExchangeTradeForm> {
decoration: BoxDecoration(
border: Border.all(
width: 3,
color: Theme.of(context)
.accentTextTheme!
.titleSmall!
.color!
color: Theme.of(context).extension<ExchangePageTheme>()!.qrCodeColor
)
),
child: QrImage(data: trade.inputAddress ?? fetchingLabel),
@ -179,10 +177,7 @@ class ExchangeTradeState extends State<ExchangeTradeForm> {
itemCount: widget.exchangeTradeViewModel.items.length,
separatorBuilder: (context, index) => Container(
height: 1,
color: Theme.of(context)
.accentTextTheme!
.titleSmall!
.backgroundColor!,
color: Theme.of(context).extension<ExchangePageTheme>()!.dividerCodeColor,
),
itemBuilder: (context, index) {
final item = widget.exchangeTradeViewModel.items[index];

View file

@ -1,6 +1,7 @@
import 'dart:ui';
import 'package:cake_wallet/generated/i18n.dart';
import 'package:cake_wallet/src/widgets/primary_button.dart';
import 'package:cake_wallet/themes/extensions/exchange_page_theme.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:cake_wallet/src/widgets/alert_background.dart';
@ -44,7 +45,7 @@ class InformationPage extends StatelessWidget {
child: PrimaryButton(
onPressed: () => Navigator.of(context).pop(),
text: S.of(context).send_got_it,
color: Theme.of(context).accentTextTheme!.bodySmall!.backgroundColor!,
color: Theme.of(context).extension<ExchangePageTheme>()!.buttonBackgroundColor,
textColor: Theme.of(context).primaryTextTheme!.titleLarge!.color!
),
)

View file

@ -4,6 +4,7 @@ import 'package:cake_wallet/ionia/ionia_gift_card.dart';
import 'package:cake_wallet/routes.dart';
import 'package:cake_wallet/src/screens/base_page.dart';
import 'package:cake_wallet/src/screens/ionia/widgets/card_item.dart';
import 'package:cake_wallet/themes/extensions/exchange_page_theme.dart';
import 'package:cake_wallet/typography.dart';
import 'package:cake_wallet/view_model/ionia/ionia_account_view_model.dart';
import 'package:flutter/material.dart';
@ -165,7 +166,7 @@ class _IoniaCardListView extends StatelessWidget {
.displayMedium!
.backgroundColor!,
valueColor: AlwaysStoppedAnimation<Color>(
Theme.of(context).primaryTextTheme!.bodyMedium!.color!),
Theme.of(context).extension<ExchangePageTheme>()!.firstGradientBottomPanelColor),
),
);
}

View file

@ -9,6 +9,7 @@ import 'package:cake_wallet/src/widgets/alert_with_one_action.dart';
import 'package:cake_wallet/src/widgets/discount_badge.dart';
import 'package:cake_wallet/src/widgets/primary_button.dart';
import 'package:cake_wallet/src/widgets/scollable_with_bottom_section.dart';
import 'package:cake_wallet/themes/extensions/exchange_page_theme.dart';
import 'package:cake_wallet/typography.dart';
import 'package:cake_wallet/utils/show_pop_up.dart';
import 'package:cake_wallet/view_model/ionia/ionia_purchase_merch_view_model.dart';
@ -212,7 +213,7 @@ class IoniaBuyGiftCardDetailPage extends BasePage {
onTap: () => _showTermsAndCondition(context),
child: Text(S.of(context).settings_terms_and_conditions,
style: textMediumSemiBold(
color: Theme.of(context).primaryTextTheme.bodyMedium!.color!,
color: Theme.of(context).extension<ExchangePageTheme>()!.firstGradientBottomPanelColor,
).copyWith(fontSize: 12)),
),
SizedBox(height: 16)

View file

@ -7,6 +7,7 @@ import 'package:cake_wallet/src/screens/ionia/widgets/card_item.dart';
import 'package:cake_wallet/src/screens/ionia/widgets/card_menu.dart';
import 'package:cake_wallet/src/screens/ionia/widgets/ionia_filter_modal.dart';
import 'package:cake_wallet/src/widgets/cake_scrollbar.dart';
import 'package:cake_wallet/themes/extensions/exchange_page_theme.dart';
import 'package:cake_wallet/themes/extensions/sync_indicator_theme.dart';
import 'package:cake_wallet/themes/theme_base.dart';
import 'package:cake_wallet/utils/debounce.dart';
@ -251,7 +252,7 @@ class _IoniaManageCardsPageBodyState extends State<IoniaManageCardsPageBody> {
return Center(
child: CircularProgressIndicator(
backgroundColor: Theme.of(context).accentTextTheme!.displayMedium!.backgroundColor!,
valueColor: AlwaysStoppedAnimation<Color>(Theme.of(context).primaryTextTheme!.bodyMedium!.color!),
valueColor: AlwaysStoppedAnimation<Color>(Theme.of(context).extension<ExchangePageTheme>()!.firstGradientBottomPanelColor),
),
);
}

View file

@ -1,3 +1,4 @@
import 'package:cake_wallet/themes/extensions/exchange_page_theme.dart';
import 'package:cake_wallet/themes/extensions/keyboard_theme.dart';
import 'package:cake_wallet/anonpay/anonpay_donation_link_info.dart';
import 'package:cake_wallet/core/execution_state.dart';
@ -104,8 +105,8 @@ class AnonPayInvoicePage extends BasePage {
bottomLeft: Radius.circular(24), bottomRight: Radius.circular(24)),
gradient: LinearGradient(
colors: [
Theme.of(context).primaryTextTheme!.titleSmall!.color!,
Theme.of(context).primaryTextTheme!.titleSmall!.decorationColor!,
Theme.of(context).extension<ExchangePageTheme>()!.firstGradientTopPanelColor,
Theme.of(context).extension<ExchangePageTheme>()!.secondGradientTopPanelColor,
],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
@ -143,10 +144,7 @@ class AnonPayInvoicePage extends BasePage {
: S.of(context).anonpay_description("a donation link", "donate"),
textAlign: TextAlign.center,
style: TextStyle(
color: Theme.of(context)
.primaryTextTheme!
.displayLarge!
.decorationColor!,
color: Theme.of(context).extension<ExchangePageTheme>()!.receiveAmountColor,
fontWeight: FontWeight.w500,
fontSize: 12),
),

View file

@ -1,5 +1,6 @@
import 'package:cake_wallet/generated/i18n.dart';
import 'package:cake_wallet/src/widgets/base_text_form_field.dart';
import 'package:cake_wallet/themes/extensions/exchange_page_theme.dart';
import 'package:cw_core/currency.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
@ -33,7 +34,7 @@ class AnonpayCurrencyInputField extends StatelessWidget {
border: Border(
bottom: BorderSide(
color:
Theme.of(context).primaryTextTheme!.bodyLarge!.color!,
Theme.of(context).extension<ExchangePageTheme>()!.textFieldBorderBottomPanelColor,
width: 1)),
),
child: Padding(
@ -119,10 +120,7 @@ class AnonpayCurrencyInputField extends StatelessWidget {
placeholderTextStyle: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w600,
color: Theme.of(context)
.accentTextTheme!
.displayLarge!
.decorationColor!,
color: Theme.of(context).extension<ExchangePageTheme>()!.hintTextColor,
),
validator: null,
),
@ -143,20 +141,14 @@ class AnonpayCurrencyInputField extends StatelessWidget {
style: TextStyle(
fontSize: 10,
height: 1.2,
color: Theme.of(context)
.accentTextTheme!
.displayLarge!
.decorationColor!),
color: Theme.of(context).extension<ExchangePageTheme>()!.hintTextColor),
),
SizedBox(width: 10),
Text(S.of(context).max_value(maxAmount, selectedCurrency.toString()),
style: TextStyle(
fontSize: 10,
height: 1.2,
color: Theme.of(context)
.accentTextTheme!
.displayLarge!
.decorationColor!)),
color: Theme.of(context).extension<ExchangePageTheme>()!.hintTextColor)),
],
),
)

View file

@ -3,6 +3,7 @@ import 'package:cake_wallet/generated/i18n.dart';
import 'package:cake_wallet/src/screens/exchange/widgets/currency_picker.dart';
import 'package:cake_wallet/src/screens/receive/widgets/anonpay_currency_input_field.dart';
import 'package:cake_wallet/src/widgets/base_text_form_field.dart';
import 'package:cake_wallet/themes/extensions/exchange_page_theme.dart';
import 'package:cake_wallet/typography.dart';
import 'package:cake_wallet/utils/show_pop_up.dart';
import 'package:cake_wallet/view_model/anon_invoice_page_view_model.dart';
@ -69,17 +70,14 @@ class AnonInvoiceForm extends StatelessWidget {
BaseTextFormField(
controller: nameController,
focusNode: _nameFocusNode,
borderColor: Theme.of(context).primaryTextTheme!.bodyLarge!.color!,
borderColor: Theme.of(context).extension<ExchangePageTheme>()!.textFieldBorderTopPanelColor,
suffixIcon: SizedBox(width: 36),
hintText: S.of(context).optional_name,
textInputAction: TextInputAction.next,
placeholderTextStyle: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w600,
color: Theme.of(context)
.accentTextTheme!
.displayLarge!
.decorationColor!,
color: Theme.of(context).extension<ExchangePageTheme>()!.hintTextColor,
),
textStyle: TextStyle(fontSize: 16, fontWeight: FontWeight.w600, color: Colors.white),
validator: null,
@ -91,16 +89,13 @@ class AnonInvoiceForm extends StatelessWidget {
controller: descriptionController,
focusNode: _descriptionFocusNode,
textInputAction: TextInputAction.next,
borderColor: Theme.of(context).primaryTextTheme!.bodyLarge!.color!,
borderColor: Theme.of(context).extension<ExchangePageTheme>()!.textFieldBorderTopPanelColor,
suffixIcon: SizedBox(width: 36),
hintText: S.of(context).optional_description,
placeholderTextStyle: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w600,
color: Theme.of(context)
.accentTextTheme!
.displayLarge!
.decorationColor!,
color: Theme.of(context).extension<ExchangePageTheme>()!.hintTextColor,
),
textStyle: TextStyle(fontSize: 16, fontWeight: FontWeight.w600, color: Colors.white),
validator: null,
@ -110,17 +105,14 @@ class AnonInvoiceForm extends StatelessWidget {
controller: emailController,
textInputAction: TextInputAction.next,
focusNode: _emailFocusNode,
borderColor: Theme.of(context).primaryTextTheme!.bodyLarge!.color!,
borderColor: Theme.of(context).extension<ExchangePageTheme>()!.textFieldBorderTopPanelColor,
suffixIcon: SizedBox(width: 36),
keyboardType: TextInputType.emailAddress,
hintText: S.of(context).optional_email_hint,
placeholderTextStyle: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w600,
color: Theme.of(context)
.accentTextTheme!
.displayLarge!
.decorationColor!,
color: Theme.of(context).extension<ExchangePageTheme>()!.hintTextColor,
),
textStyle: TextStyle(fontSize: 16, fontWeight: FontWeight.w600, color: Colors.white),
validator: EmailValidator(),

View file

@ -1,6 +1,7 @@
import 'package:cake_wallet/anonpay/anonpay_invoice_info.dart';
import 'package:cake_wallet/generated/i18n.dart';
import 'package:cake_wallet/src/screens/dashboard/widgets/sync_indicator_icon.dart';
import 'package:cake_wallet/themes/extensions/exchange_page_theme.dart';
import 'package:cake_wallet/typography.dart';
import 'package:flutter/material.dart';
@ -31,10 +32,7 @@ class AnonInvoiceStatusSection extends StatelessWidget {
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.w500,
color: Theme.of(context)
.primaryTextTheme!
.displayLarge!
.decorationColor!,
color: Theme.of(context).extension<ExchangePageTheme>()!.receiveAmountColor,
),
),
Container(
@ -78,10 +76,7 @@ class AnonInvoiceStatusSection extends StatelessWidget {
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.w500,
color: Theme.of(context)
.primaryTextTheme!
.displayLarge!
.decorationColor!,
color: Theme.of(context).extension<ExchangePageTheme>()!.receiveAmountColor,
),
),
Text(

View file

@ -1,4 +1,5 @@
import 'package:cake_wallet/palette.dart';
import 'package:cake_wallet/themes/extensions/exchange_page_theme.dart';
import 'package:flutter/material.dart';
import 'package:cake_wallet/themes/theme_base.dart';
@ -21,8 +22,8 @@ class TradeDetailsStandardListCard extends StatelessWidget {
final darkTheme = currentTheme == ThemeType.dark;
final baseGradient = LinearGradient(colors: [
Theme.of(context).primaryTextTheme!.titleSmall!.color!,
Theme.of(context).primaryTextTheme!.titleSmall!.decorationColor!,
Theme.of(context).extension<ExchangePageTheme>()!.firstGradientTopPanelColor,
Theme.of(context).extension<ExchangePageTheme>()!.secondGradientTopPanelColor,
], begin: Alignment.centerLeft, end: Alignment.centerRight);
final gradient = LinearGradient(colors: [

View file

@ -1,3 +1,4 @@
import 'package:cake_wallet/themes/extensions/exchange_page_theme.dart';
import 'package:flutter/material.dart';
import 'package:cake_wallet/palette.dart';
@ -24,10 +25,7 @@ class TrailButton extends StatelessWidget {
caption,
style: TextStyle(
color: textColor ??
Theme.of(context)
.accentTextTheme!
.displayLarge!
.decorationColor!,
Theme.of(context).extension<ExchangePageTheme>()!.hintTextColor,
fontWeight: FontWeight.w600,
fontSize: 14),
),

View file

@ -1,4 +1,5 @@
import 'package:cake_wallet/themes/extensions/dashboard_gradient_theme.dart';
import 'package:cake_wallet/themes/extensions/exchange_page_theme.dart';
import 'package:cake_wallet/themes/extensions/sync_indicator_theme.dart';
import 'package:cake_wallet/themes/light_theme.dart';
import 'package:cake_wallet/themes/theme_base.dart';
@ -31,6 +32,13 @@ class BrightTheme extends LightTheme {
syncedBackgroundColor: Colors.white.withOpacity(0.2),
notSyncedBackgroundColor: Colors.white.withOpacity(0.15));
@override
ExchangePageTheme get exchangePageTheme => super.exchangePageTheme.copyWith(
secondGradientBottomPanelColor: Palette.pinkFlamingo.withOpacity(0.7),
firstGradientBottomPanelColor: Palette.blueCraiola.withOpacity(0.7),
secondGradientTopPanelColor: Palette.pinkFlamingo,
firstGradientTopPanelColor: Palette.blueCraiola);
@override
ThemeData get themeData => super.themeData.copyWith(
indicatorColor: Colors.white.withOpacity(0.5), // page indicator
@ -142,96 +150,68 @@ class BrightTheme extends LightTheme {
),
// display4 -> displayLarge
displayLarge: TextStyle(
color: Palette.darkBlueCraiola, // template title (send page)
backgroundColor:
Colors.white, // icon color on order row (moonpay)
decorationColor:
Palette.niagara // receive amount text (exchange page)
),
// subtitle -> titleSmall
titleSmall: TextStyle(
color: Palette
.blueCraiola, // first gradient color top panel (exchange page)
decorationColor: Palette
.pinkFlamingo // second gradient color top panel (exchange page)
),
// body -> bodyMedium
bodyMedium: 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)
color: Palette.darkBlueCraiola, // template title (send page)
backgroundColor: Colors.white, // icon color on order row (moonpay)
),
// body2 -> bodyLarge
bodyLarge: 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)
backgroundColor: Palette.brightOrange // alert left button text
)),
focusColor:
Colors.white.withOpacity(0.2), // text field button (exchange page)
accentTextTheme: TextTheme(
// title -> titleLarge
titleLarge: TextStyle(
backgroundColor: Palette.periwinkleCraiola, // picker divider
),
bodySmall: TextStyle(
backgroundColor: Palette
.moderateLavender, // button background (confirm exchange)
// title -> titleLarge
titleLarge: TextStyle(
backgroundColor: Palette.periwinkleCraiola, // picker divider
),
bodySmall: TextStyle(
decorationColor:
Palette.darkBlueCraiola, // text color (information page)
),
// subtitle -> titleSmall
titleSmall: TextStyle(
//decorationColor: Palette.blueCraiola // crete new wallet button background (wallet list page)
decorationColor: Palette
.moderateSlateBlue // crete new wallet button background (wallet list page)
),
// headline -> headlineSmall
headlineSmall: TextStyle(
color: Palette
.moderateLavender, // first gradient color of wallet action buttons (wallet list page)
decorationColor: Colors
.white // restore wallet button text color (wallet list page)
),
// subhead -> titleMedium
titleMedium: TextStyle(
color: Palette.darkGray, // titles color (filter widget)
backgroundColor:
Palette.periwinkle, // divider color (filter widget)
decorationColor: Colors.white // checkbox background (filter widget)
),
labelSmall: TextStyle(
color: Palette.wildPeriwinkle, // checkbox bounds (filter widget)
decorationColor: Colors.white, // menu subname
),
// display1 -> headlineMedium
headlineMedium: TextStyle(
color: Palette.blueCraiola, // first gradient color (menu header)
decorationColor:
Palette.darkBlueCraiola, // text color (information page)
),
// subtitle -> titleSmall
titleSmall: TextStyle(
color: Palette.darkBlueCraiola, // QR code (exchange trade page)
backgroundColor:
Palette.wildPeriwinkle, // divider (exchange trade page)
//decorationColor: Palette.blueCraiola // crete new wallet button background (wallet list page)
decorationColor: Palette
.moderateSlateBlue // crete new wallet button background (wallet list page)
),
// headline -> headlineSmall
headlineSmall: TextStyle(
color: Palette
.moderateLavender, // first gradient color of wallet action buttons (wallet list page)
decorationColor: Colors
.white // restore wallet button text color (wallet list page)
),
// subhead -> titleMedium
titleMedium: TextStyle(
color: Palette.darkGray, // titles color (filter widget)
backgroundColor:
Palette.periwinkle, // divider color (filter widget)
decorationColor:
Colors.white // checkbox background (filter widget)
),
labelSmall: TextStyle(
color: Palette.wildPeriwinkle, // checkbox bounds (filter widget)
decorationColor: Colors.white, // menu subname
),
// display1 -> headlineMedium
headlineMedium: TextStyle(
color: Palette.blueCraiola, // first gradient color (menu header)
decorationColor: Palette.pinkFlamingo, // second gradient color(menu header)
backgroundColor: Colors.white // active dot color
),
// display2 -> displaySmall
displaySmall: TextStyle(
color: Palette.shadowWhite, // action button color (address text field)
decorationColor: Palette.darkGray, // hint text (seed widget)
backgroundColor: Colors.white.withOpacity(0.5) // text on balance page
),
// display3 -> displayMedium
displayMedium: TextStyle(
color: Palette.darkGray, // hint text (new wallet page)
decorationColor: Palette.periwinkleCraiola, // underline (new wallet page)
backgroundColor: Colors.white // menu, icons, balance (dashboard page)
),
// display4 -> displayLarge
displayLarge: TextStyle(
decorationColor: Colors.white.withOpacity(0.4) // hint text (exchange page)
),
));
Palette.pinkFlamingo, // second gradient color(menu header)
backgroundColor: Colors.white // active dot color
),
// display2 -> displaySmall
displaySmall: TextStyle(
color:
Palette.shadowWhite, // action button color (address text field)
decorationColor: Palette.darkGray, // hint text (seed widget)
backgroundColor:
Colors.white.withOpacity(0.5) // text on balance page
),
// display3 -> displayMedium
displayMedium: TextStyle(
color: Palette.darkGray, // hint text (new wallet page)
decorationColor:
Palette.periwinkleCraiola, // underline (new wallet page)
backgroundColor:
Colors.white // menu, icons, balance (dashboard page)
),
));
}

View file

@ -1,4 +1,5 @@
import 'package:cake_wallet/themes/extensions/cake_scrollbar_theme.dart';
import 'package:cake_wallet/themes/extensions/exchange_page_theme.dart';
import 'package:cake_wallet/themes/extensions/keyboard_theme.dart';
import 'package:cake_wallet/themes/extensions/pin_code_theme.dart';
import 'package:cake_wallet/themes/extensions/support_page_theme.dart';
@ -52,6 +53,21 @@ class DarkTheme extends ThemeBase {
SupportPageTheme get supportPageTheme =>
SupportPageTheme(iconColor: Colors.white);
@override
ExchangePageTheme get exchangePageTheme => ExchangePageTheme(
hintTextColor: PaletteDark.lightBlueGrey,
dividerCodeColor: PaletteDark.deepVioletBlue,
qrCodeColor: primaryTextColor,
buttonBackgroundColor: PaletteDark.deepVioletBlue,
textFieldButtonColor: PaletteDark.moderateBlue,
textFieldBorderBottomPanelColor: PaletteDark.moderateVioletBlue,
textFieldBorderTopPanelColor: PaletteDark.blueGrey,
secondGradientBottomPanelColor: PaletteDark.darkNightBlue,
firstGradientBottomPanelColor: PaletteDark.darkNightBlue,
secondGradientTopPanelColor: PaletteDark.wildVioletBlue,
firstGradientTopPanelColor: PaletteDark.wildVioletBlue,
receiveAmountColor: PaletteDark.darkCyanBlue);
@override
ThemeData get themeData => super.themeData.copyWith(
indicatorColor: PaletteDark.cyanBlue, // page indicator
@ -170,47 +186,22 @@ class DarkTheme extends ThemeBase {
color: PaletteDark.cyanBlue, // template title (send page)
backgroundColor:
Colors.white, // icon color on order row (moonpay)
decorationColor: PaletteDark
.darkCyanBlue // receive amount text (exchange page)
),
// subtitle -> titleSmall
titleSmall: TextStyle(
color: PaletteDark
.wildVioletBlue, // first gradient color top panel (exchange page)
decorationColor: PaletteDark
.wildVioletBlue // second gradient color top panel (exchange page)
),
// body1 -> bodyMedium
bodyMedium: TextStyle(
color: PaletteDark
.darkNightBlue, // first gradient color bottom panel (exchange page)
decorationColor: PaletteDark
.darkNightBlue, // second gradient color bottom panel (exchange page)
),
// body2 -> bodyLarge
bodyLarge: TextStyle(
color: PaletteDark
.blueGrey, // text field border on top panel (exchange page)
decorationColor: PaletteDark
.moderateVioletBlue, // text field border on bottom panel (exchange page)
backgroundColor: Palette.alizarinRed // alert left button text
)
),
focusColor: PaletteDark.moderateBlue, // text field button (exchange page)
accentTextTheme: TextTheme(
// title -> titleLarge
titleLarge: TextStyle(
backgroundColor: PaletteDark.dividerColor, // picker divider
),
bodySmall: TextStyle(
backgroundColor: PaletteDark.deepVioletBlue, // button background (confirm exchange)
decorationColor: Palette.darkLavender, // text color (information page)
),
// subtitle -> titleSmall
titleSmall: TextStyle(
color: Colors.white, // QR code (exchange trade page)
backgroundColor:
PaletteDark.deepVioletBlue, // divider (exchange trade page)
decorationColor: Colors
.white // crete new wallet button background (wallet list page)
),
@ -257,11 +248,6 @@ class DarkTheme extends ThemeBase {
backgroundColor:
Colors.white // menu, icons, balance (dashboard page)
),
// display4 -> displayLarge
displayLarge: TextStyle(
decorationColor:
PaletteDark.lightBlueGrey // hint text (exchange page)
),
),
);
}

View file

@ -0,0 +1,88 @@
import 'package:flutter/material.dart';
class ExchangePageTheme extends ThemeExtension<ExchangePageTheme> {
final Color hintTextColor;
final Color receiveAmountColor;
final Color firstGradientTopPanelColor;
final Color secondGradientTopPanelColor;
final Color firstGradientBottomPanelColor;
final Color secondGradientBottomPanelColor;
final Color textFieldBorderTopPanelColor;
final Color textFieldBorderBottomPanelColor;
final Color textFieldButtonColor;
final Color buttonBackgroundColor;
final Color qrCodeColor;
final Color dividerCodeColor;
ExchangePageTheme(
{required this.hintTextColor,
required this.receiveAmountColor,
required this.firstGradientTopPanelColor,
required this.secondGradientTopPanelColor,
required this.firstGradientBottomPanelColor,
required this.secondGradientBottomPanelColor,
required this.textFieldBorderTopPanelColor,
required this.textFieldBorderBottomPanelColor,
required this.textFieldButtonColor,
required this.buttonBackgroundColor,
required this.qrCodeColor,
required this.dividerCodeColor});
@override
ExchangePageTheme copyWith({
Color? hintTextColor,
Color? receiveAmountColor,
Color? firstGradientTopPanelColor,
Color? secondGradientTopPanelColor,
Color? firstGradientBottomPanelColor,
Color? secondGradientBottomPanelColor,
Color? textFieldBorderTopPanelColor,
Color? textFieldBorderBottomPanelColor,
Color? textFieldButtonColor,
Color? buttonBackgroundColor,
Color? qrCodeColor,
Color? dividerCodeColor,
}) =>
ExchangePageTheme(
hintTextColor: hintTextColor ?? this.hintTextColor,
receiveAmountColor: receiveAmountColor ?? this.receiveAmountColor,
firstGradientTopPanelColor:
firstGradientTopPanelColor ?? this.firstGradientTopPanelColor,
secondGradientTopPanelColor:
secondGradientTopPanelColor ?? this.secondGradientTopPanelColor,
firstGradientBottomPanelColor: firstGradientBottomPanelColor ??
this.firstGradientBottomPanelColor,
secondGradientBottomPanelColor: secondGradientBottomPanelColor ??
this.secondGradientBottomPanelColor,
textFieldBorderTopPanelColor:
textFieldBorderTopPanelColor ?? this.textFieldBorderTopPanelColor,
textFieldBorderBottomPanelColor: textFieldBorderBottomPanelColor ??
this.textFieldBorderBottomPanelColor,
textFieldButtonColor:
textFieldButtonColor ?? this.textFieldButtonColor,
buttonBackgroundColor:
buttonBackgroundColor ?? this.buttonBackgroundColor,
qrCodeColor: qrCodeColor ?? this.qrCodeColor,
dividerCodeColor: dividerCodeColor ?? this.dividerCodeColor);
@override
ExchangePageTheme lerp(ThemeExtension<ExchangePageTheme>? other, double t) {
if (other is! ExchangePageTheme) {
return this;
}
return ExchangePageTheme(
hintTextColor: Color.lerp(hintTextColor, other.hintTextColor, t) ?? hintTextColor,
receiveAmountColor: Color.lerp(receiveAmountColor, other.receiveAmountColor, t) ?? receiveAmountColor,
firstGradientTopPanelColor: Color.lerp(firstGradientTopPanelColor, other.firstGradientTopPanelColor, t) ?? firstGradientTopPanelColor,
secondGradientTopPanelColor: Color.lerp(secondGradientTopPanelColor, other.secondGradientTopPanelColor, t) ?? secondGradientTopPanelColor,
firstGradientBottomPanelColor: Color.lerp(firstGradientBottomPanelColor, other.firstGradientBottomPanelColor, t) ?? firstGradientBottomPanelColor,
secondGradientBottomPanelColor: Color.lerp(secondGradientBottomPanelColor, other.secondGradientBottomPanelColor, t) ?? secondGradientBottomPanelColor,
textFieldBorderTopPanelColor: Color.lerp(textFieldBorderTopPanelColor, other.textFieldBorderTopPanelColor, t) ?? textFieldBorderTopPanelColor,
textFieldBorderBottomPanelColor: Color.lerp(textFieldBorderBottomPanelColor, other.textFieldBorderBottomPanelColor, t) ?? textFieldBorderBottomPanelColor,
textFieldButtonColor: Color.lerp(textFieldButtonColor, other.textFieldButtonColor, t) ?? textFieldButtonColor,
buttonBackgroundColor: Color.lerp(buttonBackgroundColor, other.buttonBackgroundColor, t) ?? buttonBackgroundColor,
qrCodeColor: Color.lerp(qrCodeColor, other.qrCodeColor, t) ?? qrCodeColor,
dividerCodeColor: Color.lerp(dividerCodeColor, other.dividerCodeColor, t) ?? dividerCodeColor);
}
}

View file

@ -1,4 +1,5 @@
import 'package:cake_wallet/themes/extensions/cake_scrollbar_theme.dart';
import 'package:cake_wallet/themes/extensions/exchange_page_theme.dart';
import 'package:cake_wallet/themes/extensions/keyboard_theme.dart';
import 'package:cake_wallet/themes/extensions/pin_code_theme.dart';
import 'package:cake_wallet/themes/extensions/support_page_theme.dart';
@ -53,6 +54,21 @@ class LightTheme extends ThemeBase {
SupportPageTheme get supportPageTheme =>
SupportPageTheme(iconColor: Colors.black);
@override
ExchangePageTheme get exchangePageTheme => ExchangePageTheme(
hintTextColor: Colors.white.withOpacity(0.4),
dividerCodeColor: Palette.wildPeriwinkle,
qrCodeColor: primaryTextColor,
buttonBackgroundColor: containerColor,
textFieldButtonColor: Colors.white.withOpacity(0.2),
textFieldBorderBottomPanelColor: Colors.white.withOpacity(0.5),
textFieldBorderTopPanelColor: Colors.white.withOpacity(0.5),
secondGradientBottomPanelColor: Palette.blueGreyCraiola.withOpacity(0.7),
firstGradientBottomPanelColor: Palette.blueCraiola.withOpacity(0.7),
secondGradientTopPanelColor: Palette.blueGreyCraiola,
firstGradientTopPanelColor: Palette.blueCraiola,
receiveAmountColor: Palette.niagara);
@override
ThemeData get themeData => super.themeData.copyWith(
indicatorColor:
@ -171,47 +187,22 @@ class LightTheme extends ThemeBase {
color: Palette.darkBlueCraiola, // template title (send page)
backgroundColor:
Colors.black, // icon color on order row (moonpay)
decorationColor:
Palette.niagara // receive amount text (exchange page)
),
// subtitle -> titleSmall
titleSmall: TextStyle(
color: Palette
.blueCraiola, // first gradient color top panel (exchange page)
decorationColor: Palette
.blueGreyCraiola // second gradient color top panel (exchange page)
),
// body -> bodyMedium
bodyMedium: TextStyle(
color: Palette.blueCraiola.withOpacity(
0.7), // first gradient color bottom panel (exchange page)
decorationColor: Palette.blueGreyCraiola.withOpacity(
0.7), // second gradient color bottom panel (exchange page)
),
// body2 -> bodyLarge
bodyLarge: 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)
backgroundColor: Palette.brightOrange // alert left button text
)
),
focusColor: Colors.white.withOpacity(0.2), // text field button (exchange page)
accentTextTheme: TextTheme(
// title -> headlititleLargene6
titleLarge: TextStyle(
backgroundColor: Palette.periwinkleCraiola, // picker divider
),
bodySmall: TextStyle(
backgroundColor: Palette.blueAlice, // button background (confirm exchange)
decorationColor: Palette.darkBlueCraiola, // text color (information page)
),
// subtitle -> titleSmall
titleSmall: TextStyle(
color: Palette.darkBlueCraiola, // QR code (exchange trade page)
backgroundColor:
Palette.wildPeriwinkle, // divider (exchange trade page)
decorationColor: Palette
.protectiveBlue // crete new wallet button background (wallet list page)
),
@ -254,11 +245,6 @@ class LightTheme extends ThemeBase {
backgroundColor:
Palette.darkBlueCraiola // menu, icons, balance (dashboard page)
),
// display4 -> displayLarge
displayLarge: TextStyle(
decorationColor:
Colors.white.withOpacity(0.4) // hint text (exchange page)
),
),
);
}

View file

@ -1,5 +1,6 @@
import 'package:cake_wallet/themes/extensions/cake_scrollbar_theme.dart';
import 'package:cake_wallet/themes/extensions/dashboard_gradient_theme.dart';
import 'package:cake_wallet/themes/extensions/exchange_page_theme.dart';
import 'package:cake_wallet/themes/extensions/keyboard_theme.dart';
import 'package:cake_wallet/themes/extensions/pin_code_theme.dart';
import 'package:cake_wallet/themes/extensions/support_page_theme.dart';
@ -51,6 +52,8 @@ abstract class ThemeBase {
SupportPageTheme get supportPageTheme;
ExchangePageTheme get exchangePageTheme;
ThemeData get themeData => generatedThemeData.copyWith(
primaryColor: primaryColor,
cardColor: containerColor,
@ -62,6 +65,7 @@ abstract class ThemeBase {
keyboardTheme,
pinCodeTheme,
supportPageTheme,
exchangePageTheme,
],
scrollbarTheme: ScrollbarThemeData(
thumbColor: MaterialStateProperty.all(scrollbarTheme.thumbColor),