Merge pull request #797 from cake-tech/align-create-restore-screens

Fix alignment in create and restore wallet screens

lib/src/screens/dashboard/desktop_widgets/desktop_dashboard_navbar.dart

@@ -0,0 +1,48 @@
+import 'package:cake_wallet/di.dart';
+import 'package:cake_wallet/store/settings_store.dart';
+import 'package:cake_wallet/themes/theme_base.dart';
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+
+class DesktopDashboardNavbar extends StatelessWidget implements ObstructingPreferredSizeWidget {
+  final Widget leading;
+  final Widget middle;
+  final Widget trailing;
+
+  DesktopDashboardNavbar({
+    super.key,
+    required this.leading,
+    required this.middle,
+    required this.trailing,
+  });
+
+  ThemeBase get currentTheme => getIt.get<SettingsStore>().currentTheme;
+
+  @override
+  Widget build(BuildContext context) {
+    final appBarColor =
+        currentTheme.type == ThemeType.dark ? Colors.black.withOpacity(0.1) : Colors.white;
+
+    return Container(
+      padding: const EdgeInsetsDirectional.only(end: 24),
+      color: appBarColor,
+      child: Center(
+        child: Row(
+          mainAxisSize: MainAxisSize.max,
+          mainAxisAlignment: MainAxisAlignment.spaceBetween,
+          children: [
+            Flexible(child: leading),
+            middle,
+            trailing,
+          ],
+        ),
+      ),
+    );
+  }
+
+  @override
+  Size get preferredSize => Size.fromHeight(60);
+  
+  @override
+  bool shouldFullyObstruct(BuildContext context) => false;
+}

lib/src/screens/dashboard/desktop_widgets/desktop_sidebar_wrapper.dart

@@ -2,17 +2,19 @@ import 'package:cake_wallet/di.dart';
 import 'package:cake_wallet/routes.dart';
 import 'package:cake_wallet/src/screens/dashboard/desktop_dashboard_page.dart';
 import 'package:cake_wallet/src/screens/base_page.dart';
+import 'package:cake_wallet/src/screens/dashboard/desktop_widgets/desktop_dashboard_navbar.dart';
 import 'package:cake_wallet/src/screens/dashboard/desktop_widgets/desktop_sidebar/side_menu.dart';
 import 'package:cake_wallet/src/screens/dashboard/desktop_widgets/desktop_sidebar/side_menu_item.dart';
 import 'package:cake_wallet/src/screens/dashboard/desktop_widgets/desktop_wallet_selection_dropdown.dart';
 import 'package:cake_wallet/src/screens/dashboard/widgets/sync_indicator.dart';
-import 'package:cake_wallet/themes/theme_base.dart';
 import 'package:cake_wallet/view_model/dashboard/dashboard_view_model.dart';
 import 'package:cake_wallet/view_model/dashboard/desktop_sidebar_view_model.dart';
+import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_mobx/flutter_mobx.dart';
 import 'package:cake_wallet/router.dart' as Router;
 import 'package:mobx/mobx.dart';
+
 class DesktopSidebarWrapper extends BasePage {
   final Widget child;
   final DesktopSidebarViewModel desktopSidebarViewModel;
@@ -27,38 +29,16 @@ class DesktopSidebarWrapper extends BasePage {
   static Key _pageViewKey = GlobalKey();
 
   @override
-  Color get backgroundLightColor =>
+  ObstructingPreferredSizeWidget appBar(BuildContext context) => DesktopDashboardNavbar(
-      currentTheme.type == ThemeType.bright ? Colors.transparent : Colors.white;
+        leading: Padding(
-
-  @override
-  Color get backgroundDarkColor => Colors.black.withOpacity(0.1);
-
-  @override
-  bool get resizeToAvoidBottomInset => false;
-
-  final pageController = PageController();
-
-  final selectedIconPath = 'assets/images/desktop_transactions_solid_icon.png';
-  final unselectedIconPath = 'assets/images/desktop_transactions_outline_icon.png';
-
-  double get sideMenuWidth => 76.0;
-
-  @override
-  Widget? leading(BuildContext context) => Padding(
           padding: EdgeInsets.only(left: sideMenuWidth),
           child: getIt<DesktopWalletSelectionDropDown>(),
-      );
+        ),
-
+        middle: SyncIndicator(
-  @override
-  Widget middle(BuildContext context) {
-    return SyncIndicator(
           dashboardViewModel: dashboardViewModel,
-        onTap: () => Navigator.of(context, rootNavigator: true).pushNamed(Routes.connectionSync));
+          onTap: () => Navigator.of(context, rootNavigator: true).pushNamed(Routes.connectionSync),
-  }
+        ),
-
+        trailing: InkWell(
-  @override
-  Widget trailing(BuildContext context) {
-    return InkWell(
           onTap: () {
             String? currentPath;
 
@@ -88,8 +68,18 @@ class DesktopSidebarWrapper extends BasePage {
               );
             },
           ),
+        ),
       );
-  }
+
+  @override
+  bool get resizeToAvoidBottomInset => false;
+
+  final pageController = PageController();
+
+  final selectedIconPath = 'assets/images/desktop_transactions_solid_icon.png';
+  final unselectedIconPath = 'assets/images/desktop_transactions_outline_icon.png';
+
+  double get sideMenuWidth => 76.0;
 
   @override
   Widget body(BuildContext context) {
@@ -159,9 +149,7 @@ class DesktopSidebarWrapper extends BasePage {
   final desktopKey = DesktopDashboardPage.desktopKey;
 
   void _setEffects() async {
-
     reaction<SidebarItem>((_) => desktopSidebarViewModel.currentPage, (page) {
-
       String? currentPath;
 
       desktopKey.currentState?.popUntil((route) {

lib/src/screens/restore/restore_from_backup_page.dart

@@ -1,6 +1,7 @@
 import 'package:cake_wallet/core/execution_state.dart';
 import 'package:cake_wallet/generated/i18n.dart';
 import 'package:cake_wallet/src/widgets/alert_with_one_action.dart';
+import 'package:cake_wallet/utils/responsive_layout_util.dart';
 import 'package:cake_wallet/utils/show_pop_up.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/src/widgets/framework.dart';
@@ -39,7 +40,10 @@ class RestoreFromBackupPage extends BasePage {
       }
     });
 
-    return Container(
+    return Center(
+      child: ConstrainedBox(
+        constraints: BoxConstraints(maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint),
+        child: Padding(
             padding: EdgeInsets.only(bottom: 24, left: 24, right: 24),
             child: Column(children: [
               Expanded(
@@ -75,7 +79,9 @@ class RestoreFromBackupPage extends BasePage {
                       textColor: Colors.white);
                 }))
               ])),
-        ]));
+            ])),
+      ),
+    );
   }
 
   Future<void> presentFilePicker() async {

lib/src/screens/restore/restore_options_page.dart

@@ -1,3 +1,4 @@
+import 'package:cake_wallet/utils/responsive_layout_util.dart';
 import 'package:flutter/material.dart';
 import 'package:cake_wallet/routes.dart';
 import 'package:flutter/cupertino.dart';
@@ -18,10 +19,11 @@ class RestoreOptionsPage extends BasePage {
 
   @override
   Widget body(BuildContext context) {
-    return Container(
+    return Center(
-        width: double.infinity,
+      child: Container(
+          width: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint,
           height: double.infinity,
-        padding: EdgeInsets.all(24),
+          padding: EdgeInsets.symmetric(vertical: 24),
           child: SingleChildScrollView(
             child: Column(
               children: <Widget>[
@@ -43,6 +45,7 @@ class RestoreOptionsPage extends BasePage {
                 )
               ],
             ),
-        ));
+          )),
+    );
   }
 }

lib/src/screens/seed/pre_seed_page.dart

@@ -1,3 +1,4 @@
+import 'package:cake_wallet/utils/responsive_layout_util.dart';
 import 'package:cw_core/wallet_type.dart';
 import 'package:cake_wallet/routes.dart';
 import 'package:cake_wallet/themes/theme_base.dart';
@@ -33,7 +34,10 @@ class PreSeedPage extends BasePage {
     return WillPopScope(
         onWillPop: () async => false,
         child: Container(
+          alignment: Alignment.center,
           padding: EdgeInsets.all(24),
+          child: ConstrainedBox(
+              constraints: BoxConstraints(maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint),
             child: Column(
               children: [
                 Flexible(
@@ -72,6 +76,7 @@ class PreSeedPage extends BasePage {
                     ))
               ],
             ),
+          ),
         ));
   }
 }

lib/src/screens/seed/wallet_seed_page.dart

@@ -1,9 +1,9 @@
 import 'package:cake_wallet/palette.dart';
 import 'package:cake_wallet/themes/theme_base.dart';
 import 'package:cake_wallet/src/widgets/alert_with_two_actions.dart';
+import 'package:cake_wallet/utils/responsive_layout_util.dart';
 import 'package:cake_wallet/utils/show_bar.dart';
 import 'package:cake_wallet/utils/show_pop_up.dart';
-import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:share_plus/share_plus.dart';
@@ -22,6 +22,9 @@ class WalletSeedPage extends BasePage {
   @override
   String get title => S.current.seed_title;
 
+  @override
+  bool get canUseDesktopAppBar => false;  
+
   final bool isNewWalletCreated;
   final WalletSeedViewModel walletSeedViewModel;
 
@@ -53,7 +56,7 @@ class WalletSeedPage extends BasePage {
 
   @override
   Widget? leading(BuildContext context) =>
-      isNewWalletCreated ? Offstage() : super.leading(context);
+      isNewWalletCreated ? null: super.leading(context);
 
   @override
   Widget trailing(BuildContext context) {
@@ -86,6 +89,10 @@ class WalletSeedPage extends BasePage {
 
     return WillPopScope(onWillPop: () async => false, child:  Container(
         padding: EdgeInsets.all(24),
+        alignment: Alignment.center,
+        child: ConstrainedBox(
+          constraints:
+              BoxConstraints(maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint),
           child: Column(
             children: <Widget>[
               Flexible(
@@ -190,6 +197,7 @@ class WalletSeedPage extends BasePage {
                     ],
                   ))
             ],
+          ),
         )));
   }
 }

lib/src/widgets/nav_bar.dart

@@ -1,4 +1,3 @@
-import 'package:cake_wallet/utils/responsive_layout_util.dart';
 import 'package:flutter/cupertino.dart';
 
 class NavBar extends StatelessWidget implements ObstructingPreferredSizeWidget {
@@ -60,24 +59,6 @@ class NavBar extends StatelessWidget implements ObstructingPreferredSizeWidget {
     final paddingTop = pad / 2;
     final _paddingBottom = (pad / 2);
 
-    if (!ResponsiveLayoutUtil.instance.isMobile(context)) {
-      return Container(
-        padding: const EdgeInsetsDirectional.only(end: 24),
-        color: backgroundColor,
-        child: Center(
-          child: Row(
-            mainAxisSize: MainAxisSize.max,
-            mainAxisAlignment: MainAxisAlignment.spaceBetween,
-            children: [
-              if (leading != null) Flexible(child: leading!) else const SizedBox(),
-              if (middle != null) middle!,
-              trailing ?? const SizedBox(),
-            ],
-          ),
-        ),
-      );
-    }
-
     return Container(
       decoration: decoration ?? BoxDecoration(color: backgroundColor),
       padding: EdgeInsetsDirectional.only(bottom: _paddingBottom, top: paddingTop),