From d2d38c3a460af20441eb8d222c149691f81e0dfe Mon Sep 17 00:00:00 2001
From: Simon Davies <simon.davies@nexusmods.com>
Date: Mon, 30 Sep 2024 16:34:03 +0100
Subject: [PATCH] Collection page header styling (#2105)

* WIP restyle of collection header

can't get the main chunk to stay left!

* sort of fixed

* updated comments

* re-enabled background image and design tweaks

dark linear gradient been added
text tweaks from @captainsandypants
---
 .../CollectionDownloadView.axaml              | 118 +++++++------
 .../CollectionDownloadView.axaml.cs           |   8 +-
 .../Styles/StylesIndex.axaml                  |   2 +-
 .../CollectionDownloadPage.axaml              |  90 ----------
 .../CollectionDownloadPageStyles.axaml        | 166 ++++++++++++++++++
 5 files changed, 236 insertions(+), 148 deletions(-)
 delete mode 100644 src/Themes/NexusMods.Themes.NexusFluentDark/Styles/UserControls/CollectionDownloadPage/CollectionDownloadPage.axaml
 create mode 100644 src/Themes/NexusMods.Themes.NexusFluentDark/Styles/UserControls/CollectionDownloadPage/CollectionDownloadPageStyles.axaml

diff --git a/src/NexusMods.App.UI/Pages/CollectionDownload/CollectionDownloadView.axaml b/src/NexusMods.App.UI/Pages/CollectionDownload/CollectionDownloadView.axaml
index 2e5ebca6e0..0fd2a97f08 100644
--- a/src/NexusMods.App.UI/Pages/CollectionDownload/CollectionDownloadView.axaml
+++ b/src/NexusMods.App.UI/Pages/CollectionDownload/CollectionDownloadView.axaml
@@ -1,5 +1,5 @@
-<reactiveUi:ReactiveUserControl 
-    x:TypeArguments="collectionDownload:ICollectionDownloadViewModel" 
+<reactiveUi:ReactiveUserControl
+    x:TypeArguments="collectionDownload:ICollectionDownloadViewModel"
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
@@ -13,7 +13,7 @@
     <Design.DataContext>
         <collectionDownload:CollectionDownloadDesignViewModel />
     </Design.DataContext>
-    
+
     <reactiveUi:ReactiveUserControl.Resources>
         <MenuFlyout x:Key="CollectionMenuFlyout">
             <MenuItem>
@@ -48,59 +48,74 @@
     </reactiveUi:ReactiveUserControl.Resources>
 
     <panels:FlexPanel x:Name="Body">
-        <panels:FlexPanel x:Name="Frame758">
-            <panels:FlexPanel x:Name="Frame1452">
-                <Border x:Name="ContainerBorder">
-                    <panels:FlexPanel x:Name="Container">
-                        <Border x:Name="Image38Border">
-                            <Image x:Name="Image38" />
-                        </Border>
-                        <panels:FlexPanel x:Name="ContainerInner">
-                            <TextBlock Classes="TitleSMSemi">COLLECTION DOWNLOAD</TextBlock>
-                            <TextBlock x:Name="Title" Classes="HeadingSMSemi"/>
-                            <panels:FlexPanel x:Name="TagsPanel">
-                                <TextBlock x:Name="Revision" />
-                                <Border x:Name="AuthorAvatarBorder">
-                                    <Image x:Name="AuthorAvatar" />
+
+
+            <Border x:Name="HeaderBorder">
+                <panels:FlexPanel x:Name="Header">
+
+                    <Border x:Name="MainContentBorder">
+                        <panels:FlexPanel x:Name="MainContent">
+
+                            <Border x:Name="CollectionImageBorder">
+                                <Image x:Name="CollectionImage" />
+                            </Border>
+
+                            <panels:FlexPanel x:Name="CollectionDetails">
+                                <TextBlock x:Name="Title">COLLECTION DOWNLOAD</TextBlock>
+                                <TextBlock x:Name="Heading" />
+                                <Border x:Name="TagsPanelBorder">
+                                    <panels:FlexPanel x:Name="TagsPanel">
+                                        <TextBlock x:Name="Revision" />
+                                        <TextBlock x:Name="AuthorName" />
+                                        <Border x:Name="AuthorAvatarBorder">
+                                            <Image x:Name="AuthorAvatar" />
+                                        </Border>
+                                    </panels:FlexPanel>
                                 </Border>
+                                <TextBlock x:Name="Summary" />
                             </panels:FlexPanel>
-                            <TextBlock x:Name="AuthorName" />
-                            <TextBlock x:Name="Summary"></TextBlock>
+
                         </panels:FlexPanel>
-                    </panels:FlexPanel>
-                </Border>
-            </panels:FlexPanel>
-            <panels:FlexPanel x:Name="Frame1449">
-                <panels:FlexPanel x:Name="Stats" IsVisible="True">
-                    <panels:FlexPanel x:Name="ModsPanel">
-                        <icons:UnifiedIcon Value="{x:Static icons:IconValues.Mods}" />
-                        <TextBlock x:Name="ModCount" />
-                    </panels:FlexPanel>
-                    <panels:FlexPanel x:Name="EndorsementsPanel">
-                        <icons:UnifiedIcon Value="{x:Static icons:IconValues.ThumbUp}" />
-                        <TextBlock x:Name="Endorsements" />
-                    </panels:FlexPanel>
-                    <panels:FlexPanel x:Name="DownloadsPanel">
-                        <icons:UnifiedIcon Value="{x:Static icons:IconValues.Download}" />
-                        <TextBlock x:Name="Downloads" />
-                    </panels:FlexPanel>
-                    <panels:FlexPanel x:Name="TotalSizePanel">
-                        <icons:UnifiedIcon Value="{x:Static icons:IconValues.Size}" />
-                        <TextBlock x:Name="TotalSize" />
-                    </panels:FlexPanel>
-                    <panels:FlexPanel x:Name="OverallRatingPanel">
-                        <icons:UnifiedIcon Value="{x:Static icons:IconValues.CheckCircle}" />
-                        <TextBlock x:Name="OverallRating" />
-                    </panels:FlexPanel>
+                    </Border>
+
+                    <Border x:Name="StatsBorder">
+                        <panels:FlexPanel x:Name="Stats" IsVisible="True">
+                            <panels:FlexPanel x:Name="ModsPanel">
+                                <icons:UnifiedIcon Value="{x:Static icons:IconValues.Mods}" />
+                                <TextBlock x:Name="ModCount" />
+                            </panels:FlexPanel>
+                            <panels:FlexPanel x:Name="EndorsementsPanel">
+                                <icons:UnifiedIcon Value="{x:Static icons:IconValues.ThumbUp}" />
+                                <TextBlock x:Name="Endorsements" />
+                            </panels:FlexPanel>
+                            <panels:FlexPanel x:Name="DownloadsPanel">
+                                <icons:UnifiedIcon Value="{x:Static icons:IconValues.Download}" />
+                                <TextBlock x:Name="Downloads" />
+                            </panels:FlexPanel>
+                            <panels:FlexPanel x:Name="TotalSizePanel">
+                                <icons:UnifiedIcon Value="{x:Static icons:IconValues.Size}" />
+                                <TextBlock x:Name="TotalSize" />
+                            </panels:FlexPanel>
+                            <panels:FlexPanel x:Name="OverallRatingPanel">
+                                <icons:UnifiedIcon Value="{x:Static icons:IconValues.CheckCircle}" />
+                                <TextBlock x:Name="OverallRating" />
+                            </panels:FlexPanel>
+                        </panels:FlexPanel>
+                    </Border>
                 </panels:FlexPanel>
+            </Border>
+
+        <Border x:Name="ListHeaderRowBorder">
+            <panels:FlexPanel x:Name="ListHeaderRow">
+                <TextBlock x:Name="CollectionStatusText"></TextBlock>
+                <Button x:Name="InstallButton">Install</Button>
+                <Button x:Name="DownloadAllButton">DownloadAll</Button>
+                <Button x:Name="FlyoutMenuButton" Flyout="{StaticResource CollectionMenuFlyout}">...</Button>
             </panels:FlexPanel>
-        </panels:FlexPanel>
-        <panels:FlexPanel x:Name="ListHeaderRow">
-            <TextBlock x:Name="CollectionStatusText"></TextBlock>
-            <Button x:Name="InstallButton">Install</Button>
-            <Button x:Name="DownloadAllButton">DownloadAll</Button>
-            <Button x:Name="FlyoutMenuButton" Flyout="{StaticResource CollectionMenuFlyout}">...</Button>
-        </panels:FlexPanel>
+        </Border>
+
+
+        <!-- not touching these for now -->
         <Expander>
             <Expander.Header>
                 <panels:FlexPanel>
@@ -122,4 +137,3 @@
     </panels:FlexPanel>
 
 </reactiveUi:ReactiveUserControl>
-
diff --git a/src/NexusMods.App.UI/Pages/CollectionDownload/CollectionDownloadView.axaml.cs b/src/NexusMods.App.UI/Pages/CollectionDownload/CollectionDownloadView.axaml.cs
index d113bd5f75..9cf1bcf580 100644
--- a/src/NexusMods.App.UI/Pages/CollectionDownload/CollectionDownloadView.axaml.cs
+++ b/src/NexusMods.App.UI/Pages/CollectionDownload/CollectionDownloadView.axaml.cs
@@ -15,19 +15,17 @@ public CollectionDownloadView()
             {
                 
                 // Uncomment this to enable the background image
-                 /*
                  this.WhenAnyValue(view => view.ViewModel!.BackgroundImage)
                      .WhereNotNull()
-                     .SubscribeWithErrorLogging(image => Body.Background = new ImageBrush { Source = image })
+                     .SubscribeWithErrorLogging(image => Body.Background = new ImageBrush { Source = image, Stretch = Stretch.UniformToFill})
                      .DisposeWith(d);
-                     */
                 
                 this.WhenAnyValue(view => view.ViewModel!.TileImage)
                     .WhereNotNull()
-                    .SubscribeWithErrorLogging(image => Image38.Source = image)
+                    .SubscribeWithErrorLogging(image => CollectionImage.Source = image)
                     .DisposeWith(d);
                 
-                this.OneWayBind(ViewModel, vm => vm.Name, view => view.Title.Text)
+                this.OneWayBind(ViewModel, vm => vm.Name, view => view.Heading.Text)
                     .DisposeWith(d);
                 
                 this.OneWayBind(ViewModel, vm => vm.AuthorName, view => view.AuthorName.Text)
diff --git a/src/Themes/NexusMods.Themes.NexusFluentDark/Styles/StylesIndex.axaml b/src/Themes/NexusMods.Themes.NexusFluentDark/Styles/StylesIndex.axaml
index 6537664d20..9d4bc87292 100644
--- a/src/Themes/NexusMods.Themes.NexusFluentDark/Styles/StylesIndex.axaml
+++ b/src/Themes/NexusMods.Themes.NexusFluentDark/Styles/StylesIndex.axaml
@@ -31,7 +31,7 @@
     <StyleInclude Source="/Styles/Controls/FlexPanel/FlexPanelStyles.axaml"/>
 
     <StyleInclude Source="/Styles/UserControls/Banners/InfoBannerStyles.axaml"/>
-    <StyleInclude Source="/Styles/UserControls/CollectionDownloadPage/CollectionDownloadPage.axaml"/>
+    <StyleInclude Source="/Styles/UserControls/CollectionDownloadPage/CollectionDownloadPageStyles.axaml"/>
     <StyleInclude Source="/Styles/UserControls/CollectionCards/CollectionCardStyles.axaml"/>
     <StyleInclude Source="/Styles/UserControls/Diagnostics/DiagnosticEntryStyles.axaml"/>
     <StyleInclude Source="/Styles/UserControls/EmptyState/EmptyStateStyles.axaml"/>
diff --git a/src/Themes/NexusMods.Themes.NexusFluentDark/Styles/UserControls/CollectionDownloadPage/CollectionDownloadPage.axaml b/src/Themes/NexusMods.Themes.NexusFluentDark/Styles/UserControls/CollectionDownloadPage/CollectionDownloadPage.axaml
deleted file mode 100644
index 11ad5d4306..0000000000
--- a/src/Themes/NexusMods.Themes.NexusFluentDark/Styles/UserControls/CollectionDownloadPage/CollectionDownloadPage.axaml
+++ /dev/null
@@ -1,90 +0,0 @@
-<Styles xmlns="https://github.com/avaloniaui"
-        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-        xmlns:panels="clr-namespace:Avalonia.Labs.Panels;assembly=Avalonia.Labs.Panels"
-        xmlns:collections="clr-namespace:NexusMods.App.UI.Pages.CollectionDownload;assembly=NexusMods.App.UI"
-        xmlns:icons="clr-namespace:NexusMods.Icons;assembly=NexusMods.Icons">
-    <Design.PreviewWith>
-        <Grid Width="1400" Height="600">
-            <Grid.Resources>
-                <collections:CollectionDownloadDesignViewModel x:Key="CollectionDownloadPageDesignViewModel" />
-            </Grid.Resources>
-            <collections:CollectionDownloadView DataContext="{StaticResource CollectionDownloadPageDesignViewModel}" />
-        </Grid>
-    </Design.PreviewWith>
-
-    <Style Selector="collections|CollectionDownloadView">
-        <Style Selector="^ panels|FlexPanel#Body">
-            <Setter Property="Direction" Value="Column" />
-            <Setter Property="AlignItems" Value="FlexStart" />
-            <Style Selector="^ panels|FlexPanel#Frame758">
-                <Setter Property="Margin" Value="24 24 24 0"></Setter>
-                <Setter Property="Direction" Value="Column" />
-                <Setter Property="AlignItems" Value="FlexStart" />
-                <Style Selector="^ panels|FlexPanel#Frame1452">
-                    <Setter Property="MaxWidth" Value="806" />
-                    <Setter Property="Direction" Value="Column" />
-                    <Setter Property="AlignItems" Value="FlexStart" />
-                    <Setter Property="panels:Flex.AlignSelf" Value="Stretch" />
-                    <Style Selector="^ Border#ContainerBorder">
-                        <Setter Property="BorderThickness" Value="0, 0, 0, 1" />
-                        <Setter Property="BorderBrush" Value="{StaticResource StrokeTranslucentWeakBrush}" />
-                        <Style Selector="^ panels|FlexPanel#Container">
-                            <Setter Property="Margin" Value="0 0 0 24" />
-                            <Setter Property="panels:Flex.AlignSelf" Value="Stretch" />
-                            <Style Selector="^ Border#Image38Border">
-                                <Setter Property="CornerRadius" Value="4" />
-                                <Setter Property="ClipToBounds" Value="True" />
-                                <Setter Property="Width" Value="154" />
-                                <Setter Property="Height" Value="190" />
-                                <Style Selector="^ Image#Image38Image">
-                                    <Setter Property="Width" Value="154" />
-                                    <Setter Property="Height" Value="190" />
-                                </Style>
-                            </Style>
-                            <Style Selector="^ panels|FlexPanel#ContainerInner">
-                                <Setter Property="Margin" Value="24, 0"></Setter>
-                                <Setter Property="Direction" Value="Column" />
-
-                                <Style Selector="^ TextBlock#Summary">
-                                    <Setter Property="TextWrapping" Value="WrapWithOverflow" />
-                                </Style>
-                            </Style>
-                        </Style>
-                    </Style>
-                </Style>
-
-                <Style Selector="^ panels|FlexPanel#Frame1449">
-                    <Setter Property="Margin" Value="0" />
-                    <Setter Property="ColumnSpacing" Value="12" />
-
-                    <Style Selector="^ panels|FlexPanel">
-                        <Setter Property="AlignItems" Value="Center" />
-                        <Setter Property="Direction" Value="Row" />
-                        <Setter Property="ColumnSpacing" Value="4" />
-                    </Style>
-
-                    <Style Selector="^ icons|UnifiedIcon">
-                        <Setter Property="Foreground" Value="{StaticResource NeutralSubduedBrush}" />
-                        <Setter Property="Margin" Value="0" />
-                        <Setter Property="Padding" Value="0" />
-                        <Setter Property="Width" Value="20" />
-                        <Setter Property="Height" Value="20" />
-                    </Style>
-
-                    <Style Selector="^ TextBlock">
-                        <Setter Property="Foreground" Value="{StaticResource NeutralModerateBrush}" />
-                    </Style>
-
-                    <Style Selector="^ panels|FlexPanel#OverallRatingPanel">
-                        <Style Selector="^ > icons|UnifiedIcon">
-                            <Setter Property="Foreground" Value="{StaticResource SuccessStrongBrush}" />
-                        </Style>
-                        <Style Selector="^ > TextBlock#OverallRating">
-                            <Setter Property="Foreground" Value="{StaticResource SuccessStrongBrush}" />
-                        </Style>
-                    </Style>
-                </Style>
-            </Style>
-        </Style>
-    </Style>
-</Styles>
diff --git a/src/Themes/NexusMods.Themes.NexusFluentDark/Styles/UserControls/CollectionDownloadPage/CollectionDownloadPageStyles.axaml b/src/Themes/NexusMods.Themes.NexusFluentDark/Styles/UserControls/CollectionDownloadPage/CollectionDownloadPageStyles.axaml
new file mode 100644
index 0000000000..73a21923f5
--- /dev/null
+++ b/src/Themes/NexusMods.Themes.NexusFluentDark/Styles/UserControls/CollectionDownloadPage/CollectionDownloadPageStyles.axaml
@@ -0,0 +1,166 @@
+<Styles xmlns="https://github.com/avaloniaui"
+        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+        xmlns:panels="clr-namespace:Avalonia.Labs.Panels;assembly=Avalonia.Labs.Panels"
+        xmlns:collections="clr-namespace:NexusMods.App.UI.Pages.CollectionDownload;assembly=NexusMods.App.UI"
+        xmlns:icons="clr-namespace:NexusMods.Icons;assembly=NexusMods.Icons">
+    <Design.PreviewWith>
+        <Grid Width="1000" Height="600">
+            <Grid.Resources>
+                <collections:CollectionDownloadDesignViewModel x:Key="CollectionDownloadPageDesignViewModel" />
+            </Grid.Resources>
+            <collections:CollectionDownloadView DataContext="{StaticResource CollectionDownloadPageDesignViewModel}" />
+        </Grid>
+    </Design.PreviewWith>
+
+    <Style Selector="collections|CollectionDownloadView">
+        
+        <Style.Resources>
+            <LinearGradientBrush x:Key="HeaderImageLinearGradientBrush" StartPoint="0%,0%" EndPoint="0%,100%">
+                <GradientStop Offset="0" Color="#BF0F0F10" />
+                <GradientStop Offset="1" Color="#F20F0F10" />
+            </LinearGradientBrush>
+        </Style.Resources>
+        
+        <Style Selector="^ panels|FlexPanel#Body">
+            <Setter Property="Direction" Value="Column" />
+            <Setter Property="AlignItems" Value="FlexStart" />
+            
+            
+            
+            <Style Selector="^ Border#HeaderBorder">
+                <Setter Property="Background" Value="{StaticResource HeaderImageLinearGradientBrush}" />
+                <Setter Property="Padding" Value="24,24,24,16" />
+                <Setter Property="panels:Flex.AlignSelf" Value="Stretch" />
+
+                <Style Selector="^ panels|FlexPanel#Header">
+                    <Setter Property="Direction" Value="Column" />
+                    <Setter Property="AlignItems" Value="Stretch" />
+                    <Setter Property="JustifyContent" Value="FlexStart" />
+
+
+                    <!-- NOTE(insomnious): Some weird stuff happening here with max width and backgrounds. Layout wise
+                    it's working, as things are aligned correctly, but the background is not being applied correctly. 
+                    After chatting with @Al12rs, we are leaving this for now as we can't fully test this (yet) and we
+                    don't want to add extra layout code for no reason -->
+                        <Style Selector="^ Border#MainContentBorder">
+                            <!-- <Setter Property="Background" Value="DarkRed" /> -->
+                            <Setter Property="MaxWidth" Value="806" />
+                            <Setter Property="Padding" Value="0, 0, 0, 24" />
+                            <Setter Property="panels:Flex.AlignSelf" Value="FlexStart" />
+                            <!-- <Setter Property="HorizontalAlignment" Value="Left" /> -->
+
+                            <Style Selector="^ panels|FlexPanel#MainContent">
+                                <!-- <Setter Property="Background" Value="DarkSlateBlue" /> -->
+                                <Setter Property="Direction" Value="Row" />
+
+                                <!-- left column -->
+                                <Style Selector="^ Border#CollectionImageBorder">
+                                    <Setter Property="CornerRadius" Value="{StaticResource Rounded}" />
+                                    <Setter Property="ClipToBounds" Value="True" />
+
+                                    <!-- NOTE(insomnious): not sure if we fixed sizes on both elements, but figma does -->
+                                    <Setter Property="Width" Value="154" />
+                                    <Setter Property="Height" Value="190" />
+                                    <Style Selector="^ Image#CollectionImage">
+                                        <Setter Property="Width" Value="154" />
+                                        <Setter Property="Height" Value="190" />
+                                    </Style>
+                                </Style>
+
+                                <!-- right column -->
+                                <Style Selector="^ panels|FlexPanel#CollectionDetails">
+                                    <Setter Property="Margin" Value="24, 0" />
+                                    <!-- <Setter Property="Background" Value="#404050" /> -->
+                                    <Setter Property="Direction" Value="Column" />
+                                    <Setter Property="RowSpacing" Value="4" />
+                                    <Setter Property="panels:Flex.Grow" Value="1" />
+                                    <Setter Property="panels:Flex.Shrink" Value="0" />
+                                    <Setter Property="panels:Flex.Basis" Value="0" />
+
+                                    <Style Selector="^ Border#TagsPanelBorder">
+                                        <Setter Property="Padding" Value="0,5" />
+                                        <Setter Property="BorderThickness" Value="0, 1, 0, 1" />
+                                        <Setter Property="BorderBrush"
+                                                Value="{StaticResource StrokeTranslucentWeakBrush}" />
+                                        
+                                        <Style Selector="^ TextBlock#AuthorName">
+                                            <Setter Property="Foreground" Value="{StaticResource NeutralTranslucentModerateBrush}" />
+                                        </Style>
+                                    </Style>
+                                    
+                                    <Style Selector="^ TextBlock#Title">
+                                        <Setter Property="Theme" Value="{StaticResource TitleSMSemiTheme}" />
+                                        <Setter Property="Foreground" Value="{StaticResource NeutralTranslucentModerateBrush}" />
+                                    </Style>
+                                    
+                                    <Style Selector="^ TextBlock#Heading">
+                                        <Setter Property="Padding" Value="0,0,0,8" />
+                                        <Setter Property="Theme" Value="{StaticResource HeadingSMSemiTheme}" />
+                                        <Setter Property="Foreground" Value="{StaticResource NeutralTranslucentStrongBrush}" />
+                                        <Setter Property="TextWrapping" Value="NoWrap" />
+                                        <Setter Property="TextTrimming" Value="CharacterEllipsis" />
+                                    </Style>
+
+                                    <Style Selector="^ TextBlock#Summary">
+                                        <Setter Property="Foreground" Value="{StaticResource NeutralTranslucentSubduedBrush}" />
+                                        <Setter Property="TextWrapping" Value="Wrap" />
+                                        <Setter Property="TextTrimming" Value="CharacterEllipsis" />
+                                    </Style>
+                                </Style>
+
+                        </Style>
+                    </Style>
+
+                    <Style Selector="^ Border#StatsBorder">
+                        <Setter Property="Padding" Value="0, 12,0,8" />
+                        <Setter Property="BorderThickness" Value="0, 1, 0, 0" />
+                        <Setter Property="BorderBrush" Value="{StaticResource StrokeTranslucentWeakBrush}" />
+                        <Setter Property="panels:Flex.AlignSelf" Value="Stretch" />
+
+                        <Style Selector="^ panels|FlexPanel#Stats">
+                            <Setter Property="ColumnSpacing" Value="24" />
+
+                            <Style Selector="^ panels|FlexPanel">
+                                <Setter Property="AlignItems" Value="Center" />
+                                <Setter Property="Direction" Value="Row" />
+                                <Setter Property="ColumnSpacing" Value="4" />
+                            </Style>
+
+                            <Style Selector="^ icons|UnifiedIcon">
+                                <Setter Property="Foreground" Value="{StaticResource NeutralTranslucentSubduedBrush}" />
+                                <Setter Property="Width" Value="20" />
+                                <Setter Property="Height" Value="20" />
+                            </Style>
+
+                            <Style Selector="^ TextBlock">
+                                <Setter Property="Foreground" Value="{StaticResource NeutralTranslucentModerateBrush}" />
+                                <Setter Property="Theme" Value="{StaticResource BodyMDNormalTheme}" />
+                            </Style>
+
+                            <Style Selector="^ panels|FlexPanel#OverallRatingPanel">
+                                <Style Selector="^ > icons|UnifiedIcon">
+                                    <Setter Property="Foreground" Value="{StaticResource SuccessStrongBrush}" />
+                                </Style>
+                                <Style Selector="^ > TextBlock#OverallRating">
+                                    <Setter Property="Foreground" Value="{StaticResource SuccessStrongBrush}" />
+                                </Style>
+                            </Style>
+                        </Style>
+                    </Style>
+                </Style>
+            </Style>
+
+            <Style Selector="^ Border#ListHeaderRowBorder">
+                <Setter Property="panels:Flex.AlignSelf" Value="Stretch" />
+                <Setter Property="Background" Value="{StaticResource SurfaceLowBrush}" />
+                <Setter Property="Padding" Value="24" />
+
+                <Style Selector="^ panels|FlexPanel#ListHeaderRow">
+                    <Setter Property="JustifyContent" Value="FlexEnd" />
+                    <Setter Property="AlignItems" Value="Center" />
+                    <Setter Property="ColumnSpacing" Value="8" />
+                </Style>
+            </Style>
+        </Style>
+    </Style>
+</Styles>