From 2a6ed8cc7f586f152e5bf63666b6a680350bff8c Mon Sep 17 00:00:00 2001
From: Robert <mail@rbeekman.nl>
Date: Fri, 18 Feb 2022 16:42:42 +0100
Subject: [PATCH] UI - Theme fixes

---
 .../Artemis.UI.Shared/Styles/Border.axaml     |  8 ++-
 .../Artemis.UI/Screens/Home/HomeView.axaml    |  3 +-
 .../Screens/Plugins/PluginSettingsView.axaml  |  2 +-
 .../Settings/Tabs/GeneralTabView.axaml        | 54 ++++++++++---------
 .../Settings/Tabs/GeneralTabViewModel.cs      | 18 +++++++
 5 files changed, 56 insertions(+), 29 deletions(-)

diff --git a/src/Avalonia/Artemis.UI.Shared/Styles/Border.axaml b/src/Avalonia/Artemis.UI.Shared/Styles/Border.axaml
index 54e2cecf1..59afbcfef 100644
--- a/src/Avalonia/Artemis.UI.Shared/Styles/Border.axaml
+++ b/src/Avalonia/Artemis.UI.Shared/Styles/Border.axaml
@@ -22,6 +22,8 @@
     <!-- Add Styles Here -->
     <Style Selector="Border.router-container">
         <Setter Property="Background" Value="{DynamicResource SolidBackgroundFillColorTertiary}" />
+        <Setter Property="BorderBrush" Value="{DynamicResource CardStrokeColorDefaultBrush}" />
+        <Setter Property="BorderThickness" Value="1" />
         <Setter Property="CornerRadius" Value="8 0 0 0" />
         <Setter Property="ClipToBounds" Value="True" />
     </Style>
@@ -36,17 +38,21 @@
     <Style Selector="Border.card">
         <Setter Property="Padding" Value="25" />
         <Setter Property="Background" Value="{DynamicResource ControlFillColorDefaultBrush}" />
+        <Setter Property="BorderBrush" Value="{DynamicResource CardStrokeColorDefaultBrush}" />
+        <Setter Property="BorderThickness" Value="1" />
         <Setter Property="CornerRadius" Value="{DynamicResource CardCornerRadius}" />
     </Style>
 
     <Style Selector="Border.card-condensed">
         <Setter Property="Padding" Value="10" />
         <Setter Property="Background" Value="{DynamicResource ControlFillColorDefaultBrush}" />
+        <Setter Property="BorderBrush" Value="{DynamicResource CardStrokeColorDefaultBrush}" />
+        <Setter Property="BorderThickness" Value="1" />
         <Setter Property="CornerRadius" Value="{DynamicResource CardCornerRadius}" />
     </Style>
 
     <Style Selector="Separator.card-separator">
-        <Setter Property="Background" Value="{DynamicResource ControlFillColorDefaultBrush}" />
+        <Setter Property="Background" Value="{DynamicResource ButtonBorderBrush}" />
         <Setter Property="Margin" Value="-12 15" />
         <Setter Property="Height" Value="1" />
 
diff --git a/src/Avalonia/Artemis.UI/Screens/Home/HomeView.axaml b/src/Avalonia/Artemis.UI/Screens/Home/HomeView.axaml
index e12d80e0c..43e4edc55 100644
--- a/src/Avalonia/Artemis.UI/Screens/Home/HomeView.axaml
+++ b/src/Avalonia/Artemis.UI/Screens/Home/HomeView.axaml
@@ -10,7 +10,7 @@
 		<Grid RowDefinitions="200,*">
 			<Image Grid.Row="0"
 				   Grid.RowSpan="2"
-				   VerticalAlignment="Top"
+                   VerticalAlignment="Top"
 				   Source="/Assets/Images/home-banner.png"
 				   Height="200"
 				   Stretch="UniformToFill" />
@@ -24,6 +24,7 @@
 					   Text=" Welcome to Artemis, the unified RGB platform." />
 			<TextBlock Grid.Row="0"
 					   TextWrapping="Wrap"
+					   Foreground="White"
 					   FontSize="32"
 					   Margin="30"
 					   Text=" Welcome to Artemis, the unified RGB platform." />
diff --git a/src/Avalonia/Artemis.UI/Screens/Plugins/PluginSettingsView.axaml b/src/Avalonia/Artemis.UI/Screens/Plugins/PluginSettingsView.axaml
index 8f2796ae8..9c5c38b14 100644
--- a/src/Avalonia/Artemis.UI/Screens/Plugins/PluginSettingsView.axaml
+++ b/src/Avalonia/Artemis.UI/Screens/Plugins/PluginSettingsView.axaml
@@ -107,7 +107,7 @@
                              IsIndeterminate="True" />
             </Grid>
 
-            <Border Grid.Column="1" Grid.Row="0" Grid.RowSpan="2" BorderBrush="{StaticResource ButtonBorderBrush}" BorderThickness="1 0 0 0" Margin="10 0 0 0" Padding="10 0 0 0">
+            <Border Grid.Column="1" Grid.Row="0" Grid.RowSpan="2" BorderBrush="{DynamicResource ButtonBorderBrush}" BorderThickness="1 0 0 0" Margin="10 0 0 0" Padding="10 0 0 0">
                 <Grid RowDefinitions="Auto,*">
                     <TextBlock Classes="h5">Plugin features</TextBlock>
                     <ListBox Grid.Row="1" MaxHeight="135" Items="{Binding PluginFeatures}" />
diff --git a/src/Avalonia/Artemis.UI/Screens/Settings/Tabs/GeneralTabView.axaml b/src/Avalonia/Artemis.UI/Screens/Settings/Tabs/GeneralTabView.axaml
index a44f07962..1a64ea58b 100644
--- a/src/Avalonia/Artemis.UI/Screens/Settings/Tabs/GeneralTabView.axaml
+++ b/src/Avalonia/Artemis.UI/Screens/Settings/Tabs/GeneralTabView.axaml
@@ -5,8 +5,10 @@
              xmlns:layerBrushes="clr-namespace:Artemis.Core.LayerBrushes;assembly=Artemis.Core"
              xmlns:avalonia="clr-namespace:Material.Icons.Avalonia;assembly=Material.Icons.Avalonia"
              xmlns:controls="clr-namespace:Artemis.UI.Shared.Controls;assembly=Artemis.UI.Shared"
+             xmlns:settings="clr-namespace:Artemis.UI.Screens.Settings"
              mc:Ignorable="d" d:DesignWidth="1000" d:DesignHeight="2400"
-             x:Class="Artemis.UI.Screens.Settings.GeneralTabView">
+             x:Class="Artemis.UI.Screens.Settings.GeneralTabView"
+             x:DataType="settings:GeneralTabViewModel">
 
     <ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto">
 		<StackPanel Margin="15" MaxWidth="1000">
@@ -20,7 +22,7 @@
 						<StackPanel Grid.Column="0">
 							<TextBlock>Auto-run on startup</TextBlock>
 						</StackPanel>
-						<ToggleSwitch Grid.Row="0" Grid.Column="1" VerticalAlignment="Center" IsChecked="{Binding UIAutoRun.Value}" MinWidth="0" Margin="0 -10"/>
+						<ToggleSwitch Grid.Row="0" Grid.Column="1" VerticalAlignment="Center" IsChecked="{CompiledBinding UIAutoRun.Value}" MinWidth="0" Margin="0 -10"/>
 					</Grid>
 					<Separator Classes="card-separator" />
 
@@ -29,7 +31,7 @@
 							<TextBlock>Hide window on auto-run</TextBlock>
 						</StackPanel>
 						<StackPanel Grid.Row="0" Grid.Column="1" VerticalAlignment="Center">
-							<ToggleSwitch IsChecked="{Binding !UIShowOnStartup.Value}" IsEnabled="{Binding UIAutoRun.Value}" MinWidth="0" Margin="0 -10"/>
+							<ToggleSwitch IsChecked="{CompiledBinding !UIShowOnStartup.Value}" IsEnabled="{CompiledBinding UIAutoRun.Value}" MinWidth="0" Margin="0 -10"/>
 						</StackPanel>
 					</Grid>
 					<Separator Classes="card-separator" />
@@ -45,7 +47,7 @@
 							</TextBlock>
 						</StackPanel>
 						<StackPanel Grid.Row="0" Grid.Column="1" VerticalAlignment="Center" Orientation="Horizontal">
-							<TextBox Text="{Binding UIAutoRunDelay.Value}" IsEnabled="{Binding UIAutoRun.Value}" Width="120" />
+							<TextBox Text="{CompiledBinding UIAutoRunDelay.Value}" IsEnabled="{CompiledBinding UIAutoRun.Value}" Width="120" />
 							<TextBlock VerticalAlignment="Center" TextAlignment="Right" Width="30">sec</TextBlock>
 						</StackPanel>
 					</Grid>
@@ -59,7 +61,7 @@
 							</TextBlock>
 						</StackPanel>
 						<StackPanel Grid.Row="0" Grid.Column="1" VerticalAlignment="Center">
-							<controls:EnumComboBox Width="150" Value="{Binding UIColorScheme.Value}" />
+							<controls:EnumComboBox Width="150" Value="{CompiledBinding UIColorScheme.Value}" />
 						</StackPanel>
 					</Grid>
 					<Separator Classes="card-separator" />
@@ -74,7 +76,7 @@
 							</TextBlock>
 						</StackPanel>
 						<StackPanel Grid.Row="0" Grid.Column="1" VerticalAlignment="Center">
-							<controls:EnumComboBox Width="150" Value="{Binding CoreLoggingLevel.Value}" />
+							<controls:EnumComboBox Width="150" Value="{CompiledBinding CoreLoggingLevel.Value}" />
 						</StackPanel>
 					</Grid>
 					<Separator Classes="card-separator" />
@@ -89,7 +91,7 @@
 							</TextBlock>
 						</StackPanel>
 						<StackPanel Grid.Row="0" Grid.Column="1" VerticalAlignment="Center">
-							<Button Command="{Binding ShowLogs}" Width="150" Content="Show logs" />
+							<Button Command="{CompiledBinding ShowLogs}" Width="150" Content="Show logs" />
 						</StackPanel>
 					</Grid>
 				</StackPanel>
@@ -114,7 +116,7 @@
 							</TextBlock>
 						</StackPanel>
 						<StackPanel Grid.Row="0" Grid.Column="1" VerticalAlignment="Center">
-							<TextBox Text="{Binding WebServerPort.Value}" Width="150" />
+							<TextBox Text="{CompiledBinding WebServerPort.Value}" Width="150" />
 						</StackPanel>
 					</Grid>
 				</StackPanel>
@@ -136,7 +138,7 @@
 							</TextBlock>
 						</StackPanel>
 						<StackPanel Grid.Row="0" Grid.Column="1" VerticalAlignment="Center">
-							<ToggleSwitch IsChecked="{Binding UICheckForUpdates.Value}" MinWidth="0" />
+							<ToggleSwitch IsChecked="{CompiledBinding UICheckForUpdates.Value}" MinWidth="0" />
 						</StackPanel>
 					</Grid>
 					<Separator Classes="card-separator" />
@@ -173,7 +175,7 @@
 							</TextBlock>
 						</StackPanel>
 						<StackPanel Grid.Row="0" Grid.Column="1" VerticalAlignment="Center">
-							<ToggleSwitch IsChecked="{Binding ProfileEditorShowDataModelValues.Value}" MinWidth="0" />
+							<ToggleSwitch IsChecked="{CompiledBinding ProfileEditorShowDataModelValues.Value}" MinWidth="0" />
 						</StackPanel>
 					</Grid>
 					<Separator Classes="card-separator" />
@@ -194,8 +196,8 @@
 										<Setter.Value>
 											<DataTemplate DataType="{x:Type layerBrushes:LayerBrushDescriptor}">
 												<StackPanel Orientation="Horizontal">
-													<avalonia:MaterialIcon Kind="{Binding Icon}" Height="20" Width="20" VerticalAlignment="Center" Margin="0 0 5 0"/>
-													<TextBlock Text="{Binding DisplayName}" VerticalAlignment="Center" />
+													<avalonia:MaterialIcon Kind="{CompiledBinding Icon}" Height="20" Width="20" VerticalAlignment="Center" Margin="0 0 5 0"/>
+													<TextBlock Text="{CompiledBinding DisplayName}" VerticalAlignment="Center" />
 												</StackPanel>
 											</DataTemplate>
 										</Setter.Value>
@@ -205,20 +207,20 @@
 							<ComboBox Classes="brush"
 									  Width="200"
 									  HorizontalAlignment="Left"
-									  Items="{Binding LayerBrushDescriptors}"
-									  SelectedItem="{Binding SelectedLayerBrushDescriptor}">
+									  Items="{CompiledBinding LayerBrushDescriptors}"
+									  SelectedItem="{CompiledBinding SelectedLayerBrushDescriptor}">
 								<ComboBox.ItemTemplate>
 									<DataTemplate DataType="{x:Type layerBrushes:LayerBrushDescriptor}">
 										<Grid ColumnDefinitions="30,*" RowDefinitions="Auto,Auto">
 											<avalonia:MaterialIcon Grid.Row="0"
 																   Grid.RowSpan="2"
-																   Kind="{Binding Icon}"
+																   Kind="{CompiledBinding Icon}"
 																   Height="20"
 																   Width="20"
 																   VerticalAlignment="Center"
 																   HorizontalAlignment="Left" />
-											<TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding DisplayName}" TextWrapping="Wrap" MaxWidth="350" />
-											<TextBlock Classes="subtitle" Grid.Row="1" Grid.Column="1" Text="{Binding Description}" TextWrapping="Wrap" MaxWidth="350" />
+											<TextBlock Grid.Row="0" Grid.Column="1" Text="{CompiledBinding DisplayName}" TextWrapping="Wrap" MaxWidth="350" />
+											<TextBlock Classes="subtitle" Grid.Row="1" Grid.Column="1" Text="{CompiledBinding Description}" TextWrapping="Wrap" MaxWidth="350" />
 										</Grid>
 									</DataTemplate>
 								</ComboBox.ItemTemplate>
@@ -245,8 +247,8 @@
 						</StackPanel>
 						<StackPanel Grid.Row="0" Grid.Column="1" VerticalAlignment="Center">
 							<ComboBox Width="150"
-									  SelectedItem="{Binding CorePreferredGraphicsContext.Value}"
-									  Items="{Binding GraphicsContexts}"/>
+									  SelectedItem="{CompiledBinding CorePreferredGraphicsContext.Value}"
+									  Items="{CompiledBinding GraphicsContexts}"/>
 						</StackPanel>
 					</Grid>
 					<Separator Classes="card-separator" />
@@ -262,8 +264,8 @@
 						</StackPanel>
 						<StackPanel Grid.Row="0" Grid.Column="1" VerticalAlignment="Center">
 							<ComboBox Width="150"
-									  SelectedItem="{Binding SelectedRenderScale}"
-									  Items="{Binding RenderScales}">
+									  SelectedItem="{CompiledBinding SelectedRenderScale}"
+									  Items="{CompiledBinding RenderScales}">
 								<ComboBox.ItemTemplate>
 									<DataTemplate>
 										<TextBlock Text="{Binding [0]}" />
@@ -288,8 +290,8 @@
 						</StackPanel>
 						<StackPanel Grid.Row="0" Grid.Column="1" VerticalAlignment="Center">
 							<ComboBox Width="150"
-									  SelectedItem="{Binding SelectedTargetFrameRate}"
-									  Items="{Binding TargetFrameRates}">
+									  SelectedItem="{CompiledBinding SelectedTargetFrameRate}"
+									  Items="{CompiledBinding TargetFrameRates}">
 								<ComboBox.ItemTemplate>
 									<DataTemplate>
 										<TextBlock Text="{Binding [0]}" />
@@ -317,7 +319,7 @@
 							</TextBlock>
 						</StackPanel>
 						<StackPanel Grid.Row="0" Grid.Column="1" VerticalAlignment="Center">
-							<Button Command="{Binding ShowSetupWizard}" Width="150" Content="Show wizard" />
+							<Button Command="{CompiledBinding ShowSetupWizard}" Width="150" Content="Show wizard" />
 						</StackPanel>
 					</Grid>
 					<Separator Classes="card-separator" />
@@ -332,7 +334,7 @@
 							</TextBlock>
 						</StackPanel>
 						<StackPanel Grid.Row="0" Grid.Column="1" VerticalAlignment="Center">
-							<Button Command="{Binding ShowDebugger}" Width="150" Content="Show debugger" />
+							<Button Command="{CompiledBinding ShowDebugger}" Width="150" Content="Show debugger" />
 						</StackPanel>
 					</Grid>
 					<Separator Classes="card-separator" />
@@ -347,7 +349,7 @@
 							</TextBlock>
 						</StackPanel>
 						<StackPanel Grid.Row="0" Grid.Column="1" VerticalAlignment="Center">
-							<Button Command="{Binding ShowDataFolder}" Width="150" Content="Show app files" />
+							<Button Command="{CompiledBinding ShowDataFolder}" Width="150" Content="Show app files" />
 						</StackPanel>
 					</Grid>
 				</StackPanel>
diff --git a/src/Avalonia/Artemis.UI/Screens/Settings/Tabs/GeneralTabViewModel.cs b/src/Avalonia/Artemis.UI/Screens/Settings/Tabs/GeneralTabViewModel.cs
index d9c939373..d3c3c4ff8 100644
--- a/src/Avalonia/Artemis.UI/Screens/Settings/Tabs/GeneralTabViewModel.cs
+++ b/src/Avalonia/Artemis.UI/Screens/Settings/Tabs/GeneralTabViewModel.cs
@@ -11,6 +11,8 @@ using Artemis.Core.LayerBrushes;
 using Artemis.Core.Services;
 using Artemis.UI.Services.Interfaces;
 using Artemis.UI.Shared;
+using Avalonia;
+using FluentAvalonia.Styling;
 using ReactiveUI;
 using Serilog.Events;
 
@@ -21,12 +23,14 @@ namespace Artemis.UI.Screens.Settings
         private readonly PluginSetting<LayerBrushReference> _defaultLayerBrushDescriptor;
         private readonly ISettingsService _settingsService;
         private readonly IDebugService _debugService;
+        private readonly FluentAvaloniaTheme _fluentAvaloniaTheme;
 
         public GeneralTabViewModel(ISettingsService settingsService, IPluginManagementService pluginManagementService, IDebugService debugService)
         {
             DisplayName = "General";
             _settingsService = settingsService;
             _debugService = debugService;
+            _fluentAvaloniaTheme = AvaloniaLocator.Current.GetService<FluentAvaloniaTheme>(); ;
 
             List<LayerBrushProvider> layerBrushProviders = pluginManagementService.GetFeaturesOfType<LayerBrushProvider>();
             LayerBrushDescriptors = new ObservableCollection<LayerBrushDescriptor>(layerBrushProviders.SelectMany(l => l.LayerBrushDescriptors));
@@ -41,6 +45,20 @@ namespace Artemis.UI.Screens.Settings
             ShowSetupWizard = ReactiveCommand.Create(ExecuteShowSetupWizard);
             ShowDebugger = ReactiveCommand.Create(ExecuteShowDebugger);
             ShowDataFolder = ReactiveCommand.Create(ExecuteShowDataFolder);
+
+            UIColorScheme.SettingChanged += UIColorSchemeOnSettingChanged;
+        }
+
+        private void UIColorSchemeOnSettingChanged(object? sender, EventArgs e)
+        {
+            if (UIColorScheme.Value == ApplicationColorScheme.Automatic)
+                _fluentAvaloniaTheme.RequestedTheme = null;
+            else if (UIColorScheme.Value == ApplicationColorScheme.Light)
+                _fluentAvaloniaTheme.RequestedTheme = "Light";
+            else if (UIColorScheme.Value == ApplicationColorScheme.Dark)
+                _fluentAvaloniaTheme.RequestedTheme = "Dark";
+            else
+                _fluentAvaloniaTheme.RequestedTheme = _fluentAvaloniaTheme.RequestedTheme;
         }
 
         public ReactiveCommand<Unit, Unit> ShowLogs { get; }