updated InAppNotification style and template

Author: ismaelestalayo

Microsoft.Toolkit.Uwp.UI.Controls.Core/InAppNotification/InAppNotification.xaml

@@ -9,15 +9,15 @@
 
     <Style x:Key="BaseInAppNotificationsStyle"
            TargetType="local:InAppNotification">
-        <Setter Property="Background" Value="{ThemeResource SystemControlChromeMediumLowAcrylicElementMediumBrush}" />
+        <Setter Property="Background" Value="{ThemeResource SystemControlBackgroundChromeMediumLowBrush}" />
         <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}" />
-        <Setter Property="BorderBrush" Value="{ThemeResource SystemControlForegroundBaseLowBrush}" />
+        <Setter Property="BorderBrush" Value="{ThemeResource SystemControlTransparentBrush}" />
         <Setter Property="Visibility" Value="Collapsed" />
-        <Setter Property="BorderThickness" Value="2" />
+        <Setter Property="BorderThickness" Value="0" />
         <Setter Property="HorizontalAlignment" Value="Stretch" />
         <Setter Property="VerticalAlignment" Value="Bottom" />
         <Setter Property="MinHeight" Value="55" />
-        <Setter Property="FontSize" Value="16" />
+        <Setter Property="FontSize" Value="14" />
         <Setter Property="RenderTransformOrigin" Value="0.5,1" />
         <Setter Property="Margin" Value="24,12" />
         <Setter Property="Padding" Value="24,12" />

Microsoft.Toolkit.Uwp.UI.Controls.Core/InAppNotification/Styles/MSEdgeNotificationStyle.xaml

@@ -31,10 +31,10 @@
         </ResourceDictionary>
     </ResourceDictionary.ThemeDictionaries>
 
-    <x:Double x:Key="SystemControlMSEdgeNotificationDismissButtonSize">40</x:Double>
     <Thickness x:Key="SystemControlMSEdgeNotificationDismissButtonMargin">24,0,0,0</Thickness>
+    <x:Double x:Key="SystemControlMSEdgeNotificationDismissButtonSize">32</x:Double>
     <x:Double x:Key="SystemControlMSEdgeNotificationDismissButtonTranslate">18</x:Double>
-    <VerticalAlignment x:Key="SystemControlMSEdgeNotificationDismissButtonVerticalAlignment">Center</VerticalAlignment>
+    <VerticalAlignment x:Key="SystemControlMSEdgeNotificationDismissButtonVerticalAlignment">Top</VerticalAlignment>
     <Thickness x:Key="SystemControlMSEdgeNotificationButtonBorderThickness">2</Thickness>
 
     <Style x:Key="DismissTextBlockButtonStyle"
@@ -48,9 +48,10 @@
         <Setter Property="Template">
             <Setter.Value>
                 <ControlTemplate TargetType="ButtonBase">
-                    <Grid x:Name="RootGrid"
-                          Margin="{TemplateBinding Padding}"
-                          Background="{TemplateBinding Background}">
+                    <Grid x:Name="RootGrid" CornerRadius="2" Background="{ThemeResource ButtonPointerOverBackgroundThemeBrush}"
+                          Margin="{TemplateBinding Margin}"
+                          Height="{StaticResource SystemControlMSEdgeNotificationDismissButtonSize}"
+                          Width="{StaticResource SystemControlMSEdgeNotificationDismissButtonSize}">
                         <Border x:Name="TextBorder"
                                 BorderThickness="{StaticResource SystemControlMSEdgeNotificationButtonBorderThickness}"
                                 BorderBrush="{ThemeResource SystemControlMSEdgeNotificationButtonBorderBrush}">
@@ -65,15 +66,10 @@
                                 <VisualState x:Name="Normal" />
                                 <VisualState x:Name="PointerOver">
                                     <Storyboard>
-                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Text"
-                                                                       Storyboard.TargetProperty="Foreground">
-                                            <DiscreteObjectKeyFrame KeyTime="0"
-                                                                    Value="{ThemeResource SystemControlMSEdgeNotificationPointerOverForegroundBrush}" />
-                                        </ObjectAnimationUsingKeyFrames>
                                         <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid"
                                                                        Storyboard.TargetProperty="Background">
                                             <DiscreteObjectKeyFrame KeyTime="0"
-                                                                    Value="{ThemeResource SystemControlMSEdgeNotificationPointerOverChromeBrush}" />
+                                                                    Value="{ThemeResource ButtonPointerOverBackgroundThemeBrush}" />
                                         </ObjectAnimationUsingKeyFrames>
                                     </Storyboard>
                                 </VisualState>
@@ -145,20 +141,21 @@
                                   VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                   HorizontalContentAlignment="Stretch"
                                   VerticalContentAlignment="Center"
+                                  FontWeight="SemiBold"
                                   ContentTransitions="{TemplateBinding ContentTransitions}"
-                                  TextWrapping="WrapWholeWords" />
+                                  TextWrapping="Wrap" />
 
                 <Button x:Name="PART_DismissButton"
                         Grid.Column="1"
-                        Margin="{StaticResource SystemControlMSEdgeNotificationDismissButtonMargin}"
+                        Margin="0" Width="auto"
                         AutomationProperties.Name="Dismiss"
                         Content="&#xE894;"
                         FontFamily="Segoe MDL2 Assets"
-                        FontSize="16"
+                        FontSize="12"
                         VerticalAlignment="{StaticResource SystemControlMSEdgeNotificationDismissButtonVerticalAlignment}"
                         Style="{StaticResource DismissTextBlockButtonStyle}">
                     <Button.RenderTransform>
-                        <TranslateTransform x:Name="DismissButtonTransform" X="18" />
+                        <TranslateTransform x:Name="DismissButtonTransform" X="18" Y="-8"/>
                     </Button.RenderTransform>
                 </Button>
             </Grid>