Code Quality: Wrap sync icon in border (#15615)

Author: yaira2

src/Files.App/Views/Layouts/ColumnLayoutPage.xaml

@@ -309,16 +309,19 @@
 								<Grid Grid.Column="2">
 									<StackPanel Orientation="Horizontal" Spacing="4">
 										<!--  Cloud Status  -->
-										<uc:OpacityIcon
+										<Border
 											x:Name="CloudDriveSyncStatusGlyph"
-											Width="16"
-											Height="16"
 											HorizontalAlignment="Center"
 											VerticalAlignment="Center"
 											x:Load="{x:Bind ((cloud:CloudDriveSyncStatusUI)SyncStatusUI).LoadSyncStatus, Mode=OneWay}"
 											x:Phase="2"
-											Style="{x:Bind ((cloud:CloudDriveSyncStatusUI)SyncStatusUI).OpacityIcon, Mode=OneWay}"
-											ToolTipService.ToolTip="{x:Bind SyncStatusUI.SyncStatusString, Mode=OneWay}" />
+											Background="Transparent"
+											ToolTipService.ToolTip="{x:Bind SyncStatusUI.SyncStatusString, Mode=OneWay}">
+											<uc:OpacityIcon
+												Width="16"
+												Height="16"
+												Style="{x:Bind ((cloud:CloudDriveSyncStatusUI)SyncStatusUI).OpacityIcon, Mode=OneWay}" />
+										</Border>
 
 										<!--  Tag  -->
 										<Ellipse

src/Files.App/Views/Layouts/DetailsLayoutPage.xaml

@@ -1255,6 +1255,7 @@
 										HorizontalAlignment="Stretch"
 										VerticalAlignment="Center"
 										AutomationProperties.Name="{x:Bind SyncStatusString, Mode=OneWay}"
+										Background="Transparent"
 										ToolTipService.ToolTip="{x:Bind SyncStatusUI.SyncStatusString, Mode=OneWay}"
 										Visibility="{Binding ColumnsViewModel.StatusColumn.Visibility, ElementName=PageRoot, Mode=OneWay}">
 										<uc:OpacityIcon

src/Files.App/Views/Layouts/GridLayoutPage.xaml

@@ -186,17 +186,20 @@
 							<ColumnDefinition Width="*" />
 						</Grid.ColumnDefinitions>
 
-						<uc:OpacityIcon
+						<Border
 							x:Name="CloudDriveSyncStatusGlyph"
 							Grid.Column="0"
-							Width="16"
-							Height="16"
-							Margin="0,0,4,0"
 							HorizontalAlignment="Left"
 							x:Load="{x:Bind ((cloud:CloudDriveSyncStatusUI)SyncStatusUI).LoadSyncStatus, Mode=OneWay}"
 							x:Phase="2"
-							Style="{x:Bind ((cloud:CloudDriveSyncStatusUI)SyncStatusUI).OpacityIcon, Mode=OneWay}"
-							ToolTipService.ToolTip="{x:Bind SyncStatusUI.SyncStatusString, Mode=OneWay}" />
+							Background="Transparent"
+							ToolTipService.ToolTip="{x:Bind SyncStatusUI.SyncStatusString, Mode=OneWay}">
+							<uc:OpacityIcon
+								Width="16"
+								Height="16"
+								Margin="0,0,4,0"
+								Style="{x:Bind ((cloud:CloudDriveSyncStatusUI)SyncStatusUI).OpacityIcon, Mode=OneWay}" />
+						</Border>
 
 						<Ellipse
 							Grid.Column="1"
@@ -395,17 +398,20 @@
 					</TextBox>
 
 					<!--  Cloud Status  -->
-					<uc:OpacityIcon
+					<Border
 						x:Name="CloudDriveSyncStatusGlyph"
 						Grid.Column="2"
-						Width="16"
-						Height="16"
 						HorizontalAlignment="Center"
 						VerticalAlignment="Center"
 						x:Load="{x:Bind ((cloud:CloudDriveSyncStatusUI)SyncStatusUI).LoadSyncStatus, Mode=OneWay}"
 						x:Phase="2"
-						Style="{x:Bind ((cloud:CloudDriveSyncStatusUI)SyncStatusUI).OpacityIcon, Mode=OneWay}"
-						ToolTipService.ToolTip="{x:Bind SyncStatusUI.SyncStatusString, Mode=OneWay}" />
+						Background="Transparent"
+						ToolTipService.ToolTip="{x:Bind SyncStatusUI.SyncStatusString, Mode=OneWay}">
+						<uc:OpacityIcon
+							Width="16"
+							Height="16"
+							Style="{x:Bind ((cloud:CloudDriveSyncStatusUI)SyncStatusUI).OpacityIcon, Mode=OneWay}" />
+					</Border>
 
 					<!--  Visual Status Managing  -->
 					<VisualStateManager.VisualStateGroups>
@@ -459,14 +465,17 @@
 							ToolTipService.ToolTip="{x:Bind FileTagsUI[0].Name, Mode=OneWay}"
 							Visibility="{x:Bind FileTagsUI, Converter={StaticResource EmptyObjectToObjectConverter}, Mode=OneWay}" />
 
-						<uc:OpacityIcon
+						<Border
 							x:Name="CloudDriveSyncStatusGlyph"
-							Width="16"
-							Height="16"
 							x:Phase="2"
-							Style="{x:Bind ((cloud:CloudDriveSyncStatusUI)SyncStatusUI).OpacityIcon, Mode=OneWay}"
+							Background="Transparent"
 							ToolTipService.ToolTip="{x:Bind SyncStatusUI.SyncStatusString, Mode=OneWay}"
-							Visibility="{Binding InstanceViewModel.IsPageTypeCloudDrive, ElementName=PageRoot, Mode=OneWay, Converter={StaticResource BoolToVisibilityConverter}}" />
+							Visibility="{Binding InstanceViewModel.IsPageTypeCloudDrive, ElementName=PageRoot, Mode=OneWay, Converter={StaticResource BoolToVisibilityConverter}}">
+							<uc:OpacityIcon
+								Width="16"
+								Height="16"
+								Style="{x:Bind ((cloud:CloudDriveSyncStatusUI)SyncStatusUI).OpacityIcon, Mode=OneWay}" />
+						</Border>
 					</StackPanel>
 
 					<CheckBox