From 2cbe9fc2ca9948b902eb005d7e67054586f7dcf9 Mon Sep 17 00:00:00 2001
From: Erik Darling <2136037+erikdarlingdata@users.noreply.github.com>
Date: Wed, 18 Feb 2026 19:48:20 -0500
Subject: [PATCH] Visual polish: chart grid opacity, sidebar icons, button
 hover transitions
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Increase chart grid line opacity from 8% to 16% (WithAlpha 20→40) for
  better readability on dark backgrounds — all 5 chart setup locations
- Add Segoe MDL2 icons to Settings and Help/About sidebar buttons in both
  Dashboard and Lite for faster visual scanning
- Add 120ms hover transition on default button style (ColorAnimation) in
  both DarkTheme files — replaces instant background swap

Partial fix for #110

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 Dashboard/Helpers/TabHelpers.cs              |  2 +-
 Dashboard/MainWindow.xaml                    | 16 ++++++++++++----
 Dashboard/Themes/DarkTheme.xaml              | 15 ++++++++++++++-
 Lite/Controls/ServerTab.xaml.cs              |  2 +-
 Lite/MainWindow.xaml                         | 14 ++++++++++++--
 Lite/Themes/DarkTheme.xaml                   | 15 ++++++++++++++-
 Lite/Windows/ProcedureHistoryWindow.xaml.cs  |  2 +-
 Lite/Windows/QueryStatsHistoryWindow.xaml.cs |  2 +-
 Lite/Windows/QueryStoreHistoryWindow.xaml.cs |  2 +-
 9 files changed, 57 insertions(+), 13 deletions(-)

diff --git a/Dashboard/Helpers/TabHelpers.cs b/Dashboard/Helpers/TabHelpers.cs
index c7556a9c..a9cc90c9 100644
--- a/Dashboard/Helpers/TabHelpers.cs
+++ b/Dashboard/Helpers/TabHelpers.cs
@@ -132,7 +132,7 @@ public static void ApplyDarkModeToChart(WpfPlot chart)
             var darkBackground = ScottPlot.Color.FromHex("#22252b");
             var darkerBackground = ScottPlot.Color.FromHex("#111217");
             var textColor = ScottPlot.Color.FromHex("#9DA5B4");
-            var gridColor = ScottPlot.Colors.White.WithAlpha(20);
+            var gridColor = ScottPlot.Colors.White.WithAlpha(40);
 
             chart.Plot.FigureBackground.Color = darkBackground;
             chart.Plot.DataBackground.Color = darkerBackground;
diff --git a/Dashboard/MainWindow.xaml b/Dashboard/MainWindow.xaml
index 3f7997c9..f437f103 100644
--- a/Dashboard/MainWindow.xaml
+++ b/Dashboard/MainWindow.xaml
@@ -172,14 +172,22 @@
                             Margin="0,0,0,12"/>
                     <Separator/>
                     <Button x:Name="SettingsButton"
-                            Content="Settings"
                             Click="Settings_Click"
                             Height="28"
-                            Margin="0,8,0,6"/>
+                            Margin="0,8,0,6">
+                        <StackPanel Orientation="Horizontal">
+                            <TextBlock Text="&#xE713;" FontFamily="Segoe MDL2 Assets" FontSize="12" VerticalAlignment="Center" Margin="0,0,6,0"/>
+                            <TextBlock Text="Settings" VerticalAlignment="Center"/>
+                        </StackPanel>
+                    </Button>
                     <Button x:Name="HelpButton"
-                            Content="Help / About"
                             Click="Help_Click"
-                            Height="28"/>
+                            Height="28">
+                        <StackPanel Orientation="Horizontal">
+                            <TextBlock Text="&#xE897;" FontFamily="Segoe MDL2 Assets" FontSize="12" VerticalAlignment="Center" Margin="0,0,6,0"/>
+                            <TextBlock Text="Help / About" VerticalAlignment="Center"/>
+                        </StackPanel>
+                    </Button>
                 </StackPanel>
             </Grid>
         </Border>
diff --git a/Dashboard/Themes/DarkTheme.xaml b/Dashboard/Themes/DarkTheme.xaml
index 9d4f3940..bdba8783 100644
--- a/Dashboard/Themes/DarkTheme.xaml
+++ b/Dashboard/Themes/DarkTheme.xaml
@@ -115,7 +115,20 @@
                     </Border>
                     <ControlTemplate.Triggers>
                         <Trigger Property="IsMouseOver" Value="True">
-                            <Setter TargetName="border" Property="Background" Value="{StaticResource BackgroundLighterBrush}"/>
+                            <Trigger.EnterActions>
+                                <BeginStoryboard>
+                                    <Storyboard>
+                                        <ColorAnimation Storyboard.TargetName="border" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" To="{StaticResource BackgroundLighterColor}" Duration="0:0:0.12"/>
+                                    </Storyboard>
+                                </BeginStoryboard>
+                            </Trigger.EnterActions>
+                            <Trigger.ExitActions>
+                                <BeginStoryboard>
+                                    <Storyboard>
+                                        <ColorAnimation Storyboard.TargetName="border" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" To="{StaticResource BackgroundLightColor}" Duration="0:0:0.12"/>
+                                    </Storyboard>
+                                </BeginStoryboard>
+                            </Trigger.ExitActions>
                         </Trigger>
                         <Trigger Property="IsPressed" Value="True">
                             <Setter TargetName="border" Property="Background" Value="{StaticResource AccentPressedBrush}"/>
diff --git a/Lite/Controls/ServerTab.xaml.cs b/Lite/Controls/ServerTab.xaml.cs
index 16d0ada0..85506874 100644
--- a/Lite/Controls/ServerTab.xaml.cs
+++ b/Lite/Controls/ServerTab.xaml.cs
@@ -1475,7 +1475,7 @@ private static void ApplyDarkTheme(ScottPlot.WPF.WpfPlot chart)
         var darkBackground = ScottPlot.Color.FromHex("#22252b");
         var darkerBackground = ScottPlot.Color.FromHex("#111217");
         var textColor = ScottPlot.Color.FromHex("#9DA5B4");
-        var gridColor = ScottPlot.Colors.White.WithAlpha(20);
+        var gridColor = ScottPlot.Colors.White.WithAlpha(40);
 
         chart.Plot.FigureBackground.Color = darkBackground;
         chart.Plot.DataBackground.Color = darkerBackground;
diff --git a/Lite/MainWindow.xaml b/Lite/MainWindow.xaml
index 60b8aa8c..9f257c26 100644
--- a/Lite/MainWindow.xaml
+++ b/Lite/MainWindow.xaml
@@ -150,8 +150,18 @@
                     <StackPanel>
                         <Button x:Name="AddServerButton" Content="+ Add Server" Click="AddServerButton_Click"/>
                         <Button x:Name="ManageServersButton" Content="Manage Servers" Click="ManageServersButton_Click" Margin="0,8,0,0"/>
-                        <Button x:Name="SettingsButton" Content="Settings" Click="SettingsButton_Click" Margin="0,8,0,0"/>
-                        <Button Content="About" Click="AboutButton_Click" Margin="0,8,0,0"/>
+                        <Button x:Name="SettingsButton" Click="SettingsButton_Click" Margin="0,8,0,0">
+                            <StackPanel Orientation="Horizontal">
+                                <TextBlock Text="&#xE713;" FontFamily="Segoe MDL2 Assets" FontSize="12" VerticalAlignment="Center" Margin="0,0,6,0"/>
+                                <TextBlock Text="Settings" VerticalAlignment="Center"/>
+                            </StackPanel>
+                        </Button>
+                        <Button Click="AboutButton_Click" Margin="0,8,0,0">
+                            <StackPanel Orientation="Horizontal">
+                                <TextBlock Text="&#xE897;" FontFamily="Segoe MDL2 Assets" FontSize="12" VerticalAlignment="Center" Margin="0,0,6,0"/>
+                                <TextBlock Text="About" VerticalAlignment="Center"/>
+                            </StackPanel>
+                        </Button>
                     </StackPanel>
                 </Border>
             </Grid>
diff --git a/Lite/Themes/DarkTheme.xaml b/Lite/Themes/DarkTheme.xaml
index 58c0db05..b1bd6b07 100644
--- a/Lite/Themes/DarkTheme.xaml
+++ b/Lite/Themes/DarkTheme.xaml
@@ -115,7 +115,20 @@
                     </Border>
                     <ControlTemplate.Triggers>
                         <Trigger Property="IsMouseOver" Value="True">
-                            <Setter TargetName="border" Property="Background" Value="{StaticResource BackgroundLighterBrush}"/>
+                            <Trigger.EnterActions>
+                                <BeginStoryboard>
+                                    <Storyboard>
+                                        <ColorAnimation Storyboard.TargetName="border" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" To="{StaticResource BackgroundLighterColor}" Duration="0:0:0.12"/>
+                                    </Storyboard>
+                                </BeginStoryboard>
+                            </Trigger.EnterActions>
+                            <Trigger.ExitActions>
+                                <BeginStoryboard>
+                                    <Storyboard>
+                                        <ColorAnimation Storyboard.TargetName="border" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" To="{StaticResource BackgroundLightColor}" Duration="0:0:0.12"/>
+                                    </Storyboard>
+                                </BeginStoryboard>
+                            </Trigger.ExitActions>
                         </Trigger>
                         <Trigger Property="IsPressed" Value="True">
                             <Setter TargetName="border" Property="Background" Value="{StaticResource AccentPressedBrush}"/>
diff --git a/Lite/Windows/ProcedureHistoryWindow.xaml.cs b/Lite/Windows/ProcedureHistoryWindow.xaml.cs
index 1d9547b2..3cb45212 100644
--- a/Lite/Windows/ProcedureHistoryWindow.xaml.cs
+++ b/Lite/Windows/ProcedureHistoryWindow.xaml.cs
@@ -123,7 +123,7 @@ private static void ApplyDarkTheme(ScottPlot.WPF.WpfPlot chart)
         var darkBg = ScottPlot.Color.FromHex("#22252b");
         var darkerBg = ScottPlot.Color.FromHex("#111217");
         var text = ScottPlot.Color.FromHex("#9DA5B4");
-        var grid = ScottPlot.Colors.White.WithAlpha(20);
+        var grid = ScottPlot.Colors.White.WithAlpha(40);
 
         chart.Plot.FigureBackground.Color = darkBg;
         chart.Plot.DataBackground.Color = darkerBg;
diff --git a/Lite/Windows/QueryStatsHistoryWindow.xaml.cs b/Lite/Windows/QueryStatsHistoryWindow.xaml.cs
index 76a51bfd..69e54338 100644
--- a/Lite/Windows/QueryStatsHistoryWindow.xaml.cs
+++ b/Lite/Windows/QueryStatsHistoryWindow.xaml.cs
@@ -158,7 +158,7 @@ private static void ApplyDarkTheme(ScottPlot.WPF.WpfPlot chart)
         var darkBg = ScottPlot.Color.FromHex("#22252b");
         var darkerBg = ScottPlot.Color.FromHex("#111217");
         var text = ScottPlot.Color.FromHex("#9DA5B4");
-        var grid = ScottPlot.Colors.White.WithAlpha(20);
+        var grid = ScottPlot.Colors.White.WithAlpha(40);
 
         chart.Plot.FigureBackground.Color = darkBg;
         chart.Plot.DataBackground.Color = darkerBg;
diff --git a/Lite/Windows/QueryStoreHistoryWindow.xaml.cs b/Lite/Windows/QueryStoreHistoryWindow.xaml.cs
index 8699d208..63a1a50f 100644
--- a/Lite/Windows/QueryStoreHistoryWindow.xaml.cs
+++ b/Lite/Windows/QueryStoreHistoryWindow.xaml.cs
@@ -161,7 +161,7 @@ private static void ApplyDarkTheme(ScottPlot.WPF.WpfPlot chart)
         var darkBg = ScottPlot.Color.FromHex("#22252b");
         var darkerBg = ScottPlot.Color.FromHex("#111217");
         var text = ScottPlot.Color.FromHex("#9DA5B4");
-        var grid = ScottPlot.Colors.White.WithAlpha(20);
+        var grid = ScottPlot.Colors.White.WithAlpha(40);
 
         chart.Plot.FigureBackground.Color = darkBg;
         chart.Plot.DataBackground.Color = darkerBg;