used MenuItemWidget for Exit, Debug, About & Social in settings

lib/ui/settings/danger_section_widget.dart

@@ -5,8 +5,9 @@ import 'package:flutter/material.dart';
 import 'package:photos/ente_theme_data.dart';
 import 'package:photos/services/user_service.dart';
 import 'package:photos/ui/account/delete_account_page.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_section_title.dart';
 import 'package:photos/ui/settings/settings_text_item.dart';
 import 'package:photos/utils/navigation_util.dart';
 
@@ -18,13 +19,32 @@ class DangerSectionWidget extends StatefulWidget {
 }
 
 class _DangerSectionWidgetState extends State<DangerSectionWidget> {
+  final expandableController = ExpandableController(initialExpanded: false);
+
+  @override
+  void dispose() {
+    expandableController.dispose();
+    super.dispose();
+  }
+
   @override
   Widget build(BuildContext context) {
     return ExpandablePanel(
-      header: const SettingsSectionTitle("Exit", color: Colors.red),
-      collapsed: Container(),
+      header: MenuItemWidget(
+        captionedTextWidget: const CaptionedTextWidget(
+          text: "Exit",
+        ),
+        isHeaderOfExpansion: true,
+        leadingIcon: Icons.logout_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,
     );
   }
 

lib/ui/settings/debug_section_widget.dart

@@ -4,23 +4,50 @@ import 'package:expandable/expandable.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_sodium/flutter_sodium.dart';
 import 'package:photos/core/configuration.dart';
+import 'package:photos/ente_theme_data.dart';
 import 'package:photos/services/ignored_files_service.dart';
 import 'package:photos/services/local_sync_service.dart';
 import 'package:photos/services/sync_service.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_section_title.dart';
 import 'package:photos/ui/settings/settings_text_item.dart';
 import 'package:photos/utils/toast_util.dart';
 
-class DebugSectionWidget extends StatelessWidget {
+class DebugSectionWidget extends StatefulWidget {
   const DebugSectionWidget({Key key}) : super(key: key);
+
+  @override
+  State<DebugSectionWidget> createState() => _DebugSectionWidgetState();
+}
+
+class _DebugSectionWidgetState extends State<DebugSectionWidget> {
+  final expandableController = ExpandableController(initialExpanded: false);
+
+  @override
+  void dispose() {
+    expandableController.dispose();
+    super.dispose();
+  }
+
   @override
   Widget build(BuildContext context) {
     return ExpandablePanel(
-      header: const SettingsSectionTitle("Debug"),
-      collapsed: Container(),
+      header: MenuItemWidget(
+        captionedTextWidget: const CaptionedTextWidget(
+          text: "Debug",
+        ),
+        isHeaderOfExpansion: true,
+        leadingIcon: Icons.bug_report_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,
     );
   }
 

lib/ui/settings/info_section_widget.dart

@@ -2,26 +2,52 @@
 
 import 'package:expandable/expandable.dart';
 import 'package:flutter/material.dart';
+import 'package:photos/ente_theme_data.dart';
 import 'package:photos/services/update_service.dart';
 import 'package:photos/ui/common/web_page.dart';
+import 'package:photos/ui/components/captioned_text_widget.dart';
+import 'package:photos/ui/components/menu_item_widget.dart';
 import 'package:photos/ui/settings/app_update_dialog.dart';
 import 'package:photos/ui/settings/common_settings.dart';
-import 'package:photos/ui/settings/settings_section_title.dart';
 import 'package:photos/ui/settings/settings_text_item.dart';
 import 'package:photos/utils/dialog_util.dart';
 import 'package:photos/utils/toast_util.dart';
 import 'package:url_launcher/url_launcher.dart';
 
-class InfoSectionWidget extends StatelessWidget {
+class InfoSectionWidget extends StatefulWidget {
   const InfoSectionWidget({Key key}) : super(key: key);
 
+  @override
+  State<InfoSectionWidget> createState() => _InfoSectionWidgetState();
+}
+
+class _InfoSectionWidgetState extends State<InfoSectionWidget> {
+  final expandableController = ExpandableController(initialExpanded: false);
+
+  @override
+  void dispose() {
+    expandableController.dispose();
+    super.dispose();
+  }
+
   @override
   Widget build(BuildContext context) {
     return ExpandablePanel(
-      header: const SettingsSectionTitle("About"),
-      collapsed: Container(),
+      header: MenuItemWidget(
+        captionedTextWidget: const CaptionedTextWidget(
+          text: "About",
+        ),
+        isHeaderOfExpansion: true,
+        leadingIcon: Icons.info_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,
     );
   }
 

lib/ui/settings/social_section_widget.dart

@@ -4,22 +4,48 @@ import 'dart:io';
 
 import 'package:expandable/expandable.dart';
 import 'package:flutter/material.dart';
+import 'package:photos/ente_theme_data.dart';
 import 'package:photos/services/update_service.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_section_title.dart';
 import 'package:photos/ui/settings/settings_text_item.dart';
 import 'package:url_launcher/url_launcher_string.dart';
 
-class SocialSectionWidget extends StatelessWidget {
+class SocialSectionWidget extends StatefulWidget {
   const SocialSectionWidget({Key key}) : super(key: key);
 
+  @override
+  State<SocialSectionWidget> createState() => _SocialSectionWidgetState();
+}
+
+class _SocialSectionWidgetState extends State<SocialSectionWidget> {
+  final expandableController = ExpandableController(initialExpanded: false);
+
+  @override
+  void dispose() {
+    expandableController.dispose();
+    super.dispose();
+  }
+
   @override
   Widget build(BuildContext context) {
     return ExpandablePanel(
-      header: const SettingsSectionTitle("Social"),
-      collapsed: Container(),
+      header: MenuItemWidget(
+        captionedTextWidget: const CaptionedTextWidget(
+          text: "Social",
+        ),
+        isHeaderOfExpansion: true,
+        leadingIcon: Icons.interests_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,
     );
   }