Ecosystem/cake_wallet
1
0
Fork 0
mirror of https://github.com/cake-tech/cake_wallet.git synced 2024-12-22 11:39:22 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

CAKE-20 | applied light theme to dashboard, receive, monero_account_list, monero_account_edit_or_create, address_edit_or_create, trade_details, transaction_details and base pages

Browse source
This commit is contained in:
Oleksandr Sobol 2020-08-19 20:57:06 +03:00
parent 1ba86506f0
commit 27dce3118d
30 changed files with 399 additions and 227 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
assets/images/2.0x/bitcoin_menu.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.3 KiB

BIN
assets/images/3.0x/bitcoin_menu.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3.4 KiB

BIN
assets/images/bitcoin_menu.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.2 KiB

17
lib/palette.dart
View file

@ -13,6 +13,23 @@ class Palette {
static const Color blue = Color.fromRGBO(88, 143, 252, 1.0);
static const Color darkLavender = Color.fromRGBO(225, 238, 250, 1.0);
static const Color nightBlue = Color.fromRGBO(46, 57, 96, 1.0);
// NEW DESIGN
static const Color blueCraiola = Color.fromRGBO(69, 110, 255, 1.0);
static const Color darkBlueCraiola = Color.fromRGBO(53, 86, 136, 1.0);
static const Color pinkFlamingo = Color.fromRGBO(240, 60, 243, 1.0);
static const Color redHat = Color.fromRGBO(209, 68, 37, 1.0);
static const Color shineOrange = Color.fromRGBO(255, 184, 78, 1.0);
static const Color paleBlue = Color.fromRGBO(225, 228, 233, 1.0);
static const Color violetBlue = Color.fromRGBO(56, 69, 103, 1.0);
static const Color periwinkleCraiola = Color.fromRGBO(229, 232, 242, 1.0);
static const Color moderatePurpleBlue = Color.fromRGBO(57, 74, 95, 1.0);
static const Color moderateLavender = Color.fromRGBO(233, 242, 252, 1.0);
static const Color wildLavender = Color.fromRGBO(224, 230, 246, 1.0);
static const Color gray = Color.fromRGBO(112, 147, 186, 1.0);
static const Color wildPeriwinkle = Color.fromRGBO(219, 227, 243, 1.0);
static const Color darkGray = Color.fromRGBO(122, 147, 186, 1.0);
// FIXME: Rename.
static const Color eee = Color.fromRGBO(236, 239, 245, 1.0);
static const Color xxx = Color.fromRGBO(72, 89, 109, 1);

27
lib/src/screens/base_page.dart
View file

@ -15,7 +15,9 @@ abstract class BasePage extends StatelessWidget {
Color get backgroundLightColor => Colors.white;
Color get backgroundDarkColor => PaletteDark.darkNightBlue;
Color get backgroundDarkColor => PaletteDark.backgroundColor;
Color get titleColor => null;
bool get resizeToAvoidBottomPadding => true;
@ -27,11 +29,6 @@ abstract class BasePage extends StatelessWidget {
final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
final _backArrowImage = Image.asset('assets/images/back_arrow.png',
color: Colors.white);
final _backArrowImageDarkTheme =
Image.asset('assets/images/back_arrow_dark_theme.png',
color: Colors.white);
final _closeButtonImage = Image.asset('assets/images/close_button.png');
final _closeButtonImageDarkTheme =
Image.asset('assets/images/close_button_dark_theme.png');
@ -45,16 +42,13 @@ abstract class BasePage extends StatelessWidget {
return null;
}
final _themeChanger = Provider.of<ThemeChanger>(context);
Image _closeButton, _backButton;
final _backButton = Image.asset('assets/images/back_arrow.png',
color: titleColor ?? Theme.of(context).primaryTextTheme.title.color);
if (_themeChanger.getTheme() == Themes.darkTheme) {
_backButton = _backArrowImageDarkTheme;
_closeButton = _closeButtonImageDarkTheme;
} else {
_backButton = _backArrowImage;
_closeButton = _closeButtonImage;
}
final _themeChanger = Provider.of<ThemeChanger>(context);
final _closeButton = _themeChanger.getTheme() == Themes.darkTheme
? _closeButtonImageDarkTheme
: _closeButtonImage;
return SizedBox(
height: 37,
@ -79,7 +73,8 @@ abstract class BasePage extends StatelessWidget {
style: TextStyle(
fontSize: 18.0,
fontWeight: FontWeight.bold,
color: Colors.white),
color: titleColor ??
Theme.of(context).primaryTextTheme.title.color),
);
}

20
lib/src/screens/dashboard/dashboard_page.dart
View file

@ -5,7 +5,6 @@ import 'package:flutter/cupertino.dart';
import 'package:cake_wallet/view_model/dashboard/dashboard_view_model.dart';
import 'package:cake_wallet/src/screens/base_page.dart';
import 'package:cake_wallet/src/screens/dashboard/widgets/menu_widget.dart';
import 'package:cake_wallet/palette.dart';
import 'package:cake_wallet/src/screens/dashboard/widgets/action_button.dart';
import 'package:cake_wallet/src/screens/dashboard/widgets/balance_page.dart';
import 'package:cake_wallet/src/screens/dashboard/widgets/address_page.dart';
@ -21,10 +20,23 @@ class DashboardPage extends BasePage {
});
@override
Color get backgroundLightColor => PaletteDark.backgroundColor;
Color get backgroundLightColor => Colors.transparent;
@override
Color get backgroundDarkColor => PaletteDark.backgroundColor;
Color get backgroundDarkColor => Colors.transparent;
@override
Widget Function(BuildContext, Widget) get rootWrapper =>
(BuildContext context, Widget scaffold) => Container(
decoration: BoxDecoration(
gradient: LinearGradient(colors: [
Theme.of(context).accentColor,
Theme.of(context).scaffoldBackgroundColor,
Theme.of(context).primaryColor,
],
begin: Alignment.topRight,
end: Alignment.bottomLeft)),
child: scaffold);
@override
bool get resizeToAvoidBottomPadding => false;
@ -101,7 +113,7 @@ class DashboardPage extends BasePage {
radius: 6.0,
dotWidth: 6.0,
dotHeight: 6.0,
dotColor: PaletteDark.cyanBlue,
dotColor: Theme.of(context).indicatorColor,
activeDotColor: Colors.white
),
)

3
lib/src/screens/dashboard/widgets/action_button.dart
View file

@ -1,5 +1,4 @@
import 'package:flutter/material.dart';
import 'package:cake_wallet/palette.dart';
class ActionButton extends StatelessWidget{
ActionButton({
@ -36,7 +35,7 @@ class ActionButton extends StatelessWidget{
width: 60,
alignment: Alignment.center,
decoration: BoxDecoration(
color: PaletteDark.nightBlue,
color: Theme.of(context).buttonColor,
shape: BoxShape.circle),
child: image,
),

7
lib/src/screens/dashboard/widgets/address_page.dart
View file

@ -1,6 +1,5 @@
import 'package:flutter/material.dart';
import 'package:cake_wallet/view_model/wallet_address_list/wallet_address_list_view_model.dart';
import 'package:cake_wallet/palette.dart';
import 'package:cake_wallet/src/screens/receive/widgets/qr_widget.dart';
import 'package:cake_wallet/routes.dart';
import 'package:cake_wallet/generated/i18n.dart';
@ -29,7 +28,11 @@ class AddressPage extends StatelessWidget {
alignment: Alignment.center,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(25)),
color: PaletteDark.nightBlue
border: Border.all(
color: Theme.of(context).textTheme.subhead.color,
width: 1
),
color: Theme.of(context).buttonColor
),
child: Row(
mainAxisSize: MainAxisSize.max,

5
lib/src/screens/dashboard/widgets/balance_page.dart
View file

@ -1,6 +1,5 @@
import 'package:flutter/material.dart';
import 'package:cake_wallet/view_model/dashboard/dashboard_view_model.dart';
import 'package:cake_wallet/palette.dart';
import 'package:flutter_mobx/flutter_mobx.dart';
class BalancePage extends StatelessWidget {
@ -26,7 +25,7 @@ class BalancePage extends StatelessWidget {
style: TextStyle(
fontSize: 40,
fontWeight: FontWeight.bold,
color: PaletteDark.cyanBlue,
color: Theme.of(context).indicatorColor,
height: 1
),
);
@ -52,7 +51,7 @@ class BalancePage extends StatelessWidget {
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.w500,
color: PaletteDark.cyanBlue,
color: Theme.of(context).indicatorColor,
height: 1
),
);

3
lib/src/screens/dashboard/widgets/date_section_raw.dart
View file

@ -3,7 +3,6 @@ import 'package:intl/intl.dart';
import 'package:cake_wallet/generated/i18n.dart';
import 'package:provider/provider.dart';
import 'package:cake_wallet/src/stores/settings/settings_store.dart';
import 'package:cake_wallet/palette.dart';
class DateSectionRaw extends StatelessWidget {
DateSectionRaw({this.date});
@ -42,7 +41,7 @@ class DateSectionRaw extends StatelessWidget {
child: Text(title,
style: TextStyle(
fontSize: 12,
color: PaletteDark.darkCyanBlue
color: Theme.of(context).textTheme.overline.backgroundColor
))
);
}

49
lib/src/screens/dashboard/widgets/header_row.dart
View file

@ -1,5 +1,4 @@
import 'package:flutter/material.dart';
import 'package:cake_wallet/palette.dart';
import 'package:cake_wallet/generated/i18n.dart';
import 'package:cake_wallet/view_model/dashboard/dashboard_view_model.dart';
import 'package:cake_wallet/src/domain/exchange/exchange_provider_description.dart';
@ -11,11 +10,11 @@ class HeaderRow extends StatelessWidget {
final DashboardViewModel dashboardViewModel;
final filterIcon = Image.asset('assets/images/filter_icon.png',
color: PaletteDark.wildBlue);
@override
Widget build(BuildContext context) {
final filterIcon = Image.asset('assets/images/filter_icon.png',
color: Theme.of(context).textTheme.caption.decorationColor);
return Container(
height: 52,
color: Colors.transparent,
@ -40,7 +39,7 @@ class HeaderRow extends StatelessWidget {
child: Text(S.of(context).transactions,
style: TextStyle(
fontWeight: FontWeight.bold,
color: Theme.of(context).primaryTextTheme.caption.color))),
color: Theme.of(context).primaryTextTheme.title.color))),
PopupMenuItem(
value: 0,
child: Observer(
@ -49,7 +48,11 @@ class HeaderRow extends StatelessWidget {
MainAxisAlignment
.spaceBetween,
children: [
Text(S.of(context).incoming),
Text(S.of(context).incoming,
style: TextStyle(
color: Theme.of(context).primaryTextTheme.title.color
),
),
Checkbox(
value: dashboardViewModel
.transactionFilterStore
@ -67,7 +70,11 @@ class HeaderRow extends StatelessWidget {
MainAxisAlignment
.spaceBetween,
children: [
Text(S.of(context).outgoing),
Text(S.of(context).outgoing,
style: TextStyle(
color: Theme.of(context).primaryTextTheme.title.color
)
),
Checkbox(
value: dashboardViewModel
.transactionFilterStore
@ -80,7 +87,11 @@ class HeaderRow extends StatelessWidget {
PopupMenuItem(
value: 2,
child:
Text(S.of(context).transactions_by_date)),
Text(S.of(context).transactions_by_date,
style: TextStyle(
color: Theme.of(context).primaryTextTheme.title.color
)
)),
PopupMenuDivider(),
PopupMenuItem(
enabled: false,
@ -88,7 +99,7 @@ class HeaderRow extends StatelessWidget {
child: Text(S.of(context).trades,
style: TextStyle(
fontWeight: FontWeight.bold,
color: Theme.of(context).primaryTextTheme.caption.color))),
color: Theme.of(context).primaryTextTheme.title.color))),
PopupMenuItem(
value: 3,
child: Observer(
@ -97,7 +108,11 @@ class HeaderRow extends StatelessWidget {
MainAxisAlignment
.spaceBetween,
children: [
Text('XMR.TO'),
Text('XMR.TO',
style: TextStyle(
color: Theme.of(context).primaryTextTheme.title.color
)
),
Checkbox(
value: dashboardViewModel
.tradeFilterStore
@ -117,7 +132,11 @@ class HeaderRow extends StatelessWidget {
MainAxisAlignment
.spaceBetween,
children: [
Text('Change.NOW'),
Text('Change.NOW',
style: TextStyle(
color: Theme.of(context).primaryTextTheme.title.color
)
),
Checkbox(
value: dashboardViewModel
.tradeFilterStore
@ -137,7 +156,11 @@ class HeaderRow extends StatelessWidget {
MainAxisAlignment
.spaceBetween,
children: [
Text('MorphToken'),
Text('MorphToken',
style: TextStyle(
color: Theme.of(context).primaryTextTheme.title.color
)
),
Checkbox(
value: dashboardViewModel
.tradeFilterStore
@ -155,7 +178,7 @@ class HeaderRow extends StatelessWidget {
width: 36,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: PaletteDark.oceanBlue
color: Theme.of(context).textTheme.overline.color
),
child: filterIcon,
),

21
lib/src/screens/dashboard/widgets/menu_widget.dart
View file

@ -17,7 +17,7 @@ class MenuWidget extends StatefulWidget {
class MenuWidgetState extends State<MenuWidget> {
final moneroIcon = Image.asset('assets/images/monero_menu.png');
final bitcoinIcon = Image.asset('assets/images/bitcoin.png');
final bitcoinIcon = Image.asset('assets/images/bitcoin_menu.png');
final largeScreen = 731;
double menuWidth;
@ -81,7 +81,7 @@ class MenuWidgetState extends State<MenuWidget> {
width: 4,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(2)),
color: Theme.of(context).hintColor),
color: PaletteDark.gray),
)),
SizedBox(width: 12),
Expanded(
@ -92,12 +92,13 @@ class MenuWidgetState extends State<MenuWidget> {
child: Container(
width: menuWidth,
height: double.infinity,
color: PaletteDark.deepPurpleBlue,
color: Theme.of(context).textTheme.body2.decorationColor,
child: SingleChildScrollView(
child: Column(
children: <Widget>[
Container(
height: headerHeight,
color: Theme.of(context).textTheme.body2.color,
padding: EdgeInsets.only(
left: 24,
top: fromTopEdge,
@ -120,7 +121,8 @@ class MenuWidgetState extends State<MenuWidget> {
Text(
widget.name,
style: TextStyle(
color: Colors.white,
color: Theme.of(context).textTheme
.display2.color,
fontSize: 16,
fontWeight: FontWeight.bold),
),
@ -128,7 +130,9 @@ class MenuWidgetState extends State<MenuWidget> {
Text(
widget.subname,
style: TextStyle(
color: PaletteDark.darkCyanBlue,
color: Theme.of(context)
.primaryTextTheme
.caption.color,
fontWeight: FontWeight.w500,
fontSize: 12),
)
@ -140,7 +144,7 @@ class MenuWidgetState extends State<MenuWidget> {
),
Container(
height: 1,
color: PaletteDark.darkOceanBlue,
color: Theme.of(context).primaryTextTheme.caption.decorationColor,
),
ListView.separated(
shrinkWrap: true,
@ -178,7 +182,8 @@ class MenuWidgetState extends State<MenuWidget> {
child: Text(
item,
style: TextStyle(
color: Colors.white,
color: Theme.of(context).textTheme
.display2.color,
fontSize: 16,
fontWeight: FontWeight.bold),
))
@ -189,7 +194,7 @@ class MenuWidgetState extends State<MenuWidget> {
},
separatorBuilder: (_, index) => Container(
height: 1,
color: PaletteDark.darkOceanBlue,
color: Theme.of(context).primaryTextTheme.caption.decorationColor,
),
itemCount: itemCount)
],

21
lib/src/screens/dashboard/widgets/sync_indicator.dart
View file

@ -13,35 +13,36 @@ class SyncIndicator extends StatelessWidget {
Widget build(BuildContext context) {
return Observer(
builder: (_) {
final syncIndicatorWidth = 250.0;
final syncIndicatorWidth = 237.0;
final status = dashboardViewModel.status;
final statusText = status.title();
final progress = status.progress();
final statusText = status != null ? status.title() : '';
final progress = status != null ? status.progress() : 0.0;
final indicatorOffset = progress * syncIndicatorWidth;
final indicatorWidth =
progress <= 1 ? syncIndicatorWidth - indicatorOffset : 0.0;
final indicatorWidth = progress < 1
? indicatorOffset > 0 ? indicatorOffset : 0.0
: syncIndicatorWidth;
final indicatorColor = status is SyncedSyncStatus
? PaletteDark.brightGreen
: PaletteDark.orangeYellow;
: Theme.of(context).textTheme.caption.color;
return ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(15)),
child: Container(
height: 30,
width: syncIndicatorWidth,
color: PaletteDark.lightNightBlue,
color: Theme.of(context).textTheme.title.decorationColor,
child: Stack(
alignment: Alignment.center,
children: <Widget>[
progress <= 1
? Positioned(
left: indicatorOffset,
left: 0,
top: 0,
bottom: 0,
child: Container(
width: indicatorWidth,
height: 30,
color: PaletteDark.oceanBlue,
color: Theme.of(context).textTheme.title.backgroundColor,
)
)
: Offstage(),
@ -70,7 +71,7 @@ class SyncIndicator extends StatelessWidget {
style: TextStyle(
fontSize: 12,
fontWeight: FontWeight.w500,
color: PaletteDark.wildBlue
color: Theme.of(context).textTheme.title.color
),
),
)

4
lib/src/screens/dashboard/widgets/trade_row.dart
View file

@ -1,7 +1,6 @@
import 'package:flutter/material.dart';
import 'package:cake_wallet/src/domain/common/crypto_currency.dart';
import 'package:cake_wallet/src/domain/exchange/exchange_provider_description.dart';
import 'package:cake_wallet/palette.dart';
class TradeRow extends StatelessWidget {
TradeRow({
@ -66,7 +65,8 @@ class TradeRow extends StatelessWidget {
Text(createdAtFormattedDate,
style: TextStyle(
fontSize: 14,
color: PaletteDark.darkCyanBlue))
color: Theme.of(context).textTheme
.overline.backgroundColor))
]),
],
),

9
lib/src/screens/dashboard/widgets/transaction_raw.dart
View file

@ -1,5 +1,4 @@
import 'package:flutter/material.dart';
import 'package:cake_wallet/palette.dart';
import 'package:cake_wallet/src/domain/common/transaction_direction.dart';
import 'package:cake_wallet/generated/i18n.dart';
@ -35,7 +34,7 @@ class TransactionRow extends StatelessWidget {
width: 36,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: PaletteDark.wildNightBlue
color: Theme.of(context).textTheme.overline.decorationColor
),
child: Image.asset(
direction == TransactionDirection.incoming
@ -79,13 +78,15 @@ class TransactionRow extends StatelessWidget {
Text(formattedDate,
style: TextStyle(
fontSize: 14,
color: PaletteDark.darkCyanBlue)),
color: Theme.of(context).textTheme
.overline.backgroundColor)),
Text(direction == TransactionDirection.incoming
? formattedFiatAmount
: '- ' + formattedFiatAmount,
style: TextStyle(
fontSize: 14,
color: PaletteDark.darkCyanBlue))
color: Theme.of(context).textTheme
.overline.backgroundColor))
]),
],
),

5
lib/src/screens/dashboard/widgets/transactions_page.dart
View file

@ -75,7 +75,7 @@ class TransactionsPage extends StatelessWidget {
}
return Container(
color: Theme.of(context).backgroundColor,
color: Colors.transparent,
height: 1);
}
)
@ -84,7 +84,8 @@ class TransactionsPage extends StatelessWidget {
S.of(context).placeholder_transactions,
style: TextStyle(
fontSize: 14,
color: Colors.grey
color: Theme.of(context).primaryTextTheme
.overline.decorationColor
),
),
);

8
lib/src/screens/monero_accounts/monero_account_edit_or_create_page.dart
View file

@ -8,7 +8,6 @@ import 'package:cake_wallet/view_model/monero_account_list/monero_account_edit_o
import 'package:cake_wallet/src/widgets/primary_button.dart';
import 'package:cake_wallet/src/screens/base_page.dart';
import 'package:cake_wallet/src/widgets/base_text_form_field.dart';
import 'package:cake_wallet/palette.dart';
class MoneroAccountEditOrCreatePage extends BasePage {
MoneroAccountEditOrCreatePage({@required this.moneroAccountCreationViewModel})
@ -24,12 +23,6 @@ class MoneroAccountEditOrCreatePage extends BasePage {
@override
String get title => S.current.account;
@override
Color get backgroundLightColor => PaletteDark.backgroundColor;
@override
Color get backgroundDarkColor => PaletteDark.backgroundColor;
final GlobalKey<FormState> _formKey;
final TextEditingController _textController;
@ -45,7 +38,6 @@ class MoneroAccountEditOrCreatePage extends BasePage {
child: Center(
child: BaseTextFormField(
controller: _textController,
textColor: Colors.white,
hintText: S.of(context).account,
validator: MoneroLabelValidator(),
))),

10
lib/src/screens/monero_accounts/monero_account_list_page.dart
View file

@ -64,7 +64,7 @@ class MoneroAccountListPage extends StatelessWidget {
borderRadius: BorderRadius.all(Radius.circular(14)),
child: Container(
height: 296,
color: PaletteDark.deepPurpleBlue,
color: Theme.of(context).textTheme.display4.decorationColor,
child: Column(
children: <Widget>[
Expanded(
@ -83,7 +83,7 @@ class MoneroAccountListPage extends StatelessWidget {
separatorBuilder: (context, index) =>
Container(
height: 1,
color: PaletteDark.dividerColor,
color: Theme.of(context).dividerColor,
),
itemCount: accounts.length ?? 0,
itemBuilder: (context, index) {
@ -121,7 +121,7 @@ class MoneroAccountListPage extends StatelessWidget {
.pushNamed(Routes.accountCreation),
child: Container(
height: 62,
color: Colors.white,
color: Theme.of(context).textTheme.subtitle.decorationColor,
padding: EdgeInsets.only(left: 24, right: 24),
child: Center(
child: Row(
@ -129,7 +129,7 @@ class MoneroAccountListPage extends StatelessWidget {
children: <Widget>[
Icon(
Icons.add,
color: PaletteDark.darkNightBlue,
color: Colors.white,
),
Padding(
padding: EdgeInsets.only(left: 5),
@ -138,7 +138,7 @@ class MoneroAccountListPage extends StatelessWidget {
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.w600,
color: PaletteDark.darkNightBlue,
color: Colors.white,
decoration: TextDecoration.none,
),
),

9
lib/src/screens/monero_accounts/widgets/account_tile.dart
View file

@ -1,5 +1,4 @@
import 'package:flutter/material.dart';
import 'package:cake_wallet/palette.dart';
class AccountTile extends StatelessWidget {
AccountTile({
@ -14,8 +13,12 @@ class AccountTile extends StatelessWidget {
@override
Widget build(BuildContext context) {
final color = isCurrent ? PaletteDark.lightOceanBlue : Colors.transparent;
final textColor = isCurrent ? Colors.blue : Colors.white;
final color = isCurrent
? Theme.of(context).textTheme.subtitle.decorationColor
: Theme.of(context).textTheme.display4.decorationColor;
final textColor = isCurrent
? Theme.of(context).textTheme.subtitle.color
: Theme.of(context).textTheme.display4.color;
return GestureDetector(
onTap: onTap,

37
lib/src/screens/receive/receive_page.dart
View file

@ -14,7 +14,6 @@ import 'package:cake_wallet/view_model/wallet_address_list/wallet_address_list_h
import 'package:cake_wallet/view_model/wallet_address_list/wallet_address_list_item.dart';
import 'package:cake_wallet/view_model/wallet_address_list/wallet_address_list_view_model.dart';
import 'package:cake_wallet/src/screens/receive/widgets/qr_widget.dart';
import 'package:cake_wallet/palette.dart';
class ReceivePage extends BasePage {
ReceivePage({this.addressListViewModel});
@ -25,10 +24,26 @@ class ReceivePage extends BasePage {
String get title => S.current.receive;
@override
Color get backgroundLightColor => PaletteDark.backgroundColor;
Color get backgroundLightColor => Colors.transparent;
@override
Color get backgroundDarkColor => PaletteDark.backgroundColor;
Color get backgroundDarkColor => Colors.transparent;
@override
Color get titleColor => Colors.white;
@override
Widget Function(BuildContext, Widget) get rootWrapper =>
(BuildContext context, Widget scaffold) => Container(
decoration: BoxDecoration(
gradient: LinearGradient(colors: [
Theme.of(context).accentColor,
Theme.of(context).scaffoldBackgroundColor,
Theme.of(context).primaryColor,
],
begin: Alignment.topRight,
end: Alignment.bottomLeft)),
child: scaffold);
@override
Widget trailing(BuildContext context) {
@ -66,7 +81,9 @@ class ReceivePage extends BasePage {
Observer(
builder: (_) => ListView.separated(
separatorBuilder: (context, _) =>
Container(height: 1, color: PaletteDark.dividerColor),
Container(
height: 1,
color: Theme.of(context).dividerColor),
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
itemCount: addressListViewModel.items.length,
@ -83,7 +100,7 @@ class ReceivePage extends BasePage {
icon: Icon(
Icons.arrow_forward_ios,
size: 14,
color: Colors.white,
color: Theme.of(context).textTheme.display1.color,
));
}
@ -95,7 +112,7 @@ class ReceivePage extends BasePage {
icon: Icon(
Icons.add,
size: 20,
color: Colors.white,
color: Theme.of(context).textTheme.display1.color,
));
}
@ -105,11 +122,11 @@ class ReceivePage extends BasePage {
final isCurrent = item.address ==
addressListViewModel.address.address;
final backgroundColor = isCurrent
? PaletteDark.lightOceanBlue
: PaletteDark.nightBlue;
? Theme.of(context).textTheme.display3.decorationColor
: Theme.of(context).textTheme.display2.decorationColor;
final textColor = isCurrent
? Colors.blue
: Colors.white;
? Theme.of(context).textTheme.display3.color
: Theme.of(context).textTheme.display2.color;
return AddressCell.fromItem(item,
isCurrent: isCurrent,

9
lib/src/screens/receive/widgets/header_tile.dart
View file

@ -1,5 +1,4 @@
import 'package:flutter/material.dart';
import 'package:cake_wallet/palette.dart';
class HeaderTile extends StatelessWidget {
HeaderTile({
@ -23,7 +22,7 @@ class HeaderTile extends StatelessWidget {
top: 24,
bottom: 24
),
color: PaletteDark.nightBlue,
color: Theme.of(context).textTheme.display2.decorationColor,
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
@ -32,8 +31,8 @@ class HeaderTile extends StatelessWidget {
title,
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.w500,
color: Colors.white
fontWeight: FontWeight.w600,
color: Theme.of(context).textTheme.display2.color
),
),
Container(
@ -41,7 +40,7 @@ class HeaderTile extends StatelessWidget {
width: 32,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: PaletteDark.distantNightBlue
color: Theme.of(context).textTheme.display1.decorationColor
),
child: icon,
)

11
lib/src/screens/receive/widgets/qr_widget.dart
View file

@ -7,7 +7,6 @@ import 'package:cake_wallet/src/screens/receive/widgets/qr_image.dart';
import 'package:cake_wallet/src/widgets/base_text_form_field.dart';
import 'package:cake_wallet/core/amount_validator.dart';
import 'package:cake_wallet/view_model/wallet_address_list/wallet_address_list_view_model.dart';
import 'package:cake_wallet/palette.dart';
class QRWidget extends StatelessWidget {
QRWidget({
@ -27,7 +26,7 @@ class QRWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
final copyImage = Image.asset('assets/images/copy_address.png',
color: PaletteDark.lightBlueGrey);
color: Theme.of(context).textTheme.subhead.decorationColor);
final addressTopOffset = isAmountFieldShow ? 60.0 : 40.0;
return Column(
@ -45,7 +44,7 @@ class QRWidget extends StatelessWidget {
child: QrImage(
data: addressListViewModel.uri.toString(),
backgroundColor: Colors.transparent,
foregroundColor: PaletteDark.lightBlueGrey,
foregroundColor: Theme.of(context).textTheme.headline.color,
))))),
Spacer(flex: 3)
]),
@ -56,7 +55,7 @@ class QRWidget extends StatelessWidget {
style: TextStyle(
fontSize: 12,
fontWeight: FontWeight.w500,
color: PaletteDark.cyanBlue
color: Theme.of(context).indicatorColor
),
),
),
@ -79,14 +78,14 @@ class QRWidget extends StatelessWidget {
textAlign: TextAlign.center,
hintText: S.of(context).receive_amount,
textColor: Colors.white,
borderColor: PaletteDark.darkGrey,
borderColor: Theme.of(context).textTheme.headline.decorationColor,
validator: AmountValidator(
type: addressListViewModel.type,
isAutovalidate: true
),
autovalidate: true,
placeholderTextStyle: TextStyle(
color: PaletteDark.cyanBlue,
color: Theme.of(context).hoverColor,
fontSize: 18,
fontWeight: FontWeight.w500))))
],

8
lib/src/screens/subaddress/address_edit_or_create_page.dart
View file

@ -8,7 +8,6 @@ import 'package:cake_wallet/core/address_label_validator.dart';
import 'package:cake_wallet/src/widgets/primary_button.dart';
import 'package:cake_wallet/src/widgets/base_text_form_field.dart';
import 'package:cake_wallet/src/screens/base_page.dart';
import 'package:cake_wallet/palette.dart';
class AddressEditOrCreatePage extends BasePage {
AddressEditOrCreatePage({@required this.addressEditOrCreateViewModel})
@ -29,12 +28,6 @@ class AddressEditOrCreatePage extends BasePage {
@override
String get title => S.current.new_subaddress_title;
@override
Color get backgroundLightColor => PaletteDark.backgroundColor;
@override
Color get backgroundDarkColor => PaletteDark.backgroundColor;
@override
Widget body(BuildContext context) {
reaction((_) => addressEditOrCreateViewModel.state,
@ -55,7 +48,6 @@ class AddressEditOrCreatePage extends BasePage {
child: Center(
child: BaseTextFormField(
controller: _labelController,
textColor: Colors.white,
hintText: S.of(context).new_subaddress_label_name,
validator: AddressLabelValidator()))),
Observer(

8
lib/src/screens/trade_details/trade_details_page.dart
View file

@ -24,7 +24,6 @@ class TradeDetailsPage extends BasePage {
formatDefault: "dd.MM.yyyy, HH:mm");
return Container(
padding: EdgeInsets.only(top: 20, bottom: 20),
child: Observer(builder: (_) {
final trade = exchangeStore.trade;
final items = [
@ -59,17 +58,15 @@ class TradeDetailsPage extends BasePage {
separatorBuilder: (_, __) => Container(
height: 1,
padding: EdgeInsets.only(left: 24),
color: Theme.of(context).accentTextTheme.title.backgroundColor,
color: Theme.of(context).backgroundColor,
child: Container(
height: 1,
color: Theme.of(context).dividerColor,
color: Theme.of(context).primaryTextTheme.title.backgroundColor,
),
),
itemCount: items.length,
itemBuilder: (BuildContext context, int index) {
final item = items[index];
final isDrawTop = index == 0 ? true : false;
final isDrawBottom = index == items.length - 1 ? true : false;
return GestureDetector(
@ -87,7 +84,6 @@ class TradeDetailsPage extends BasePage {
child: StandartListRow(
title: '${item.title}',
value: '${item.value}',
isDrawTop: isDrawTop,
isDrawBottom: isDrawBottom,
));
});

8
lib/src/screens/transaction_details/transaction_details_page.dart
View file

@ -69,22 +69,19 @@ class TransactionDetailsPage extends BasePage {
@override
Widget body(BuildContext context) {
return Container(
padding: EdgeInsets.only(top: 20, bottom: 20),
child: ListView.separated(
separatorBuilder: (context, index) => Container(
height: 1,
padding: EdgeInsets.only(left: 24),
color: Theme.of(context).accentTextTheme.title.backgroundColor,
color: Theme.of(context).backgroundColor,
child: Container(
height: 1,
color: Theme.of(context).dividerColor,
color: Theme.of(context).primaryTextTheme.title.backgroundColor,
),
),
itemCount: _items.length,
itemBuilder: (context, index) {
final item = _items[index];
final isDrawTop = index == 0 ? true : false;
final isDrawBottom = index == _items.length - 1 ? true : false;
return GestureDetector(
@ -102,7 +99,6 @@ class TransactionDetailsPage extends BasePage {
child: StandartListRow(
title: '${item.title}:',
value: item.value,
isDrawTop: isDrawTop,
isDrawBottom: isDrawBottom),
);
}),

9
lib/src/widgets/base_text_form_field.dart
View file

@ -64,21 +64,20 @@ class BaseTextFormField extends StatelessWidget {
suffixIcon: suffixIcon,
hintStyle: placeholderTextStyle ??
TextStyle(
color: hintColor ??
Theme.of(context).primaryTextTheme.caption.color,
color: hintColor ?? Theme.of(context).hintColor,
fontSize: 16),
hintText: hintText,
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: borderColor ?? Theme.of(context).dividerColor,
color: borderColor ?? Theme.of(context).primaryTextTheme.title.backgroundColor,
width: 1.0)),
disabledBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: borderColor ?? Theme.of(context).dividerColor,
color: borderColor ?? Theme.of(context).primaryTextTheme.title.backgroundColor,
width: 1.0)),
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: borderColor ?? Theme.of(context).dividerColor,
color: borderColor ?? Theme.of(context).primaryTextTheme.title.backgroundColor,
width: 1.0))),
validator: validator,
);

5
lib/src/widgets/cake_scrollbar.dart
View file

@ -1,5 +1,4 @@
import 'package:flutter/material.dart';
import 'package:cake_wallet/palette.dart';
class CakeScrollbar extends StatelessWidget {
CakeScrollbar({
@ -20,7 +19,7 @@ class CakeScrollbar extends StatelessWidget {
height: backgroundHeight,
width: 6,
decoration: BoxDecoration(
color: PaletteDark.violetBlue,
color: Theme.of(context).textTheme.body1.decorationColor,
borderRadius: BorderRadius.all(Radius.circular(3))
),
child: Stack(
@ -32,7 +31,7 @@ class CakeScrollbar extends StatelessWidget {
height: thumbHeight,
width: 6.0,
decoration: BoxDecoration(
color: PaletteDark.wildBlueGrey,
color: Theme.of(context).textTheme.body1.color,
borderRadius: BorderRadius.all(Radius.circular(3))
),
),

5
lib/src/widgets/primary_button.dart
View file

@ -1,6 +1,5 @@
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:cake_wallet/palette.dart';
class PrimaryButton extends StatelessWidget {
const PrimaryButton(
@ -38,7 +37,7 @@ class PrimaryButton extends StatelessWidget {
fontSize: 15.0,
fontWeight: FontWeight.w600,
color: isDisabled
? Colors.grey.withOpacity(0.5)
? textColor.withOpacity(0.5)
: textColor)),
));
}
@ -78,7 +77,7 @@ class LoadingPrimaryButton extends StatelessWidget {
fontSize: 15.0,
fontWeight: FontWeight.w600,
color: isDisabled
? Colors.grey.withOpacity(0.5)
? textColor.withOpacity(0.5)
: textColor
)),
));

31
lib/src/widgets/standart_list_row.dart
View file

@ -4,28 +4,19 @@ class StandartListRow extends StatelessWidget {
StandartListRow(
{this.title,
this.value,
this.isDrawTop = false,
this.isDrawBottom = false});
final String title;
final String value;
final bool isDrawTop;
final bool isDrawBottom;
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
isDrawTop
? Container(
width: double.infinity,
height: 1,
color: Theme.of(context).dividerColor,
)
: Offstage(),
Container(
width: double.infinity,
color: Theme.of(context).accentTextTheme.title.backgroundColor,
color: Theme.of(context).backgroundColor,
child: Padding(
padding:
const EdgeInsets.only(left: 24, top: 16, bottom: 16, right: 24),
@ -35,9 +26,9 @@ class StandartListRow extends StatelessWidget {
Text(title,
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.w600,
fontWeight: FontWeight.w500,
color:
Theme.of(context).primaryTextTheme.caption.color),
Theme.of(context).primaryTextTheme.overline.color),
textAlign: TextAlign.left),
Padding(
padding: const EdgeInsets.only(top: 12),
@ -54,12 +45,16 @@ class StandartListRow extends StatelessWidget {
),
),
isDrawBottom
? Container(
width: double.infinity,
height: 1,
color: Theme.of(context).dividerColor,
)
: Offstage(),
? Container(
height: 1,
padding: EdgeInsets.only(left: 24),
color: Theme.of(context).backgroundColor,
child: Container(
height: 1,
color: Theme.of(context).primaryTextTheme.title.backgroundColor,
),
)
: Offstage(),
],
);
}

277
lib/themes.dart
View file

@ -7,47 +7,113 @@ class Themes {
fontFamily: 'Poppins',
brightness: Brightness.light,
backgroundColor: Colors.white,
accentColor: Palette.blueCraiola, // first gradient color
scaffoldBackgroundColor: Palette.pinkFlamingo, // second gradient color
primaryColor: Palette.redHat, // third gradient color
buttonColor: Colors.white.withOpacity(0.2), // action buttons on dashboard page
indicatorColor: Colors.white.withOpacity(0.5), // page indicator
hoverColor: Colors.white, // amount hint text (receive page)
dividerColor: Palette.paleBlue,
hintColor: Palette.gray,
textTheme: TextTheme(
title: TextStyle(
color: Colors.white, // sync_indicator text
backgroundColor: Colors.white.withOpacity(0.2), // synced sync_indicator
decorationColor: Colors.white.withOpacity(0.15), // not synced sync_indicator
),
caption: TextStyle(
color: Palette.shineOrange, // not synced light
decorationColor: Colors.white, // filter icon
),
overline: TextStyle(
color: Colors.white.withOpacity(0.2), // filter button
backgroundColor: Colors.white.withOpacity(0.5), // date section row
decorationColor: Colors.white.withOpacity(0.2) // icons (transaction and trade rows)
),
subhead: TextStyle(
color: Colors.white.withOpacity(0.2), // address button border
decorationColor: Colors.white.withOpacity(0.4), // copy button (qr widget)
),
headline: TextStyle(
color: Colors.white, // qr code
decorationColor: Colors.white.withOpacity(0.5), // bottom border of amount (receive page)
),
display1: TextStyle(
color: PaletteDark.lightBlueGrey, // icons color (receive page)
decorationColor: Palette.lavender, // icons background (receive page)
),
display2: TextStyle(
color: Palette.darkBlueCraiola, // text color of tiles (receive page)
decorationColor: Colors.white // background of tiles (receive page)
),
display3: TextStyle(
color: Colors.white, // text color of current tile (receive page),
decorationColor: Palette.blueCraiola // background of current tile (receive page)
),
display4: TextStyle(
color: Palette.violetBlue, // text color of tiles (account list)
decorationColor: Colors.white // background of tiles (account list)
),
subtitle: TextStyle(
color: Colors.white, // text color of current tile (account list)
decorationColor: Palette.blueCraiola // background of current tile (account list)
),
body1: TextStyle(
color: Palette.moderatePurpleBlue, // scrollbar thumb
decorationColor: Palette.periwinkleCraiola // scrollbar background
),
body2: TextStyle(
color: Palette.moderateLavender, // menu header
decorationColor: Colors.white, // menu background
)
),
primaryTextTheme: TextTheme(
title: TextStyle(
color: Palette.darkBlueCraiola, // title color
backgroundColor: Palette.wildPeriwinkle // textfield underline
),
caption: TextStyle(
color: PaletteDark.pigeonBlue, // secondary text
decorationColor: Palette.wildLavender // menu divider
),
overline: TextStyle(
color: Palette.darkGray, // transaction/trade details titles
decorationColor: Colors.white.withOpacity(0.5), // placeholder
),
subhead: TextStyle(
color: Colors.white.withOpacity(0.5) // send, exchange, buy buttons on dashboard page
),
headline: TextStyle(
color: Palette.lightBlueGrey // historyPanelText
),
display1: TextStyle(
color: Colors.white // menuList
),
display2: TextStyle(
color: Palette.lavender // menuHeader
),
display3: TextStyle(
color: Palette.lavender // historyPanelButton
),
display4: TextStyle(
color: Palette.oceanBlue // QR code
),
),
focusColor: Colors.white, // wallet card border
hintColor: Colors.white, // menu
scaffoldBackgroundColor: Palette.blueAlice, // gradient background start
primaryColor: Palette.lightBlue, // gradient background end
cardColor: Palette.blueAlice,
cardTheme: CardTheme(
color: Colors.white, // synced card start
),
hoverColor: Colors.white, // synced card end
primaryTextTheme: TextTheme(
title: TextStyle(
color: Palette.oceanBlue, // primary text
backgroundColor: Colors.white // selectButton text
),
caption: TextStyle(
color: Palette.lightBlueGrey, // secondary text
),
overline: TextStyle(
color: Palette.lavender // address field in the wallet card
),
subhead: TextStyle(
color: Colors.white.withOpacity(0.5) // send, exchange, buy buttons on dashboard page
),
headline: TextStyle(
color: Palette.lightBlueGrey // historyPanelText
),
display1: TextStyle(
color: Colors.white // menuList
),
display2: TextStyle(
color: Palette.lavender // menuHeader
),
display3: TextStyle(
color: Palette.lavender // historyPanelButton
),
display4: TextStyle(
color: Palette.oceanBlue // QR code
),
// headline1: TextStyle(color: Palette.nightBlue)
),
dividerColor: Palette.eee,
accentTextTheme: TextTheme(
title: TextStyle(
color: Palette.darkLavender, // top panel
@ -75,48 +141,113 @@ class Themes {
static final ThemeData darkTheme = ThemeData(
fontFamily: 'Poppins',
brightness: Brightness.dark,
backgroundColor: PaletteDark.darkNightBlue,
backgroundColor: PaletteDark.backgroundColor,
accentColor: PaletteDark.backgroundColor, // first gradient color
scaffoldBackgroundColor: PaletteDark.backgroundColor, // second gradient color
primaryColor: PaletteDark.backgroundColor, // third gradient color
buttonColor: PaletteDark.nightBlue, // action buttons on dashboard page
indicatorColor: PaletteDark.cyanBlue, // page indicator
hoverColor: PaletteDark.cyanBlue, // amount hint text (receive page)
dividerColor: PaletteDark.dividerColor,
hintColor: PaletteDark.pigeonBlue, // menu
textTheme: TextTheme(
title: TextStyle(
color: PaletteDark.wildBlue, // sync_indicator text
backgroundColor: PaletteDark.lightNightBlue, // synced sync_indicator
decorationColor: PaletteDark.oceanBlue // not synced sync_indicator
),
caption: TextStyle(
color: PaletteDark.orangeYellow, // not synced light
decorationColor: PaletteDark.wildBlue, // filter icon
),
overline: TextStyle(
color: PaletteDark.oceanBlue, // filter button
backgroundColor: PaletteDark.darkCyanBlue, // date section row
decorationColor: PaletteDark.wildNightBlue // icons (transaction and trade rows)
),
subhead: TextStyle(
color: PaletteDark.nightBlue, // address button border
decorationColor: PaletteDark.lightBlueGrey, // copy button (qr widget)
),
headline: TextStyle(
color: PaletteDark.lightBlueGrey, // qr code
decorationColor: PaletteDark.darkGrey, // bottom border of amount (receive page)
),
display1: TextStyle(
color: Colors.white, // icons color (receive page)
decorationColor: PaletteDark.distantNightBlue, // icons background (receive page)
),
display2: TextStyle(
color: Colors.white, // text color of tiles (receive page)
decorationColor: PaletteDark.nightBlue // background of tiles (receive page)
),
display3: TextStyle(
color: Colors.blue, // text color of current tile (receive page)
decorationColor: PaletteDark.lightOceanBlue // background of current tile (receive page)
),
display4: TextStyle(
color: Colors.white, // text color of tiles (account list)
decorationColor: PaletteDark.darkOceanBlue // background of tiles (account list)
),
subtitle: TextStyle(
color: Palette.blueCraiola, // text color of current tile (account list)
decorationColor: PaletteDark.darkNightBlue // background of current tile (account list)
),
body1: TextStyle(
color: PaletteDark.wildBlueGrey, // scrollbar thumb
decorationColor: PaletteDark.violetBlue // scrollbar background
),
body2: TextStyle(
color: PaletteDark.deepPurpleBlue, // menu header
decorationColor: PaletteDark.deepPurpleBlue, // menu background
)
),
primaryTextTheme: TextTheme(
title: TextStyle(
color: Colors.white, // title color
backgroundColor: PaletteDark.darkOceanBlue // textfield underline
),
caption: TextStyle(
color: PaletteDark.darkCyanBlue, // secondary text
decorationColor: PaletteDark.darkOceanBlue // menu divider
),
overline: TextStyle(
color: PaletteDark.lightBlueGrey, // transaction/trade details titles
decorationColor: Colors.grey, // placeholder
),
subhead: TextStyle(
color: PaletteDark.lightDistantBlue // send, exchange, buy buttons on dashboard page
),
headline: TextStyle(
color: PaletteDark.pigeonBlue // historyPanelText
),
display1: TextStyle(
color: PaletteDark.lightNightBlue // menuList
),
display2: TextStyle(
color: PaletteDark.headerNightBlue // menuHeader
),
display3: TextStyle(
color: PaletteDark.moderateNightBlue // historyPanelButton
),
display4: TextStyle(
color: PaletteDark.gray // QR code
),
),
focusColor: PaletteDark.lightDistantBlue, // wallet card border
hintColor: PaletteDark.gray, // menu
scaffoldBackgroundColor: PaletteDark.distantBlue, // gradient background start
primaryColor: PaletteDark.distantBlue, // gradient background end
cardColor: PaletteDark.darkNightBlue,
cardTheme: CardTheme(
color: PaletteDark.moderateBlue, // synced card start
),
hoverColor: PaletteDark.nightBlue, // synced card end
primaryTextTheme: TextTheme(
title: TextStyle(
color: Colors.white,
backgroundColor: PaletteDark.moderatePurpleBlue // selectButton text
),
caption: TextStyle(
color: PaletteDark.gray,
),
overline: TextStyle(
color: PaletteDark.lightDistantBlue // address field in the wallet card
),
subhead: TextStyle(
color: PaletteDark.lightDistantBlue // send, exchange, buy buttons on dashboard page
),
headline: TextStyle(
color: PaletteDark.pigeonBlue // historyPanelText
),
display1: TextStyle(
color: PaletteDark.lightNightBlue // menuList
),
display2: TextStyle(
color: PaletteDark.headerNightBlue // menuHeader
),
display3: TextStyle(
color: PaletteDark.moderateNightBlue // historyPanelButton
),
display4: TextStyle(
color: PaletteDark.gray // QR code
),
// headline5: TextStyle(color: PaletteDark.gray)
),
dividerColor: PaletteDark.distantBlue,
accentTextTheme: TextTheme(
title: TextStyle(
color: PaletteDark.moderateBlue, // top panel