diff --git a/assets/fonts/Poppins-Bold.ttf b/assets/fonts/Poppins-Bold.ttf new file mode 100644 index 000000000..b94d47f3a Binary files /dev/null and b/assets/fonts/Poppins-Bold.ttf differ diff --git a/assets/fonts/Poppins-Medium.ttf b/assets/fonts/Poppins-Medium.ttf new file mode 100644 index 000000000..e90e87ed6 Binary files /dev/null and b/assets/fonts/Poppins-Medium.ttf differ diff --git a/assets/fonts/Poppins-Regular.ttf b/assets/fonts/Poppins-Regular.ttf new file mode 100644 index 000000000..be06e7fdc Binary files /dev/null and b/assets/fonts/Poppins-Regular.ttf differ diff --git a/assets/images/changenow.png b/assets/images/changenow.png new file mode 100644 index 000000000..37593c419 Binary files /dev/null and b/assets/images/changenow.png differ diff --git a/assets/images/morph.png b/assets/images/morph.png new file mode 100644 index 000000000..0cc2c3bac Binary files /dev/null and b/assets/images/morph.png differ diff --git a/assets/images/xmrto.png b/assets/images/xmrto.png new file mode 100644 index 000000000..1a68e24cf Binary files /dev/null and b/assets/images/xmrto.png differ diff --git a/lib/palette.dart b/lib/palette.dart index 1806888b9..0daa53148 100644 --- a/lib/palette.dart +++ b/lib/palette.dart @@ -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); diff --git a/lib/router.dart b/lib/router.dart index 23fe7ba4f..920e13eae 100644 --- a/lib/router.dart +++ b/lib/router.dart @@ -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( - builder: (_) => createDashboardPage( - walletService: walletService, - priceStore: priceStore, - settingsStore: settingsStore, - trades: trades, - transactionDescriptions: transactionDescriptions, - walletStore: walletStore)); + builder: (_) => getIt.get()); case Routes.send: return CupertinoPageRoute( diff --git a/lib/src/screens/dashboard/dashboard_page.dart b/lib/src/screens/dashboard/dashboard_page.dart index 89e3af553..9077f8d1a 100644 --- a/lib/src/screens/dashboard/dashboard_page.dart +++ b/lib/src/screens/dashboard/dashboard_page.dart @@ -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( - builder: (_) => MenuWidget( - name: walletViewModel.name, - subname: walletViewModel.subname, - type: walletViewModel.type), - context: context); - }, - child: menuButton), + width: 40, + child: InkWell( + onTap: () async { + await showDialog( + 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: [ 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: [ diff --git a/lib/src/screens/dashboard/widgets/balance_page.dart b/lib/src/screens/dashboard/widgets/balance_page.dart index ebbbdc8d0..2905bf14a 100644 --- a/lib/src/screens/dashboard/widgets/balance_page.dart +++ b/lib/src/screens/dashboard/widgets/balance_page.dart @@ -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: [ - Positioned( - top: 0, - child: SyncIndicator(dashboardViewModel: dashboardViewModel) - ), - Container( - height: 160, - child: Column( - mainAxisAlignment: MainAxisAlignment.spaceBetween, - crossAxisAlignment: CrossAxisAlignment.center, - children: [ - Observer( + padding: EdgeInsets.all(24), + child: Center( + child: Container( + height: 160, + child: Column( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + Observer( builder: (_) { - return Row( - mainAxisSize: MainAxisSize.min, - crossAxisAlignment: CrossAxisAlignment.center, - children: [ - 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 ), ); } - ), - ], - ), - ) - ], + ), + ], + ), + ), ), ); } diff --git a/lib/src/screens/dashboard/widgets/date_section_raw.dart b/lib/src/screens/dashboard/widgets/date_section_raw.dart index f639d3c59..61a6a64de 100644 --- a/lib/src/screens/dashboard/widgets/date_section_raw.dart +++ b/lib/src/screens/dashboard/widgets/date_section_raw.dart @@ -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 + )) ); } } diff --git a/lib/src/screens/dashboard/widgets/sync_indicator.dart b/lib/src/screens/dashboard/widgets/sync_indicator.dart index abafe2988..e36290e7c 100644 --- a/lib/src/screens/dashboard/widgets/sync_indicator.dart +++ b/lib/src/screens/dashboard/widgets/sync_indicator.dart @@ -69,6 +69,7 @@ class SyncIndicator extends StatelessWidget { statusText, style: TextStyle( fontSize: 12, + fontWeight: FontWeight.w500, color: PaletteDark.wildBlue ), ), diff --git a/lib/src/screens/dashboard/widgets/trade_row.dart b/lib/src/screens/dashboard/widgets/trade_row.dart index 5461c8ce4..954064283 100644 --- a/lib/src/screens/dashboard/widgets/trade_row.dart +++ b/lib/src/screens/dashboard/widgets/trade_row.dart @@ -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: [ - 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: [ - Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: [ - 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: [ - 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: [ + _getPoweredImage(provider), + Expanded( + child: Padding( + padding: const EdgeInsets.only(left: 12), + child: Container( + height: 42, + child: Column( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + mainAxisSize: MainAxisSize.max, + children: [ + Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + 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: [ + 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; } -} +} \ No newline at end of file diff --git a/lib/src/screens/dashboard/widgets/transaction_raw.dart b/lib/src/screens/dashboard/widgets/transaction_raw.dart index 5e9a054dc..b9f6e146a 100644 --- a/lib/src/screens/dashboard/widgets/transaction_raw.dart +++ b/lib/src/screens/dashboard/widgets/transaction_raw.dart @@ -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: [ - 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: [ - Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: [ - 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: [ - 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: [ + 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: [ + Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + 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: [ + Text(formattedDate, + style: TextStyle( + fontSize: 14, + color: PaletteDark.darkCyanBlue)), + Text(direction == TransactionDirection.incoming + ? formattedFiatAmount + : '- ' + formattedFiatAmount, + style: TextStyle( + fontSize: 14, + color: PaletteDark.darkCyanBlue)) + ]), + ], + ), + ), + )) + ]), )); } } diff --git a/lib/themes.dart b/lib/themes.dart index 6112394dc..a0b3d19c7 100644 --- a/lib/themes.dart +++ b/lib/themes.dart @@ -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 diff --git a/pubspec.yaml b/pubspec.yaml index b5b778c42..cbc8b5c67 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -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: