From f0cbf709b67ef41583c28254e80a176b56c04713 Mon Sep 17 00:00:00 2001
From: Vladimir <vkoshevarov@varonis.com>
Date: Sun, 22 Mar 2026 13:25:16 +0200
Subject: [PATCH] feat: Enhance button styles and layout across various views
 for improved UI consistency

---
 TV Player Avalonia/App.axaml                  | 46 +++++++++++++++++++
 TV Player Avalonia/MainWindow.axaml           | 24 ++++++++--
 TV Player Avalonia/Views/PlayerView.axaml     | 37 ++++++++++-----
 .../Views/PlaylistsGroupView.axaml            | 10 ++--
 .../Views/ProgramsGroupView.axaml             | 24 ++++++----
 .../Views/ProgramsListView.axaml              |  1 +
 TV Player Avalonia/Views/SettingsView.axaml   | 26 +++++++++--
 7 files changed, 133 insertions(+), 35 deletions(-)

diff --git a/TV Player Avalonia/App.axaml b/TV Player Avalonia/App.axaml
index ee1b72d..368177d 100644
--- a/TV Player Avalonia/App.axaml	
+++ b/TV Player Avalonia/App.axaml	
@@ -6,6 +6,52 @@
              RequestedThemeVariant="Dark">
   <Application.Styles>
     <FluentTheme />
+    <Style Selector="Button.card">
+      <Setter Property="BorderThickness" Value="2" />
+      <Setter Property="BorderBrush" Value="Yellow" />
+      <Setter Property="Background" Value="#B0000000" />
+    </Style>
+    <Style Selector="Button.card:pointerover">
+      <Setter Property="Background" Value="#C0000000" />
+      <Setter Property="BorderBrush" Value="#FFF176" />
+    </Style>
+    <Style Selector="Button.card:pressed">
+      <Setter Property="Background" Value="#D0000000" />
+    </Style>
+    <Style Selector="Button.icon-yellow">
+      <Setter Property="Background" Value="Yellow" />
+      <Setter Property="BorderThickness" Value="0" />
+      <Setter Property="CornerRadius" Value="300" />
+      <Setter Property="Width" Value="50" />
+      <Setter Property="Height" Value="50" />
+    </Style>
+    <Style Selector="Button.icon-yellow:pointerover">
+      <Setter Property="Background" Value="#FFF176" />
+    </Style>
+    <Style Selector="Button.icon-red">
+      <Setter Property="Background" Value="Red" />
+      <Setter Property="BorderThickness" Value="0" />
+      <Setter Property="CornerRadius" Value="300" />
+      <Setter Property="Width" Value="50" />
+      <Setter Property="Height" Value="50" />
+    </Style>
+    <Style Selector="Button.icon-red:pointerover">
+      <Setter Property="Background" Value="#EF5350" />
+    </Style>
+    <Style Selector="Button.icon-green">
+      <Setter Property="Background" Value="Green" />
+      <Setter Property="BorderThickness" Value="0" />
+      <Setter Property="CornerRadius" Value="300" />
+      <Setter Property="Width" Value="50" />
+      <Setter Property="Height" Value="50" />
+    </Style>
+    <Style Selector="Button.icon-lightgreen">
+      <Setter Property="Background" Value="LightGreen" />
+      <Setter Property="BorderThickness" Value="0" />
+      <Setter Property="CornerRadius" Value="300" />
+      <Setter Property="Width" Value="50" />
+      <Setter Property="Height" Value="50" />
+    </Style>
   </Application.Styles>
 
   <Application.DataTemplates>
diff --git a/TV Player Avalonia/MainWindow.axaml b/TV Player Avalonia/MainWindow.axaml
index a525285..5a192d8 100644
--- a/TV Player Avalonia/MainWindow.axaml	
+++ b/TV Player Avalonia/MainWindow.axaml	
@@ -18,16 +18,32 @@
 
     <Grid IsVisible="{Binding IsTopPanelVisible}" Height="80">
       <Grid ColumnDefinitions="80,80,*,80,80">
-        <Button Width="70" Height="70" Margin="10,0,0,0" Content="S" Command="{Binding SettingsCommand}" />
-        <Button Grid.Column="1" Width="70" Height="70" Margin="10,0,0,0" Content="B" Command="{Binding BackCommand}" />
+        <Button Width="70" Height="70" Margin="10,0,0,0" Classes="icon-yellow" Foreground="Gray" Command="{Binding SettingsCommand}">
+          <Viewbox Width="30" Height="30">
+            <Path Fill="Gray" Data="M12 8.9A3.1 3.1 0 1 0 12 15.1A3.1 3.1 0 1 0 12 8.9M19.4 13A7.5 7.5 0 0 0 19.5 12A7.5 7.5 0 0 0 19.4 11L21.5 9.4L19.5 5.9L17 6.9A7.2 7.2 0 0 0 15.3 6L14.9 3.3H9.1L8.7 6A7.2 7.2 0 0 0 7 6.9L4.5 5.9L2.5 9.4L4.6 11A7.5 7.5 0 0 0 4.5 12A7.5 7.5 0 0 0 4.6 13L2.5 14.6L4.5 18.1L7 17.1A7.2 7.2 0 0 0 8.7 18L9.1 20.7H14.9L15.3 18A7.2 7.2 0 0 0 17 17.1L19.5 18.1L21.5 14.6L19.4 13Z" />
+          </Viewbox>
+        </Button>
+        <Button Grid.Column="1" Width="70" Height="70" Margin="10,0,0,0" Classes="icon-yellow" Foreground="Gray" Command="{Binding BackCommand}">
+          <Viewbox Width="26" Height="26">
+            <Path Fill="Gray" Data="M14.7 5.3L8 12L14.7 18.7L16.1 17.3L10.8 12L16.1 6.7Z" />
+          </Viewbox>
+        </Button>
         <TextBlock Grid.Column="2"
                    Text="{Binding TopPanelTitle}"
                    FontSize="30"
                    VerticalAlignment="Center"
                    HorizontalAlignment="Center"
                    Foreground="White" />
-        <Button Grid.Column="3" Width="70" Height="70" Margin="10,0,0,0" Content="F" Command="{Binding FullscreenCommand}" />
-        <Button Grid.Column="4" Width="70" Height="70" Margin="10,0,0,0" Content="X" Command="{Binding CloseAppCommand}" />
+        <Button Grid.Column="3" Width="70" Height="70" Margin="10,0,0,0" Classes="icon-yellow" Foreground="Gray" Command="{Binding FullscreenCommand}">
+          <Viewbox Width="24" Height="24">
+            <Path Fill="Gray" Data="M4 9V4H9V6H6V9H4M15 4H20V9H18V6H15V4M20 15V20H15V18H18V15H20M9 20H4V15H6V18H9V20Z" />
+          </Viewbox>
+        </Button>
+        <Button Grid.Column="4" Width="70" Height="70" Margin="10,0,0,0" Classes="icon-red" Foreground="White" Command="{Binding CloseAppCommand}">
+          <Viewbox Width="24" Height="24">
+            <Path Stroke="White" StrokeThickness="2.5" Data="M5,5 L19,19 M19,5 L5,19" />
+          </Viewbox>
+        </Button>
       </Grid>
     </Grid>
 
diff --git a/TV Player Avalonia/Views/PlayerView.axaml b/TV Player Avalonia/Views/PlayerView.axaml
index 1950ba4..3f4986e 100644
--- a/TV Player Avalonia/Views/PlayerView.axaml	
+++ b/TV Player Avalonia/Views/PlayerView.axaml	
@@ -19,10 +19,22 @@
           <ColumnDefinition Width="80" />
           <ColumnDefinition Width="80" />
         </Grid.ColumnDefinitions>
-        <Button Width="70" Height="50" Margin="10,0,0,0" Content="B" Command="{Binding BackCommand}" />
+        <Button Width="70" Height="50" Margin="10,0,0,0" Classes="icon-yellow" Command="{Binding BackCommand}">
+          <Viewbox Width="22" Height="22">
+            <Path Fill="Gray" Data="M14.7 5.3L8 12L14.7 18.7L16.1 17.3L10.8 12L16.1 6.7Z" />
+          </Viewbox>
+        </Button>
         <TextBlock Grid.Column="1" FontSize="20" Foreground="White" Text="{Binding TopPanelTitle}" HorizontalAlignment="Center" VerticalAlignment="Center" />
-        <Button Grid.Column="2" Width="50" Height="70" Margin="10,0,0,0" Content="F" Command="{Binding FullscreenCommand}" />
-        <Button Grid.Column="3" Width="70" Height="70" Margin="10,0,0,0" Content="X" Command="{Binding CloseAppCommand}" />
+        <Button Grid.Column="2" Width="50" Height="70" Margin="10,0,0,0" Classes="icon-yellow" Command="{Binding FullscreenCommand}">
+          <Viewbox Width="22" Height="22">
+            <Path Fill="Gray" Data="M4 9V4H9V6H6V9H4M15 4H20V9H18V6H15V4M20 15V20H15V18H18V15H20M9 20H4V15H6V18H9V20Z" />
+          </Viewbox>
+        </Button>
+        <Button Grid.Column="3" Width="70" Height="70" Margin="10,0,0,0" Classes="icon-red" Command="{Binding CloseAppCommand}">
+          <Viewbox Width="22" Height="22">
+            <Path Stroke="White" StrokeThickness="2.5" Data="M5,5 L19,19 M19,5 L5,19" />
+          </Viewbox>
+        </Button>
       </Grid>
 
       <Border Grid.Row="1"
@@ -49,13 +61,21 @@
         <Grid.ColumnDefinitions>
           <ColumnDefinition Width="180" />
           <ColumnDefinition Width="*" />
-          <ColumnDefinition Width="100" />
+          <ColumnDefinition Width="70" />
         </Grid.ColumnDefinitions>
 
         <StackPanel Orientation="Horizontal">
-          <Button Width="50" Height="70" Margin="10,0,10,0" Content="-" Command="{Binding PreviousCommand}" />
+          <Button Width="50" Height="70" Margin="10,0,10,0" Classes="icon-yellow" Command="{Binding PreviousCommand}">
+            <Viewbox Width="18" Height="18">
+              <Path Fill="Gray" Data="M8 12L14 6V18Z" />
+            </Viewbox>
+          </Button>
           <TextBlock FontSize="15" Foreground="White" Text="Ch" HorizontalAlignment="Center" VerticalAlignment="Center" />
-          <Button Width="50" Height="70" Margin="10,0,10,0" Content="+" Command="{Binding NextCommand}" />
+          <Button Width="50" Height="70" Margin="10,0,10,0" Classes="icon-yellow" Command="{Binding NextCommand}">
+            <Viewbox Width="18" Height="18">
+              <Path Fill="Gray" Data="M16 12L10 18V6Z" />
+            </Viewbox>
+          </Button>
         </StackPanel>
 
         <Button Grid.Column="1"
@@ -72,11 +92,6 @@
             </StackPanel>
           </StackPanel>
         </Button>
-
-        <StackPanel Grid.Column="2" Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
-          <Button Width="70" Height="50" Margin="8,0,0,0" Content="G" Command="{Binding ShowProgramListCommand}" />
-          <Button Width="70" Height="50" Margin="8,0,0,0" Content="Open" Command="{Binding OpenStreamCommand}" />
-        </StackPanel>
       </Grid>
     </Grid>
 
diff --git a/TV Player Avalonia/Views/PlaylistsGroupView.axaml b/TV Player Avalonia/Views/PlaylistsGroupView.axaml
index 5b0b287..16ef0d6 100644
--- a/TV Player Avalonia/Views/PlaylistsGroupView.axaml	
+++ b/TV Player Avalonia/Views/PlaylistsGroupView.axaml	
@@ -15,9 +15,10 @@
       </ListBox.ItemsPanel>
       <ListBox.ItemTemplate>
         <DataTemplate>
-          <Button Width="170"
-                  Height="130"
-                  Margin="8"
+          <Button Width="150"
+                  Height="70"
+                  Margin="8,6"
+              Classes="card"
                   Background="#B0000000"
                   BorderBrush="Yellow"
                   BorderThickness="2"
@@ -25,8 +26,7 @@
                   CommandParameter="{Binding}">
             <TextBlock Text="{Binding Name}"
                        Foreground="White"
-                       FontSize="20"
-                       FontWeight="Bold"
+                       FontSize="15"
                        TextWrapping="Wrap"
                        HorizontalAlignment="Center"
                        VerticalAlignment="Center"
diff --git a/TV Player Avalonia/Views/ProgramsGroupView.axaml b/TV Player Avalonia/Views/ProgramsGroupView.axaml
index 4400594..3fe4e4d 100644
--- a/TV Player Avalonia/Views/ProgramsGroupView.axaml	
+++ b/TV Player Avalonia/Views/ProgramsGroupView.axaml	
@@ -14,27 +14,31 @@
       </ListBox.ItemsPanel>
       <ListBox.ItemTemplate>
         <DataTemplate>
-          <Button Width="170"
-                  Height="130"
-                  Margin="8"
+          <Button Width="150"
+                  Height="70"
+                  Margin="8,6"
+              Classes="card"
                   Background="#B0000000"
                   BorderBrush="Yellow"
                   BorderThickness="2"
                   Command="{Binding DataContext.SelectGroupCommand, RelativeSource={RelativeSource AncestorType=UserControl}}"
                   CommandParameter="{Binding}">
-            <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center" Spacing="6">
+            <Grid RowDefinitions="*,Auto" VerticalAlignment="Center" HorizontalAlignment="Stretch">
               <TextBlock Text="{Binding Name}"
                          Foreground="White"
-                         FontSize="20"
-                         FontWeight="Bold"
+                         FontSize="15"
                          TextWrapping="Wrap"
                          HorizontalAlignment="Center"
-                         TextAlignment="Center" />
+                         VerticalAlignment="Center"
+                         TextAlignment="Center"
+                         Margin="4,0" />
               <TextBlock Text="{Binding Count}"
+                         Grid.Row="1"
                          Foreground="White"
-                         FontSize="16"
-                         HorizontalAlignment="Center" />
-            </StackPanel>
+                         FontSize="10"
+                         HorizontalAlignment="Center"
+                         Margin="0,0,0,2" />
+            </Grid>
           </Button>
         </DataTemplate>
       </ListBox.ItemTemplate>
diff --git a/TV Player Avalonia/Views/ProgramsListView.axaml b/TV Player Avalonia/Views/ProgramsListView.axaml
index 1cdb089..66ae9b7 100644
--- a/TV Player Avalonia/Views/ProgramsListView.axaml	
+++ b/TV Player Avalonia/Views/ProgramsListView.axaml	
@@ -19,6 +19,7 @@
           <Button Width="106"
                   Height="145"
                   Margin="3"
+              Classes="card"
                   Background="#B0000000"
                   BorderBrush="Yellow"
                   BorderThickness="2"
diff --git a/TV Player Avalonia/Views/SettingsView.axaml b/TV Player Avalonia/Views/SettingsView.axaml
index ee16885..9228c41 100644
--- a/TV Player Avalonia/Views/SettingsView.axaml	
+++ b/TV Player Avalonia/Views/SettingsView.axaml	
@@ -15,7 +15,11 @@
         <TextBox Text="{Binding PlaylistURL}" />
         <TextBlock Foreground="White" FontSize="22" FontWeight="Bold" Text="Playlist Name" />
         <TextBox Text="{Binding PlaylistName}" />
-        <Button Content="Add" Width="70" Height="70" HorizontalAlignment="Center" Command="{Binding AddPlaylistCommand}" />
+        <Button Width="70" Height="70" HorizontalAlignment="Center" Classes="icon-green" Command="{Binding AddPlaylistCommand}">
+          <Viewbox Width="24" Height="24">
+            <Path Fill="White" Data="M11 5H13V11H19V13H13V19H11V13H5V11H11V5Z" />
+          </Viewbox>
+        </Button>
       </StackPanel>
 
       <ListBox Height="250"
@@ -31,9 +35,13 @@
                   <Button Grid.Column="2"
                           Width="70"
                           Height="70"
-                          Content="-"
+                      Classes="icon-red"
                           CommandParameter="{Binding}"
-                          Command="{Binding DataContext.PlaylistDeleteCommand, RelativeSource={RelativeSource AncestorType=UserControl}}" />
+                          Command="{Binding DataContext.PlaylistDeleteCommand, RelativeSource={RelativeSource AncestorType=UserControl}}">
+                    <Viewbox Width="24" Height="24">
+                      <Path Fill="White" Data="M5 11H19V13H5Z" />
+                    </Viewbox>
+                  </Button>
                 </Grid>
               </DataTemplate>
         </ListBox.ItemTemplate>
@@ -43,8 +51,16 @@
       <CheckBox Margin="10" Foreground="White" FontSize="25" IsChecked="{Binding StartLastScreen}" Content="Remember last" />
 
       <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
-        <Button Width="70" Height="70" Margin="10,0,50,0" Content="B" Command="{Binding BackCommand}" />
-        <Button Width="70" Height="70" Content="OK" Command="{Binding SaveCommand}" />
+        <Button Width="70" Height="70" Margin="10,0,50,0" Classes="icon-yellow" Command="{Binding BackCommand}">
+          <Viewbox Width="24" Height="24">
+            <Path Fill="Gray" Data="M14.7 5.3L8 12L14.7 18.7L16.1 17.3L10.8 12L16.1 6.7Z" />
+          </Viewbox>
+        </Button>
+        <Button Width="70" Height="70" Classes="icon-lightgreen" Command="{Binding SaveCommand}">
+          <Viewbox Width="24" Height="24">
+            <Path Fill="Gray" Data="M9 16.2L4.8 12L3.4 13.4L9 19L21 7L19.6 5.6Z" />
+          </Viewbox>
+        </Button>
       </StackPanel>
     </StackPanel>
   </Viewbox>