Design tweaks for Health Check

src/NexusMods.App.UI/Pages/Diagnostics/Details/DiagnosticDetailsView.axaml

@@ -7,6 +7,7 @@
     xmlns:reactiveUi="http://reactiveui.net"
     xmlns:diagnostics="clr-namespace:NexusMods.App.UI.Pages.Diagnostics"
     xmlns:icons="clr-namespace:NexusMods.Icons;assembly=NexusMods.Icons"
+    xmlns:controls="clr-namespace:NexusMods.App.UI.Controls"
     mc:Ignorable="d" d:DesignWidth="1200" d:DesignHeight="450"
     x:Class="NexusMods.App.UI.Pages.Diagnostics.DiagnosticDetailsView">
 
@@ -16,32 +17,82 @@
 
     <!-- NOTE(insomnious): if we need any more styling than this, we should move it to a separate style file -->
 
-    <ScrollViewer>
-        <Border Padding="24" MaxWidth="1000">
+    <Grid>
+        <Grid.ColumnDefinitions>
+            <ColumnDefinition Width="*" MaxWidth="1024" />
+        </Grid.ColumnDefinitions>
 
-            <StackPanel Orientation="Vertical"
-                        HorizontalAlignment="Stretch"
-                        Spacing="{StaticResource Spacing-3}">
+        <!-- need DockPanel to make the TabControl fill the available space, needed for ScrollViewer to calculate height properly -->
+        <DockPanel Margin="24">
 
-                <StackPanel x:Name="TitleLineStackPanel"
-                            Orientation="Horizontal"
-                            Spacing="{StaticResource Spacing-1}">
-
-                    <icons:UnifiedIcon x:Name="SeverityIcon"
-                                       Size="20"
-                                       VerticalAlignment="Center" />
+            <!-- header with pictogram -->
+            <StackPanel Spacing="8" DockPanel.Dock="Top">
 
+                <StackPanel Orientation="Horizontal" Spacing="8">
+                    <Border Width="48" Height="48">
+                        <icons:UnifiedIcon Size="48" Value="{x:Static icons:IconValues.PictogramHealth}" />
+                    </Border>
+                    <TextBlock Text="Health Check:"
+                               Theme="{StaticResource HeadingSMSemiTheme}"
+                               Foreground="{StaticResource NeutralStrongBrush}"
+                               VerticalAlignment="Center" />
                     <TextBlock x:Name="SeverityTitleTextBlock"
-                               Theme="{StaticResource TitleSMSemiTheme}"
+                               Theme="{StaticResource HeadingSMSemiTheme}"
                                VerticalAlignment="Center" />
                 </StackPanel>
 
-                <Border x:Name="HorizontalLine" Height="1" />
-
-                <reactiveUi:ViewModelViewHost x:Name="MarkdownRendererViewModelViewHost" />
+                <TextBlock
+                    x:Name="SeverityExplanationTextBlock"
+                    Text="Review your Loadout for any issues and learn how to resolve them if needed."
+                    Theme="{StaticResource BodyMDNormalTheme}"
+                    Foreground="{StaticResource NeutralStrongBrush}"
+                    TextWrapping="Wrap" />
             </StackPanel>
 
-        </Border>
-    </ScrollViewer>
+            <Border DockPanel.Dock="Top" Classes="Toolbar" 
+                    Background="Transparent" 
+                    BorderThickness="0">
+
+                <StackPanel HorizontalAlignment="Left" 
+                            Margin="0,20,0,0">
+                    <controls:StandardButton x:Name="SwitchView"
+                                             Text="Back"
+                                             Type="Tertiary"
+                                             Size="Small"
+                                             Fill="Weak"
+                                             ShowIcon="Left"
+                                             LeftIcon="{x:Static icons:IconValues.ArrowBack}"
+                                             IsEnabled="False"/>
+
+                    <controls:StandardButton x:Name="DeleteButton"
+                                             Type="Tertiary"
+                                             Size="Small"
+                                             Fill="Weak"
+                                             ShowIcon="Left"
+                                             ShowLabel="False"
+                                             LeftIcon="{x:Static icons:IconValues.Copy}"
+                                             IsEnabled="False"/>
+                </StackPanel>
+            </Border>
+
+            <Border
+                x:Name="MarkdownWrapperBorder"
+                Margin="0,12,0,0"
+                CornerRadius="4"
+                BorderThickness="2"
+                Padding="24"
+                Background="#0D93C5FD"
+                BorderBrush="#6693C5FD">
+
+                <ScrollViewer Padding="0,0,24,0">
+
+                    <reactiveUi:ViewModelViewHost x:Name="MarkdownRendererViewModelViewHost" />
+
+                </ScrollViewer>
+            </Border>
+
+        </DockPanel>
+    </Grid>
+
 
 </reactiveUi:ReactiveUserControl>

src/NexusMods.App.UI/Pages/Diagnostics/Details/DiagnosticDetailsView.axaml.cs

@@ -1,5 +1,6 @@
 using System.Reactive.Disposables;
 using System.Reactive.Linq;
+using Avalonia.Media;
 using Avalonia.ReactiveUI;
 using JetBrains.Annotations;
 using NexusMods.Abstractions.Diagnostics;
@@ -32,30 +33,33 @@ private void InitializeData(IDiagnosticDetailsViewModel vm)
 
         switch (vm.Severity)
         {
+            /* NOTE(insomnious): Using fixed colors unless Laurence uses these colors\opacities again.
+             * Same for the fixed text strings while we are testing the UI
+             */
+
             case DiagnosticSeverity.Suggestion:
-                SeverityIcon.Classes.Add("HelpCircle");
-                SeverityIcon.Classes.Add("ForegroundInfoStrong");
-                SeverityTitleTextBlock.Text = Language.DiagnosticDetailsView_SeverityTitle_SUGGESTION.ToUpperInvariant();
+                SeverityTitleTextBlock.Text = Language.DiagnosticDetailsView_SeverityTitle_SUGGESTION;
                 SeverityTitleTextBlock.Classes.Add("ForegroundInfoStrong");
-                HorizontalLine.Classes.Add("InfoStrong");
+                SeverityExplanationTextBlock.Text = "Suggests mods and changes that may improve your experience.";
+                MarkdownWrapperBorder.Background = SolidColorBrush.Parse("#0D93C5FD");
+                MarkdownWrapperBorder.BorderBrush = SolidColorBrush.Parse("#6693C5FD");
                 break;
             case DiagnosticSeverity.Warning:
-                SeverityIcon.Classes.Add("Alert");
-                SeverityIcon.Classes.Add("ForegroundWarningStrong");
-                SeverityTitleTextBlock.Text = Language.DiagnosticDetailsView_SeverityTitle_WARNING.ToUpperInvariant();
+                SeverityTitleTextBlock.Text = Language.DiagnosticDetailsView_SeverityTitle_WARNING;
+                SeverityExplanationTextBlock.Text = "Warnings indicate a mod may not load or game may become unstable.";
                 SeverityTitleTextBlock.Classes.Add("ForegroundWarningStrong");
-                HorizontalLine.Classes.Add("WarningStrong");
+                MarkdownWrapperBorder.Background = SolidColorBrush.Parse("#0DFEF08A"); 
+                MarkdownWrapperBorder.BorderBrush = SolidColorBrush.Parse("#66FEF08A");
                 break;
             case DiagnosticSeverity.Critical:
-                SeverityIcon.Classes.Add("AlertOctagon");
-                SeverityIcon.Classes.Add("ForegroundDangerStrong");
-                SeverityTitleTextBlock.Text = Language.DiagnosticDetailsView_SeverityTitle_CRITICAL_ERROR.ToUpperInvariant();
+                SeverityTitleTextBlock.Text = Language.DiagnosticDetailsView_SeverityTitle_CRITICAL_ERROR;
+                SeverityExplanationTextBlock.Text = "Critical errors can prevent your game from loading.";
                 SeverityTitleTextBlock.Classes.Add("ForegroundDangerStrong");
-                HorizontalLine.Classes.Add("DangerStrong");
+                MarkdownWrapperBorder.Background = SolidColorBrush.Parse("#0DF87171");
+                MarkdownWrapperBorder.BorderBrush = SolidColorBrush.Parse("#66F87171");
                 break;
             default:
-                SeverityIcon.Classes.Add("Bell");
-                SeverityTitleTextBlock.Text = Language.DiagnosticDetailsView_SeverityTitle_HIDDEN.ToUpperInvariant();
+                SeverityTitleTextBlock.Text = Language.DiagnosticDetailsView_SeverityTitle_HIDDEN;
                 break;
         }
     }

src/NexusMods.App.UI/Pages/Diagnostics/List/DiagnosticListView.axaml

@@ -39,13 +39,21 @@
                          Header="{x:Static resources:Language.DiagnosticListView_EmptyState_Header}"
                          Subtitle="{x:Static resources:Language.DiagnosticListView_EmptyState_Subtitle}">
 
-        <Border HorizontalAlignment="Stretch" MaxWidth="1000" Padding="24">
-
+        <!-- NOTE(insomnious): Using a single column grid to limit the max width of the content while still letting it stretch.
+        HorizontalAlignment is ignored on a control when numerical entries are set on 
+        Width/Height/MaxWidth/MaxHeight etc.
+        -->
+        <Grid>
+            <Grid.ColumnDefinitions>
+                <ColumnDefinition Width="*" MaxWidth="1024"/>
+            </Grid.ColumnDefinitions>
+
             <!-- need DockPanel to make the TabControl fill the available space, needed for ScrollViewer to calculate height properly -->
-            <DockPanel>
+            <DockPanel Margin="24">
 
-                <StackPanel Spacing="8"
-                            DockPanel.Dock="Top">
+                <!-- header with pictogram -->
+                <StackPanel Spacing="8" DockPanel.Dock="Top">
+
                     <StackPanel Orientation="Horizontal" Spacing="8">
                         <Border Width="48" Height="48">
                             <icons:UnifiedIcon Size="48" Value="{x:Static icons:IconValues.PictogramHealth}" />
@@ -59,7 +67,8 @@
                     <TextBlock
                         Text="Review your Loadout for any issues and learn how to resolve them if needed."
                         Theme="{StaticResource BodyMDNormalTheme}"
-                        Foreground="{StaticResource NeutralStrongBrush}" />
+                        Foreground="{StaticResource NeutralStrongBrush}" 
+                        TextWrapping="Wrap"/>
                 </StackPanel>
 
                 <TabControl x:Name="TabControl"
@@ -73,7 +82,7 @@
                 </TabControl>
 
             </DockPanel>
-        </Border>
+        </Grid>
 
     </controls:EmptyState>
 

src/NexusMods.App.UI/Pages/MyGames/MyGamesView.axaml

@@ -58,13 +58,15 @@
                             <TextBlock Text="No games detected"
                                        Theme="{StaticResource BodyMDNormalTheme}"
                                        Foreground="{StaticResource NeutralSubduedBrush}"
-                                       TextAlignment="Left"/>
+                                       TextAlignment="Left"
+                                       TextWrapping="Wrap"/>
                         </controls:EmptyState.Subtitle>
 
                         <StackPanel Spacing="24">
                             <TextBlock Text="Add games to get started"
                                        Theme="{StaticResource BodyMDNormalTheme}"
-                                       Foreground="{StaticResource NeutralStrongBrush}" />
+                                       Foreground="{StaticResource NeutralStrongBrush}"
+                                       TextWrapping="Wrap"/>
                             <ItemsControl
                                 x:Name="DetectedGamesItemsControl">
                                 <ItemsControl.ItemsPanel>

src/NexusMods.App.UI/Pages/MyLoadouts/MyLoadoutsView.axaml

@@ -40,7 +40,8 @@
 
                     <TextBlock Text="{x:Static resources:Language.MyLoadoutsPageDescriptionText}"
                                Theme="{StaticResource BodyMDNormalTheme}"
-                               Foreground="{StaticResource NeutralStrongBrush}" />
+                               Foreground="{StaticResource NeutralStrongBrush}"
+                               TextWrapping="Wrap" />
                 </StackPanel>
 
                 <ItemsControl x:Name="GameSectionsItemsControl">