use expandable view for settings button

lib/app.dart

@@ -14,7 +14,7 @@ final lightThemeData = ThemeData(
   fontFamily: 'Inter',
   brightness: Brightness.light,
   hintColor: Colors.grey,
-  iconTheme: IconThemeData(color: Colors.green),
+  iconTheme: IconThemeData(color: Colors.black),
   primaryIconTheme: IconThemeData(color: Colors.red, opacity: 1.0, size: 50.0),
   colorScheme: ColorScheme.light(primary: Colors.blue),
   accentColor: Color.fromRGBO(45, 194, 98, 0.2),
@@ -26,20 +26,20 @@ final lightThemeData = ThemeData(
   scaffoldBackgroundColor: Colors.white,
   backgroundColor: Colors.white,
   appBarTheme: AppBarTheme().copyWith(color: Colors.blue),
+  //https://api.flutter.dev/flutter/material/TextTheme-class.html
   textTheme: TextTheme().copyWith(
-      caption: TextStyle(
-        color: Colors.black.withOpacity(0.7),
-        fontSize: 14,
-      ),
-      overline: TextStyle(
-        color: Colors.black.withOpacity(0.8),
-        fontSize: 12,
-      )),
+      headline6: TextStyle(
+          color: Colors.black, fontSize: 18, fontWeight: FontWeight.w600),
+      subtitle1: TextStyle(
+          color: Colors.black, fontSize: 15, fontWeight: FontWeight.w500),
+      caption: TextStyle(color: Colors.black.withOpacity(0.7), fontSize: 14),
+      overline: TextStyle(color: Colors.black.withOpacity(0.8), fontSize: 12)),
 
   primaryTextTheme: TextTheme().copyWith(
       bodyText2: TextStyle(color: Colors.yellow),
       bodyText1: TextStyle(color: Colors.orange)),
-  cardColor: Color.fromRGBO(250, 250, 250, 1.0), //
+  cardColor: Color.fromRGBO(250, 250, 250, 1.0),
+  //
   dialogTheme: DialogTheme().copyWith(
     backgroundColor: Color.fromRGBO(250, 250, 250, 1.0), //
   ),
@@ -69,6 +69,10 @@ final darkThemeData = ThemeData(
   ),
   // primaryColor: Colors.red,
   textTheme: TextTheme().copyWith(
+      headline6: TextStyle(
+          color: Colors.white, fontSize: 18, fontWeight: FontWeight.w600),
+      subtitle1: TextStyle(
+          color: Colors.white, fontSize: 16, fontWeight: FontWeight.w500),
       caption: TextStyle(
         color: Colors.white.withOpacity(0.6),
         fontSize: 14,

lib/ui/settings/account_section_widget.dart

@@ -1,5 +1,5 @@
-import 'dart:io';
-
+import 'package:expandable/expandable.dart';
+import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_sodium/flutter_sodium.dart';
 import 'package:photos/core/configuration.dart';
@@ -9,6 +9,7 @@ import 'package:photos/ui/change_email_dialog.dart';
 import 'package:photos/ui/password_entry_page.dart';
 import 'package:photos/ui/payment/subscription.dart';
 import 'package:photos/ui/recovery_key_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/auth_util.dart';
@@ -25,12 +26,17 @@ class AccountSectionWidget extends StatefulWidget {
 class AccountSectionWidgetState extends State<AccountSectionWidget> {
   @override
   Widget build(BuildContext context) {
+    return ExpandablePanel(
+      header: SettingsSectionTitle("Account"),
+      collapsed: Container(),
+      expanded: _getSectionOptions(context),
+      theme: getExpandableTheme(context),
+    );
+  }
+
+  Column _getSectionOptions(BuildContext context) {
     return Column(
       children: [
-        SettingsSectionTitle("account"),
-        Padding(
-          padding: EdgeInsets.all(4),
-        ),
         GestureDetector(
           behavior: HitTestBehavior.translucent,
           onTap: () async {
@@ -43,15 +49,9 @@ class AccountSectionWidgetState extends State<AccountSectionWidget> {
             );
           },
           child: SettingsTextItem(
-              text: "subscription plan", icon: Icons.navigate_next),
+              text: "Subscription plan", icon: Icons.navigate_next),
         ),
-        Platform.isIOS
-            ? Padding(padding: EdgeInsets.all(2))
-            : Padding(padding: EdgeInsets.all(2)),
-        Divider(height: 4),
-        Platform.isIOS
-            ? Padding(padding: EdgeInsets.all(2))
-            : Padding(padding: EdgeInsets.all(4)),
+        SectionOptionDivider,
         GestureDetector(
           behavior: HitTestBehavior.translucent,
           onTap: () async {
@@ -82,15 +82,9 @@ class AccountSectionWidgetState extends State<AccountSectionWidget> {
             );
           },
           child:
-              SettingsTextItem(text: "recovery key", icon: Icons.navigate_next),
+              SettingsTextItem(text: "Recovery key", icon: Icons.navigate_next),
         ),
-        Platform.isIOS
-            ? Padding(padding: EdgeInsets.all(2))
-            : Padding(padding: EdgeInsets.all(4)),
-        Divider(height: 4),
-        Platform.isIOS
-            ? Padding(padding: EdgeInsets.all(2))
-            : Padding(padding: EdgeInsets.all(2)),
+        SectionOptionDivider,
         GestureDetector(
           behavior: HitTestBehavior.translucent,
           onTap: () async {
@@ -113,13 +107,9 @@ class AccountSectionWidgetState extends State<AccountSectionWidget> {
             );
           },
           child:
-              SettingsTextItem(text: "change email", icon: Icons.navigate_next),
+              SettingsTextItem(text: "Change email", icon: Icons.navigate_next),
         ),
-        Padding(padding: EdgeInsets.all(2)),
-        Divider(height: 4),
-        Platform.isIOS
-            ? Padding(padding: EdgeInsets.all(2))
-            : Padding(padding: EdgeInsets.all(4)),
+        SectionOptionDivider,
         GestureDetector(
           behavior: HitTestBehavior.translucent,
           onTap: () async {

lib/ui/settings/app_version_widget.dart

@@ -51,10 +51,7 @@ class _AppVersionWidgetState extends State<AppVersionWidget> {
               padding: const EdgeInsets.all(20),
               child: Text(
                 "app version: " + snapshot.data,
-                style: TextStyle(
-                  fontSize: 12,
-                  color: Colors.white.withOpacity(0.6),
-                ),
+                style: Theme.of(context).textTheme.caption,
               ),
             );
           }

lib/ui/settings/backup_section_widget.dart

@@ -1,5 +1,6 @@
 import 'dart:io';
 
+import 'package:expandable/expandable.dart';
 import 'package:flutter/material.dart';
 import 'package:photos/core/configuration.dart';
 import 'package:photos/models/backup_status.dart';
@@ -9,6 +10,7 @@ import 'package:photos/services/sync_service.dart';
 import 'package:photos/ui/backup_folder_selection_page.dart';
 import 'package:photos/ui/deduplicate_page.dart';
 import 'package:photos/ui/free_space_page.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/data_util.dart';
@@ -27,39 +29,38 @@ class BackupSectionWidget extends StatefulWidget {
 class BackupSectionWidgetState extends State<BackupSectionWidget> {
   @override
   Widget build(BuildContext context) {
+    return ExpandablePanel(
+      header: SettingsSectionTitle("Backup"),
+      collapsed: Container(),
+      expanded: _getSectionOptions(context),
+      theme: getExpandableTheme(context),
+    );
+  }
+
+  Widget _getSectionOptions(BuildContext context) {
     return Column(
       children: [
-        SettingsSectionTitle("backup"),
-        Padding(
-          padding: EdgeInsets.all(4),
-        ),
         GestureDetector(
           behavior: HitTestBehavior.translucent,
           onTap: () async {
             routeToPage(
               context,
               BackupFolderSelectionPage(
-                buttonText: "backup",
+                buttonText: "Backup",
               ),
             );
           },
           child: SettingsTextItem(
-              text: "backed up folders", icon: Icons.navigate_next),
+              text: "Backed up folders", icon: Icons.navigate_next),
         ),
-        Platform.isIOS
-            ? Padding(padding: EdgeInsets.all(2))
-            : Padding(padding: EdgeInsets.all(0)),
-        Divider(height: 4),
-        Platform.isIOS
-            ? Padding(padding: EdgeInsets.all(2))
-            : Padding(padding: EdgeInsets.all(4)),
+        SectionOptionDivider,
         SizedBox(
           height: 36,
           child: Row(
             mainAxisAlignment: MainAxisAlignment.spaceBetween,
             children: [
-              Text("backup over mobile data"),
-              Switch(
+              Text("Backup over mobile data"),
+              Switch.adaptive(
                 value: Configuration.instance.shouldBackupOverMobileData(),
                 onChanged: (value) async {
                   Configuration.instance.setBackupOverMobileData(value);
@@ -69,20 +70,14 @@ class BackupSectionWidgetState extends State<BackupSectionWidget> {
             ],
           ),
         ),
-        Platform.isIOS
-            ? Padding(padding: EdgeInsets.all(2))
-            : Padding(padding: EdgeInsets.all(4)),
-        Divider(height: 4),
-        Platform.isIOS
-            ? Padding(padding: EdgeInsets.all(2))
-            : Padding(padding: EdgeInsets.all(4)),
+        SectionOptionDivider,
         SizedBox(
           height: 36,
           child: Row(
             mainAxisAlignment: MainAxisAlignment.spaceBetween,
             children: [
-              Text("backup videos"),
-              Switch(
+              Text("Backup videos"),
+              Switch.adaptive(
                 value: Configuration.instance.shouldBackupVideos(),
                 onChanged: (value) async {
                   Configuration.instance.setShouldBackupVideos(value);
@@ -92,13 +87,7 @@ class BackupSectionWidgetState extends State<BackupSectionWidget> {
             ],
           ),
         ),
-        Platform.isIOS
-            ? Padding(padding: EdgeInsets.all(4))
-            : Padding(padding: EdgeInsets.all(2)),
-        Divider(height: 4),
-        Platform.isIOS
-            ? Padding(padding: EdgeInsets.all(2))
-            : Padding(padding: EdgeInsets.all(2)),
+        SectionOptionDivider,
         GestureDetector(
           behavior: HitTestBehavior.translucent,
           onTap: () async {
@@ -117,17 +106,11 @@ class BackupSectionWidgetState extends State<BackupSectionWidget> {
             }
           },
           child: SettingsTextItem(
-            text: "free up space",
+            text: "Free up space",
             icon: Icons.navigate_next,
           ),
         ),
-        Platform.isIOS
-            ? Padding(padding: EdgeInsets.all(4))
-            : Padding(padding: EdgeInsets.all(2)),
-        Divider(height: 4),
-        Platform.isIOS
-            ? Padding(padding: EdgeInsets.all(2))
-            : Padding(padding: EdgeInsets.all(2)),
+        SectionOptionDivider,
         GestureDetector(
           behavior: HitTestBehavior.translucent,
           onTap: () async {
@@ -156,7 +139,7 @@ class BackupSectionWidgetState extends State<BackupSectionWidget> {
             }
           },
           child: SettingsTextItem(
-            text: "deduplicate files",
+            text: "Deduplicate files",
             icon: Icons.navigate_next,
           ),
         ),

lib/ui/settings/common_settings.dart

@@ -0,0 +1,21 @@
+import 'dart:io';
+
+import 'package:expandable/expandable.dart';
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+
+Widget SectionOptionDivider = Padding(
+  padding: EdgeInsets.all(Platform.isIOS ? 4 : 2),
+);
+
+ExpandableThemeData getExpandableTheme(BuildContext context) {
+  return ExpandableThemeData(
+    expandIcon: CupertinoIcons.plus,
+    collapseIcon: CupertinoIcons.minus,
+    iconPadding: EdgeInsets.all(4),
+    iconColor: Theme.of(context).colorScheme.onSurface,
+    iconSize: 20.0,
+    iconRotationAngle: 3.14 / 2,
+    hasIcon: true,
+  );
+}

lib/ui/settings/danger_section_widget.dart

@@ -1,8 +1,8 @@
-import 'dart:io';
-
+import 'package:expandable/expandable.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_email_sender/flutter_email_sender.dart';
 import 'package:photos/services/user_service.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.dart';
@@ -17,30 +17,32 @@ class DangerSectionWidget extends StatefulWidget {
 class _DangerSectionWidgetState extends State<DangerSectionWidget> {
   @override
   Widget build(BuildContext context) {
+    return ExpandablePanel(
+      header: SettingsSectionTitle("Exit", color: Colors.red),
+      collapsed: Container(),
+      expanded: _getSectionOptions(context),
+      theme: getExpandableTheme(context),
+    );
+  }
+
+  Widget _getSectionOptions(BuildContext context) {
     return Column(
       children: [
-        SettingsSectionTitle("exit", color: Colors.red),
-        Padding(
-          padding: EdgeInsets.all(4),
-        ),
         GestureDetector(
           behavior: HitTestBehavior.translucent,
           onTap: () {
             _onLogoutTapped();
           },
-          child: SettingsTextItem(text: "logout", icon: Icons.navigate_next),
+          child: SettingsTextItem(text: "Logout", icon: Icons.navigate_next),
         ),
-        Platform.isIOS
-            ? Padding(padding: EdgeInsets.all(2))
-            : Padding(padding: EdgeInsets.all(2)),
-        Divider(height: 4),
+        SectionOptionDivider,
         GestureDetector(
           behavior: HitTestBehavior.translucent,
           onTap: () {
             _onDeleteAccountTapped();
           },
           child: SettingsTextItem(
-              text: "delete account", icon: Icons.navigate_next),
+              text: "Delete account", icon: Icons.navigate_next),
         ),
       ],
     );

lib/ui/settings/debug_section_widget.dart

@@ -1,25 +1,33 @@
+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/core/network.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';
 
 class DebugSectionWidget extends StatelessWidget {
   const DebugSectionWidget({Key key}) : super(key: key);
-
   @override
   Widget build(BuildContext context) {
+    return ExpandablePanel(
+      header: SettingsSectionTitle("Debug"),
+      collapsed: Container(),
+      expanded: _getSectionOptions(context),
+      theme: getExpandableTheme(context),
+    );
+  }
+
+  Widget _getSectionOptions(BuildContext context) {
     return Column(children: [
-      Padding(padding: EdgeInsets.all(12)),
-      SettingsSectionTitle("debug"),
       GestureDetector(
         behavior: HitTestBehavior.translucent,
         onTap: () async {
           _showKeyAttributesDialog(context);
         },
         child:
-            SettingsTextItem(text: "key attributes", icon: Icons.navigate_next),
+            SettingsTextItem(text: "Key attributes", icon: Icons.navigate_next),
       ),
       GestureDetector(
         behavior: HitTestBehavior.translucent,
@@ -27,7 +35,7 @@ class DebugSectionWidget extends StatelessWidget {
           Network.instance.getAlice().showInspector();
         },
         child: SettingsTextItem(
-            text: "network requests", icon: Icons.navigate_next),
+            text: "Network requests", icon: Icons.navigate_next),
       )
     ]);
   }

lib/ui/settings/info_section_widget.dart

@@ -1,6 +1,8 @@
+import 'package:expandable/expandable.dart';
 import 'package:flutter/material.dart';
 import 'package:photos/services/update_service.dart';
 import 'package:photos/ui/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/ui/web_page.dart';
@@ -13,24 +15,31 @@ class InfoSectionWidget extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    return ExpandablePanel(
+      header: SettingsSectionTitle("About"),
+      collapsed: Container(),
+      expanded: _getSectionOptions(context),
+      theme: getExpandableTheme(context),
+    );
+  }
+
+  Widget _getSectionOptions(BuildContext context) {
     return Column(
       children: [
-        SettingsSectionTitle("about"),
-        Padding(padding: EdgeInsets.all(4)),
         GestureDetector(
           behavior: HitTestBehavior.translucent,
           onTap: () async {
             Navigator.of(context).push(
               MaterialPageRoute(
                 builder: (BuildContext context) {
-                  return WebPage("faq", "https://ente.io/faq");
+                  return WebPage("Faq", "https://ente.io/faq");
                 },
               ),
             );
           },
-          child: SettingsTextItem(text: "faq", icon: Icons.navigate_next),
+          child: SettingsTextItem(text: "Faq", icon: Icons.navigate_next),
         ),
-        Divider(height: 4),
+        SectionOptionDivider,
         GestureDetector(
           behavior: HitTestBehavior.translucent,
           onTap: () {
@@ -42,9 +51,9 @@ class InfoSectionWidget extends StatelessWidget {
               ),
             );
           },
-          child: SettingsTextItem(text: "terms", icon: Icons.navigate_next),
+          child: SettingsTextItem(text: "Terms", icon: Icons.navigate_next),
         ),
-        Divider(height: 4),
+        SectionOptionDivider,
         GestureDetector(
           behavior: HitTestBehavior.translucent,
           onTap: () {
@@ -56,16 +65,16 @@ class InfoSectionWidget extends StatelessWidget {
               ),
             );
           },
-          child: SettingsTextItem(text: "privacy", icon: Icons.navigate_next),
+          child: SettingsTextItem(text: "Privacy", icon: Icons.navigate_next),
         ),
-        Divider(height: 4),
+        SectionOptionDivider,
         GestureDetector(
           behavior: HitTestBehavior.translucent,
           onTap: () async {
             launch("https://github.com/ente-io/frame");
           },
           child:
-              SettingsTextItem(text: "source code", icon: Icons.navigate_next),
+              SettingsTextItem(text: "Source code", icon: Icons.navigate_next),
         ),
         UpdateService.instance.isIndependent()
             ? Column(
@@ -94,7 +103,7 @@ class InfoSectionWidget extends StatelessWidget {
                       }
                     },
                     child: SettingsTextItem(
-                        text: "check for updates", icon: Icons.navigate_next),
+                        text: "Check for updates", icon: Icons.navigate_next),
                   ),
                 ],
               )

lib/ui/settings/security_section_widget.dart

@@ -1,6 +1,7 @@
 import 'dart:async';
 import 'dart:io';
 
+import 'package:expandable/expandable.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_windowmanager/flutter_windowmanager.dart';
 import 'package:photos/core/configuration.dart';
@@ -10,6 +11,7 @@ import 'package:photos/services/user_service.dart';
 import 'package:photos/ui/app_lock.dart';
 import 'package:photos/ui/loading_widget.dart';
 import 'package:photos/ui/sessions_page.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/auth_util.dart';
@@ -49,25 +51,31 @@ class _SecuritySectionWidgetState extends State<SecuritySectionWidget> {
 
   @override
   Widget build(BuildContext context) {
+    return ExpandablePanel(
+      header: SettingsSectionTitle("Security"),
+      collapsed: Container(),
+      expanded: _getSectionOptions(context),
+      theme: getExpandableTheme(context),
+    );
+  }
+
+  Widget _getSectionOptions(BuildContext context) {
     final List<Widget> children = [];
-    children.addAll([
-      SettingsSectionTitle("security"),
-    ]);
     if (_config.hasConfiguredAccount()) {
       children.addAll(
         [
-          Padding(padding: EdgeInsets.all(6)),
+          Padding(padding: EdgeInsets.all(2)),
           SizedBox(
             height: 36,
             child: Row(
               mainAxisAlignment: MainAxisAlignment.spaceBetween,
               children: [
-                Text("two-factor"),
+                Text("Two-factor"),
                 FutureBuilder(
                   future: UserService.instance.fetchTwoFactorStatus(),
                   builder: (_, snapshot) {
                     if (snapshot.hasData) {
-                      return Switch(
+                      return Switch.adaptive(
                         value: snapshot.data,
                         onChanged: (value) async {
                           AppLock.of(context).setEnabled(false);
@@ -103,18 +111,14 @@ class _SecuritySectionWidgetState extends State<SecuritySectionWidget> {
       );
     }
     children.addAll([
-      Padding(padding: EdgeInsets.all(2)),
-      Divider(height: 4),
-      Platform.isIOS
-          ? Padding(padding: EdgeInsets.all(2))
-          : Padding(padding: EdgeInsets.all(4)),
+      SectionOptionDivider,
       SizedBox(
         height: 36,
         child: Row(
           mainAxisAlignment: MainAxisAlignment.spaceBetween,
           children: [
-            Text("lockscreen"),
-            Switch(
+            Text("Lockscreen"),
+            Switch.adaptive(
               value: _config.shouldShowLockScreen(),
               onChanged: (value) async {
                 AppLock.of(context).disable();
@@ -137,21 +141,19 @@ class _SecuritySectionWidgetState extends State<SecuritySectionWidget> {
     if (Platform.isAndroid) {
       children.addAll(
         [
-          Padding(padding: EdgeInsets.all(4)),
-          Divider(height: 4),
-          Padding(padding: EdgeInsets.all(4)),
+          SectionOptionDivider,
           SizedBox(
             height: 36,
             child: Row(
               mainAxisAlignment: MainAxisAlignment.spaceBetween,
               children: [
-                Text("hide from recents"),
-                Switch(
+                Text("Hide from recents"),
+                Switch.adaptive(
                   value: _config.shouldHideFromRecents(),
                   onChanged: (value) async {
                     if (value) {
                       AlertDialog alert = AlertDialog(
-                        title: Text("hide from recents?"),
+                        title: Text("Hide from recents?"),
                         content: SingleChildScrollView(
                           child: Column(
                             mainAxisAlignment: MainAxisAlignment.start,
@@ -219,9 +221,7 @@ class _SecuritySectionWidgetState extends State<SecuritySectionWidget> {
       );
     }
     children.addAll([
-      Padding(padding: EdgeInsets.all(4)),
-      Divider(height: 4),
-      Padding(padding: EdgeInsets.all(2)),
+      SectionOptionDivider,
       GestureDetector(
         behavior: HitTestBehavior.translucent,
         onTap: () async {
@@ -242,7 +242,7 @@ class _SecuritySectionWidgetState extends State<SecuritySectionWidget> {
           );
         },
         child: SettingsTextItem(
-            text: "active sessions", icon: Icons.navigate_next),
+            text: "Active sessions", icon: Icons.navigate_next),
       ),
     ]);
     return Column(
@@ -252,9 +252,9 @@ class _SecuritySectionWidgetState extends State<SecuritySectionWidget> {
 
   void _disableTwoFactor() {
     AlertDialog alert = AlertDialog(
-      title: Text("disable two-factor"),
+      title: Text("Disable two-factor"),
       content:
-          Text("are you sure you want to disable two-factor authentication?"),
+          Text("Are you sure you want to disable two-factor authentication?"),
       actions: [
         TextButton(
           child: Text(

lib/ui/settings/settings_section_title.dart

@@ -18,11 +18,12 @@ class SettingsSectionTitle extends StatelessWidget {
         alignment: Alignment.centerLeft,
         child: Text(
           title,
-          style: TextStyle(
-            fontWeight: FontWeight.bold,
-            fontSize: 16,
-            color: color ?? Theme.of(context).buttonColor,
-          ),
+          style: color != null
+              ? Theme.of(context)
+                  .textTheme
+                  .headline6
+                  .merge(TextStyle(color: color))
+              : Theme.of(context).textTheme.headline6,
         ),
       ),
       Padding(padding: EdgeInsets.all(4)),

lib/ui/settings/settings_text_item.dart

@@ -19,7 +19,10 @@ class SettingsTextItem extends StatelessWidget {
         Row(
           mainAxisAlignment: MainAxisAlignment.spaceBetween,
           children: [
-            Align(alignment: Alignment.centerLeft, child: Text(text)),
+            Align(
+                alignment: Alignment.centerLeft,
+                child:
+                    Text(text, style: Theme.of(context).textTheme.subtitle1)),
             Icon(icon),
           ],
         ),
@@ -27,4 +30,4 @@ class SettingsTextItem extends StatelessWidget {
       ],
     );
   }
-}
+}

lib/ui/settings/social_section_widget.dart

@@ -1,7 +1,9 @@
 import 'dart:io';
 
+import 'package:expandable/expandable.dart';
 import 'package:flutter/material.dart';
 import 'package:photos/services/update_service.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.dart';
@@ -11,32 +13,39 @@ class SocialSectionWidget extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    return ExpandablePanel(
+      header: SettingsSectionTitle("Social"),
+      collapsed: Container(),
+      expanded: _getSectionOptions(context),
+      theme: getExpandableTheme(context),
+    );
+  }
+
+  Widget _getSectionOptions(BuildContext context) {
     return Column(
       children: [
-        SettingsSectionTitle("social"),
-        Padding(padding: EdgeInsets.all(4)),
         GestureDetector(
           behavior: HitTestBehavior.translucent,
           onTap: () {
             launch("https://twitter.com/enteio");
           },
-          child: SettingsTextItem(text: "twitter", icon: Icons.navigate_next),
+          child: SettingsTextItem(text: "Twitter", icon: Icons.navigate_next),
         ),
-        Divider(height: 4),
+        SectionOptionDivider,
         GestureDetector(
           behavior: HitTestBehavior.translucent,
           onTap: () {
             launch("https://discord.gg/uRqua3jSr5");
           },
-          child: SettingsTextItem(text: "discord", icon: Icons.navigate_next),
+          child: SettingsTextItem(text: "Discord", icon: Icons.navigate_next),
         ),
-        Divider(height: 4),
+        SectionOptionDivider,
         GestureDetector(
           behavior: HitTestBehavior.translucent,
           onTap: () {
             launch("https://reddit.com/r/enteio");
           },
-          child: SettingsTextItem(text: "reddit", icon: Icons.navigate_next),
+          child: SettingsTextItem(text: "Reddit", icon: Icons.navigate_next),
         ),
         !UpdateService.instance.isIndependent()
             ? Column(
@@ -54,7 +63,7 @@ class SocialSectionWidget extends StatelessWidget {
                       }
                     },
                     child: SettingsTextItem(
-                        text: "rate us! ✨", icon: Icons.navigate_next),
+                        text: "Rate us! ✨", icon: Icons.navigate_next),
                   ),
                 ],
               )

lib/ui/settings/support_section_widget.dart

@@ -1,8 +1,10 @@
+import 'package:expandable/expandable.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_email_sender/flutter_email_sender.dart';
 import 'package:logging/logging.dart';
 import 'package:photos/core/configuration.dart';
 import 'package:photos/core/constants.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/ui/web_page.dart';
@@ -15,10 +17,17 @@ class SupportSectionWidget extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    return ExpandablePanel(
+      header: SettingsSectionTitle("Support"),
+      collapsed: Container(),
+      expanded: _getSectionOptions(context),
+      theme: getExpandableTheme(context),
+    );
+  }
+
+  Widget _getSectionOptions(BuildContext context) {
     return Column(
       children: [
-        SettingsSectionTitle("support"),
-        Padding(padding: EdgeInsets.all(4)),
         GestureDetector(
           behavior: HitTestBehavior.translucent,
           onTap: () async {
@@ -33,9 +42,9 @@ class SupportSectionWidget extends StatelessWidget {
               launch("mailto:hey@ente.io");
             }
           },
-          child: SettingsTextItem(text: "email", icon: Icons.navigate_next),
+          child: SettingsTextItem(text: "Email", icon: Icons.navigate_next),
         ),
-        Divider(height: 4),
+        SectionOptionDivider,
         GestureDetector(
           behavior: HitTestBehavior.translucent,
           onTap: () {
@@ -53,9 +62,9 @@ class SupportSectionWidget extends StatelessWidget {
               ),
             );
           },
-          child: SettingsTextItem(text: "roadmap", icon: Icons.navigate_next),
+          child: SettingsTextItem(text: "Roadmap", icon: Icons.navigate_next),
         ),
-        Divider(height: 4),
+        SectionOptionDivider,
         GestureDetector(
           behavior: HitTestBehavior.translucent,
           onTap: () async {
@@ -64,7 +73,7 @@ class SupportSectionWidget extends StatelessWidget {
             });
           },
           child: SettingsTextItem(
-              text: "report bug 🐞", icon: Icons.navigate_next),
+              text: "Report bug 🐞", icon: Icons.navigate_next),
         ),
       ],
     );

lib/ui/settings_page.dart

@@ -20,37 +20,41 @@ class SettingsPage extends StatelessWidget {
   Widget build(BuildContext context) {
     return Scaffold(
       appBar: AppBar(
-        title: Text("settings"),
+        title: Text("Settings"),
       ),
-      body: _getBody(),
+      body: _getBody(context),
     );
   }
 
-  Widget _getBody() {
+  Widget _getBody(BuildContext context) {
     final hasLoggedIn = Configuration.instance.getToken() != null;
     final List<Widget> contents = [];
+    final sectionDivider = Divider(
+      height: 10,
+      color: Theme.of(context).colorScheme.onSurface.withOpacity(0.4),
+    );
     if (hasLoggedIn) {
       contents.addAll([
         DetailsSectionWidget(),
-        Padding(padding: EdgeInsets.all(12)),
+        sectionDivider,
         BackupSectionWidget(),
-        Padding(padding: EdgeInsets.all(12)),
+        sectionDivider,
         AccountSectionWidget(),
-        Padding(padding: EdgeInsets.all(12)),
+        sectionDivider,
       ]);
     }
     contents.addAll([
       SecuritySectionWidget(),
-      Padding(padding: EdgeInsets.all(12)),
+      sectionDivider,
       SupportSectionWidget(),
-      Padding(padding: EdgeInsets.all(12)),
+      sectionDivider,
       SocialSectionWidget(),
-      Padding(padding: EdgeInsets.all(12)),
+      sectionDivider,
       InfoSectionWidget(),
     ]);
     if (hasLoggedIn) {
       contents.addAll([
-        Padding(padding: EdgeInsets.all(12)),
+        sectionDivider,
         DangerSectionWidget(),
       ]);
     }