CAKE-15 | moved sync indicator to appbar of the dashboard page; added and applied poppins font to the app; changed balance page, date section row, trade row and transaction row; changed call of the dashboard page in the router

wownero
Oleksandr Sobol 4 years ago
parent 12ee8a519d
commit 25436d9b94

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

@ -33,7 +33,9 @@ class PaletteDark {
// NEW DESIGN
static const Color backgroundColor = Color.fromRGBO(25, 35, 60, 1.0);
static const Color nightBlue = Color.fromRGBO(35, 47, 79, 1.0);
static const Color wildNightBlue = Color.fromRGBO(39, 53, 96, 1.0);
static const Color cyanBlue = Color.fromRGBO(99, 113, 150, 1.0);
static const Color darkCyanBlue = Color.fromRGBO(91, 112, 146, 1.0);
static const Color orangeYellow = Color.fromRGBO(243, 166, 50, 1.0);
static const Color brightGreen = Color.fromRGBO(88, 243, 50, 1.0);
static const Color oceanBlue = Color.fromRGBO(27, 39, 71, 1.0);

@ -1,3 +1,4 @@
import 'package:cake_wallet/src/screens/dashboard/dashboard_page.dart';
import 'package:cake_wallet/src/screens/seed/wallet_seed_page.dart';
import 'package:cake_wallet/view_model/wallet_new_vm.dart';
import 'package:cake_wallet/view_model/wallet_restoration_from_seed_vm.dart';
@ -249,13 +250,7 @@ class Router {
case Routes.dashboard:
return CupertinoPageRoute<void>(
builder: (_) => createDashboardPage(
walletService: walletService,
priceStore: priceStore,
settingsStore: settingsStore,
trades: trades,
transactionDescriptions: transactionDescriptions,
walletStore: walletStore));
builder: (_) => getIt.get<DashboardPage>());
case Routes.send:
return CupertinoPageRoute<void>(

@ -11,6 +11,7 @@ import 'package:cake_wallet/src/screens/dashboard/widgets/action_button.dart';
import 'package:cake_wallet/src/screens/dashboard/widgets/balance_page.dart';
import 'package:flutter_mobx/flutter_mobx.dart';
import 'package:mobx/mobx.dart';
import 'package:cake_wallet/src/screens/dashboard/widgets/sync_indicator.dart';
class DashboardPage extends BasePage {
DashboardPage({@required this.walletViewModel});
@ -21,6 +22,11 @@ class DashboardPage extends BasePage {
@override
Color get backgroundDarkColor => PaletteDark.backgroundColor;
@override
Widget middle(BuildContext context) {
return SyncIndicator(dashboardViewModel: walletViewModel);
}
@override
Widget trailing(BuildContext context) {
final menuButton = Image.asset('assets/images/menu.png',
@ -28,21 +34,17 @@ class DashboardPage extends BasePage {
return Container(
alignment: Alignment.centerRight,
child: SizedBox(
width: 20,
child: FlatButton(
highlightColor: Colors.transparent,
splashColor: Colors.transparent,
padding: EdgeInsets.all(0),
onPressed: () async {
await showDialog<void>(
builder: (_) => MenuWidget(
name: walletViewModel.name,
subname: walletViewModel.subname,
type: walletViewModel.type),
context: context);
},
child: menuButton),
width: 40,
child: InkWell(
onTap: () async {
await showDialog<void>(
builder: (_) => MenuWidget(
name: walletViewModel.name,
subname: walletViewModel.subname,
type: walletViewModel.type),
context: context);
},
child: menuButton
),
);
}
@ -66,13 +68,13 @@ class DashboardPage extends BasePage {
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Expanded(
child: PageView.builder(
controller: controller,
itemCount: pages.length,
itemBuilder: (context, index) {
return pages[index];
}
)
child: PageView.builder(
controller: controller,
itemCount: pages.length,
itemBuilder: (context, index) {
return pages[index];
}
)
),
Padding(
padding: EdgeInsets.only(
@ -96,9 +98,9 @@ class DashboardPage extends BasePage {
Container(
width: double.infinity,
padding: EdgeInsets.only(
left: 45,
right: 45,
bottom: 24
left: 45,
right: 45,
bottom: 24
),
child: Row(
children: <Widget>[

@ -2,88 +2,65 @@ import 'package:flutter/material.dart';
import 'package:cake_wallet/view_model/dashboard_view_model.dart';
import 'package:cake_wallet/palette.dart';
import 'package:flutter_mobx/flutter_mobx.dart';
import 'package:cake_wallet/src/screens/dashboard/widgets/sync_indicator.dart';
class BalancePage extends StatelessWidget {
BalancePage({@required this.dashboardViewModel});
final DashboardViewModel dashboardViewModel;
final triangleImage = Image.asset('assets/images/triangle.png');
@override
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.only(
top: 12,
left: 24,
right: 24,
bottom: 24
),
child: Stack(
alignment: Alignment.center,
children: <Widget>[
Positioned(
top: 0,
child: SyncIndicator(dashboardViewModel: dashboardViewModel)
),
Container(
height: 160,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Observer(
padding: EdgeInsets.all(24),
child: Center(
child: Container(
height: 160,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Observer(
builder: (_) {
return Row(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Text(
dashboardViewModel.wallet.currency.toString(),
style: TextStyle(
fontSize: 40,
fontWeight: FontWeight.bold,
color: PaletteDark.cyanBlue,
height: 1
),
),
Padding(
padding: EdgeInsets.only(left: 8),
child: triangleImage,
)
],
return Text(
dashboardViewModel.wallet.currency.toString(),
style: TextStyle(
fontSize: 40,
fontWeight: FontWeight.bold,
color: PaletteDark.cyanBlue,
height: 1
),
);
}
),
Observer(
),
Observer(
builder: (_) {
return Text(
dashboardViewModel.balance.totalBalance,
style: TextStyle(
fontSize: 54,
fontWeight: FontWeight.bold,
color: Colors.white,
height: 1
fontSize: 54,
fontWeight: FontWeight.bold,
color: Colors.white,
height: 1
),
);
}
),
Observer(
),
Observer(
builder: (_) {
return Text(
'\$ 0.00',
style: TextStyle(
fontSize: 18,
color: PaletteDark.cyanBlue,
height: 1
fontSize: 18,
fontWeight: FontWeight.w500,
color: PaletteDark.cyanBlue,
height: 1
),
);
}
),
],
),
)
],
),
],
),
),
),
);
}

@ -3,6 +3,7 @@ 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});
@ -35,21 +36,14 @@ class DateSectionRaw extends StatelessWidget {
}
return Container(
height: 36,
padding: EdgeInsets.only(top: 10, bottom: 10, left: 20, right: 20),
height: 35,
alignment: Alignment.center,
decoration: BoxDecoration(
color: Theme.of(context).backgroundColor,
border: Border.all(
width: 1,
color: Theme.of(context).backgroundColor
),
),
color: Colors.transparent,
child: Text(title,
style: TextStyle(
fontSize: 12,
color: Theme.of(context).primaryTextTheme.headline.color
))
style: TextStyle(
fontSize: 12,
color: PaletteDark.darkCyanBlue
))
);
}
}

@ -69,6 +69,7 @@ class SyncIndicator extends StatelessWidget {
statusText,
style: TextStyle(
fontSize: 12,
fontWeight: FontWeight.w500,
color: PaletteDark.wildBlue
),
),

@ -1,15 +1,16 @@
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(
{this.provider,
this.from,
this.to,
this.createdAtFormattedDate,
this.formattedAmount,
@required this.onTap});
TradeRow({
this.provider,
this.from,
this.to,
this.createdAtFormattedDate,
this.formattedAmount,
@required this.onTap});
final VoidCallback onTap;
final ExchangeProviderDescription provider;
@ -25,58 +26,53 @@ class TradeRow extends StatelessWidget {
return InkWell(
onTap: onTap,
child: Container(
height: 60,
decoration: BoxDecoration(
color: Theme.of(context).backgroundColor,
border: Border.all(
width: 1,
color: Theme.of(context).backgroundColor
),
),
padding: EdgeInsets.only(top: 5, bottom: 5, left: 20, right: 20),
child: Row(children: <Widget>[
Container(
height: 36,
width: 36,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Theme.of(context).backgroundColor
),
child: _getPoweredImage(provider),
),
Expanded(
child: Padding(
padding: const EdgeInsets.only(left: 10),
child: Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text('${from.toString()}${to.toString()}',
style: TextStyle(
fontSize: 16,
color: Theme.of(context).primaryTextTheme.title.color
)),
formattedAmount != null
? Text(formattedAmount + ' ' + amountCrypto,
style: TextStyle(
fontSize: 16,
color: Theme.of(context).primaryTextTheme.title.color
))
: Container()
]),
SizedBox(height: 5),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(createdAtFormattedDate,
style: TextStyle(
fontSize: 14, color: Theme.of(context).primaryTextTheme.headline.color))
]),
],
),
))
]),
height: 52,
color: Colors.transparent,
padding: EdgeInsets.only(left: 24, right: 24),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
_getPoweredImage(provider),
Expanded(
child: Padding(
padding: const EdgeInsets.only(left: 12),
child: Container(
height: 42,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text('${from.toString()}${to.toString()}',
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w500,
color: Colors.white
)),
formattedAmount != null
? Text(formattedAmount + ' ' + amountCrypto,
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w500,
color: Colors.white
))
: Container()
]),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(createdAtFormattedDate,
style: TextStyle(
fontSize: 14,
color: PaletteDark.darkCyanBlue))
]),
],
),
),
))
]),
));
}
@ -84,17 +80,17 @@ class TradeRow extends StatelessWidget {
Image image;
switch (provider) {
case ExchangeProviderDescription.xmrto:
image = Image.asset('assets/images/xmr_btc.png');
image = Image.asset('assets/images/xmrto.png', height: 36, width: 36);
break;
case ExchangeProviderDescription.changeNow:
image = Image.asset('assets/images/change_now.png');
image = Image.asset('assets/images/changenow.png', height: 36, width: 36);
break;
case ExchangeProviderDescription.morphToken:
image = Image.asset('assets/images/morph_icon.png');
image = Image.asset('assets/images/morph.png', height: 36, width: 36);
break;
default:
image = null;
}
return image;
}
}
}

@ -4,13 +4,13 @@ import 'package:cake_wallet/src/domain/common/transaction_direction.dart';
import 'package:cake_wallet/generated/i18n.dart';
class TransactionRow extends StatelessWidget {
TransactionRow(
{this.direction,
this.formattedDate,
this.formattedAmount,
this.formattedFiatAmount,
this.isPending,
@required this.onTap});
TransactionRow({
this.direction,
this.formattedDate,
this.formattedAmount,
this.formattedFiatAmount,
this.isPending,
@required this.onTap});
final VoidCallback onTap;
final TransactionDirection direction;
@ -24,78 +24,74 @@ class TransactionRow extends StatelessWidget {
return InkWell(
onTap: onTap,
child: Container(
height: 41,
color: Theme.of(context).backgroundColor,
padding: EdgeInsets.only(left: 20, right: 20),
child: Row(children: <Widget>[
Container(
height: 36,
width: 36,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Theme.of(context).primaryTextTheme.display3.color),
child: Image.asset(direction == TransactionDirection.incoming
? 'assets/images/down_arrow.png'
: 'assets/images/up_arrow.png'),
),
Expanded(
child: Padding(
padding: const EdgeInsets.only(left: 10),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(
(direction == TransactionDirection.incoming
? S.of(context).received
: S.of(context).sent) +
(isPending ? S.of(context).pending : ''),
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w500,
color: Theme.of(context)
.primaryTextTheme
.title
.color)),
Text(
direction == TransactionDirection.incoming
? formattedAmount
: '- ' + formattedAmount,
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w500,
color: Theme.of(context)
.primaryTextTheme
.title
.color))
]),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(formattedDate,
style: TextStyle(
fontSize: 14,
color: Theme.of(context)
.primaryTextTheme
.headline
.color)),
Text(
direction == TransactionDirection.incoming
? formattedFiatAmount
: '- ' + formattedFiatAmount,
style: TextStyle(
fontSize: 14,
color: Theme.of(context)
.primaryTextTheme
.headline
.color))
]),
],
),
))
]),
height: 52,
color: Colors.transparent,
padding: EdgeInsets.only(left: 24, right: 24),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
height: 36,
width: 36,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: PaletteDark.wildNightBlue
),
child: Image.asset(
direction == TransactionDirection.incoming
? 'assets/images/down_arrow.png'
: 'assets/images/up_arrow.png'),
),
Expanded(
child: Padding(
padding: const EdgeInsets.only(left: 12),
child: Container(
height: 42,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(
(direction == TransactionDirection.incoming
? S.of(context).received
: S.of(context).sent) +
(isPending ? S.of(context).pending : ''),
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w500,
color: Colors.white
)),
Text(direction == TransactionDirection.incoming
? formattedAmount
: '- ' + formattedAmount,
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w500,
color: Colors.white
))
]),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(formattedDate,
style: TextStyle(
fontSize: 14,
color: PaletteDark.darkCyanBlue)),
Text(direction == TransactionDirection.incoming
? formattedFiatAmount
: '- ' + formattedFiatAmount,
style: TextStyle(
fontSize: 14,
color: PaletteDark.darkCyanBlue))
]),
],
),
),
))
]),
));
}
}

@ -4,7 +4,7 @@ import 'palette.dart';
class Themes {
static final ThemeData lightTheme = ThemeData(
fontFamily: 'Avenir Next',
fontFamily: 'Poppins',
brightness: Brightness.light,
backgroundColor: Colors.white,
focusColor: Colors.white, // wallet card border
@ -73,7 +73,7 @@ class Themes {
static final ThemeData darkTheme = ThemeData(
fontFamily: 'Avenir Next',
fontFamily: 'Poppins',
brightness: Brightness.dark,
backgroundColor: PaletteDark.darkNightBlue,
focusColor: PaletteDark.lightDistantBlue, // wallet card border

@ -108,6 +108,11 @@ flutter:
- asset: assets/fonts/Montserrat-Regular.ttf
- asset: assets/fonts/Montserrat-Bold.ttf
- asset: assets/fonts/Montserrat-SemiBold.ttf
- family: Poppins
fonts:
- asset: assets/fonts/Poppins-Regular.ttf
- asset: assets/fonts/Poppins-Medium.ttf
- asset: assets/fonts/Poppins-Bold.ttf
# To add assets to your application, add an assets section, like this:

Loading…
Cancel
Save