used menu item widget for theme header + replaced bottom sheet with expansion section

lib/ui/settings/support_section_widget.dart

@@ -44,7 +44,7 @@ class _SupportSectionWidgetState extends State<SupportSectionWidget> {
             Theme.of(context).colorScheme.enteTheme.colorScheme.fillFaint,
         expandableController: expandableController,
       ),
-      collapsed: Container(),
+      collapsed: const SizedBox.shrink(),
       expanded: _getSectionOptions(context),
       theme: getExpandableTheme(context),
       controller: expandableController,

lib/ui/settings/theme_switch_widget.dart

@@ -1,8 +1,13 @@
 // @dart=2.9
 
 import 'package:adaptive_theme/adaptive_theme.dart';
-import 'package:flutter/cupertino.dart';
+import 'package:expandable/expandable.dart';
 import 'package:flutter/material.dart';
+import 'package:photos/ente_theme_data.dart';
+import 'package:photos/ui/components/captioned_text_widget.dart';
+import 'package:photos/ui/components/menu_item_widget.dart';
+import 'package:photos/ui/settings/common_settings.dart';
+import 'package:photos/ui/settings/settings_text_item.dart';
 
 class ThemeSwitchWidget extends StatefulWidget {
   const ThemeSwitchWidget({Key key}) : super(key: key);
@@ -13,6 +18,8 @@ class ThemeSwitchWidget extends StatefulWidget {
 
 class _ThemeSwitchWidgetState extends State<ThemeSwitchWidget> {
   AdaptiveThemeMode themeMode;
+  final expandableController = ExpandableController(initialExpanded: false);
+
   @override
   void initState() {
     super.initState();
@@ -27,44 +34,71 @@ class _ThemeSwitchWidgetState extends State<ThemeSwitchWidget> {
     );
   }
 
+  @override
+  void dispose() {
+    expandableController.dispose();
+    super.dispose();
+  }
+
   @override
   Widget build(BuildContext context) {
-    return GestureDetector(
-      onTap: () async {
-        await showCupertinoModalPopup(
-          context: context,
-          builder: (_) => CupertinoActionSheet(
-            title: Text(
-              "Theme",
-              style: Theme.of(context)
-                  .textTheme
-                  .headline4
-                  .copyWith(color: Colors.white),
-            ),
-            actions: [
-              for (var mode in AdaptiveThemeMode.values)
-                CupertinoActionSheetAction(
-                  child: Text(mode.modeName),
-                  onPressed: () async {
-                    AdaptiveTheme.of(context).setThemeMode(mode);
-                    themeMode = mode;
-                    Navigator.of(context, rootNavigator: true).pop();
-                    if (mounted) {
-                      setState(() => {});
-                    }
-                  },
-                ),
-            ],
-            cancelButton: CupertinoActionSheetAction(
-              child: const Text("Cancel"),
-              onPressed: () {
-                Navigator.of(context, rootNavigator: true).pop();
-              },
-            ),
+    return ExpandablePanel(
+      header: MenuItemWidget(
+        captionedTextWidget: const CaptionedTextWidget(
+          text: "Theme",
+        ),
+        isHeaderOfExpansion: true,
+        leadingIcon: Icons.light_mode_outlined,
+        trailingIcon: Icons.expand_more,
+        menuItemColor:
+            Theme.of(context).colorScheme.enteTheme.colorScheme.fillFaint,
+        expandableController: expandableController,
+      ),
+      collapsed: const SizedBox.shrink(),
+      expanded: _getSectionOptions(context),
+      theme: getExpandableTheme(context),
+      controller: expandableController,
+    );
+  }
+
+  Widget _getSectionOptions(BuildContext context) {
+    return Column(
+      children: [
+        sectionOptionDivider,
+        GestureDetector(
+          behavior: HitTestBehavior.translucent,
+          onTap: () async {
+            AdaptiveTheme.of(context).setThemeMode(AdaptiveThemeMode.light);
+            themeMode = AdaptiveThemeMode.light;
+          },
+          child:
+              const SettingsTextItem(text: "Light", icon: Icons.navigate_next),
+        ),
+        sectionOptionDivider,
+        GestureDetector(
+          behavior: HitTestBehavior.translucent,
+          onTap: () {
+            AdaptiveTheme.of(context).setThemeMode(AdaptiveThemeMode.dark);
+            themeMode = AdaptiveThemeMode.dark;
+          },
+          child: const SettingsTextItem(
+            text: "Dark",
+            icon: Icons.navigate_next,
           ),
-        );
-      },
-      child: Text(themeMode?.modeName ?? ">"),
+        ),
+        sectionOptionDivider,
+        GestureDetector(
+          behavior: HitTestBehavior.translucent,
+          onTap: () async {
+            AdaptiveTheme.of(context).setThemeMode(AdaptiveThemeMode.system);
+            themeMode = AdaptiveThemeMode.system;
+          },
+          child: const SettingsTextItem(
+            text: "System",
+            icon: Icons.navigate_next,
+          ),
+        ),
+      ],
     );
   }
 }

lib/ui/settings_page.dart

@@ -14,7 +14,6 @@ import 'package:photos/ui/settings/debug_section_widget.dart';
 import 'package:photos/ui/settings/details_section_widget.dart';
 import 'package:photos/ui/settings/info_section_widget.dart';
 import 'package:photos/ui/settings/security_section_widget.dart';
-import 'package:photos/ui/settings/settings_section_title.dart';
 import 'package:photos/ui/settings/social_section_widget.dart';
 import 'package:photos/ui/settings/support_section_widget.dart';
 import 'package:photos/ui/settings/theme_switch_widget.dart';
@@ -86,17 +85,7 @@ class SettingsPage extends StatelessWidget {
 
     if (Platform.isAndroid || kDebugMode) {
       contents.addAll([
-        Row(
-          mainAxisAlignment: MainAxisAlignment.spaceBetween,
-          crossAxisAlignment: CrossAxisAlignment.center,
-          children: const [
-            SettingsSectionTitle("Theme"),
-            Padding(
-              padding: EdgeInsets.only(right: 4),
-              child: ThemeSwitchWidget(),
-            ),
-          ],
-        ),
+        const ThemeSwitchWidget(),
         sectionSpacing,
       ]);
     }