From b9ebd0430de715508e4f186a52b7902ece050de7 Mon Sep 17 00:00:00 2001
From: Brian Bicknell <brister388@gmail.com>
Date: Wed, 19 Aug 2026 22:20:39 -0400
Subject: [PATCH] Updated "Play" button style. Removed default background image
 on the main window.

---
 Harmonia.WinUI/MainWindow.xaml          |  4 +--
 Harmonia.WinUI/Views/PlayerView.xaml    | 46 +++++++++++++++++++++++--
 Harmonia.WinUI/Views/PlayerView.xaml.cs | 12 +++++++
 Harmonia.WinUI/Views/PlaylistsView.xaml | 16 ++++++++-
 4 files changed, 73 insertions(+), 5 deletions(-)

diff --git a/Harmonia.WinUI/MainWindow.xaml b/Harmonia.WinUI/MainWindow.xaml
index 5b3c63a..087512c 100644
--- a/Harmonia.WinUI/MainWindow.xaml
+++ b/Harmonia.WinUI/MainWindow.xaml
@@ -40,7 +40,7 @@
             <!--<Image Grid.Column="0" x:Name="TitleBarIcon" Source="ms-appx:///Assets/Images/MangaReader.png" Width="20" Height="20" Margin="0 0 10 0" />-->
             <TextBlock Grid.Column="1" x:Name="AppTitle" Text="{x:Bind Title, Mode=OneWay}" Style="{StaticResource CaptionTextBlockStyle}" VerticalAlignment="Center" />
         </Grid>
-        <Grid Grid.Row="1" Grid.RowSpan="2">
+        <!--<Grid Grid.Row="1" Grid.RowSpan="2">
             <Image Source="/Assets/Default.png" Stretch="UniformToFill" VerticalAlignment="Center" HorizontalAlignment="Center"></Image>
             <Canvas Background="#99000000"></Canvas>
             <Border>
@@ -48,7 +48,7 @@
                     <Media:BackdropBlurBrush Amount="20"></Media:BackdropBlurBrush>
                 </Border.Background>
             </Border>
-        </Grid>
+        </Grid>-->
         <Grid Grid.Row="1">
             <Grid.ColumnDefinitions>
                 <ColumnDefinition></ColumnDefinition>
diff --git a/Harmonia.WinUI/Views/PlayerView.xaml b/Harmonia.WinUI/Views/PlayerView.xaml
index d0826da..43005a8 100644
--- a/Harmonia.WinUI/Views/PlayerView.xaml
+++ b/Harmonia.WinUI/Views/PlayerView.xaml
@@ -156,8 +156,50 @@
                 <Button Style="{StaticResource FlatButton}"  Command="{Binding StopSongCommand}">
                     <Path Style="{StaticResource FlatButtonPath}" Fill="{StaticResource LightGradientBrush}" Data="{StaticResource StopFillIcon}"></Path>
                 </Button>
-                <Button Style="{StaticResource FlatButton}" Command="{Binding PlaySongCommand}" BorderBrush="{StaticResource DarkGradientBrush}" BorderThickness="2" CornerRadius="48" Padding="16">
-                    <Path Style="{StaticResource FlatButtonPath}" Fill="{StaticResource DarkGradientBrush}" Data="{StaticResource PlayFillIcon}" Margin="1,0,-1,0"></Path>
+                <Button Style="{StaticResource FlatButton}" Command="{Binding PlaySongCommand}" Padding="0"
+                        PointerEntered="PlayButton_PointerEntered" PointerExited="PlayButton_PointerExited">
+                    <Button.Resources>
+                        <!-- Keep background transparent on hover/press -->
+                        <SolidColorBrush x:Key="ButtonBackgroundPointerOver" Color="Transparent"/>
+                        <SolidColorBrush x:Key="ButtonBackgroundPressed" Color="Transparent"/>
+
+                        <Storyboard x:Name="PlayHoverEnterStoryboard">
+                            <ColorAnimation Storyboard.TargetName="PlayGradientStopTop" Storyboard.TargetProperty="Color"
+                                            To="#FDF6E2" Duration="0:0:0.15" EnableDependentAnimation="True"/>
+                            <ColorAnimation Storyboard.TargetName="PlayGradientStopBottom" Storyboard.TargetProperty="Color"
+                                            To="#C98B4E" Duration="0:0:0.15" EnableDependentAnimation="True"/>
+                            <ColorAnimation Storyboard.TargetName="PlayIconGradientStopTop" Storyboard.TargetProperty="Color"
+                                            To="#FDF6E2" Duration="0:0:0.15" EnableDependentAnimation="True"/>
+                            <ColorAnimation Storyboard.TargetName="PlayIconGradientStopBottom" Storyboard.TargetProperty="Color"
+                                            To="#C98B4E" Duration="0:0:0.15" EnableDependentAnimation="True"/>
+                        </Storyboard>
+                        <Storyboard x:Name="PlayHoverExitStoryboard">
+                            <ColorAnimation Storyboard.TargetName="PlayGradientStopTop" Storyboard.TargetProperty="Color"
+                                            To="#F9EBC6" Duration="0:0:0.15" EnableDependentAnimation="True"/>
+                            <ColorAnimation Storyboard.TargetName="PlayGradientStopBottom" Storyboard.TargetProperty="Color"
+                                            To="#A66831" Duration="0:0:0.15" EnableDependentAnimation="True"/>
+                            <ColorAnimation Storyboard.TargetName="PlayIconGradientStopTop" Storyboard.TargetProperty="Color"
+                                            To="#F9EBC6" Duration="0:0:0.15" EnableDependentAnimation="True"/>
+                            <ColorAnimation Storyboard.TargetName="PlayIconGradientStopBottom" Storyboard.TargetProperty="Color"
+                                            To="#A66831" Duration="0:0:0.15" EnableDependentAnimation="True"/>
+                        </Storyboard>
+                    </Button.Resources>
+                    <Border BorderThickness="2" CornerRadius="48" Padding="16">
+                        <Border.BorderBrush>
+                            <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
+                                <GradientStop x:Name="PlayGradientStopTop" Color="#F9EBC6" Offset="0"/>
+                                <GradientStop x:Name="PlayGradientStopBottom" Color="#A66831" Offset="1"/>
+                            </LinearGradientBrush>
+                        </Border.BorderBrush>
+                        <Path Style="{StaticResource FlatButtonPath}" Data="{StaticResource PlayFillIcon}" Margin="1,0,-1,0">
+                            <Path.Fill>
+                                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
+                                    <GradientStop x:Name="PlayIconGradientStopTop" Color="#F9EBC6" Offset="0"/>
+                                    <GradientStop x:Name="PlayIconGradientStopBottom" Color="#A66831" Offset="1"/>
+                                </LinearGradientBrush>
+                            </Path.Fill>
+                        </Path>
+                    </Border>
                 </Button>
                 <Button Style="{StaticResource FlatButton}"  Command="{Binding PauseSongCommand}">
                     <Path Style="{StaticResource FlatButtonPath}" Fill="{StaticResource LightGradientBrush}" Data="{StaticResource PauseFillIcon}"></Path>
diff --git a/Harmonia.WinUI/Views/PlayerView.xaml.cs b/Harmonia.WinUI/Views/PlayerView.xaml.cs
index 9d4a515..c4cd3bb 100644
--- a/Harmonia.WinUI/Views/PlayerView.xaml.cs
+++ b/Harmonia.WinUI/Views/PlayerView.xaml.cs
@@ -50,6 +50,18 @@ public sealed partial class PlayerView : UserControl
         _viewModel.IsPositionChangeInProgress = false;
     }
 
+    private void PlayButton_PointerEntered(object? sender, PointerRoutedEventArgs e)
+    {
+        PlayHoverExitStoryboard.Stop();
+        PlayHoverEnterStoryboard.Begin();
+    }
+
+    private void PlayButton_PointerExited(object? sender, PointerRoutedEventArgs e)
+    {
+        PlayHoverEnterStoryboard.Stop();
+        PlayHoverExitStoryboard.Begin();
+    }
+
     private void VolumeSlider_PointerWheelChanged(object? sender, PointerRoutedEventArgs e)
     {
         if (sender is not Slider slider)
diff --git a/Harmonia.WinUI/Views/PlaylistsView.xaml b/Harmonia.WinUI/Views/PlaylistsView.xaml
index 3956a57..5e015d5 100644
--- a/Harmonia.WinUI/Views/PlaylistsView.xaml
+++ b/Harmonia.WinUI/Views/PlaylistsView.xaml
@@ -25,20 +25,33 @@
             <GradientStop Color="#0B0D0F" Offset="1"/>
         </LinearGradientBrush>
 
+        <LinearGradientBrush x:Key="ActiveGradientBrush" StartPoint="0,0" EndPoint="0,1">
+            <GradientStop Color="#E1B88A" Offset="0"/>
+            <GradientStop Color="#E9B578" Offset="1"/>
+        </LinearGradientBrush>
+
+        <LinearGradientBrush x:Key="ActiveDarkGradientBrush" StartPoint="0,0" EndPoint="0,1">
+            <GradientStop Color="#F9EBC6" Offset="0"/>
+            <GradientStop Color="#A66831" Offset="1"/>
+        </LinearGradientBrush>
+
         <!-- Playlist Icon Path -->
         <Style x:Key="PlaylistIconPath" TargetType="PathIcon">
             <Setter Property="Foreground" Value="{StaticResource PlaylistItemIconBrush}"/>
+            <Setter Property="Foreground" Value="{StaticResource ActiveDarkGradientBrush}"/>
         </Style>
 
         <Style x:Key="SelectedPlaylistIconPath" TargetType="PathIcon" BasedOn="{StaticResource PlaylistIconPath}">
             <Setter Property="Foreground" Value="{StaticResource AccentTextFillColorPrimaryBrush}"/>
+            <Setter Property="Foreground" Value="{StaticResource ActiveGradientBrush}"/>
+            <Setter Property="Foreground" Value="{StaticResource ActiveDarkGradientBrush}"/>
         </Style>
 
         <!-- Playlist Title Text Block -->
         <Style x:Key="PlaylistTitleTextBlock" TargetType="TextBlock">
             <Setter Property="Foreground" Value="{StaticResource PlaylistItemTitleBrush}"/>
             <Setter Property="FontSize" Value="15"/>
-            <Setter Property="FontWeight" Value="Medium"/>
+            <Setter Property="FontWeight" Value="Normal"/>
             <Setter Property="LineStackingStrategy" Value="BlockLineHeight"/>
             <Setter Property="VerticalAlignment" Value="Center"/>
             <Setter Property="TextTrimming" Value="CharacterEllipsis"/>
@@ -47,6 +60,7 @@
 
         <Style x:Key="SelectedPlaylistTitleTextBlock" TargetType="TextBlock" BasedOn="{StaticResource PlaylistTitleTextBlock}">
             <Setter Property="Foreground" Value="{StaticResource AccentTextFillColorPrimaryBrush}"/>
+            <Setter Property="FontWeight" Value="Medium"/>
         </Style>
 
         <!-- Playlist Item Subtitle Text Block -->