From fc4f2ffceafdcaf6e77eac106f433e8e24fb3639 Mon Sep 17 00:00:00 2001
From: Niels Laute <niels9001@hotmail.com>
Date: Wed, 4 Aug 2021 18:43:11 +0200
Subject: [PATCH] Fixes

---
 .../Microsoft.PowerToys.Settings.UI/App.xaml  |  20 +-
 .../Controls/Setting/Setting.xaml             |   4 +-
 .../Strings/en-us/Resources.resw              |  37 +--
 .../Views/AwakePage.xaml                      |  59 ++--
 .../Views/GeneralPage.xaml                    |  12 +-
 .../Views/ImageResizerPage.xaml               | 281 +++++++++---------
 .../Views/PowerPreviewPage.xaml               |   4 -
 .../Views/ShortcutGuidePage.xaml              |  15 +-
 8 files changed, 222 insertions(+), 210 deletions(-)

diff --git a/src/settings-ui/Microsoft.PowerToys.Settings.UI/App.xaml b/src/settings-ui/Microsoft.PowerToys.Settings.UI/App.xaml
index 47326a517a..97e9d0d4b1 100644
--- a/src/settings-ui/Microsoft.PowerToys.Settings.UI/App.xaml
+++ b/src/settings-ui/Microsoft.PowerToys.Settings.UI/App.xaml
@@ -19,7 +19,25 @@
                 <ResourceDictionary Source="/Themes/SettingsExpanderStyles.xaml"/>
                 <ResourceDictionary Source="/Themes/SettingsSectionStyles.xaml"/>
             </ResourceDictionary.MergedDictionaries>
-            
+        
+            <Thickness x:Key="InfoBarIconMargin">6,16,20,16</Thickness>
+
+            <Thickness x:Key="InfoBarContentRootPadding">16,0,0,0</Thickness>
+
+
+
+            <Style TargetType="ListViewItem" >
+                <Setter Property="Margin" Value="0,0,0,2" />
+                <Setter Property="Padding" Value="2,0,0,0" />
+                <Setter Property="HorizontalContentAlignment" Value="Stretch" />
+            </Style>
+
+            <x:Double x:Key="SecondaryTextFontSize">12</x:Double>
+            <Style x:Key="SecondaryTextStyle" TargetType="TextBlock">
+                <Setter Property="FontSize" Value="{StaticResource SecondaryTextFontSize}"/>
+                <Setter Property="Foreground" Value="{ThemeResource TextFillColorSecondaryBrush}"/>
+            </Style>
+
             <converters:ModuleEnabledToOpacityConverter x:Key="ModuleEnabledToOpacityConverter"/>
 
             <ResourceDictionary.ThemeDictionaries>
diff --git a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Controls/Setting/Setting.xaml b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Controls/Setting/Setting.xaml
index 9d3f5afab7..c921b87bd4 100644
--- a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Controls/Setting/Setting.xaml
+++ b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Controls/Setting/Setting.xaml
@@ -4,7 +4,7 @@
     xmlns:controls="using:Microsoft.PowerToys.Settings.UI.Controls">
 
     <Style TargetType="controls:Setting">
-        <Setter Property="CornerRadius" Value="4"/>
+        <Setter Property="CornerRadius" Value="{ThemeResource ControlCornerRadius}"/>
         <Setter Property="Background" Value="{ThemeResource CardBackgroundBrush}" />
         <Setter Property="BorderThickness" Value="{ThemeResource CardBorderThickness}" />
         <Setter Property="BorderBrush" Value="{ThemeResource CardStrokeColorDefaultBrush}" />
@@ -68,7 +68,7 @@
                             <ContentPresenter
                                 x:Name="DescriptionPresenter"
                                 Content="{TemplateBinding Description}"
-                                FontSize="12"
+                                FontSize="{StaticResource SecondaryTextFontSize}"
                                 Foreground="{ThemeResource TextFillColorSecondaryBrush}">
                                 <ContentPresenter.Resources>
                                     <Style TargetType="TextBlock"  BasedOn="{StaticResource CaptionTextBlockStyle}">
diff --git a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Strings/en-us/Resources.resw b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Strings/en-us/Resources.resw
index baec13be3d..a421e3ac6e 100644
--- a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Strings/en-us/Resources.resw
+++ b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Strings/en-us/Resources.resw
@@ -594,7 +594,7 @@ Disabling this module or closing PowerToys will unmute the microphone and camera
     <value>Example: outlook.exe</value>
     <comment>Don't translate outlook.exe</comment>
   </data>
-  <data name="ImageResizer_CustomSizes.Text" xml:space="preserve">
+  <data name="ImageResizer_CustomSizes.Header" xml:space="preserve">
     <value>Image sizes</value>
   </data>
   <data name="About_ImageResizer.ModuleDescription" xml:space="preserve">
@@ -629,15 +629,11 @@ Disabling this module or closing PowerToys will unmute the microphone and camera
     <value>Remove</value>
     <comment>Removes a user defined setting group for Image Resizer</comment>
   </data>
-  <data name="RemoveTooltip.Text" xml:space="preserve">
-    <value>Remove</value>
-    <comment>Removes a user defined setting group for Image Resizer</comment>
-  </data>
   <data name="ImageResizer_Image.AutomationProperties.Name" xml:space="preserve">
     <value>Image Resizer</value>
   </data>
-  <data name="ImageResizer_AddSizeButton.Label" xml:space="preserve">
-    <value>Add size</value>
+  <data name="ImageResizer_AddSizeButton.Content" xml:space="preserve">
+    <value>Add a size</value>
   </data>
   <data name="ImageResizer_SaveSizeButton.Label" xml:space="preserve">
     <value>Save sizes</value>
@@ -651,7 +647,7 @@ Disabling this module or closing PowerToys will unmute the microphone and camera
   <data name="ImageResizer_TIFFCompression.Header" xml:space="preserve">
     <value>TIFF compression</value>
   </data>
-  <data name="File.Text" xml:space="preserve">
+  <data name="File.Header" xml:space="preserve">
     <value>File</value>
     <comment>as in a computer file</comment>
   </data>
@@ -799,8 +795,8 @@ Disabling this module or closing PowerToys will unmute the microphone and camera
   <data name="General_Repository.Label" xml:space="preserve">
     <value>GitHub repository</value>
   </data>
-  <data name="General_Updates.Header" xml:space="preserve">
-    <value>Updates</value>
+  <data name="General_Version.Header" xml:space="preserve">
+    <value>Version</value>
   </data>
   <data name="General_VersionLastChecked.Text" xml:space="preserve">
     <value>Last checked: </value>
@@ -827,13 +823,13 @@ Disabling this module or closing PowerToys will unmute the microphone and camera
   <data name="ImageResizer_FileFormatDescription.Text" xml:space="preserve">
     <value>The following parameters can be used:</value>
   </data>
-  <data name="ImageResizer_FilenameFormatHeader.Text" xml:space="preserve">
+  <data name="ImageResizer_FilenameFormatHeader.Header" xml:space="preserve">
     <value>Filename format</value>
   </data>
   <data name="ImageResizer_UseOriginalDate.Content" xml:space="preserve">
     <value>Use original date modified</value>
   </data>
-  <data name="Encoding.Text" xml:space="preserve">
+  <data name="Encoding.Header" xml:space="preserve">
     <value>Encoding</value>
   </data>
   <data name="KeyboardManager_RemapKeyboardSubtitle.Text" xml:space="preserve">
@@ -884,13 +880,13 @@ Made with 💗 by Microsoft and the PowerToys community.</value>
   <data name="FileExplorerPreview_PreviewPane_GroupSettings.Header" xml:space="preserve">
     <value>Preview Pane</value>
   </data>
-  <data name="FileExplorerPreview_RunAsAdminRequired.Message" xml:space="preserve">
+  <data name="FileExplorerPreview_RunAsAdminRequired.Title" xml:space="preserve">
     <value>You need to run as administrator to modify these settings.</value>
   </data>
-  <data name="FileExplorerPreview_AffectsAllUsers.Message" xml:space="preserve">
+  <data name="FileExplorerPreview_AffectsAllUsers.Title" xml:space="preserve">
     <value>The settings on this page affect all users on the system</value>
   </data>
-  <data name="FileExplorerPreview_RebootRequired.Message" xml:space="preserve">
+  <data name="FileExplorerPreview_RebootRequired.Title" xml:space="preserve">
     <value>A reboot may be required for changes to these settings to take effect</value>
   </data>
   <data name="FancyZones_ExcludeApps_TextBoxControl.PlaceholderText" xml:space="preserve">
@@ -1325,25 +1321,25 @@ From there, simply click on a Markdown file or SVG icon in the File Explorer and
     <value>Read more</value>
   </data>
   <data name="General_NewVersionAvailable.Title" xml:space="preserve">
-    <value>A new version is available</value>
+    <value>An update is available</value>
   </data>
   <data name="General_Downloading.Text" xml:space="preserve">
     <value>Downloading...</value>
   </data>
   <data name="General_TryAgainToDownloadAndInstall.Content" xml:space="preserve">
-    <value>Try again to download and install</value>
+    <value>Try again to download &amp; install</value>
   </data>
   <data name="General_CheckingForUpdates.Text" xml:space="preserve">
     <value>Checking for updates...</value>
   </data>
   <data name="General_NewVersionReadyToInstall.Title" xml:space="preserve">
-    <value>A new version is ready to install</value>
+    <value>An update is ready to install</value>
   </data>
   <data name="General_UpToDate.Title" xml:space="preserve">
     <value>PowerToys is up to date</value>
   </data>
   <data name="General_DownloadAndInstall.Content" xml:space="preserve">
-    <value>Download and install</value>
+    <value>Download &amp; install</value>
   </data>
   <data name="ImageResizer_Fit_Fill_ThirdPersonSingular" xml:space="preserve">
     <value>Fills</value>
@@ -1366,9 +1362,6 @@ From there, simply click on a Markdown file or SVG icon in the File Explorer and
   <data name="ImageResizer_Unit_Pixel" xml:space="preserve">
     <value>Pixels</value>
   </data>
-  <data name="EditTooltip.Text" xml:space="preserve">
-    <value>Edit</value>
-  </data>
   <data name="EditButton.AutomationProperties.Name" xml:space="preserve">
     <value>Edit</value>
   </data>
diff --git a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/AwakePage.xaml b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/AwakePage.xaml
index faa58ee208..3c72cfef2b 100644
--- a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/AwakePage.xaml
+++ b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/AwakePage.xaml
@@ -33,34 +33,32 @@
 
 
 
-                <toolkitcontrols:HeaderedItemsControl x:Uid="Awake_Behavior_GroupSettings">
+                <toolkitcontrols:HeaderedItemsControl x:Uid="Awake_Behavior_GroupSettings"  IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}">
                     <controls:Setting x:Uid="Awake_EnableDisplayKeepAwake" Icon="&#xE7FB;">
                         <controls:Setting.ActionContent>
                             <ToggleSwitch FlowDirection="RightToLeft" IsOn="{x:Bind ViewModel.KeepDisplayOn, Mode=TwoWay}" />
                         </controls:Setting.ActionContent>
                     </controls:Setting>
-                    
+
                     <muxc:Expander IsExpanded="True" Style="{StaticResource SettingsExpanderStyle}">
                         <muxc:Expander.Header>
                             <controls:Setting x:Uid="Awake_Mode" Icon="&#xEC4E;" Style="{StaticResource ExpanderHeaderSettingStyle}" />
                         </muxc:Expander.Header>
                         <muxc:Expander.Content>
-                            <StackPanel Padding="16" Spacing="12">
+                            <StackPanel Padding="56,16,16,24" Spacing="12">
                                 <RadioButton x:Uid="Awake_NoKeepAwake"
-                             IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"
-                             IsChecked="{x:Bind Path=ViewModel.Mode, Mode=TwoWay, Converter={StaticResource AwakeModeToBoolConverter}, ConverterParameter=0}">
+                                    IsChecked="{x:Bind Path=ViewModel.Mode, Mode=TwoWay, Converter={StaticResource AwakeModeToBoolConverter}, ConverterParameter=0}">
                                     <RadioButton.Content>
                                         <TextBlock TextWrapping="WrapWholeWords" LineHeight="20">
-                        <Run x:Uid="Awake_NoKeepAwakeContent"/>
-                        <LineBreak/>
-                        <Run Foreground="{ThemeResource TextFillColorSecondaryBrush}"
-                             x:Uid="Awake_NoKeepAwakeDescription"/>
+                                            <Run x:Uid="Awake_NoKeepAwakeContent"/>
+                                            <LineBreak/>
+                                            <Run Foreground="{ThemeResource TextFillColorSecondaryBrush}"
+                                                x:Uid="Awake_NoKeepAwakeDescription"/>
                                         </TextBlock>
                                     </RadioButton.Content>
                                 </RadioButton>
                                 <RadioButton x:Uid="Awake_IndefiniteKeepAwake"
-                             IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"
-                             IsChecked="{x:Bind Path=ViewModel.Mode, Mode=TwoWay, Converter={StaticResource AwakeModeToBoolConverter}, ConverterParameter=1}">
+                                                IsChecked="{x:Bind Path=ViewModel.Mode, Mode=TwoWay, Converter={StaticResource AwakeModeToBoolConverter}, ConverterParameter=1}">
                                     <RadioButton.Content>
                                         <TextBlock TextWrapping="WrapWholeWords" LineHeight="20">
                         <Run x:Uid="Awake_IndefiniteKeepAwakeContent"/>
@@ -71,8 +69,7 @@
                                     </RadioButton.Content>
                                 </RadioButton>
                                 <RadioButton x:Uid="Awake_TemporaryKeepAwake"
-                             IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"
-                             IsChecked="{x:Bind Path=ViewModel.Mode, Mode=TwoWay, Converter={StaticResource AwakeModeToBoolConverter}, ConverterParameter=2}">
+                                            IsChecked="{x:Bind Path=ViewModel.Mode, Mode=TwoWay, Converter={StaticResource AwakeModeToBoolConverter}, ConverterParameter=2}">
                                     <RadioButton.Content>
                                         <TextBlock TextWrapping="WrapWholeWords" LineHeight="20">
                         <Run x:Uid="Awake_TemporaryKeepAwakeContent"/>
@@ -87,34 +84,28 @@
 
                                     <StackPanel Margin="28,8,0,0" Orientation="Horizontal">
                                         <muxc:NumberBox x:Uid="Awake_TemporaryKeepAwake_Hours"
-                            Value="{x:Bind ViewModel.Hours, Mode=TwoWay}"
-                            Minimum="0"
-                            SpinButtonPlacementMode="Compact"
-                            HorizontalAlignment="Left"
-                            MinWidth="90"
-                            IsEnabled="{x:Bind ViewModel.IsTimeConfigurationEnabled, Mode=OneWay}"
-                            SmallChange="1" 
-                            LargeChange="5"/>
+                                            Value="{x:Bind ViewModel.Hours, Mode=TwoWay}"
+                                            Minimum="0"
+                                            SpinButtonPlacementMode="Compact"
+                                            HorizontalAlignment="Left"
+                                            MinWidth="90"
+                                            SmallChange="1" 
+                                            LargeChange="5"/>
                                         <muxc:NumberBox x:Uid="Awake_TemporaryKeepAwake_Minutes"
-                            Value="{x:Bind ViewModel.Minutes, Mode=TwoWay}"
-                            Minimum="0"
-                            SpinButtonPlacementMode="Compact"
-                            Margin="8,0,0,0"
-                            HorizontalAlignment="Left"
-                            IsEnabled="{x:Bind ViewModel.IsTimeConfigurationEnabled, Mode=OneWay}"
-                            MinWidth="90"
-                            SmallChange="1" 
-                            LargeChange="5"/>
+                                            Value="{x:Bind ViewModel.Minutes, Mode=TwoWay}"
+                                            Minimum="0"
+                                            SpinButtonPlacementMode="Compact"
+                                            Margin="8,0,0,0"
+                                            HorizontalAlignment="Left"
+                                            MinWidth="90"
+                                            SmallChange="1" 
+                                            LargeChange="5"/>
                                     </StackPanel>
                                 </StackPanel>
                             </StackPanel>
                         </muxc:Expander.Content>
                     </muxc:Expander>
                 </toolkitcontrols:HeaderedItemsControl>
-
-              
-
-               
             </StackPanel>
         </controls:SettingsPageControl.ModuleContent>
 
diff --git a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/GeneralPage.xaml b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/GeneralPage.xaml
index 8077b46377..d6538f14aa 100644
--- a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/GeneralPage.xaml
+++ b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/GeneralPage.xaml
@@ -18,6 +18,8 @@
         <localConverters:UpdatingStateCannotDownloadToVisibilityConverter x:Key="UpdatingStateCannotDownloadToVisibilityConverter" />
         <localConverters:UpdatingStateReadyToDownloadToVisibilityConverter x:Key="UpdatingStateReadyToDownloadToVisibilityConverter" />
         <localConverters:UpdatingStateReadyToInstallToVisibilityConverter x:Key="UpdatingStateReadyToInstallToVisibilityConverter" />
+
+
     </Page.Resources>
 
     <controls:SettingsPageControl x:Uid="General"
@@ -26,10 +28,10 @@
         <controls:SettingsPageControl.ModuleContent>
             <StackPanel Orientation="Vertical">
 
-                <toolkitcontrols:HeaderedItemsControl x:Uid="General_Updates">
+                <toolkitcontrols:HeaderedItemsControl x:Uid="General_Version">
                     <controls:Setting Header="{Binding PowerToysVersion}" Icon="&#xE117;">
                         <controls:Setting.Description>
-                            <TextBlock>
+                            <TextBlock Style="{StaticResource SecondaryTextStyle}">
                             <Run x:Uid="General_VersionLastChecked" />
                             <Run Text="{Binding UpdateCheckedDate, Mode=OneWay}"/>
                             </TextBlock>
@@ -63,7 +65,7 @@
                     <muxc:InfoBar x:Uid="General_NewVersionAvailable"
                               IsOpen="True"
                               IsClosable="False"
-                              Severity="Informational"
+                              Severity="Success"
                               Visibility="{Binding PowerToysUpdatingState, Converter={StaticResource UpdatingStateReadyToDownloadToVisibilityConverter}}">
                         <muxc:InfoBar.Content>
                             <StackPanel Spacing="16">
@@ -90,6 +92,7 @@
                         </muxc:InfoBar.Content>
                         <muxc:InfoBar.ActionButton>
                             <Button x:Uid="General_DownloadAndInstall"
+                                    HorizontalAlignment="Right"
                                 Command="{Binding UpdateNowButtonEventHandler}"
                                 IsEnabled="{Binding IsDownloadAllowed}"/>
                         </muxc:InfoBar.ActionButton>
@@ -118,6 +121,7 @@
                         </muxc:InfoBar.Content>
                         <muxc:InfoBar.ActionButton>
                             <Button x:Uid="General_InstallNow"
+                                    HorizontalAlignment="Right"
                                     Command="{Binding UpdateNowButtonEventHandler}"
                                     IsEnabled="{Binding IsDownloadAllowed}"/>
                         </muxc:InfoBar.ActionButton>
@@ -156,6 +160,7 @@
                         </muxc:InfoBar.Content>
                         <muxc:InfoBar.ActionButton>
                             <Button x:Uid="General_TryAgainToDownloadAndInstall"
+                                    HorizontalAlignment="Right"
                                     Command="{Binding UpdateNowButtonEventHandler}"
                                     IsEnabled="{Binding IsDownloadAllowed}"/>
                         </muxc:InfoBar.ActionButton>
@@ -202,7 +207,6 @@
                                           IsClosable="False"
                                           IsOpen="True"
                                           Visibility="{Binding Mode=TwoWay, Path=IsElevated, Converter={StaticResource BoolToVisibilityConverter}}"/>
-
                             </StackPanel>
                         </muxc:Expander.Content>
                     </muxc:Expander>
diff --git a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ImageResizerPage.xaml b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ImageResizerPage.xaml
index 98b2841d67..ea1e388879 100644
--- a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ImageResizerPage.xaml
+++ b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ImageResizerPage.xaml
@@ -8,6 +8,7 @@
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
     xmlns:converters="using:Microsoft.PowerToys.Settings.UI.Converters"
+    xmlns:toolkitcontrols="using:Microsoft.Toolkit.Uwp.UI.Controls"
     xmlns:toolkitconverters="using:Microsoft.Toolkit.Uwp.UI.Converters"
     mc:Ignorable="d"
     AutomationProperties.LandmarkType="Main" x:Name="RootPage">
@@ -23,44 +24,63 @@
         <controls:SettingsPageControl.ModuleContent>
             <StackPanel>
 
-                <ToggleSwitch x:Uid="ImageResizer_EnableToggle"
-                          IsOn="{x:Bind Mode=TwoWay, Path=ViewModel.IsEnabled}"/>
+                <controls:Setting x:Uid="ImageResizer_EnableToggle">
+                    <controls:Setting.Icon>
+                        <BitmapIcon UriSource="ms-appx:///Assets/FluentIcons/FluentIconsImageResizer.png" ShowAsMonochrome="False" />
+                    </controls:Setting.Icon>
+                    <controls:Setting.ActionContent>
+                        <ToggleSwitch IsOn="{x:Bind ViewModel.IsEnabled, Mode=TwoWay}" FlowDirection="RightToLeft" />
+                    </controls:Setting.ActionContent>
+                </controls:Setting>
 
-                <TextBlock x:Uid="ImageResizer_CustomSizes"
-                       Style="{StaticResource SettingsGroupTitleStyle}"
-                       Opacity="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled, Converter={StaticResource ModuleEnabledToOpacityConverter}}"/>
+
+                <toolkitcontrols:HeaderedItemsControl x:Uid="ImageResizer_CustomSizes">
+                    <controls:Setting x:Uid="ImageResizer_CustomSizes" Icon="&#xE2B2;">
+                        <controls:Setting.ActionContent>
+                            <Button x:Uid="ImageResizer_AddSizeButton" Click="AddSizeButton_Click" Style="{ThemeResource AccentButtonStyle}" />
+                        </controls:Setting.ActionContent>
+                    </controls:Setting>
+                </toolkitcontrols:HeaderedItemsControl>
 
                 <ListView x:Name="ImagesSizesListView" 
                       x:Uid="ImagesSizesListView"
                       ItemsSource="{x:Bind ViewModel.Sizes, Mode=TwoWay}"
-                      Padding="-12,0,0,0"
                       IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"
                       SelectionMode="None"
                       ScrollViewer.HorizontalScrollMode="Enabled"
                       ScrollViewer.HorizontalScrollBarVisibility="Auto"
                       ScrollViewer.IsHorizontalRailEnabled="True"
+                  
                       ContainerContentChanging="ImagesSizesListView_ContainerContentChanging">
-
+                   
                     <ListView.ItemTemplate>
                         <DataTemplate x:Name="SingleLineDataTemplate" x:DataType="models:ImageSize">
-                            <Grid Padding="0,12,12,12" Width="420" AutomationProperties.Name="{x:Bind Name, Mode=OneWay}">
-                                <Grid.ColumnDefinitions>
-                                        <ColumnDefinition Width="40" />
-                                        <ColumnDefinition Width="*" />
-                                        <ColumnDefinition Width="52" />
-                                    </Grid.ColumnDefinitions>
+                            <Grid AutomationProperties.Name="{x:Bind Name, Mode=OneWay}" HorizontalAlignment="Stretch"
+                                  Background="{ThemeResource CardBackgroundBrush}"
+                                  BorderThickness="{ThemeResource CardBorderThickness}"
+                                  BorderBrush="{ThemeResource CardBorderBrush}"
+                                  CornerRadius="{ThemeResource ControlCornerRadius}"
+                                  Padding="0,0,16,0"
+                                  MinHeight="68">
 
-                                <FontIcon Glyph="&#xE73F;" FontSize="18" Margin="0,8,0,0" VerticalAlignment="Top" Grid.RowSpan="2" Foreground="{StaticResource SystemColorControlAccentBrush}" />
-                                <StackPanel Orientation="Vertical" Grid.Column="1" Margin="0,0,16,0">
-                                    <TextBlock Text="{x:Bind Name, Mode=OneWay}" FontSize="18" />
-                                    <StackPanel Orientation="Horizontal" Grid.Row="1" Grid.Column="1" Margin="0,4,0,0" >
-                                        <TextBlock Text="{x:Bind Fit, Mode=OneWay, Converter={StaticResource ImageResizerFitToStringConverter}}" Foreground="{ThemeResource SystemBaseMediumColor}" Margin="0,0,4,0"/>
-                                        <TextBlock Text="{x:Bind Width, Mode=OneWay}" FontWeight="SemiBold" Margin="0,0,4,0"/>
-                                        <TextBlock Text="&#xE947;" FontFamily="Segoe MDL2 Assets" FontSize="11" AutomationProperties.AccessibilityView="Raw" Visibility="{x:Bind Path=EnableEtraBoxes, Mode=OneWay, Converter={StaticResource BoolToVisibilityConverter}}" Foreground="{ThemeResource SystemBaseMediumColor}" Margin="0,5,4,0"/>
-                                        <TextBlock Text="{x:Bind Height, Mode=OneWay}" Visibility="{x:Bind Path=EnableEtraBoxes, Mode=OneWay, Converter={StaticResource BoolToVisibilityConverter}}" FontWeight="SemiBold" Margin="0,0,4,0"/>
-                                        <TextBlock Text="{x:Bind Unit, Mode=OneWay, Converter={StaticResource ImageResizerUnitToStringConverter},ConverterParameter=ToLower}" Foreground="{ThemeResource SystemBaseMediumColor}" Margin="0,0,4,0"/>
+
+                                <Grid.ColumnDefinitions>
+                                    <ColumnDefinition Width="56" />
+                                    <ColumnDefinition Width="*" />
+                                    <ColumnDefinition Width="52" />
+                                </Grid.ColumnDefinitions>
+                            
+                                <StackPanel Orientation="Vertical" VerticalAlignment="Center" Grid.Column="1" Margin="0,0,16,0">
+                                    <TextBlock Text="{x:Bind Name, Mode=OneWay}"/>
+                                    <StackPanel Orientation="Horizontal" Grid.Row="1" Grid.Column="1" Margin="0,4,0,0">
+                                        <TextBlock Text="{x:Bind Fit, Mode=OneWay, Converter={StaticResource ImageResizerFitToStringConverter}}" Style="{ThemeResource SecondaryTextStyle}" Margin="0,0,4,0"/>
+                                        <TextBlock Text="{x:Bind Width, Mode=OneWay}" FontWeight="SemiBold" Margin="0,0,4,0"  Style="{ThemeResource SecondaryTextStyle}"/>
+                                        <TextBlock Text="&#xE947;" FontFamily="{ThemeResource SymbolThemeFontFamily}" FontSize="10" AutomationProperties.AccessibilityView="Raw" Visibility="{x:Bind Path=EnableEtraBoxes, Mode=OneWay, Converter={StaticResource BoolToVisibilityConverter}}" Foreground="{ThemeResource SystemBaseMediumColor}" Margin="0,5,4,0"  Style="{ThemeResource SecondaryTextStyle}"/>
+                                        <TextBlock Text="{x:Bind Height, Mode=OneWay}" Visibility="{x:Bind Path=EnableEtraBoxes, Mode=OneWay, Converter={StaticResource BoolToVisibilityConverter}}" FontWeight="SemiBold" Margin="0,0,4,0"  Style="{ThemeResource SecondaryTextStyle}"/>
+                                        <TextBlock Text="{x:Bind Unit, Mode=OneWay, Converter={StaticResource ImageResizerUnitToStringConverter},ConverterParameter=ToLower}" Foreground="{ThemeResource SystemBaseMediumColor}" Margin="0,0,4,0"  Style="{ThemeResource SecondaryTextStyle}"/>
                                     </StackPanel>
                                 </StackPanel>
+
                                 <StackPanel Spacing="8" HorizontalAlignment="Right" Grid.Column="2" Orientation="Horizontal">
                                     <Button 
                                         x:Uid="EditButton"
@@ -144,131 +164,124 @@
                 </ListView>
 
 
-                <StackPanel Orientation="Horizontal">
-                    <AppBarButton Icon="Add"
-                              x:Name="AddSizeButton"
-                              Style="{StaticResource AddItemAppBarButtonStyle}"
-                              IsEnabled="{x:Bind Mode=TwoWay, Path=ViewModel.IsEnabled}" 
-                              x:Uid="ImageResizer_AddSizeButton"
-                              Click="AddSizeButton_Click"
-                              Margin="{StaticResource AddItemButtonMargin}"
-                              
-                          />
-                </StackPanel>
 
-                <TextBlock x:Uid="Encoding"
-                       Style="{StaticResource SettingsGroupTitleStyle}"
-                       Opacity="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled, Converter={StaticResource ModuleEnabledToOpacityConverter}}"/>
+                <toolkitcontrols:HeaderedItemsControl x:Uid="Encoding">
+                    <controls:Setting x:Uid="ImageResizer_FallBackEncoderText">
+                        <controls:Setting.ActionContent>
+                            <ComboBox SelectedIndex="{x:Bind Path=ViewModel.Encoder, Mode=TwoWay}"
+                                      MinWidth="240"
+                                      IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}">
+                                <ComboBoxItem x:Uid="ImageResizer_FallbackEncoder_PNG" />
+                                <ComboBoxItem x:Uid="ImageResizer_FallbackEncoder_BMP" />
+                                <ComboBoxItem x:Uid="ImageResizer_FallbackEncoder_JPEG" />
+                                <ComboBoxItem x:Uid="ImageResizer_FallbackEncoder_TIFF" />
+                                <ComboBoxItem x:Uid="ImageResizer_FallbackEncoder_WMPhoto" />
+                                <ComboBoxItem x:Uid="ImageResizer_FallbackEncoder_GIF" />
+                            </ComboBox>
+                        </controls:Setting.ActionContent>
+                    </controls:Setting>
 
-                <ComboBox x:Uid="ImageResizer_FallBackEncoderText"
-                          SelectedIndex="{x:Bind Path=ViewModel.Encoder, Mode=TwoWay}"
-                          MinWidth="240"
-                          Margin="{StaticResource SmallTopMargin}"
-                          IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}">
-                    <ComboBoxItem x:Uid="ImageResizer_FallbackEncoder_PNG" />
-                    <ComboBoxItem x:Uid="ImageResizer_FallbackEncoder_BMP" />
-                    <ComboBoxItem x:Uid="ImageResizer_FallbackEncoder_JPEG" />
-                    <ComboBoxItem x:Uid="ImageResizer_FallbackEncoder_TIFF" />
-                    <ComboBoxItem x:Uid="ImageResizer_FallbackEncoder_WMPhoto" />
-                    <ComboBoxItem x:Uid="ImageResizer_FallbackEncoder_GIF" />
-                </ComboBox>
-
-                <muxc:NumberBox x:Uid="ImageResizer_Encoding"
+                    <controls:Setting x:Uid="ImageResizer_Encoding">
+                        <controls:Setting.ActionContent>
+                            <muxc:NumberBox
                             Minimum="0"
                             Maximum="100"
                             Value="{x:Bind Mode=TwoWay, Path=ViewModel.JPEGQualityLevel}"
                             MinWidth="240"
-                            Margin="{StaticResource SmallTopMargin}"
                             SpinButtonPlacementMode="Compact"
-                            HorizontalAlignment="Left"
-                            IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"
-                            AutomationProperties.LabeledBy="{Binding ElementName=ImageResizer_Encoding}"
+                            HorizontalAlignment="Right"
                             />
+                        </controls:Setting.ActionContent>
+                    </controls:Setting>
 
-                <ComboBox x:Uid="ImageResizer_PNGInterlacing"
-                          SelectedIndex="{x:Bind Mode=TwoWay, Path=ViewModel.PngInterlaceOption}"
-                          MinWidth="240"
-                          Margin="{StaticResource SmallTopMargin}"
-                          IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}">
-                    <ComboBoxItem x:Uid="Default"/>
-                    <ComboBoxItem x:Uid="On"/>
-                    <ComboBoxItem x:Uid="Off"/>
-                </ComboBox>
+                    <controls:Setting x:Uid="ImageResizer_PNGInterlacing">
+                        <controls:Setting.ActionContent>
+                            <ComboBox SelectedIndex="{x:Bind Mode=TwoWay, Path=ViewModel.PngInterlaceOption}">
+                                <ComboBoxItem x:Uid="Default"/>
+                                <ComboBoxItem x:Uid="On"/>
+                                <ComboBoxItem x:Uid="Off"/>
+                            </ComboBox>
+                        </controls:Setting.ActionContent>
+                    </controls:Setting>
 
-                <ComboBox x:Uid="ImageResizer_TIFFCompression"
-                          SelectedIndex="{x:Bind Mode=TwoWay, Path=ViewModel.TiffCompressOption}"
-                          MinWidth="240"
-                          Margin="{StaticResource SmallTopMargin}"
-                          IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}">
-                    <ComboBoxItem x:Uid="ImageResizer_ENCODER_TIFF_Default"/>
-                    <ComboBoxItem x:Uid="ImageResizer_ENCODER_TIFF_None"/>
-                    <ComboBoxItem x:Uid="ImageResizer_ENCODER_TIFF_CCITT3"/>
-                    <ComboBoxItem x:Uid="ImageResizer_ENCODER_TIFF_CCITT4"/>
-                    <ComboBoxItem x:Uid="ImageResizer_ENCODER_TIFF_LZW"/>
-                    <ComboBoxItem x:Uid="ImageResizer_ENCODER_TIFF_RLE"/>
-                    <ComboBoxItem x:Uid="ImageResizer_ENCODER_TIFF_Zip"/>
-                </ComboBox>
+                    <controls:Setting x:Uid="ImageResizer_TIFFCompression">
+                        <controls:Setting.ActionContent>
+                            <ComboBox SelectedIndex="{x:Bind Mode=TwoWay, Path=ViewModel.TiffCompressOption}">
+                                <ComboBoxItem x:Uid="ImageResizer_ENCODER_TIFF_Default"/>
+                                <ComboBoxItem x:Uid="ImageResizer_ENCODER_TIFF_None"/>
+                                <ComboBoxItem x:Uid="ImageResizer_ENCODER_TIFF_CCITT3"/>
+                                <ComboBoxItem x:Uid="ImageResizer_ENCODER_TIFF_CCITT4"/>
+                                <ComboBoxItem x:Uid="ImageResizer_ENCODER_TIFF_LZW"/>
+                                <ComboBoxItem x:Uid="ImageResizer_ENCODER_TIFF_RLE"/>
+                                <ComboBoxItem x:Uid="ImageResizer_ENCODER_TIFF_Zip"/>
+                            </ComboBox>
+                        </controls:Setting.ActionContent>
+                    </controls:Setting>
 
-                <TextBlock x:Uid="File"
-                       Style="{StaticResource SettingsGroupTitleStyle}"
-                       Opacity="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled, Converter={StaticResource ModuleEnabledToOpacityConverter}}"/>
+                </toolkitcontrols:HeaderedItemsControl>
+
+
+                <toolkitcontrols:HeaderedItemsControl x:Uid="File">
+                    <muxc:Expander IsExpanded="True" Style="{StaticResource SettingsExpanderStyle}">
+                        <muxc:Expander.Header>
+                            <controls:Setting x:Uid="ImageResizer_FilenameFormatHeader" Style="{StaticResource ExpanderHeaderSettingStyle}">
+                                <controls:Setting.ActionContent>
+                                    <StackPanel Spacing="4" Orientation="Horizontal">
+                                        <TextBox Text="{x:Bind Mode=TwoWay, Path=ViewModel.FileName}"
+                                         HorizontalAlignment="Right"
+                                         MinWidth="240"
+                                        x:Uid="ImageResizer_FilenameFormatPlaceholder"
+                                                 IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"/>
+                                        <Button Content="&#xE946;" FontFamily="{ThemeResource SymbolThemeFontFamily}">
+                                            <ToolTipService.ToolTip>
+                                                <ToolTip>
+                                                    <TextBlock x:Name="FileFormatTextBlock">
+                                                <Run x:Uid="ImageResizer_FileFormatDescription"/>
+                                                <LineBreak/>
+                                                <LineBreak/>
+                                                <Run Text="%1" FontWeight="Bold" />
+                                                <Run Text=" - "/>
+                                                <Run x:Uid="ImageResizer_Formatting_Filename" />
+                                                <LineBreak/>
+                                                <Run Text="%2" FontWeight="Bold" />
+                                                <Run Text=" - "/>
+                                                <Run x:Uid="ImageResizer_Formatting_Sizename"/>
+                                                <LineBreak/>
+                                                <Run Text="%3" FontWeight="Bold" />
+                                                <Run Text=" - "/>
+                                                <Run x:Uid="ImageResizer_Formatting_SelectedWidth"/>
+                                                <LineBreak/>
+                                                <Run Text="%4" FontWeight="Bold" />
+                                                <Run Text=" - "/>
+                                                <Run x:Uid="ImageResizer_Formatting_SelectedHeight"/>
+                                                <LineBreak/>
+                                                <Run Text="%5" FontWeight="Bold" />
+                                                <Run Text=" - "/>
+                                                <Run x:Uid="ImageResizer_Formatting_ActualWidth"/>
+                                                <LineBreak/>
+                                                <Run Text="%6" FontWeight="Bold" />
+                                                <Run Text=" - "/>
+                                                <Run x:Uid="ImageResizer_Formatting_ActualHeight"/>
+                                                    </TextBlock>
+                                                </ToolTip>
+                                            </ToolTipService.ToolTip>
+                                        </Button>
+                                    </StackPanel>
+
+                                </controls:Setting.ActionContent>
+
+                            </controls:Setting>
+                        </muxc:Expander.Header>
+                        <muxc:Expander.Content>
+
+                            <CheckBox x:Uid="ImageResizer_UseOriginalDate"
+                      IsChecked="{x:Bind Mode=TwoWay, Path=ViewModel.KeepDateModified}"
+                                        Margin="16,0,0,0" />
+                        </muxc:Expander.Content>
+                    </muxc:Expander>
+                </toolkitcontrols:HeaderedItemsControl>
 
-                <TextBox Text="{x:Bind Mode=TwoWay, Path=ViewModel.FileName}"
-                      HorizontalAlignment="Left"
-                      MinWidth="240"
-                      x:Uid="ImageResizer_FilenameFormatPlaceholder"
-                      IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"
-                      Margin="{StaticResource SmallTopMargin}"
-                      AutomationProperties.LabeledBy="{Binding ElementName=ImageResizer_FilenameFormatHeader}"
-                      AutomationProperties.HelpText="{Binding ElementName=FileFormatTextBlock, Path=Text}"
-                     >
-                    <TextBox.Header>
-                        <StackPanel Orientation="Horizontal">
-                            <TextBlock Name="ImageResizer_FilenameFormatHeader"
-                            x:Uid="ImageResizer_FilenameFormatHeader"
-                            Margin="0,0,0,0"
-                            Opacity="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled, Converter={StaticResource ModuleEnabledToOpacityConverter}}"/>
-                            <TextBlock Text="&#xE946;" AutomationProperties.AccessibilityView="Raw"
-                           FontFamily="Segoe MDL2 Assets"
-                           Margin="4,4,0,0"/>
-                        </StackPanel>
-                    </TextBox.Header>
-                    <ToolTipService.ToolTip>
-                        <TextBlock x:Name="FileFormatTextBlock">
-                        <Run x:Uid="ImageResizer_FileFormatDescription"/>
-                        <LineBreak/>
-                        <LineBreak/>
-                        <Run Text="%1" FontWeight="Bold" />
-                        <Run Text=" - "/>
-                        <Run x:Uid="ImageResizer_Formatting_Filename" />
-                        <LineBreak/>
-                        <Run Text="%2" FontWeight="Bold" />
-                        <Run Text=" - "/>
-                        <Run x:Uid="ImageResizer_Formatting_Sizename"/>
-                        <LineBreak/>
-                        <Run Text="%3" FontWeight="Bold" />
-                        <Run Text=" - "/>
-                        <Run x:Uid="ImageResizer_Formatting_SelectedWidth"/>
-                        <LineBreak/>
-                        <Run Text="%4" FontWeight="Bold" />
-                        <Run Text=" - "/>
-                        <Run x:Uid="ImageResizer_Formatting_SelectedHeight"/>
-                        <LineBreak/>
-                        <Run Text="%5" FontWeight="Bold" />
-                        <Run Text=" - "/>
-                        <Run x:Uid="ImageResizer_Formatting_ActualWidth"/>
-                        <LineBreak/>
-                        <Run Text="%6" FontWeight="Bold" />
-                        <Run Text=" - "/>
-                        <Run x:Uid="ImageResizer_Formatting_ActualHeight"/>
-                        </TextBlock>
-                    </ToolTipService.ToolTip>
-                </TextBox>
 
-                <CheckBox x:Uid="ImageResizer_UseOriginalDate"
-                      IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"
-                      Margin="{StaticResource SmallTopMargin}"
-                      IsChecked="{x:Bind Mode=TwoWay, Path=ViewModel.KeepDateModified}"/>
             </StackPanel>
 
         </controls:SettingsPageControl.ModuleContent>
diff --git a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/PowerPreviewPage.xaml b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/PowerPreviewPage.xaml
index b3eabb663d..2bfb42977d 100644
--- a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/PowerPreviewPage.xaml
+++ b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/PowerPreviewPage.xaml
@@ -35,10 +35,6 @@
                                    IsClosable="False"
                                    />
 
-
-
-
-
                 <toolkitcontrols:HeaderedItemsControl x:Uid="FileExplorerPreview_PreviewPane_GroupSettings">
                     <controls:Setting x:Uid="FileExplorerPreview_ToggleSwitch_Preview_SVG" Icon="&#xE91B;">
                         <controls:Setting.ActionContent>
diff --git a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ShortcutGuidePage.xaml b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ShortcutGuidePage.xaml
index dd115e5983..e205648df8 100644
--- a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ShortcutGuidePage.xaml
+++ b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ShortcutGuidePage.xaml
@@ -36,7 +36,7 @@
                 </controls:Setting>
 
 
-                <controls:Setting x:Uid="ShortcutGuide_OpenShortcutGuide" Icon="&#xEDA7;">
+                <controls:Setting x:Uid="ShortcutGuide_OpenShortcutGuide" Icon="&#xEDA7;" IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}">
                     <controls:Setting.Description>
                         <TextBlock>
                             <Run x:Uid="ShortcutWarningLabel"/>
@@ -47,15 +47,14 @@
                         <controls:HotkeySettingsControl Width="240" HotkeySettings="{x:Bind Path=ViewModel.OpenShortcutGuide, Mode=TwoWay}" Keys="Win, Ctrl, Alt, Shift"/>
                     </controls:Setting.ActionContent>
                 </controls:Setting>
-                
-                <toolkitcontrols:HeaderedItemsControl x:Uid="ShortcutGuide_Appearance_Behavior">
+
+                <toolkitcontrols:HeaderedItemsControl x:Uid="ShortcutGuide_Appearance_Behavior" IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}">
                     <muxc:Expander IsExpanded="True" Style="{StaticResource SettingsExpanderStyle}">
                         <muxc:Expander.Header>
                             <controls:Setting x:Uid="ColorModeHeader" Icon="&#xE771;" Style="{StaticResource ExpanderHeaderSettingStyle}">
                                 <controls:Setting.Description>
                                     <HyperlinkButton Click="OpenColorsSettings_Click"
-                                                     x:Uid="Windows_Color_Settings"
-                                                     IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"/>
+                                                     x:Uid="Windows_Color_Settings"/>
                                 </controls:Setting.Description>
                                 <controls:Setting.ActionContent>
                                     <ComboBox SelectedIndex="{x:Bind Mode=TwoWay, Path=ViewModel.ThemeIndex}">
@@ -73,21 +72,19 @@
                                         <Slider Minimum="0"
                                         Maximum="100"
                                         Width="240"
-                                        Value="{x:Bind Mode=TwoWay, Path=ViewModel.OverlayOpacity}"
-                                        IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"/>
+                                        Value="{x:Bind Mode=TwoWay, Path=ViewModel.OverlayOpacity}"/>
                                     </controls:Setting.ActionContent>
                                 </controls:Setting>
                             </StackPanel>
                         </muxc:Expander.Content>
                     </muxc:Expander>
-                    <muxc:Expander IsExpanded="True" Style="{StaticResource SettingsExpanderStyle}" IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}">
+                    <muxc:Expander IsExpanded="True" Style="{StaticResource SettingsExpanderStyle}">
                         <muxc:Expander.Header>
                             <controls:Setting x:Uid="ShortcutGuide_DisabledApps" Style="{StaticResource ExpanderHeaderSettingStyle}"/>
                         </muxc:Expander.Header>
                         <muxc:Expander.Content>
                             <TextBox x:Uid="ShortcutGuide_DisabledApps_TextBoxControl"
                                          Text="{x:Bind Mode=TwoWay, Path=ViewModel.DisabledApps, UpdateSourceTrigger=PropertyChanged}"
-                                         IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"
                                          ScrollViewer.VerticalScrollBarVisibility ="Visible"
                                          ScrollViewer.VerticalScrollMode="Enabled"
                                          ScrollViewer.IsVerticalRailEnabled="True"