[Settings] Various UX tweaks (#2822)

* Updated the add button styles to a standard used in W10 settings

* Updated the "About this feature" text to About [Module name]

* Set larger changes to the Shortcut Guide opacity numberbox

* Re-organised the General page

* Improved width of the add button so it's inline with the corresponding listview.

* Seperated warning label from header. Re-organised general settings

* Consistent formatting of the word 'administrator'

* Typo fix

* Warning text is collapsed when the user runs the app as admin

* Removed underline of version number

* XAML fix

src/core/Microsoft.PowerToys.Settings.UI/Views/GeneralPage.xaml

@@ -6,11 +6,13 @@
     xmlns:viewModel="using:Microsoft.PowerToys.Settings.UI.ViewModels"
     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"
     xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
     mc:Ignorable="d"
     Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
 
     <Page.Resources>
+        <converters:BoolToObjectConverter x:Key="BoolToVisibilityConverter" TrueValue="Collapsed" FalseValue="Visible"/>
         <viewModel:GeneralViewModel x:Key="eventViewModel"/>
     </Page.Resources>
 
@@ -49,23 +51,11 @@
 
         <StackPanel Orientation="Vertical" 
                     x:Name="GeneralSettingsView">
-
-            <ToggleSwitch x:Uid="GeneralPage_ToggleSwitch_RunAtStartUp"  
-                          Margin="{StaticResource SmallTopMargin}" 
-                          IsOn="{Binding Mode=TwoWay, Path=Startup, Source={StaticResource eventViewModel}}"/>
-
-            <ToggleSwitch x:Uid="GeneralPage_ToggleSwitch_AutoDownloadUpdates" 
-                          Margin="{StaticResource SmallTopMargin}" 
-                          IsOn="{Binding Mode=TwoWay, Path=AutoDownloadUpdates, Source={StaticResource eventViewModel}}"/>
-
-            <TextBlock Text="{Binding Mode=TwoWay, Path=RunningAsAdminText, Source={StaticResource eventViewModel}}"
-                       Style="{StaticResource SettingsGroupTitleStyle}"
-                       Margin="{StaticResource MediumTopMargin}"/>
+            <TextBlock x:Uid="Admin_Mode"
+                       Style="{StaticResource SubtitleTextBlockStyle}"/>
             
-            <ToggleSwitch Margin="{StaticResource SmallTopMargin}" 
-                          Header="{Binding Mode=TwoWay, Path=AlwaysRunAsAdminText, Source={StaticResource eventViewModel}}"
-                          IsEnabled="{Binding Mode=TwoWay, Path=IsElevated, Source={StaticResource eventViewModel}}"
-                          IsOn="{Binding Mode=TwoWay, Path=RunElevated, Source={StaticResource eventViewModel}}"/>
+            <TextBlock Text="{Binding Mode=TwoWay, Path=RunningAsAdminText, Source={StaticResource eventViewModel}}"
+                       Margin="{StaticResource SmallTopMargin}"/>
 
             <Button x:Uid="GeneralPage_RestartAsAdmin_Button"
                     Margin="{StaticResource SmallTopMargin}"
@@ -74,10 +64,23 @@
                     IsEnabled="{Binding Mode=TwoWay, Path=IsAdminButtonEnabled, Source={StaticResource eventViewModel}}"
                     />
 
+            <TextBlock x:Uid="General_RunAsAdminRequired"
+                       Foreground="{ThemeResource SystemControlErrorTextForegroundBrush}"
+                       Visibility="{Binding Mode=TwoWay, Path=IsElevated, Source={StaticResource eventViewModel}, Converter={StaticResource BoolToVisibilityConverter}}"
+                       Margin="0,24,0,-8" />
 
-            <TextBlock x:Uid="Appearancce_GroupSettings"
-                       Style="{StaticResource SettingsGroupTitleStyle}"
-                       Margin="{StaticResource MediumTopMargin}"/>
+            <ToggleSwitch Margin="{StaticResource SmallTopMargin}"
+                          x:Uid="GeneralSettings_AlwaysRunAsAdminText"
+                          IsEnabled="{Binding Mode=TwoWay, Path=IsElevated, Source={StaticResource eventViewModel}}"
+                          IsOn="{Binding Mode=TwoWay, Path=RunElevated, Source={StaticResource eventViewModel}}"/>
+            
+            <HyperlinkButton NavigateUri="https://github.com/microsoft/PowerToys/blob/master/doc/devdocs/run-as-admin-detection.md">
+                <TextBlock x:Uid="GeneralPage_ToggleSwitch_AlwaysRunElevated_Link" />
+            </HyperlinkButton>
+
+
+            <TextBlock x:Uid="ShortcutGuide_Appearance_Behavior"
+                       Style="{StaticResource SettingsGroupTitleStyle}"/>
 
             <muxc:RadioButtons x:Uid="RadioButtons_Name_Theme" Margin="{StaticResource SmallTopMargin}">
                 <RadioButton x:Uid="GeneralPage_Radio_Theme_Dark"
@@ -92,6 +95,40 @@
                              Content="System default"
                              IsChecked="{ Binding Mode=TwoWay, Path=IsSystemThemeRadioButtonChecked, Source={StaticResource eventViewModel}}"/>
             </muxc:RadioButtons>
+            
+            <ToggleSwitch x:Uid="GeneralPage_ToggleSwitch_RunAtStartUp"  
+                          Margin="{StaticResource SmallTopMargin}" 
+                          IsOn="{Binding Mode=TwoWay, Path=Startup, Source={StaticResource eventViewModel}}"/>
+            
+            
+
+            <TextBlock x:Uid="General_Updates"
+                        Style="{StaticResource SettingsGroupTitleStyle}"/>
+            <StackPanel Orientation="Horizontal">
+                <TextBlock Text="Version: " x:Uid="General_Version"  />
+                <HyperlinkButton NavigateUri="https://github.com/microsoft/PowerToys/releases" Margin="4,-6,0,0">
+                    <TextBlock Text="{x:Bind ViewModel.PowerToysVersion }" />
+                </HyperlinkButton>
+            </StackPanel>
+           
+            
+            <Button x:Uid="GeneralPage_CheckForUpdates"
+                    Style="{StaticResource AccentButtonStyle}"
+                    Foreground="White"
+                    Margin="{StaticResource SmallTopMargin}"
+                    Command="{Binding CheckFoUpdatesEventHandler, Source={StaticResource eventViewModel}}"
+                    />
+
+            <TextBlock x:Uid="General_RunAsAdminRequired"
+                       Foreground="{ThemeResource SystemControlErrorTextForegroundBrush}"
+                       Visibility="{Binding Mode=TwoWay, Path=IsElevated, Source={StaticResource eventViewModel}, Converter={StaticResource BoolToVisibilityConverter}}"
+                       Margin="0,24,0,-20" />
+            
+            <ToggleSwitch x:Uid="GeneralPage_ToggleSwitch_AutoDownloadUpdates" 
+                          Margin="{StaticResource MediumTopMargin}"
+                          IsEnabled="{Binding Mode=TwoWay, Path=IsElevated, Source={StaticResource eventViewModel}}"
+                          IsOn="{Binding Mode=TwoWay, Path=AutoDownloadUpdates, Source={StaticResource eventViewModel}}"/>
+            
         </StackPanel>
 
         <StackPanel x:Name="SidePanel"
@@ -104,19 +141,11 @@
                        Style="{StaticResource SettingsGroupTitleStyle}"
                        Margin="{StaticResource XSmallBottomMargin}"/>
 
-            <TextBlock Text="{x:Bind ViewModel.PowerToysVersion }"
-                       FontWeight="Bold"
-                       Margin="{StaticResource SmallTopMargin}" />
+            <HyperlinkButton NavigateUri="https://github.com/microsoft/PowerToys/issues">
+                <TextBlock x:Uid="General_Repository"/>
+            </HyperlinkButton>
 
-            <Button x:Uid="GeneralPage_CheckForUpdates"
-                    Margin="{StaticResource SmallTopMargin}"
-                    Style="{StaticResource AccentButtonStyle}"
-                    Foreground="White"
-                    Command = "{Binding CheckFoUpdatesEventHandler, Source={StaticResource eventViewModel}}"
-                    />
-
-            <HyperlinkButton NavigateUri="https://github.com/microsoft/PowerToys/issues"
-                             Margin="{StaticResource SmallTopMargin}">
+            <HyperlinkButton NavigateUri="https://github.com/microsoft/PowerToys/issues">
                 <TextBlock x:Uid="GeneralPage_ReportAbug"/>
             </HyperlinkButton>
 
@@ -132,9 +161,7 @@
                 <TextBlock x:Uid="OpenSource_Notice"/>
             </HyperlinkButton>
 
-            <HyperlinkButton NavigateUri="https://github.com/microsoft/PowerToys/blob/master/doc/devdocs/run-as-admin-detection.md">
-                <TextBlock x:Uid="GeneralPage_ToggleSwitch_AlwaysRunElevated_Link" />
-            </HyperlinkButton>
+
         </StackPanel>
     </Grid>
 </Page>