From cf0439e57e63c20f02e29d6da61957bb8f38a416 Mon Sep 17 00:00:00 2001
From: xxorza <xxorza@gmail.com>
Date: Sat, 18 May 2024 21:24:37 +0300
Subject: [PATCH] Refine UI by updating color scheme and margins

The commit involves comprehensive changes in the appearance of the Scenarium Editor. It includes updates to the color scheme, transitioning from `DarkGray` to `DarkerGray` for backdrops. Moreover, the margins of several elements have been adjusted for a more fluid visual appearance. Finally, modifications are done to improve the crispness of border rendering with the
---
 .../ScenariumEditor.NET/MainWindow.xaml       | 180 +++++++++---------
 .../ScenariumEditor.NET/Node.xaml             |  14 +-
 .../ScenariumEditor.NET/Styles/Basic.xaml     |  20 +-
 .../ScenariumEditor.NET/Styles/Window.xaml    |  21 +-
 .../ScenariumEditor.NET/Styles/Window.xaml.cs |   9 +-
 5 files changed, 125 insertions(+), 119 deletions(-)

diff --git a/ScenariumEditor.NET/ScenariumEditor.NET/MainWindow.xaml b/ScenariumEditor.NET/ScenariumEditor.NET/MainWindow.xaml
index 78b93da..3409376 100644
--- a/ScenariumEditor.NET/ScenariumEditor.NET/MainWindow.xaml
+++ b/ScenariumEditor.NET/ScenariumEditor.NET/MainWindow.xaml
@@ -13,105 +13,97 @@
         Title="MainWindow"
         Height="450"
         Width="800"
-        Background="{StaticResource DarkGray}"
-        
+        Background="{StaticResource DarkerGray}"
+
         Style="{StaticResource DefaultWindow}"
 
         Loaded="MainWindow_OnLoaded">
 
-  
+
+    <Grid>
+        <Grid.RowDefinitions>
+            <RowDefinition Height="Auto" MinHeight="50" />
+            <RowDefinition Height="1" />
+            <RowDefinition Height="*" />
+        </Grid.RowDefinitions>
+
         <Grid>
-            <Grid.RowDefinitions>
-                <RowDefinition
-                    Height="Auto"
-                    MinHeight="50" />
-                <RowDefinition
-                    Height="2" />
-                <RowDefinition
-                    Height="*" />
-            </Grid.RowDefinitions>
-
-            <Border BorderBrush="{x:Null}" BorderThickness="0">
-                <Button
-                    Margin="0"
-                    Content="click"
-                    VerticalAlignment="Top"
-                    HorizontalAlignment="Left"
-                    Click="AddDesignNodeButton_OnClick" />
-            </Border>
-
-            <Border Grid.Row="1" BorderThickness="1"
-                    BorderBrush="{StaticResource Blue}">
-            </Border>
-
-            <Grid Grid.Row="2">
-                <Grid.ColumnDefinitions>
-                    <ColumnDefinition Width="*" />
-                    <ColumnDefinition Width="2" />
-                    <ColumnDefinition Width="Auto" MinWidth="250" />
-                </Grid.ColumnDefinitions>
-
-                <Grid ClipToBounds="True">
-                    <Grid.RowDefinitions>
-                        <RowDefinition Height="*" />
-                        <RowDefinition Height="Auto" MinHeight="50" />
-                    </Grid.RowDefinitions>
-
-                    <ItemsControl
-                        Grid.Row="0"
-                        ItemsSource="{Binding Connections}">
-                        <ItemsControl.ItemTemplate>
-                            <DataTemplate DataType="{x:Type viewModel:Connection}">
-                                <local:Connection
-                                    InputPosition="{Binding Input.CanvasPosition}"
-                                    OutputPosition="{Binding Output.CanvasPosition}"
-                                    BorderBrush="{StaticResource Blue}"
-                                    HoverBrush="{StaticResource HighlightOverlayBrush}"
-                                    Thickness="2"
-                                    Width="500"
-                                    Height="500" />
-                            </DataTemplate>
-                        </ItemsControl.ItemTemplate>
-                        <ItemsControl.ItemsPanel>
-                            <ItemsPanelTemplate>
-                                <Canvas />
-                            </ItemsPanelTemplate>
-                        </ItemsControl.ItemsPanel>
-                    </ItemsControl>
-
-                    <ItemsControl
-                        Grid.Row="0"
-                        ItemsSource="{Binding Nodes}">
-                        <ItemsControl.ItemTemplate>
-                            <DataTemplate DataType="{x:Type viewModel:Node}">
-                                <local:Node
-                                    NodeDataContext="{Binding}" />
-                            </DataTemplate>
-                        </ItemsControl.ItemTemplate>
-                        <ItemsControl.ItemsPanel>
-                            <ItemsPanelTemplate>
-                                <Canvas />
-                            </ItemsPanelTemplate>
-                        </ItemsControl.ItemsPanel>
-                        <ItemsControl.ItemContainerStyle>
-                            <Style TargetType="ContentPresenter">
-                                <Setter
-                                    Property="Canvas.Left"
-                                    Value="{Binding Path=CanvasPosition.X}" />
-                                <Setter
-                                    Property="Canvas.Top"
-                                    Value="{Binding Path=CanvasPosition.Y}" />
-                            </Style>
-                        </ItemsControl.ItemContainerStyle>
-                    </ItemsControl>
-
-                </Grid>
-
-                <Border Grid.Column="1" BorderThickness="1"
-                        BorderBrush="{StaticResource Blue}">
-                </Border>
-
-                <Border Grid.Column="2" ></Border>
+            <Button
+                Margin="0"
+                Content="click"
+                VerticalAlignment="Top"
+                HorizontalAlignment="Left"
+                Click="AddDesignNodeButton_OnClick" />
+        </Grid>
+
+        <Rectangle Grid.Row="1" Fill="{StaticResource Gray}" />
+
+        <Grid Grid.Row="2">
+            <Grid.ColumnDefinitions>
+                <ColumnDefinition Width="*" />
+                <ColumnDefinition Width="1" />
+                <ColumnDefinition Width="Auto" MinWidth="250" />
+            </Grid.ColumnDefinitions>
+
+            <Grid ClipToBounds="True" Background="{StaticResource DarkGray}">
+                <Grid.RowDefinitions>
+                    <RowDefinition Height="*" />
+                    <RowDefinition Height="Auto" MinHeight="50" />
+                </Grid.RowDefinitions>
+
+                <ItemsControl
+                    Grid.Row="0"
+                    ItemsSource="{Binding Connections}">
+                    <ItemsControl.ItemTemplate>
+                        <DataTemplate DataType="{x:Type viewModel:Connection}">
+                            <local:Connection
+                                InputPosition="{Binding Input.CanvasPosition}"
+                                OutputPosition="{Binding Output.CanvasPosition}"
+                                BorderBrush="{StaticResource Blue}"
+                                HoverBrush="{StaticResource HighlightOverlayBrush}"
+                                Thickness="2"
+                                Width="500"
+                                Height="500" />
+                        </DataTemplate>
+                    </ItemsControl.ItemTemplate>
+                    <ItemsControl.ItemsPanel>
+                        <ItemsPanelTemplate>
+                            <Canvas />
+                        </ItemsPanelTemplate>
+                    </ItemsControl.ItemsPanel>
+                </ItemsControl>
+
+                <ItemsControl
+                    Grid.Row="0"
+                    ItemsSource="{Binding Nodes}">
+                    <ItemsControl.ItemTemplate>
+                        <DataTemplate DataType="{x:Type viewModel:Node}">
+                            <local:Node
+                                NodeDataContext="{Binding}" />
+                        </DataTemplate>
+                    </ItemsControl.ItemTemplate>
+                    <ItemsControl.ItemsPanel>
+                        <ItemsPanelTemplate>
+                            <Canvas />
+                        </ItemsPanelTemplate>
+                    </ItemsControl.ItemsPanel>
+                    <ItemsControl.ItemContainerStyle>
+                        <Style TargetType="ContentPresenter">
+                            <Setter
+                                Property="Canvas.Left"
+                                Value="{Binding Path=CanvasPosition.X}" />
+                            <Setter
+                                Property="Canvas.Top"
+                                Value="{Binding Path=CanvasPosition.Y}" />
+                        </Style>
+                    </ItemsControl.ItemContainerStyle>
+                </ItemsControl>
+
             </Grid>
+
+            <Rectangle Grid.Column="1" Fill="{StaticResource Gray}" />
+
+            <Border Grid.Column="2"></Border>
         </Grid>
+    </Grid>
 </Window>
\ No newline at end of file
diff --git a/ScenariumEditor.NET/ScenariumEditor.NET/Node.xaml b/ScenariumEditor.NET/ScenariumEditor.NET/Node.xaml
index e3f069d..025ab3c 100644
--- a/ScenariumEditor.NET/ScenariumEditor.NET/Node.xaml
+++ b/ScenariumEditor.NET/ScenariumEditor.NET/Node.xaml
@@ -44,12 +44,12 @@
     <Border BorderBrush="#444"
             Margin="4" Padding="0"
             BorderThickness="2"
-            Background="{StaticResource DarkGray}"
+            Background="{StaticResource DarkerGray}"
             CornerRadius="2">
 
         <StackPanel Orientation="Vertical" Margin="0">
             <Border Background="#444"
-                    Margin="-1 -1 -1 0"
+                    Margin="0"
                     CornerRadius="1 1 0 0"
                     Padding="0"
                     MouseLeftButtonDown="Title_OnMouseLeftButtonDown"
@@ -63,7 +63,7 @@
                     <Button Style="{StaticResource PinButton}"
                             VerticalAlignment="Top"
                             HorizontalAlignment="Left"
-                            Margin="-5 -5 0 0"
+                            Margin="-6 1 0 0"
                             Background="{StaticResource Red}" />
 
                     <Label Grid.Column="0" Content="{Binding Name}"
@@ -83,7 +83,7 @@
                                     VerticalAlignment="Center" />
 
                             <Path Style="{StaticResource CrossPath}"
-                                  Stroke="{StaticResource DarkGray}"
+                                  Stroke="{StaticResource DarkerGray}"
                                   HorizontalAlignment="Center"
                                   VerticalAlignment="Center" />
                         </Grid>
@@ -108,7 +108,7 @@
 
                             <StackPanel Orientation="Horizontal">
                                 <Button Style="{StaticResource PinButton}"
-                                        Margin="-5 0 0 0"
+                                        Margin="-6 0 0 0"
                                         Background="{StaticResource Yellow}"
                                         DataContext="{Binding}"
                                         Loaded="Input_OnLoaded" />
@@ -134,7 +134,7 @@
                                     <Label Content="{Binding Name}" VerticalAlignment="Center"></Label>
 
                                     <Button Style="{StaticResource PinButton}"
-                                            Margin="0 0 -5 0"
+                                            Margin="0 0 -6 0"
                                             Background="{StaticResource Red}"
                                             Loaded="Output_OnLoaded" />
                                 </StackPanel>
@@ -153,7 +153,7 @@
                                     <Label Content="{Binding Name}" VerticalAlignment="Center"></Label>
 
                                     <Button Style="{StaticResource PinButton}"
-                                            Margin="0 0 -5 0"
+                                            Margin="0 0 -6 0"
                                             Background="{StaticResource Green}"
                                             Loaded="Output_OnLoaded" />
                                 </StackPanel>
diff --git a/ScenariumEditor.NET/ScenariumEditor.NET/Styles/Basic.xaml b/ScenariumEditor.NET/ScenariumEditor.NET/Styles/Basic.xaml
index 6b1b426..1ffb74d 100644
--- a/ScenariumEditor.NET/ScenariumEditor.NET/Styles/Basic.xaml
+++ b/ScenariumEditor.NET/ScenariumEditor.NET/Styles/Basic.xaml
@@ -7,16 +7,28 @@
     <Brush x:Key="Yellow">#E9BB35</Brush>
     <Brush x:Key="Green">#53A957</Brush>
     <Brush x:Key="Blue">#34A0F6</Brush>
-    <Brush x:Key="Red">#F53636</Brush>
+    <Brush x:Key="Red">#ED5353</Brush>
 
     <Brush x:Key="LiteYellow">#FFDD80</Brush>
     <Brush x:Key="LiteGreen">#80FF84</Brush>
     <Brush x:Key="LiteBlue">#80C8FF</Brush>
     <Brush x:Key="LiteRed">#FF8080</Brush>
+    
+    <Brush x:Key="DarkYellow">#996A34</Brush>
+    <Brush x:Key="DarkGreen">#376E37</Brush>
+    <Brush x:Key="DarkBlue">#2A68A9</Brush>
+    <Brush x:Key="DarkRed">#A32A2A</Brush>
+
+    <Brush x:Key="DarkWhite">#BCBCBC</Brush>
+    <Brush x:Key="Gray">#333333</Brush>
+
+    <Brush x:Key="DarkerGray">#222</Brush>
+    <Brush x:Key="DarkGray">#131313</Brush>
+    
+    <Style TargetType="Border" >
+        <Setter Property="SnapsToDevicePixels" Value="True" />
+    </Style>
 
-    <Brush x:Key="DarkWhite">#BBBCC1</Brush>
-
-    <Brush x:Key="DarkGray">#222</Brush>
 
     <Style TargetType="Label">
         <Setter Property="Margin" Value="2"></Setter>
diff --git a/ScenariumEditor.NET/ScenariumEditor.NET/Styles/Window.xaml b/ScenariumEditor.NET/ScenariumEditor.NET/Styles/Window.xaml
index e6bfdff..9dbd1d9 100644
--- a/ScenariumEditor.NET/ScenariumEditor.NET/Styles/Window.xaml
+++ b/ScenariumEditor.NET/ScenariumEditor.NET/Styles/Window.xaml
@@ -53,8 +53,9 @@
         <Setter Property="MinWidth" Value="68" />
         <Setter Property="MinHeight" Value="28" />
         <Setter Property="AllowsTransparency" Value="True" />
+        <Setter Property="SnapsToDevicePixels" Value="True" />
         <Setter Property="WindowStyle" Value="None" />
-        <Setter Property="Background" Value="{StaticResource DarkGray}" />
+        <Setter Property="Background" Value="{StaticResource DarkerGray}" />
         <Setter Property="BorderBrush" Value="{x:Null}" />
         <Setter Property="BorderThickness" Value="0" />
         <EventSetter Event="Loaded" Handler="Window_Loaded" />
@@ -66,7 +67,7 @@
                     <Grid>
                         <Border BorderThickness="2"
                                 CornerRadius="5"
-                                BorderBrush="{StaticResource Blue}"
+                                BorderBrush="{StaticResource DarkBlue}"
                                 Background="{TemplateBinding Background}"
                                 Padding="0" />
 
@@ -75,9 +76,9 @@
                             <!-- header & content -->
                             <controls:ClippingBorder ClipToBounds="True"
                                                      Background="{x:Null}"
-                                                     CornerRadius="4"
+                                                     CornerRadius="3"
                                                      BorderThickness="0" 
-                                                     Margin="1.75">
+                                                     Margin="2">
                                 <Grid>
                                     <!-- dragging header -->
                                     <Button Style="{StaticResource EmptyButton}"
@@ -149,10 +150,10 @@
 
                             <!-- min max close buttons -->
                             <Border Padding="5"
-                                    Background="{StaticResource Blue}"
+                                    Background="{StaticResource DarkBlue}"
                                     VerticalAlignment="Top" HorizontalAlignment="Right"
-                                    CornerRadius="0 4 0 4"
-                                    Margin="1.75">
+                                    CornerRadius="0 3 0 3"
+                                    Margin="2">
                                 <StackPanel Orientation="Horizontal"
                                             VerticalAlignment="Center"
                                             HorizontalAlignment="Center">
@@ -165,7 +166,7 @@
                                               Margin="0 2 0 0"
                                               Style="{StaticResource CrossPath}"
                                               Data="M 0,0 L 1,0"
-                                              Stroke="{StaticResource DarkGray}" />
+                                              Stroke="{StaticResource DarkerGray}" />
                                     </Button>
                                     <Button Style="{StaticResource RoundButton}"
                                             Background="{StaticResource Yellow}"
@@ -176,7 +177,7 @@
                                             Height="8"
                                             Style="{StaticResource CrossPath}"
                                             Data="M 0,0 L 0,1 L 1,1 L 1,0 Z"
-                                            Stroke="{StaticResource DarkGray}" />
+                                            Stroke="{StaticResource DarkerGray}" />
                                     </Button>
                                     <Button Style="{StaticResource RoundButton}"
                                             Background="{StaticResource Red}"
@@ -185,7 +186,7 @@
                                         <Path Width="8"
                                               Height="8"
                                               Style="{StaticResource CrossPath}"
-                                              Stroke="{StaticResource DarkGray}" />
+                                              Stroke="{StaticResource DarkerGray}" />
                                     </Button>
                                 </StackPanel>
                             </Border>
diff --git a/ScenariumEditor.NET/ScenariumEditor.NET/Styles/Window.xaml.cs b/ScenariumEditor.NET/ScenariumEditor.NET/Styles/Window.xaml.cs
index f1e7be7..e18b390 100644
--- a/ScenariumEditor.NET/ScenariumEditor.NET/Styles/Window.xaml.cs
+++ b/ScenariumEditor.NET/ScenariumEditor.NET/Styles/Window.xaml.cs
@@ -36,6 +36,7 @@ private void btnMax_Click(object sender, RoutedEventArgs e) {
             };
             wnd.WindowState = WindowState.Maximized;
         }
+
         e.Handled = true;
     }
 
@@ -70,7 +71,7 @@ private void borderRect_MouseMove(object sender, MouseEventArgs e) {
             double width = e.GetPosition(mainWindow).X;
             double height = e.GetPosition(mainWindow).Y;
             senderRect.CaptureMouse();
-            
+
             if (senderRect.Name.ToLower().Contains("right")) {
                 if (width > 0)
                     mainWindow.Width = width;
@@ -103,12 +104,12 @@ private void borderRect_MouseMove(object sender, MouseEventArgs e) {
     #endregion
 
     #region dragging
-    
+
     private void Header_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) {
         var header = (FrameworkElement)sender;
         var wnd = Window.GetWindow(header)!;
-         wnd.DragMove();
-         e.Handled = true;
+        wnd.DragMove();
+        e.Handled = true;
     }
 
     #endregion