desktop theme fixes

lib/pages_desktop_specific/desktop_home_view.dart

@@ -6,8 +6,8 @@ import 'package:stackwallet/pages_desktop_specific/desktop_menu.dart';
 import 'package:stackwallet/pages_desktop_specific/my_stack_view/my_stack_view.dart';
 import 'package:stackwallet/pages_desktop_specific/notifications/desktop_notifications_view.dart';
 import 'package:stackwallet/pages_desktop_specific/settings/desktop_settings_view.dart';
-import 'package:stackwallet/pages_desktop_specific/settings/support_and_about_view/desktop_about_view.dart';
+import 'package:stackwallet/pages_desktop_specific/settings/settings_menu/desktop_about_view.dart';
-import 'package:stackwallet/pages_desktop_specific/settings/support_and_about_view/desktop_support_view.dart';
+import 'package:stackwallet/pages_desktop_specific/settings/settings_menu/desktop_support_view.dart';
 import 'package:stackwallet/providers/desktop/current_desktop_menu_item.dart';
 import 'package:stackwallet/providers/global/auto_swb_service_provider.dart';
 import 'package:stackwallet/providers/global/notifications_provider.dart';
@@ -32,13 +32,13 @@ class DesktopHomeView extends ConsumerStatefulWidget {
 }
 
 class _DesktopHomeViewState extends ConsumerState<DesktopHomeView> {
-  final GlobalKey key = GlobalKey<NavigatorState>();
+  final GlobalKey myStackViewNavKey = GlobalKey<NavigatorState>();
   late final Navigator myStackViewNav;
 
   @override
   void initState() {
     myStackViewNav = Navigator(
-      key: key,
+      key: myStackViewNavKey,
       onGenerateRoute: RouteGenerator.generateRoute,
       initialRoute: MyStackView.routeName,
     );
@@ -87,7 +87,7 @@ class _DesktopHomeViewState extends ConsumerState<DesktopHomeView> {
 
   void onMenuSelectionWillChange(DesktopMenuItemId newKey) {
     if (prev == DesktopMenuItemId.myStack && prev == newKey) {
-      Navigator.of(key.currentContext!)
+      Navigator.of(myStackViewNavKey.currentContext!)
           .popUntil(ModalRoute.withName(MyStackView.routeName));
       if (ref.read(currentWalletIdProvider.state).state != null) {
         final managerProvider = ref

lib/pages_desktop_specific/desktop_menu.dart

@@ -138,22 +138,7 @@ class _DesktopMenuState extends ConsumerState<DesktopMenu> {
                   children: [
                     DesktopMenuItem(
                       duration: duration,
-                      icon: SvgPicture.asset(
+                      icon: const DesktopMyStackIcon(),
-                        Assets.svg.walletDesktop,
-                        width: 20,
-                        height: 20,
-                        color: DesktopMenuItemId.myStack ==
-                                ref
-                                    .watch(currentDesktopMenuItemProvider.state)
-                                    .state
-                            ? Theme.of(context)
-                                .extension<StackColors>()!
-                                .accentColorDark
-                            : Theme.of(context)
-                                .extension<StackColors>()!
-                                .accentColorDark
-                                .withOpacity(0.8),
-                      ),
                       label: "My Stack",
                       value: DesktopMenuItemId.myStack,
                       onChanged: updateSelectedMenuItem,
@@ -164,22 +149,7 @@ class _DesktopMenuState extends ConsumerState<DesktopMenu> {
                     ),
                     DesktopMenuItem(
                       duration: duration,
-                      icon: SvgPicture.asset(
+                      icon: const DesktopExchangeIcon(),
-                        Assets.svg.exchangeDesktop,
-                        width: 20,
-                        height: 20,
-                        color: DesktopMenuItemId.exchange ==
-                                ref
-                                    .watch(currentDesktopMenuItemProvider.state)
-                                    .state
-                            ? Theme.of(context)
-                                .extension<StackColors>()!
-                                .accentColorDark
-                            : Theme.of(context)
-                                .extension<StackColors>()!
-                                .accentColorDark
-                                .withOpacity(0.8),
-                      ),
                       label: "Exchange",
                       value: DesktopMenuItemId.exchange,
                       onChanged: updateSelectedMenuItem,
@@ -201,22 +171,7 @@ class _DesktopMenuState extends ConsumerState<DesktopMenu> {
                     ),
                     DesktopMenuItem(
                       duration: duration,
-                      icon: SvgPicture.asset(
+                      icon: const DesktopAddressBookIcon(),
-                        Assets.svg.addressBookDesktop,
-                        width: 20,
-                        height: 20,
-                        color: DesktopMenuItemId.addressBook ==
-                                ref
-                                    .watch(currentDesktopMenuItemProvider.state)
-                                    .state
-                            ? Theme.of(context)
-                                .extension<StackColors>()!
-                                .accentColorDark
-                            : Theme.of(context)
-                                .extension<StackColors>()!
-                                .accentColorDark
-                                .withOpacity(0.8),
-                      ),
                       label: "Address Book",
                       value: DesktopMenuItemId.addressBook,
                       onChanged: updateSelectedMenuItem,
@@ -227,22 +182,7 @@ class _DesktopMenuState extends ConsumerState<DesktopMenu> {
                     ),
                     DesktopMenuItem(
                       duration: duration,
-                      icon: SvgPicture.asset(
+                      icon: const DesktopSettingsIcon(),
-                        Assets.svg.gear,
-                        width: 20,
-                        height: 20,
-                        color: DesktopMenuItemId.settings ==
-                                ref
-                                    .watch(currentDesktopMenuItemProvider.state)
-                                    .state
-                            ? Theme.of(context)
-                                .extension<StackColors>()!
-                                .accentColorDark
-                            : Theme.of(context)
-                                .extension<StackColors>()!
-                                .accentColorDark
-                                .withOpacity(0.8),
-                      ),
                       label: "Settings",
                       value: DesktopMenuItemId.settings,
                       onChanged: updateSelectedMenuItem,
@@ -253,22 +193,7 @@ class _DesktopMenuState extends ConsumerState<DesktopMenu> {
                     ),
                     DesktopMenuItem(
                       duration: duration,
-                      icon: SvgPicture.asset(
+                      icon: const DesktopSupportIcon(),
-                        Assets.svg.messageQuestion,
-                        width: 20,
-                        height: 20,
-                        color: DesktopMenuItemId.support ==
-                                ref
-                                    .watch(currentDesktopMenuItemProvider.state)
-                                    .state
-                            ? Theme.of(context)
-                                .extension<StackColors>()!
-                                .accentColorDark
-                            : Theme.of(context)
-                                .extension<StackColors>()!
-                                .accentColorDark
-                                .withOpacity(0.8),
-                      ),
                       label: "Support",
                       value: DesktopMenuItemId.support,
                       onChanged: updateSelectedMenuItem,
@@ -279,22 +204,7 @@ class _DesktopMenuState extends ConsumerState<DesktopMenu> {
                     ),
                     DesktopMenuItem(
                       duration: duration,
-                      icon: SvgPicture.asset(
+                      icon: const DesktopAboutIcon(),
-                        Assets.svg.aboutDesktop,
-                        width: 20,
-                        height: 20,
-                        color: DesktopMenuItemId.about ==
-                                ref
-                                    .watch(currentDesktopMenuItemProvider.state)
-                                    .state
-                            ? Theme.of(context)
-                                .extension<StackColors>()!
-                                .accentColorDark
-                            : Theme.of(context)
-                                .extension<StackColors>()!
-                                .accentColorDark
-                                .withOpacity(0.8),
-                      ),
                       label: "About",
                       value: DesktopMenuItemId.about,
                       onChanged: updateSelectedMenuItem,
@@ -304,15 +214,7 @@ class _DesktopMenuState extends ConsumerState<DesktopMenu> {
                     DesktopMenuItem(
                       duration: duration,
                       labelLength: 123,
-                      icon: SvgPicture.asset(
+                      icon: const DesktopExitIcon(),
-                        Assets.svg.exitDesktop,
-                        width: 20,
-                        height: 20,
-                        color: Theme.of(context)
-                            .extension<StackColors>()!
-                            .accentColorDark
-                            .withOpacity(0.8),
-                      ),
                       label: "Exit",
                       value: 7,
                       onChanged: (_) {

lib/pages_desktop_specific/desktop_menu_item.dart

@@ -15,18 +15,51 @@ class DMIController {
   }
 }
 
-class DesktopNotificationsIcon extends ConsumerStatefulWidget {
+class DesktopMyStackIcon extends ConsumerWidget {
+  const DesktopMyStackIcon({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    return SvgPicture.asset(
+      Assets.svg.walletDesktop,
+      width: 20,
+      height: 20,
+      color: DesktopMenuItemId.myStack ==
+              ref.watch(currentDesktopMenuItemProvider.state).state
+          ? Theme.of(context).extension<StackColors>()!.accentColorDark
+          : Theme.of(context)
+              .extension<StackColors>()!
+              .accentColorDark
+              .withOpacity(0.8),
+    );
+  }
+}
+
+class DesktopExchangeIcon extends ConsumerWidget {
+  const DesktopExchangeIcon({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    return SvgPicture.asset(
+      Assets.svg.exchangeDesktop,
+      width: 20,
+      height: 20,
+      color: DesktopMenuItemId.exchange ==
+              ref.watch(currentDesktopMenuItemProvider.state).state
+          ? Theme.of(context).extension<StackColors>()!.accentColorDark
+          : Theme.of(context)
+              .extension<StackColors>()!
+              .accentColorDark
+              .withOpacity(0.8),
+    );
+  }
+}
+
+class DesktopNotificationsIcon extends ConsumerWidget {
   const DesktopNotificationsIcon({Key? key}) : super(key: key);
 
   @override
-  ConsumerState<DesktopNotificationsIcon> createState() =>
+  Widget build(BuildContext context, WidgetRef ref) {
-      _DesktopNotificationsIconState();
-}
-
-class _DesktopNotificationsIconState
-    extends ConsumerState<DesktopNotificationsIcon> {
-  @override
-  Widget build(BuildContext context) {
     return SvgPicture.asset(
       ref.watch(notificationsProvider
               .select((value) => value.hasUnreadNotifications))
@@ -48,6 +81,103 @@ class _DesktopNotificationsIconState
   }
 }
 
+class DesktopAddressBookIcon extends ConsumerWidget {
+  const DesktopAddressBookIcon({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    return SvgPicture.asset(
+      Assets.svg.addressBookDesktop,
+      width: 20,
+      height: 20,
+      color: DesktopMenuItemId.addressBook ==
+              ref.watch(currentDesktopMenuItemProvider.state).state
+          ? Theme.of(context).extension<StackColors>()!.accentColorDark
+          : Theme.of(context)
+              .extension<StackColors>()!
+              .accentColorDark
+              .withOpacity(0.8),
+    );
+  }
+}
+
+class DesktopSettingsIcon extends ConsumerWidget {
+  const DesktopSettingsIcon({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    return SvgPicture.asset(
+      Assets.svg.gear,
+      width: 20,
+      height: 20,
+      color: DesktopMenuItemId.settings ==
+              ref.watch(currentDesktopMenuItemProvider.state).state
+          ? Theme.of(context).extension<StackColors>()!.accentColorDark
+          : Theme.of(context)
+              .extension<StackColors>()!
+              .accentColorDark
+              .withOpacity(0.8),
+    );
+  }
+}
+
+class DesktopSupportIcon extends ConsumerWidget {
+  const DesktopSupportIcon({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    return SvgPicture.asset(
+      Assets.svg.messageQuestion,
+      width: 20,
+      height: 20,
+      color: DesktopMenuItemId.support ==
+              ref.watch(currentDesktopMenuItemProvider.state).state
+          ? Theme.of(context).extension<StackColors>()!.accentColorDark
+          : Theme.of(context)
+              .extension<StackColors>()!
+              .accentColorDark
+              .withOpacity(0.8),
+    );
+  }
+}
+
+class DesktopAboutIcon extends ConsumerWidget {
+  const DesktopAboutIcon({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    return SvgPicture.asset(
+      Assets.svg.aboutDesktop,
+      width: 20,
+      height: 20,
+      color: DesktopMenuItemId.about ==
+              ref.watch(currentDesktopMenuItemProvider.state).state
+          ? Theme.of(context).extension<StackColors>()!.accentColorDark
+          : Theme.of(context)
+              .extension<StackColors>()!
+              .accentColorDark
+              .withOpacity(0.8),
+    );
+  }
+}
+
+class DesktopExitIcon extends ConsumerWidget {
+  const DesktopExitIcon({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    return SvgPicture.asset(
+      Assets.svg.exitDesktop,
+      width: 20,
+      height: 20,
+      color: Theme.of(context)
+          .extension<StackColors>()!
+          .accentColorDark
+          .withOpacity(0.8),
+    );
+  }
+}
+
 class DesktopMenuItem<T> extends ConsumerStatefulWidget {
   const DesktopMenuItem({
     Key? key,

lib/pages_desktop_specific/my_stack_view/my_stack_view.dart

@@ -27,29 +27,9 @@ class _MyStackViewState extends ConsumerState<MyStackView> {
     return Background(
       child: Column(
         children: [
-          DesktopAppBar(
+          const DesktopAppBar(
             isCompactHeight: true,
-            leading: Row(
+            leading: DesktopMyStackTitle(),
-              children: [
-                const SizedBox(
-                  width: 24,
-                ),
-                SizedBox(
-                  width: 32,
-                  height: 32,
-                  child: SvgPicture.asset(
-                    Assets.svg.stackIcon(context),
-                  ),
-                ),
-                const SizedBox(
-                  width: 12,
-                ),
-                Text(
-                  "My Stack",
-                  style: STextStyles.desktopH3(context),
-                )
-              ],
-            ),
           ),
           Expanded(
             child: hasWallets ? const MyWallets() : const EmptyWallets(),
@@ -59,3 +39,32 @@ class _MyStackViewState extends ConsumerState<MyStackView> {
     );
   }
 }
+
+class DesktopMyStackTitle extends StatelessWidget {
+  const DesktopMyStackTitle({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Row(
+      children: [
+        const SizedBox(
+          width: 24,
+        ),
+        SizedBox(
+          width: 32,
+          height: 32,
+          child: SvgPicture.asset(
+            Assets.svg.stackIcon(context),
+          ),
+        ),
+        const SizedBox(
+          width: 12,
+        ),
+        Text(
+          "My Stack",
+          style: STextStyles.desktopH3(context),
+        )
+      ],
+    );
+  }
+}

lib/pages_desktop_specific/settings/desktop_settings_view.dart

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:stackwallet/pages_desktop_specific/settings/settings_menu.dart';
 import 'package:stackwallet/pages_desktop_specific/settings/settings_menu/advanced_settings/advanced_settings.dart';
 import 'package:stackwallet/pages_desktop_specific/settings/settings_menu/appearance_settings.dart';
 import 'package:stackwallet/pages_desktop_specific/settings/settings_menu/backup_and_restore/backup_and_restore_settings.dart';
@@ -7,7 +8,6 @@ import 'package:stackwallet/pages_desktop_specific/settings/settings_menu/curren
 import 'package:stackwallet/pages_desktop_specific/settings/settings_menu/language_settings/language_settings.dart';
 import 'package:stackwallet/pages_desktop_specific/settings/settings_menu/nodes_settings.dart';
 import 'package:stackwallet/pages_desktop_specific/settings/settings_menu/security_settings.dart';
-import 'package:stackwallet/pages_desktop_specific/settings/settings_menu/settings_menu.dart';
 import 'package:stackwallet/pages_desktop_specific/settings/settings_menu/syncing_preferences_settings.dart';
 import 'package:stackwallet/route_generator.dart';
 import 'package:stackwallet/utilities/text_styles.dart';
@@ -26,7 +26,6 @@ class DesktopSettingsView extends ConsumerStatefulWidget {
 }
 
 class _DesktopSettingsViewState extends ConsumerState<DesktopSettingsView> {
-  int currentViewIndex = 0;
   final List<Widget> contentViews = [
     const Navigator(
       key: Key("settingsBackupRestoreDesktopKey"),
@@ -70,12 +69,6 @@ class _DesktopSettingsViewState extends ConsumerState<DesktopSettingsView> {
     ), //advanced
   ];
 
-  void onMenuSelectionChanged(int newIndex) {
-    setState(() {
-      currentViewIndex = newIndex;
-    });
-  }
-
   @override
   Widget build(BuildContext context) {
     return DesktopScaffold(
@@ -83,28 +76,36 @@ class _DesktopSettingsViewState extends ConsumerState<DesktopSettingsView> {
       appBar: DesktopAppBar(
         isCompactHeight: true,
         leading: Row(
-          children: [
+          children: const [
-            const SizedBox(
+            SizedBox(
               width: 24,
               height: 24,
             ),
-            Text(
+            DesktopSettingsTitle(),
-              "Settings",
-              style: STextStyles.desktopH3(context),
-            )
           ],
         ),
       ),
       body: Row(
         children: [
-          SettingsMenu(
+          const SettingsMenu(),
-            onSelectionChanged: onMenuSelectionChanged,
-          ),
           Expanded(
-            child: contentViews[currentViewIndex],
+            child: contentViews[
+                ref.watch(selectedSettingsMenuItemStateProvider.state).state],
           ),
         ],
       ),
     );
   }
 }
+
+class DesktopSettingsTitle extends StatelessWidget {
+  const DesktopSettingsTitle({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Text(
+      "Settings",
+      style: STextStyles.desktopH3(context),
+    );
+  }
+}

lib/pages_desktop_specific/settings/settings_menu.dart

@@ -0,0 +1,233 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:flutter_svg/svg.dart';
+import 'package:stackwallet/pages_desktop_specific/settings/settings_menu_item.dart';
+import 'package:stackwallet/utilities/assets.dart';
+import 'package:stackwallet/utilities/theme/stack_colors.dart';
+
+final selectedSettingsMenuItemStateProvider = StateProvider<int>((_) => 0);
+
+class SettingsMenu extends ConsumerStatefulWidget {
+  const SettingsMenu({
+    Key? key,
+  }) : super(key: key);
+
+  @override
+  ConsumerState<ConsumerStatefulWidget> createState() => _SettingsMenuState();
+}
+
+class _SettingsMenuState extends ConsumerState<SettingsMenu> {
+  final List<String> labels = [
+    "Backup and restore",
+    "Security",
+    "Currency",
+    "Language",
+    "Nodes",
+    "Syncing preferences",
+    "Appearance",
+    "Advanced",
+  ];
+
+  @override
+  Widget build(BuildContext context) {
+    debugPrint("BUILD: $runtimeType");
+
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Padding(
+          padding: const EdgeInsets.only(left: 15),
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              for (int i = 0; i < labels.length; i++)
+                Column(
+                  mainAxisSize: MainAxisSize.min,
+                  children: [
+                    if (i > 0)
+                      const SizedBox(
+                        height: 2,
+                      ),
+                    SettingsMenuItem<int>(
+                      icon: SvgPicture.asset(
+                        Assets.svg.polygon,
+                        width: 11,
+                        height: 11,
+                        color: ref
+                                    .watch(selectedSettingsMenuItemStateProvider
+                                        .state)
+                                    .state ==
+                                i
+                            ? Theme.of(context)
+                                .extension<StackColors>()!
+                                .accentColorBlue
+                            : Colors.transparent,
+                      ),
+                      label: labels[i],
+                      value: i,
+                      group: ref
+                          .watch(selectedSettingsMenuItemStateProvider.state)
+                          .state,
+                      onChanged: (newValue) => ref
+                          .read(selectedSettingsMenuItemStateProvider.state)
+                          .state = newValue,
+                    ),
+                  ],
+                )
+
+              // SettingsMenuItem(
+              //   icon: SvgPicture.asset(
+              //     Assets.svg.polygon,
+              //     width: 11,
+              //     height: 11,
+              //     color: selectedMenuItem == 0
+              //         ? Theme.of(context)
+              //             .extension<StackColors>()!
+              //             .accentColorBlue
+              //         : Colors.transparent,
+              //   ),
+              //   label: "Backup and restore",
+              //   value: 0,
+              //   group: selectedMenuItem,
+              //   onChanged: updateSelectedMenuItem,
+              // ),
+              // const SizedBox(
+              //   height: 2,
+              // ),
+              // SettingsMenuItem(
+              //   icon: SvgPicture.asset(
+              //     Assets.svg.polygon,
+              //     width: 11,
+              //     height: 11,
+              //     color: selectedMenuItem == 1
+              //         ? Theme.of(context)
+              //             .extension<StackColors>()!
+              //             .accentColorBlue
+              //         : Colors.transparent,
+              //   ),
+              //   label: "Security",
+              //   value: 1,
+              //   group: selectedMenuItem,
+              //   onChanged: updateSelectedMenuItem,
+              // ),
+              // const SizedBox(
+              //   height: 2,
+              // ),
+              // SettingsMenuItem(
+              //   icon: SvgPicture.asset(
+              //     Assets.svg.polygon,
+              //     width: 11,
+              //     height: 11,
+              //     color: selectedMenuItem == 2
+              //         ? Theme.of(context)
+              //             .extension<StackColors>()!
+              //             .accentColorBlue
+              //         : Colors.transparent,
+              //   ),
+              //   label: "Currency",
+              //   value: 2,
+              //   group: selectedMenuItem,
+              //   onChanged: updateSelectedMenuItem,
+              // ),
+              // const SizedBox(
+              //   height: 2,
+              // ),
+              // SettingsMenuItem(
+              //   icon: SvgPicture.asset(
+              //     Assets.svg.polygon,
+              //     width: 11,
+              //     height: 11,
+              //     color: selectedMenuItem == 3
+              //         ? Theme.of(context)
+              //             .extension<StackColors>()!
+              //             .accentColorBlue
+              //         : Colors.transparent,
+              //   ),
+              //   label: "Language",
+              //   value: 3,
+              //   group: selectedMenuItem,
+              //   onChanged: updateSelectedMenuItem,
+              // ),
+              // const SizedBox(
+              //   height: 2,
+              // ),
+              // SettingsMenuItem(
+              //   icon: SvgPicture.asset(
+              //     Assets.svg.polygon,
+              //     width: 11,
+              //     height: 11,
+              //     color: selectedMenuItem == 4
+              //         ? Theme.of(context)
+              //             .extension<StackColors>()!
+              //             .accentColorBlue
+              //         : Colors.transparent,
+              //   ),
+              //   label: "Nodes",
+              //   value: 4,
+              //   group: selectedMenuItem,
+              //   onChanged: updateSelectedMenuItem,
+              // ),
+              // const SizedBox(
+              //   height: 2,
+              // ),
+              // SettingsMenuItem(
+              //   icon: SvgPicture.asset(
+              //     Assets.svg.polygon,
+              //     width: 11,
+              //     height: 11,
+              //     color: selectedMenuItem == 5
+              //         ? Theme.of(context)
+              //             .extension<StackColors>()!
+              //             .accentColorBlue
+              //         : Colors.transparent,
+              //   ),
+              //   label: "Syncing preferences",
+              //   value: 5,
+              //   group: selectedMenuItem,
+              //   onChanged: updateSelectedMenuItem,
+              // ),
+              // const SizedBox(
+              //   height: 2,
+              // ),
+              // SettingsMenuItem(
+              //   icon: SvgPicture.asset(
+              //     Assets.svg.polygon,
+              //     width: 11,
+              //     height: 11,
+              //     color: selectedMenuItem == 6
+              //         ? Theme.of(context)
+              //             .extension<StackColors>()!
+              //             .accentColorBlue
+              //         : Colors.transparent,
+              //   ),
+              //   label: "Appearance",
+              //   value: 6,
+              //   group: selectedMenuItem,
+              //   onChanged: updateSelectedMenuItem,
+              // ),
+              // const SizedBox(
+              //   height: 2,
+              // ),
+              // SettingsMenuItem(
+              //   icon: SvgPicture.asset(
+              //     Assets.svg.polygon,
+              //     width: 11,
+              //     height: 11,
+              //     color: selectedMenuItem == 7
+              //         ? Theme.of(context)
+              //             .extension<StackColors>()!
+              //             .accentColorBlue
+              //         : Colors.transparent,
+              //   ),
+              //   label: "Advanced",
+              //   value: 7,
+              //   group: selectedMenuItem,
+              //   onChanged: updateSelectedMenuItem,
+              // ),
+            ],
+          ),
+        ),
+      ],
+    );
+  }
+}

lib/pages_desktop_specific/settings/settings_menu/appearance_settings.dart

@@ -8,9 +8,6 @@ import 'package:stackwallet/utilities/assets.dart';
 import 'package:stackwallet/utilities/constants.dart';
 import 'package:stackwallet/utilities/text_styles.dart';
 import 'package:stackwallet/utilities/theme/color_theme.dart';
-import 'package:stackwallet/utilities/theme/dark_colors.dart';
-import 'package:stackwallet/utilities/theme/light_colors.dart';
-import 'package:stackwallet/utilities/theme/ocean_breeze_colors.dart';
 import 'package:stackwallet/utilities/theme/stack_colors.dart';
 import 'package:stackwallet/widgets/custom_buttons/draggable_switch_button.dart';
 import 'package:stackwallet/widgets/rounded_white_container.dart';
@@ -27,19 +24,6 @@ class AppearanceOptionSettings extends ConsumerStatefulWidget {
 
 class _AppearanceOptionSettings
     extends ConsumerState<AppearanceOptionSettings> {
-  // late bool isLight;
-
-  // @override
-  // void initState() {
-  //
-  //   super.initState();
-  // }
-  //
-  // @override
-  // void dispose() {
-  //   super.dispose();
-  // }
-
   @override
   Widget build(BuildContext context) {
     debugPrint("BUILD: $runtimeType");
@@ -166,335 +150,121 @@ class ThemeToggle extends ConsumerStatefulWidget {
     Key? key,
   }) : super(key: key);
 
-  // final bool externalCallsEnabled;
-  // final void Function(bool)? onChanged;
-
   @override
   ConsumerState<ThemeToggle> createState() => _ThemeToggle();
 }
 
 class _ThemeToggle extends ConsumerState<ThemeToggle> {
-  // late bool externalCallsEnabled;
+  String assetNameFor(ThemeType type) {
-
+    switch (type) {
-  late String _selectedTheme;
+      case ThemeType.light:
-
+        return Assets.svg.themeLight;
-  @override
+      case ThemeType.dark:
-  void initState() {
+        return Assets.svg.themeDark;
-    _selectedTheme =
+      case ThemeType.oceanBreeze:
-        DB.instance.get<dynamic>(boxName: DB.boxNameTheme, key: "colorScheme")
+        return Assets.svg.themeOcean;
-                as String? ??
+    }
-            "light";
-
-    super.initState();
   }
 
   @override
   Widget build(BuildContext context) {
     return Row(
       children: [
-        MaterialButton(
+        for (int i = 0; i < ThemeType.values.length; i++)
-          splashColor: Colors.transparent,
+          Row(
-          hoverColor: Colors.transparent,
+            mainAxisSize: MainAxisSize.min,
-          padding: const EdgeInsets.all(0),
+            children: [
-          materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
+              if (i > 0)
-          shape: RoundedRectangleBorder(
-            borderRadius: BorderRadius.circular(
-              Constants.size.circularBorderRadius,
-            ),
-          ),
-          onPressed: () {
-            DB.instance.put<dynamic>(
-              boxName: DB.boxNameTheme,
-              key: "colorScheme",
-              value: ThemeType.light.name,
-            );
-            ref.read(colorThemeProvider.state).state =
-                StackColors.fromStackColorTheme(
-              LightColors(),
-            );
-
-            setState(() {
-              _selectedTheme = "light";
-            });
-          },
-          child: SizedBox(
-            width: 200,
-            child: Column(
-              mainAxisSize: MainAxisSize.min,
-              children: [
-                Container(
-                  decoration: BoxDecoration(
-                    border: Border.all(
-                      width: 2.5,
-                      color: _selectedTheme == "light"
-                          ? Theme.of(context)
-                              .extension<StackColors>()!
-                              .infoItemIcons
-                          : Theme.of(context).extension<StackColors>()!.popupBG,
-                    ),
-                    borderRadius: BorderRadius.circular(
-                      Constants.size.circularBorderRadius,
-                    ),
-                  ),
-                  child: SvgPicture.asset(
-                    Assets.svg.themeLight,
-                  ),
-                ),
                 const SizedBox(
-                  height: 12,
+                  width: 10,
                 ),
-                Row(
+              MouseRegion(
-                  children: [
+                cursor: SystemMouseCursors.click,
-                    SizedBox(
+                child: GestureDetector(
-                      width: 20,
+                  onTap: () {
-                      height: 20,
+                    if (ref.read(colorThemeProvider.state).state.themeType !=
-                      child: Radio(
+                        ThemeType.values[i]) {
-                        activeColor: Theme.of(context)
+                      DB.instance.put<dynamic>(
-                            .extension<StackColors>()!
+                        boxName: DB.boxNameTheme,
-                            .radioButtonIconEnabled,
+                        key: "colorScheme",
-                        value: "light",
+                        value: ThemeType.values[i].name,
-                        groupValue: _selectedTheme,
+                      );
-                        onChanged: (newValue) {
+                      ref.read(colorThemeProvider.state).state =
-                          if (newValue is String && newValue == "light") {
+                          StackColors.fromStackColorTheme(
-                            DB.instance.put<dynamic>(
+                              ThemeType.values[i].colorTheme);
-                              boxName: DB.boxNameTheme,
+                    }
-                              key: "colorScheme",
+                  },
-                              value: ThemeType.light.name,
+                  child: Container(
-                            );
+                    width: 200,
-                            ref.read(colorThemeProvider.state).state =
+                    color: Colors.transparent,
-                                StackColors.fromStackColorTheme(
+                    child: Column(
-                              LightColors(),
+                      mainAxisSize: MainAxisSize.min,
-                            );
+                      children: [
-
+                        Container(
-                            setState(() {
+                          decoration: BoxDecoration(
-                              _selectedTheme = "light";
+                            border: Border.all(
-                            });
+                              width: 2.5,
-                          }
+                              color: ref
-                        },
+                                          .read(colorThemeProvider.state)
-                      ),
+                                          .state
-                    ),
+                                          .themeType ==
-                    const SizedBox(
+                                      ThemeType.values[i]
-                      width: 14,
+                                  ? Theme.of(context)
-                    ),
+                                      .extension<StackColors>()!
-                    Text(
+                                      .infoItemIcons
-                      "Light",
+                                  : Theme.of(context)
-                      style:
+                                      .extension<StackColors>()!
-                          STextStyles.desktopTextExtraSmall(context).copyWith(
+                                      .popupBG,
-                        color: Theme.of(context)
+                            ),
-                            .extension<StackColors>()!
+                            borderRadius: BorderRadius.circular(
-                            .textDark,
+                              Constants.size.circularBorderRadius,
-                      ),
+                            ),
-                    ),
+                          ),
-                  ],
+                          child: SvgPicture.asset(
-                ),
+                            assetNameFor(ThemeType.values[i]),
-              ],
+                          ),
-            ),
+                        ),
-          ),
+                        const SizedBox(
-        ),
+                          height: 12,
-        const SizedBox(
+                        ),
-          width: 10,
+                        Row(
-        ),
+                          children: [
-        MaterialButton(
+                            SizedBox(
-          splashColor: Colors.transparent,
+                              width: 20,
-          hoverColor: Colors.transparent,
+                              height: 20,
-          padding: const EdgeInsets.all(0),
+                              child: Radio<ThemeType>(
-          materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
+                                activeColor: Theme.of(context)
-          shape: RoundedRectangleBorder(
+                                    .extension<StackColors>()!
-            borderRadius: BorderRadius.circular(
+                                    .radioButtonIconEnabled,
-              Constants.size.circularBorderRadius,
+                                value: ThemeType.values[i],
-            ),
+                                groupValue: ref
-          ),
+                                    .read(colorThemeProvider.state)
-          onPressed: () {
+                                    .state
-            DB.instance.put<dynamic>(
+                                    .themeType,
-              boxName: DB.boxNameTheme,
+                                onChanged: (_) {},
-              key: "colorScheme",
+                              ),
-              value: ThemeType.oceanBreeze.name,
+                            ),
-            );
+                            const SizedBox(
-            ref.read(colorThemeProvider.state).state =
+                              width: 14,
-                StackColors.fromStackColorTheme(
+                            ),
-              OceanBreezeColors(),
+                            Text(
-            );
+                              ThemeType.values[i].prettyName,
-
+                              style: STextStyles.desktopTextExtraSmall(context)
-            setState(() {
+                                  .copyWith(
-              _selectedTheme = "oceanBreeze";
+                                color: Theme.of(context)
-            });
+                                    .extension<StackColors>()!
-          },
+                                    .textDark,
-          child: SizedBox(
+                              ),
-            width: 200,
+                            ),
-            child: Column(
+                          ],
-              mainAxisSize: MainAxisSize.min,
+                        ),
-              children: [
+                      ],
-                Container(
-                  decoration: BoxDecoration(
-                    border: Border.all(
-                      width: 2.5,
-                      color: _selectedTheme == "oceanBreeze"
-                          ? Theme.of(context)
-                              .extension<StackColors>()!
-                              .infoItemIcons
-                          : Theme.of(context).extension<StackColors>()!.popupBG,
-                    ),
-                    borderRadius: BorderRadius.circular(
-                      Constants.size.circularBorderRadius,
                     ),
                   ),
-                  child: SvgPicture.asset(
-                    Assets.svg.themeOcean,
-                  ),
                 ),
-                const SizedBox(
+              )
-                  height: 12,
+            ],
-                ),
-                Row(
-                  children: [
-                    SizedBox(
-                      width: 20,
-                      height: 20,
-                      child: Radio(
-                        activeColor: Theme.of(context)
-                            .extension<StackColors>()!
-                            .radioButtonIconEnabled,
-                        value: "oceanBreeze",
-                        groupValue: _selectedTheme,
-                        onChanged: (newValue) {
-                          if (newValue is String && newValue == "oceanBreeze") {
-                            DB.instance.put<dynamic>(
-                              boxName: DB.boxNameTheme,
-                              key: "colorScheme",
-                              value: ThemeType.oceanBreeze.name,
-                            );
-                            ref.read(colorThemeProvider.state).state =
-                                StackColors.fromStackColorTheme(
-                              OceanBreezeColors(),
-                            );
-
-                            setState(() {
-                              _selectedTheme = "oceanBreeze";
-                            });
-                          }
-                        },
-                      ),
-                    ),
-                    const SizedBox(
-                      width: 14,
-                    ),
-                    Text(
-                      "Ocean Breeze",
-                      style:
-                          STextStyles.desktopTextExtraSmall(context).copyWith(
-                        color: Theme.of(context)
-                            .extension<StackColors>()!
-                            .textDark,
-                      ),
-                    ),
-                  ],
-                ),
-              ],
-            ),
           ),
-        ),
-        const SizedBox(
-          width: 10,
-        ),
-        MaterialButton(
-          splashColor: Colors.transparent,
-          hoverColor: Colors.transparent,
-          padding: const EdgeInsets.all(0),
-          materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
-          shape: RoundedRectangleBorder(
-            borderRadius: BorderRadius.circular(
-              Constants.size.circularBorderRadius,
-            ),
-          ),
-          onPressed: () {
-            DB.instance.put<dynamic>(
-              boxName: DB.boxNameTheme,
-              key: "colorScheme",
-              value: ThemeType.dark.name,
-            );
-            ref.read(colorThemeProvider.state).state =
-                StackColors.fromStackColorTheme(
-              DarkColors(),
-            );
-
-            setState(() {
-              _selectedTheme = "dark";
-            });
-          },
-          child: SizedBox(
-            width: 200,
-            child: Column(
-              mainAxisSize: MainAxisSize.min,
-              children: [
-                Container(
-                  decoration: BoxDecoration(
-                    border: Border.all(
-                      width: 2.5,
-                      color: _selectedTheme == "dark"
-                          ? Theme.of(context)
-                              .extension<StackColors>()!
-                              .infoItemIcons
-                          : Theme.of(context).extension<StackColors>()!.popupBG,
-                    ),
-                    borderRadius: BorderRadius.circular(
-                      Constants.size.circularBorderRadius,
-                    ),
-                  ),
-                  child: SvgPicture.asset(
-                    Assets.svg.themeDark,
-                  ),
-                ),
-                const SizedBox(
-                  height: 12,
-                ),
-                Row(
-                  children: [
-                    SizedBox(
-                      width: 20,
-                      height: 20,
-                      child: Radio(
-                        activeColor: Theme.of(context)
-                            .extension<StackColors>()!
-                            .radioButtonIconEnabled,
-                        value: "dark",
-                        groupValue: _selectedTheme,
-                        onChanged: (newValue) {
-                          if (newValue is String && newValue == "dark") {
-                            DB.instance.put<dynamic>(
-                              boxName: DB.boxNameTheme,
-                              key: "colorScheme",
-                              value: ThemeType.dark.name,
-                            );
-                            ref.read(colorThemeProvider.state).state =
-                                StackColors.fromStackColorTheme(
-                              DarkColors(),
-                            );
-
-                            setState(() {
-                              _selectedTheme = "dark";
-                            });
-                          }
-                        },
-                      ),
-                    ),
-                    const SizedBox(
-                      width: 14,
-                    ),
-                    Text(
-                      "Dark",
-                      style:
-                          STextStyles.desktopTextExtraSmall(context).copyWith(
-                        color: Theme.of(context)
-                            .extension<StackColors>()!
-                            .textDark,
-                      ),
-                    ),
-                  ],
-                ),
-              ],
-            ),
-          ),
-        ),
       ],
     );
   }

lib/pages_desktop_specific/settings/settings_menu/settings_menu.dart

@@ -1,200 +0,0 @@
-import 'package:flutter/material.dart';
-import 'package:flutter_riverpod/flutter_riverpod.dart';
-import 'package:flutter_svg/svg.dart';
-import 'package:stackwallet/pages_desktop_specific/settings/settings_menu_item.dart';
-import 'package:stackwallet/utilities/assets.dart';
-import 'package:stackwallet/utilities/theme/stack_colors.dart';
-
-class SettingsMenu extends ConsumerStatefulWidget {
-  const SettingsMenu({
-    Key? key,
-    required this.onSelectionChanged,
-  }) : super(key: key);
-
-  final void Function(int)?
-      onSelectionChanged; //is a function that takes in an int and returns void/.;
-
-  static const String routeName = "/settingsMenu";
-
-  @override
-  ConsumerState<ConsumerStatefulWidget> createState() => _SettingsMenuState();
-}
-
-class _SettingsMenuState extends ConsumerState<SettingsMenu> {
-  int selectedMenuItem = 0;
-
-  void updateSelectedMenuItem(int index) {
-    setState(() {
-      selectedMenuItem = index;
-    });
-    widget.onSelectionChanged?.call(index);
-  }
-
-  @override
-  Widget build(BuildContext context) {
-    debugPrint("BUILD: $runtimeType");
-
-    return Column(
-      crossAxisAlignment: CrossAxisAlignment.start,
-      children: [
-        Padding(
-          padding: const EdgeInsets.only(left: 15),
-          child: Column(
-            crossAxisAlignment: CrossAxisAlignment.start,
-            children: [
-              SettingsMenuItem(
-                icon: SvgPicture.asset(
-                  Assets.svg.polygon,
-                  width: 11,
-                  height: 11,
-                  color: selectedMenuItem == 0
-                      ? Theme.of(context)
-                          .extension<StackColors>()!
-                          .accentColorBlue
-                      : Colors.transparent,
-                ),
-                label: "Backup and restore",
-                value: 0,
-                group: selectedMenuItem,
-                onChanged: updateSelectedMenuItem,
-              ),
-              const SizedBox(
-                height: 2,
-              ),
-              SettingsMenuItem(
-                icon: SvgPicture.asset(
-                  Assets.svg.polygon,
-                  width: 11,
-                  height: 11,
-                  color: selectedMenuItem == 1
-                      ? Theme.of(context)
-                          .extension<StackColors>()!
-                          .accentColorBlue
-                      : Colors.transparent,
-                ),
-                label: "Security",
-                value: 1,
-                group: selectedMenuItem,
-                onChanged: updateSelectedMenuItem,
-              ),
-              const SizedBox(
-                height: 2,
-              ),
-              SettingsMenuItem(
-                icon: SvgPicture.asset(
-                  Assets.svg.polygon,
-                  width: 11,
-                  height: 11,
-                  color: selectedMenuItem == 2
-                      ? Theme.of(context)
-                          .extension<StackColors>()!
-                          .accentColorBlue
-                      : Colors.transparent,
-                ),
-                label: "Currency",
-                value: 2,
-                group: selectedMenuItem,
-                onChanged: updateSelectedMenuItem,
-              ),
-              const SizedBox(
-                height: 2,
-              ),
-              SettingsMenuItem(
-                icon: SvgPicture.asset(
-                  Assets.svg.polygon,
-                  width: 11,
-                  height: 11,
-                  color: selectedMenuItem == 3
-                      ? Theme.of(context)
-                          .extension<StackColors>()!
-                          .accentColorBlue
-                      : Colors.transparent,
-                ),
-                label: "Language",
-                value: 3,
-                group: selectedMenuItem,
-                onChanged: updateSelectedMenuItem,
-              ),
-              const SizedBox(
-                height: 2,
-              ),
-              SettingsMenuItem(
-                icon: SvgPicture.asset(
-                  Assets.svg.polygon,
-                  width: 11,
-                  height: 11,
-                  color: selectedMenuItem == 4
-                      ? Theme.of(context)
-                          .extension<StackColors>()!
-                          .accentColorBlue
-                      : Colors.transparent,
-                ),
-                label: "Nodes",
-                value: 4,
-                group: selectedMenuItem,
-                onChanged: updateSelectedMenuItem,
-              ),
-              const SizedBox(
-                height: 2,
-              ),
-              SettingsMenuItem(
-                icon: SvgPicture.asset(
-                  Assets.svg.polygon,
-                  width: 11,
-                  height: 11,
-                  color: selectedMenuItem == 5
-                      ? Theme.of(context)
-                          .extension<StackColors>()!
-                          .accentColorBlue
-                      : Colors.transparent,
-                ),
-                label: "Syncing preferences",
-                value: 5,
-                group: selectedMenuItem,
-                onChanged: updateSelectedMenuItem,
-              ),
-              const SizedBox(
-                height: 2,
-              ),
-              SettingsMenuItem(
-                icon: SvgPicture.asset(
-                  Assets.svg.polygon,
-                  width: 11,
-                  height: 11,
-                  color: selectedMenuItem == 6
-                      ? Theme.of(context)
-                          .extension<StackColors>()!
-                          .accentColorBlue
-                      : Colors.transparent,
-                ),
-                label: "Appearance",
-                value: 6,
-                group: selectedMenuItem,
-                onChanged: updateSelectedMenuItem,
-              ),
-              const SizedBox(
-                height: 2,
-              ),
-              SettingsMenuItem(
-                icon: SvgPicture.asset(
-                  Assets.svg.polygon,
-                  width: 11,
-                  height: 11,
-                  color: selectedMenuItem == 7
-                      ? Theme.of(context)
-                          .extension<StackColors>()!
-                          .accentColorBlue
-                      : Colors.transparent,
-                ),
-                label: "Advanced",
-                value: 7,
-                group: selectedMenuItem,
-                onChanged: updateSelectedMenuItem,
-              ),
-            ],
-          ),
-        ),
-      ],
-    );
-  }
-}

lib/pages_desktop_specific/settings/settings_menu_item.dart

@@ -33,7 +33,7 @@ class SettingsMenuItem<T> extends StatelessWidget {
         onChanged(value);
       },
       child: Padding(
-        padding: EdgeInsets.symmetric(
+        padding: const EdgeInsets.symmetric(
           vertical: 16,
           horizontal: 16,
         ),

lib/route_generator.dart

@@ -104,13 +104,12 @@ import 'package:stackwallet/pages_desktop_specific/settings/settings_menu/advanc
 import 'package:stackwallet/pages_desktop_specific/settings/settings_menu/appearance_settings.dart';
 import 'package:stackwallet/pages_desktop_specific/settings/settings_menu/backup_and_restore/backup_and_restore_settings.dart';
 import 'package:stackwallet/pages_desktop_specific/settings/settings_menu/currency_settings/currency_settings.dart';
+import 'package:stackwallet/pages_desktop_specific/settings/settings_menu/desktop_about_view.dart';
+import 'package:stackwallet/pages_desktop_specific/settings/settings_menu/desktop_support_view.dart';
 import 'package:stackwallet/pages_desktop_specific/settings/settings_menu/language_settings/language_settings.dart';
 import 'package:stackwallet/pages_desktop_specific/settings/settings_menu/nodes_settings.dart';
 import 'package:stackwallet/pages_desktop_specific/settings/settings_menu/security_settings.dart';
-import 'package:stackwallet/pages_desktop_specific/settings/settings_menu/settings_menu.dart';
 import 'package:stackwallet/pages_desktop_specific/settings/settings_menu/syncing_preferences_settings.dart';
-import 'package:stackwallet/pages_desktop_specific/settings/support_and_about_view/desktop_about_view.dart';
-import 'package:stackwallet/pages_desktop_specific/settings/support_and_about_view/desktop_support_view.dart';
 import 'package:stackwallet/services/coins/manager.dart';
 import 'package:stackwallet/services/event_bus/events/global/node_connection_status_changed_event.dart';
 import 'package:stackwallet/services/event_bus/events/global/wallet_sync_status_changed_event.dart';
@@ -1061,14 +1060,6 @@ class RouteGenerator {
         }
         return _routeError("${settings.name} invalid args: ${args.toString()}");
 
-      case SettingsMenu.routeName:
-        return getRoute(
-            shouldUseMaterialRoute: useMaterialPageRoute,
-            builder: (_) => SettingsMenu(
-                  onSelectionChanged: (int) {},
-                ),
-            settings: RouteSettings(name: settings.name));
-
       case BackupRestoreSettings.routeName:
         return getRoute(
             shouldUseMaterialRoute: useMaterialPageRoute,

lib/utilities/theme/color_theme.dart

@@ -1,5 +1,8 @@
 import 'package:flutter/material.dart';
 import 'package:stackwallet/utilities/enums/coin_enum.dart';
+import 'package:stackwallet/utilities/theme/dark_colors.dart';
+import 'package:stackwallet/utilities/theme/light_colors.dart';
+import 'package:stackwallet/utilities/theme/ocean_breeze_colors.dart';
 
 enum ThemeType {
   light,
@@ -7,6 +10,30 @@ enum ThemeType {
   oceanBreeze,
 }
 
+extension ThemeTypeExt on ThemeType {
+  StackColorTheme get colorTheme {
+    switch (this) {
+      case ThemeType.light:
+        return LightColors();
+      case ThemeType.dark:
+        return DarkColors();
+      case ThemeType.oceanBreeze:
+        return OceanBreezeColors();
+    }
+  }
+
+  String get prettyName {
+    switch (this) {
+      case ThemeType.light:
+        return "Light";
+      case ThemeType.dark:
+        return "Dark";
+      case ThemeType.oceanBreeze:
+        return "Ocean Breeze";
+    }
+  }
+}
+
 abstract class StackColorTheme {
   ThemeType get themeType;