From a6bf546e7918959eeccdc92a1f2a8b4e6f584a5c Mon Sep 17 00:00:00 2001
From: Alexey Golub <tyrrrz@gmail.com>
Date: Mon, 5 Oct 2020 17:41:09 +0300
Subject: [PATCH] [GUI] Clean up the UI

---
 .../Services/SettingsService.cs               |  6 +--
 .../ViewModels/Dialogs/SettingsViewModel.cs   | 18 +++----
 .../ViewModels/RootViewModel.cs               |  2 +-
 .../Views/Dialogs/ExportSetupView.xaml        |  2 +-
 .../Views/Dialogs/SettingsView.xaml           | 53 ++++++++++---------
 .../Views/Dialogs/SettingsView.xaml.cs        |  4 +-
 DiscordChatExporter.Gui/Views/RootView.xaml   | 24 +++++----
 7 files changed, 56 insertions(+), 53 deletions(-)

diff --git a/DiscordChatExporter.Gui/Services/SettingsService.cs b/DiscordChatExporter.Gui/Services/SettingsService.cs
index 000fc7e7..6a3ecfd8 100644
--- a/DiscordChatExporter.Gui/Services/SettingsService.cs
+++ b/DiscordChatExporter.Gui/Services/SettingsService.cs
@@ -6,13 +6,13 @@ namespace DiscordChatExporter.Gui.Services
 {
     public class SettingsService : SettingsManager
     {
-        public string DateFormat { get; set; } = "dd-MMM-yy hh:mm tt";
-
         public bool IsAutoUpdateEnabled { get; set; } = true;
 
+        public bool IsDarkModeEnabled { get; set; }
+
         public bool IsTokenPersisted { get; set; } = true;
 
-        public bool IsDarkThemeEnabled { get; set; } = false;
+        public string DateFormat { get; set; } = "dd-MMM-yy hh:mm tt";
 
         public int ParallelLimit { get; set; } = 1;
 
diff --git a/DiscordChatExporter.Gui/ViewModels/Dialogs/SettingsViewModel.cs b/DiscordChatExporter.Gui/ViewModels/Dialogs/SettingsViewModel.cs
index 2f71ec28..6a5a76f1 100644
--- a/DiscordChatExporter.Gui/ViewModels/Dialogs/SettingsViewModel.cs
+++ b/DiscordChatExporter.Gui/ViewModels/Dialogs/SettingsViewModel.cs
@@ -8,28 +8,28 @@ namespace DiscordChatExporter.Gui.ViewModels.Dialogs
     {
         private readonly SettingsService _settingsService;
 
-        public string DateFormat
-        {
-            get => _settingsService.DateFormat;
-            set => _settingsService.DateFormat = value;
-        }
-
         public bool IsAutoUpdateEnabled
         {
             get => _settingsService.IsAutoUpdateEnabled;
             set => _settingsService.IsAutoUpdateEnabled = value;
         }
 
+        public bool IsDarkModeEnabled
+        {
+            get => _settingsService.IsDarkModeEnabled;
+            set => _settingsService.IsDarkModeEnabled = value;
+        }
+
         public bool IsTokenPersisted
         {
             get => _settingsService.IsTokenPersisted;
             set => _settingsService.IsTokenPersisted = value;
         }
 
-        public bool IsDarkThemeEnabled
+        public string DateFormat
         {
-            get => _settingsService.IsDarkThemeEnabled;
-            set => _settingsService.IsDarkThemeEnabled = value;
+            get => _settingsService.DateFormat;
+            set => _settingsService.DateFormat = value;
         }
 
         public int ParallelLimit
diff --git a/DiscordChatExporter.Gui/ViewModels/RootViewModel.cs b/DiscordChatExporter.Gui/ViewModels/RootViewModel.cs
index 4a1d238e..4f442d03 100644
--- a/DiscordChatExporter.Gui/ViewModels/RootViewModel.cs
+++ b/DiscordChatExporter.Gui/ViewModels/RootViewModel.cs
@@ -108,7 +108,7 @@ namespace DiscordChatExporter.Gui.ViewModels
                 TokenValue = _settingsService.LastToken.Value;
             }
 
-            if (_settingsService.IsDarkThemeEnabled)
+            if (_settingsService.IsDarkModeEnabled)
             {
                 App.SetDarkTheme();
             }
diff --git a/DiscordChatExporter.Gui/Views/Dialogs/ExportSetupView.xaml b/DiscordChatExporter.Gui/Views/Dialogs/ExportSetupView.xaml
index a3470f88..23aeaf0d 100644
--- a/DiscordChatExporter.Gui/Views/Dialogs/ExportSetupView.xaml
+++ b/DiscordChatExporter.Gui/Views/Dialogs/ExportSetupView.xaml
@@ -54,7 +54,7 @@
                 <Run Text="{Binding Channels[0].Category, Mode=OneWay}" ToolTip="{Binding Channels[0].Category, Mode=OneWay}" />
                 <Run Text="/" />
                 <Run
-                    FontWeight="DemiBold"
+                    FontWeight="SemiBold"
                     Text="{Binding Channels[0].Name, Mode=OneWay}"
                     ToolTip="{Binding Channels[0].Name, Mode=OneWay}" />
             </TextBlock>
diff --git a/DiscordChatExporter.Gui/Views/Dialogs/SettingsView.xaml b/DiscordChatExporter.Gui/Views/Dialogs/SettingsView.xaml
index cb9e5b56..d01de4d9 100644
--- a/DiscordChatExporter.Gui/Views/Dialogs/SettingsView.xaml
+++ b/DiscordChatExporter.Gui/Views/Dialogs/SettingsView.xaml
@@ -17,14 +17,6 @@
             FontSize="17"
             Text="Settings" />
 
-        <!--  Date format  -->
-        <TextBox
-            Margin="16,8"
-            materialDesign:HintAssist.Hint="Date format"
-            materialDesign:HintAssist.IsFloating="True"
-            Text="{Binding DateFormat}"
-            ToolTip="Format used when rendering dates (refer to .NET date format)" />
-
         <!--  Auto-updates  -->
         <DockPanel
             Background="Transparent"
@@ -40,6 +32,24 @@
                 IsChecked="{Binding IsAutoUpdateEnabled}" />
         </DockPanel>
 
+        <!--  Dark mode  -->
+        <DockPanel
+            Background="Transparent"
+            LastChildFill="False"
+            ToolTip="Use darker colors in the UI">
+            <TextBlock
+                Margin="16,8"
+                DockPanel.Dock="Left"
+                Text="Dark mode" />
+            <ToggleButton
+                x:Name="DarkModeToggleButton"
+                Margin="16,8"
+                Checked="DarkModeToggleButton_Checked"
+                DockPanel.Dock="Right"
+                IsChecked="{Binding IsDarkModeEnabled}"
+                Unchecked="DarkModeToggleButton_Unchecked" />
+        </DockPanel>
+
         <!--  Persist token  -->
         <DockPanel
             Background="Transparent"
@@ -55,31 +65,22 @@
                 IsChecked="{Binding IsTokenPersisted}" />
         </DockPanel>
 
-        <!--  Dark/Light theme  -->
-        <DockPanel
-            Background="Transparent"
-            LastChildFill="False"
-            ToolTip="Persist last used token between sessions">
-            <TextBlock
-                Margin="16,8"
-                DockPanel.Dock="Left"
-                Text="Dark theme" />
-            <ToggleButton
-                Margin="16,8"
-                Checked="ToggleButton_Checked"
-                DockPanel.Dock="Right"
-                IsChecked="{Binding IsDarkThemeEnabled}"
-                Unchecked="ToggleButton_Unchecked" />
-        </DockPanel>
+        <!--  Date format  -->
+        <TextBox
+            Margin="16,8"
+            materialDesign:HintAssist.Hint="Date format"
+            materialDesign:HintAssist.IsFloating="True"
+            Text="{Binding DateFormat}"
+            ToolTip="Format used when rendering dates (uses .NET date formatting rules)" />
 
         <!--  Parallel limit  -->
         <StackPanel Background="Transparent" ToolTip="How many channels can be exported at the same time">
-            <TextBlock Margin="16,8">
+            <TextBlock Margin="16,8,16,4">
                 <Run Text="Parallel limit:" />
                 <Run Text="{Binding ParallelLimit, Mode=OneWay}" />
             </TextBlock>
             <Slider
-                Margin="16,8"
+                Margin="16,4,16,8"
                 IsSnapToTickEnabled="True"
                 Maximum="10"
                 Minimum="1"
diff --git a/DiscordChatExporter.Gui/Views/Dialogs/SettingsView.xaml.cs b/DiscordChatExporter.Gui/Views/Dialogs/SettingsView.xaml.cs
index 5cee2449..3fde3a22 100644
--- a/DiscordChatExporter.Gui/Views/Dialogs/SettingsView.xaml.cs
+++ b/DiscordChatExporter.Gui/Views/Dialogs/SettingsView.xaml.cs
@@ -9,12 +9,12 @@ namespace DiscordChatExporter.Gui.Views.Dialogs
             InitializeComponent();
         }
 
-        private void ToggleButton_Checked(object sender, RoutedEventArgs e)
+        private void DarkModeToggleButton_Checked(object sender, RoutedEventArgs e)
         {
             App.SetDarkTheme();
         }
 
-        private void ToggleButton_Unchecked(object sender, RoutedEventArgs e)
+        private void DarkModeToggleButton_Unchecked(object sender, RoutedEventArgs e)
         {
             App.SetLightTheme();
         }
diff --git a/DiscordChatExporter.Gui/Views/RootView.xaml b/DiscordChatExporter.Gui/Views/RootView.xaml
index c9768591..098b4ae0 100644
--- a/DiscordChatExporter.Gui/Views/RootView.xaml
+++ b/DiscordChatExporter.Gui/Views/RootView.xaml
@@ -157,25 +157,25 @@
                             <Run Text="1. Open Discord" />
                             <LineBreak />
                             <Run Text="2. Press" />
-                            <Run FontWeight="Bold" Text="Ctrl+Shift+I" />
+                            <Run FontWeight="SemiBold" Text="Ctrl+Shift+I" />
                             <Run Text="to show developer tools" />
                             <LineBreak />
                             <Run Text="3. Navigate to the" />
-                            <Run FontWeight="Bold" Text="Application" />
+                            <Run FontWeight="SemiBold" Text="Application" />
                             <Run Text="tab" />
                             <LineBreak />
                             <Run Text="4. Select" />
-                            <Run FontWeight="Bold" Text="Local Storage" />
+                            <Run FontWeight="SemiBold" Text="Local Storage" />
                             <Run Text="&gt;" />
-                            <Run FontWeight="Bold" Text="https://discord.com" />
+                            <Run FontWeight="SemiBold" Text="https://discord.com" />
                             <Run Text="on the left" />
                             <LineBreak />
                             <Run Text="5. Press" />
-                            <Run FontWeight="Bold" Text="Ctrl+R" />
+                            <Run FontWeight="SemiBold" Text="Ctrl+R" />
                             <Run Text="to reload" />
                             <LineBreak />
                             <Run Text="6. Find" />
-                            <Run FontWeight="Bold" Text="token" />
+                            <Run FontWeight="SemiBold" Text="token" />
                             <Run Text="at the bottom and copy the value" />
                         </TextBlock>
                         <TextBlock Margin="0,24,0,0" FontSize="14">
@@ -210,13 +210,13 @@
                             <Run Text="2. Open your application's settings" />
                             <LineBreak />
                             <Run Text="3. Navigate to the" />
-                            <Run FontWeight="Bold" Text="Bot" />
+                            <Run FontWeight="SemiBold" Text="Bot" />
                             <Run Text="section on the left" />
                             <LineBreak />
                             <Run Text="4. Under" />
-                            <Run FontWeight="Bold" Text="Token" />
+                            <Run FontWeight="SemiBold" Text="Token" />
                             <Run Text="click" />
-                            <Run FontWeight="Bold" Text="Copy" />
+                            <Run FontWeight="SemiBold" Text="Copy" />
                         </TextBlock>
                         <TextBlock Margin="0,24,0,0" FontSize="14">
                             <Run Text="To authorize using user token instead, click" />
@@ -269,7 +269,9 @@
                                         <Ellipse
                                             Width="48"
                                             Height="48"
-                                            Margin="12,4,12,4">
+                                            Margin="12,4,12,4"
+                                            Stroke="{DynamicResource MaterialDesignDivider}"
+                                            StrokeThickness="1">
                                             <Ellipse.Fill>
                                                 <ImageBrush ImageSource="{Binding IconUrl}" />
                                             </Ellipse.Fill>
@@ -303,7 +305,7 @@
                                                             Padding="0"
                                                             Background="Transparent"
                                                             BorderBrush="{DynamicResource MaterialDesignDivider}"
-                                                            BorderThickness="0,1,0,0"
+                                                            BorderThickness="0,0,0,1"
                                                             Header="{Binding Name}"
                                                             IsExpanded="False">
                                                             <ItemsPresenter />