use expandable view for settings button

2022-03-09 01:13:51 +05:30 · 2022-03-09 01:13:51 +05:30 · faa78eae39
commit faa78eae39
parent 13df67d94a
14 changed files with 207 additions and 167 deletions
--- a/lib/app.dart
+++ b/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,
--- a/lib/ui/settings/account_section_widget.dart
+++ b/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 {
--- a/lib/ui/settings/app_version_widget.dart
+++ b/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,
              ),
            );
          }
--- a/lib/ui/settings/backup_section_widget.dart
+++ b/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,
          ),
        ),
--- a/lib/ui/settings/common_settings.dart
+++ b/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,
+  );
+}
--- a/lib/ui/settings/danger_section_widget.dart
+++ b/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),
        ),
      ],
    );
--- a/lib/ui/settings/debug_section_widget.dart
+++ b/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),
      )
    ]);
  }
--- a/lib/ui/settings/info_section_widget.dart
+++ b/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),
                  ),
                ],
              )
--- a/lib/ui/settings/security_section_widget.dart
+++ b/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(
--- a/lib/ui/settings/settings_section_title.dart
+++ b/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)),
--- a/lib/ui/settings/settings_text_item.dart
+++ b/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 {
      ],
    );
  }
-}
+}
--- a/lib/ui/settings/social_section_widget.dart
+++ b/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),
                  ),
                ],
              )
--- a/lib/ui/settings/support_section_widget.dart
+++ b/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),
        ),
      ],
    );
--- a/lib/ui/settings_page.dart
+++ b/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(),
      ]);
    }