Merge branch 'desktop' into widget-tests

lib/pages_desktop_specific/home/desktop_settings_view.dart

@@ -0,0 +1,68 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:stackwallet/pages_desktop_specific/home/settings_menu/settings_menu.dart';
+import 'package:stackwallet/utilities/theme/stack_colors.dart';
+
+class DesktopSettingsView extends ConsumerStatefulWidget {
+  const DesktopSettingsView({Key? key}) : super(key: key);
+
+  static const String routeName = "/desktopSettings";
+
+  @override
+  ConsumerState<DesktopSettingsView> createState() =>
+      _DesktopSettingsViewState();
+}
+
+class _DesktopSettingsViewState extends ConsumerState<DesktopSettingsView> {
+  int currentViewIndex = 0;
+  final List<Widget> contentViews = [
+    Container(
+      color: Colors.lime,
+    ), //b+r
+    Container(
+      color: Colors.green,
+    ), //security
+    Container(
+      color: Colors.red,
+    ), //currency
+    Container(
+      color: Colors.orange,
+    ), //language
+    Container(
+      color: Colors.yellow,
+    ), //nodes
+    Container(
+      color: Colors.blue,
+    ), //syncing prefs
+    Container(
+      color: Colors.pink,
+    ), //appearance
+    Container(
+      color: Colors.purple,
+    ), //advanced
+  ];
+
+  void onMenuSelectionChanged(int newIndex) {
+    setState(() {
+      currentViewIndex = newIndex;
+    });
+  }
+
+  // will have a row with two items: SettingsMenu and settings contentxd
+  @override
+  Widget build(BuildContext context) {
+    return Material(
+      color: Theme.of(context).extension<StackColors>()!.background,
+      child: Row(
+        children: [
+          SettingsMenu(
+            onSelectionChanged: onMenuSelectionChanged,
+          ),
+          Expanded(
+            child: contentViews[currentViewIndex],
+          ),
+        ],
+      ),
+    );
+  }
+}

lib/pages_desktop_specific/home/settings_menu/settings_menu.dart

@@ -1,8 +1,19 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:flutter_svg/svg.dart';
+import 'package:stackwallet/pages_desktop_specific/home/settings_menu_item.dart';
+import 'package:stackwallet/utilities/assets.dart';
+import 'package:stackwallet/utilities/text_styles.dart';
+import 'package:stackwallet/utilities/theme/stack_colors.dart';
 
 class SettingsMenu extends ConsumerStatefulWidget {
-  const SettingsMenu({Key? key}) : super(key: key);
+  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";
 
@@ -11,20 +22,168 @@ class SettingsMenu extends ConsumerStatefulWidget {
 }
 
 class _SettingsMenuState extends ConsumerState<SettingsMenu> {
+  int selectedMenuItem = 0;
+
+  void updateSelectedMenuItem(int index) {
+    setState(() {
+      selectedMenuItem = index;
+    });
+    widget.onSelectionChanged?.call(index);
+  }
+
   @override
   Widget build(BuildContext context) {
-    // // TODO: implement build
-    // throw UnimplementedError();
     debugPrint("BUILD: $runtimeType");
 
-    return Column(
+    return Material(
-      children: [
+      color: Theme.of(context).extension<StackColors>()!.background,
-        Container(
+      child: SizedBox(
-          width: 32,
+        width: 300,
-          height: 32,
+        child: Padding(
-          decoration: BoxDecoration(color: Colors.teal),
+          padding: const EdgeInsets.fromLTRB(24.0, 10.0, 0, 0),
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              SizedBox(
+                height: 20,
+                // width: 300,
+              ),
+              Text(
+                "Settings",
+                style: STextStyles.desktopH3(context).copyWith(
+                  fontSize: 24,
+                ),
+              ),
+              Row(
+                children: [
+                  Padding(
+                    padding: const EdgeInsets.fromLTRB(
+                      3.0,
+                      30.0,
+                      55.0,
+                      0,
+                    ),
+                    child: Column(
+                      crossAxisAlignment: CrossAxisAlignment.start,
+                      children: [
+                        SettingsMenuItem(
+                          icon: SvgPicture.asset(
+                            Assets.svg.polygon,
+                            width: 11,
+                            height: 11,
+                          ),
+                          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,
+                          ),
+                          label: "Security",
+                          value: 1,
+                          group: selectedMenuItem,
+                          onChanged: updateSelectedMenuItem,
+                        ),
+                        const SizedBox(
+                          height: 2,
+                        ),
+                        SettingsMenuItem(
+                          icon: SvgPicture.asset(
+                            Assets.svg.polygon,
+                            width: 11,
+                            height: 11,
+                          ),
+                          label: "Currency",
+                          value: 2,
+                          group: selectedMenuItem,
+                          onChanged: updateSelectedMenuItem,
+                        ),
+                        const SizedBox(
+                          height: 2,
+                        ),
+                        SettingsMenuItem(
+                          icon: SvgPicture.asset(
+                            Assets.svg.polygon,
+                            width: 11,
+                            height: 11,
+                          ),
+                          label: "Language",
+                          value: 3,
+                          group: selectedMenuItem,
+                          onChanged: updateSelectedMenuItem,
+                        ),
+                        const SizedBox(
+                          height: 2,
+                        ),
+                        SettingsMenuItem(
+                          icon: SvgPicture.asset(
+                            Assets.svg.polygon,
+                            width: 11,
+                            height: 11,
+                          ),
+                          label: "Nodes",
+                          value: 4,
+                          group: selectedMenuItem,
+                          onChanged: updateSelectedMenuItem,
+                        ),
+                        const SizedBox(
+                          height: 2,
+                        ),
+                        SettingsMenuItem(
+                          icon: SvgPicture.asset(
+                            Assets.svg.polygon,
+                            width: 11,
+                            height: 11,
+                          ),
+                          label: "Syncing preferences",
+                          value: 5,
+                          group: selectedMenuItem,
+                          onChanged: updateSelectedMenuItem,
+                        ),
+                        const SizedBox(
+                          height: 2,
+                        ),
+                        SettingsMenuItem(
+                          icon: SvgPicture.asset(
+                            Assets.svg.polygon,
+                            width: 11,
+                            height: 11,
+                          ),
+                          label: "Appearance",
+                          value: 6,
+                          group: selectedMenuItem,
+                          onChanged: updateSelectedMenuItem,
+                        ),
+                        const SizedBox(
+                          height: 2,
+                        ),
+                        SettingsMenuItem(
+                          icon: SvgPicture.asset(
+                            Assets.svg.polygon,
+                            width: 11,
+                            height: 11,
+                          ),
+                          label: "Advanced",
+                          value: 7,
+                          group: selectedMenuItem,
+                          onChanged: updateSelectedMenuItem,
+                        ),
+                      ],
+                    ),
+                  ),
+                ],
+              ),
+            ],
+          ),
         ),
-      ],
+      ),
     );
   }
 }

lib/pages_desktop_specific/home/settings_menu_item.dart

@@ -21,13 +21,14 @@ class SettingsMenuItem<T> extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return TextButton(
+      //if val == group, then button is selected, otherwise unselected
       style: value == group
           ? Theme.of(context)
               .extension<StackColors>()!
-              .getDesktopMenuButtonColorSelected(context)
+              .getDesktopSettingsButtonColor(context)
           : Theme.of(context)
               .extension<StackColors>()!
-              .getDesktopMenuButtonColor(context),
+              .getDesktopSettingsButtonColor(context),
       onPressed: () {
         onChanged(value);
       },
@@ -46,8 +47,8 @@ class SettingsMenuItem<T> extends StatelessWidget {
             Text(
               label,
               style: value == group //checks if option is selected
-                  ? STextStyles.desktopMenuItemSelected(context)
+                  ? STextStyles.settingsMenuItemSelected(context)
-                  : STextStyles.desktopMenuItem(context),
+                  : STextStyles.settingsMenuItem(context),
             ),
           ],
         ),

lib/route_generator.dart

@@ -944,7 +944,9 @@ class RouteGenerator {
       case SettingsMenu.routeName:
         return getRoute(
             shouldUseMaterialRoute: useMaterialPageRoute,
-            builder: (_) => const SettingsMenu(),
+            builder: (_) => SettingsMenu(
+                  onSelectionChanged: (int) {},
+                ),
             settings: RouteSettings(name: settings.name));
 
       // == End of desktop specific routes =====================================

lib/utilities/text_styles.dart

@@ -793,6 +793,44 @@ class STextStyles {
     }
   }
 
+  static TextStyle settingsMenuItem(BuildContext context) {
+    switch (_theme(context).themeType) {
+      case ThemeType.light:
+        return GoogleFonts.inter(
+          color: _theme(context).textDark.withOpacity(0.5),
+          fontWeight: FontWeight.w500,
+          fontSize: 16,
+          height: 20.8 / 16,
+        );
+      case ThemeType.dark:
+        return GoogleFonts.inter(
+          color: _theme(context).textDark.withOpacity(0.5),
+          fontWeight: FontWeight.w500,
+          fontSize: 16,
+          height: 20.8 / 16,
+        );
+    }
+  }
+
+  static TextStyle settingsMenuItemSelected(BuildContext context) {
+    switch (_theme(context).themeType) {
+      case ThemeType.light:
+        return GoogleFonts.inter(
+          color: _theme(context).textDark,
+          fontWeight: FontWeight.w500,
+          fontSize: 16,
+          height: 20.8 / 16,
+        );
+      case ThemeType.dark:
+        return GoogleFonts.inter(
+          color: _theme(context).textDark,
+          fontWeight: FontWeight.w500,
+          fontSize: 16,
+          height: 20.8 / 16,
+        );
+    }
+  }
+
   static TextStyle stepIndicator(BuildContext context) {
     switch (_theme(context).themeType) {
       case ThemeType.light:

lib/utilities/theme/stack_colors.dart

@@ -1501,4 +1501,11 @@ class StackColors extends ThemeExtension<StackColors> {
               textFieldDefaultBG,
             ),
           );
+
+  ButtonStyle? getDesktopSettingsButtonColor(BuildContext context) =>
+      Theme.of(context).textButtonTheme.style?.copyWith(
+            backgroundColor: MaterialStateProperty.all<Color>(
+              background,
+            ),
+          );
 }