ui changes

src/PixiEditor.UI.Common/Accents/Base.axaml

@@ -11,6 +11,7 @@
             <Color x:Key="AccentLowColor">#8d001b</Color>
             <Color x:Key="AccentColor">#B00022</Color>
             <Color x:Key="AccentHighColor">#c0334e</Color>
+            <Color x:Key="ThemeAccent2Color">#5fad65</Color>
 
             <Color x:Key="ThemeForegroundColor">#FFFFFF</Color>
             <Color x:Key="ThemeForegroundSecondaryColor">#B3FFFFFF</Color>
@@ -36,6 +37,7 @@
             <SolidColorBrush x:Key="ThemeAccentLowBrush" Color="{StaticResource AccentLowColor}" />
             <SolidColorBrush x:Key="ThemeAccentBrush" Color="{StaticResource AccentColor}" />
             <SolidColorBrush x:Key="ThemeAccentHighBrush" Color="{StaticResource AccentHighColor}" />
+            <SolidColorBrush x:Key="ThemeAccent2Brush" Color="{StaticResource ThemeAccent2Color}" />
 
             <SolidColorBrush x:Key="ThemeForegroundBrush" Color="{StaticResource ThemeForegroundColor}" />
             <SolidColorBrush x:Key="ThemeForegroundSecondaryBrush" Color="{StaticResource ThemeForegroundSecondaryColor}" />
@@ -56,7 +58,8 @@
             <CornerRadius x:Key="ControlCornerRadius">5</CornerRadius>
             <system:Double x:Key="ControlCornerRadiusValue">5</system:Double>
             <Thickness x:Key="ThemeBorderThickness">1</Thickness>
-            <Thickness x:Key="ScrollBarThickness">5</Thickness>
+            <system:Double x:Key="ScrollBarThickness">12</system:Double>
+            <system:Double x:Key="ScrollBarThumbThickness">8</system:Double>
 
             <SolidColorBrush x:Key="DockApplicationAccentBrushLow" Color="{DynamicResource AccentLowColor}"/>
             <SolidColorBrush x:Key="DockApplicationAccentBrushMed" Color="{DynamicResource AccentColor}"/>

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

@@ -11,14 +11,15 @@
     <Setter Property="ScrollViewer.IsScrollChainingEnabled" Value="True" />
     <Setter Property="Template">
       <ControlTemplate>
-        <Border Name="border"
-                BorderBrush="{TemplateBinding BorderBrush}"
-                BorderThickness="{TemplateBinding BorderThickness}"
-                CornerRadius="{TemplateBinding CornerRadius}">
+          <Border Name="border"
+                  BorderBrush="{TemplateBinding BorderBrush}"
+                  BorderThickness="{TemplateBinding BorderThickness}"
+                  CornerRadius="{TemplateBinding CornerRadius}">
           <ScrollViewer Name="PART_ScrollViewer"
                         AllowAutoHide="{TemplateBinding (ScrollViewer.AllowAutoHide)}"
                         BringIntoViewOnFocusChange="{TemplateBinding (ScrollViewer.BringIntoViewOnFocusChange)}"
                         Background="{TemplateBinding Background}"
+                        CornerRadius="{TemplateBinding CornerRadius}"
                         HorizontalScrollBarVisibility="{TemplateBinding (ScrollViewer.HorizontalScrollBarVisibility)}"
                         IsScrollChainingEnabled="{TemplateBinding (ScrollViewer.IsScrollChainingEnabled)}"
                         VerticalScrollBarVisibility="{TemplateBinding (ScrollViewer.VerticalScrollBarVisibility)}"
@@ -26,7 +27,8 @@
                         HorizontalSnapPointsType="{TemplateBinding (ScrollViewer.HorizontalSnapPointsType)}">
             <ItemsPresenter Name="PART_ItemsPresenter"
                             Margin="{TemplateBinding Padding}"
-                            ItemsPanel="{TemplateBinding ItemsPanel}" />
+                            ItemsPanel="{TemplateBinding ItemsPanel}">
+            </ItemsPresenter>
           </ScrollViewer>
         </Border>
       </ControlTemplate>

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

@@ -7,7 +7,7 @@
     <Setter Property="UseLayoutRounding" Value="True" />
     <Setter Property="Width" Value="350" />
     <Setter Property="FontSize" Value="14" />
-    <Setter Property="Foreground" Value="White" />
+    <Setter Property="Foreground" Value="{DynamicResource ThemeForegroundBrush}"/>
     <Setter Property="RenderTransformOrigin" Value="50%,75%" />
     <Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}"/>
     <Setter Property="Template">

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

@@ -38,7 +38,10 @@
                                 Classes="repeattrack"
                                 Focusable="False" />
                 </Track.IncreaseButton>
-                <Thumb Name="thumb" />
+                  <Thumb Name="thumb"
+                         CornerRadius="{DynamicResource ControlCornerRadius}"
+                         Background="{DynamicResource ThemeControlHighBrush}"/>
+
               </Track>
               <RepeatButton Name="PART_LineDownButton"
                             Grid.Row="2"
@@ -88,7 +91,9 @@
                                 Classes="repeattrack"
                                 Focusable="False" />
                 </Track.IncreaseButton>
-                <Thumb Name="thumb" />
+                <Thumb Name="thumb"
+                       CornerRadius="{DynamicResource ControlCornerRadius}"
+                       Background="{DynamicResource ThemeControlHighBrush}"/>
               </Track>
               <RepeatButton Name="PART_LineDownButton"
                             Grid.Row="2"
@@ -109,16 +114,17 @@
       <Setter Property="Template">
         <Setter.Value>
           <ControlTemplate>
-            <Border Background="{TemplateBinding Background}" />
+            <Border Background="{TemplateBinding Background}"
+                    CornerRadius="{TemplateBinding CornerRadius}" />
           </ControlTemplate>
         </Setter.Value>
       </Setter>
     </Style>
     <Style Selector="^ /template/ Thumb#thumb:pointerover">
-      <Setter Property="Background" Value="{DynamicResource ThemeControlHighBrush}" />
+      <Setter Property="Background" Value="{DynamicResource ThemeControlHighlightBrush}" />
     </Style>
     <Style Selector="^ /template/ Thumb#thumb:pressed">
-      <Setter Property="Background" Value="{DynamicResource ThemeControlVeryHighBrush}" />
+      <Setter Property="Background" Value="{DynamicResource ThemeControlHighlightBrush}" />
     </Style>
     <Style Selector="^:horizontal /template/ Thumb#thumb">
       <Setter Property="MinWidth" Value="{DynamicResource ScrollBarThickness}" />
@@ -141,11 +147,12 @@
     </Style>
 
     <Style Selector="^ /template/ RepeatButton > Path">
-      <Setter Property="Fill" Value="{DynamicResource ThemeForegroundLowBrush}" />
+      <Setter Property="Fill" Value="{DynamicResource ThemeForegroundBrush}" />
+      <Setter Property="Opacity" Value="0.5"/>
     </Style>
 
     <Style Selector="^ /template/ RepeatButton:pointerover > Path">
-      <Setter Property="Fill" Value="{DynamicResource ThemeAccentBrush}" />
+        <Setter Property="Opacity" Value="1"/>
     </Style>
   </ControlTheme>
 </ResourceDictionary>

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

@@ -151,7 +151,7 @@
 
     <!-- PointerOverState -->
     <Style Selector="^:pointerover /template/ Border#OuterBorder">
-      <Setter Property="BorderBrush" Value="{DynamicResource ThemeBorderHighColor}" />
+      <Setter Property="BorderBrush" Value="{DynamicResource ThemeBorderHighBrush}" />
       <Setter Property="Background" Value="Transparent" />
     </Style>
 
@@ -160,12 +160,11 @@
     </Style>
 
     <Style Selector="^:pointerover /template/ Ellipse#SwitchKnobOn">
-      <Setter Property="Fill" Value="{DynamicResource HighlightForegroundColor}" />
+      <Setter Property="Fill" Value="{DynamicResource ThemeControlHighlightBrush}" />
     </Style>
 
     <Style Selector="^:pointerover /template/ Border#SwitchKnobBounds">
-      <Setter Property="Background" Value="{DynamicResource ThemeAccentColor2}" />
-      <Setter Property="BorderBrush" Value="{DynamicResource ThemeAccentColor2}" />
+      <Setter Property="BorderBrush" Value="{DynamicResource ThemeControlHighlightBrush}" />
     </Style>
 
     <Style Selector="^:pointerover /template/ Grid#SwitchAreaGrid">
@@ -220,7 +219,7 @@
 
     <!-- CheckedState -->
     <Style Selector="^:checked /template/ Border#OuterBorder">
-      <Setter Property="Opacity" Value="0" />
+        <Setter Property="Background" Value="{DynamicResource ThemeAccent2Brush}" />
     </Style>
 
     <Style Selector="^:checked  /template/ Ellipse#SwitchKnobOff">