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

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);

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<void>(
-            builder: (_) => createDashboardPage(
+            builder: (_) => getIt.get<DashboardPage>());
-                walletService: walletService,
-                priceStore: priceStore,
-                settingsStore: settingsStore,
-                trades: trades,
-                transactionDescriptions: transactionDescriptions,
-                walletStore: walletStore));
 
       case Routes.send:
         return CupertinoPageRoute<void>(

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,13 +34,9 @@ class DashboardPage extends BasePage {
 
     return Container(
       alignment: Alignment.centerRight,
-      child: SizedBox(
+      width: 40,
-        width: 20,
+      child: InkWell(
-        child: FlatButton(
+        onTap: () async {
-            highlightColor: Colors.transparent,
-            splashColor: Colors.transparent,
-            padding: EdgeInsets.all(0),
-            onPressed: () async {
           await showDialog<void>(
             builder: (_) => MenuWidget(
               name: walletViewModel.name,
@@ -42,7 +44,7 @@ class DashboardPage extends BasePage {
               type: walletViewModel.type),
             context: context);
         },
-            child: menuButton),
+        child: menuButton
       ),
     );
   }

lib/src/screens/dashboard/widgets/balance_page.dart

@@ -2,31 +2,18 @@ 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(
+      padding: EdgeInsets.all(24),
-        top: 12,
+      child: Center(
-        left: 24,
+        child: Container(
-        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,
@@ -34,11 +21,7 @@ class BalancePage extends StatelessWidget {
             children: <Widget>[
               Observer(
                   builder: (_) {
-                    return Row(
+                    return Text(
-                      mainAxisSize: MainAxisSize.min,
-                      crossAxisAlignment: CrossAxisAlignment.center,
-                      children: <Widget>[
-                        Text(
                       dashboardViewModel.wallet.currency.toString(),
                       style: TextStyle(
                           fontSize: 40,
@@ -46,12 +29,6 @@ class BalancePage extends StatelessWidget {
                           color: PaletteDark.cyanBlue,
                           height: 1
                       ),
-                        ),
-                        Padding(
-                          padding: EdgeInsets.only(left: 8),
-                          child: triangleImage,
-                        )
-                      ],
                     );
                   }
               ),
@@ -74,6 +51,7 @@ class BalancePage extends StatelessWidget {
                       '\$ 0.00',
                       style: TextStyle(
                           fontSize: 18,
+                          fontWeight: FontWeight.w500,
                           color: PaletteDark.cyanBlue,
                           height: 1
                       ),
@@ -82,8 +60,7 @@ class BalancePage extends StatelessWidget {
               ),
             ],
           ),
-          )
+        ),
-        ],
       ),
     );
   }

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

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
                           ),
                         ),

lib/src/screens/dashboard/widgets/trade_row.dart

@@ -1,10 +1,11 @@
 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(
+  TradeRow({
-      {this.provider,
+    this.provider,
     this.from,
     this.to,
     this.createdAtFormattedDate,
@@ -25,29 +26,21 @@ class TradeRow extends StatelessWidget {
     return InkWell(
         onTap: onTap,
         child: Container(
-          height: 60,
+          height: 52,
-          decoration: BoxDecoration(
+          color: Colors.transparent,
-            color: Theme.of(context).backgroundColor,
+          padding: EdgeInsets.only(left: 24, right: 24),
-            border: Border.all(
+          child: Row(
-                width: 1,
+              crossAxisAlignment: CrossAxisAlignment.center,
-                color: Theme.of(context).backgroundColor
+              children: <Widget>[
-            ),
+                _getPoweredImage(provider),
-          ),
-          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),
+                      padding: const EdgeInsets.only(left: 12),
+                      child: Container(
+                        height: 42,
                         child: Column(
+                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                          mainAxisSize: MainAxisSize.max,
                           children: <Widget>[
                             Row(
                                 mainAxisAlignment: MainAxisAlignment.spaceBetween,
@@ -55,26 +48,29 @@ class TradeRow extends StatelessWidget {
                                   Text('${from.toString()} → ${to.toString()}',
                                       style: TextStyle(
                                           fontSize: 16,
-                                color: Theme.of(context).primaryTextTheme.title.color
+                                          fontWeight: FontWeight.w500,
+                                          color: Colors.white
                                       )),
                                   formattedAmount != null
                                       ? Text(formattedAmount + ' ' + amountCrypto,
                                       style: TextStyle(
                                           fontSize: 16,
-                                    color: Theme.of(context).primaryTextTheme.title.color
+                                          fontWeight: FontWeight.w500,
+                                          color: Colors.white
                                       ))
                                       : Container()
                                 ]),
-                  SizedBox(height: 5),
                             Row(
                                 mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                 children: <Widget>[
                                   Text(createdAtFormattedDate,
                                       style: TextStyle(
-                                fontSize: 14, color: Theme.of(context).primaryTextTheme.headline.color))
+                                          fontSize: 14,
+                                          color: PaletteDark.darkCyanBlue))
                                 ]),
                           ],
                         ),
+                      ),
                     ))
               ]),
         ));
@@ -84,13 +80,13 @@ 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;

lib/src/screens/dashboard/widgets/transaction_raw.dart

@@ -4,8 +4,8 @@ import 'package:cake_wallet/src/domain/common/transaction_direction.dart';
 import 'package:cake_wallet/generated/i18n.dart';
 
 class TransactionRow extends StatelessWidget {
-  TransactionRow(
+  TransactionRow({
-      {this.direction,
+    this.direction,
     this.formattedDate,
     this.formattedAmount,
     this.formattedFiatAmount,
@@ -24,25 +24,32 @@ class TransactionRow extends StatelessWidget {
     return InkWell(
         onTap: onTap,
         child: Container(
-          height: 41,
+          height: 52,
-          color: Theme.of(context).backgroundColor,
+          color: Colors.transparent,
-          padding: EdgeInsets.only(left: 20, right: 20),
+          padding: EdgeInsets.only(left: 24, right: 24),
-          child: Row(children: <Widget>[
+          child: Row(
+              crossAxisAlignment: CrossAxisAlignment.center,
+              children: <Widget>[
                 Container(
                   height: 36,
                   width: 36,
                   decoration: BoxDecoration(
                     shape: BoxShape.circle,
-                  color: Theme.of(context).primaryTextTheme.display3.color),
+                    color: PaletteDark.wildNightBlue
-              child: Image.asset(direction == TransactionDirection.incoming
+                  ),
+                  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),
+                      padding: const EdgeInsets.only(left: 12),
+                      child: Container(
+                        height: 42,
                         child: Column(
                           mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                          mainAxisSize: MainAxisSize.max,
                           children: <Widget>[
                             Row(
                                 mainAxisAlignment: MainAxisAlignment.spaceBetween,
@@ -55,21 +62,16 @@ class TransactionRow extends StatelessWidget {
                                       style: TextStyle(
                                           fontSize: 16,
                                           fontWeight: FontWeight.w500,
-                                color: Theme.of(context)
+                                          color: Colors.white
-                                    .primaryTextTheme
+                                      )),
-                                    .title
+                                  Text(direction == TransactionDirection.incoming
-                                    .color)),
-                        Text(
-                            direction == TransactionDirection.incoming
                                       ? formattedAmount
                                       : '- ' + formattedAmount,
                                       style: TextStyle(
                                           fontSize: 16,
                                           fontWeight: FontWeight.w500,
-                                color: Theme.of(context)
+                                          color: Colors.white
-                                    .primaryTextTheme
+                                      ))
-                                    .title
-                                    .color))
                                 ]),
                             Row(
                                 mainAxisAlignment: MainAxisAlignment.spaceBetween,
@@ -77,23 +79,17 @@ class TransactionRow extends StatelessWidget {
                                   Text(formattedDate,
                                       style: TextStyle(
                                           fontSize: 14,
-                                color: Theme.of(context)
+                                          color: PaletteDark.darkCyanBlue)),
-                                    .primaryTextTheme
+                                  Text(direction == TransactionDirection.incoming
-                                    .headline
-                                    .color)),
-                        Text(
-                            direction == TransactionDirection.incoming
                                       ? formattedFiatAmount
                                       : '- ' + formattedFiatAmount,
                                       style: TextStyle(
                                           fontSize: 14,
-                                color: Theme.of(context)
+                                          color: PaletteDark.darkCyanBlue))
-                                    .primaryTextTheme
-                                    .headline
-                                    .color))
                                 ]),
                           ],
                         ),
+                      ),
                     ))
               ]),
         ));

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

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: