ux: border of popup menu

Signed-off-by: leo <longshuang@msn.cn>

Author: love-linger

src/Resources/Styles.axaml

@@ -761,12 +761,13 @@
 
   <Style Selector="ContextMenu">
     <Setter Property="MaxWidth" Value="1024"/>
-    <Setter Property="HorizontalOffset" Value="-4"/>
-    <Setter Property="VerticalOffset" Value="-4"/>
+    <Setter Property="HorizontalOffset" Value="-6"/>
+    <Setter Property="VerticalOffset" Value="-6"/>
     <Setter Property="Template">
       <ControlTemplate>
-        <Grid Margin="4" Effect="drop-shadow(0 0 4 #A0000000)">
-          <Border BorderThickness="0"
+        <Grid Margin="6" Effect="drop-shadow(0 0 6 #B0000000)">
+          <Border BorderThickness="1"
+                  BorderBrush="{DynamicResource Brush.MenuBorder}"
                   Background="{DynamicResource Brush.Popup}"
                   CornerRadius="{TemplateBinding CornerRadius}"
                   Padding="8,4"
@@ -792,8 +793,8 @@
         <Grid Margin="4" Effect="drop-shadow(0 0 4 #A0000000)">
           <Border Name="LayoutRoot"
                   Background="{DynamicResource Brush.Popup}"
-                  BorderBrush="{TemplateBinding BorderBrush}"
-                  BorderThickness="0"
+                  BorderBrush="{DynamicResource Brush.MenuBorder}"
+                  BorderThickness="1"
                   Padding="4,2"
                   CornerRadius="{TemplateBinding CornerRadius}">
             <ScrollViewer HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
@@ -902,8 +903,12 @@
                  HorizontalOffset="-4"
                  VerticalOffset="-4"
                  IsOpen="{TemplateBinding IsSubMenuOpen, Mode=TwoWay}">
-            <Grid Margin="4" Effect="drop-shadow(0 0 4 #A0000000)">
-              <Border BorderThickness="0" Padding="8,4" MaxHeight="400" Background="{DynamicResource Brush.Popup}" CornerRadius="{DynamicResource OverlayCornerRadius}">
+            <Grid Margin="6" Effect="drop-shadow(0 0 6 #B0000000)">
+              <Border Padding="8,4"
+                      MaxHeight="400"
+                      BorderThickness="1" BorderBrush="{DynamicResource Brush.MenuBorder}"
+                      Background="{DynamicResource Brush.Popup}"
+                      CornerRadius="{DynamicResource OverlayCornerRadius}">
                 <ScrollViewer>
                   <ItemsPresenter Name="PART_ItemsPresenter"
                                   Margin="{DynamicResource MenuFlyoutScrollerMargin}"

src/Resources/Themes.axaml

@@ -32,6 +32,7 @@
       <Color x:Key="Color.InlineCode">#FFE4E4E4</Color>
       <Color x:Key="Color.InlineCodeFG">Black</Color>
       <Color x:Key="Color.HistoryBG">#FFF0F5F9</Color>
+      <Color x:Key="Color.MenuBorder">White</Color>
     </ResourceDictionary>
 
     <ResourceDictionary x:Key="Dark">
@@ -65,6 +66,7 @@
       <Color x:Key="Color.InlineCode">#FF383838</Color>
       <Color x:Key="Color.InlineCodeFG">#FFF0F0F0</Color>
       <Color x:Key="Color.HistoryBG">#FF272727</Color>
+      <Color x:Key="Color.MenuBorder">#FF393939</Color>
     </ResourceDictionary>
   </ResourceDictionary.ThemeDictionaries>
 
@@ -100,6 +102,7 @@
   <SolidColorBrush x:Key="Brush.InlineCode" Color="{DynamicResource Color.InlineCode}"/>
   <SolidColorBrush x:Key="Brush.InlineCodeFG" Color="{DynamicResource Color.InlineCodeFG}"/>
   <SolidColorBrush x:Key="Brush.HistoryBG" Color="{DynamicResource Color.HistoryBG}"/>
+  <SolidColorBrush x:Key="Brush.MenuBorder" Color="{DynamicResource Color.MenuBorder}"/>
 
   <FontFamily x:Key="Fonts.Default">fonts:Inter#Inter</FontFamily>
   <FontFamily x:Key="Fonts.Monospace">fonts:SourceGit#JetBrains Mono NL</FontFamily>