From 4bac5d2ae335941b4cf179d9ecf216d0e8c5523d Mon Sep 17 00:00:00 2001
From: Niels Laute <niels9001@hotmail.com>
Date: Thu, 22 Jul 2021 11:01:34 +0200
Subject: [PATCH] Updated pages

---
 .../SidePanel/SettingsPageControl.xaml        | 53 +++++++------
 .../SidePanel/SettingsPageControl.xaml.cs     | 21 +++--
 .../Strings/en-us/Resources.resw              | 76 +++++++++++--------
 .../Views/AwakePage.xaml                      |  2 +-
 .../Views/ColorPickerPage.xaml                |  2 +-
 .../Views/FancyZonesPage.xaml                 |  2 +-
 .../Views/GeneralPage.xaml                    |  2 +-
 .../Views/ImageResizerPage.xaml               |  2 +-
 .../Views/KeyboardManagerPage.xaml            |  2 +-
 .../Views/PowerLauncherPage.xaml              |  2 +-
 .../Views/PowerPreviewPage.xaml               |  2 +-
 .../Views/PowerRenamePage.xaml                |  2 +-
 .../Views/ShellPage.xaml                      | 54 +++++++------
 .../Views/ShortcutGuidePage.xaml              |  2 +-
 .../Views/VideoConference.xaml                |  2 +-
 15 files changed, 125 insertions(+), 101 deletions(-)

diff --git a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Controls/SidePanel/SettingsPageControl.xaml b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Controls/SidePanel/SettingsPageControl.xaml
index 5908d250f4..66e0c860b8 100644
--- a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Controls/SidePanel/SettingsPageControl.xaml
+++ b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Controls/SidePanel/SettingsPageControl.xaml
@@ -6,14 +6,13 @@
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     xmlns:converters="using:Microsoft.Toolkit.Uwp.UI.Converters"
-    mc:Ignorable="d"
-    >
+    mc:Ignorable="d">
 
     <UserControl.Resources>
         <converters:DoubleToVisibilityConverter x:Name="doubleToVisibilityConverter" GreaterThan="0" TrueValue="Visible" FalseValue="Collapsed" />
     </UserControl.Resources>
 
-    <Grid RowSpacing="{StaticResource DefaultRowSpacing}">
+    <Grid RowSpacing="{StaticResource DefaultRowSpacing}" Margin="0">
         <VisualStateManager.VisualStateGroups>
             <VisualStateGroup x:Name="LayoutVisualStates">
                 <VisualState x:Name="WideLayout">
@@ -29,13 +28,14 @@
                     <VisualState.Setters>
                         <Setter Target="SidePanel.(Grid.Column)" Value="0"/>
                         <Setter Target="SidePanel.Width" Value="Auto"/>
-                        <Setter Target="ModuleContentPresenter.(Grid.Row)" Value="1" />
-                        <Setter Target="ModuleContentPresenter.Margin" Value="0" />
+                        <Setter Target="SidePanel.Margin" Value="24,0,24,0"/>
+                        <Setter Target="ModuleContentPresenter.(Grid.Row)" Value="2" />
+                        <Setter Target="ModuleContentPresenter.Margin" Value="24,0,0,0" />
                         <Setter Target="LinksPanel.(RelativePanel.RightOf)" Value="AboutImage" />
                         <Setter Target="LinksPanel.(RelativePanel.AlignTopWith)" Value="AboutImage" />
                         <Setter Target="LinksPanel.Margin" Value="0,12,0,0" />
-                        <Setter Target="AboutImage.Margin" Value="0,12,12,0" />
-                        <Setter Target="AboutTitle.Visibility" Value="Collapsed" />
+                        <Setter Target="AboutImage.Margin" Value="-12,12,12,0" />
+                        <Setter Target="Header.Margin" Value="24,44,0,0" />
                     </VisualState.Setters>
                 </VisualState>
             </VisualStateGroup>
@@ -45,34 +45,43 @@
             <ColumnDefinition Width="Auto"/>
         </Grid.ColumnDefinitions>
         <Grid.RowDefinitions>
+            <RowDefinition Height="Auto" />
             <RowDefinition Height="Auto"/>
             <RowDefinition Height="Auto" />
         </Grid.RowDefinitions>
 
+        <TextBlock x:Name="Header"
+                   Text="{x:Bind ModuleTitle}"
+                   FontWeight="SemiBold"
+                   FontSize="28"
+                   Margin="48,44,0,0"
+                   VerticalAlignment="Stretch"/>
+
         <ContentPresenter x:Name="ModuleContentPresenter"
                           Content="{x:Bind ModuleContent}"
-                           Margin="0,0,48,0"
+                          Margin="48,12,48,0"
                           HorizontalAlignment="Left"
+                          Grid.Row="1"
                           MaxWidth="{StaticResource MaxContentWidth}"/>
 
-        <RelativePanel Grid.Column="1" x:Name="SidePanel" Width="{StaticResource SidePanelWidth}">
-            <StackPanel x:Name="DescriptionPanel">
-                <TextBlock  x:Name="AboutTitle"
-                        Text="{x:Bind ModuleTitle}"
-                        Style="{StaticResource SettingsGroupTitleStyle}"
-                        Margin="{StaticResource XSmallBottomMargin}"/>
-                <TextBlock Text="{x:Bind ModuleDescription}"
-                           TextWrapping="Wrap">
-                </TextBlock>
-            </StackPanel>
+        <RelativePanel Grid.Column="1"
+                       Grid.Row="1"
+                       x:Name="SidePanel"
+                       Width="{StaticResource SidePanelWidth}"
+                       Margin="0,12,48,0">
+
+            <TextBlock x:Name="AboutDescription"
+                       Text="{x:Bind ModuleDescription}"
+                       Foreground="{StaticResource TextFillColorSecondaryBrush}"
+                       TextWrapping="Wrap"/>
 
             <HyperlinkButton x:Name="AboutImage"
-                         RelativePanel.Below="DescriptionPanel"
+                         RelativePanel.Below="AboutDescription"
                          MaxWidth="240"
                          CornerRadius="4"
                          x:Uid="Learn_More_Description"
                          NavigateUri="{x:Bind ModuleImageLink}"
-                         Margin="{StaticResource SmallTopBottomMargin}">
+                         Margin="-12, 12, 0, 12">
                 <Image>
                     <Image.Source>
                         <BitmapImage UriSource="{x:Bind ModuleImageSource}" />
@@ -89,7 +98,7 @@
                     <ItemsControl ItemsSource="{x:Bind ModuleLinks}">
                         <ItemsControl.ItemTemplate>
                             <DataTemplate x:DataType="local:SidePanelLink">
-                                <HyperlinkButton NavigateUri="{x:Bind Link}" Margin="0,-3,0,0">
+                                <HyperlinkButton NavigateUri="{x:Bind Link}" Margin="-12,-3,0,0">
                                     <TextBlock Text="{x:Bind Label}" TextWrapping="Wrap" />
                                 </HyperlinkButton>
                             </DataTemplate>
@@ -105,7 +114,7 @@
                     <ItemsControl x:Name="AttributionLinksItemControl" ItemsSource="{x:Bind AttributionLinks}">
                         <ItemsControl.ItemTemplate>
                             <DataTemplate x:DataType="local:SidePanelLink">
-                                <HyperlinkButton NavigateUri="{x:Bind Link}" Margin="0,-3,0,0">
+                                <HyperlinkButton NavigateUri="{x:Bind Link}" Margin="-12,-3,0,0">
                                     <TextBlock Text="{x:Bind Label}" TextWrapping="Wrap" />
                                 </HyperlinkButton>
                             </DataTemplate>
diff --git a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Controls/SidePanel/SettingsPageControl.xaml.cs b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Controls/SidePanel/SettingsPageControl.xaml.cs
index b8a74f24f3..9a1bd68919 100644
--- a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Controls/SidePanel/SettingsPageControl.xaml.cs
+++ b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Controls/SidePanel/SettingsPageControl.xaml.cs
@@ -30,18 +30,10 @@ namespace Microsoft.PowerToys.Settings.UI.Controls
             AttributionLinks = new ObservableCollection<SidePanelLink>();
         }
 
-        public object ModuleContent
-        {
-            get { return (object)GetValue(ModuleContentProperty); }
-            set { SetValue(ModuleContentProperty, value); }
-        }
-
-        public static readonly DependencyProperty ModuleContentProperty = DependencyProperty.Register("Content", typeof(object), typeof(SettingsPageControl), new PropertyMetadata(new Grid()));
-
         public string ModuleTitle
         {
-            get => (string)GetValue(ModuleTitleProperty);
-            set => SetValue(ModuleTitleProperty, value);
+            get { return (string)GetValue(ModuleTitleProperty); }
+            set { SetValue(ModuleTitleProperty, value); }
         }
 
         public string ModuleDescription
@@ -78,11 +70,18 @@ namespace Microsoft.PowerToys.Settings.UI.Controls
             set => SetValue(AttributionLinksProperty, value);
         }
 
-        public static readonly DependencyProperty ModuleTitleProperty = DependencyProperty.Register("ModuleTitle", typeof(string), typeof(SettingsPageControl), new PropertyMetadata(default(string)));
+        public object ModuleContent
+        {
+            get { return (object)GetValue(ModuleContentProperty); }
+            set { SetValue(ModuleContentProperty, value); }
+        }
+
+        public static readonly DependencyProperty ModuleTitleProperty = DependencyProperty.Register("Title", typeof(string), typeof(SettingsPageControl), new PropertyMetadata(default(string)));
         public static readonly DependencyProperty ModuleDescriptionProperty = DependencyProperty.Register("ModuleDescription", typeof(string), typeof(SettingsPageControl), new PropertyMetadata(default(string)));
         public static readonly DependencyProperty ModuleImageSourceProperty = DependencyProperty.Register("ModuleImageSource", typeof(string), typeof(SettingsPageControl), new PropertyMetadata(default(string)));
         public static readonly DependencyProperty ModuleImageLinkProperty = DependencyProperty.Register("ModuleImageLink", typeof(string), typeof(SettingsPageControl), new PropertyMetadata(default(string)));
         public static readonly DependencyProperty ModuleLinksProperty = DependencyProperty.Register("ModuleLinks", typeof(ObservableCollection<SidePanelLink>), typeof(SettingsPageControl), new PropertyMetadata(new ObservableCollection<SidePanelLink>()));
         public static readonly DependencyProperty AttributionLinksProperty = DependencyProperty.Register("AttributionLinks", typeof(ObservableCollection<SidePanelLink>), typeof(SettingsPageControl), new PropertyMetadata(new ObservableCollection<SidePanelLink>()));
+        public static readonly DependencyProperty ModuleContentProperty = DependencyProperty.Register("Content", typeof(object), typeof(SettingsPageControl), new PropertyMetadata(new Grid()));
     }
 }
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 6bce3756e1..11d4bc92a4 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
@@ -124,7 +124,7 @@
   <data name="VideoConference_Enable.Header" xml:space="preserve">
     <value>Enable Video Conference</value>
   </data>
-  <data name="About_VideoConference.ModuleDescription" xml:space="preserve">
+  <data name="VideoConference.ModuleDescription" xml:space="preserve">
     <value>Video Conference Mute is a quick and easy way to do an global "mute" of both your microphone and webcam.
 Disabling this module or closing PowerToys will unmute the microphone and camera.</value>
   </data>
@@ -185,8 +185,9 @@ Disabling this module or closing PowerToys will unmute the microphone and camera
   <data name="VideoConference_HideToolbarWhenUnmuted.Content" xml:space="preserve">
     <value>Hide toolbar when both camera and microphone are unmuted</value>
   </data>
-  <data name="About_VideoConference.ModuleTitle" xml:space="preserve">
-    <value>About Video Conference</value>
+  <data name="VideoConference.ModuleTitle" xml:space="preserve">
+    <value>Video Conference</value>
+	    <comment>do not loc the product name</comment>
   </data>
   <data name="VideoConference_Camera.Text" xml:space="preserve">
     <value>Camera</value>
@@ -253,7 +254,7 @@ Disabling this module or closing PowerToys will unmute the microphone and camera
     <value>Current configuration</value>
     <comment>Keyboard Manager current configuration header</comment>
   </data>
-  <data name="About_KeyboardManager.ModuleDescription" xml:space="preserve">
+  <data name="KeyboardManager.ModuleDescription" xml:space="preserve">
     <value>Reconfigure your keyboard by remapping keys and shortcuts.</value>
     <comment>Keyboard Manager page description</comment>
   </data>
@@ -311,7 +312,7 @@ Disabling this module or closing PowerToys will unmute the microphone and camera
     <value>Keyboard Manager</value>
     <comment>do not loc, product name</comment>
   </data>
-  <data name="About_ColorPicker.ModuleDescription" xml:space="preserve">
+  <data name="ColorPicker.ModuleDescription" xml:space="preserve">
     <value>Quick and simple system-wide color picker.</value>
   </data>
   <data name="ColorPicker_EnableColorPicker.Header" xml:space="preserve">
@@ -325,7 +326,7 @@ Disabling this module or closing PowerToys will unmute the microphone and camera
     <value>Activate Color Picker</value>
     <comment>do not loc product name</comment>
   </data>
-  <data name="About_PowerLauncher.ModuleDescription" xml:space="preserve">
+  <data name="PowerLauncher.ModuleDescription" xml:space="preserve">
     <value>A quick launcher that has additional capabilities without sacrificing performance.</value>
   </data>
   <data name="PowerLauncher_EnablePowerLauncher.Header" xml:space="preserve">
@@ -401,7 +402,7 @@ Disabling this module or closing PowerToys will unmute the microphone and camera
     <value>FancyZones windows</value>
     <comment>do not loc the Product name</comment>
   </data>
-  <data name="About_FancyZones.ModuleDescription" xml:space="preserve">
+  <data name="FancyZones.ModuleDescription" xml:space="preserve">
     <value>Create window layouts to help make multi-tasking easy.</value>
     <comment>windows refers to application windows</comment>
   </data>
@@ -484,8 +485,9 @@ Disabling this module or closing PowerToys will unmute the microphone and camera
     <value>Attribution</value>
     <comment>giving credit to the projects this utility was based on</comment>
   </data>
-  <data name="About_PowerToys.ModuleTitle" xml:space="preserve">
-    <value>About PowerToys</value>
+  <data name="PowerToys.ModuleTitle" xml:space="preserve">
+    <value>PowerToys</value>
+	    <comment>do not loc the product name</comment>
   </data>
   <data name="GeneralPage_CheckForUpdates.Content" xml:space="preserve">
     <value>Check for updates</value>
@@ -511,7 +513,7 @@ Disabling this module or closing PowerToys will unmute the microphone and camera
   <data name="GeneralPage_ToggleSwitch_RunAtStartUp.Header" xml:space="preserve">
     <value>Run at startup</value>
   </data>
-  <data name="About_PowerRename.ModuleDescription" xml:space="preserve">
+  <data name="PowerRename.ModuleDescription" xml:space="preserve">
     <value>A Windows Shell extension for more advanced bulk renaming using search and replace or regular expressions.</value>
   </data>
   <data name="PowerRename_ShellIntegration.Text" xml:space="preserve">
@@ -549,7 +551,7 @@ Disabling this module or closing PowerToys will unmute the microphone and camera
     <value>Enable SVG (.svg) thumbnails</value>
     <comment>Do you want this feature on / off</comment>
   </data>
-  <data name="About_FileExplorerPreview.ModuleDescription" xml:space="preserve">
+  <data name="FileExplorerPreview.ModuleDescription" xml:space="preserve">
     <value>These settings allow you to manage your Windows File Explorer custom preview handlers.</value>
   </data>
   <data name="PowerRename_AutoCompleteHeader.Text" xml:space="preserve">
@@ -567,7 +569,7 @@ Disabling this module or closing PowerToys will unmute the microphone and camera
   <data name="FancyZones_InActiveColor.Text" xml:space="preserve">
     <value>Zone inactive color</value>
   </data>
-  <data name="About_ShortcutGuide.ModuleDescription" xml:space="preserve">
+  <data name="ShortcutGuide.ModuleDescription" xml:space="preserve">
     <value>Shows a help overlay with Windows shortcuts when the Windows key is pressed.</value>
   </data>
   <data name="ShortcutGuide_PressTime.Header" xml:space="preserve">
@@ -597,7 +599,7 @@ Disabling this module or closing PowerToys will unmute the microphone and camera
   <data name="ImageResizer_CustomSizes.Text" xml:space="preserve">
     <value>Image sizes</value>
   </data>
-  <data name="About_ImageResizer.ModuleDescription" xml:space="preserve">
+  <data name="ImageResizer.ModuleDescription" xml:space="preserve">
     <value>Lets you resize images by right-clicking.</value>
   </data>
   <data name="ImageResizer_EnableToggle.Header" xml:space="preserve">
@@ -753,41 +755,48 @@ Disabling this module or closing PowerToys will unmute the microphone and camera
   <data name="GeneralSettings_RunningAsAdminText" xml:space="preserve">
     <value>Running as administrator</value>
   </data>
-  <data name="About_FancyZones.ModuleTitle" xml:space="preserve">
-    <value>About FancyZones</value>
+  <data name="FancyZones.ModuleTitle" xml:space="preserve">
+    <value>FancyZones</value>
+	    <comment>do not loc the product name</comment>
   </data>
-  <data name="About_FileExplorerPreview.ModuleTitle" xml:space="preserve">
-    <value>About File Explorer</value>
+  <data name="FileExplorerPreview.ModuleTitle" xml:space="preserve">
+    <value>File Explorer</value>
+	    <comment>do not loc the product name</comment>
   </data>
   <data name="FileExplorerPreview_Image.AutomationProperties.Name" xml:space="preserve">
     <value>File Explorer</value>
     <comment>Use same translation as Windows does for File Explorer</comment>
   </data>
-  <data name="About_ImageResizer.ModuleTitle" xml:space="preserve">
-    <value>About Image Resizer</value>
+  <data name="ImageResizer.ModuleTitle" xml:space="preserve">
+    <value>Image Resizer</value>
+	    <comment>do not loc the product name</comment>
   </data>
-  <data name="About_KeyboardManager.ModuleTitle" xml:space="preserve">
-    <value>About Keyboard Manager</value>
+  <data name="KeyboardManager.ModuleTitle" xml:space="preserve">
+    <value>Keyboard Manager</value>
+	    <comment>do not loc the product name</comment>
   </data>
-  <data name="About_ColorPicker.ModuleTitle" xml:space="preserve">
-    <value>About Color Picker</value>
+  <data name="ColorPicker.ModuleTitle" xml:space="preserve">
+    <value>Color Picker</value>
+	    <comment>do not loc the product name</comment>
   </data>
-  <data name="About_PowerLauncher.ModuleTitle" xml:space="preserve">
-    <value>About PowerToys Run</value>
+  <data name="PowerLauncher.ModuleTitle" xml:space="preserve">
+    <value>PowerToys Run</value>
+	    <comment>do not loc the product name</comment>
   </data>
   <data name="PowerToys_Run_Image.AutomationProperties.Name" xml:space="preserve">
     <value>PowerToys Run</value>
   </data>
-  <data name="About_PowerRename.ModuleTitle" xml:space="preserve">
-    <value>About PowerRename</value>
+  <data name="PowerRename.ModuleTitle" xml:space="preserve">
+    <value>PowerRename</value>
     <comment>do not loc the product name</comment>
   </data>
   <data name="PowerRename_Image.AutomationProperties.Name" xml:space="preserve">
     <value>PowerRename</value>
     <comment>do not loc</comment>
   </data>
-  <data name="About_ShortcutGuide.ModuleTitle" xml:space="preserve">
-    <value>About Shortcut Guide</value>
+  <data name="ShortcutGuide.ModuleTitle" xml:space="preserve">
+    <value>Shortcut Guide</value>
+	    <comment>do not loc the product name</comment>
   </data>
   <data name="Shortcut_Guide_Image.AutomationProperties.Name" xml:space="preserve">
     <value>Shortcut Guide</value>
@@ -841,7 +850,7 @@ Disabling this module or closing PowerToys will unmute the microphone and camera
   <data name="KeyboardManager_RemapShortcutsSubtitle.Text" xml:space="preserve">
     <value>Remap shortcuts to other shortcuts or keys. Additionally, mappings can be targeted to specific applications as well.</value>
   </data>
-  <data name="About_PowerToys.ModuleDescription" xml:space="preserve">
+  <data name="PowerToys.ModuleDescription" xml:space="preserve">
     <value>Microsoft PowerToys is a set of utilities for power users to tune and streamline their Windows experience for greater productivity.
 
 Made with 💗 by Microsoft and the PowerToys community.</value>
@@ -1256,10 +1265,11 @@ From there, simply click on a Markdown file or SVG icon in the File Explorer and
   <data name="SettingsWindow_Title" xml:space="preserve">
     <value>PowerToys Settings</value>
   </data>
-  <data name="About_Awake.ModuleTitle" xml:space="preserve">
-    <value>About Awake</value>
+  <data name="Awake.ModuleTitle" xml:space="preserve">
+    <value>Awake</value>
+	    <comment>do not loc the product name</comment>
   </data>
-  <data name="About_Awake.ModuleDescription" xml:space="preserve">
+  <data name="Awake.ModuleDescription" xml:space="preserve">
     <value>A convenient way to keep your PC awake on-demand.</value>
   </data>
   <data name="Awake_EnableAwake.Header" xml:space="preserve">
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 649ae3ce69..f7d98dd95f 100644
--- a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/AwakePage.xaml
+++ b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/AwakePage.xaml
@@ -14,7 +14,7 @@
         <c:AwakeModeToBoolConverter x:Key="AwakeModeToBoolConverter" />
     </Page.Resources>
 
-    <controls:SettingsPageControl x:Uid="About_Awake"
+    <controls:SettingsPageControl x:Uid="Awake"
                                   ModuleImageSource="ms-appx:///Assets/Modules/Awake.png"
                                   ModuleImageLink="https://aka.ms/PowerToysOverview_Awake">
         <controls:SettingsPageControl.ModuleContent>
diff --git a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ColorPickerPage.xaml b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ColorPickerPage.xaml
index 092b6329a6..1c15e0658b 100644
--- a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ColorPickerPage.xaml
+++ b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ColorPickerPage.xaml
@@ -10,7 +10,7 @@
     mc:Ignorable="d"
     AutomationProperties.LandmarkType="Main">
 
-    <controls:SettingsPageControl x:Uid="About_ColorPicker"
+    <controls:SettingsPageControl x:Uid="ColorPicker"
                                   ModuleImageSource="ms-appx:///Assets/Modules/ColorPicker.png"
                                   ModuleImageLink="https://aka.ms/PowerToysOverview_ColorPicker">
         <controls:SettingsPageControl.ModuleContent>
diff --git a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/FancyZonesPage.xaml b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/FancyZonesPage.xaml
index 6c7b29f5d9..dc6ae4e95d 100644
--- a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/FancyZonesPage.xaml
+++ b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/FancyZonesPage.xaml
@@ -14,7 +14,7 @@
         <converters:StringFormatConverter x:Key="StringFormatConverter"/>
     </Page.Resources>
 
-    <controls:SettingsPageControl x:Uid="About_FancyZones"
+    <controls:SettingsPageControl x:Uid="FancyZones"
                                   ModuleImageSource="ms-appx:///Assets/Modules/FancyZones.png"
                                   ModuleImageLink="https://aka.ms/PowerToysOverview_FancyZones">
         <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 af705220c4..2f67f6f0ee 100644
--- a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/GeneralPage.xaml
+++ b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/GeneralPage.xaml
@@ -19,7 +19,7 @@
         <localConverters:UpdatingStateReadyToInstallToVisibilityConverter x:Key="UpdatingStateReadyToInstallToVisibilityConverter" />
     </Page.Resources>
 
-    <controls:SettingsPageControl x:Uid="About_PowerToys"
+    <controls:SettingsPageControl x:Uid="PowerToys"
                                   ModuleImageSource="ms-appx:///Assets/Modules/PT.png"
                                   ModuleImageLink="https://aka.ms/powertoys">
         <controls:SettingsPageControl.ModuleContent>
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 77b4ad9f3c..9e44204b0e 100644
--- a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ImageResizerPage.xaml
+++ b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ImageResizerPage.xaml
@@ -10,7 +10,7 @@
     mc:Ignorable="d"
     AutomationProperties.LandmarkType="Main">
 
-    <controls:SettingsPageControl x:Uid="About_ImageResizer"
+    <controls:SettingsPageControl x:Uid="ImageResizer"
                                   ModuleImageSource="ms-appx:///Assets/Modules/ImageResizer.png"
                                   ModuleImageLink="https://aka.ms/PowerToysOverview_ImageResizer">
         <controls:SettingsPageControl.ModuleContent>
diff --git a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/KeyboardManagerPage.xaml b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/KeyboardManagerPage.xaml
index 26552f9007..c47ef88ae5 100644
--- a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/KeyboardManagerPage.xaml
+++ b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/KeyboardManagerPage.xaml
@@ -187,7 +187,7 @@
         </DataTemplate>
     </Page.Resources>
 
-    <controls:SettingsPageControl x:Uid="About_KeyboardManager"
+    <controls:SettingsPageControl x:Uid="KeyboardManager"
                                   ModuleImageSource="ms-appx:///Assets/Modules/KBM.png"
                                   ModuleImageLink="https://aka.ms/PowerToysOverview_KeyboardManage">
         <controls:SettingsPageControl.ModuleContent>
diff --git a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/PowerLauncherPage.xaml b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/PowerLauncherPage.xaml
index a72d98b734..be4ee95f89 100644
--- a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/PowerLauncherPage.xaml
+++ b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/PowerLauncherPage.xaml
@@ -16,7 +16,7 @@
         <converters:BoolNegationConverter x:Key="BoolNegationConverter"/>
     </Page.Resources>
 
-    <controls:SettingsPageControl x:Uid="About_PowerLauncher"
+    <controls:SettingsPageControl x:Uid="PowerLauncher"
                                   ModuleImageSource="ms-appx:///Assets/Modules/PowerLauncher.png"
                                   ModuleImageLink="https://aka.ms/PowerToysOverview_PowerToysRun">
         <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 c14dae4446..8b426ceabb 100644
--- a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/PowerPreviewPage.xaml
+++ b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/PowerPreviewPage.xaml
@@ -13,7 +13,7 @@
         <converters:BoolToObjectConverter x:Key="BoolToVisibilityConverter" TrueValue="Collapsed" FalseValue="Visible"/>
     </Page.Resources>
 
-    <controls:SettingsPageControl x:Uid="About_FileExplorerPreview"
+    <controls:SettingsPageControl x:Uid="FileExplorerPreview"
                                   ModuleImageSource="ms-appx:///Assets/Modules/PowerPreview.png"
                                   ModuleImageLink="https://aka.ms/PowerToysOverview_FileExplorerAddOns">
         <controls:SettingsPageControl.ModuleContent>
diff --git a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/PowerRenamePage.xaml b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/PowerRenamePage.xaml
index 7dc8109f12..b309a8f1d0 100644
--- a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/PowerRenamePage.xaml
+++ b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/PowerRenamePage.xaml
@@ -9,7 +9,7 @@
     mc:Ignorable="d"
     AutomationProperties.LandmarkType="Main">
 
-    <controls:SettingsPageControl x:Uid="About_PowerRename"
+    <controls:SettingsPageControl x:Uid="PowerRename"
                                   ModuleImageSource="ms-appx:///Assets/Modules/PowerRename.png"
                                   ModuleImageLink="https://aka.ms/PowerToysOverview_PowerRename">
         <controls:SettingsPageControl.ModuleContent>
diff --git a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ShellPage.xaml b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ShellPage.xaml
index ac2aadae8c..09144f11a9 100644
--- a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ShellPage.xaml
+++ b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ShellPage.xaml
@@ -11,30 +11,16 @@
     xmlns:ic="using:Microsoft.Xaml.Interactions.Core"
     xmlns:i="using:Microsoft.Xaml.Interactivity"
     winui:BackdropMaterial.ApplyToRootOrPageBackground="True"
-    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
     mc:Ignorable="d">
 
     <UserControl.Resources>
-        <ResourceDictionary>
-            <ResourceDictionary.MergedDictionaries>
-                <ResourceDictionary>
-                    <ResourceDictionary.ThemeDictionaries>
-                        <ResourceDictionary x:Key="Light">
-                            <StaticResource x:Key="NavigationViewContentBackground" ResourceKey="LayerFillColorDefaultBrush"/>
-                            <SolidColorBrush x:Key="NavigationViewExpandedPaneBackground" Color="Transparent"/>
-                        </ResourceDictionary>
-                        <ResourceDictionary x:Key="Dark">
-                            <StaticResource x:Key="NavigationViewContentBackground" ResourceKey="LayerFillColorDefaultBrush"/>
-                            <SolidColorBrush x:Key="NavigationViewExpandedPaneBackground" Color="Transparent"/>
-                        </ResourceDictionary>
-                        <ResourceDictionary x:Key="HighContrast">
-                            <SolidColorBrush x:Key="NavigationViewContentBackground" Color="{ThemeResource SystemColorWindowColor}" />
-                            <SolidColorBrush x:Key="NavigationViewExpandedPaneBackground" Color="{ThemeResource SystemColorWindowColor}" />
-                        </ResourceDictionary>
-                    </ResourceDictionary.ThemeDictionaries>
-                </ResourceDictionary>
-            </ResourceDictionary.MergedDictionaries>
-        </ResourceDictionary>
+        <DataTemplate x:Key="HeaderSmallTemplate">
+            <TextBlock x:Name="HeaderText"
+                                Text="{Binding}"
+                                Margin="-36,0,0,0"
+                                AutomationProperties.HeadingLevel="Level1" />
+        </DataTemplate>
+
     </UserControl.Resources>
     
     <i:Interaction.Behaviors>
@@ -43,15 +29,35 @@
         </ic:EventTriggerBehavior>
     </i:Interaction.Behaviors>
 
-    <Grid>
+    <Grid x:Name="RootGrid" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
+        <VisualStateManager.VisualStateGroups>
+            <VisualStateGroup x:Name="LayoutVisualStates">
+                <VisualState x:Name="WideLayout">
+                    <VisualState.StateTriggers>
+                        <AdaptiveTrigger MinWindowWidth="{StaticResource WideLayoutMinWidth}" />
+                    </VisualState.StateTriggers>
+                </VisualState>
+                <VisualState x:Name="SmallLayout">
+                    <VisualState.StateTriggers>
+                        <AdaptiveTrigger MinWindowWidth="{StaticResource SmallLayoutMinWidth}" />
+                        <AdaptiveTrigger MinWindowWidth="0" />
+                    </VisualState.StateTriggers>
+                    <VisualState.Setters>
+                        <Setter Target="navigationView.HeaderTemplate" Value="{StaticResource HeaderSmallTemplate}"/>
+                    </VisualState.Setters>
+                </VisualState>
+            </VisualStateGroup>
+        </VisualStateManager.VisualStateGroups>
+
+
         <winui:NavigationView
         x:Name="navigationView"
         Background="{ThemeResource HomePageBackgroundBrush}"
         IsBackButtonVisible="Collapsed"
+        IsTitleBarAutoPaddingEnabled="False"
         IsBackEnabled="{x:Bind ViewModel.IsBackEnabled, Mode=OneWay}"
         SelectedItem="{x:Bind ViewModel.Selected, Mode=OneWay}"
         IsSettingsVisible="False"
-        OpenPaneLength="296"
         CompactModeThresholdWidth="0"
         SelectionChanged="NavigationView_SelectionChanged">
             <winui:NavigationView.MenuItems>
@@ -124,7 +130,7 @@
 
             </winui:NavigationView.MenuItems>
             <i:Interaction.Behaviors>
-                <behaviors:NavigationViewHeaderBehavior DefaultHeader="{x:Bind ViewModel.Selected.Content, Mode=OneWay}"/>
+               
                 <ic:EventTriggerBehavior EventName="ItemInvoked">
                 <ic:InvokeCommandAction Command="{x:Bind ViewModel.ItemInvokedCommand}" />
             </ic:EventTriggerBehavior>
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 2126335696..268501980f 100644
--- a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ShortcutGuidePage.xaml
+++ b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ShortcutGuidePage.xaml
@@ -14,7 +14,7 @@
         <converters:StringFormatConverter x:Key="StringFormatConverter"/>
     </Page.Resources>
 
-    <controls:SettingsPageControl x:Uid="About_ShortcutGuide"
+    <controls:SettingsPageControl x:Uid="ShortcutGuide"
                                   ModuleImageSource="ms-appx:///Assets/Modules/ShortcutGuide.png"
                                   ModuleImageLink="https://aka.ms/PowerToysOverview_ShortcutGuide">
         <controls:SettingsPageControl.ModuleContent>
diff --git a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/VideoConference.xaml b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/VideoConference.xaml
index 457fa8b5d6..6039ca8d70 100644
--- a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/VideoConference.xaml
+++ b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/VideoConference.xaml
@@ -7,7 +7,7 @@
     xmlns:controls="using:Microsoft.PowerToys.Settings.UI.Controls"
     mc:Ignorable="d">
 
-    <controls:SettingsPageControl x:Uid="About_VideoConference"
+    <controls:SettingsPageControl x:Uid="VideoConference"
                                   ModuleImageSource="ms-appx:///Assets/Modules/VideoConference.png"
                                   ModuleImageLink="https://aka.ms/PowerToysOverview_VideoConference">
         <controls:SettingsPageControl.ModuleContent>