Redesign settings screen (#100)

* Add FAQ link (#99) * Add reset settings button & tweak icons (#92) * Tweak settings casings, subtitles & defaults (#92) * Add SVG logo & reset all settings warning (#92) * Minor settings tweaks (#92) * Reorder settings & fixes (#92) * Add Twitch logo to login & profile tweaks (#92)
2022-03-29 13:49:21 -04:00 · 2022-03-29 13:49:21 -04:00 · 1575cc4aec
commit 1575cc4aec
parent 49fd8ffb13
13 changed files with 357 additions and 171 deletions
--- a/assets/icons/TwitchGlitchWhite.png
+++ b/assets/icons/TwitchGlitchWhite.png
--- a/assets/icons/logo.svg
+++ b/assets/icons/logo.svg
@ -0,0 +1,19 @@
+<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+<defs>
+<linearGradient id="paint0_linear_2_12" x1="50" y1="0" x2="50" y2="100" gradientUnits="userSpaceOnUse">
+<stop stop-color="#9146FF"/>
+<stop offset="1"/>
+</linearGradient>
+</defs>
+<circle cx="50" cy="50" r="50" fill="url(#paint0_linear_2_12)"/>
+<mask id="mask0_2_12" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="15" y="32" width="70" height="33">
+<rect x="15" y="32" width="69.7793" height="33" fill="white"/>
+</mask>
+<g mask="url(#mask0_2_12)">
+<path d="M6.24302 73.762L44.1917 35.8133C46.1718 33.8332 47.1619 32.8431 48.3035 32.4722C49.3077 32.1459 50.3895 32.1459 51.3937 32.4722C52.5353 32.8431 53.5254 33.8332 55.5054 35.8133L56.3666 36.6744L12.761 80.28L6.24302 73.762Z" fill="white"/>
+<path d="M44.2383 35.8133C46.2184 33.8332 47.2085 32.8432 48.3501 32.4722C49.3543 32.1459 50.4361 32.1459 51.4403 32.4722C52.5819 32.8432 53.572 33.8332 55.552 35.8133L93.5008 73.762L86.9827 80.28L43.3772 36.6745L44.2383 35.8133Z" fill="white"/>
+<g style="mix-blend-mode:lighten">
+<rect x="38.6633" y="42.4162" width="61.6676" height="9.21788" transform="rotate(45 38.6633 42.4162)" fill="white"/>
+</g>
+</g>
+</svg>
--- a/lib/screens/settings/sections/account_settings.dart
+++ b/lib/screens/settings/sections/account_settings.dart
@ -20,7 +20,7 @@ class AccountSettings extends StatelessWidget {
  Widget build(BuildContext context) {
    return Observer(
      builder: (context) => ExpansionTile(
-        leading: const Icon(Icons.manage_accounts),
+        leading: const Icon(Icons.account_circle),
        title: const Text(
          'Account',
          style: TextStyle(
--- a/lib/screens/settings/sections/chat_settings.dart
+++ b/lib/screens/settings/sections/chat_settings.dart
@ -3,7 +3,6 @@ import 'package:flutter/material.dart';
 import 'package:flutter_mobx/flutter_mobx.dart';
 import 'package:frosty/constants/constants.dart';
 import 'package:frosty/screens/settings/stores/settings_store.dart';
-import 'package:frosty/widgets/section_header.dart';

 class ChatSettings extends StatefulWidget {
  final SettingsStore settingsStore;
@ -35,40 +34,43 @@ class _ChatSettingsState extends State<ChatSettings> {
        ),
        children: [
          SwitchListTile.adaptive(
-            title: const Text('Show bottom bar'),
+            title: const Text('Bottom Bar'),
+            subtitle: const Text('Displays the bottom text field bar.'),
            value: settingsStore.showBottomBar,
            onChanged: (newValue) => settingsStore.showBottomBar = newValue,
          ),
          SwitchListTile.adaptive(
-            title: const Text('Show deleted messages'),
-            value: settingsStore.showDeletedMessages,
-            onChanged: (newValue) => settingsStore.showDeletedMessages = newValue,
+            isThreeLine: true,
+            title: const Text('Readable Name Colors'),
+            subtitle: const Text('Adjusts the lightness value of overly bright/dark names.'),
+            value: settingsStore.useReadableColors,
+            onChanged: (newValue) => settingsStore.useReadableColors = newValue,
          ),
          SwitchListTile.adaptive(
            isThreeLine: true,
-            title: const Text('Show zero-width emotes'),
-            subtitle: const Text('Makes "stacked" emotes from BetterTTV and 7TV visible in chat messages.'),
+            title: const Text('Zero-Width Emotes'),
+            subtitle: const Text('Displays "stacked" emotes from BetterTTV and 7TV.'),
            value: settingsStore.showZeroWidth,
            onChanged: (newValue) => settingsStore.showZeroWidth = newValue,
          ),
          SwitchListTile.adaptive(
            isThreeLine: true,
-            title: const Text('Show message dividers'),
-            subtitle: const Text('Displays a subtle divider between each chat message.'),
-            value: settingsStore.showChatMessageDividers,
-            onChanged: (newValue) => settingsStore.showChatMessageDividers = newValue,
+            title: const Text('Show Deleted Messages'),
+            subtitle: const Text('Restores the original message of deleted messages.'),
+            value: settingsStore.showDeletedMessages,
+            onChanged: (newValue) => settingsStore.showDeletedMessages = newValue,
          ),
          SwitchListTile.adaptive(
            isThreeLine: true,
-            title: const Text('Use readable colors for chat names'),
-            subtitle: const Text('Adjusts the lightness value of overly bright/dark names in chat.'),
-            value: settingsStore.useReadableColors,
-            onChanged: (newValue) => settingsStore.useReadableColors = newValue,
+            title: const Text('Message Dividers'),
+            subtitle: const Text('Displays a subtle divider between each message.'),
+            value: settingsStore.showChatMessageDividers,
+            onChanged: (newValue) => settingsStore.showChatMessageDividers = newValue,
          ),
          ListTile(
            isThreeLine: true,
-            title: const Text('Message timestamps'),
-            subtitle: const Text('Displays timestamps for when a chat message was sent.'),
+            title: const Text('Message Timestamps'),
+            subtitle: const Text('Displays timestamps for when a message was sent.'),
            trailing: DropdownButton(
              value: settingsStore.timestampType,
              onChanged: (TimestampType? newTimestamp) => settingsStore.timestampType = newTimestamp!,
@ -81,7 +83,13 @@ class _ChatSettingsState extends State<ChatSettings> {
            ),
          ),
          const SizedBox(height: 10.0),
-          const SectionHeader('Message Appearance'),
+          const Padding(
+            padding: EdgeInsets.fromLTRB(10.0, 20.0, 10.0, 5.0),
+            child: Text(
+              'Message Appearance',
+              style: TextStyle(fontWeight: FontWeight.w600, fontSize: 18.0),
+            ),
+          ),
          Container(
            width: double.infinity,
            padding: const EdgeInsets.all(20.0),
@ -136,55 +144,7 @@ class _ChatSettingsState extends State<ChatSettings> {
          ListTile(
            title: Row(
              children: [
-                const Text('Message scale'),
-                const Spacer(),
-                Text('${settingsStore.messageScale.toStringAsFixed(2)}x'),
-              ],
-            ),
-            subtitle: Slider.adaptive(
-              value: settingsStore.messageScale,
-              min: 0.5,
-              max: 2.0,
-              divisions: 6,
-              onChanged: (newValue) => settingsStore.messageScale = newValue,
-            ),
-          ),
-          ListTile(
-            title: Row(
-              children: [
-                const Text('Message spacing'),
-                const Spacer(),
-                Text(settingsStore.messageSpacing.toStringAsFixed(0).toString()),
-              ],
-            ),
-            subtitle: Slider.adaptive(
-              value: settingsStore.messageSpacing,
-              min: 0.0,
-              max: 30.0,
-              divisions: 6,
-              onChanged: (newValue) => settingsStore.messageSpacing = newValue,
-            ),
-          ),
-          ListTile(
-            title: Row(
-              children: [
-                const Text('Font size'),
-                const Spacer(),
-                Text(settingsStore.fontSize.toInt().toString()),
-              ],
-            ),
-            subtitle: Slider.adaptive(
-              value: settingsStore.fontSize,
-              min: 5,
-              max: 20,
-              divisions: 15,
-              onChanged: (newValue) => settingsStore.fontSize = newValue,
-            ),
-          ),
-          ListTile(
-            title: Row(
-              children: [
-                const Text('Badge scale'),
+                const Text('Badge Scale'),
                const Spacer(),
                Text('${settingsStore.badgeScale.toStringAsFixed(2)}x'),
              ],
@ -200,7 +160,7 @@ class _ChatSettingsState extends State<ChatSettings> {
          ListTile(
            title: Row(
              children: [
-                const Text('Emote scale'),
+                const Text('Emote Scale'),
                const Spacer(),
                Text('${settingsStore.emoteScale.toStringAsFixed(2)}x'),
              ],
@ -213,6 +173,54 @@ class _ChatSettingsState extends State<ChatSettings> {
              onChanged: (newValue) => settingsStore.emoteScale = newValue,
            ),
          ),
+          ListTile(
+            title: Row(
+              children: [
+                const Text('Message Scale'),
+                const Spacer(),
+                Text('${settingsStore.messageScale.toStringAsFixed(2)}x'),
+              ],
+            ),
+            subtitle: Slider.adaptive(
+              value: settingsStore.messageScale,
+              min: 0.5,
+              max: 2.0,
+              divisions: 6,
+              onChanged: (newValue) => settingsStore.messageScale = newValue,
+            ),
+          ),
+          ListTile(
+            title: Row(
+              children: [
+                const Text('Message Spacing'),
+                const Spacer(),
+                Text(settingsStore.messageSpacing.toStringAsFixed(0).toString()),
+              ],
+            ),
+            subtitle: Slider.adaptive(
+              value: settingsStore.messageSpacing,
+              min: 0.0,
+              max: 30.0,
+              divisions: 6,
+              onChanged: (newValue) => settingsStore.messageSpacing = newValue,
+            ),
+          ),
+          ListTile(
+            title: Row(
+              children: [
+                const Text('Font Size'),
+                const Spacer(),
+                Text(settingsStore.fontSize.toInt().toString()),
+              ],
+            ),
+            subtitle: Slider.adaptive(
+              value: settingsStore.fontSize,
+              min: 5,
+              max: 20,
+              divisions: 15,
+              onChanged: (newValue) => settingsStore.fontSize = newValue,
+            ),
+          ),
        ],
      ),
    );
--- a/lib/screens/settings/sections/general_settings.dart
+++ b/lib/screens/settings/sections/general_settings.dart
@ -13,7 +13,7 @@ class GeneralSettings extends StatelessWidget {

    return Observer(
      builder: (context) => ExpansionTile(
-        leading: const Icon(Icons.app_settings_alt),
+        leading: const Icon(Icons.settings),
        title: const Text(
          'General',
          style: TextStyle(
@ -36,7 +36,9 @@ class GeneralSettings extends StatelessWidget {
            ),
          ),
          SwitchListTile.adaptive(
-            title: const Text('Show stream uptime on thumbnails'),
+            isThreeLine: true,
+            title: const Text('Stream Uptime on Thumbnails'),
+            subtitle: const Text('Displays the uptime of the stream in the HH:MM:SS format.'),
            value: settingsStore.showThumbnailUptime,
            onChanged: (newValue) => settingsStore.showThumbnailUptime = newValue,
          ),
--- a/lib/screens/settings/sections/other_settings.dart
+++ b/lib/screens/settings/sections/other_settings.dart
@ -1,10 +1,12 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_cache_manager/flutter_cache_manager.dart';
 import 'package:flutter_mobx/flutter_mobx.dart';
+import 'package:flutter_svg/flutter_svg.dart';
 import 'package:frosty/constants/constants.dart';
 import 'package:frosty/screens/settings/stores/settings_store.dart';
 import 'package:package_info_plus/package_info_plus.dart';
 import 'package:sentry_flutter/sentry_flutter.dart';
+import 'package:url_launcher/url_launcher.dart';

 class OtherSettings extends StatelessWidget {
  final SettingsStore settingsStore;
@ -13,10 +15,40 @@ class OtherSettings extends StatelessWidget {
    required this.settingsStore,
  }) : super(key: key);

+  Future<void> _showConfirmDialog(BuildContext context) {
+    return showDialog(
+      context: context,
+      builder: (context) => AlertDialog(
+        title: const Text('Reset All Settings'),
+        content: const Text('Are you sure you want to reset all settings?'),
+        actions: [
+          TextButton(
+            onPressed: Navigator.of(context).pop,
+            child: const Text('Cancel'),
+          ),
+          TextButton(
+            onPressed: () {
+              settingsStore.reset();
+              Navigator.pop(context);
+              ScaffoldMessenger.of(context).showSnackBar(
+                const SnackBar(
+                  content: Text('Settings reset!'),
+                  behavior: SnackBarBehavior.floating,
+                ),
+              );
+            },
+            child: const Text('Yes'),
+            style: TextButton.styleFrom(primary: Colors.red),
+          ),
+        ],
+      ),
+    );
+  }
+
  @override
  Widget build(BuildContext context) {
    return ExpansionTile(
-      leading: const Icon(Icons.miscellaneous_services),
+      leading: const Icon(Icons.help),
      title: const Text(
        'Other',
        style: TextStyle(
@ -33,15 +65,24 @@ class OtherSettings extends StatelessWidget {

            showAboutDialog(
              context: context,
+              applicationIcon: SvgPicture.asset(
+                'assets/icons/logo.svg',
+                height: 80,
+              ),
              applicationName: packageInfo.appName,
              applicationVersion: 'Version ${packageInfo.version} (${packageInfo.buildNumber})',
              applicationLegalese: '\u{a9} 2022 Tommy Chow',
            );
          },
        ),
+        ListTile(
+          leading: const Icon(Icons.launch),
+          title: const Text('FAQ'),
+          onTap: () => launch('https://github.com/tommyxchow/frosty#faq'),
+        ),
        Observer(
          builder: (_) => SwitchListTile.adaptive(
-            title: const Text('Send anonymous crash logs'),
+            title: const Text('Send Anonymous Crash Logs'),
            value: settingsStore.sendCrashLogs,
            onChanged: (newValue) {
              if (newValue == true) {
@ -54,7 +95,7 @@ class OtherSettings extends StatelessWidget {
          ),
        ),
        Container(
-          padding: const EdgeInsets.all(10.0),
+          padding: const EdgeInsets.symmetric(horizontal: 10.0),
          width: double.infinity,
          child: ElevatedButton.icon(
            icon: const Icon(Icons.delete_sweep),
@ -70,6 +111,15 @@ class OtherSettings extends StatelessWidget {
            },
          ),
        ),
+        Container(
+          padding: const EdgeInsets.symmetric(horizontal: 10.0),
+          width: double.infinity,
+          child: ElevatedButton.icon(
+            icon: const Icon(Icons.restore),
+            label: const Text('Reset All Settings'),
+            onPressed: () => _showConfirmDialog(context),
+          ),
+        ),
      ],
    );
  }
--- a/lib/screens/settings/sections/video_settings.dart
+++ b/lib/screens/settings/sections/video_settings.dart
@ -13,7 +13,7 @@ class VideoSettings extends StatelessWidget {
  Widget build(BuildContext context) {
    return Observer(
      builder: (context) => ExpansionTile(
-        leading: const Icon(Icons.video_settings),
+        leading: const Icon(Icons.ondemand_video),
        title: const Text(
          'Video',
          style: TextStyle(
@ -23,27 +23,29 @@ class VideoSettings extends StatelessWidget {
        ),
        children: [
          SwitchListTile.adaptive(
-            title: const Text('Show video'),
+            title: const Text('Video'),
            value: settingsStore.showVideo,
            onChanged: (newValue) => settingsStore.showVideo = newValue,
          ),
          SwitchListTile.adaptive(
            isThreeLine: true,
-            title: const Text('Use custom video overlay'),
-            subtitle: const Text('Replaces the default video overlay with a mobile-friendly version.'),
+            title: const Text('Custom Overlay'),
+            subtitle: const Text('Replaces Twitch\'s default overlay with a mobile-friendly version.'),
            value: settingsStore.showOverlay,
            onChanged: settingsStore.showVideo ? (newValue) => settingsStore.showOverlay = newValue : null,
          ),
          if (Platform.isIOS)
            SwitchListTile.adaptive(
              isThreeLine: true,
-              title: const Text('Picture-in-picture button (experimental)'),
-              subtitle: const Text('Adds a button to enter PiP mode on the bottom right of the overlay. May cause freezes/crashes.'),
+              title: const Text('Picture-in-Picture Button (experimental)'),
+              subtitle: const Text('Adds a button to enter PiP mode on the bottom right of the overlay. MAY CAUSE freezes/crashes.'),
              value: settingsStore.pictureInPicture,
              onChanged: settingsStore.showVideo && settingsStore.showOverlay ? (newValue) => settingsStore.pictureInPicture = newValue : null,
            ),
          SwitchListTile.adaptive(
-            title: const Text('Long-press player to toggle overlay'),
+            isThreeLine: true,
+            title: const Text('Long-Press Player to Toggle Overlay'),
+            subtitle: const Text('Allows switching between Twitch\'s default overlay and the custom overlay.'),
            value: settingsStore.toggleableOverlay,
            onChanged: settingsStore.showVideo ? (newValue) => settingsStore.toggleableOverlay = newValue : null,
          ),
--- a/lib/screens/settings/settings.dart
+++ b/lib/screens/settings/settings.dart
@ -43,6 +43,7 @@ class Settings extends StatelessWidget {
        bottom: false,
        child: ListView(
          children: [
+            const SizedBox(height: 10.0),
            AccountSettings(
              settingsStore: settingsStore,
              authStore: context.read<AuthStore>(),
--- a/lib/screens/settings/stores/settings_store.dart
+++ b/lib/screens/settings/stores/settings_store.dart
@ -12,90 +12,163 @@ class SettingsStore extends _SettingsStoreBase with _$SettingsStore {
 }

 abstract class _SettingsStoreBase with Store {
-  //General Settings
-  @JsonKey(defaultValue: ThemeType.system, unknownEnumValue: ThemeType.system)
-  @observable
-  var themeType = ThemeType.system;
+  // * General Settings
+  static const defaultThemeType = ThemeType.system;

-  @JsonKey(defaultValue: false)
-  @observable
-  var showThumbnailUptime = false;
+  static const defaultShowThumbnailUptime = false;

-  // Video Settings
-  @JsonKey(defaultValue: true)
+  @JsonKey(defaultValue: defaultThemeType, unknownEnumValue: ThemeType.system)
  @observable
-  var showVideo = true;
+  var themeType = defaultThemeType;

-  @JsonKey(defaultValue: true)
+  @JsonKey(defaultValue: defaultShowThumbnailUptime)
  @observable
-  var showOverlay = true;
+  var showThumbnailUptime = defaultShowThumbnailUptime;

-  @JsonKey(defaultValue: false)
-  @observable
-  var toggleableOverlay = false;
+  // * Video Settings
+  static const defaultShowVideo = true;

-  @JsonKey(defaultValue: false)
-  @observable
-  var pictureInPicture = false;
+  static const defaultShowOverlay = true;

-  // Chat Settings
-  @JsonKey(defaultValue: true)
-  @observable
-  var showBottomBar = true;
+  static const defaultToggleableOverlay = false;

-  @JsonKey(defaultValue: false)
-  @observable
-  var showDeletedMessages = false;
+  static const defaultPictureInPicture = false;

-  @JsonKey(defaultValue: false)
+  @JsonKey(defaultValue: defaultShowVideo)
  @observable
-  var showZeroWidth = false;
+  var showVideo = defaultShowVideo;

-  @JsonKey(defaultValue: false)
+  @JsonKey(defaultValue: defaultShowOverlay)
  @observable
-  var showChatMessageDividers = false;
+  var showOverlay = defaultShowOverlay;

-  @JsonKey(defaultValue: TimestampType.disabled, unknownEnumValue: TimestampType.disabled)
+  @JsonKey(defaultValue: defaultToggleableOverlay)
  @observable
-  var timestampType = TimestampType.disabled;
+  var toggleableOverlay = defaultToggleableOverlay;

-  @JsonKey(defaultValue: true)
+  @JsonKey(defaultValue: defaultPictureInPicture)
  @observable
-  var useReadableColors = true;
+  var pictureInPicture = defaultPictureInPicture;

-  @JsonKey(defaultValue: 1.0)
-  @observable
-  var messageScale = 1.0;
+  // * Chat Settings
+  static const defaultShowBottomBar = true;

-  @JsonKey(defaultValue: 14.0)
-  @observable
-  var fontSize = 14.0;
+  static const defaultShowDeletedMessages = false;

-  @JsonKey(defaultValue: 10.0)
-  @observable
-  var messageSpacing = 10.0;
+  static const defaultShowZeroWidth = false;

-  @JsonKey(defaultValue: 1.0)
-  @observable
-  var badgeScale = 1.0;
+  static const defaultShowChatMessageDividers = false;

-  @JsonKey(defaultValue: 1.0)
-  @observable
-  var emoteScale = 1.0;
+  static const defaultTimestampType = TimestampType.disabled;

-  // Other settings
-  @JsonKey(defaultValue: true)
-  @observable
-  var sendCrashLogs = true;
+  static const defaultUseReadableColors = true;

-  // Global configs
-  @JsonKey(defaultValue: false)
-  @observable
-  var fullScreen = false;
+  static const defaultMessageScale = 1.0;

-  @JsonKey(defaultValue: true)
+  static const defaultFontSize = 12.0;
+
+  static const defaultMessageSpacing = 10.0;
+
+  static const defaultBadgeScale = 1.0;
+
+  static const defaultEmoteScale = 1.0;
+
+  @JsonKey(defaultValue: defaultShowBottomBar)
  @observable
-  var expandInfo = true;
+  var showBottomBar = defaultShowBottomBar;
+
+  @JsonKey(defaultValue: defaultShowDeletedMessages)
+  @observable
+  var showDeletedMessages = defaultShowDeletedMessages;
+
+  @JsonKey(defaultValue: defaultShowZeroWidth)
+  @observable
+  var showZeroWidth = defaultShowZeroWidth;
+
+  @JsonKey(defaultValue: defaultShowChatMessageDividers)
+  @observable
+  var showChatMessageDividers = defaultShowChatMessageDividers;
+
+  @JsonKey(defaultValue: defaultTimestampType, unknownEnumValue: TimestampType.disabled)
+  @observable
+  var timestampType = defaultTimestampType;
+
+  @JsonKey(defaultValue: defaultUseReadableColors)
+  @observable
+  var useReadableColors = defaultUseReadableColors;
+
+  @JsonKey(defaultValue: defaultFontSize)
+  @observable
+  var fontSize = defaultFontSize;
+
+  @JsonKey(defaultValue: defaultMessageSpacing)
+  @observable
+  var messageSpacing = defaultMessageSpacing;
+
+  @JsonKey(defaultValue: defaultMessageScale)
+  @observable
+  var messageScale = defaultMessageScale;
+
+  @JsonKey(defaultValue: defaultBadgeScale)
+  @observable
+  var badgeScale = defaultBadgeScale;
+
+  @JsonKey(defaultValue: defaultEmoteScale)
+  @observable
+  var emoteScale = defaultEmoteScale;
+
+  // * Other settings
+  static const defaultSendCrashLogs = true;
+
+  @JsonKey(defaultValue: defaultSendCrashLogs)
+  @observable
+  var sendCrashLogs = defaultSendCrashLogs;
+
+  // * Global configs
+  static const defaultFullScreen = false;
+
+  static const defaultExpandInfo = true;
+
+  @JsonKey(defaultValue: defaultFullScreen)
+  @observable
+  var fullScreen = defaultFullScreen;
+
+  @JsonKey(defaultValue: defaultExpandInfo)
+  @observable
+  var expandInfo = defaultExpandInfo;
+
+  @action
+  void reset() {
+    // * General Settings
+    themeType = defaultThemeType;
+    showThumbnailUptime = defaultShowThumbnailUptime;
+
+    // * Video Settings
+    showVideo = defaultShowVideo;
+    showOverlay = defaultShowOverlay;
+    toggleableOverlay = defaultToggleableOverlay;
+    pictureInPicture = defaultPictureInPicture;
+
+    // * Chat Settings
+    showBottomBar = defaultShowBottomBar;
+    showDeletedMessages = defaultShowDeletedMessages;
+    showZeroWidth = defaultShowZeroWidth;
+    showChatMessageDividers = defaultShowChatMessageDividers;
+    timestampType = defaultTimestampType;
+    useReadableColors = defaultUseReadableColors;
+    messageScale = defaultMessageScale;
+    fontSize = defaultFontSize;
+    messageSpacing = defaultMessageSpacing;
+    badgeScale = defaultBadgeScale;
+    emoteScale = defaultEmoteScale;
+
+    // * Other settings
+    sendCrashLogs = defaultSendCrashLogs;
+
+    // * Global configs
+    fullScreen = defaultFullScreen;
+    expandInfo = defaultExpandInfo;
+  }
 }

 enum ThemeType {
--- a/lib/screens/settings/stores/settings_store.g.dart
+++ b/lib/screens/settings/stores/settings_store.g.dart
@ -26,9 +26,9 @@ SettingsStore _$SettingsStoreFromJson(Map<String, dynamic> json) =>
              unknownValue: TimestampType.disabled) ??
          TimestampType.disabled
      ..useReadableColors = json['useReadableColors'] as bool? ?? true
-      ..messageScale = (json['messageScale'] as num?)?.toDouble() ?? 1.0
-      ..fontSize = (json['fontSize'] as num?)?.toDouble() ?? 14.0
+      ..fontSize = (json['fontSize'] as num?)?.toDouble() ?? 12.0
      ..messageSpacing = (json['messageSpacing'] as num?)?.toDouble() ?? 10.0
+      ..messageScale = (json['messageScale'] as num?)?.toDouble() ?? 1.0
      ..badgeScale = (json['badgeScale'] as num?)?.toDouble() ?? 1.0
      ..emoteScale = (json['emoteScale'] as num?)?.toDouble() ?? 1.0
      ..sendCrashLogs = json['sendCrashLogs'] as bool? ?? true
@ -49,9 +49,9 @@ Map<String, dynamic> _$SettingsStoreToJson(SettingsStore instance) =>
      'showChatMessageDividers': instance.showChatMessageDividers,
      'timestampType': _$TimestampTypeEnumMap[instance.timestampType],
      'useReadableColors': instance.useReadableColors,
-      'messageScale': instance.messageScale,
      'fontSize': instance.fontSize,
      'messageSpacing': instance.messageSpacing,
+      'messageScale': instance.messageScale,
      'badgeScale': instance.badgeScale,
      'emoteScale': instance.emoteScale,
      'sendCrashLogs': instance.sendCrashLogs,
@ -266,21 +266,6 @@ mixin _$SettingsStore on _SettingsStoreBase, Store {
    });
  }

-  final _$messageScaleAtom = Atom(name: '_SettingsStoreBase.messageScale');
-
-  @override
-  double get messageScale {
-    _$messageScaleAtom.reportRead();
-    return super.messageScale;
-  }
-
-  @override
-  set messageScale(double value) {
-    _$messageScaleAtom.reportWrite(value, super.messageScale, () {
-      super.messageScale = value;
-    });
-  }
-
  final _$fontSizeAtom = Atom(name: '_SettingsStoreBase.fontSize');

  @override
@ -311,6 +296,21 @@ mixin _$SettingsStore on _SettingsStoreBase, Store {
    });
  }

+  final _$messageScaleAtom = Atom(name: '_SettingsStoreBase.messageScale');
+
+  @override
+  double get messageScale {
+    _$messageScaleAtom.reportRead();
+    return super.messageScale;
+  }
+
+  @override
+  set messageScale(double value) {
+    _$messageScaleAtom.reportWrite(value, super.messageScale, () {
+      super.messageScale = value;
+    });
+  }
+
  final _$badgeScaleAtom = Atom(name: '_SettingsStoreBase.badgeScale');

  @override
@ -386,6 +386,20 @@ mixin _$SettingsStore on _SettingsStoreBase, Store {
    });
  }

+  final _$_SettingsStoreBaseActionController =
+      ActionController(name: '_SettingsStoreBase');
+
+  @override
+  void reset() {
+    final _$actionInfo = _$_SettingsStoreBaseActionController.startAction(
+        name: '_SettingsStoreBase.reset');
+    try {
+      return super.reset();
+    } finally {
+      _$_SettingsStoreBaseActionController.endAction(_$actionInfo);
+    }
+  }
+
  @override
  String toString() {
    return '''
@ -401,9 +415,9 @@ showZeroWidth: ${showZeroWidth},
 showChatMessageDividers: ${showChatMessageDividers},
 timestampType: ${timestampType},
 useReadableColors: ${useReadableColors},
-messageScale: ${messageScale},
 fontSize: ${fontSize},
 messageSpacing: ${messageSpacing},
+messageScale: ${messageScale},
 badgeScale: ${badgeScale},
 emoteScale: ${emoteScale},
 sendCrashLogs: ${sendCrashLogs},
--- a/lib/screens/settings/widgets/profile_card.dart
+++ b/lib/screens/settings/widgets/profile_card.dart
@ -12,18 +12,28 @@ class ProfileCard extends StatelessWidget {
    return showDialog(
      context: context,
      builder: (context) => SimpleDialog(
-        title: const Text('Log In With'),
        children: [
          ColoredBox(
            color: const Color.fromRGBO(145, 70, 255, 0.8),
            child: SimpleDialogOption(
              padding: const EdgeInsets.all(24.0),
-              child: const Text(
-                'Twitch Account',
-                style: TextStyle(
-                  fontSize: 16,
-                  color: Colors.white,
-                ),
+              child: Row(
+                mainAxisAlignment: MainAxisAlignment.center,
+                children: [
+                  Image.asset(
+                    'assets/icons/TwitchGlitchWhite.png',
+                    height: 30,
+                  ),
+                  const SizedBox(width: 10),
+                  const Text(
+                    'Connect with Twitch',
+                    style: TextStyle(
+                      fontSize: 16,
+                      color: Colors.white,
+                      fontWeight: FontWeight.w600,
+                    ),
+                  ),
+                ],
              ),
              onPressed: () {
                authStore.login();
@ -32,9 +42,16 @@ class ProfileCard extends StatelessWidget {
            ),
          ),
          const SizedBox(height: 20.0),
-          const Center(child: Text('Or')),
+          const Center(
+            child: Text(
+              'Or',
+              style: TextStyle(fontStyle: FontStyle.italic),
+            ),
+          ),
+          const SizedBox(height: 5.0),
          SimpleDialogOption(
            child: TextField(
+              textAlign: TextAlign.center,
              decoration: const InputDecoration(
                hintText: 'Token',
              ),
@ -80,7 +97,7 @@ class ProfileCard extends StatelessWidget {
        builder: (context) {
          if (authStore.error != null) {
            return ListTile(
-              title: const Text('Failed to connect'),
+              title: const Text('Failed to Connect'),
              trailing: OutlinedButton(
                onPressed: authStore.init,
                child: const Text('Try Again'),
@ -90,7 +107,6 @@ class ProfileCard extends StatelessWidget {
          if (authStore.isLoggedIn && authStore.user.details != null) {
            return ListTile(
              leading: CircleAvatar(
-                backgroundColor: const Color(0xFFFFFFFF),
                foregroundImage: CachedNetworkImageProvider(authStore.user.details!.profileImageUrl),
              ),
              title: Text(authStore.user.details!.displayName),
@ -109,7 +125,7 @@ class ProfileCard extends StatelessWidget {
              size: 40,
            ),
            title: const Text('Anonymous User'),
-            subtitle: const Text('Log in to view your followed streams, send chat messages, and more.'),
+            subtitle: const Text('Log in to chat, view followed streams, and more.'),
            trailing: OutlinedButton(
              onPressed: () => _showLoginDialog(context),
              child: const Text('Log In'),
--- a/lib/widgets/section_header.dart
+++ b/lib/widgets/section_header.dart
@ -8,7 +8,7 @@ class SectionHeader extends StatelessWidget {
  const SectionHeader(
    this.text, {
    Key? key,
-    this.padding = const EdgeInsets.fromLTRB(10.0, 30.0, 10.0, 5.0),
+    this.padding = const EdgeInsets.fromLTRB(10.0, 20.0, 10.0, 5.0),
    this.fontSize = 18.0,
  }) : super(key: key);

--- a/pubspec.yaml
+++ b/pubspec.yaml
@ -99,7 +99,8 @@ flutter:
  #   - images/a_dot_ham.jpeg

  assets:
-    - assets/icons/logo.png
+    - assets/icons/logo.svg
+    - assets/icons/TwitchGlitchWhite.png

  # An image asset can refer to one or more resolution-specific "variants", see
  # https://flutter.dev/assets-and-images/#resolution-aware.