From d384b3279c6502fd3af1625ae08fdedd1c3fe1c1 Mon Sep 17 00:00:00 2001
From: Tommy Chow <tommyxchow@gmail.com>
Date: Tue, 24 May 2022 18:43:12 -0400
Subject: [PATCH] Organize chat settings (#90)

---
 .../settings/sections/chat_settings.dart      | 70 +++++++++++--------
 lib/widgets/section_header.dart               |  8 ++-
 2 files changed, 47 insertions(+), 31 deletions(-)

diff --git a/lib/screens/settings/sections/chat_settings.dart b/lib/screens/settings/sections/chat_settings.dart
index 81478c1a..56a4a47e 100644
--- a/lib/screens/settings/sections/chat_settings.dart
+++ b/lib/screens/settings/sections/chat_settings.dart
@@ -21,10 +21,13 @@ class _ChatSettingsState extends State<ChatSettings> {
   Widget build(BuildContext context) {
     const timestamps = ['Disabled', '12-Hour', '24-Hour'];
 
+    const sectionPadding = EdgeInsets.only(left: 15.0, bottom: 5.0, top: 20.0);
+
     final settingsStore = widget.settingsStore;
 
     return Observer(
       builder: (context) => ExpansionTile(
+        expandedCrossAxisAlignment: CrossAxisAlignment.start,
         leading: const Icon(Icons.chat),
         title: const Text(
           'Chat',
@@ -34,12 +37,41 @@ class _ChatSettingsState extends State<ChatSettings> {
           ),
         ),
         children: [
+          const SectionHeader(
+            'Layout',
+            padding: sectionPadding,
+          ),
           SwitchListTile.adaptive(
             title: const Text('Bottom Bar'),
-            subtitle: const Text('Shows the bottom text field bar.'),
             value: settingsStore.showBottomBar,
             onChanged: (newValue) => settingsStore.showBottomBar = newValue,
           ),
+          SwitchListTile.adaptive(
+            title: const Text('Landscape Chat on Left Side'),
+            value: settingsStore.landscapeChatLeftSide,
+            onChanged: (newValue) => settingsStore.landscapeChatLeftSide = newValue,
+          ),
+          const SizedBox(height: 15.0),
+          ListTile(
+            title: Row(
+              children: [
+                const Text('Landscape Chat Width'),
+                const Spacer(),
+                Text('${(settingsStore.landscapeChatWidth * 100).toInt()}%'),
+              ],
+            ),
+            subtitle: Slider.adaptive(
+              value: settingsStore.landscapeChatWidth,
+              min: 0.2,
+              max: 0.8,
+              divisions: 12,
+              onChanged: (newValue) => settingsStore.landscapeChatWidth = newValue,
+            ),
+          ),
+          const SectionHeader(
+            'Emotes',
+            padding: sectionPadding,
+          ),
           SwitchListTile.adaptive(
             isThreeLine: true,
             title: const Text('Emote Autocomplete'),
@@ -54,6 +86,10 @@ class _ChatSettingsState extends State<ChatSettings> {
             value: settingsStore.showZeroWidth,
             onChanged: (newValue) => settingsStore.showZeroWidth = newValue,
           ),
+          const SectionHeader(
+            'Message Appearance',
+            padding: sectionPadding,
+          ),
           SwitchListTile.adaptive(
             isThreeLine: true,
             title: const Text('Readable Name Colors'),
@@ -90,34 +126,12 @@ class _ChatSettingsState extends State<ChatSettings> {
                   .toList(),
             ),
           ),
-          SwitchListTile.adaptive(
-            title: const Text('Landscape Chat on Left Side'),
-            value: settingsStore.landscapeChatLeftSide,
-            onChanged: (newValue) => settingsStore.landscapeChatLeftSide = newValue,
+          const SectionHeader(
+            'Message Sizing',
+            padding: sectionPadding,
           ),
-          ListTile(
-            title: Row(
-              children: [
-                const Text('Landscape Chat Width'),
-                const Spacer(),
-                Text('${(settingsStore.landscapeChatWidth * 100).toInt()}%'),
-              ],
-            ),
-            subtitle: Slider.adaptive(
-              value: settingsStore.landscapeChatWidth,
-              min: 0.2,
-              max: 0.8,
-              divisions: 12,
-              onChanged: (newValue) => settingsStore.landscapeChatWidth = newValue,
-            ),
-          ),
-          const SizedBox(height: 10.0),
-          const SectionHeader('Message Appearance'),
           ExpansionTile(
-            title: const Text(
-              'Preview',
-              style: TextStyle(fontWeight: FontWeight.w500),
-            ),
+            title: const Text('Preview'),
             children: [
               Container(
                 width: double.infinity,
@@ -232,7 +246,7 @@ class _ChatSettingsState extends State<ChatSettings> {
             subtitle: Slider.adaptive(
               value: settingsStore.messageSpacing,
               min: 0.0,
-              max: 30.0,
+              max: 20.0,
               divisions: 6,
               onChanged: (newValue) => settingsStore.messageSpacing = newValue,
             ),
diff --git a/lib/widgets/section_header.dart b/lib/widgets/section_header.dart
index 34e76224..d943a558 100644
--- a/lib/widgets/section_header.dart
+++ b/lib/widgets/section_header.dart
@@ -10,8 +10,8 @@ class SectionHeader extends StatelessWidget {
     this.text, {
     Key? key,
     this.padding = const EdgeInsets.fromLTRB(10.0, 20.0, 10.0, 5.0),
-    this.fontSize = 18.0,
-    this.fontWeight = FontWeight.w600,
+    this.fontSize = 12.0,
+    this.fontWeight = FontWeight.bold,
   }) : super(key: key);
 
   @override
@@ -19,10 +19,12 @@ class SectionHeader extends StatelessWidget {
     return Padding(
       padding: padding,
       child: Text(
-        text,
+        text.toUpperCase(),
         style: TextStyle(
+          color: DefaultTextStyle.of(context).style.color?.withOpacity(0.8),
           fontSize: fontSize,
           fontWeight: fontWeight,
+          letterSpacing: 0.5,
         ),
       ),
     );