Settings window styling wip

src/PixiEditor.AvaloniaUI/Views/Windows/Settings/SettingsWindow.axaml

@@ -25,7 +25,7 @@
     DataContext="{DynamicResource SettingsWindowViewModel}"
     WindowStartupLocation="CenterScreen"
     BorderBrush="Black" BorderThickness="1"
-    Background="{DynamicResource AccentColor}"
+    Background="{DynamicResource ThemeAccent2Color}"
     FlowDirection="{markupExtensions:Localization FlowDirection}"
     ui:Translator.Key="SETTINGS">
 
@@ -45,7 +45,7 @@
     </Window.CommandBindings>
     -->
 
-    <DockPanel Focusable="True" Background="{DynamicResource ThemeBackgroundBrush1}">
+    <DockPanel Focusable="True" Background="{DynamicResource ThemeBackgroundBrush}">
         <!--Background="{StaticResource MainColor}"-->
         <i:Interaction.Behaviors>
             <behaviours:ClearFocusOnClickBehavior/>
@@ -55,214 +55,223 @@
             TitleKey="SETTINGS" CloseCommand="{x:Static vm:SystemCommands.CloseWindowCommand}"/>
 
         <ListBox DockPanel.Dock="Left" x:Name="pages" ItemsSource="{Binding Pages}"
-                 Background="Transparent" BorderThickness="0" MinWidth="165"
+                 Margin="0, 8"
+                 Background="{DynamicResource ThemeBackgroundBrush}" 
+                 MinWidth="165"
                  SelectedIndex="{Binding CurrentPage}">
-            <!--ItemContainerStyle="{StaticResource PixiListBoxItemStyle}"-->
-            <!--Width="Auto"-->
             <ListBox.ItemTemplate>
                 <DataTemplate>
-                    <TextBlock Foreground="White" Text="{Binding Path=Name.Value}"/>
+                    <TextBlock Classes="h5" Foreground="{DynamicResource ThemeForegroundLowBrush}" Text="{Binding Path=Name.Value}" VerticalAlignment="Center">
+                        <TextBlock.Styles>
+                            <Style Selector="ListBoxItem:selected TextBlock">
+                                <Setter Property="Foreground" Value="{DynamicResource ThemeForegroundBrush}" />
+                            </Style>
+                        </TextBlock.Styles>
+                    </TextBlock>
                 </DataTemplate>
             </ListBox.ItemTemplate>
         </ListBox>
-        <StackPanel Orientation="Vertical">
-            <StackPanel.Styles>
-                <Style Selector=":is(Control).leftOffset">
-                    <Setter Property="Margin" Value="20, 0, 0, 0"/>
-                </Style>
-            </StackPanel.Styles>
-            <!--Background="{StaticResource AccentColor}"-->
-            <controls:FixedSizeStackPanel Orientation="Vertical" ChildSize="32" VerticalChildrenAlignment="Center">
-                <controls:FixedSizeStackPanel.IsVisible>
-                    <Binding Path="CurrentPage" Converter="{converters:IsEqualConverter}">
-                        <Binding.ConverterParameter>
-                            <sys:Int32>0</sys:Int32>
-                        </Binding.ConverterParameter>
-                    </Binding>
-                </controls:FixedSizeStackPanel.IsVisible>
-                <TextBlock ui:Translator.Key="LANGUAGE" Classes="h5"/>
-                <ComboBox Classes="leftOffset" Width="200" HorizontalAlignment="Left"
-                          ItemsSource="{Binding SettingsSubViewModel.General.AvailableLanguages}"
-                          SelectedItem="{Binding SettingsSubViewModel.General.SelectedLanguage, Mode=TwoWay}">
-                    <ComboBox.ItemTemplate>
-                        <DataTemplate>
-                            <StackPanel Orientation="Horizontal" Height="20">
-                                <Image
-                                    MaxHeight="20"
-                                    Margin="3, 0"
-                                    VerticalAlignment="Center"
-                                    Source="{Binding IconFullPath, Converter={converters:ImagePathToBitmapConverter}}" />
-                                <TextBlock VerticalAlignment="Center" Text="{Binding Name}"/>
-                            </StackPanel>
-                        </DataTemplate>
-                    </ComboBox.ItemTemplate>
-                </ComboBox>
+        <Border Background="{DynamicResource ThemeBackgroundColor1}" CornerRadius="8" Margin="0, 8, 8, 8">
+            <Grid>
+                <Grid.Styles>
+                    <Style Selector=":is(Control).leftOffset">
+                        <Setter Property="Margin" Value="20, 0, 0, 0"/>
+                    </Style>
+                </Grid.Styles>
+                <!--Background="{StaticResource AccentColor}"-->
+                <controls:FixedSizeStackPanel Orientation="Vertical" ChildSize="32" VerticalChildrenAlignment="Center" Margin="12">
+                    <controls:FixedSizeStackPanel.IsVisible>
+                        <Binding Path="CurrentPage" Converter="{converters:IsEqualConverter}">
+                            <Binding.ConverterParameter>
+                                <sys:Int32>0</sys:Int32>
+                            </Binding.ConverterParameter>
+                        </Binding>
+                    </controls:FixedSizeStackPanel.IsVisible>
+                    
+                    <TextBlock ui:Translator.Key="LANGUAGE" Classes="h5"/>
+                    <ComboBox Classes="leftOffset" Width="200" HorizontalAlignment="Left"
+                              ItemsSource="{Binding SettingsSubViewModel.General.AvailableLanguages}"
+                              SelectedItem="{Binding SettingsSubViewModel.General.SelectedLanguage, Mode=TwoWay}">
+                        <ComboBox.ItemTemplate>
+                            <DataTemplate>
+                                <StackPanel Orientation="Horizontal" Height="20">
+                                    <Image
+                                        MaxHeight="20"
+                                        Margin="3, 0"
+                                        VerticalAlignment="Center"
+                                        Source="{Binding IconFullPath, Converter={converters:ImagePathToBitmapConverter}}" />
+                                    <TextBlock VerticalAlignment="Center" Text="{Binding Name}"/>
+                                </StackPanel>
+                            </DataTemplate>
+                        </ComboBox.ItemTemplate>
+                    </ComboBox>
 
-                <TextBlock ui:Translator.Key="MISC" Classes="h5"/>
+                    <TextBlock ui:Translator.Key="MISC" Classes="h5"/>
 
-                <CheckBox Classes="leftOffset" ui:Translator.Key="SHOW_STARTUP_WINDOW"
-                          IsChecked="{Binding SettingsSubViewModel.File.ShowStartupWindow}"/>
+                    <CheckBox Classes="leftOffset" ui:Translator.Key="SHOW_STARTUP_WINDOW"
+                              IsChecked="{Binding SettingsSubViewModel.File.ShowStartupWindow}"/>
 
-                <CheckBox Classes="leftOffset" ui:Translator.Key="DISABLE_NEWS_PANEL"
-                          IsChecked="{Binding SettingsSubViewModel.File.DisableNewsPanel}"/>
+                    <CheckBox Classes="leftOffset" ui:Translator.Key="DISABLE_NEWS_PANEL"
+                              IsChecked="{Binding SettingsSubViewModel.File.DisableNewsPanel}"/>
 
-                <CheckBox Classes="leftOffset" ui:Translator.Key="SHOW_IMAGE_PREVIEW_TASKBAR"
-                          IsChecked="{Binding SettingsSubViewModel.General.ImagePreviewInTaskbar}"/>
+                    <CheckBox Classes="leftOffset" ui:Translator.Key="SHOW_IMAGE_PREVIEW_TASKBAR"
+                              IsChecked="{Binding SettingsSubViewModel.General.ImagePreviewInTaskbar}"/>
 
-                <StackPanel Classes="leftOffset" Orientation="Horizontal">
-                    <Label
-                        ui:Translator.Key="RECENT_FILE_LENGTH"
-                        ui:Translator.TooltipKey="RECENT_FILE_LENGTH_TOOLTIP"/>
-                    <input:NumberInput Min="0" FontSize="12" HorizontalAlignment="Left"
-                                   Value="{Binding SettingsSubViewModel.File.MaxOpenedRecently, Mode=TwoWay}" Width="40"/>
-                </StackPanel>
+                    <StackPanel Classes="leftOffset" Orientation="Horizontal">
+                        <Label
+                            ui:Translator.Key="RECENT_FILE_LENGTH"
+                            ui:Translator.TooltipKey="RECENT_FILE_LENGTH_TOOLTIP"/>
+                        <input:NumberInput Min="0" FontSize="12" HorizontalAlignment="Left"
+                                       Value="{Binding SettingsSubViewModel.File.MaxOpenedRecently, Mode=TwoWay}" Width="40"/>
+                    </StackPanel>
 
-                <TextBlock
-                    Classes="h5"
-                    d:Content="Default new file size"
-                    ui:Translator.Key="DEFAULT_NEW_SIZE"/>
+                    <TextBlock
+                        Classes="h5"
+                        d:Content="Default new file size"
+                        ui:Translator.Key="DEFAULT_NEW_SIZE"/>
 
-                <StackPanel Orientation="Horizontal"  Classes="leftOffset">
-                    <Label d:Content="Width" ui:Translator.Key="WIDTH"/>
-                    <input:SizeInput
-                                 Size="{Binding SettingsSubViewModel.File.DefaultNewFileWidth, Mode=TwoWay}" MaxSize="9999" HorizontalAlignment="Left"/>
-                </StackPanel>
+                    <StackPanel Orientation="Horizontal"  Classes="leftOffset">
+                        <Label d:Content="Width" ui:Translator.Key="WIDTH"/>
+                        <input:SizeInput
+                                     Size="{Binding SettingsSubViewModel.File.DefaultNewFileWidth, Mode=TwoWay}" MaxSize="9999" HorizontalAlignment="Left"/>
+                    </StackPanel>
 
-                <StackPanel Orientation="Horizontal" Classes="leftOffset">
-                    <Label d:Content="Height" ui:Translator.Key="HEIGHT"/>
-                    <input:SizeInput
-                                 Size="{Binding SettingsSubViewModel.File.DefaultNewFileHeight, Mode=TwoWay}" MaxSize="9999" HorizontalAlignment="Left"/>
-                </StackPanel>
+                    <StackPanel Orientation="Horizontal" Classes="leftOffset">
+                        <Label d:Content="Height" ui:Translator.Key="HEIGHT"/>
+                        <input:SizeInput
+                                     Size="{Binding SettingsSubViewModel.File.DefaultNewFileHeight, Mode=TwoWay}" MaxSize="9999" HorizontalAlignment="Left"/>
+                    </StackPanel>
 
-                <TextBlock d:Content="Tools" ui:Translator.Key="TOOLS" Classes="h5" />
+                    <TextBlock d:Content="Tools" ui:Translator.Key="TOOLS" Classes="h5" />
 
-                <StackPanel Orientation="Horizontal" Classes="leftOffset">
-                    <Label Target="rightClickModeComboBox" ui:Translator.Key="RIGHT_CLICK_MODE" VerticalAlignment="Center"/>
-                    <ComboBox SelectedItem="{Binding RightClickMode, Source={vm:MainVM ToolsSVM}, Mode=TwoWay}"
-                              Name="rightClickModeComboBox"
-                              ItemsSource="{markupExtensions:Enum preferences:RightClickMode}"
-                              Width="160"
-                              VerticalAlignment="Center"/>
-                    <!--Styles="{StaticResource TranslatedEnum}"-->
-                </StackPanel>
+                    <StackPanel Orientation="Horizontal" Classes="leftOffset">
+                        <Label Target="rightClickModeComboBox" ui:Translator.Key="RIGHT_CLICK_MODE" VerticalAlignment="Center"/>
+                        <ComboBox SelectedItem="{Binding RightClickMode, Source={vm:MainVM ToolsSVM}, Mode=TwoWay}"
+                                  Name="rightClickModeComboBox"
+                                  ItemsSource="{markupExtensions:Enum preferences:RightClickMode}"
+                                  Width="160"
+                                  VerticalAlignment="Center"/>
+                        <!--Styles="{StaticResource TranslatedEnum}"-->
+                    </StackPanel>
 
-                <CheckBox Classes="leftOffset"
-                          IsChecked="{Binding SettingsSubViewModel.Tools.EnableSharedToolbar}"
-                          ui:Translator.Key="ENABLE_SHARED_TOOLBAR"/>
+                    <CheckBox Classes="leftOffset"
+                              IsChecked="{Binding SettingsSubViewModel.Tools.EnableSharedToolbar}"
+                              ui:Translator.Key="ENABLE_SHARED_TOOLBAR"/>
 
-                <TextBlock ui:Translator.Key="AUTOMATIC_UPDATES" Classes="h5"/>
+                    <TextBlock ui:Translator.Key="AUTOMATIC_UPDATES" Classes="h5"/>
 
-                <CheckBox
-                    VerticalAlignment="Center"
-                    IsEnabled="{Binding Path=ShowUpdateTab}"
-                    IsChecked="{Binding SettingsSubViewModel.Update.CheckUpdatesOnStartup}"
-                    ui:Translator.Key="CHECK_FOR_UPDATES"
-                    Classes="leftOffset"/>
+                    <CheckBox
+                        VerticalAlignment="Center"
+                        IsEnabled="{Binding Path=ShowUpdateTab}"
+                        IsChecked="{Binding SettingsSubViewModel.Update.CheckUpdatesOnStartup}"
+                        ui:Translator.Key="CHECK_FOR_UPDATES"
+                        Classes="leftOffset"/>
 
-                <StackPanel Orientation="Horizontal" Classes="leftOffset">
-                    <Label Target="updateStreamComboBox" ui:Translator.Key="UPDATE_STREAM" VerticalAlignment="Center"/>
-                    <StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Left">
-                        <ComboBox Width="110"
-                                  Name="updateStreamComboBox"
-                                  VerticalAlignment="Center"
-                                  IsEnabled="{Binding Path=ShowUpdateTab}"
-                                  ItemsSource="{Binding SettingsSubViewModel.Update.UpdateChannels}"
-                                  SelectedValue="{Binding SettingsSubViewModel.Update.UpdateChannelName}"/>
-                        <Image Cursor="Help" Source="/Images/Commands/PixiEditor/Links/OpenDocumentation.png"
-                               VerticalAlignment="Center"
-                               IsVisible="{Binding !ShowUpdateTab}"
-                               ui:Translator.TooltipKey="UPDATE_CHANNEL_HELP_TOOLTIP"/>
-                        <!-- ToolTipService.InitialShowDelay="0"-->
+                    <StackPanel Orientation="Horizontal" Classes="leftOffset">
+                        <Label Target="updateStreamComboBox" ui:Translator.Key="UPDATE_STREAM" VerticalAlignment="Center"/>
+                        <StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Left">
+                            <ComboBox Width="110"
+                                      Name="updateStreamComboBox"
+                                      VerticalAlignment="Center"
+                                      IsEnabled="{Binding Path=ShowUpdateTab}"
+                                      ItemsSource="{Binding SettingsSubViewModel.Update.UpdateChannels}"
+                                      SelectedValue="{Binding SettingsSubViewModel.Update.UpdateChannelName}"/>
+                            <Image Cursor="Help" Source="/Images/Commands/PixiEditor/Links/OpenDocumentation.png"
+                                   VerticalAlignment="Center"
+                                   IsVisible="{Binding !ShowUpdateTab}"
+                                   ui:Translator.TooltipKey="UPDATE_CHANNEL_HELP_TOOLTIP"/>
+                            <!-- ToolTipService.InitialShowDelay="0"-->
+                        </StackPanel>
                     </StackPanel>
-                </StackPanel>
 
-                <TextBlock ui:Translator.Key="DEBUG" Classes="h5"/>
-                <CheckBox Classes="leftOffset"
-                    IsChecked="{Binding SettingsSubViewModel.General.IsDebugModeEnabled}" ui:Translator.Key="ENABLE_DEBUG_MODE" d:Content="Enable Debug Mode"/>
-                <!--<Label Classes="{StaticResource SettingsText}" VerticalAlignment="Center">
-                    <ui1:Hyperlink Command="{cmds:Command PixiEditor.Debug.OpenCrashReportsDirectory}" Style="{StaticResource SettingsLink}">
-                        <Run ui:Translator.Key="OPEN_CRASH_REPORTS_DIR" d:Text="Open crash reports directory"/>
-                        <Run Text="" FontFamily="{StaticResource Feather}"/>
-                    </ui1:Hyperlink>
-                </Label>-->
-            </controls:FixedSizeStackPanel>
+                    <TextBlock ui:Translator.Key="DEBUG" Classes="h5"/>
+                    <CheckBox Classes="leftOffset"
+                        IsChecked="{Binding SettingsSubViewModel.General.IsDebugModeEnabled}" ui:Translator.Key="ENABLE_DEBUG_MODE" d:Content="Enable Debug Mode"/>
+                    <!--<Label Classes="{StaticResource SettingsText}" VerticalAlignment="Center">
+                        <ui1:Hyperlink Command="{cmds:Command PixiEditor.Debug.OpenCrashReportsDirectory}" Style="{StaticResource SettingsLink}">
+                            <Run ui:Translator.Key="OPEN_CRASH_REPORTS_DIR" d:Text="Open crash reports directory"/>
+                            <Run Text="" FontFamily="{StaticResource Feather}"/>
+                        </ui1:Hyperlink>
+                    </Label>-->
+                </controls:FixedSizeStackPanel>
 
-            <StackPanel>
-                <StackPanel.IsVisible>
-                    <Binding Path="CurrentPage" Converter="{converters:IsEqualConverter}">
-                        <Binding.ConverterParameter>
-                            <sys:Int32>1</sys:Int32>
-                        </Binding.ConverterParameter>
-                    </Binding>
-                </StackPanel.IsVisible>
+                <StackPanel Margin="12">
+                    <StackPanel.IsVisible>
+                        <Binding Path="CurrentPage" Converter="{converters:IsEqualConverter}">
+                            <Binding.ConverterParameter>
+                                <sys:Int32>1</sys:Int32>
+                            </Binding.ConverterParameter>
+                        </Binding>
+                    </StackPanel.IsVisible>
 
-                <controls:FixedSizeStackPanel ChildSize="32" Orientation="Vertical" VerticalChildrenAlignment="Center">
-                    <TextBlock ui:Translator.Key="DISCORD_RICH_PRESENCE" Classes="h5"/>
+                    <controls:FixedSizeStackPanel ChildSize="32" Orientation="Vertical" VerticalChildrenAlignment="Center">
+                        <TextBlock ui:Translator.Key="DISCORD_RICH_PRESENCE" Classes="h5"/>
 
-                    <CheckBox IsChecked="{Binding SettingsSubViewModel.Discord.EnableRichPresence}"
-                              ui:Translator.Key="ENABLED"/>
-                    <CheckBox IsEnabled="{Binding SettingsSubViewModel.Discord.EnableRichPresence}"
-                              IsChecked="{Binding SettingsSubViewModel.Discord.ShowDocumentName}"
-                              ui:Translator.Key="SHOW_IMAGE_NAME"/>
-                    <CheckBox IsEnabled="{Binding SettingsSubViewModel.Discord.EnableRichPresence}"
-                              IsChecked="{Binding SettingsSubViewModel.Discord.ShowDocumentSize}"
-                              ui:Translator.Key="SHOW_IMAGE_SIZE"/>
-                    <CheckBox IsEnabled="{Binding SettingsSubViewModel.Discord.EnableRichPresence}"
-                              IsChecked="{Binding SettingsSubViewModel.Discord.ShowLayerCount}"
-                              ui:Translator.Key="SHOW_LAYER_COUNT" d:Content="Show layer count"/>
-                </controls:FixedSizeStackPanel>
+                        <CheckBox IsChecked="{Binding SettingsSubViewModel.Discord.EnableRichPresence}"
+                                  ui:Translator.Key="ENABLED"/>
+                        <CheckBox IsEnabled="{Binding SettingsSubViewModel.Discord.EnableRichPresence}"
+                                  IsChecked="{Binding SettingsSubViewModel.Discord.ShowDocumentName}"
+                                  ui:Translator.Key="SHOW_IMAGE_NAME"/>
+                        <CheckBox IsEnabled="{Binding SettingsSubViewModel.Discord.EnableRichPresence}"
+                                  IsChecked="{Binding SettingsSubViewModel.Discord.ShowDocumentSize}"
+                                  ui:Translator.Key="SHOW_IMAGE_SIZE"/>
+                        <CheckBox IsEnabled="{Binding SettingsSubViewModel.Discord.EnableRichPresence}"
+                                  IsChecked="{Binding SettingsSubViewModel.Discord.ShowLayerCount}"
+                                  ui:Translator.Key="SHOW_LAYER_COUNT" d:Content="Show layer count"/>
+                    </controls:FixedSizeStackPanel>
 
-                <settings:DiscordRichPresencePreview
-                    HorizontalAlignment="Center"
-                    Width="280"
-                    State="{Binding SettingsSubViewModel.Discord.StatePreview}"
-                    Detail="{Binding SettingsSubViewModel.Discord.DetailPreview}"
-                    IsPlaying="{Binding SettingsSubViewModel.Discord.EnableRichPresence}"/>
-            </StackPanel>
-
-            <Grid Height="{Binding ElementName=window, Path=Height, Converter={converters:SubtractConverter}, ConverterParameter=50}">
-                <Grid.IsVisible>
-                    <Binding Path="CurrentPage" Converter="{converters:IsEqualConverter}">
-                        <Binding.ConverterParameter>
-                            <sys:Int32>2</sys:Int32>
-                        </Binding.ConverterParameter>
-                    </Binding>
-                </Grid.IsVisible>
-                <Grid.RowDefinitions>
-                    <RowDefinition Height="Auto"/>
-                    <RowDefinition Height="Auto"/>
-                    <RowDefinition/>
-                </Grid.RowDefinitions>
-                <StackPanel HorizontalAlignment="Center" Orientation="Horizontal">
-                    <!--<StackPanel.Resources>
-                        <Style TargetType="Button" BasedOn="{StaticResource DarkRoundButton}">
-                            <Setter Property="HorizontalAlignment" Value="Stretch"/>
-                            <Setter Property="MinWidth" Value="115"/>
-                            <Setter Property="Height" Value="Auto"/>
-                            <Setter Property="FontSize" Value="12"/>
-                            <Setter Property="Padding" Value="5"/>
-                        </Style>
-                    </StackPanel.Resources>-->
-                    <Button Command="{cmds:Command PixiEditor.Shortcuts.Export}"
-                            d:Content="Export" ui:Translator.Key="EXPORT"/>
-                    <Button Command="{cmds:Command PixiEditor.Shortcuts.Import}"
-                            d:Content="Import" ui:Translator.Key="IMPORT"/>
-                    <Button Command="{cmds:Command PixiEditor.Shortcuts.OpenTemplatePopup}"
-                            d:Content="Shortcut Templates" ui:Translator.Key="SHORTCUT_TEMPLATES"/>
-                    <Button Command="{cmds:Command PixiEditor.Shortcuts.Reset}"
-                            d:Content="Reset all" ui:Translator.Key="RESET_ALL"/>
+                    <settings:DiscordRichPresencePreview
+                        HorizontalAlignment="Center"
+                        Width="280"
+                        State="{Binding SettingsSubViewModel.Discord.StatePreview}"
+                        Detail="{Binding SettingsSubViewModel.Discord.DetailPreview}"
+                        IsPlaying="{Binding SettingsSubViewModel.Discord.EnableRichPresence}"/>
                 </StackPanel>
-                <TextBox Grid.Row="1"
-                         Text="{Binding SearchTerm, Mode=TwoWay}">
-                    <!--Styles="{StaticResource DarkTextBoxStyle}"-->
-                    <i:Interaction.Behaviors>
-                        <behaviours:GlobalShortcutFocusBehavior/>
-                    </i:Interaction.Behaviors>
-                </TextBox>
 
-                <settings:ShortcutsBinder Grid.Row="2"/>
+                <Grid Margin="12" Height="{Binding ElementName=window, Path=Height, Converter={converters:SubtractConverter}, ConverterParameter=50}">
+                    <Grid.IsVisible>
+                        <Binding Path="CurrentPage" Converter="{converters:IsEqualConverter}">
+                            <Binding.ConverterParameter>
+                                <sys:Int32>2</sys:Int32>
+                            </Binding.ConverterParameter>
+                        </Binding>
+                    </Grid.IsVisible>
+                    <Grid.RowDefinitions>
+                        <RowDefinition Height="Auto"/>
+                        <RowDefinition Height="Auto"/>
+                        <RowDefinition/>
+                    </Grid.RowDefinitions>
+                    <StackPanel HorizontalAlignment="Center" Orientation="Horizontal">
+                        <!--<StackPanel.Resources>
+                            <Style TargetType="Button" BasedOn="{StaticResource DarkRoundButton}">
+                                <Setter Property="HorizontalAlignment" Value="Stretch"/>
+                                <Setter Property="MinWidth" Value="115"/>
+                                <Setter Property="Height" Value="Auto"/>
+                                <Setter Property="FontSize" Value="12"/>
+                                <Setter Property="Padding" Value="5"/>
+                            </Style>
+                        </StackPanel.Resources>-->
+                        <Button Command="{cmds:Command PixiEditor.Shortcuts.Export}"
+                                d:Content="Export" ui:Translator.Key="EXPORT"/>
+                        <Button Command="{cmds:Command PixiEditor.Shortcuts.Import}"
+                                d:Content="Import" ui:Translator.Key="IMPORT"/>
+                        <Button Command="{cmds:Command PixiEditor.Shortcuts.OpenTemplatePopup}"
+                                d:Content="Shortcut Templates" ui:Translator.Key="SHORTCUT_TEMPLATES"/>
+                        <Button Command="{cmds:Command PixiEditor.Shortcuts.Reset}"
+                                d:Content="Reset all" ui:Translator.Key="RESET_ALL"/>
+                    </StackPanel>
+                    <TextBox Grid.Row="1"
+                             Text="{Binding SearchTerm, Mode=TwoWay}">
+                        <!--Styles="{StaticResource DarkTextBoxStyle}"-->
+                        <i:Interaction.Behaviors>
+                            <behaviours:GlobalShortcutFocusBehavior/>
+                        </i:Interaction.Behaviors>
+                    </TextBox>
+
+                    <settings:ShortcutsBinder Grid.Row="2"/>
+                </Grid>
             </Grid>
-        </StackPanel>
+        </Border>
     </DockPanel>
 
 </Window>

src/PixiEditor.UI.Common/Controls/ListBox.axaml

@@ -2,10 +2,6 @@
                     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
   <ControlTheme x:Key="{x:Type ListBox}"
                 TargetType="ListBox">
-    <Setter Property="Background" Value="{DynamicResource ThemeBackgroundBrush}" />
-    <Setter Property="BorderBrush" Value="{DynamicResource ThemeBorderMidBrush}" />
-    <Setter Property="BorderThickness" Value="{DynamicResource ThemeBorderThickness}" />
-    <Setter Property="Padding" Value="4" />
     <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
     <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
     <Setter Property="ScrollViewer.IsScrollChainingEnabled" Value="True" />

src/PixiEditor.UI.Common/Controls/ListBoxItem.axaml

@@ -1,45 +1,63 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui"
                     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-  <ControlTheme x:Key="{x:Type ListBoxItem}"
+    <ControlTheme x:Key="{x:Type ListBoxItem}"
                 TargetType="ListBoxItem">
-    <Setter Property="Background" Value="Transparent" />
-    <Setter Property="BorderBrush" Value="Transparent" />
-    <Setter Property="BorderThickness" Value="0" />
-    <Setter Property="Padding" Value="2 1" />
-    <Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}"/>
-    <Setter Property="Template">
-      <ControlTemplate>
-          <ContentPresenter Name="PART_ContentPresenter"
-                            Padding="{TemplateBinding Padding}"
-                            HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
-                            VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
-                            BorderBrush="{TemplateBinding BorderBrush}"
-                            BorderThickness="{TemplateBinding BorderThickness}"
-                            Background="{TemplateBinding Background}"
-                            Content="{TemplateBinding Content}"
-                            ContentTemplate="{TemplateBinding ContentTemplate}"
-                            CornerRadius="{TemplateBinding CornerRadius}" />
-      </ControlTemplate>
-    </Setter>
+        <Setter Property="Background" Value="Transparent" />
+        <Setter Property="BorderBrush" Value="Transparent" />
+        <Setter Property="BorderThickness" Value="0" />
+        <Setter Property="Template">
+            <ControlTemplate>
+                <Border Height="40" 
+                        BorderBrush="{TemplateBinding BorderBrush}"
+                        BorderThickness="{TemplateBinding BorderThickness}"
+                        Background="{TemplateBinding Background}"
+                        CornerRadius="{TemplateBinding CornerRadius}">
+                    <Border.Styles>
+                        <Style Selector=":pointerover /template/ Border">
+                            <Setter Property="Background" Value="{DynamicResource ThemeControlHighlightColor}" />
+                        </Style>
+                    </Border.Styles>
+                    
+                    <Grid>
+                        <Rectangle RadiusX="8" RadiusY="8" Width="16" Height="32" IsVisible="False" Fill="{DynamicResource ThemeAccentBrush}" HorizontalAlignment="Left">
+                            <Rectangle.Styles>
+                                <Style Selector=":selected /template/ Rectangle">
+                                    <Setter Property="IsVisible" Value="True"></Setter>
+                                </Style>
+                            </Rectangle.Styles>
+                            <Rectangle.Clip>
+                                <RectangleGeometry Rect="8, 0, 8, 32"></RectangleGeometry>
+                            </Rectangle.Clip>
+                            <Rectangle.RenderTransform>
+                                <TranslateTransform X="-8"></TranslateTransform>
+                            </Rectangle.RenderTransform>
+                        </Rectangle>
+                        <ContentPresenter Name="PART_ContentPresenter" 
+                                          Margin="16, 0, 0,0"
+                                          Padding="{TemplateBinding Padding}"
+                                          HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                                          VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                                          Content="{TemplateBinding Content}"
+                                          ContentTemplate="{TemplateBinding ContentTemplate}" />
+                    </Grid>
+                </Border>
+            </ControlTemplate>
+        </Setter>
+    <!--
+        <Style Selector="^:selected /template/ ContentPresenter">
+          <Setter Property="Background" Value="{DynamicResource ThemeAccentBrush}" />
+        </Style>
 
-    <Style Selector="^:pointerover /template/ ContentPresenter">
-      <Setter Property="Background" Value="{DynamicResource ThemeControlHighlightColor}" />
-    </Style>
+        <Style Selector="^:selected:focus /template/ ContentPresenter">
+          <Setter Property="Background" Value="{DynamicResource ThemeAccentBrush}" />
+        </Style>
 
-    <Style Selector="^:selected /template/ ContentPresenter">
-      <Setter Property="Background" Value="{DynamicResource ThemeAccentBrush}" />
-    </Style>
+        <Style Selector="^:selected:pointerover /template/ ContentPresenter">
+          <Setter Property="Background" Value="{DynamicResource ThemeAccentBrush}" />
+        </Style>
 
-    <Style Selector="^:selected:focus /template/ ContentPresenter">
-      <Setter Property="Background" Value="{DynamicResource ThemeAccentBrush}" />
-    </Style>
-
-    <Style Selector="^:selected:pointerover /template/ ContentPresenter">
-      <Setter Property="Background" Value="{DynamicResource ThemeAccentBrush}" />
-    </Style>
-
-    <Style Selector="^:selected:focus:pointerover /template/ ContentPresenter">
-      <Setter Property="Background" Value="{DynamicResource ThemeAccentBrush}" />
-    </Style>
-  </ControlTheme>
+        <Style Selector="^:selected:focus:pointerover /template/ ContentPresenter">
+          <Setter Property="Background" Value="{DynamicResource ThemeAccentBrush}" />
+        </Style>-->
+    </ControlTheme>
 </ResourceDictionary>