started nodes dialog popup

lib/pages/settings_views/global_settings_view/manage_nodes_views/coin_nodes_view.dart

@@ -7,7 +7,10 @@ import 'package:stackwallet/utilities/assets.dart';
 import 'package:stackwallet/utilities/enums/coin_enum.dart';
 import 'package:stackwallet/utilities/text_styles.dart';
 import 'package:stackwallet/utilities/theme/stack_colors.dart';
+import 'package:stackwallet/utilities/util.dart';
 import 'package:stackwallet/widgets/custom_buttons/app_bar_icon_button.dart';
+import 'package:stackwallet/widgets/desktop/desktop_dialog.dart';
+import 'package:stackwallet/widgets/desktop/desktop_dialog_close_button.dart';
 import 'package:tuple/tuple.dart';
 
 class CoinNodesView extends ConsumerStatefulWidget {
@@ -37,69 +40,139 @@ class _CoinNodesViewState extends ConsumerState<CoinNodesView> {
 
   @override
   Widget build(BuildContext context) {
-    return Scaffold(
+    if (Util.isDesktop) {
-      backgroundColor: Theme.of(context).extension<StackColors>()!.background,
+      return DesktopDialog(
-      appBar: AppBar(
+        child: Column(
-        leading: AppBarBackButton(
+          children: [
-          onPressed: () {
+            Row(
-            Navigator.of(context).pop();
+              children: [
-          },
+                const SizedBox(
-        ),
+                  width: 32,
-        title: Text(
-          "${widget.coin.prettyName} nodes",
-          style: STextStyles.navBarTitle(context),
-        ),
-        actions: [
-          Padding(
-            padding: const EdgeInsets.only(
-              top: 10,
-              bottom: 10,
-              right: 10,
-            ),
-            child: AspectRatio(
-              aspectRatio: 1,
-              child: AppBarIconButton(
-                key: const Key("manageNodesAddNewNodeButtonKey"),
-                size: 36,
-                shadows: const [],
-                color: Theme.of(context).extension<StackColors>()!.background,
-                icon: SvgPicture.asset(
-                  Assets.svg.plus,
-                  color: Theme.of(context)
-                      .extension<StackColors>()!
-                      .accentColorDark,
-                  width: 20,
-                  height: 20,
                 ),
-                onPressed: () {
+                SvgPicture.asset(
-                  Navigator.of(context).pushNamed(
+                  Assets.svg.iconFor(coin: widget.coin),
-                    AddEditNodeView.routeName,
+                  width: 24,
-                    arguments: Tuple4(
+                  height: 24,
-                      AddEditNodeViewType.add,
+                ),
-                      widget.coin,
+                const SizedBox(
-                      null,
+                  width: 12,
-                      CoinNodesView.routeName,
+                ),
+                Text(
+                  "${widget.coin.prettyName} nodes",
+                  style: STextStyles.desktopH3(context),
+                  textAlign: TextAlign.center,
+                ),
+                Expanded(
+                  child: const DesktopDialogCloseButton(),
+                ),
+              ],
+            ),
+            Padding(
+              padding: EdgeInsets.only(
+                left: 32,
+                right: 32,
+              ),
+              child: Row(
+                mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                children: [
+                  Text(
+                    "${widget.coin.prettyName} nodes",
+                    style: STextStyles.desktopTextExtraSmall(context).copyWith(
+                      color:
+                          Theme.of(context).extension<StackColors>()!.textDark3,
                     ),
-                  );
+                    textAlign: TextAlign.left,
-                },
+                  ),
+                  RichText(
+                    text: TextSpan(
+                      text: 'Add new nodes',
+                      style:
+                          STextStyles.desktopTextExtraSmall(context).copyWith(
+                        color: Colors.blueAccent,
+                      ),
+                    ),
+                  ),
+                ],
               ),
             ),
-          ),
+            const SizedBox(
-        ],
+              width: 12,
-      ),
+            ),
-      body: Padding(
+            Padding(
-        padding: const EdgeInsets.only(
+              padding: const EdgeInsets.all(20),
-          top: 12,
+              child: NodesList(
-          left: 12,
+                coin: widget.coin,
-          right: 12,
+                popBackToRoute: CoinNodesView.routeName,
+              ),
+            ),
+          ],
         ),
-        child: SingleChildScrollView(
+      );
-          child: NodesList(
+    } else {
-            coin: widget.coin,
+      return Scaffold(
-            popBackToRoute: CoinNodesView.routeName,
+        backgroundColor: Theme.of(context).extension<StackColors>()!.background,
+        appBar: AppBar(
+          leading: AppBarBackButton(
+            onPressed: () {
+              Navigator.of(context).pop();
+            },
+          ),
+          title: Text(
+            "${widget.coin.prettyName} nodes",
+            style: STextStyles.navBarTitle(context),
+          ),
+          actions: [
+            Padding(
+              padding: const EdgeInsets.only(
+                top: 10,
+                bottom: 10,
+                right: 10,
+              ),
+              child: AspectRatio(
+                aspectRatio: 1,
+                child: AppBarIconButton(
+                  key: const Key("manageNodesAddNewNodeButtonKey"),
+                  size: 36,
+                  shadows: const [],
+                  color: Theme.of(context).extension<StackColors>()!.background,
+                  icon: SvgPicture.asset(
+                    Assets.svg.plus,
+                    color: Theme.of(context)
+                        .extension<StackColors>()!
+                        .accentColorDark,
+                    width: 20,
+                    height: 20,
+                  ),
+                  onPressed: () {
+                    Navigator.of(context).pushNamed(
+                      AddEditNodeView.routeName,
+                      arguments: Tuple4(
+                        AddEditNodeViewType.add,
+                        widget.coin,
+                        null,
+                        CoinNodesView.routeName,
+                      ),
+                    );
+                  },
+                ),
+              ),
+            ),
+          ],
+        ),
+        body: Padding(
+          padding: const EdgeInsets.only(
+            top: 12,
+            left: 12,
+            right: 12,
+          ),
+          child: SingleChildScrollView(
+            child: NodesList(
+              coin: widget.coin,
+              popBackToRoute: CoinNodesView.routeName,
+            ),
           ),
         ),
-      ),
+      );
-    );
+    }
   }
 }

lib/pages_desktop_specific/home/settings_menu/nodes_settings.dart

@@ -5,12 +5,13 @@ import 'package:flutter_svg/svg.dart';
 import 'package:stackwallet/providers/global/node_service_provider.dart';
 import 'package:stackwallet/providers/global/prefs_provider.dart';
 import 'package:stackwallet/utilities/assets.dart';
-import 'package:stackwallet/utilities/constants.dart';
 import 'package:stackwallet/utilities/enums/coin_enum.dart';
 import 'package:stackwallet/utilities/text_styles.dart';
-import 'package:stackwallet/utilities/theme/stack_colors.dart';
 import 'package:stackwallet/widgets/rounded_white_container.dart';
 
+import '../../../pages/settings_views/global_settings_view/manage_nodes_views/coin_nodes_view.dart';
+import '../../../utilities/constants.dart';
+
 class NodesSettings extends ConsumerStatefulWidget {
   const NodesSettings({Key? key}) : super(key: key);
 
@@ -37,9 +38,6 @@ class _NodesSettings extends ConsumerState<NodesSettings> {
 
   @override
   Widget build(BuildContext context) {
-    double deviceWidth(BuildContext context) =>
-        MediaQuery.of(context).size.width;
-
     bool showTestNet = ref.watch(
       prefsChangeNotifierProvider.select((value) => value.showTestNetCoins),
     );
@@ -108,18 +106,18 @@ class _NodesSettings extends ConsumerState<NodesSettings> {
                                 borderRadius: BorderRadius.circular(
                                   Constants.size.circularBorderRadius,
                                 ),
-                                side: BorderSide(
+                                // side: BorderSide(
-                                    color: Theme.of(context)
+                                //     color: Theme.of(context)
-                                        .extension<StackColors>()!
+                                //         .extension<StackColors>()!
-                                        .shadow),
+                                //         .shadow),
                               ),
                               materialTapTargetSize:
                                   MaterialTapTargetSize.shrinkWrap,
                               onPressed: () {
-                                // Navigator.of(context).pushNamed(
+                                Navigator.of(context).pushNamed(
-                                //   CoinNodesView.routeName,
+                                  CoinNodesView.routeName,
-                                //   arguments: coin,
+                                  arguments: coin,
-                                // );
+                                );
                               },
                               child: Padding(
                                 padding: const EdgeInsets.all(