Made togglable flyout color match other flyouts

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

@@ -155,6 +155,7 @@
     
     <Style Selector="ToggleButton.pixi-icon">
         <Setter Property="FontFamily" Value="{DynamicResource PixiPerfectIcons}"/>
+        <Setter Property="BorderThickness" Value="0"/>
         <Setter Property="Background" Value="Transparent"/>
         <Setter Property="FontSize" Value="24"/>
         <Setter Property="Padding" Value="0"/>

src/PixiEditor/Styles/PortingWipStyles.axaml

@@ -13,11 +13,11 @@
     </Style>
 
     <Style Selector="Button.OverlayToggleButton">
-
+        <Setter Property="BorderThickness" Value="0"/>
     </Style>
 
     <Style Selector="Button.OverlayButton">
-
+        <Setter Property="BorderThickness" Value="0"/>
     </Style>
 
     <Style Selector="Button.ImageButtonStyle">

src/PixiEditor/Views/Main/ViewportControls/Viewport.axaml

@@ -52,19 +52,30 @@
                                   ui:Translator.TooltipKey="VIEWPORT_SETTINGS"
                                   ZIndex="2" HorizontalAlignment="Right" VerticalAlignment="Top">
             <overlays:TogglableFlyout.Child>
-                <Border BorderThickness="1" CornerRadius="5" Padding="5"
-                        Background="{DynamicResource ThemeBackgroundTranslucentBrush}" ZIndex="2">
+                <Border Padding="5"
+                        CornerRadius="{DynamicResource ControlCornerRadius}"
+                        BorderBrush="{DynamicResource ThemeBorderMidBrush}"
+                        BorderThickness="{DynamicResource ThemeBorderThickness}"
+                        Background="{DynamicResource ThemeBackgroundBrush1}" ZIndex="2">
                     <StackPanel Orientation="Vertical">
                         <StackPanel Orientation="Horizontal">
-                            <TextBlock Margin="5 0" TextAlignment="Center"
-                                       Text="{Binding Path=AngleRadians, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=viewportControls:Viewport},
+                            <Border Width="35" Height="35" Margin="5 0" 
+                                    BorderBrush="{DynamicResource ThemeBorderMidBrush}"
+                                    BorderThickness="{DynamicResource ThemeBorderThickness}"
+                                    CornerRadius="{DynamicResource ControlCornerRadius}"
+                                    Background="{DynamicResource ThemeControlHighBrush}"
+                                    VerticalAlignment="Center">
+                                <TextBlock TextAlignment="Center"
+                                           VerticalAlignment="Center"
+                                           Text="{Binding Path=AngleRadians, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=viewportControls:Viewport},
              Converter={converters:RadiansToDegreesConverter}, StringFormat={}{0}°}"
-                                       Width="35" Foreground="White" VerticalAlignment="Center" FontSize="16" />
+                                           Foreground="{DynamicResource ThemeForegroundBrush}"
+                                           FontSize="16" />
+                            </Border>
                             <Button Width="32" Height="32" ui:Translator.TooltipKey="RESET_VIEWPORT"
                                     Classes="OverlayButton pixi-icon"
                                     Click="ResetViewportClicked"
                                     BorderBrush="{DynamicResource ThemeBorderMidBrush}"
-                                    BorderThickness="1"
                                     Content="{DynamicResource icon-reset}"
                                     Cursor="Hand" />
                         </StackPanel>
@@ -143,8 +154,8 @@
             FlowDirection="LeftToRight">
             <brushShapeOverlay:BrushShapeOverlay.IsVisible>
                 <MultiBinding Converter="{converters:AllTrueConverter}">
-                    <Binding Path="!Document.TransformViewModel.TransformActive"/>
-                    <Binding Path="IsOverCanvas"/> 
+                    <Binding Path="!Document.TransformViewModel.TransformActive" />
+                    <Binding Path="IsOverCanvas" />
                 </MultiBinding>
             </brushShapeOverlay:BrushShapeOverlay.IsVisible>
         </brushShapeOverlay:BrushShapeOverlay>

src/PixiEditor/Views/Overlays/TogglableFlyout.axaml

@@ -8,7 +8,11 @@
              d:DesignHeight="380" d:DesignWidth="200" Name="togglableFlyout">
     <Border Background="Transparent">
         <StackPanel Orientation="Vertical">
-            <Border HorizontalAlignment="Right" Background="{DynamicResource ThemeBackgroundTranslucentBrush}" CornerRadius="5" Padding="5" x:Name="btnBorder">
+            <Border HorizontalAlignment="Right" Background="{DynamicResource ThemeBackgroundBrush1}"
+                    CornerRadius="{DynamicResource ControlCornerRadius}"
+                    BorderBrush="{DynamicResource ThemeBorderMidBrush}"
+                    BorderThickness="{DynamicResource ThemeBorderThickness}" Padding="5"
+                    x:Name="btnBorder">
                 <ToggleButton Padding="0" Margin="0"
                               x:Name="toggleButton" BorderThickness="0" Width="24" Height="24" Background="Transparent">
                     <ToggleButton.Template>
@@ -16,57 +20,34 @@
                             <Grid>
                                 <Grid.Styles>
                                     <Style Selector="Grid TextBlock#btnBg">
-                                        <Setter Property="RenderTransform" Value="rotate(0)"/>
+                                        <Setter Property="RenderTransform" Value="rotate(0)" />
                                     </Style>
                                     <Style Selector="ToggleButton:checked TextBlock#btnBg">
-                                        <Setter Property="RenderTransform" Value="rotate(180deg)"/>
+                                        <Setter Property="RenderTransform" Value="rotate(180deg)" />
                                     </Style>
                                 </Grid.Styles>
                                 <TextBlock Focusable="False" FontSize="24" Width="24" Cursor="Hand" x:Name="btnBg"
                                            Classes="pixi-icon"
-                                       Text="{Binding ElementName=togglableFlyout, Path=Icon}">
+                                           Text="{Binding ElementName=togglableFlyout, Path=Icon}">
                                     <TextBlock.Transitions>
                                         <Transitions>
-                                            <TransformOperationsTransition Duration="0:0:0.15" Property="RenderTransform" />
+                                            <TransformOperationsTransition Duration="0:0:0.15"
+                                                                           Property="RenderTransform" />
                                         </Transitions>
                                     </TextBlock.Transitions>
                                     <TextBlock.RenderTransform>
-                                        <RotateTransform Angle="0" CenterX="12" CenterY="12"/>
+                                        <RotateTransform Angle="0" CenterX="12" CenterY="12" />
                                     </TextBlock.RenderTransform>
                                 </TextBlock>
-                                <ContentPresenter/>
+                                <ContentPresenter />
                             </Grid>
-                            <!--<ControlTemplate.Triggers>
-                                <Trigger Property="IsChecked" Value="True">
-                                    <Trigger.EnterActions>
-                                        <BeginStoryboard x:Name="Rotate90Animation">
-                                            <Storyboard>
-                                                <DoubleAnimation From="0" To="180"
-                                                                 Storyboard.TargetName="btnBg"
-                                                                 Storyboard.TargetProperty="(ToggleButton.RenderTransform).(RotateTransform.Angle)"
-                                                                 Duration="0:0:0.15"/>
-                                            </Storyboard>
-                                        </BeginStoryboard>
-                                    </Trigger.EnterActions>
-                                    <Trigger.ExitActions>
-                                        <BeginStoryboard x:Name="RotateReverse90Animation">
-                                            <Storyboard>
-                                                <DoubleAnimation From="180" To="0"
-                                                                 Storyboard.TargetName="btnBg"
-                                                                 Storyboard.TargetProperty="(ToggleButton.RenderTransform).(RotateTransform.Angle)"
-                                                                 Duration="0:0:0.15"/>
-                                            </Storyboard>
-                                        </BeginStoryboard>
-                                    </Trigger.ExitActions>
-                                </Trigger>
-                            </ControlTemplate.Triggers>-->
                         </ControlTemplate>
                     </ToggleButton.Template>
                 </ToggleButton>
             </Border>
             <ContentControl x:Name="popup" DataContext="{Binding ElementName=togglableFlyout}"
-                              IsVisible="{Binding Path=IsChecked, ElementName=toggleButton}"
-                   Content="{Binding ElementName=togglableFlyout, Path=Child}" />
+                            IsVisible="{Binding Path=IsChecked, ElementName=toggleButton}"
+                            Content="{Binding ElementName=togglableFlyout, Path=Child}" />
         </StackPanel>
     </Border>
-</UserControl>
+</UserControl>