Visual Restyle Update (#13133)

* High-density Applied

- reduced margins and paddings to PackageTermsOfUse and UsageReportingAgreement dialogs

* TitleBarButton Icons Added

- added an icon set for dark and light theme for the maximize, minimize, close and restore buttons

* Normalize Renamed to Restore, Icons Changed

- button resource named 'Normalize' changed to 'Restore'
- all references to that resource have been renamed to match the new version
- old icons replaced with new for the CloseButtonStyle, MinimizeButtonStyle, MaximizeButtonStyle, and RestoreButtonStyle
- minor typo in one of the image resources fixed

* Created Dark Theme for TitleBarButtons

- created a base button style to contain all the base properties of both Light and Dark theme styles
- created a derived Dark theme style
- changed the Edit Name dialog to use the new Dark Theme Style

* Light Theme Style Derive From BaseButtonStyle

- aligned light theme styles to also derive from the basebuttonstyle

* ZoomDirectEditThreshold Global Variable

- introduced ZoomDirectEditThreshold as a Configuration variable to control both Notes and Nodes rename zoom level

* Edit Name TextBox Hover/Focus States Fix

- fixed the mouseover and focus style for the HintingTextBox Style, which is used for the Edit Name (Node + Note) dialog

* Minimum Height Constraint Terms of Use Dialog

- added minimum height value for the Terms of Use dialog window

* Minimum Height ScollBar Handle

- added a minimum height to the scrollbar grip, so regardless of the amount of scrollable area, the decent grip height will be available

* Node Edit Text Selection Background

- change the color to the selected text when editing Node's name
- added a new resource in the DynamoColorsAndBrushes dictionary file for future use

* Resizable Crash Dialog

- changes to the Crash dialog window to make it resizable

* DynamoMessageBox Yes/No Swapp

- swapped the position of the 'Yes' and 'No' button so the blue 'continue' button is always at the right-hand side of the dialog

* Dynamo Message Box Cancel Dock Left

- shifted the 'Cancel' button to the left-hand side of the dialog

* Update About Window

- 'Up to date' text now fixed to the Dynamo logo when resizing the window

* Mark Graph HasUnsavedChanges after Inline Rename (Node)

- fixed an issue where renaming a Node directly would not mark the Graph as changed

* Mark Graph HasUnsavedChanges after Rename (Note)

- fixed issue where Graph wouldn't get marked as changed after editing a Note

* Text Selection Color Change

- changed the shade of selection color for the Node to comply with contrast standards

* Remove Old TitleBar Icons

- remove old png resources and replaced with new ones

src/DynamoCore/Configuration/Configurations.cs

@@ -121,6 +121,11 @@ public class Configurations
         /// </summary>
         public static readonly double ZoomThreshold = 0.4;
 
+        /// <summary>
+        /// Global zoom threshold for renaming Nodes and Notes 
+        /// </summary>
+        public static readonly double ZoomDirectEditThreshold = 0.5;
+
         #endregion
 
         #region Tab Bar Configurations

src/DynamoCoreWpf/Controls/NodeAutoCompleteSearchControl.xaml

@@ -98,7 +98,7 @@
                                                 <Setter Property="Source" Value="/DynamoCoreWpf;component/UI/Images/whiteclosetab.png" />
                                             </Trigger>
                                             <Trigger Property="IsMouseOver" Value="True">
-                                                <Setter Property="Source" Value="/DynamoCoreWpf;component/UI/Images/close_blue.png" />
+                                                <Setter Property="Source" Value="/DynamoCoreWpf;component/UI/Images/TitleBarButtons/close-darktheme-hover-16px.png" />
                                             </Trigger>
                                         </Style.Triggers>
                                     </Style>

src/DynamoCoreWpf/DynamoCoreWpf.csproj

@@ -24,16 +24,29 @@
     <None Remove="UI\Images\Alignment\align_y_distribute.png" />
     <None Remove="UI\Images\dynamonotext.png" />
     <None Remove="UI\Images\maximize_16px_blue.png" />
-    <None Remove="UI\Images\maximize_16px_grey.png" />
     <None Remove="UI\Images\minimize_16px_blue.png" />
-    <None Remove="UI\Images\minimize_16px_grey.png" />
     <None Remove="UI\Images\minus_16px_blue.png" />
-    <None Remove="UI\Images\minus_16px_grey.png" />
     <None Remove="UI\Images\NodeStates\alert-64px.png" />
     <None Remove="UI\Images\NodeStates\error-64px.png" />
     <None Remove="UI\Images\NodeStates\frozen-64px.png" />
     <None Remove="UI\Images\NodeStates\hidden-64px.png" />
     <None Remove="UI\Images\NodeStates\info-64px.png" />
+    <None Remove="UI\Images\TitleBarButtons\close-darktheme-default-16px.png" />
+    <None Remove="UI\Images\TitleBarButtons\close-darktheme-hover-16px.png" />
+    <None Remove="UI\Images\TitleBarButtons\close-lighttheme-default-16px.png" />
+    <None Remove="UI\Images\TitleBarButtons\close-lighttheme-hover-16px.png" />
+    <None Remove="UI\Images\TitleBarButtons\max-darktheme-default-16px.png" />
+    <None Remove="UI\Images\TitleBarButtons\max-darktheme-hover-16px.png" />
+    <None Remove="UI\Images\TitleBarButtons\max-lighttheme-default-16px.png" />
+    <None Remove="UI\Images\TitleBarButtons\max-lighttheme-hover-16px.png" />
+    <None Remove="UI\Images\TitleBarButtons\min-darktheme-default-16px.png" />
+    <None Remove="UI\Images\TitleBarButtons\min-darktheme-hover-16px.png" />
+    <None Remove="UI\Images\TitleBarButtons\min-lighttheme-default-16px.png" />
+    <None Remove="UI\Images\TitleBarButtons\min-lighttheme-hover-16px.png" />
+    <None Remove="UI\Images\TitleBarButtons\restore-darktheme-default-16px.png" />
+    <None Remove="UI\Images\TitleBarButtons\restore-darktheme-hover-16px.png" />
+    <None Remove="UI\Images\TitleBarButtons\restore-lighttheme-default-16px.png" />
+    <None Remove="UI\Images\TitleBarButtons\restore-lighttheme-hover-16px.png" />
     <None Remove="UI\Images\warning_16px.png" />
     <None Remove="Views\FileTrust\FileTrustWarning.xaml" />
     <None Remove="Views\GuidedTour\HtmlPages\nodePackage.html" />
@@ -801,16 +814,29 @@
     <Resource Include="UI\Images\closetab_normal.png" />
     <Resource Include="UI\Images\dynamonotext.png" />
     <Resource Include="UI\Images\maximize_16px_blue.png" />
-    <Resource Include="UI\Images\maximize_16px_grey.png" />
     <Resource Include="UI\Images\minimize_16px_blue.png" />
-    <Resource Include="UI\Images\minimize_16px_grey.png" />
     <Resource Include="UI\Images\minus_16px_blue.png" />
-    <Resource Include="UI\Images\minus_16px_grey.png" />
     <Resource Include="UI\Images\NodeStates\alert-64px.png" />
     <Resource Include="UI\Images\NodeStates\error-64px.png" />
     <Resource Include="UI\Images\NodeStates\frozen-64px.png" />
     <Resource Include="UI\Images\NodeStates\hidden-64px.png" />
     <Resource Include="UI\Images\NodeStates\info-64px.png" />
+    <Resource Include="UI\Images\TitleBarButtons\close-darktheme-default-16px.png" />
+    <Resource Include="UI\Images\TitleBarButtons\close-lighttheme-default-16px.png" />
+    <Resource Include="UI\Images\TitleBarButtons\close-lighttheme-hover-16px.png" />
+    <Resource Include="UI\Images\TitleBarButtons\max-darktheme-default-16px.png" />
+    <Resource Include="UI\Images\TitleBarButtons\max-darktheme-hover-16px.png" />
+    <Resource Include="UI\Images\TitleBarButtons\max-lighttheme-default-16px.png" />
+    <Resource Include="UI\Images\TitleBarButtons\max-lighttheme-hover-16px.png" />
+    <Resource Include="UI\Images\TitleBarButtons\min-darktheme-default-16px.png" />
+    <Resource Include="UI\Images\TitleBarButtons\close-darktheme-hover-16px.png" />
+    <Resource Include="UI\Images\TitleBarButtons\min-darktheme-hover-16px.png" />
+    <Resource Include="UI\Images\TitleBarButtons\min-lighttheme-default-16px.png" />
+    <Resource Include="UI\Images\TitleBarButtons\min-lighttheme-hover-16px.png" />
+    <Resource Include="UI\Images\TitleBarButtons\restore-darktheme-default-16px.png" />
+    <Resource Include="UI\Images\TitleBarButtons\restore-darktheme-hover-16px.png" />
+    <Resource Include="UI\Images\TitleBarButtons\restore-lighttheme-default-16px.png" />
+    <Resource Include="UI\Images\TitleBarButtons\restore-lighttheme-hover-16px.png" />
     <Resource Include="UI\Images\warning_16px.png" />
   </ItemGroup>
   <ItemGroup>
@@ -1447,12 +1473,6 @@
     <Resource Include="UI\Images\profile_normal.png" />
   </ItemGroup>
   <ItemGroup>
-    <Resource Include="UI\Images\max-default.png" />
-    <Resource Include="UI\Images\min-default.png" />
-    <Resource Include="UI\Images\minimize-hover.png" />
-    <Resource Include="UI\Images\minimize-hover-16px.png" />
-    <Resource Include="UI\Images\minimize-default-16px.png" />
-    <Resource Include="UI\Images\maximize-hover.png" />
     <EmbeddedResource Include="Views\GuidedTour\HtmlPages\Resources\PackageNodes.gif" />
     <EmbeddedResource Include="Views\GuidedTour\HtmlPages\connectTheNodes.html" />
     <EmbeddedResource Include="Views\GuidedTour\HtmlPages\installedPackage.html" />
@@ -1465,8 +1485,6 @@
     <Resource Include="UI\Images\searchmagnifier.png" />
     <Resource Include="UI\Images\info-grey.png" />
     <Resource Include="UI\Images\remove - default.png" />
-    <Resource Include="UI\Images\close_blue.png" />
-    <Resource Include="UI\Images\close_grey.png" />
     <Resource Include="UI\Images\Folder.png" />
     <Resource Include="UI\Images\caret_down_grey_48px.png" />
     <Resource Include="UI\Images\caret_up_grey_48px.png" />

src/DynamoCoreWpf/UI/Prompts/CrashPrompt.xaml

@@ -4,7 +4,7 @@
         xmlns:ui="clr-namespace:Dynamo.UI"
         xmlns:p="clr-namespace:Dynamo.Wpf.Properties;assembly=DynamoCoreWpf"
         Width="660"
-        SizeToContent="Height"
+        Height="270"
         ResizeMode="NoResize"
         WindowStartupLocation="CenterOwner"
         Style="{DynamicResource DynamoWindowStyle}"
@@ -71,40 +71,39 @@
 
                 <Rectangle Style="{StaticResource DividerRectangleStyle}" Grid.Row="0" />
 
-                <StackPanel Grid.Row="1">
-                    <Grid >
-                        <Grid.ColumnDefinitions>
-                            <ColumnDefinition Width="auto" />
-                            <ColumnDefinition Width="*" />
-                        </Grid.ColumnDefinitions>
-                        <Grid.RowDefinitions>
-                            <RowDefinition Height="auto" />
-                            <RowDefinition Height="auto" />
-                            <RowDefinition Height="auto" />
-                        </Grid.RowDefinitions>
-                        <Image Name="imgIcon"
+                <Grid Grid.Row="1">
+                    <Grid.ColumnDefinitions>
+                        <ColumnDefinition Width="auto" />
+                        <ColumnDefinition Width="*" />
+                    </Grid.ColumnDefinitions>
+                    <Grid.RowDefinitions>
+                        <RowDefinition Height="auto" />
+                        <RowDefinition Height="auto" />
+                        <RowDefinition Height="*" />
+                    </Grid.RowDefinitions>
+                    <Image Name="imgIcon"
                                Width="98" Height="85"
                                Margin="30,20,30,20"
                                VerticalAlignment="Center"
                                HorizontalAlignment="Center"
                                Source="/DynamoCoreWpf;component/UI/Images/task_dialog_crash.png"></Image>
-                        
-                        <StackPanel Grid.Row="0" Grid.Column="1"
+
+                    <StackPanel Grid.Row="0" Grid.Column="1"
                                     Margin="0, 30, 30, 30">
-                            <TextBlock Name="txtOverridingText"
+                        <TextBlock Name="txtOverridingText"
                                        FontSize="13"
                                        Foreground="{StaticResource DarkThemeInputBoxBackgroundBrush}"
                                        HorizontalAlignment="Stretch"
                                        TextWrapping="Wrap"/>
-                        </StackPanel>
+                    </StackPanel>
 
-                        <StackPanel Grid.Row="1"
+                    <StackPanel Grid.Row="1"
                                     Grid.ColumnSpan="2"
                                     Orientation="Horizontal"
                                     HorizontalAlignment="Left"
                                     Margin="10,0,10,10">
 
-                            <Button Name="btnDetails"
+                        <Button Name="btnDetails"
                                     Content="{x:Static p:Resources.CrashPromptDialogDetailButton}"
                                     Margin="-1 0 0 0"
                                     Background="White"
@@ -114,7 +113,7 @@
                                     Visibility="Collapsed"
                                     Click="Details_Click"/>
 
-                            <Button Name="btnCopy"
+                        <Button Name="btnCopy"
                                     Content="{x:Static p:Resources.CrashPromptDialogCopyButton}"
                                     Margin="-1 0 0 0"
                                     Background="White"
@@ -124,14 +123,15 @@
                                     Visibility="Collapsed"
                                     Click="Copy_Click" />
 
-                        </StackPanel>
-                        
-                        <StackPanel Grid.Row="1" Grid.ColumnSpan="2"
+                    </StackPanel>
+
+                    <StackPanel Grid.Row="1" Grid.ColumnSpan="2"
                                     Orientation="Horizontal"
                                     HorizontalAlignment="Right"
+                                    VerticalAlignment="Bottom"
                                     Margin="10,0,10,10">
-                            
-                            <Button Name="btnOpenFolder"
+
+                        <Button Name="btnOpenFolder"
                                     Content="{x:Static p:Resources.CrashPromptDialogOpenFolderButton}"
                                     Background="White"
                                     BorderBrush="#BFBFBF"
@@ -140,42 +140,39 @@
                                     Visibility="Collapsed"
                                     Click="OpenFolder_Click"/>
 
-                            <Button Content="{x:Static p:Resources.CrashPromptDialogSubmitBugButton}"
+                        <Button Content="{x:Static p:Resources.CrashPromptDialogSubmitBugButton}"
                                     Background="White"
                                     BorderBrush="#BFBFBF"
                                     Foreground="#3C3C3C"
                                     Style="{StaticResource CtaButtonStyle}"
                                     Margin="10,0,0,0"
                                     Click="PostOnGithub_Click" />
 
-                            <Button Content="{x:Static p:Resources.ContinueButton}"
+                        <Button Content="{x:Static p:Resources.ContinueButton}"
                                     BorderBrush="#0696D7"
                                     Foreground="White"
                                     Background="#0696D7"
                                     Style="{StaticResource CtaButtonStyle}"
                                     Margin="10,0,0,0"
                                     Click="Continue_Click"
                                     IsDefault="True" />
-
-                        </StackPanel>
 
-                        <TextBox x:FieldModifier="public"
+                    </StackPanel>
+
+                    <TextBox x:FieldModifier="public"
                                  Style="{DynamicResource ResourceKey=SLightTextBox}"
                                  Foreground="{StaticResource DarkThemeInputBoxBackgroundBrush}"
                                  HorizontalAlignment="Stretch"
                                  VerticalAlignment="Stretch"
                                  Name="CrashDetailsContent"
                                  Margin="12,0,12,12"
                                  BorderThickness="0"
-                                 Height="200"
                                  IsReadOnly="True"
                                  HorizontalScrollBarVisibility="Auto"
                                  VerticalScrollBarVisibility="Auto"
                                  Visibility="Collapsed"
                                  Grid.Row="3" Grid.ColumnSpan="2"/>
-                    </Grid>
-                </StackPanel>
-
+                </Grid>
             </Grid>
         </Border>
     </Grid>

src/DynamoCoreWpf/UI/Prompts/CrashPrompt.xaml.cs

@@ -110,6 +110,8 @@ private void PostOnGithub_Click(object sender, RoutedEventArgs e)
 
         private void Details_Click(object sender, RoutedEventArgs e)
         {
+            this.Height = this.ActualHeight + 250;
+            this.ResizeMode = ResizeMode.CanResizeWithGrip;
             this.btnDetails.Visibility = Visibility.Collapsed;
             this.CrashDetailsContent.Visibility = Visibility.Visible;
             this.btnCopy.Visibility = Visibility.Visible;

src/DynamoCoreWpf/UI/Prompts/DynamoMessageBox.xaml

@@ -119,20 +119,8 @@
                 <!--  Buttons  -->
                 <DockPanel Name="ButtonsDockPanel"
                            Grid.Row="2"
-                           Margin="0,0,20,20"
+                           Margin="16,0,20,20"
                            LastChildFill="False">
-
-                    <Button Name="NoButton"
-                            MinWidth="90"
-                            Margin="0"
-                            Click="NoButton_OnClick"
-                            Content="{x:Static p:Resources.GenericTaskDialogOptionNo}"
-                            DockPanel.Dock="Right"
-                            Background="White"
-                            BorderBrush="#BFBFBF"
-                            Foreground="Black"
-                            Style="{StaticResource CtaButtonStyle}"
-                            Visibility="Collapsed" />
 
                     <Button Name="YesButton"
                             MinWidth="90"
@@ -158,14 +146,26 @@
                             Style="{StaticResource CtaButtonStyle}"
                             Visibility="Collapsed" />
 
+                    <Button Name="NoButton"
+                            MinWidth="90"
+                            Margin="0"
+                            Click="NoButton_OnClick"
+                            Content="{x:Static p:Resources.GenericTaskDialogOptionNo}"
+                            DockPanel.Dock="Right"
+                            Background="White"
+                            BorderBrush="#BFBFBF"
+                            Foreground="Black"
+                            Style="{StaticResource CtaButtonStyle}"
+                            Visibility="Collapsed" />
+
                     <Button Name="CancelButton"
                             MinWidth="90"
                             Margin="0"
                             Background="White"
                             BorderBrush="#BFBFBF"
                             Click="CancelButton_OnClick"
                             Content="{x:Static p:Resources.GenericTaskDialogOptionCancel}"
-                            DockPanel.Dock="Right"
+                            DockPanel.Dock="Left"
                             Foreground="Black"
                             Style="{StaticResource CtaButtonStyle}"
                             Visibility="Collapsed" />

src/DynamoCoreWpf/UI/Prompts/EditWindow.xaml

@@ -53,24 +53,24 @@
                             Click="CloseButton_OnClick"
                             DockPanel.Dock="Right"
                             Margin="25 0 0 0"
-                            Style="{StaticResource CloseButtonStyle}" />
+                            Style="{StaticResource CloseButtonDarkStyle}" />
 
                     <Button Name="MaximizeButton"
                             Click="MaximizeButton_OnClick"
                             DockPanel.Dock="Right"
-                            Style="{StaticResource MaximizeButtonStyle}" />
+                            Style="{StaticResource MaximizeButtonDarkStyle}" />
 
                     <Button Name="NormalizeButton"
                             Click="MaximizeButton_OnClick"
                             DockPanel.Dock="Right"
                             Visibility="Collapsed"
-                            Style="{StaticResource NormalizeButtonStyle}" />
+                            Style="{StaticResource RestoreButtonDarkStyle}" />
 
                     <Button Name="MinimizeButton"
                             Margin="0 0 25 0"
                             Click="MinimizeButton_OnClick"
                             DockPanel.Dock="Right"
-                            Style="{StaticResource MinimizeButtonStyle}" />
+                            Style="{StaticResource MinimizeButtonDarkStyle}" />
 
                     <TextBlock Name="TitleTextBlock"
                                VerticalAlignment="Center"