UI - Settings screen and About tab

src/Artemis.UI.Avalonia/App.axaml

@@ -20,6 +20,7 @@
         <!-- Global styles -->
         <StyleInclude Source="/Styles/Border.axaml" />
         <StyleInclude Source="/Styles/Button.axaml" />
+        <StyleInclude Source="/Styles/TextBlock.axaml" />
         <StyleInclude Source="/Styles/Sidebar.axaml" />
     </Application.Styles>
 </Application>

src/Artemis.UI.Avalonia/Artemis.UI.Avalonia.csproj

@@ -19,6 +19,7 @@
 		<PackageReference Include="Avalonia.ReactiveUI" Version="0.10.7" />
 		<PackageReference Include="Avalonia.Svg.Skia" Version="0.10.7.2" />
 		<PackageReference Include="FluentAvaloniaUI" Version="1.1.3" />
+		<PackageReference Include="Flurl.Http" Version="3.2.0" />
 		<PackageReference Include="Live.Avalonia" Version="1.3.1" />
 		<PackageReference Include="Material.Icons.Avalonia" Version="1.0.2" />
 		<PackageReference Include="Splat.Ninject" Version="13.1.22" />

src/Artemis.UI.Avalonia/MainWindow.axaml

@@ -4,7 +4,7 @@
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
         mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
         x:Class="Artemis.UI.Avalonia.MainWindow"
-        Icon="/Assets/avalonia-logo.ico"
+        Icon="/Assets/Images/Logo/bow.ico"
         Title="Artemis.UI.Avalonia"
         ExtendClientAreaToDecorationsHint="True"
         TransparencyLevelHint="AcrylicBlur"

src/Artemis.UI.Avalonia/Screens/Settings/ViewModels/AboutTabViewModel.cs

@@ -0,0 +1,74 @@
+using System;
+using System.Reflection;
+using System.Threading.Tasks;
+using Artemis.Core;
+using Avalonia.Media.Imaging;
+using Flurl.Http;
+using ReactiveUI;
+
+namespace Artemis.UI.Avalonia.Screens.Settings.ViewModels
+{
+    public class AboutTabViewModel : ActivatableViewModelBase
+    {
+        private Bitmap? _darthAffeProfileImage;
+        private Bitmap? _drMeteorProfileImage;
+        private Bitmap? _kaiProfileImage;
+        private Bitmap? _robertProfileImage;
+        private string? _version;
+
+        public AboutTabViewModel()
+        {
+            DisplayName = "About";
+            this.WhenActivated((Action<IDisposable> _) => Task.Run(Activate));
+        }
+
+        public string? Version
+        {
+            get => _version;
+            set => this.RaiseAndSetIfChanged(ref _version, value);
+        }
+
+        public Bitmap? RobertProfileImage
+        {
+            get => _robertProfileImage;
+            set => this.RaiseAndSetIfChanged(ref _robertProfileImage, value);
+        }
+
+        public Bitmap? DarthAffeProfileImage
+        {
+            get => _darthAffeProfileImage;
+            set => this.RaiseAndSetIfChanged(ref _darthAffeProfileImage, value);
+        }
+
+        public Bitmap? DrMeteorProfileImage
+        {
+            get => _drMeteorProfileImage;
+            set => this.RaiseAndSetIfChanged(ref _drMeteorProfileImage, value);
+        }
+
+        public Bitmap? KaiProfileImage
+        {
+            get => _kaiProfileImage;
+            set => this.RaiseAndSetIfChanged(ref _kaiProfileImage, value);
+        }
+
+        private async Task Activate()
+        {
+            AssemblyInformationalVersionAttribute? versionAttribute = typeof(AboutTabViewModel).Assembly.GetCustomAttribute<AssemblyInformationalVersionAttribute>();
+            Version = $"Version {versionAttribute?.InformationalVersion} build {Constants.BuildInfo.BuildNumberDisplay}";
+
+            try
+            {
+                RobertProfileImage = new Bitmap(await "https://avatars.githubusercontent.com/u/8858506".GetStreamAsync());
+                RobertProfileImage = new Bitmap(await "https://avatars.githubusercontent.com/u/8858506".GetStreamAsync());
+                DarthAffeProfileImage = new Bitmap(await "https://avatars.githubusercontent.com/u/1094841".GetStreamAsync());
+                DrMeteorProfileImage = new Bitmap(await "https://avatars.githubusercontent.com/u/29486064".GetStreamAsync());
+                KaiProfileImage = new Bitmap(await "https://i.imgur.com/8mPWY1j.png".GetStreamAsync());
+            }
+            catch (Exception)
+            {
+                // ignored, unluckyyyy
+            }
+        }
+    }
+}

src/Artemis.UI.Avalonia/Screens/Settings/ViewModels/DevicesTabViewModel.cs

@@ -0,0 +1,16 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace Artemis.UI.Avalonia.Screens.Settings.ViewModels
+{
+    public class DevicesTabViewModel : ActivatableViewModelBase
+    {
+        public DevicesTabViewModel()
+        {
+            DisplayName = "Devices";
+        }
+    }
+}

src/Artemis.UI.Avalonia/Screens/Settings/ViewModels/GeneralTabViewModel.cs

@@ -0,0 +1,16 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace Artemis.UI.Avalonia.Screens.Settings.ViewModels
+{
+    public class GeneralTabViewModel : ActivatableViewModelBase
+    {
+        public GeneralTabViewModel()
+        {
+            DisplayName = "General";
+        }
+    }
+}

src/Artemis.UI.Avalonia/Screens/Settings/ViewModels/PluginsTabViewModel.cs

@@ -0,0 +1,16 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace Artemis.UI.Avalonia.Screens.Settings.ViewModels
+{
+    public class PluginsTabViewModel : ActivatableViewModelBase
+    {
+        public PluginsTabViewModel()
+        {
+            DisplayName = "Plugins";
+        }
+    }
+}

src/Artemis.UI.Avalonia/Screens/Settings/ViewModels/SettingsViewModel.cs

@@ -0,0 +1,25 @@
+using System.Collections.ObjectModel;
+using ReactiveUI;
+
+namespace Artemis.UI.Avalonia.Screens.Settings.ViewModels
+{
+    public class SettingsViewModel : MainScreenViewModel
+    {
+        public SettingsViewModel(IScreen hostScreen,
+            GeneralTabViewModel generalTabViewModel,
+            PluginsTabViewModel pluginsTabViewModel,
+            DevicesTabViewModel devicesTabViewModel,
+            AboutTabViewModel aboutTabViewModel) : base(hostScreen, "settings")
+        {
+            SettingTabs = new ObservableCollection<ActivatableViewModelBase>
+            {
+                generalTabViewModel,
+                pluginsTabViewModel,
+                devicesTabViewModel,
+                aboutTabViewModel
+            };
+        }
+
+        public ObservableCollection<ActivatableViewModelBase> SettingTabs { get; }
+    }
+}

src/Artemis.UI.Avalonia/Screens/Settings/ViewModels/SurfaceEditorViewModel.cs

@@ -1,12 +0,0 @@
-using ReactiveUI;
-
-namespace Artemis.UI.Avalonia.Screens.Settings.ViewModels
-{
-    public class SettingsViewModel : MainScreenViewModel
-    {
-        public SettingsViewModel(IScreen hostScreen) : base(hostScreen, "settings")
-        {
-            DisplayName = "Settings";
-        }
-    }
-}

src/Artemis.UI.Avalonia/Screens/Settings/Views/AboutTabView.axaml

@@ -0,0 +1,270 @@
+<UserControl xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             xmlns:svg="clr-namespace:Avalonia.Svg.Skia;assembly=Avalonia.Svg.Skia"
+             xmlns:controls="clr-namespace:FluentAvalonia.UI.Controls;assembly=FluentAvalonia"
+             xmlns:avalonia="clr-namespace:Material.Icons.Avalonia;assembly=Material.Icons.Avalonia"
+             mc:Ignorable="d" d:DesignWidth="1000" d:DesignHeight="1400"
+             x:Class="Artemis.UI.Avalonia.Screens.Settings.Views.AboutTabView">
+    <ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled">
+        <StackPanel Margin="15" MaxWidth="800">
+            <Grid RowDefinitions="*,*" ColumnDefinitions="Auto,*,Auto">
+                <Image Grid.Column="0" Grid.RowSpan="2" Width="140" Height="140" VerticalAlignment="Center">
+                    <Image.Source>
+                        <svg:SvgImage Source="/Assets/Images/Logo/bow.svg" />
+                    </Image.Source>
+                </Image>
+                <TextBlock Grid.Row="0" Grid.Column="1" FontSize="36" VerticalAlignment="Bottom">
+                    Artemis 2
+                </TextBlock>
+
+                <StackPanel Grid.Row="0" Grid.Column="2" HorizontalAlignment="Right" VerticalAlignment="Bottom" Orientation="Horizontal">
+                    <controls:HyperlinkButton Classes="icon-button" ToolTip.Tip="View website" NavigateUri="https://artemis-rgb.com">
+                        <avalonia:MaterialIcon Kind="Web" />
+                    </controls:HyperlinkButton>
+                    <controls:HyperlinkButton Classes="icon-button" ToolTip.Tip="View GitHub repository" NavigateUri="https://github.com/Artemis-RGB/Artemis">
+                        <avalonia:MaterialIcon Kind="Github" />
+                    </controls:HyperlinkButton>
+                    <controls:HyperlinkButton Classes="icon-button" ToolTip.Tip="View Wiki" NavigateUri="https://wiki.artemis-rgb.com">
+                        <avalonia:MaterialIcon Kind="BookOpenOutline" />
+                    </controls:HyperlinkButton>
+                </StackPanel>
+
+                <TextBlock Grid.Row="1"
+                           Grid.Column="1"
+                           VerticalAlignment="Top"
+                           Foreground="{DynamicResource MaterialDesignBodyLight}"
+                           Text="{Binding Version}" />
+
+                <controls:HyperlinkButton Grid.Row="1"
+                                          Grid.Column="2"
+                                          VerticalAlignment="Top"
+                                          NavigateUri="https://github.com/Artemis-RGB/Artemis/blob/master/LICENSE">
+                    PolyForm Noncommercial License 1.0.0
+                </controls:HyperlinkButton>
+            </Grid>
+
+            <Border Classes="card" Margin="0 20 0 10">
+                <StackPanel>
+                    <Grid RowDefinitions="*,*,*" ColumnDefinitions="Auto,*">
+                        <Ellipse Grid.Row="0"
+                                 Grid.Column="0"
+                                 Grid.RowSpan="3"
+                                 VerticalAlignment="Top"
+                                 Height="75"
+                                 Width="75"
+                                 Margin="0 0 15 0"
+                                 IsVisible="{Binding RobertProfileImage, Converter={x:Static StringConverters.IsNotNullOrEmpty}}">
+                            <Ellipse.Fill>
+								<ImageBrush Source="{Binding RobertProfileImage}" />
+                            </Ellipse.Fill>
+                        </Ellipse>
+                        <TextBlock Grid.Row="0" Grid.Column="1" Padding="0">
+                            Robert Beekman
+                        </TextBlock>
+                        <TextBlock Classes="subtitle" Grid.Column="1" Grid.Row="1" Padding="0">
+                            Project owner, main contributor
+                        </TextBlock>
+                        <StackPanel Grid.Column="1" Grid.Row="2" Orientation="Horizontal" Margin="-6">
+                            <controls:HyperlinkButton Classes="icon-button" ToolTip.Tip="View GitHub profile" NavigateUri="https://github.com/RobertBeekman/">
+                                <avalonia:MaterialIcon Kind="Github" Width="20" Height="20" />
+                            </controls:HyperlinkButton>
+                        </StackPanel>
+                    </Grid>
+
+                    <Separator Classes="card-separator" />
+
+                    <Grid>
+                        <Grid.RowDefinitions>
+                            <RowDefinition />
+                            <RowDefinition />
+                            <RowDefinition />
+                        </Grid.RowDefinitions>
+                        <Grid.ColumnDefinitions>
+                            <ColumnDefinition Width="Auto" />
+                            <ColumnDefinition Width="*" />
+                        </Grid.ColumnDefinitions>
+                        <Ellipse Grid.Row="0"
+                                 Grid.Column="0"
+                                 Grid.RowSpan="3"
+                                 VerticalAlignment="Top"
+                                 Height="75"
+                                 Width="75"
+                                 Margin="0 0 15 0"
+                                 IsVisible="{Binding DarthAffeProfileImage, Converter={x:Static StringConverters.IsNotNullOrEmpty}}">
+                            <Ellipse.Fill>
+                                <ImageBrush Source="{Binding DarthAffeProfileImage}" />
+                            </Ellipse.Fill>
+                        </Ellipse>
+                        <TextBlock Grid.Row="0" Grid.Column="1" Padding="0">
+                            Darth Affe
+                        </TextBlock>
+                        <TextBlock Classes="subtitle" Grid.Column="1" Grid.Row="1" Padding="0">
+                            RGB.NET, main contributor
+                        </TextBlock>
+                        <StackPanel Grid.Column="1" Grid.Row="2" Orientation="Horizontal" Margin="-6">
+                            <controls:HyperlinkButton Classes="icon-button" ToolTip.Tip="View GitHub profile" NavigateUri="https://github.com/DarthAffe/">
+                                <avalonia:MaterialIcon Kind="Github" Width="20" Height="20" />
+                            </controls:HyperlinkButton>
+                        </StackPanel>
+                    </Grid>
+
+                    <Separator Classes="card-separator" />
+
+                    <Grid RowDefinitions="*,*,*" ColumnDefinitions="Auto,*">
+                        <Ellipse Grid.Row="0"
+                                 Grid.Column="0"
+                                 Grid.RowSpan="3"
+                                 VerticalAlignment="Top"
+                                 Height="75"
+                                 Width="75"
+                                 Margin="0 0 15 0"
+                                 IsVisible="{Binding DrMeteorProfileImage, Converter={x:Static StringConverters.IsNotNullOrEmpty}}">
+                            <Ellipse.Fill>
+                                <ImageBrush Source="{Binding DrMeteorProfileImage}" />
+                            </Ellipse.Fill>
+                        </Ellipse>
+                        <TextBlock Grid.Row="0" Grid.Column="1" Padding="0">
+                            Diogo 'DrMeteor' Trindade
+                        </TextBlock>
+                        <TextBlock Classes="subtitle" Grid.Column="1" Grid.Row="1" Padding="0">
+                            Main contributor
+                        </TextBlock>
+                        <StackPanel Grid.Column="1" Grid.Row="2" Orientation="Horizontal" Margin="-6">
+                            <controls:HyperlinkButton Classes="icon-button" ToolTip.Tip="View GitHub profile" NavigateUri="https://github.com/diogotr7/">
+                                <avalonia:MaterialIcon Kind="Github" Width="20" Height="20" />
+                            </controls:HyperlinkButton>
+                        </StackPanel>
+                    </Grid>
+
+                    <Separator Classes="card-separator" />
+
+                    <Grid RowDefinitions="*,*,*" ColumnDefinitions="Auto,*">
+                        <Ellipse Grid.Row="0"
+                                 Grid.Column="0"
+                                 Grid.RowSpan="3"
+                                 VerticalAlignment="Top"
+                                 Height="75"
+                                 Width="75"
+                                 Margin="0 0 15 0"
+                                 IsVisible="{Binding KaiProfileImage, Converter={x:Static StringConverters.IsNotNullOrEmpty}}">
+                            <Ellipse.Fill>
+                                <ImageBrush Source="{Binding KaiProfileImage}"  />
+                            </Ellipse.Fill>
+                        </Ellipse>
+                        <TextBlock Grid.Row="0" Grid.Column="1" Padding="0">
+                            Kai Werling
+                        </TextBlock>
+                        <TextBlock Classes="subtitle" Grid.Column="1" Grid.Row="1" Padding="0">
+                            Graphics design
+                        </TextBlock>
+                        <StackPanel Grid.Column="1" Grid.Row="2" Orientation="Horizontal" Margin="-6">
+                            <controls:HyperlinkButton Classes="icon-button" ToolTip.Tip="View website" NavigateUri="https://kwer.online/">
+                                <avalonia:MaterialIcon Kind="Web" Width="20" Height="20" />
+                            </controls:HyperlinkButton>
+                        </StackPanel>
+                    </Grid>
+                </StackPanel>
+            </Border>
+
+            <Border Classes="card" Margin="0 10">
+                <StackPanel>
+                    <StackPanel Margin="0 0 0 12" Orientation="Horizontal">
+                        <avalonia:MaterialIcon Kind="UserHeart" Height="35" Width="35" Margin="0 0 10 0" />
+                        <TextBlock Classes="h4">
+                            Special Thanks
+                        </TextBlock>
+                    </StackPanel>
+
+                    <TextBlock>
+                        - The various people creating PRs to Artemis.Plugins and the main repository
+                    </TextBlock>
+                    <TextBlock>
+                        - All the people on Discord providing feedback and testing
+                    </TextBlock>
+                </StackPanel>
+
+            </Border>
+
+            <Border Classes="card" Margin="0 10">
+                <StackPanel>
+                    <StackPanel Margin="0 0 0 12" Orientation="Horizontal">
+                        <avalonia:MaterialIcon Kind="Dependency" Height="35" Width="35" Margin="0 0 10 0" />
+                        <TextBlock Classes="h4">
+                            External Libraries
+                        </TextBlock>
+                    </StackPanel>
+                    <Grid ColumnDefinitions="Auto,*">
+                        <Grid.Styles>
+                            <Style Selector="TextBlock.library-name">
+                                <Setter Property="Margin" Value="0 7 15 6"/>
+                                <Setter Property="FontWeight" Value="600"/>
+                            </Style>
+                        </Grid.Styles>
+						
+                        <StackPanel Grid.Row="0" Grid.Column="0">
+							<TextBlock Classes="library-name">Avalonia</TextBlock>
+							<TextBlock Classes="library-name">FluentAvalonia</TextBlock>
+							<TextBlock Classes="library-name">EmbedIO</TextBlock>
+							<TextBlock Classes="library-name">Furl.Http</TextBlock>
+							<TextBlock Classes="library-name">Humanizer</TextBlock>
+							<TextBlock Classes="library-name">LiteDB</TextBlock>
+							<TextBlock Classes="library-name">McMaster.NETCore.Plugins</TextBlock>
+							<TextBlock Classes="library-name">Newtonsoft.Json</TextBlock>
+							<TextBlock Classes="library-name">Ninject</TextBlock>
+							<TextBlock Classes="library-name">RGB.NET</TextBlock>
+							<TextBlock Classes="library-name">Serilog</TextBlock>
+							<TextBlock Classes="library-name">SkiaSharp</TextBlock>
+							<TextBlock Classes="library-name">Unclassified.NetRevisionTask</TextBlock>
+						</StackPanel>
+                        <StackPanel Grid.Column="1">
+                            <controls:HyperlinkButton NavigateUri="https://avaloniaui.net/">
+								https://avaloniaui.net/
+							</controls:HyperlinkButton>
+                            <controls:HyperlinkButton NavigateUri="https://github.com/amwx/FluentAvalonia">
+								https://github.com/amwx/FluentAvalonia
+							</controls:HyperlinkButton>
+                            <controls:HyperlinkButton NavigateUri="https://unosquare.github.io/embedio/">
+                                https://unosquare.github.io/embedio/
+                            </controls:HyperlinkButton>
+                            <controls:HyperlinkButton NavigateUri="https://flurl.dev/">
+								https://flurl.dev/
+							</controls:HyperlinkButton>
+                            <controls:HyperlinkButton NavigateUri="https://github.com/Humanizr/Humanizer">
+								https://github.com/Humanizr/Humanizer
+							</controls:HyperlinkButton>
+                            <controls:HyperlinkButton NavigateUri="https://www.litedb.org/">
+								https://www.litedb.org/
+							</controls:HyperlinkButton>
+                            <controls:HyperlinkButton NavigateUri="https://github.com/natemcmaster/DotNetCorePlugins">
+								https://github.com/natemcmaster/DotNetCorePlugins
+							</controls:HyperlinkButton>
+                            <controls:HyperlinkButton NavigateUri="https://www.newtonsoft.com/json">
+								https://www.newtonsoft.com/json
+							</controls:HyperlinkButton>
+                            <controls:HyperlinkButton NavigateUri="http://www.ninject.org/">
+								http://www.ninject.org/
+							</controls:HyperlinkButton>
+                            <controls:HyperlinkButton NavigateUri="https://github.com/DarthAffe/RGB.NET">
+								https://github.com/DarthAffe/RGB.NET
+							</controls:HyperlinkButton>
+                            <controls:HyperlinkButton NavigateUri="https://serilog.net/">
+								https://serilog.net/
+							</controls:HyperlinkButton>
+                            <controls:HyperlinkButton NavigateUri="https://github.com/mono/SkiaSharp">
+								https://github.com/mono/SkiaSharp
+							</controls:HyperlinkButton>
+                            <controls:HyperlinkButton NavigateUri="https://unclassified.software/en/apps/netrevisiontask">
+								https://unclassified.software/en/apps/netrevisiontask
+							</controls:HyperlinkButton>
+                        </StackPanel>
+
+					</Grid>
+                </StackPanel>
+
+
+            </Border>
+        </StackPanel>
+    </ScrollViewer>
+</UserControl>

src/Artemis.UI.Avalonia/Screens/Settings/Views/AboutTabView.axaml.cs

@@ -0,0 +1,21 @@
+using Artemis.UI.Avalonia.Screens.Settings.ViewModels;
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Markup.Xaml;
+using Avalonia.ReactiveUI;
+
+namespace Artemis.UI.Avalonia.Screens.Settings.Views
+{
+    public partial class AboutTabView : ReactiveUserControl<AboutTabViewModel>
+    {
+        public AboutTabView()
+        {
+            InitializeComponent();
+        }
+
+        private void InitializeComponent()
+        {
+            AvaloniaXamlLoader.Load(this);
+        }
+    }
+}

src/Artemis.UI.Avalonia/Screens/Settings/Views/DevicesTabView.axaml

@@ -0,0 +1,8 @@
+<UserControl xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
+             x:Class="Artemis.UI.Avalonia.Screens.Settings.Views.DevicesTabView">
+  Welcome to Avalonia!
+</UserControl>

src/Artemis.UI.Avalonia/Screens/Settings/Views/DevicesTabView.axaml.cs

@@ -0,0 +1,19 @@
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Markup.Xaml;
+
+namespace Artemis.UI.Avalonia.Screens.Settings.Views
+{
+    public partial class DevicesTabView : UserControl
+    {
+        public DevicesTabView()
+        {
+            InitializeComponent();
+        }
+
+        private void InitializeComponent()
+        {
+            AvaloniaXamlLoader.Load(this);
+        }
+    }
+}

src/Artemis.UI.Avalonia/Screens/Settings/Views/GeneralTabView.axaml

@@ -0,0 +1,8 @@
+<UserControl xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
+             x:Class="Artemis.UI.Avalonia.Screens.Settings.Views.GeneralTabView">
+  Welcome to Avalonia!
+</UserControl>

src/Artemis.UI.Avalonia/Screens/Settings/Views/GeneralTabView.axaml.cs

@@ -0,0 +1,19 @@
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Markup.Xaml;
+
+namespace Artemis.UI.Avalonia.Screens.Settings.Views
+{
+    public partial class GeneralTabView : UserControl
+    {
+        public GeneralTabView()
+        {
+            InitializeComponent();
+        }
+
+        private void InitializeComponent()
+        {
+            AvaloniaXamlLoader.Load(this);
+        }
+    }
+}

src/Artemis.UI.Avalonia/Screens/Settings/Views/PluginsTabView.axaml

@@ -0,0 +1,8 @@
+<UserControl xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
+             x:Class="Artemis.UI.Avalonia.Screens.Settings.Views.PluginsTabView">
+  Welcome to Avalonia!
+</UserControl>

src/Artemis.UI.Avalonia/Screens/Settings/Views/PluginsTabView.axaml.cs

@@ -0,0 +1,19 @@
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Markup.Xaml;
+
+namespace Artemis.UI.Avalonia.Screens.Settings.Views
+{
+    public partial class PluginsTabView : UserControl
+    {
+        public PluginsTabView()
+        {
+            InitializeComponent();
+        }
+
+        private void InitializeComponent()
+        {
+            AvaloniaXamlLoader.Load(this);
+        }
+    }
+}

src/Artemis.UI.Avalonia/Screens/Settings/Views/SettingsView.axaml

@@ -4,5 +4,16 @@
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
              mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
              x:Class="Artemis.UI.Avalonia.Screens.Settings.Views.SettingsView">
-    Settings! :D
+    <TabControl Margin="12" Items="{Binding SettingTabs}">
+        <TabControl.ItemTemplate>
+            <DataTemplate>
+                <TextBlock Text="{Binding DisplayName}" />
+            </DataTemplate>
+        </TabControl.ItemTemplate>
+        <TabControl.ContentTemplate>
+            <DataTemplate>
+                <ContentControl Content="{Binding}" />
+            </DataTemplate>
+        </TabControl.ContentTemplate>
+    </TabControl>
 </UserControl>

src/Artemis.UI.Avalonia/Styles/Border.axaml

@@ -1,24 +1,38 @@
 <Styles xmlns="https://github.com/avaloniaui"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
     <Design.PreviewWith>
-        <Border Classes="router-container">
+        <StackPanel>
-            <Border Classes="card" Margin="40">
+            <Border Classes="card" Margin="20">
                 <TextBlock>I'm in a panel yo!</TextBlock>
             </Border>
-        </Border>
+            <Border Classes="card" Margin="20">
+                <StackPanel>
+                    <TextBlock>I'm in a panel yo!</TextBlock>
+                    <Separator Classes="card-separator" />
+                    <TextBlock>I'm in a panel yo!</TextBlock>
+                </StackPanel>
+            </Border>
+        </StackPanel>
     </Design.PreviewWith>
 
     <!-- Add Styles Here -->
-	<Style Selector="Border.router-container">
+    <Style Selector="Border.router-container">
-		<Setter Property="Margin" Value="0 40 0 0"/>
+        <Setter Property="Margin" Value="0 40 0 0" />
-		<Setter Property="Background" Value="{DynamicResource SolidBackgroundFillColorTertiary}" />
+        <Setter Property="Background" Value="{DynamicResource SolidBackgroundFillColorTertiary}" />
-		<Setter Property="CornerRadius" Value="6 0 0 0" />
+        <Setter Property="CornerRadius" Value="8 0 0 0" />
-		<Setter Property="ClipToBounds" Value="True" />
+        <Setter Property="ClipToBounds" Value="True" />
-	</Style>
+    </Style>
 
     <Style Selector="Border.card">
-        <Setter Property="Padding" Value="{DynamicResource FlyoutContentThemePadding}" />
+        <Setter Property="Padding" Value="25" />
         <Setter Property="Background" Value="{DynamicResource ControlFillColorDefaultBrush}" />
-        <Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
+        <Setter Property="CornerRadius" Value="10" />
+    </Style>
+
+	<Style Selector="Separator.card-separator">
+		<Setter Property="Background" Value="{DynamicResource ControlFillColorDefaultBrush}" />
+        <Setter Property="Margin" Value="-12 15" />
+		<Setter Property="Height" Value="1" />
+        
     </Style>
 </Styles>

src/Artemis.UI.Avalonia/Styles/Button.axaml

@@ -4,7 +4,7 @@
         xmlns:controls="clr-namespace:FluentAvalonia.UI.Controls;assembly=FluentAvalonia">
     <!-- Preview -->
     <Design.PreviewWith>
-        <Border Padding="20">
+		<Border Padding="20">
             <StackPanel>
                 <TextBlock Margin="0 5 0 0">Button.icon-button</TextBlock>
                 <Button Classes="icon-button">

src/Artemis.UI.Avalonia/Styles/TextBlock.axaml

@@ -0,0 +1,39 @@
+<Styles xmlns="https://github.com/avaloniaui"
+        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <Design.PreviewWith>
+        <Border Padding="20">
+            <StackPanel>
+                <TextBlock Classes="h1">This is heading 1</TextBlock>
+                <TextBlock Classes="h2">This is heading 2</TextBlock>
+                <TextBlock Classes="h3">This is heading 3</TextBlock>
+                <TextBlock Classes="h4">This is heading 4</TextBlock>
+                <TextBlock Classes="h5">This is heading 5</TextBlock>
+                <TextBlock Classes="h6">This is heading 6</TextBlock>
+                <TextBlock Classes="subtitle">This is a subtitle</TextBlock>
+            </StackPanel>
+        </Border>
+    </Design.PreviewWith>
+
+    <!-- Add Styles Here -->
+    <Style Selector="TextBlock.h1">
+        <Setter Property="FontSize" Value="64" />
+    </Style>
+    <Style Selector="TextBlock.h2">
+        <Setter Property="FontSize" Value="48" />
+    </Style>
+    <Style Selector="TextBlock.h3">
+        <Setter Property="FontSize" Value="32" />
+    </Style>
+    <Style Selector="TextBlock.h4">
+        <Setter Property="FontSize" Value="24" />
+    </Style>
+    <Style Selector="TextBlock.h5">
+        <Setter Property="FontSize" Value="16" />
+    </Style>
+    <Style Selector="TextBlock.h6">
+        <Setter Property="FontSize" Value="14" />
+    </Style>
+    <Style Selector="TextBlock.subtitle">
+		<Setter Property="Foreground" Value="{DynamicResource TextFillColorTertiaryBrush}" />
+    </Style>
+</Styles>

src/Artemis.UI.Avalonia/packages.lock.json

@@ -76,6 +76,17 @@
           "Avalonia.Diagnostics": "0.10.7"
         }
       },
+      "Flurl.Http": {
+        "type": "Direct",
+        "requested": "[3.2.0, )",
+        "resolved": "3.2.0",
+        "contentHash": "5S8YiJm5CyRFO418GG9PDrsgmGEaZJtZLUqk3xqBKrfx7W9eKtOSpeji/GwAL+tSgNTALKBPvBKTaT4S83Oo+w==",
+        "dependencies": {
+          "Flurl": "3.0.2",
+          "Newtonsoft.Json": "12.0.2",
+          "System.Text.Encoding.CodePages": "4.5.1"
+        }
+      },
       "Live.Avalonia": {
         "type": "Direct",
         "requested": "[1.3.1, )",
@@ -241,6 +252,11 @@
         "resolved": "1.2.0",
         "contentHash": "CPxuWF8EPvM0rwAtMTR5G+7EuLoGNXsEfqyx06upN9JyVALZ73KgbGn3SLFwGosifiUAXrvNHtXlUwGGytdECg=="
       },
+      "Flurl": {
+        "type": "Transitive",
+        "resolved": "3.0.2",
+        "contentHash": "1/6mqdzGCTdAekbWkVZBTylCV+8g3JUSTXRBngRVR274S+RsAYNRF79GbDoDsPfMKu8VPc9HkQWdBEAncK1PQQ=="
+      },
       "HarfBuzzSharp": {
         "type": "Transitive",
         "resolved": "2.6.1.7",