HelloThere styling

src/PixiEditor.AvaloniaUI/Models/Services/NewsFeed/News.cs

@@ -5,21 +5,22 @@ using System.Text;
 using Newtonsoft.Json;
 using PixiEditor.AvaloniaUI.Helpers.Converters.JsonConverters;
 using PixiEditor.Extensions.Helpers;
+using PixiEditor.UI.Common.Fonts;
 
 namespace PixiEditor.AvaloniaUI.Models.Services.NewsFeed;
 
 [JsonConverter(typeof(DefaultUnknownEnumConverter), (int)Misc)]
 internal enum NewsType
 {
-    [Description("NewVersion.png")]
+    [Description(PixiPerfectIcons.Download)]
     NewVersion,
-    [Description("YouTube.png")]
+    [Description(PixiPerfectIcons.YouTube)]
     YtVideo,
-    [Description("Article.png")]
+    [Description(PixiPerfectIcons.Write)]
     BlogPost,
-    [Description("OfficialAnnouncement.png")]
+    [Description(PixiPerfectIcons.Message)]
     OfficialAnnouncement,
-    [Description("Misc.png")]
+    [Description(PixiPerfectIcons.Misc)]
     Misc
 }
 
@@ -32,7 +33,7 @@ internal record News
     public string CoverImageUrl { get; init; } = string.Empty;
 
     [JsonIgnore]
-    public string ResolvedIconUrl => $"/Images/News/{NewsType.GetDescription()}";
+    public string ResolvedIcon => NewsType.GetDescription();
 
     [JsonIgnore]
     public bool IsNew { get; set; } = false;

src/PixiEditor.AvaloniaUI/Views/NewsFeed/NewsItem.axaml

@@ -20,9 +20,10 @@
                     </StackPanel>
                 </Border>
             </Grid>
-            <StackPanel Margin="8 0" Orientation="Horizontal">
-                <Image Margin="0 0 5 0" Width="25"
-                       Source="{Binding ElementName=newsItem, Path=News.ResolvedIconUrl, Converter={converters:ImagePathToBitmapConverter}}" />
+            <StackPanel Margin="5 0" Spacing="2" Orientation="Horizontal">
+                <TextBlock Padding="0" Width="25" Height="25" Classes="pixi-icon"
+                           FontSize="24"
+                       Text="{Binding ElementName=newsItem, Path=News.ResolvedIcon}" />
                 <Label VerticalAlignment="Center" HorizontalAlignment="Center">
                     <TextBlock Width="200" TextTrimming="CharacterEllipsis" MaxHeight="50"
                                ui:Hyperlink.Url="{Binding ElementName=newsItem, Path=News.Url}"

src/PixiEditor.AvaloniaUI/Views/Windows/HelloTherePopup.axaml

@@ -1,100 +1,85 @@
 <dialogs:PixiEditorPopup x:Class="PixiEditor.AvaloniaUI.Views.Windows.HelloTherePopup"
-        x:ClassModifier="internal"
-        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:ui="clr-namespace:PixiEditor.Extensions.UI;assembly=PixiEditor.Extensions"
-        xmlns:system="clr-namespace:System;assembly=System.Runtime"
-        xmlns:converters="clr-namespace:PixiEditor.AvaloniaUI.Helpers.Converters"
-        xmlns:dataHolders="clr-namespace:PixiEditor.AvaloniaUI.Models.UserData"
-        xmlns:panels="clr-namespace:PixiEditor.AvaloniaUI.Views.Panels"
-        xmlns:xaml="clr-namespace:PixiEditor.AvaloniaUI.Models.Commands.XAML"
-        xmlns:indicators1="clr-namespace:PixiEditor.AvaloniaUI.Views.Indicators"
-        xmlns:newsFeed1="clr-namespace:PixiEditor.AvaloniaUI.Views.NewsFeed"
-        xmlns:dialogs="clr-namespace:PixiEditor.AvaloniaUI.Views.Dialogs"
-        xmlns:visuals="clr-namespace:PixiEditor.AvaloniaUI.Views.Visuals"
-        xmlns:skiaSharp="clr-namespace:SkiaSharp;assembly=SkiaSharp"
-        xmlns:ui1="clr-namespace:PixiEditor.AvaloniaUI.Helpers.UI"
-        mc:Ignorable="d"
-        Title="Hello there!" Height="662" Width="982" MinHeight="500" MinWidth="500"
-        Loaded="HelloTherePopup_OnLoaded">
+                         x:ClassModifier="internal"
+                         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:ui="clr-namespace:PixiEditor.Extensions.UI;assembly=PixiEditor.Extensions"
+                         xmlns:system="clr-namespace:System;assembly=System.Runtime"
+                         xmlns:converters="clr-namespace:PixiEditor.AvaloniaUI.Helpers.Converters"
+                         xmlns:dataHolders="clr-namespace:PixiEditor.AvaloniaUI.Models.UserData"
+                         xmlns:panels="clr-namespace:PixiEditor.AvaloniaUI.Views.Panels"
+                         xmlns:xaml="clr-namespace:PixiEditor.AvaloniaUI.Models.Commands.XAML"
+                         xmlns:indicators1="clr-namespace:PixiEditor.AvaloniaUI.Views.Indicators"
+                         xmlns:newsFeed1="clr-namespace:PixiEditor.AvaloniaUI.Views.NewsFeed"
+                         xmlns:dialogs="clr-namespace:PixiEditor.AvaloniaUI.Views.Dialogs"
+                         xmlns:visuals="clr-namespace:PixiEditor.AvaloniaUI.Views.Visuals"
+                         xmlns:skiaSharp="clr-namespace:SkiaSharp;assembly=SkiaSharp"
+                         xmlns:ui1="clr-namespace:PixiEditor.AvaloniaUI.Helpers.UI"
+                         mc:Ignorable="d"
+                         Title="Hello there!" Height="662" Width="982" MinHeight="500" MinWidth="500"
+                         Loaded="HelloTherePopup_OnLoaded">
 
     <Window.Styles>
         <Style Selector="TextBlock">
-            <Setter Property="Foreground" Value="White"/>
-            <Setter Property="FontSize" Value="16"/>
+            <Setter Property="Foreground" Value="White" />
+            <Setter Property="FontSize" Value="16" />
         </Style>
     </Window.Styles>
 
     <DockPanel>
         <Grid Background="{DynamicResource ThemeBackgroundBrush}" x:Name="grid">
             <Grid.ColumnDefinitions>
-                <ColumnDefinition Width="*"/>
-                <ColumnDefinition Width="300"/>
+                <ColumnDefinition Width="*" />
+                <ColumnDefinition Width="300" />
             </Grid.ColumnDefinitions>
 
-            <ScrollViewer Grid.Column="0"  VerticalScrollBarVisibility="Auto" Margin="3,0">
+            <ScrollViewer Grid.Column="0" VerticalScrollBarVisibility="Auto" Margin="3,0">
                 <Grid Grid.Row="1" Margin="0,30,0,0">
                     <Grid.RowDefinitions>
-                        <RowDefinition Height="90"/>
-                        <RowDefinition Height="Auto"/>
-                        <RowDefinition MinHeight="120"/>
-                        <RowDefinition Height="Auto"/>
+                        <RowDefinition Height="90" />
+                        <RowDefinition Height="Auto" />
+                        <RowDefinition MinHeight="120" />
+                        <RowDefinition Height="Auto" />
                     </Grid.RowDefinitions>
 
                     <Grid Grid.RowSpan="3" HorizontalAlignment="Right" VerticalAlignment="Center">
-                        <CheckBox IsVisible="{Binding !NewsDisabled}"
+                        <CheckBox IsVisible="{Binding !NewsDisabled}" Cursor="Hand"
                                   Width="40" Height="40" IsChecked="{Binding NewsPanelCollapsed}">
-                        <CheckBox.Template>
-                            <ControlTemplate TargetType="{x:Type CheckBox}">
-                                <StackPanel Orientation="Horizontal" Focusable="False">
-                                    <StackPanel.Background>
-                                        <VisualBrush>
-                                            <VisualBrush.Visual>
-                                                <Ellipse Fill="{DynamicResource ThemeBackgroundBrush}" Width="20" Height="20"/>
-                                            </VisualBrush.Visual>
-                                        </VisualBrush>
-                                    </StackPanel.Background>
-                                    <TextBlock Focusable="False" Cursor="Hand" x:Name="checkboxImage" 
-                                               Classes="pixi-icon"
-                                               Text="{DynamicResource icon-chevron-right}">
-                                        <TextBlock.RenderTransform>
-                                            <RotateTransform Angle="180" CenterX="19" CenterY="20"/>
-                                        </TextBlock.RenderTransform>
-                                    </TextBlock>
-                                    <ContentPresenter Focusable="False"/>
-                                </StackPanel>
-
-                                <!--<ControlTemplate.Triggers>
-                                    <Trigger Property="IsChecked" Value="True">
-                                        <Setter TargetName="checkboxImage" Property="RenderTransform">
-                                            <Setter.Value>
-                                                <RotateTransform Angle="0" CenterX="1" CenterY="0"/>
-                                            </Setter.Value>
-                                        </Setter>
-                                    </Trigger>
-                                </ControlTemplate.Triggers>-->
-                            </ControlTemplate>
-                        </CheckBox.Template>
-                    </CheckBox>
+                            <CheckBox.Styles>
+                                <Style Selector="CheckBox:checked TextBlock#checkboxImage">
+                                    <Setter Property="Text" Value="{DynamicResource icon-chevron-right}" />
+                                    <Setter Property="Margin" Value="2 0 0 0"/>
+                                </Style>
+                            </CheckBox.Styles>
+                            <CheckBox.Template>
+                                <ControlTemplate TargetType="{x:Type CheckBox}">
+                                    <Border CornerRadius="50" Width="40" Height="40" Background="{DynamicResource ThemeBackgroundBrush2}">
+                                        <TextBlock Focusable="False" x:Name="checkboxImage"
+                                                   Classes="pixi-icon" FontSize="40" Margin="-2 0 0 0"
+                                                   Text="{DynamicResource icon-chevron-left}" />
+                                    </Border>
+                                </ControlTemplate>
+                            </CheckBox.Template>
+                        </CheckBox>
                     </Grid>
                     <StackPanel Grid.Row="0" HorizontalAlignment="Center">
-                        <Svg Path="/Images/PixiEditorLogoWithName.svg" Height="60" VerticalAlignment="Top"/>
-                        <TextBlock HorizontalAlignment="Center" FontSize="20" FontWeight="Medium" Text="{Binding VersionText}"/>
+                        <Svg Path="/Images/PixiEditorLogoWithName.svg" Height="60" VerticalAlignment="Top" />
+                        <TextBlock HorizontalAlignment="Center" FontSize="20" FontWeight="Medium"
+                                   Text="{Binding VersionText}" />
                     </StackPanel>
 
                     <StackPanel Grid.Row="1" Orientation="Horizontal" HorizontalAlignment="Center">
-                        <Button  Command="{Binding OpenFileCommand}" MinWidth="150" Margin="10"
-                                ui:Translator.Key="OPEN_FILE"/>
+                        <Button Command="{Binding OpenFileCommand}" MinWidth="150" Margin="10"
+                                ui:Translator.Key="OPEN_FILE" />
                         <Button Command="{Binding OpenNewFileCommand}" MinWidth="150" Margin="10"
-                                ui:Translator.Key="NEW_FILE"/>
+                                ui:Translator.Key="NEW_FILE" />
                     </StackPanel>
 
                     <StackPanel Grid.Row="2" HorizontalAlignment="Center" Margin="0,30,0,0">
                         <TextBlock FontSize="23" FontWeight="SemiBold" HorizontalAlignment="Center"
-                                   ui:Translator.Key="RECENT_FILES"/>
-                        <TextBlock Margin="0,12.5,0,0" Foreground="LightGray" HorizontalAlignment="Center" 
+                                   ui:Translator.Key="RECENT_FILES" />
+                        <TextBlock Margin="0,12.5,0,0" Foreground="LightGray" HorizontalAlignment="Center"
                                    ui:Translator.Key="RECENT_EMPTY_TEXT">
                             <TextBlock.IsVisible>
                                 <Binding Path="RecentlyOpened.Count"
@@ -123,14 +108,16 @@
                                                         Stretch="Uniform"
                                                         x:Name="image">
                                                         <ui:RenderOptionsBindable.BitmapInterpolationMode>
-                                                            <MultiBinding Converter="{converters:WidthToBitmapScalingModeConverter}">
-                                                                <Binding Path="PreviewBitmap.Size.X"/>
-                                                                <Binding ElementName="image" Path="Width"/>
+                                                            <MultiBinding
+                                                                Converter="{converters:WidthToBitmapScalingModeConverter}">
+                                                                <Binding Path="PreviewBitmap.Size.X" />
+                                                                <Binding ElementName="image" Path="Width" />
                                                             </MultiBinding>
                                                         </ui:RenderOptionsBindable.BitmapInterpolationMode>
                                                     </visuals:SurfaceControl>
-                                                    <Border Grid.Row="1" Height="8" Width="8" x:Name="extensionBorder" Margin="5"
-                                                            Background="{Binding FileExtension, Converter={converters:FileExtensionToColorConverter}}" 
+                                                    <Border Grid.Row="1" Height="8" Width="8" x:Name="extensionBorder"
+                                                            Margin="5"
+                                                            Background="{Binding FileExtension, Converter={converters:FileExtensionToColorConverter}}"
                                                             VerticalAlignment="Bottom" HorizontalAlignment="Right">
                                                         <!--<Border.Style>
                                                             <Style TargetType="Border">
@@ -186,7 +173,8 @@
                                                                 </Style.Triggers>
                                                             </Style>
                                                         </Border.Style>-->
-                                                        <Grid HorizontalAlignment="Center" Margin="0,10,0,0" Opacity="0">
+                                                        <Grid HorizontalAlignment="Center" Margin="0,10,0,0"
+                                                              Opacity="0">
                                                             <!--<Grid.Style>
                                                                 <Style TargetType="Grid">
                                                                     <Style.Triggers>
@@ -209,32 +197,41 @@
                                                                     </Style.Triggers>
                                                                 </Style>
                                                             </Grid.Style>-->
-                                                            <TextBlock x:Name="extension" VerticalAlignment="Top" Text="{Binding FileExtension}" FontSize="15" TextAlignment="Center"/>
-                                                            <StackPanel Orientation="Horizontal" VerticalAlignment="Bottom" HorizontalAlignment="Center">
+                                                            <TextBlock x:Name="extension" VerticalAlignment="Top"
+                                                                       Text="{Binding FileExtension}" FontSize="15"
+                                                                       TextAlignment="Center" />
+                                                            <StackPanel Orientation="Horizontal"
+                                                                        VerticalAlignment="Bottom"
+                                                                        HorizontalAlignment="Center">
                                                                 <StackPanel.Styles>
                                                                     <Style Selector="Button">
-                                                                        <Setter Property="Margin" Value="0,0,0,5"/>
-                                                                        <Setter Property="Width" Value="25"/>
-                                                                        <Setter Property="Height" Value="25"/>
-                                                                        <Setter Property="MinWidth" Value="25"/>
-                                                                        <Setter Property="MinHeight" Value="25"/>
-                                                                        <Setter Property="Background" Value="Transparent"/>
-                                                                        </Style>
-                                                                      <Style Selector="Button:hover">
-                                                                          <Setter Property="Background" Value="#70FFFFFF"/>
-                                                                      </Style>
+                                                                        <Setter Property="Margin" Value="0,0,0,5" />
+                                                                        <Setter Property="Width" Value="25" />
+                                                                        <Setter Property="Height" Value="25" />
+                                                                        <Setter Property="MinWidth" Value="25" />
+                                                                        <Setter Property="MinHeight" Value="25" />
+                                                                        <Setter Property="Background"
+                                                                            Value="Transparent" />
+                                                                    </Style>
+                                                                    <Style Selector="Button:hover">
+                                                                        <Setter Property="Background" Value="#70FFFFFF" />
+                                                                    </Style>
                                                                 </StackPanel.Styles>
-                                                                <Button Command="{Binding DataContext.OpenInExplorerCommand, RelativeSource={RelativeSource AncestorType=panels:AlignableWrapPanel}}"
-                                                                        CommandParameter="{Binding FilePath}"
-                                                                        ToolTip.Tip="Open in File Explorer">
-                                                                    <TextBlock Text="&#xEC50;" FontFamily="Segoe MDL2 Assets"
-                                                                               TextAlignment="Center" FontSize="18"/>
+                                                                <Button
+                                                                    Command="{Binding DataContext.OpenInExplorerCommand, RelativeSource={RelativeSource AncestorType=panels:AlignableWrapPanel}}"
+                                                                    CommandParameter="{Binding FilePath}"
+                                                                    ToolTip.Tip="Open in File Explorer">
+                                                                    <TextBlock Text="&#xEC50;"
+                                                                               FontFamily="Segoe MDL2 Assets"
+                                                                               TextAlignment="Center" FontSize="18" />
                                                                 </Button>
-                                                                <Button Command="{xaml:Command Name=PixiEditor.File.RemoveRecent, UseProvided=True}"
-                                                                        CommandParameter="{Binding FilePath}"
-                                                                        ToolTip.Tip="Remove from list">
-                                                                    <TextBlock Text="" FontFamily="{DynamicResource Feather}"
-                                                                               TextAlignment="Center" FontSize="20"/>
+                                                                <Button
+                                                                    Command="{xaml:Command Name=PixiEditor.File.RemoveRecent, UseProvided=True}"
+                                                                    CommandParameter="{Binding FilePath}"
+                                                                    ToolTip.Tip="Remove from list">
+                                                                    <TextBlock Text=""
+                                                                               FontFamily="{DynamicResource Feather}"
+                                                                               TextAlignment="Center" FontSize="20" />
                                                                 </Button>
                                                             </StackPanel>
                                                         </Grid>
@@ -243,7 +240,8 @@
                                             </Button>
 
                                             <TextBlock Text="{Binding FileName}" ToolTip.Tip="{Binding FilePath}"
-                                                       Width="110" TextAlignment="Center" TextTrimming="CharacterEllipsis"
+                                                       Width="110" TextAlignment="Center"
+                                                       TextTrimming="CharacterEllipsis"
                                                        FontSize="18" Margin="10,10,10,2" HorizontalAlignment="Center" />
                                         </StackPanel>
                                     </Grid>
@@ -251,60 +249,68 @@
                             </ItemsControl.ItemTemplate>
                             <ItemsControl.ItemsPanel>
                                 <ItemsPanelTemplate>
-                                    <panels:AlignableWrapPanel HorizontalAlignment="Center" HorizontalContentAlignment="Center"/>
+                                    <panels:AlignableWrapPanel HorizontalAlignment="Center"
+                                                               HorizontalContentAlignment="Center" />
                                 </ItemsPanelTemplate>
                             </ItemsControl.ItemsPanel>
                         </ItemsControl>
                     </StackPanel>
 
-                    <panels:AlignableWrapPanel Grid.Row="3" HorizontalContentAlignment="Center" HorizontalAlignment="Center" Margin="0,5,0,15">
-                        <Button Command="{xaml:Command PixiEditor.Links.OpenHyperlink, UseProvided=True}" CommandParameter="https://pixieditor.net"
+                    <panels:AlignableWrapPanel Grid.Row="3" HorizontalContentAlignment="Center"
+                                               HorizontalAlignment="Center" Margin="0,5,0,15">
+                        <Button Command="{xaml:Command PixiEditor.Links.OpenHyperlink, UseProvided=True}"
+                                CommandParameter="https://pixieditor.net"
                                 ui:Translator.TooltipKey="WEBSITE"
                                 Classes="SocialMediaButton" Tag="#e3002d"
-                                Content="/Images/SocialMedia/WebsiteIcon.png"/>
-                        <Button Command="{xaml:Command PixiEditor.Links.OpenHyperlink, UseProvided=True}" CommandParameter="https://discord.gg/tzkQFDkqQS"
+                                Content="/Images/SocialMedia/WebsiteIcon.png" />
+                        <Button Command="{xaml:Command PixiEditor.Links.OpenHyperlink, UseProvided=True}"
+                                CommandParameter="https://discord.gg/tzkQFDkqQS"
                                 Classes="SocialMediaButton" Tag="#5865F2" ui:Translator.TooltipKey="DISCORD"
-                                Content="/Images/SocialMedia/DiscordIcon.png"/>
-                        <Button Command="{xaml:Command PixiEditor.Links.OpenHyperlink, UseProvided=True}" CommandParameter="https://reddit.com/r/PixiEditor"
+                                Content="/Images/SocialMedia/DiscordIcon.png" />
+                        <Button Command="{xaml:Command PixiEditor.Links.OpenHyperlink, UseProvided=True}"
+                                CommandParameter="https://reddit.com/r/PixiEditor"
                                 Classes="SocialMediaButton" Tag="#FF4500" ui:Translator.TooltipKey="REDDIT"
-                                Content="/Images/SocialMedia/RedditIcon.png"/>
-                        <Button Command="{xaml:Command PixiEditor.Links.OpenHyperlink, UseProvided=True}" CommandParameter="https://store.steampowered.com/app/2218560"
+                                Content="/Images/SocialMedia/RedditIcon.png" />
+                        <Button Command="{xaml:Command PixiEditor.Links.OpenHyperlink, UseProvided=True}"
+                                CommandParameter="https://store.steampowered.com/app/2218560"
                                 Classes="SocialMediaButton" Tag="#00adee" ui:Translator.TooltipKey="STEAM"
-                                Content="/Images/SocialMedia/SteamIcon.png"/>
-                        <Button Command="{xaml:Command PixiEditor.Links.OpenHyperlink, UseProvided=True}" CommandParameter="https://github.com/PixiEditor/PixiEditor"
+                                Content="/Images/SocialMedia/SteamIcon.png" />
+                        <Button Command="{xaml:Command PixiEditor.Links.OpenHyperlink, UseProvided=True}"
+                                CommandParameter="https://github.com/PixiEditor/PixiEditor"
                                 Classes="SocialMediaButton" Tag="Black" ui:Translator.TooltipKey="GITHUB"
-                                Content="/Images/SocialMedia/GitHubIcon.png"/>
-                        <Button Command="{xaml:Command PixiEditor.Links.OpenHyperlink, UseProvided=True}" CommandParameter="https://www.youtube.com/channel/UCT5XvyvX1q5PAIaXfWmpsMQ"
+                                Content="/Images/SocialMedia/GitHubIcon.png" />
+                        <Button Command="{xaml:Command PixiEditor.Links.OpenHyperlink, UseProvided=True}"
+                                CommandParameter="https://www.youtube.com/channel/UCT5XvyvX1q5PAIaXfWmpsMQ"
                                 Classes="SocialMediaButton" Tag="#FF0000" ui:Translator.TooltipKey="YOUTUBE"
-                                Content="/Images/SocialMedia/YouTubeIcon.png"/>
+                                Content="/Images/SocialMedia/YouTubeIcon.png" />
                         <Button Command="{xaml:Command PixiEditor.Links.OpenHyperlink, UseProvided=True}"
                                 IsVisible="{Binding ShowDonateButton}"
                                 CommandParameter="https://opencollective.com/pixieditor"
                                 Classes="SocialMediaButton" Tag="#d4af37" ui:Translator.TooltipKey="DONATE"
-                                Content="/Images/SocialMedia/DonateIcon.png"/>
+                                Content="/Images/SocialMedia/DonateIcon.png" />
                         <Button Command="{xaml:Command PixiEditor.Links.OpenHyperlink, UseProvided=True}"
                                 IsVisible="{Binding !ShowDonateButton}"
                                 CommandParameter="https://store.steampowered.com/app/2435860/PixiEditor__Supporter_Pack/"
                                 Classes="SocialMediaButton" Tag="#d4af37" ui:Translator.TooltipKey="BUY_SUPPORTER_PACK"
-                                Content="/Images/SocialMedia/DonateIcon.png"/>
+                                Content="/Images/SocialMedia/DonateIcon.png" />
                     </panels:AlignableWrapPanel>
                 </Grid>
             </ScrollViewer>
 
             <ScrollViewer Grid.Column="1"
                           IsVisible="{Binding !NewsPanelCollapsed}">
-                <Border Padding="5" BorderThickness="3 0 0 0" BorderBrush="{DynamicResource ThemeBackgroundBrush}">
+                <Border Padding="5" BorderThickness="3 0 0 0" BorderBrush="{DynamicResource ThemeBackgroundBrush1}">
                     <Grid>
-                        <indicators1:LoadingIndicator IsVisible="{Binding IsFetchingNews}" Width="100" Height="100"/>
+                        <indicators1:LoadingIndicator IsVisible="{Binding IsFetchingNews}" Width="100" Height="100" />
                         <TextBlock ui:Translator.Key="FAILED_FETCH_NEWS" FontSize="20"
                                    VerticalAlignment="Center" TextAlignment="Center"
-                                   IsVisible="{Binding Path=FailedFetchingNews}"/>
+                                   IsVisible="{Binding Path=FailedFetchingNews}" />
                         <StackPanel Orientation="Vertical" IsVisible="{Binding !IsFetchingNews}">
-                            <TextBlock HorizontalAlignment="Center" ui:Translator.Key="NEWS" FontSize="18"/>
+                            <TextBlock HorizontalAlignment="Center" ui:Translator.Key="NEWS" FontSize="18" />
                             <ItemsControl ItemsSource="{Binding Path=News}">
                                 <ItemsControl.ItemTemplate>
                                     <DataTemplate>
-                                        <newsFeed1:NewsItem Margin="5" News="{Binding Path=.}"/>
+                                        <newsFeed1:NewsItem Margin="5" News="{Binding Path=.}" />
                                     </DataTemplate>
                                 </ItemsControl.ItemTemplate>
                             </ItemsControl>
@@ -314,4 +320,4 @@
             </ScrollViewer>
         </Grid>
     </DockPanel>
-</dialogs:PixiEditorPopup>
+</dialogs:PixiEditorPopup>

src/PixiEditor.UI.Common/Fonts/PixiPerfectIcons.axaml

@@ -119,6 +119,11 @@
             <system:String x:Key="icon-star">&#x25a1;</system:String>
             <system:String x:Key="icon-star-filled">&#xfffd;</system:String>
             <system:String x:Key="icon-reset">R</system:String>
+            <system:String x:Key="icon-message">&#xE96F;</system:String>
+            <system:String x:Key="icon-download">&#xE969;</system:String>
+            <system:String x:Key="icon-youtube">&#xE975;</system:String>
+            <system:String x:Key="icon-misc">&#xE968;</system:String>
+            <system:String x:Key="icon-write">&#xE970;</system:String>
         </ResourceDictionary>
     </Styles.Resources>
     

src/PixiEditor.UI.Common/Fonts/PixiPerfectIcons.axaml.cs

@@ -114,6 +114,11 @@ public static class PixiPerfectIcons
     public const string PasteReferenceLayer = "\ue977";
     public const string PasteAsNewLayer = "\ue978";
     public const string CopyAdd = "\ue921";
+    public const string Message = "\uE96F";
+    public const string Download = "\uE969";
+    public const string YouTube = "\uE975";
+    public const string Write = "\uE968";
+    public const string Misc = "\uE970";
     
     public const string Reset = "R"; // TODO: Create a reset icon
     public const string ToggleLayerVisible = "\u25a1;"; // TODO: Create a toggle layer visible icon