From 6f22b5ba1c237139ecd7990acfecbd4563b87dd0 Mon Sep 17 00:00:00 2001
From: Guerra24 <lili@guerra24.net>
Date: Sun, 3 Apr 2022 18:34:33 -0600
Subject: [PATCH] Avalonia: re template some controls and fix visual issues

---
 .../LRReader.Avalonia.Desktop.csproj          |   1 +
 .../PublishProfiles/linux-x64.pubxml          |   8 +-
 .../PublishProfiles/macos-x64.pubxml          |   8 +-
 .../Properties/PublishProfiles/win-x64.pubxml |  10 +-
 LRReader.Avalonia/LRReader.Avalonia.csproj    |   2 +-
 .../Resources/AvaloniaTemplates.axaml         | 321 +++++++++++++++++-
 .../Resources/ThemeDictionary.axaml           |   2 +-
 .../Views/Main/HostTabPage.axaml              |   7 +-
 8 files changed, 340 insertions(+), 19 deletions(-)

diff --git a/LRReader.Avalonia.Desktop/LRReader.Avalonia.Desktop.csproj b/LRReader.Avalonia.Desktop/LRReader.Avalonia.Desktop.csproj
index 66f71f7a..b6bff62b 100644
--- a/LRReader.Avalonia.Desktop/LRReader.Avalonia.Desktop.csproj
+++ b/LRReader.Avalonia.Desktop/LRReader.Avalonia.Desktop.csproj
@@ -5,6 +5,7 @@
     <Nullable>enable</Nullable>
     <ApplicationIcon>logo.ico</ApplicationIcon>
     <BuiltInComInteropSupport>true</BuiltInComInteropSupport>
+    <TrimMode>copyused</TrimMode>
   </PropertyGroup>
   <ItemGroup>
     <Content Include="logo.ico" />
diff --git a/LRReader.Avalonia.Desktop/Properties/PublishProfiles/linux-x64.pubxml b/LRReader.Avalonia.Desktop/Properties/PublishProfiles/linux-x64.pubxml
index f6eec373..f4405d05 100644
--- a/LRReader.Avalonia.Desktop/Properties/PublishProfiles/linux-x64.pubxml
+++ b/LRReader.Avalonia.Desktop/Properties/PublishProfiles/linux-x64.pubxml
@@ -1,8 +1,8 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!--
-https://go.microsoft.com/fwlink/?LinkID=208121. 
+https://go.microsoft.com/fwlink/?LinkID=208121.
 -->
-<Project ToolsVersion="4.0" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
+<Project>
   <PropertyGroup>
     <Configuration>Release</Configuration>
     <Platform>Any CPU</Platform>
@@ -11,7 +11,7 @@ https://go.microsoft.com/fwlink/?LinkID=208121.
     <TargetFramework>net6.0</TargetFramework>
     <RuntimeIdentifier>linux-x64</RuntimeIdentifier>
     <SelfContained>true</SelfContained>
-    <PublishSingleFile>True</PublishSingleFile>
-    <PublishTrimmed>False</PublishTrimmed>
+    <PublishSingleFile>true</PublishSingleFile>
+    <PublishTrimmed>true</PublishTrimmed>
   </PropertyGroup>
 </Project>
\ No newline at end of file
diff --git a/LRReader.Avalonia.Desktop/Properties/PublishProfiles/macos-x64.pubxml b/LRReader.Avalonia.Desktop/Properties/PublishProfiles/macos-x64.pubxml
index 15aaa02d..5fba4058 100644
--- a/LRReader.Avalonia.Desktop/Properties/PublishProfiles/macos-x64.pubxml
+++ b/LRReader.Avalonia.Desktop/Properties/PublishProfiles/macos-x64.pubxml
@@ -1,8 +1,8 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!--
-https://go.microsoft.com/fwlink/?LinkID=208121. 
+https://go.microsoft.com/fwlink/?LinkID=208121.
 -->
-<Project ToolsVersion="4.0" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
+<Project>
   <PropertyGroup>
     <Configuration>Release</Configuration>
     <Platform>Any CPU</Platform>
@@ -11,7 +11,7 @@ https://go.microsoft.com/fwlink/?LinkID=208121.
     <TargetFramework>net6.0</TargetFramework>
     <RuntimeIdentifier>osx-x64</RuntimeIdentifier>
     <SelfContained>true</SelfContained>
-    <PublishSingleFile>True</PublishSingleFile>
-    <PublishTrimmed>False</PublishTrimmed>
+    <PublishSingleFile>true</PublishSingleFile>
+    <PublishTrimmed>true</PublishTrimmed>
   </PropertyGroup>
 </Project>
\ No newline at end of file
diff --git a/LRReader.Avalonia.Desktop/Properties/PublishProfiles/win-x64.pubxml b/LRReader.Avalonia.Desktop/Properties/PublishProfiles/win-x64.pubxml
index 02b78372..c57fbc4a 100644
--- a/LRReader.Avalonia.Desktop/Properties/PublishProfiles/win-x64.pubxml
+++ b/LRReader.Avalonia.Desktop/Properties/PublishProfiles/win-x64.pubxml
@@ -1,8 +1,8 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!--
-https://go.microsoft.com/fwlink/?LinkID=208121. 
+https://go.microsoft.com/fwlink/?LinkID=208121.
 -->
-<Project ToolsVersion="4.0" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
+<Project>
   <PropertyGroup>
     <Configuration>Release</Configuration>
     <Platform>Any CPU</Platform>
@@ -11,8 +11,8 @@ https://go.microsoft.com/fwlink/?LinkID=208121.
     <TargetFramework>net6.0</TargetFramework>
     <RuntimeIdentifier>win-x64</RuntimeIdentifier>
     <SelfContained>true</SelfContained>
-    <PublishSingleFile>True</PublishSingleFile>
-    <PublishReadyToRun>False</PublishReadyToRun>
-    <PublishTrimmed>False</PublishTrimmed>
+    <PublishSingleFile>true</PublishSingleFile>
+    <PublishReadyToRun>false</PublishReadyToRun>
+    <PublishTrimmed>true</PublishTrimmed>
   </PropertyGroup>
 </Project>
\ No newline at end of file
diff --git a/LRReader.Avalonia/LRReader.Avalonia.csproj b/LRReader.Avalonia/LRReader.Avalonia.csproj
index 9e92017e..07b6c6aa 100644
--- a/LRReader.Avalonia/LRReader.Avalonia.csproj
+++ b/LRReader.Avalonia/LRReader.Avalonia.csproj
@@ -8,7 +8,7 @@
     <PackageReference Include="Aura.UI.FluentTheme" Version="0.1.4.2" />
     <PackageReference Include="Avalonia" Version="0.10.13" />
     <PackageReference Include="Avalonia.Desktop" Version="0.10.13" />
-    <PackageReference Include="Avalonia.Diagnostics" Version="0.10.13" />
+    <PackageReference Condition="'$(Configuration)' == 'Debug'" Include="Avalonia.Diagnostics" Version="0.10.13" />
     <PackageReference Include="FluentAvaloniaUI" Version="1.3.2" />
     <PackageReference Include="XamlNameReferenceGenerator" Version="1.3.4" />
   </ItemGroup>
diff --git a/LRReader.Avalonia/Resources/AvaloniaTemplates.axaml b/LRReader.Avalonia/Resources/AvaloniaTemplates.axaml
index 0f5f8d62..0e1c59d2 100644
--- a/LRReader.Avalonia/Resources/AvaloniaTemplates.axaml
+++ b/LRReader.Avalonia/Resources/AvaloniaTemplates.axaml
@@ -1,5 +1,9 @@
 <Styles xmlns="https://github.com/avaloniaui"
-        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+        xmlns:ui="using:FluentAvalonia.UI.Controls"
+        xmlns:media="using:FluentAvalonia.UI.Media"
+        xmlns:aura="using:Aura.UI.Controls"
+        xmlns:sty="using:FluentAvalonia.Styling">
 
   <Style Selector="Window">
     <Setter Property="Background" Value="{DynamicResource SolidBackgroundFillColorBase}"/>
@@ -11,5 +15,320 @@
     <Setter Property="BorderThickness" Value="1" />
     <Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
   </Style>
+  <Design.PreviewWith>
+    <!--
+    <Border Padding="50">
+      <StackPanel Spacing="5">
+        <Button Content="Button" />
+        <TextBox Watermark="TextBox" />
+      </StackPanel>
+    </Border>
+    -->
+    <aura:AuraTabView Width="400" Height="400">
+      <aura:AuraTabItem Header="Hello"
+                   Height="50"
+                   IsClosable="True"
+                   Icon="{DynamicResource FluentIconsFilled.tab_desktop_new_page_filled}"/>
+      <aura:AuraTabItem Header="Hello"
+                   Height="50"
+                   IsClosable="True"
+                   Icon="{DynamicResource FluentIconsFilled.tab_desktop_new_page_filled}"/>
+      <aura:AuraTabItem Header="Hello"
+                   Height="50"
+                   IsClosable="True"
+                   Icon="{DynamicResource FluentIconsFilled.tab_desktop_new_page_filled}"/>
+    </aura:AuraTabView>
+  </Design.PreviewWith>
+
+  <!-- Match UWP templates -->
+  <Style Selector="AuraTabItem">
+    <Setter Property="Icon" Value="{DynamicResource FluentIconsFilled.tab_desktop_new_page_filled}"/>
+    <Setter Property="HorizontalContentAlignment" Value="Left" />
+    <Setter Property="FontSize" Value="12" />
+    <Setter Property="Padding" Value="5 0" />
+    <Setter Property="VerticalContentAlignment" Value="Center" />
+    <Setter Property="Foreground" Value="{DynamicResource TextFillColorSecondaryBrush}" />
+    <Setter Property="ZIndex" Value="0"/>
+    <Setter Property="BorderBrush" Value="{DynamicResource ControlElevationBorderBrush}" />
+    <Setter Property="Transitions">
+      <Transitions>
+        <BrushTransition Duration="00:00:00.083" Property="Background" />
+      </Transitions>
+    </Setter>
+  </Style>
+
+  <Style Selector="AuraTabItem[TabStripPlacement=Top]">
+    <Setter Property="CornerRadius" Value="{DynamicResource OverlayCornerRadius}" />
+    <Setter Property="Template">
+      <ControlTemplate>
+        <Decorator Padding="2">
+          <Border Name="PART_Container"
+                  BorderBrush="{TemplateBinding BorderBrush}"
+                  BorderThickness="1"
+                  CornerRadius="{TemplateBinding CornerRadius}">
+            <Border Background="{TemplateBinding Background}" CornerRadius="{TemplateBinding CornerRadius}">
+              <Grid>
+                <Grid Grid.Column="0" ColumnDefinitions="Auto,*,*" Margin="{TemplateBinding Padding}">
+
+                  <ContentPresenter Grid.Column="1"
+                                    Name="PART_ContentPresenter"
+                                    ContentTemplate="{TemplateBinding HeaderTemplate}"
+                                    Content="{TemplateBinding Header}"
+                                    HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                                    VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                                    Margin="{TemplateBinding Margin}"
+                                    TextBlock.Foreground="{TemplateBinding Foreground}" />
+                  <Button Grid.Column="2"
+                          Name="PART_CloseButton"
+                          Width="16"
+                          Height="16"
+                          Background="Transparent"
+                          Margin="4,0,0,0"
+                          Padding="3"
+                          BorderThickness="0"
+                          VerticalAlignment="Center"
+                          VerticalContentAlignment="Center"
+                          Foreground="{TemplateBinding Foreground}">
+                    <Image Source="{DynamicResource Ionicons.CloseMD}" />
+                  </Button>
+                </Grid>
+              </Grid>
+            </Border>
+          </Border>
+        </Decorator>
+      </ControlTemplate>
+    </Setter>
+  </Style>
+  <Style Selector="AuraTabItem:selected /template/ Border#PART_Container">
+    <Setter Property="BoxShadow" Value="{BoxShadow BlurRadius=0, ShadowColor=Transparent}" />
+  </Style>
+
+  <Style Selector="AuraTabItem:pointerover">
+    <Setter Property="Background" Value="{DynamicResource ControlAltFillColorTertiary}" />
+    <Setter Property="BorderBrush" Value="{DynamicResource ControlElevationBorderBrush}" />
+    <Setter Property="Foreground" Value="{DynamicResource TextFillColorSecondaryBrush}" />
+  </Style>
+  <Style Selector="AuraTabItem:pressed">
+    <Setter Property="Background" Value="{DynamicResource ControlAltFillColorQuarternary}" />
+    <Setter Property="BorderBrush" Value="{DynamicResource ControlStrokeColorDefaultBrush}" />
+  </Style>
+  <Style Selector="AuraTabItem[IsSelected=True]">
+    <Setter Property="Background" Value="{DynamicResource ControlFillColorDefaultBrush}" />
+    <Setter Property="BorderBrush" Value="{DynamicResource ControlElevationBorderBrush}" />
+    <Setter Property="Foreground" Value="{DynamicResource TextFillColorPrimaryBrush}" />
+  </Style>
+  <Style Selector="AuraTabItem[IsSelected=True]:pointerover">
+    <Setter Property="Background" Value="{DynamicResource ControlFillColorSecondaryBrush}" />
+    <Setter Property="BorderBrush" Value="{DynamicResource ControlElevationBorderBrush}" />
+    <Setter Property="Foreground" Value="{DynamicResource TextFillColorSecondaryBrush}" />
+  </Style>
+  <Style Selector="AuraTabItem[IsSelected=True]:pressed">
+    <Setter Property="Background" Value="{DynamicResource ControlFillColorTertiaryBrush}" />
+    <Setter Property="BorderBrush" Value="{DynamicResource ControlStrokeColorDefaultBrush}" />
+    <Setter Property="Foreground" Value="{DynamicResource TextFillColorTertiaryBrush}" />
+  </Style>
+
+  <Style Selector="AuraTabView[TabStripPlacement=Top]">
+    <Setter Property="ItemsPanel">
+      <ItemsPanelTemplate>
+        <!-- <StackPanel Orientation="Horizontal"></StackPanel> -->
+        <UniformGrid Rows="1"></UniformGrid>
+      </ItemsPanelTemplate>
+    </Setter>
+    <Setter Property="ItemsMargin" Value="0 5 0 0"/>
+    <Setter Property="Template">
+      <ControlTemplate TargetType="AuraTabView">
+        <Border Margin="{TemplateBinding Margin}"
+              BorderBrush="{TemplateBinding BorderBrush}"
+              BorderThickness="{TemplateBinding BorderThickness}"
+              Background="{TemplateBinding Background}"
+              HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
+              VerticalAlignment="{TemplateBinding VerticalAlignment}">
+          <Grid ColumnDefinitions="*">
+            <Grid.RowDefinitions>
+              <RowDefinition Height="auto"></RowDefinition>
+              <RowDefinition Height="*"></RowDefinition>
+            </Grid.RowDefinitions>
+            <!--Item Presenter-->
+            <Grid>
+              <Grid Grid.Row="0"
+                    Background="{TemplateBinding SecondaryBackground}"
+                    Name="PART_DockContainer"
+                    Width="{TemplateBinding Width}"
+                    ColumnDefinitions="auto,auto,*,auto">
+                <!--Header-->
+                <ContentPresenter Grid.Column="0"
+                                  Content="{TemplateBinding Header}"
+                                  ContentTemplate="{TemplateBinding HeaderTemplate}"
+                                  TextBlock.FontSize="15"
+                                  TextBlock.Foreground="{DynamicResource ThemeForegroundBrush}"
+                                  VerticalContentAlignment="Center"
+                                  Margin="5, 0"
+                                  DockPanel.Dock="Left"></ContentPresenter>
+                <!--Items and Adder Button-->
+                <Grid Margin="{TemplateBinding ItemsMargin}" Grid.Column="1">
+                  <Grid.ColumnDefinitions>
+                    <ColumnDefinition Width="*"/>
+                    <ColumnDefinition Width="auto"/>
+                  </Grid.ColumnDefinitions>
+                  <ItemsPresenter Grid.Column="0"
+                                  Name="PART_ItemsPresenter"
+                                  Items="{TemplateBinding Items}"
+                                  ItemsPanel="{TemplateBinding ItemsPanel}"
+                                  ItemTemplate="{TemplateBinding ItemTemplate}"
+                                  HorizontalAlignment="Left"
+                                  MaxWidth="{TemplateBinding MaxWidthOfItemsPresenter}">
+                    <ItemsPresenter.Transitions>
+                      <Transitions>
+                        <DoubleTransition Property="Width" Duration="0:0:0.3"
+                                          Easing="CubicEaseIn"/>
+                      </Transitions>
+                    </ItemsPresenter.Transitions>
+                  </ItemsPresenter>
+                  <Button Grid.Column="1"
+                                  Name="PART_AdderButton" Padding="9" Background="Transparent"
+                                  IsVisible="{TemplateBinding AdderButtonIsVisible}" Width="35" ZIndex="-1">
+                    <Image Source="{DynamicResource FluentIconsFilled.add_filled}"/>
+                  </Button>
+                </Grid>
+                <!--secondary background-->
+                <Grid Grid.Column="2"
+                      Name="PART_InternalGrid"
+                      DockPanel.Dock="Right">
+                  <Grid.Transitions>
+                    <Transitions>
+                      <DoubleTransition Property="Width" Duration="0:0:0.3"
+                                        Easing="CubicEaseIn"/>
+                    </Transitions>
+                  </Grid.Transitions>
+                  <Border Name="PART_InternalBorder">
+                    <Border.Transitions>
+                      <Transitions>
+                        <DoubleTransition Property="Width" Duration="0:0:0.3"
+                                      Easing="CubicEaseIn"/>
+                      </Transitions>
+                    </Border.Transitions>
+                  </Border>
+                </Grid>
+                <!--Footer-->
+                <ContentPresenter Grid.Column="3"
+                                  Content="{TemplateBinding Footer}"
+                                  ContentTemplate="{TemplateBinding FooterTemplate}"
+                                  TextBlock.FontSize="15"
+                                  TextBlock.Foreground="{DynamicResource ThemeForegroundLowBrush}"
+                                  VerticalContentAlignment="Center"
+                                  Margin="5,0"
+                                  DockPanel.Dock="Right" HorizontalAlignment="Right"></ContentPresenter>
+              </Grid>
+            </Grid>
+
+            <!--Content Host-->
+            <Border Grid.Row="1"
+                    BorderBrush="Transparent" Margin="0">
+              <Grid
+                Name="PART_GridHost" Width="{TemplateBinding Width}">
+                <ContentPresenter Name="PART_FallBackContent"
+                                  Content="{TemplateBinding FallBackContent}"/>
+                <ContentPresenter Name="PART_SelectedContentHost"
+                          Background="{Binding $parent[AuraTabView].SelectedItem.Background}"
+                          Padding="{TemplateBinding Padding}"
+                          Height="{Binding #PART_GridHost.Height}"
+                          HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                          VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                          Content="{TemplateBinding SelectedContent}"
+                          ContentTemplate="{TemplateBinding SelectedContentTemplate}" />
+              </Grid>
+            </Border>
+          </Grid>
+        </Border>
+      </ControlTemplate>
+    </Setter>
+  </Style>
+
+  <!-- We need to re template some controls due to border coloring issues -->
+  <Style Selector="Button, ui|Button">
+    <Setter Property="Template">
+      <ControlTemplate>
+        <Panel>
+          <Border Name="BorderElement"
+                  BorderBrush="{TemplateBinding BorderBrush}"
+                  BorderThickness="{TemplateBinding BorderThickness}"
+                  CornerRadius="{TemplateBinding CornerRadius}">
+            <ContentPresenter Name="PART_ContentPresenter"
+                              Background="{TemplateBinding Background}"
+                              Content="{TemplateBinding Content}"
+                              ContentTemplate="{TemplateBinding ContentTemplate}"
+                              CornerRadius="{TemplateBinding CornerRadius}"
+                              Padding="{TemplateBinding Padding}"
+                              HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                              VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" />
+          </Border>
+        </Panel>
+      </ControlTemplate>
+    </Setter>
+  </Style>
+
+  <Style Selector="TextBox">
+    <Setter Property="Template">
+      <ControlTemplate>
+        <DataValidationErrors>
+          <Panel>
+            <!-- This is flipped (scaleY(-1)) for the elevation brush effect
+                        -->
+            <Border
+              Name="PART_BorderElement"
+              BorderBrush="{TemplateBinding BorderBrush}"
+              BorderThickness="{TemplateBinding BorderThickness}"
+              MinWidth="{TemplateBinding MinWidth}"
+              MinHeight="{TemplateBinding MinHeight}"
+              RenderTransform="scaleY(-1)"
+              CornerRadius="{TemplateBinding CornerRadius}" />
+
+            <Border Background="{TemplateBinding Background}" CornerRadius="{TemplateBinding CornerRadius}"
+              Margin="{TemplateBinding BorderThickness}">
+              <Grid ColumnDefinitions="Auto,*,Auto" >
+                <ContentPresenter Grid.Column="0" Grid.ColumnSpan="1" Content="{TemplateBinding InnerLeftContent}"/>
+                <DockPanel x:Name="PART_InnerDockPanel" Grid.Column="1" Grid.ColumnSpan="1" Margin="{TemplateBinding Padding}">
+                  <TextBlock Name="PART_FloatingWatermark"
+                             Foreground="{DynamicResource SystemAccentColor}"
+                             FontSize="{TemplateBinding FontSize}"
+                             Text="{TemplateBinding Watermark}"
+                             DockPanel.Dock="Top" />
+                  <ScrollViewer HorizontalScrollBarVisibility="{TemplateBinding (ScrollViewer.HorizontalScrollBarVisibility)}"
+                                VerticalScrollBarVisibility="{TemplateBinding (ScrollViewer.VerticalScrollBarVisibility)}">
+                    <Panel>
+                      <TextBlock Name="PART_Watermark"
+                              Text="{TemplateBinding Watermark}"
+                              TextAlignment="{TemplateBinding TextAlignment}"
+                              TextWrapping="{TemplateBinding TextWrapping}"
+                              IsVisible="{TemplateBinding Text, Converter={x:Static StringConverters.IsNullOrEmpty}}"
+                              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
+                              IsHitTestVisible="False"/>
+                      <TextPresenter Name="PART_TextPresenter"
+                                    Text="{TemplateBinding Text, Mode=TwoWay}"
+                                    CaretIndex="{TemplateBinding CaretIndex}"
+                                    SelectionStart="{TemplateBinding SelectionStart}"
+                                    SelectionEnd="{TemplateBinding SelectionEnd}"
+                                    TextAlignment="{TemplateBinding TextAlignment}"
+                                    TextWrapping="{TemplateBinding TextWrapping}"
+                                    PasswordChar="{TemplateBinding PasswordChar}"
+                                    RevealPassword="{TemplateBinding RevealPassword}"
+                                    SelectionBrush="{TemplateBinding SelectionBrush}"
+                                    SelectionForegroundBrush="{TemplateBinding SelectionForegroundBrush}"
+                                    CaretBrush="{TemplateBinding CaretBrush}"
+                                    HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+                                    VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
+                    </Panel>
+                  </ScrollViewer>
+                </DockPanel>
+                <ContentPresenter Grid.Column="2" Grid.ColumnSpan="1" Content="{TemplateBinding InnerRightContent}"/>
+              </Grid>
+            </Border>
+          </Panel>
+        </DataValidationErrors>
+      </ControlTemplate>
+    </Setter>
+  </Style>
 
 </Styles>
diff --git a/LRReader.Avalonia/Resources/ThemeDictionary.axaml b/LRReader.Avalonia/Resources/ThemeDictionary.axaml
index 56b3f5e7..57976537 100644
--- a/LRReader.Avalonia/Resources/ThemeDictionary.axaml
+++ b/LRReader.Avalonia/Resources/ThemeDictionary.axaml
@@ -1,5 +1,5 @@
 <Style xmlns="https://github.com/avaloniaui"
-                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
   <Style.Resources>
 
   </Style.Resources>
diff --git a/LRReader.Avalonia/Views/Main/HostTabPage.axaml b/LRReader.Avalonia/Views/Main/HostTabPage.axaml
index 6e656d8c..296ff6e8 100644
--- a/LRReader.Avalonia/Views/Main/HostTabPage.axaml
+++ b/LRReader.Avalonia/Views/Main/HostTabPage.axaml
@@ -37,13 +37,14 @@
               <Setter Property="Width" Value="34"/>
               <Setter Property="Height" Value="32" />
               <Setter Property="Padding" Value="0" />
+              <Setter Property="CornerRadius" Value="{DynamicResource OverlayCornerRadius}" />
             </Style>
             <Style Selector="Viewbox">
               <Setter Property="MaxWidth" Value="18" />
               <Setter Property="MaxHeight" Value="18" />
             </Style>
           </Grid.Styles>
-          <StackPanel Orientation="Horizontal">
+          <StackPanel Orientation="Horizontal" Spacing="2">
             <Button ToolTip.Tip="{loc:LocalizedString Key=/Pages/HostTabPage/Bookmarks/ToolTipService/ToolTip}" Click="Bookmarks_Click">
               <Viewbox>
                 <ui:FontIcon FontFamily="{StaticResource SymbolThemeFontFamily}" Glyph="&#xE728;" />
@@ -71,8 +72,8 @@
               Grid.Column="2"
               Width="1"
               Margin="3,8,3,8"
-              Background="{DynamicResource TextControlForeground}" />
-          <StackPanel Grid.Column="3"
+              Background="{DynamicResource DividerStrokeColorDefaultBrush}" />
+          <StackPanel Grid.Column="3" Spacing="2"
                       Orientation="Horizontal">
             <Button x:Name="EnterFullScreen" ToolTip.Tip="{loc:LocalizedString Key=/Pages/HostTabPage/EnterFullScreen/ToolTipService/ToolTip}" Click="EnterFullScreen_Click" IsVisible="{Binding Windowed, Mode=OneWay}">
               <Viewbox>