Feature: Updated the cloud status icon for Columns Layout (#14520)

Author: yaira2

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

@@ -299,16 +299,16 @@
 
 								<Grid Grid.Column="2">
 									<StackPanel Orientation="Horizontal" Spacing="4">
-
 										<!--  Cloud Status  -->
-										<FontIcon
+										<uc:OpacityIcon
 											x:Name="CloudDriveSyncStatusGlyph"
+											Width="16"
+											Height="16"
 											HorizontalAlignment="Center"
 											VerticalAlignment="Center"
+											x:Load="{x:Bind ((cloud:CloudDriveSyncStatusUI)SyncStatusUI).LoadSyncStatus, Mode=OneWay}"
 											x:Phase="2"
-											FontSize="12"
-											Glyph="{x:Bind ((cloud:CloudDriveSyncStatusUI)SyncStatusUI).Glyph, Mode=OneWay}"
-											Visibility="{x:Bind ((cloud:CloudDriveSyncStatusUI)SyncStatusUI).LoadSyncStatus, Mode=OneWay}" />
+											Style="{x:Bind ((cloud:CloudDriveSyncStatusUI)SyncStatusUI).OpacityIcon, Mode=OneWay}" />
 
 										<!--  Tag  -->
 										<Ellipse

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

@@ -416,16 +416,16 @@
 
 					<Grid Grid.Column="2">
 						<StackPanel Orientation="Horizontal" Spacing="4">
-
 							<!--  Cloud Status  -->
-							<FontIcon
+							<uc:OpacityIcon
 								x:Name="CloudDriveSyncStatusGlyph"
+								Width="16"
+								Height="16"
 								HorizontalAlignment="Center"
 								VerticalAlignment="Center"
+								x:Load="{x:Bind ((cloud:CloudDriveSyncStatusUI)SyncStatusUI).LoadSyncStatus, Mode=OneWay}"
 								x:Phase="2"
-								FontSize="12"
-								Glyph="{x:Bind ((cloud:CloudDriveSyncStatusUI)SyncStatusUI).Glyph, Mode=OneWay}"
-								Visibility="{x:Bind ((cloud:CloudDriveSyncStatusUI)SyncStatusUI).LoadSyncStatus, Mode=OneWay}" />
+								Style="{x:Bind ((cloud:CloudDriveSyncStatusUI)SyncStatusUI).OpacityIcon, Mode=OneWay}" />
 
 							<!--  Tag  -->
 							<Ellipse