CWA-201 | moved WalletTile class to wallet_tile.dart; changed design for PrimaryImageButton; changed background color for wallet_list_page; added short address to current wallet in the wallet_tile

lib/src/screens/wallet_list/wallet_list_page.dart

@@ -9,7 +9,9 @@ import 'package:cake_wallet/src/widgets/primary_button.dart';
 import 'package:cake_wallet/src/screens/base_page.dart';
 import 'package:cake_wallet/src/widgets/scollable_with_bottom_section.dart';
 import 'package:cake_wallet/src/stores/wallet_list/wallet_list_store.dart';
+import 'package:cake_wallet/src/stores/wallet/wallet_store.dart';
 import 'package:cake_wallet/src/screens/wallet_list/wallet_menu.dart';
+import 'package:cake_wallet/src/screens/wallet_list/widgets/wallet_tile.dart';
 
 class WalletListPage extends BasePage {
 
@@ -27,17 +29,20 @@ class WalletListBody extends StatefulWidget {
 
 class WalletListBodyState extends State<WalletListBody> {
   final moneroIcon = Image.asset('assets/images/monero.png', height: 24, width: 24);
+  final newWalletImage = Image.asset('assets/images/new_wallet.png', height: 12, width: 12, color: PaletteDark.historyPanel);
+  final restoreWalletImage = Image.asset('assets/images/restore_wallet.png', height: 12, width: 12, color: Colors.white,);
   WalletListStore _walletListStore;
   ScrollController scrollController = ScrollController();
 
   @override
   Widget build(BuildContext context) {
+    final walletStore = Provider.of<WalletStore>(context);
     _walletListStore = Provider.of<WalletListStore>(context);
 
     return SafeArea(
       child: Container(
         padding: EdgeInsets.only(top: 32),
-        color: PaletteDark.menuHeader,
+        color: PaletteDark.historyPanel,
         child: ScrollableWithBottomSection(
             contentPadding: EdgeInsets.only(bottom: 20),
             content: Container(
@@ -46,7 +51,7 @@ class WalletListBodyState extends State<WalletListBody> {
                     shrinkWrap: true,
                     physics: const NeverScrollableScrollPhysics(),
                     separatorBuilder: (_, index) => Divider(
-                        color: PaletteDark.menuHeader, height: 16),
+                        color: PaletteDark.historyPanel, height: 16),
                     itemCount: _walletListStore.wallets.length,
                     itemBuilder: (__, index) {
                       final wallet = _walletListStore.wallets[index];
@@ -55,6 +60,13 @@ class WalletListBodyState extends State<WalletListBody> {
                       final isCurrentWallet =
                       _walletListStore.isCurrentWallet(wallet);
 
+                      String shortAddress = '';
+
+                      if (isCurrentWallet) {
+                        shortAddress = walletStore.subaddress.address;
+                        shortAddress = shortAddress.replaceRange(4, shortAddress.length - 4, '...');
+                      }
+
                       final walletMenu = WalletMenu(context);
                       final items = walletMenu.generateItemsForWalletMenu(isCurrentWallet);
                       final colors = walletMenu.generateColorsForWalletMenu(isCurrentWallet);
@@ -75,7 +87,7 @@ class WalletListBodyState extends State<WalletListBody> {
                                   max: screenWidth,
                                   image: moneroIcon,
                                   walletName: wallet.name,
-                                  walletAddress: '',
+                                  walletAddress: shortAddress,
                                   isCurrent: isCurrentWallet
                               ),
                             ),
@@ -87,7 +99,28 @@ class WalletListBodyState extends State<WalletListBody> {
                                     final color = colors[index];
                                     final image = images[index];
 
-                                    final content = Center(
+                                    final radius = index == 0 ? 12.0 : 0.0;
+
+                                    return GestureDetector(
+                                      onTap: () {
+                                        scrollController.animateTo(0.0, duration: Duration(milliseconds: 500), curve: Curves.fastOutSlowIn);
+                                        walletMenu.action(
+                                            walletMenu.listItems.indexOf(item), wallet, isCurrentWallet);
+                                      },
+                                      child: Container(
+                                        height: 108,
+                                        width: 108,
+                                        color: PaletteDark.historyPanel,
+                                        child: Container(
+                                          padding: EdgeInsets.only(left: 5, right: 5),
+                                          decoration: BoxDecoration(
+                                              borderRadius: BorderRadius.only(
+                                                  topLeft: Radius.circular(radius),
+                                                  bottomLeft: Radius.circular(radius)
+                                              ),
+                                              color: color
+                                          ),
+                                          child: Center(
                                             child: Column(
                                               mainAxisSize: MainAxisSize.min,
                                               children: <Widget>[
@@ -103,46 +136,8 @@ class WalletListBodyState extends State<WalletListBody> {
                                                 )
                                               ],
                                             ),
-                                    );
-
-                                    if (index == 0) {
-                                      return GestureDetector(
-                                        onTap: () {
-                                          scrollController.animateTo(0.0, duration: Duration(milliseconds: 500), curve: Curves.fastOutSlowIn);
-                                          walletMenu.action(
-                                              walletMenu.listItems.indexOf(item), wallet, isCurrentWallet);
-                                        },
-                                        child: Container(
-                                          height: 108,
-                                          width: 108,
-                                          color: PaletteDark.menuHeader,
-                                          child: Container(
-                                            padding: EdgeInsets.only(left: 5, right: 5),
-                                            decoration: BoxDecoration(
-                                                borderRadius: BorderRadius.only(
-                                                    topLeft: Radius.circular(12),
-                                                    bottomLeft: Radius.circular(12)
-                                                ),
-                                                color: color
-                                            ),
-                                            child: content,
                                           ),
                                         ),
-                                      );
-                                    }
-
-                                    return GestureDetector(
-                                      onTap: () {
-                                        scrollController.animateTo(0.0, duration: Duration(milliseconds: 500), curve: Curves.fastOutSlowIn);
-                                        walletMenu.action(
-                                            walletMenu.listItems.indexOf(item), wallet, isCurrentWallet);
-                                      },
-                                      child: Container(
-                                        height: 108,
-                                        width: 108,
-                                        padding: EdgeInsets.only(left: 5, right: 5),
-                                        color: color,
-                                        child: content,
                                       ),
                                     );
                                   },
@@ -156,143 +151,22 @@ class WalletListBodyState extends State<WalletListBody> {
               ),
             ),
             bottomSection: Column(children: <Widget>[
-              PrimaryIconButton(
+              PrimaryImageButton(
                 onPressed: () => Navigator.of(context).pushNamed(Routes.newWallet),
-                  iconData: Icons.add,
+                image: newWalletImage,
-                  color: Theme.of(context).primaryTextTheme.button.backgroundColor,
+                text: S.of(context).wallet_list_create_new_wallet,
-                  borderColor:
+                color: Colors.white,
-                  Theme.of(context).primaryTextTheme.button.decorationColor,
+                textColor: PaletteDark.historyPanel),
-                  iconColor: Palette.violet,
-                  iconBackgroundColor: Theme.of(context).primaryIconTheme.color,
-                  text: S.of(context).wallet_list_create_new_wallet),
               SizedBox(height: 10.0),
-              PrimaryIconButton(
+              PrimaryImageButton(
                 onPressed: () =>
                     Navigator.of(context).pushNamed(Routes.restoreWalletOptions),
-                  iconData: Icons.refresh,
+                image: restoreWalletImage,
                 text: S.of(context).wallet_list_restore_wallet,
-                  color: Theme.of(context).accentTextTheme.button.backgroundColor,
+                color: PaletteDark.historyPanelButton,
-                  borderColor:
+                textColor: Colors.white)
-                  Theme.of(context).accentTextTheme.button.decorationColor,
-                  iconColor: Theme.of(context).primaryTextTheme.caption.color,
-                  iconBackgroundColor: Theme.of(context).accentIconTheme.color)
             ])),
       )
     );
   }
 }
-
-class WalletTile extends SliverPersistentHeaderDelegate {
-  WalletTile({
-    @required this.min,
-    @required this.max,
-    @required this.image,
-    @required this.walletName,
-    @required this.walletAddress,
-    @required this.isCurrent
-  });
-
-  final double min;
-  final double max;
-  final Image image;
-  final String walletName;
-  final String walletAddress;
-  final bool isCurrent;
-
-  @override
-  Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) {
-
-    double opacity = 1 - shrinkOffset / (max - min);
-    opacity = opacity >= 0 ? opacity : 0;
-
-    double panelWidth = 12 * opacity;
-    panelWidth = panelWidth < 12 ? 0 : 12;
-
-    final currentColor = isCurrent
-        ? Colors.white
-        : PaletteDark.menuHeader;
-
-    return Stack(
-      fit: StackFit.expand,
-      overflow: Overflow.visible,
-      children: <Widget>[
-        Positioned(
-          top: 0,
-          right: max - 4,
-          child: Container(
-            height: 108,
-            width: 4,
-            decoration: BoxDecoration(
-                borderRadius: BorderRadius.only(topRight: Radius.circular(4), bottomRight: Radius.circular(4)),
-                color: currentColor
-            ),
-          ),
-        ),
-        Positioned(
-          top: 0,
-          right: 12,
-          child: Container(
-            height: 108,
-            width: max - 16,
-            padding: EdgeInsets.only(left: 20, right: 20),
-            color: PaletteDark.menuHeader,
-            child: Column(
-              mainAxisSize: MainAxisSize.max,
-              mainAxisAlignment: MainAxisAlignment.center,
-              children: <Widget>[
-                Row(
-                  mainAxisAlignment: MainAxisAlignment.start,
-                  crossAxisAlignment: CrossAxisAlignment.center,
-                  children: <Widget>[
-                    image,
-                    SizedBox(width: 10),
-                    Text(
-                      walletName,
-                      style: TextStyle(
-                          fontSize: 22,
-                          fontWeight: FontWeight.bold,
-                          color: Colors.white
-                      ),
-                    )
-                  ],
-                )
-              ],
-            ),
-          ),
-        ),
-        Positioned(
-          top: 0,
-          right: 0,
-          child: Opacity(
-            opacity: opacity,
-            child: Container(
-              height: 108,
-              width: panelWidth,
-              decoration: BoxDecoration(
-                  borderRadius: BorderRadius.only(topLeft: Radius.circular(12), bottomLeft: Radius.circular(12)),
-                  gradient: LinearGradient(
-                      begin: Alignment.topCenter,
-                      end: Alignment.bottomCenter,
-                      colors: [
-                        PaletteDark.walletCardTopEndSync,
-                        PaletteDark.walletCardBottomEndSync
-                      ]
-                  )
-              ),
-            ),
-          )
-        ),
-      ],
-    );
-  }
-
-  @override
-  double get maxExtent => max;
-
-  @override
-  double get minExtent => min;
-
-  @override
-  bool shouldRebuild(SliverPersistentHeaderDelegate oldDelegate) => true;
-
-}

lib/src/screens/wallet_list/wallet_menu.dart

@@ -27,7 +27,7 @@ class WalletMenu {
 
   final List<Image> listImages = [
     Image.asset('assets/images/load.png', height: 32, width: 32, color: Colors.white),
-    Image.asset('assets/images/eye.png', height: 32, width: 32, color: Colors.white),
+    Image.asset('assets/images/eye_action.png', height: 32, width: 32, color: Colors.white),
     Image.asset('assets/images/trash.png', height: 32, width: 32, color: Colors.white),
     Image.asset('assets/images/scanner.png', height: 32, width: 32, color: Colors.white)
   ];

lib/src/screens/wallet_list/widgets/wallet_tile.dart

@@ -0,0 +1,135 @@
+import 'package:flutter/material.dart';
+import 'package:flutter/cupertino.dart';
+import 'package:cake_wallet/palette.dart';
+
+class WalletTile extends SliverPersistentHeaderDelegate {
+  WalletTile({
+    @required this.min,
+    @required this.max,
+    @required this.image,
+    @required this.walletName,
+    @required this.walletAddress,
+    @required this.isCurrent
+  });
+
+  final double min;
+  final double max;
+  final Image image;
+  final String walletName;
+  final String walletAddress;
+  final bool isCurrent;
+
+  @override
+  Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) {
+
+    double opacity = 1 - shrinkOffset / (max - min);
+    opacity = opacity >= 0 ? opacity : 0;
+
+    double panelWidth = 12 * opacity;
+    panelWidth = panelWidth < 12 ? 0 : 12;
+
+    final currentColor = isCurrent
+        ? Colors.white
+        : PaletteDark.historyPanel;
+
+    return Stack(
+      fit: StackFit.expand,
+      overflow: Overflow.visible,
+      children: <Widget>[
+        Positioned(
+          top: 0,
+          right: max - 4,
+          child: Container(
+            height: 108,
+            width: 4,
+            decoration: BoxDecoration(
+                borderRadius: BorderRadius.only(topRight: Radius.circular(4), bottomRight: Radius.circular(4)),
+                color: currentColor
+            ),
+          ),
+        ),
+        Positioned(
+          top: 0,
+          right: 12,
+          child: Container(
+            height: 108,
+            width: max - 16,
+            padding: EdgeInsets.only(left: 20, right: 20),
+            color: PaletteDark.historyPanel,
+            child: Column(
+              mainAxisSize: MainAxisSize.max,
+              mainAxisAlignment: MainAxisAlignment.center,
+              children: <Widget>[
+                Row(
+                  mainAxisAlignment: MainAxisAlignment.start,
+                  crossAxisAlignment: CrossAxisAlignment.center,
+                  children: <Widget>[
+                    image,
+                    SizedBox(width: 10),
+                    Text(
+                      walletName,
+                      style: TextStyle(
+                          fontSize: 22,
+                          fontWeight: FontWeight.bold,
+                          color: Colors.white
+                      ),
+                    )
+                  ],
+                ),
+                isCurrent ? SizedBox(height: 5) : Offstage(),
+                isCurrent
+                ? Row(
+                  mainAxisAlignment: MainAxisAlignment.start,
+                  crossAxisAlignment: CrossAxisAlignment.center,
+                  children: <Widget>[
+                    SizedBox(width: 34),
+                    Text(
+                      walletAddress,
+                      style: TextStyle(
+                        fontSize: 12,
+                        color: PaletteDark.walletCardText
+                      ),
+                    )
+                  ],
+                )
+                : Offstage()
+              ],
+            ),
+          ),
+        ),
+        Positioned(
+            top: 0,
+            right: 0,
+            child: Opacity(
+              opacity: opacity,
+              child: Container(
+                height: 108,
+                width: panelWidth,
+                decoration: BoxDecoration(
+                    borderRadius: BorderRadius.only(topLeft: Radius.circular(12), bottomLeft: Radius.circular(12)),
+                    gradient: LinearGradient(
+                        begin: Alignment.topCenter,
+                        end: Alignment.bottomCenter,
+                        colors: [
+                          PaletteDark.walletCardTopEndSync,
+                          PaletteDark.walletCardBottomEndSync
+                        ]
+                    )
+                ),
+              ),
+            )
+        ),
+      ],
+    );
+  }
+
+  @override
+  double get maxExtent => max;
+
+  @override
+  double get minExtent => min;
+
+  @override
+  bool shouldRebuild(SliverPersistentHeaderDelegate oldDelegate) => true;
+
+}

lib/src/widgets/primary_button.dart

@@ -143,29 +143,42 @@ class PrimaryImageButton extends StatelessWidget {
       {@required this.onPressed,
       @required this.image,
       @required this.text,
-      this.color = Palette.purple,
+      @required this.color,
-      this.borderColor = Palette.deepPink,
+      @required this.textColor});
-      this.iconColor = Colors.black});
 
   final VoidCallback onPressed;
   final Image image;
   final Color color;
-  final Color borderColor;
+  final Color textColor;
-  final Color iconColor;
   final String text;
 
   @override
   Widget build(BuildContext context) {
     return ButtonTheme(
         minWidth: double.infinity,
-        height: 58.0,
+        height: 52.0,
         child: FlatButton(
           onPressed: onPressed,
           color: color,
           shape: RoundedRectangleBorder(
-              side: BorderSide(color: borderColor),
+            borderRadius: BorderRadius.circular(26.0)),
-              borderRadius: BorderRadius.circular(12.0)),
+          child:Center(
             child: Row(
+              mainAxisSize: MainAxisSize.min,
+              children: <Widget>[
+                image,
+                SizedBox(width: 15),
+                Text(
+                  text,
+                  style: TextStyle(
+                    fontSize: 15,
+                    color: textColor
+                  ),
+                )
+              ],
+            ),
+          )
+          /*Row(
             children: <Widget>[
               Container(
                 width: 28.0,
@@ -192,7 +205,7 @@ class PrimaryImageButton extends StatelessWidget {
                     )
                   ]))
             ],
-          ),
+          ),*/
         ));
   }
 }