@samitouri / QOSAMI-cakewallet / commits / 25436d9b9

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

Oleksandr Sobol committed Jul 22, 2020 at 13:04 UTC 25436d9b9445e1cf293c6d2ac2d4c16614396d3c
16 files changed +213 -245
assets/fonts/Poppins-Bold.ttf
Binary files /dev/null and b/assets/fonts/Poppins-Bold.ttf differ
assets/fonts/Poppins-Medium.ttf
Binary files /dev/null and b/assets/fonts/Poppins-Medium.ttf differ
assets/fonts/Poppins-Regular.ttf
Binary files /dev/null and b/assets/fonts/Poppins-Regular.ttf differ
assets/images/changenow.png
Binary files /dev/null and b/assets/images/changenow.png differ
assets/images/morph.png
Binary files /dev/null and b/assets/images/morph.png differ
assets/images/xmrto.png
Binary files /dev/null and b/assets/images/xmrto.png differ
lib/palette.dart
+2
@@ -33,7 +33,9 @@ class PaletteDark {
33 // NEW DESIGN
34 static const Color backgroundColor = Color.fromRGBO(25, 35, 60, 1.0);
35 static const Color nightBlue = Color.fromRGBO(35, 47, 79, 1.0);
36 + static const Color wildNightBlue = Color.fromRGBO(39, 53, 96, 1.0);
37 static const Color cyanBlue = Color.fromRGBO(99, 113, 150, 1.0);
38 + static const Color darkCyanBlue = Color.fromRGBO(91, 112, 146, 1.0);
39 static const Color orangeYellow = Color.fromRGBO(243, 166, 50, 1.0);
40 static const Color brightGreen = Color.fromRGBO(88, 243, 50, 1.0);
41 static const Color oceanBlue = Color.fromRGBO(27, 39, 71, 1.0);
lib/router.dart
+2 -7
@@ -1,3 +1,4 @@
1 +import 'package:cake_wallet/src/screens/dashboard/dashboard_page.dart';
2 import 'package:cake_wallet/src/screens/seed/wallet_seed_page.dart';
3 import 'package:cake_wallet/view_model/wallet_new_vm.dart';
4 import 'package:cake_wallet/view_model/wallet_restoration_from_seed_vm.dart';
@@ -249,13 +250,7 @@ class Router {
250
251 case Routes.dashboard:
252 return CupertinoPageRoute<void>(
252 - builder: (_) => createDashboardPage(
253 - walletService: walletService,
254 - priceStore: priceStore,
255 - settingsStore: settingsStore,
256 - trades: trades,
257 - transactionDescriptions: transactionDescriptions,
258 - walletStore: walletStore));
253 + builder: (_) => getIt.get<DashboardPage>());
254
255 case Routes.send:
256 return CupertinoPageRoute<void>(
lib/src/screens/dashboard/dashboard_page.dart
+27 -25
@@ -11,6 +11,7 @@ import 'package:cake_wallet/src/screens/dashboard/widgets/action_button.dart';
11 import 'package:cake_wallet/src/screens/dashboard/widgets/balance_page.dart';
12 import 'package:flutter_mobx/flutter_mobx.dart';
13 import 'package:mobx/mobx.dart';
14 +import 'package:cake_wallet/src/screens/dashboard/widgets/sync_indicator.dart';
15
16 class DashboardPage extends BasePage {
17 DashboardPage({@required this.walletViewModel});
@@ -21,6 +22,11 @@ class DashboardPage extends BasePage {
22 @override
23 Color get backgroundDarkColor => PaletteDark.backgroundColor;
24
25 + @override
26 + Widget middle(BuildContext context) {
27 + return SyncIndicator(dashboardViewModel: walletViewModel);
28 + }
29 +
30 @override
31 Widget trailing(BuildContext context) {
32 final menuButton = Image.asset('assets/images/menu.png',
@@ -28,21 +34,17 @@ class DashboardPage extends BasePage {
34
35 return Container(
36 alignment: Alignment.centerRight,
31 - child: SizedBox(
32 - width: 20,
33 - child: FlatButton(
34 - highlightColor: Colors.transparent,
35 - splashColor: Colors.transparent,
36 - padding: EdgeInsets.all(0),
37 - onPressed: () async {
38 - await showDialog<void>(
39 - builder: (_) => MenuWidget(
40 - name: walletViewModel.name,
41 - subname: walletViewModel.subname,
42 - type: walletViewModel.type),
43 - context: context);
44 - },
45 - child: menuButton),
37 + width: 40,
38 + child: InkWell(
39 + onTap: () async {
40 + await showDialog<void>(
41 + builder: (_) => MenuWidget(
42 + name: walletViewModel.name,
43 + subname: walletViewModel.subname,
44 + type: walletViewModel.type),
45 + context: context);
46 + },
47 + child: menuButton
48 ),
49 );
50 }
@@ -66,13 +68,13 @@ class DashboardPage extends BasePage {
68 mainAxisSize: MainAxisSize.max,
69 children: <Widget>[
70 Expanded(
69 - child: PageView.builder(
70 - controller: controller,
71 - itemCount: pages.length,
72 - itemBuilder: (context, index) {
73 - return pages[index];
74 - }
75 - )
71 + child: PageView.builder(
72 + controller: controller,
73 + itemCount: pages.length,
74 + itemBuilder: (context, index) {
75 + return pages[index];
76 + }
77 + )
78 ),
79 Padding(
80 padding: EdgeInsets.only(
@@ -96,9 +98,9 @@ class DashboardPage extends BasePage {
98 Container(
99 width: double.infinity,
100 padding: EdgeInsets.only(
99 - left: 45,
100 - right: 45,
101 - bottom: 24
101 + left: 45,
102 + right: 45,
103 + bottom: 24
104 ),
105 child: Row(
106 children: <Widget>[
lib/src/screens/dashboard/widgets/balance_page.dart
+33 -56
@@ -2,88 +2,65 @@ import 'package:flutter/material.dart';
2 import 'package:cake_wallet/view_model/dashboard_view_model.dart';
3 import 'package:cake_wallet/palette.dart';
4 import 'package:flutter_mobx/flutter_mobx.dart';
5 -import 'package:cake_wallet/src/screens/dashboard/widgets/sync_indicator.dart';
5
6 class BalancePage extends StatelessWidget {
7 BalancePage({@required this.dashboardViewModel});
8
9 final DashboardViewModel dashboardViewModel;
11 - final triangleImage = Image.asset('assets/images/triangle.png');
10
11 @override
12 Widget build(BuildContext context) {
13 return Container(
16 - padding: EdgeInsets.only(
17 - top: 12,
18 - left: 24,
19 - right: 24,
20 - bottom: 24
21 - ),
22 - child: Stack(
23 - alignment: Alignment.center,
24 - children: <Widget>[
25 - Positioned(
26 - top: 0,
27 - child: SyncIndicator(dashboardViewModel: dashboardViewModel)
28 - ),
29 - Container(
30 - height: 160,
31 - child: Column(
32 - mainAxisAlignment: MainAxisAlignment.spaceBetween,
33 - crossAxisAlignment: CrossAxisAlignment.center,
34 - children: <Widget>[
35 - Observer(
14 + padding: EdgeInsets.all(24),
15 + child: Center(
16 + child: Container(
17 + height: 160,
18 + child: Column(
19 + mainAxisAlignment: MainAxisAlignment.spaceBetween,
20 + crossAxisAlignment: CrossAxisAlignment.center,
21 + children: <Widget>[
22 + Observer(
23 builder: (_) {
37 - return Row(
38 - mainAxisSize: MainAxisSize.min,
39 - crossAxisAlignment: CrossAxisAlignment.center,
40 - children: <Widget>[
41 - Text(
42 - dashboardViewModel.wallet.currency.toString(),
43 - style: TextStyle(
44 - fontSize: 40,
45 - fontWeight: FontWeight.bold,
46 - color: PaletteDark.cyanBlue,
47 - height: 1
48 - ),
49 - ),
50 - Padding(
51 - padding: EdgeInsets.only(left: 8),
52 - child: triangleImage,
53 - )
54 - ],
24 + return Text(
25 + dashboardViewModel.wallet.currency.toString(),
26 + style: TextStyle(
27 + fontSize: 40,
28 + fontWeight: FontWeight.bold,
29 + color: PaletteDark.cyanBlue,
30 + height: 1
31 + ),
32 );
33 }
57 - ),
58 - Observer(
34 + ),
35 + Observer(
36 builder: (_) {
37 return Text(
38 dashboardViewModel.balance.totalBalance,
39 style: TextStyle(
63 - fontSize: 54,
64 - fontWeight: FontWeight.bold,
65 - color: Colors.white,
66 - height: 1
40 + fontSize: 54,
41 + fontWeight: FontWeight.bold,
42 + color: Colors.white,
43 + height: 1
44 ),
45 );
46 }
70 - ),
71 - Observer(
47 + ),
48 + Observer(
49 builder: (_) {
50 return Text(
51 '\$ 0.00',
52 style: TextStyle(
76 - fontSize: 18,
77 - color: PaletteDark.cyanBlue,
78 - height: 1
53 + fontSize: 18,
54 + fontWeight: FontWeight.w500,
55 + color: PaletteDark.cyanBlue,
56 + height: 1
57 ),
58 );
59 }
82 - ),
83 - ],
84 - ),
85 - )
86 - ],
60 + ),
61 + ],
62 + ),
63 + ),
64 ),
65 );
66 }
lib/src/screens/dashboard/widgets/date_section_raw.dart
+7 -13
@@ -3,6 +3,7 @@ import 'package:intl/intl.dart';
3 import 'package:cake_wallet/generated/i18n.dart';
4 import 'package:provider/provider.dart';
5 import 'package:cake_wallet/src/stores/settings/settings_store.dart';
6 +import 'package:cake_wallet/palette.dart';
7
8 class DateSectionRaw extends StatelessWidget {
9 DateSectionRaw({this.date});
@@ -35,21 +36,14 @@ class DateSectionRaw extends StatelessWidget {
36 }
37
38 return Container(
38 - height: 36,
39 - padding: EdgeInsets.only(top: 10, bottom: 10, left: 20, right: 20),
39 + height: 35,
40 alignment: Alignment.center,
41 - decoration: BoxDecoration(
42 - color: Theme.of(context).backgroundColor,
43 - border: Border.all(
44 - width: 1,
45 - color: Theme.of(context).backgroundColor
46 - ),
47 - ),
41 + color: Colors.transparent,
42 child: Text(title,
49 - style: TextStyle(
50 - fontSize: 12,
51 - color: Theme.of(context).primaryTextTheme.headline.color
52 - ))
43 + style: TextStyle(
44 + fontSize: 12,
45 + color: PaletteDark.darkCyanBlue
46 + ))
47 );
48 }
49 }
lib/src/screens/dashboard/widgets/sync_indicator.dart
+1
@@ -69,6 +69,7 @@ class SyncIndicator extends StatelessWidget {
69 statusText,
70 style: TextStyle(
71 fontSize: 12,
72 + fontWeight: FontWeight.w500,
73 color: PaletteDark.wildBlue
74 ),
75 ),
lib/src/screens/dashboard/widgets/trade_row.dart
+59 -63
@@ -1,15 +1,16 @@
1 import 'package:flutter/material.dart';
2 import 'package:cake_wallet/src/domain/common/crypto_currency.dart';
3 import 'package:cake_wallet/src/domain/exchange/exchange_provider_description.dart';
4 +import 'package:cake_wallet/palette.dart';
5
6 class TradeRow extends StatelessWidget {
6 - TradeRow(
7 - {this.provider,
8 - this.from,
9 - this.to,
10 - this.createdAtFormattedDate,
11 - this.formattedAmount,
12 - @required this.onTap});
7 + TradeRow({
8 + this.provider,
9 + this.from,
10 + this.to,
11 + this.createdAtFormattedDate,
12 + this.formattedAmount,
13 + @required this.onTap});
14
15 final VoidCallback onTap;
16 final ExchangeProviderDescription provider;
@@ -25,58 +26,53 @@ class TradeRow extends StatelessWidget {
26 return InkWell(
27 onTap: onTap,
28 child: Container(
28 - height: 60,
29 - decoration: BoxDecoration(
30 - color: Theme.of(context).backgroundColor,
31 - border: Border.all(
32 - width: 1,
33 - color: Theme.of(context).backgroundColor
34 - ),
35 - ),
36 - padding: EdgeInsets.only(top: 5, bottom: 5, left: 20, right: 20),
37 - child: Row(children: <Widget>[
38 - Container(
39 - height: 36,
40 - width: 36,
41 - decoration: BoxDecoration(
42 - shape: BoxShape.circle,
43 - color: Theme.of(context).backgroundColor
44 - ),
45 - child: _getPoweredImage(provider),
46 - ),
47 - Expanded(
48 - child: Padding(
49 - padding: const EdgeInsets.only(left: 10),
50 - child: Column(
51 - children: <Widget>[
52 - Row(
53 - mainAxisAlignment: MainAxisAlignment.spaceBetween,
54 - children: <Widget>[
55 - Text('${from.toString()} → ${to.toString()}',
56 - style: TextStyle(
57 - fontSize: 16,
58 - color: Theme.of(context).primaryTextTheme.title.color
59 - )),
60 - formattedAmount != null
61 - ? Text(formattedAmount + ' ' + amountCrypto,
62 - style: TextStyle(
63 - fontSize: 16,
64 - color: Theme.of(context).primaryTextTheme.title.color
65 - ))
66 - : Container()
67 - ]),
68 - SizedBox(height: 5),
69 - Row(
70 - mainAxisAlignment: MainAxisAlignment.spaceBetween,
71 - children: <Widget>[
72 - Text(createdAtFormattedDate,
73 - style: TextStyle(
74 - fontSize: 14, color: Theme.of(context).primaryTextTheme.headline.color))
75 - ]),
76 - ],
77 - ),
78 - ))
79 - ]),
29 + height: 52,
30 + color: Colors.transparent,
31 + padding: EdgeInsets.only(left: 24, right: 24),
32 + child: Row(
33 + crossAxisAlignment: CrossAxisAlignment.center,
34 + children: <Widget>[
35 + _getPoweredImage(provider),
36 + Expanded(
37 + child: Padding(
38 + padding: const EdgeInsets.only(left: 12),
39 + child: Container(
40 + height: 42,
41 + child: Column(
42 + mainAxisAlignment: MainAxisAlignment.spaceBetween,
43 + mainAxisSize: MainAxisSize.max,
44 + children: <Widget>[
45 + Row(
46 + mainAxisAlignment: MainAxisAlignment.spaceBetween,
47 + children: <Widget>[
48 + Text('${from.toString()} → ${to.toString()}',
49 + style: TextStyle(
50 + fontSize: 16,
51 + fontWeight: FontWeight.w500,
52 + color: Colors.white
53 + )),
54 + formattedAmount != null
55 + ? Text(formattedAmount + ' ' + amountCrypto,
56 + style: TextStyle(
57 + fontSize: 16,
58 + fontWeight: FontWeight.w500,
59 + color: Colors.white
60 + ))
61 + : Container()
62 + ]),
63 + Row(
64 + mainAxisAlignment: MainAxisAlignment.spaceBetween,
65 + children: <Widget>[
66 + Text(createdAtFormattedDate,
67 + style: TextStyle(
68 + fontSize: 14,
69 + color: PaletteDark.darkCyanBlue))
70 + ]),
71 + ],
72 + ),
73 + ),
74 + ))
75 + ]),
76 ));
77 }
78
@@ -84,17 +80,17 @@ class TradeRow extends StatelessWidget {
80 Image image;
81 switch (provider) {
82 case ExchangeProviderDescription.xmrto:
87 - image = Image.asset('assets/images/xmr_btc.png');
83 + image = Image.asset('assets/images/xmrto.png', height: 36, width: 36);
84 break;
85 case ExchangeProviderDescription.changeNow:
90 - image = Image.asset('assets/images/change_now.png');
86 + image = Image.asset('assets/images/changenow.png', height: 36, width: 36);
87 break;
88 case ExchangeProviderDescription.morphToken:
93 - image = Image.asset('assets/images/morph_icon.png');
89 + image = Image.asset('assets/images/morph.png', height: 36, width: 36);
90 break;
91 default:
92 image = null;
93 }
94 return image;
95 }
100 -}
96 +}
\ No newline at end of file
lib/src/screens/dashboard/widgets/transaction_raw.dart
+75 -79
@@ -4,13 +4,13 @@ import 'package:cake_wallet/src/domain/common/transaction_direction.dart';
4 import 'package:cake_wallet/generated/i18n.dart';
5
6 class TransactionRow extends StatelessWidget {
7 - TransactionRow(
8 - {this.direction,
9 - this.formattedDate,
10 - this.formattedAmount,
11 - this.formattedFiatAmount,
12 - this.isPending,
13 - @required this.onTap});
7 + TransactionRow({
8 + this.direction,
9 + this.formattedDate,
10 + this.formattedAmount,
11 + this.formattedFiatAmount,
12 + this.isPending,
13 + @required this.onTap});
14
15 final VoidCallback onTap;
16 final TransactionDirection direction;
@@ -24,78 +24,74 @@ class TransactionRow extends StatelessWidget {
24 return InkWell(
25 onTap: onTap,
26 child: Container(
27 - height: 41,
28 - color: Theme.of(context).backgroundColor,
29 - padding: EdgeInsets.only(left: 20, right: 20),
30 - child: Row(children: <Widget>[
31 - Container(
32 - height: 36,
33 - width: 36,
34 - decoration: BoxDecoration(
35 - shape: BoxShape.circle,
36 - color: Theme.of(context).primaryTextTheme.display3.color),
37 - child: Image.asset(direction == TransactionDirection.incoming
38 - ? 'assets/images/down_arrow.png'
39 - : 'assets/images/up_arrow.png'),
40 - ),
41 - Expanded(
42 - child: Padding(
43 - padding: const EdgeInsets.only(left: 10),
44 - child: Column(
45 - mainAxisAlignment: MainAxisAlignment.spaceBetween,
46 - children: <Widget>[
47 - Row(
48 - mainAxisAlignment: MainAxisAlignment.spaceBetween,
49 - children: <Widget>[
50 - Text(
51 - (direction == TransactionDirection.incoming
52 - ? S.of(context).received
53 - : S.of(context).sent) +
54 - (isPending ? S.of(context).pending : ''),
55 - style: TextStyle(
56 - fontSize: 16,
57 - fontWeight: FontWeight.w500,
58 - color: Theme.of(context)
59 - .primaryTextTheme
60 - .title
61 - .color)),
62 - Text(
63 - direction == TransactionDirection.incoming
64 - ? formattedAmount
65 - : '- ' + formattedAmount,
66 - style: TextStyle(
67 - fontSize: 16,
68 - fontWeight: FontWeight.w500,
69 - color: Theme.of(context)
70 - .primaryTextTheme
71 - .title
72 - .color))
73 - ]),
74 - Row(
75 - mainAxisAlignment: MainAxisAlignment.spaceBetween,
76 - children: <Widget>[
77 - Text(formattedDate,
78 - style: TextStyle(
79 - fontSize: 14,
80 - color: Theme.of(context)
81 - .primaryTextTheme
82 - .headline
83 - .color)),
84 - Text(
85 - direction == TransactionDirection.incoming
86 - ? formattedFiatAmount
87 - : '- ' + formattedFiatAmount,
88 - style: TextStyle(
89 - fontSize: 14,
90 - color: Theme.of(context)
91 - .primaryTextTheme
92 - .headline
93 - .color))
94 - ]),
95 - ],
96 - ),
97 - ))
98 - ]),
27 + height: 52,
28 + color: Colors.transparent,
29 + padding: EdgeInsets.only(left: 24, right: 24),
30 + child: Row(
31 + crossAxisAlignment: CrossAxisAlignment.center,
32 + children: <Widget>[
33 + Container(
34 + height: 36,
35 + width: 36,
36 + decoration: BoxDecoration(
37 + shape: BoxShape.circle,
38 + color: PaletteDark.wildNightBlue
39 + ),
40 + child: Image.asset(
41 + direction == TransactionDirection.incoming
42 + ? 'assets/images/down_arrow.png'
43 + : 'assets/images/up_arrow.png'),
44 + ),
45 + Expanded(
46 + child: Padding(
47 + padding: const EdgeInsets.only(left: 12),
48 + child: Container(
49 + height: 42,
50 + child: Column(
51 + mainAxisAlignment: MainAxisAlignment.spaceBetween,
52 + mainAxisSize: MainAxisSize.max,
53 + children: <Widget>[
54 + Row(
55 + mainAxisAlignment: MainAxisAlignment.spaceBetween,
56 + children: <Widget>[
57 + Text(
58 + (direction == TransactionDirection.incoming
59 + ? S.of(context).received
60 + : S.of(context).sent) +
61 + (isPending ? S.of(context).pending : ''),
62 + style: TextStyle(
63 + fontSize: 16,
64 + fontWeight: FontWeight.w500,
65 + color: Colors.white
66 + )),
67 + Text(direction == TransactionDirection.incoming
68 + ? formattedAmount
69 + : '- ' + formattedAmount,
70 + style: TextStyle(
71 + fontSize: 16,
72 + fontWeight: FontWeight.w500,
73 + color: Colors.white
74 + ))
75 + ]),
76 + Row(
77 + mainAxisAlignment: MainAxisAlignment.spaceBetween,
78 + children: <Widget>[
79 + Text(formattedDate,
80 + style: TextStyle(
81 + fontSize: 14,
82 + color: PaletteDark.darkCyanBlue)),
83 + Text(direction == TransactionDirection.incoming
84 + ? formattedFiatAmount
85 + : '- ' + formattedFiatAmount,
86 + style: TextStyle(
87 + fontSize: 14,
88 + color: PaletteDark.darkCyanBlue))
89 + ]),
90 + ],
91 + ),
92 + ),
93 + ))
94 + ]),
95 ));
96 }
97 }
lib/themes.dart
+2 -2
@@ -4,7 +4,7 @@ import 'palette.dart';
4 class Themes {
5
6 static final ThemeData lightTheme = ThemeData(
7 - fontFamily: 'Avenir Next',
7 + fontFamily: 'Poppins',
8 brightness: Brightness.light,
9 backgroundColor: Colors.white,
10 focusColor: Colors.white, // wallet card border
@@ -73,7 +73,7 @@ class Themes {
73
74
75 static final ThemeData darkTheme = ThemeData(
76 - fontFamily: 'Avenir Next',
76 + fontFamily: 'Poppins',
77 brightness: Brightness.dark,
78 backgroundColor: PaletteDark.darkNightBlue,
79 focusColor: PaletteDark.lightDistantBlue, // wallet card border
pubspec.yaml
+5
@@ -108,6 +108,11 @@ flutter:
108 - asset: assets/fonts/Montserrat-Regular.ttf
109 - asset: assets/fonts/Montserrat-Bold.ttf
110 - asset: assets/fonts/Montserrat-SemiBold.ttf
111 + - family: Poppins
112 + fonts:
113 + - asset: assets/fonts/Poppins-Regular.ttf
114 + - asset: assets/fonts/Poppins-Medium.ttf
115 + - asset: assets/fonts/Poppins-Bold.ttf
116
117
118 # To add assets to your application, add an assets section, like this: