Feature: Updated icons in the Tag column in the Details layout (#13060)

Author: yaira2

src/Files.App/Views/LayoutModes/DetailsLayoutBrowser.xaml

@@ -1099,40 +1099,45 @@
 												<DataTemplate x:DataType="filetags:TagViewModel">
 													<UserControl PointerEntered="FileTag_PointerEntered" PointerExited="FileTag_PointerExited">
 														<StackPanel
+															x:Name="TagPill"
 															Height="24"
 															Padding="8,0"
 															HorizontalAlignment="Left"
 															x:Phase="2"
-															BorderBrush="{x:Bind Color, Mode=OneWay, Converter={StaticResource StringToBrushConverter}}"
-															BorderThickness="1"
 															CornerRadius="12"
 															Orientation="Horizontal"
+															Spacing="8"
 															Tapped="TagItem_Tapped"
 															ToolTipService.ToolTip="{x:Bind Name, Mode=OneWay}">
-															<FontIcon
-																x:Name="TagIcon"
-																FontSize="12"
-																Foreground="{x:Bind Color, Mode=OneWay, Converter={StaticResource StringToBrushConverter}}"
-																Glyph="&#xE8EC;"
-																Tapped="TagIcon_Tapped"
-																ToolTipService.ToolTip="{helpers:ResourceString Name=Remove}" />
+															<!--  Tag icon  -->
+															<PathIcon
+																VerticalAlignment="Center"
+																Data="{StaticResource ColorIconFilledTag}"
+																Foreground="{x:Bind Color, Mode=OneWay, Converter={StaticResource StringToBrushConverter}}" />
+															<!--  Tag name  -->
 															<TextBlock
 																MaxWidth="200"
-																Padding="8,0,0,0"
 																VerticalAlignment="Center"
-																FontSize="12"
-																LineHeight="18"
 																Style="{StaticResource ColumnContentTextBlock}"
 																Text="{x:Bind Name, Mode=OneWay}"
 																TextTrimming="CharacterEllipsis" />
-
+															<!--  Remove tag icon  -->
+															<FontIcon
+																x:Name="RemoveTagIcon"
+																VerticalAlignment="Center"
+																FontSize="12"
+																Glyph="&#xE711;"
+																Tapped="RemoveTagIcon_Tapped"
+																ToolTipService.ToolTip="{helpers:ResourceString Name=Remove}"
+																Visibility="Collapsed" />
 															<VisualStateManager.VisualStateGroups>
 																<VisualStateGroup x:Name="CommonStates">
 																	<VisualState x:Name="Normal" />
 
 																	<VisualState x:Name="PointerOver">
 																		<VisualState.Setters>
-																			<Setter Target="TagIcon.Glyph" Value="&#xE711;" />
+																			<Setter Target="TagPill.Background" Value="{ThemeResource CardBackgroundFillColorDefault}" />
+																			<Setter Target="RemoveTagIcon.Visibility" Value="Visible" />
 																		</VisualState.Setters>
 																	</VisualState>
 																</VisualStateGroup>

src/Files.App/Views/LayoutModes/DetailsLayoutBrowser.xaml.cs

@@ -816,7 +816,7 @@ private void FileTag_PointerExited(object sender, PointerRoutedEventArgs e)
 			VisualStateManager.GoToState((UserControl)sender, "Normal", true);
 		}
 
-		private void TagIcon_Tapped(object sender, TappedRoutedEventArgs e)
+		private void RemoveTagIcon_Tapped(object sender, TappedRoutedEventArgs e)
 		{
 			var parent = (sender as FontIcon)?.Parent as StackPanel;
 			var tagName = (parent?.Children[TAG_TEXT_BLOCK] as TextBlock)?.Text;