CWA-209 | applied new design to receive page

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

@@ -12,7 +12,8 @@ import 'package:flutter_mobx/flutter_mobx.dart';
 import 'package:cake_wallet/palette.dart';
 import 'package:cake_wallet/generated/i18n.dart';
 import 'package:cake_wallet/src/domain/common/sync_status.dart';
-import 'package:cake_wallet/src/screens/receive/qr_image.dart';
+import 'package:cake_wallet/src/screens/receive/widgets/qr_image.dart';
+import 'package:cake_wallet/routes.dart';
 
 class WalletCard extends StatefulWidget {
   @override
@@ -425,7 +426,9 @@ class WalletCardState extends State<WalletCard> {
                           color: PaletteDark.walletCardSubAddressField
                       ),
                       child: InkWell(
-                        onTap: () {},
+                        onTap: () => Navigator.of(context,
+                            rootNavigator: true)
+                            .pushNamed(Routes.receive),
                         child: Row(
                           mainAxisAlignment: MainAxisAlignment.spaceBetween,
                           children: <Widget>[

lib/src/screens/exchange_trade/exchange_trade_page.dart

@@ -13,7 +13,7 @@ import 'package:cake_wallet/src/stores/send/send_store.dart';
 import 'package:cake_wallet/src/stores/send/sending_state.dart';
 import 'package:cake_wallet/src/stores/wallet/wallet_store.dart';
 import 'package:cake_wallet/src/screens/exchange_trade/widgets/copy_button.dart';
-import 'package:cake_wallet/src/screens/receive/qr_image.dart';
+import 'package:cake_wallet/src/screens/receive/widgets/qr_image.dart';
 import 'package:cake_wallet/src/screens/base_page.dart';
 import 'package:cake_wallet/src/screens/exchange_trade/widgets/timer_widget.dart';
 import 'package:cake_wallet/src/widgets/primary_button.dart';

lib/src/screens/receive/receive_page.dart

@@ -9,12 +9,15 @@ import 'package:cake_wallet/palette.dart';
 import 'package:cake_wallet/generated/i18n.dart';
 import 'package:cake_wallet/src/stores/subaddress_list/subaddress_list_store.dart';
 import 'package:cake_wallet/src/stores/wallet/wallet_store.dart';
-import 'package:cake_wallet/src/screens/receive/qr_image.dart';
+import 'package:cake_wallet/src/screens/receive/widgets/qr_image.dart';
 import 'package:cake_wallet/src/screens/base_page.dart';
 
 class ReceivePage extends BasePage {
   @override
-  bool get isModalBackButton => true;
+  Color get backgroundColor => PaletteDark.mainBackgroundColor;
+
+  @override
+  bool get resizeToAvoidBottomPadding => false;
 
   @override
   String get title => S.current.receive;
@@ -22,6 +25,7 @@ class ReceivePage extends BasePage {
   @override
   Widget trailing(BuildContext context) {
     final walletStore = Provider.of<WalletStore>(context);
+    final shareImage = Image.asset('assets/images/share.png');
 
     return SizedBox(
       height: 37.0,
@@ -34,17 +38,13 @@ class ReceivePage extends BasePage {
             padding: EdgeInsets.all(0),
             onPressed: () => Share.text(
                 'Share address', walletStore.subaddress.address, 'text/plain'),
-            child: Icon(
+            child: shareImage),
-              Icons.share,
-              size: 30.0,
-            )),
       ),
     );
   }
 
   @override
-  Widget body(BuildContext context) =>
+  Widget body(BuildContext context) => ReceiveBody();
-      SingleChildScrollView(child: ReceiveBody());
 }
 
 class ReceiveBody extends StatefulWidget {
@@ -67,8 +67,10 @@ class ReceiveBodyState extends State<ReceiveBody> {
     final walletStore = Provider.of<WalletStore>(context);
     final subaddressListStore = Provider.of<SubaddressListStore>(context);
 
-    final currentColor = Theme.of(context).selectedRowColor;
+    final copyImage = Image.asset('assets/images/copy_content.png');
-    final notCurrentColor = Theme.of(context).scaffoldBackgroundColor;
+
+    final currentColor = PaletteDark.menuList;
+    final notCurrentColor = Colors.transparent;
 
     amountController.addListener(() {
       if (_formKey.currentState.validate()) {
@@ -78,16 +80,16 @@ class ReceiveBodyState extends State<ReceiveBody> {
       }
     });
 
-    return SafeArea(
+    return Container(
-        child: SingleChildScrollView(
+      height: MediaQuery.of(context).size.height,
+      width: MediaQuery.of(context).size.width,
+      color: PaletteDark.mainBackgroundColor,
+      padding: EdgeInsets.only(top: 24),
       child: Column(
         children: <Widget>[
-        Container(
+          Flexible(
-          padding: EdgeInsets.all(35.0),
+            flex: 2,
-          color: Theme.of(context).backgroundColor,
+            child: Observer(builder: (_) {
-          child: Column(
-            children: <Widget>[
-              Observer(builder: (_) {
               return Row(
                 children: <Widget>[
                   Spacer(
@@ -95,15 +97,14 @@ class ReceiveBodyState extends State<ReceiveBody> {
                   ),
                   Flexible(
                       flex: 2,
+                      child: Center(
                         child: AspectRatio(
                           aspectRatio: 1.0,
-                          child: Container(
-                            padding: EdgeInsets.all(5),
-                            color: Colors.white,
                           child: QrImage(
                             data: walletStore.subaddress.address +
                                 walletStore.amountValue,
                             backgroundColor: Colors.transparent,
+                            foregroundColor: PaletteDark.walletCardText,
                           ),
                         ),
                       )),
@@ -113,43 +114,10 @@ class ReceiveBodyState extends State<ReceiveBody> {
                 ],
               );
             }),
-              Observer(builder: (_) {
-                return Row(
-                  children: <Widget>[
-                    Expanded(
-                        child: Container(
-                      padding: EdgeInsets.all(20.0),
-                      child: Center(
-                        child: GestureDetector(
-                          onTap: () {
-                            Clipboard.setData(ClipboardData(
-                                text: walletStore.subaddress.address));
-                            Scaffold.of(context).showSnackBar(SnackBar(
-                              content: Text(
-                                S.of(context).copied_to_clipboard,
-                                style: TextStyle(color: Colors.white),
           ),
-                              backgroundColor: Colors.green,
+          Padding(
-                            ));
+            padding: EdgeInsets.all(24),
-                          },
+            child: Row(
-                          child: Text(
-                            walletStore.subaddress.address,
-                            textAlign: TextAlign.center,
-                            style: TextStyle(
-                                fontSize: 14.0,
-                                fontWeight: FontWeight.w600,
-                                color: Theme.of(context)
-                                    .primaryTextTheme
-                                    .title
-                                    .color),
-                          ),
-                        ),
-                      ),
-                    ))
-                  ],
-                );
-              }),
-              Row(
               children: <Widget>[
                 Expanded(
                     child: Form(
@@ -161,19 +129,22 @@ class ReceiveBodyState extends State<ReceiveBody> {
                             BlacklistingTextInputFormatter(
                                 RegExp('[\\-|\\ |\\,]'))
                           ],
+                          textAlign: TextAlign.center,
                           style: TextStyle(
-                              fontSize: 14.0,
+                              fontSize: 20.0,
+                              color: Colors.white
                           ),
                           decoration: InputDecoration(
                               hintStyle: TextStyle(
-                                    color: Theme.of(context).hintColor),
+                                  fontSize: 20,
+                                  color: PaletteDark.walletCardText),
                               hintText: S.of(context).amount,
                               focusedBorder: UnderlineInputBorder(
                                   borderSide: BorderSide(
-                                        color: Palette.cakeGreen, width: 2.0)),
+                                      color: PaletteDark.walletCardText, width: 1.0)),
                               enabledBorder: UnderlineInputBorder(
                                   borderSide: BorderSide(
-                                        color: Theme.of(context).focusColor,
+                                      color: PaletteDark.walletCardText,
                                       width: 1.0))),
                           validator: (value) {
                             walletStore.validateAmount(value);
@@ -183,97 +154,199 @@ class ReceiveBodyState extends State<ReceiveBody> {
                           controller: amountController,
                         )))
               ],
-              )
-            ],
             ),
           ),
-        Row(
+          Padding(
+            padding: EdgeInsets.only(left: 24, right: 24, bottom: 24),
+            child: Observer(
+              builder: (_) => GestureDetector(
+                onTap: () {
+                  Clipboard.setData(ClipboardData(
+                      text: walletStore.subaddress.address));
+                  Scaffold.of(context).showSnackBar(SnackBar(
+                    content: Text(
+                      S.of(context).copied_to_clipboard,
+                      style: TextStyle(color: Colors.white),
+                    ),
+                    backgroundColor: Colors.green,
+                    duration: Duration(milliseconds: 500),
+                  ));
+                },
+                child: Container(
+                  height: 54,
+                  padding: EdgeInsets.only(left: 24, right: 24),
+                  decoration: BoxDecoration(
+                      borderRadius: BorderRadius.all(Radius.circular(27)),
+                      color: PaletteDark.walletCardSubAddressField
+                  ),
+                  child: Row(
+                    mainAxisSize: MainAxisSize.max,
                     children: <Widget>[
                       Expanded(
-                child: Container(
+                        child: Text(
-              color: Theme.of(context).accentTextTheme.headline.color,
+                          walletStore.subaddress.address,
-              child: Column(
+                          maxLines: 1,
-                children: <Widget>[
+                          overflow: TextOverflow.ellipsis,
-                  ListTile(
-                    title: Text(
-                      S.of(context).subaddresses,
                           style: TextStyle(
-                          fontSize: 16.0,
+                              fontSize: 18,
-                          color: Theme.of(context)
+                              fontWeight: FontWeight.w600,
-                              .primaryTextTheme
+                              color: Colors.white
-                              .headline
-                              .color),
-                    ),
-                    trailing: Container(
-                      width: 28.0,
-                      height: 28.0,
-                      decoration: BoxDecoration(
-                          color: Theme.of(context).selectedRowColor,
-                          shape: BoxShape.circle),
-                      child: InkWell(
-                        onTap: () => Navigator.of(context)
-                            .pushNamed(Routes.newSubaddress),
-                        borderRadius: BorderRadius.all(Radius.circular(14.0)),
-                        child: Icon(
-                          Icons.add,
-                          color: Palette.violet,
-                          size: 22.0,
                           ),
                         ),
                       ),
-                  ),
+                      Padding(
-                  Divider(
+                        padding: EdgeInsets.only(left: 12),
-                    color: Theme.of(context).dividerTheme.color,
+                        child: copyImage,
-                    height: 1.0,
                       )
                     ],
                   ),
-            ))
-          ],
                 ),
-        Observer(builder: (_) {
+              )
-          return ListView.separated(
+            ),
-              shrinkWrap: true,
+          ),
-              physics: NeverScrollableScrollPhysics(),
+          Flexible(
-              itemCount: subaddressListStore.subaddresses.length,
+            flex: 3,
-              separatorBuilder: (context, i) {
+            child: ClipRRect(
-                return Divider(
+              borderRadius: BorderRadius.only(
-                  color: Theme.of(context).dividerTheme.color,
+                topLeft: Radius.circular(24),
-                  height: 1.0,
+                topRight: Radius.circular(24),
+              ),
+              child: Container(
+                color: PaletteDark.historyPanel,
+                child: Observer(
+                  builder: (_) => ListView.separated(
+                    separatorBuilder: (context, index) => Divider(
+                      height: 1,
+                      color: PaletteDark.menuList,
+                    ),
+                    itemCount: subaddressListStore.subaddresses.length + 2,
+                    itemBuilder: (context, index) {
+
+                      if (index == 0) {
+                        return accountTile(
+                            onTap: () {},
+                            title: walletStore.account.label,
+                            icon: Icon(
+                              Icons.arrow_forward_ios,
+                              size: 14,
+                              color: Colors.white,
+                            )
                         );
-              },
+                      }
-              itemBuilder: (context, i) {
+
-                return Observer(builder: (_) {
+                      if (index == 1) {
-                  final subaddress = subaddressListStore.subaddresses[i];
+                        return accountTile(
+                            onTap: () => Navigator.of(context)
+                                .pushNamed(Routes.newSubaddress),
+                            title: S.of(context).subaddresses,
+                            icon: Icon(
+                              Icons.add,
+                              size: 20,
+                              color: Colors.white,
+                            )
+                        );
+                      }
+
+                      index -= 2;
+
+                      return Observer(
+                        builder: (_) {
+                          final subaddress = subaddressListStore.subaddresses[index];
                           final isCurrent =
                               walletStore.subaddress.address == subaddress.address;
-                  final label = subaddress.label.isNotEmpty
+
-                      ? subaddress.label
+                          final label = subaddress.label;
-                      : subaddress.address;
+                          final address = subaddress.address;
 
                           return InkWell(
                             onTap: () => walletStore.setSubaddress(subaddress),
                             child: Container(
                               color: isCurrent ? currentColor : notCurrentColor,
-                      child: Column(children: <Widget>[
+                              padding: EdgeInsets.only(
-                        ListTile(
+                                  left: 24,
-                          title: Text(
+                                  right: 24,
+                                  top: 32,
+                                  bottom: 32
+                              ),
+                              child: Column(
+                                  mainAxisAlignment: MainAxisAlignment.start,
+                                  crossAxisAlignment: CrossAxisAlignment.start,
+                                  children: <Widget>[
+                                    label.isNotEmpty
+                                        ? Text(
                                       label,
                                       style: TextStyle(
-                                fontSize: 16.0,
+                                          fontSize: 14,
-                                color: Theme.of(context)
+                                          color: PaletteDark.walletCardText
-                                    .primaryTextTheme
+                                      ),
-                                    .headline
+                                    )
-                                    .color),
+                                        : Offstage(),
+                                    Padding(
+                                      padding: label.isNotEmpty
+                                          ? EdgeInsets.only(top: 10)
+                                          : EdgeInsets.only(top: 0),
+                                      child: Text(
+                                        address,
+                                        style: TextStyle(
+                                            fontSize: 16,
+                                            fontWeight: FontWeight.w600,
+                                            color: Colors.white
+                                        ),
                                       ),
                                     )
                                   ]),
                             ),
                           );
-                });
+                        }
-              });
+                      );
-        })
+                    }
+                  )
+                ),
+              ),
+            )
+          )
         ],
-    )));
+      ),
+    );
   }
+
+  Widget accountTile({
+    @required VoidCallback onTap,
+    @required String title,
+    @required Icon icon
+  }) => GestureDetector(
+    onTap: onTap,
+    child: Container(
+      padding: EdgeInsets.only(
+        left: 24,
+        right: 24,
+        top: 32,
+        bottom: 32
+      ),
+      color: Colors.transparent,
+      child: Row(
+        mainAxisSize: MainAxisSize.max,
+        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+        children: <Widget>[
+          Text(
+            title,
+            style: TextStyle(
+              fontSize: 18,
+              fontWeight: FontWeight.bold,
+              color: Colors.white
+            ),
+          ),
+          Container(
+            height: 32,
+            width: 32,
+            decoration: BoxDecoration(
+              shape: BoxShape.circle,
+              color: PaletteDark.menuList
+            ),
+            child: icon,
+          )
+        ],
+      ),
+    ),
+  );
 }

lib/src/screens/receive/widgets/qr_image.dart

@@ -1,6 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:qr/qr.dart';
-import 'package:cake_wallet/src/screens/receive/qr_painter.dart';
+import 'package:cake_wallet/src/screens/receive/widgets/qr_painter.dart';
 
 class QrImage extends StatelessWidget {
   QrImage({