From 2e3473bbfd11c3517790ba36833602e8f32ba667 Mon Sep 17 00:00:00 2001
From: Enrico Giordani <enricogior@users.noreply.github.com>
Date: Tue, 9 Mar 2021 19:39:01 +0100
Subject: [PATCH] [FZ Editor] Light & Dark colors adjustments (#10115)

* [FZ Editor] Light & Dark colors adjustments

* Reduce dark theme background transparency
---
 .../editor/FancyZonesEditor/CanvasZone.xaml   | 32 +++++++++++--------
 .../editor/FancyZonesEditor/GridZone.xaml     |  3 +-
 .../Styles/LayoutPreviewStyles.xaml           | 10 +++---
 .../editor/FancyZonesEditor/Themes/Dark.xaml  | 14 +++++---
 .../editor/FancyZonesEditor/Themes/Light.xaml | 16 +++++++---
 5 files changed, 45 insertions(+), 30 deletions(-)

diff --git a/src/modules/fancyzones/editor/FancyZonesEditor/CanvasZone.xaml b/src/modules/fancyzones/editor/FancyZonesEditor/CanvasZone.xaml
index 89733659b1..7865cec136 100644
--- a/src/modules/fancyzones/editor/FancyZonesEditor/CanvasZone.xaml
+++ b/src/modules/fancyzones/editor/FancyZonesEditor/CanvasZone.xaml
@@ -16,7 +16,12 @@
             <Setter Property="Template">
                 <Setter.Value>
                     <ControlTemplate TargetType="{x:Type Thumb}">
-                        <Border x:Name="ThumbBorder" Opacity="0" BorderBrush="{DynamicResource SystemControlBackgroundAccentBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
+                        <Border x:Name="ThumbBorder"
+                                Opacity="0"
+                                CornerRadius="0"
+                                BorderBrush="{DynamicResource SystemControlBackgroundAccentBrush}"
+                                BorderThickness="{TemplateBinding BorderThickness}"
+                                Background="{TemplateBinding Background}">
                             <VisualStateManager.VisualStateGroups>
                                 <VisualStateGroup x:Name="CommonStates" >
                                     <VisualStateGroup.Transitions>
@@ -64,7 +69,9 @@
                         </Border>
                         <ControlTemplate.Triggers>
                             <Trigger Property="IsDefaulted" Value="true">
-                                <Setter Property="BorderBrush" TargetName="border" Value="{DynamicResource SystemControlBackgroundAccentBrush}"/>
+                                <Setter Property="BorderBrush"
+                                        TargetName="border"
+                                        Value="{DynamicResource SystemControlBackgroundAccentBrush}"/>
                             </Trigger>
                             <Trigger Property="IsMouseOver" Value="true">
                                 <Setter Property="Opacity" TargetName="contentPresenter" Value="0.6"/>
@@ -79,10 +86,9 @@
         </Style>
     </UserControl.Resources>
 
-    <Border BorderBrush="{DynamicResource LayoutPreviewZoneBorderBrush}"
+    <Border BorderBrush="{DynamicResource SystemControlBackgroundAccentBrush}"
             Background="{DynamicResource CanvasZoneBackgroundBrush}"
-            CornerRadius="4"
-            Effect="{StaticResource ZoneDropShadow}"
+            CornerRadius="0"
             BorderThickness="1">
         <Grid x:Name="Frame">
             <Grid.RowDefinitions>
@@ -129,15 +135,15 @@
 
             <Thumb x:Name="Caption" Cursor="SizeAll" Background="Transparent" BorderThickness="3" Padding="4" Grid.Column="0" Grid.ColumnSpan="5" Margin="-1" Grid.Row="0" Grid.RowSpan="5" DragDelta="UniversalDragDelta" DragStarted="Caption_DragStarted" Style="{DynamicResource CanvasZoneThumbStyle}"/>
 
-            <Thumb x:Name="NResize" Cursor="SizeNS" BorderThickness="0,3,0,0" Grid.ColumnSpan="5" DragDelta="UniversalDragDelta" DragStarted="NResize_DragStarted" Style="{DynamicResource CanvasZoneThumbStyle}"/>
-            <Thumb x:Name="SResize" Cursor="SizeNS" BorderThickness="0,0,0,3" Grid.Row="4" Grid.ColumnSpan="5" DragDelta="UniversalDragDelta" DragStarted="SResize_DragStarted" Style="{DynamicResource CanvasZoneThumbStyle}"/>
-            <Thumb x:Name="WResize" Cursor="SizeWE" BorderThickness="3,0,0,0" Grid.RowSpan="5" DragDelta="UniversalDragDelta" DragStarted="WResize_DragStarted" Style="{DynamicResource CanvasZoneThumbStyle}"/>
-            <Thumb x:Name="EResize" Cursor="SizeWE" BorderThickness="0,0,3,0" Grid.Column="4" Grid.RowSpan="5" DragDelta="UniversalDragDelta" DragStarted="EResize_DragStarted" Style="{DynamicResource CanvasZoneThumbStyle}"/>
+            <Thumb x:Name="NResize" Cursor="SizeNS" BorderThickness="0,2,0,0" Grid.ColumnSpan="5" DragDelta="UniversalDragDelta" DragStarted="NResize_DragStarted" Style="{DynamicResource CanvasZoneThumbStyle}"/>
+            <Thumb x:Name="SResize" Cursor="SizeNS" BorderThickness="0,0,0,2" Grid.Row="4" Grid.ColumnSpan="5" DragDelta="UniversalDragDelta" DragStarted="SResize_DragStarted" Style="{DynamicResource CanvasZoneThumbStyle}"/>
+            <Thumb x:Name="WResize" Cursor="SizeWE" BorderThickness="2,0,0,0" Grid.RowSpan="5" DragDelta="UniversalDragDelta" DragStarted="WResize_DragStarted" Style="{DynamicResource CanvasZoneThumbStyle}"/>
+            <Thumb x:Name="EResize" Cursor="SizeWE" BorderThickness="0,0,2,0" Grid.Column="4" Grid.RowSpan="5" DragDelta="UniversalDragDelta" DragStarted="EResize_DragStarted" Style="{DynamicResource CanvasZoneThumbStyle}"/>
 
-            <Thumb x:Name="NWResize" Cursor="SizeNWSE" BorderThickness="3,3,0,0" Grid.Row="0" Grid.Column="0" Grid.RowSpan="2" Grid.ColumnSpan="2" DragDelta="UniversalDragDelta" DragStarted="NWResize_DragStarted" Style="{DynamicResource CanvasZoneThumbStyle}"/>
-            <Thumb x:Name="NEResize" Cursor="SizeNESW" BorderThickness="0,3,3,0" Grid.Row="0" Grid.Column="3" Grid.RowSpan="2" Grid.ColumnSpan="2" DragDelta="UniversalDragDelta" DragStarted="NEResize_DragStarted" Style="{DynamicResource CanvasZoneThumbStyle}"/>
-            <Thumb x:Name="SWResize" Cursor="SizeNESW" BorderThickness="3,0,0,3" Grid.Row="3" Grid.Column="0" Grid.RowSpan="2" Grid.ColumnSpan="2" DragDelta="UniversalDragDelta" DragStarted="SWResize_DragStarted" Style="{DynamicResource CanvasZoneThumbStyle}"/>
-            <Thumb x:Name="SEResize" Cursor="SizeNWSE" BorderThickness="0,0,3,3" Grid.Row="3" Grid.Column="3" Grid.RowSpan="2" Grid.ColumnSpan="2" DragDelta="UniversalDragDelta" DragStarted="SEResize_DragStarted" Style="{DynamicResource CanvasZoneThumbStyle}"/>
+            <Thumb x:Name="NWResize" Cursor="SizeNWSE" BorderThickness="2,2,0,0" Grid.Row="0" Grid.Column="0" Grid.RowSpan="2" Grid.ColumnSpan="2" DragDelta="UniversalDragDelta" DragStarted="NWResize_DragStarted" Style="{DynamicResource CanvasZoneThumbStyle}"/>
+            <Thumb x:Name="NEResize" Cursor="SizeNESW" BorderThickness="0,2,2,0" Grid.Row="0" Grid.Column="3" Grid.RowSpan="2" Grid.ColumnSpan="2" DragDelta="UniversalDragDelta" DragStarted="NEResize_DragStarted" Style="{DynamicResource CanvasZoneThumbStyle}"/>
+            <Thumb x:Name="SWResize" Cursor="SizeNESW" BorderThickness="2,0,0,2" Grid.Row="3" Grid.Column="0" Grid.RowSpan="2" Grid.ColumnSpan="2" DragDelta="UniversalDragDelta" DragStarted="SWResize_DragStarted" Style="{DynamicResource CanvasZoneThumbStyle}"/>
+            <Thumb x:Name="SEResize" Cursor="SizeNWSE" BorderThickness="0,0,2,2" Grid.Row="3" Grid.Column="3" Grid.RowSpan="2" Grid.ColumnSpan="2" DragDelta="UniversalDragDelta" DragStarted="SEResize_DragStarted" Style="{DynamicResource CanvasZoneThumbStyle}"/>
 
             <Button Content="&#xE894;"
                     BorderThickness="0"
diff --git a/src/modules/fancyzones/editor/FancyZonesEditor/GridZone.xaml b/src/modules/fancyzones/editor/FancyZonesEditor/GridZone.xaml
index 2002f934cb..74f040b750 100644
--- a/src/modules/fancyzones/editor/FancyZonesEditor/GridZone.xaml
+++ b/src/modules/fancyzones/editor/FancyZonesEditor/GridZone.xaml
@@ -10,11 +10,10 @@
     d:DesignHeight="450"
     d:DesignWidth="800"
     Background="{DynamicResource GridZoneBackgroundBrush}"
-    BorderBrush="{DynamicResource LayoutPreviewZoneBorderBrush}"
+    BorderBrush="{DynamicResource SystemControlBackgroundAccentBrush}"
     BorderThickness="1"
     Opacity="1"
     ui:ControlHelper.CornerRadius="4"
-    Effect="{StaticResource ZoneDropShadow}"
     mc:Ignorable="d">
     
     <Grid x:Name="Frame">
diff --git a/src/modules/fancyzones/editor/FancyZonesEditor/Styles/LayoutPreviewStyles.xaml b/src/modules/fancyzones/editor/FancyZonesEditor/Styles/LayoutPreviewStyles.xaml
index 1fce3fb648..0b9b0aeeea 100644
--- a/src/modules/fancyzones/editor/FancyZonesEditor/Styles/LayoutPreviewStyles.xaml
+++ b/src/modules/fancyzones/editor/FancyZonesEditor/Styles/LayoutPreviewStyles.xaml
@@ -14,10 +14,9 @@
 
     <Style x:Key="GridLayoutActualScalePreviewStyle" TargetType="Border">
         <Setter Property="Background" Value="{DynamicResource LayoutPreviewActualScaleZoneBackgroundBrush}" />
-        <Setter Property="BorderBrush" Value="{DynamicResource LayoutPreviewZoneBorderBrush}" />
-        <Setter Property="BorderThickness" Value="2" />
+        <Setter Property="BorderBrush" Value="{DynamicResource SystemControlBackgroundAccentBrush}" />
+        <Setter Property="BorderThickness" Value="1" />
         <Setter Property="CornerRadius" Value="4" />
-        <Setter Property="Effect" Value="{StaticResource ZoneDropShadow}" />
     </Style>
 
     <Style x:Key="CanvasLayoutSmallScalePreviewStyle" TargetType="Border">
@@ -29,9 +28,8 @@
 
     <Style x:Key="CanvasLayoutActualScalePreviewStyle" TargetType="Border">
         <Setter Property="Background" Value="{DynamicResource LayoutPreviewActualScaleZoneBackgroundBrush}" />
-        <Setter Property="BorderBrush" Value="{DynamicResource LayoutPreviewZoneBorderBrush}" />
-        <Setter Property="BorderThickness" Value="2" />
+        <Setter Property="BorderBrush" Value="{DynamicResource SystemControlBackgroundAccentBrush}" />
+        <Setter Property="BorderThickness" Value="1" />
         <Setter Property="CornerRadius" Value="4" />
-        <Setter Property="Effect" Value="{StaticResource ZoneDropShadow}" />
     </Style>
 </ResourceDictionary>
\ No newline at end of file
diff --git a/src/modules/fancyzones/editor/FancyZonesEditor/Themes/Dark.xaml b/src/modules/fancyzones/editor/FancyZonesEditor/Themes/Dark.xaml
index e263c026fd..60a75c507e 100644
--- a/src/modules/fancyzones/editor/FancyZonesEditor/Themes/Dark.xaml
+++ b/src/modules/fancyzones/editor/FancyZonesEditor/Themes/Dark.xaml
@@ -15,15 +15,21 @@
     <SolidColorBrush x:Key="TertiaryBackgroundBrush" Color="#FF202020" />
     <SolidColorBrush x:Key="PrimaryForegroundBrush" Color="#FFFFFFFF" />
     <SolidColorBrush x:Key="SecondaryForegroundBrush" Color="#FF9a9a9a" />
-    <SolidColorBrush x:Key="BackdropBrush" Color="#E55B5B5B" />
+    <SolidColorBrush x:Key="BackdropBrush" Color="#40F0F0F0" />
     <SolidColorBrush x:Key="TitleBarSecondaryForegroundBrush" Color="#FF9a9a9a" />
+    
+    <!-- Used for layouts and monitors -->
     <SolidColorBrush x:Key="LayoutItemBackgroundBrush" Color="#FF3A3A3A" />
     <SolidColorBrush x:Key="LayoutItemBackgroundPointerOverBrush" Color="#FF333333" />
+
+    <!-- Used for the fullscreen preview (ActualScale) and for the thumbnail preview (SmallScale) -->
     <SolidColorBrush x:Key="LayoutPreviewBackgroundBrush" Color="#331B1B1B" />
+    <!-- Currently unused -->
     <SolidColorBrush x:Key="LayoutPreviewZoneBorderBrush" Color="#FF555454" />
 
-    <SolidColorBrush x:Key="LayoutPreviewActualScaleZoneBackgroundBrush" Color="#E5202020" />
+    <SolidColorBrush x:Key="LayoutPreviewActualScaleZoneBackgroundBrush" Color="#B0202020" />
     <SolidColorBrush x:Key="LayoutPreviewSmallScaleZoneBackgroundBrush" Color="#FF202020" />
-    <SolidColorBrush x:Key="CanvasZoneBackgroundBrush" Color="#E5202020" />
-    <SolidColorBrush x:Key="GridZoneBackgroundBrush" Color="#E5202020" />
+
+    <SolidColorBrush x:Key="CanvasZoneBackgroundBrush" Color="#B0202020" />
+    <SolidColorBrush x:Key="GridZoneBackgroundBrush" Color="#B0202020" />
 </ResourceDictionary>
\ No newline at end of file
diff --git a/src/modules/fancyzones/editor/FancyZonesEditor/Themes/Light.xaml b/src/modules/fancyzones/editor/FancyZonesEditor/Themes/Light.xaml
index dc46e750eb..5df2580a2f 100644
--- a/src/modules/fancyzones/editor/FancyZonesEditor/Themes/Light.xaml
+++ b/src/modules/fancyzones/editor/FancyZonesEditor/Themes/Light.xaml
@@ -14,16 +14,22 @@
     <SolidColorBrush x:Key="SecondaryBackgroundBrush" Color="#FFeeeeee" />
     <SolidColorBrush x:Key="TertiaryBackgroundBrush" Color="#FFF3F3F3" />
     <SolidColorBrush x:Key="PrimaryForegroundBrush" Color="#FF000000" />
-    <SolidColorBrush x:Key="SecondaryForegroundBrush" Color="#FF949494" />
-    <SolidColorBrush x:Key="BackdropBrush" Color="#E5949494" />
+    <SolidColorBrush x:Key="SecondaryForegroundBrush" Color="#FF6A6A6A" />
+    <SolidColorBrush x:Key="BackdropBrush" Color="#85F0F0F0" />
     <SolidColorBrush x:Key="TitleBarSecondaryForegroundBrush" Color="#FF949494" />
+
+    <!-- Used for layouts and monitors -->
     <SolidColorBrush x:Key="LayoutItemBackgroundBrush" Color="#FFffffff"/>
     <SolidColorBrush x:Key="LayoutItemBackgroundPointerOverBrush" Color="#FFf2f2f2" />
+
+    <!-- Used for the fullscreen preview (ActualScale) and for the thumbnail preview (SmallScale) -->
     <SolidColorBrush x:Key="LayoutPreviewBackgroundBrush" Color="#19949494" />
+    <!-- Currently unused -->
     <SolidColorBrush x:Key="LayoutPreviewZoneBorderBrush" Color="#FFC3BEBE" />
 
-    <SolidColorBrush x:Key="LayoutPreviewActualScaleZoneBackgroundBrush" Color="#E5F3F3F3" />
+    <SolidColorBrush x:Key="LayoutPreviewActualScaleZoneBackgroundBrush" Color="#C5F8F8F8" />
     <SolidColorBrush x:Key="LayoutPreviewSmallScaleZoneBackgroundBrush" Color="#FFDCDCDC" />
-    <SolidColorBrush x:Key="CanvasZoneBackgroundBrush" Color="#E5F3F3F3" />
-    <SolidColorBrush x:Key="GridZoneBackgroundBrush" Color="#E5F3F3F3" />
+    
+    <SolidColorBrush x:Key="CanvasZoneBackgroundBrush" Color="#C5F8F8F8" />
+    <SolidColorBrush x:Key="GridZoneBackgroundBrush" Color="#C5F8F8F8" />
 </ResourceDictionary>
\ No newline at end of file