[Settings] Settings UX enhancements (#12912)

* Update Colors.xaml

* Added warning icon to Run plugin

* Removed redundant name

* Added border

* Removed unused converter

* Update GeneralPage.xaml

Co-authored-by: Niels Laute <niels9001@hotmail.com>

src/settings-ui/Microsoft.PowerToys.Settings.UI/Styles/Button.xaml

@@ -29,7 +29,7 @@
         <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
         <Setter Property="ManipulationMode" Value="System,TranslateX" />
         <Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}" />
-        <Setter Property="MinWidth" Value="{StaticResource ToggleSwitchThemeMinWidth}"/>
+       
         <Setter Property="FocusVisualMargin" Value="-7,-3,-7,-3" />
 
         <Setter Property="Template">

src/settings-ui/Microsoft.PowerToys.Settings.UI/Themes/Colors.xaml

@@ -7,6 +7,8 @@
             <StaticResource x:Key="CardBackgroundBrush" ResourceKey="CardBackgroundFillColorDefaultBrush" />
             <StaticResource x:Key="CardBorderBrush" ResourceKey="CardStrokeColorDefaultBrush" />
             <StaticResource x:Key="CardPrimaryForegroundBrush" ResourceKey="TextFillColorPrimaryBrush" />
+            <SolidColorBrush x:Key="InfoBarInformationalSeverityBackgroundBrush" Color="#FF34424d"/>
+            <Color x:Key="InfoBarInformationalSeverityIconBackground">#FF5fb2f2</Color>
             <Thickness x:Key="CardBorderThickness">1</Thickness>
         </ResourceDictionary>
 
@@ -14,6 +16,8 @@
             <StaticResource x:Key="CardBackgroundBrush" ResourceKey="CardBackgroundFillColorDefaultBrush" />
             <StaticResource x:Key="CardBorderBrush" ResourceKey="CardStrokeColorDefaultBrush" />
             <StaticResource x:Key="CardPrimaryForegroundBrush" ResourceKey="TextFillColorPrimaryBrush" />
+            <SolidColorBrush x:Key="InfoBarInformationalSeverityBackgroundBrush" Color="#FFd3e7f7"/>
+            <Color x:Key="InfoBarInformationalSeverityIconBackground">#FF0063b1</Color>
             <Thickness x:Key="CardBorderThickness">1</Thickness>
         </ResourceDictionary>
 
@@ -21,6 +25,8 @@
             <StaticResource x:Key="CardBackgroundBrush" ResourceKey="SystemColorButtonFaceColorBrush" />
             <StaticResource x:Key="CardBorderBrush" ResourceKey="SystemColorButtonTextColorBrush" />
             <StaticResource x:Key="CardPrimaryForegroundBrush" ResourceKey="SystemColorButtonTextColorBrush" />
+            <SolidColorBrush x:Key="InfoBarInformationalSeverityBackgroundBrush" Color="#FF34424d"/>
+            <Color x:Key="InfoBarInformationalSeverityIconBackground">#FF5fb2f2</Color>
             <Thickness x:Key="CardBorderThickness">2</Thickness>
         </ResourceDictionary>
     </ResourceDictionary.ThemeDictionaries>

src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/GeneralPage.xaml

@@ -66,7 +66,7 @@
                     <!-- New version available -->
                     <muxc:InfoBar x:Uid="General_NewVersionAvailable"
                                   IsClosable="False"
-                                  Severity="Success"
+                                  Severity="Informational"
                                   IsOpen="{Binding PowerToysUpdatingState, Mode=OneWay, Converter={StaticResource UpdateStateToBoolConverter}, ConverterParameter=ReadyToDownload}"
                                   Message="{Binding PowerToysNewAvailableVersion, Mode=OneWay}">
                         <muxc:InfoBar.Content>

src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/KeyboardManagerPage.xaml

@@ -12,6 +12,7 @@
 
     <Page.Resources>
         <local:VisibleIfNotEmpty x:Key="visibleIfNotEmptyConverter" />
+      
         <Style TargetType="ListViewItem" x:Name="KeysListViewContainerStyle">
             <Setter Property="IsTabStop" Value="False"/>
         </Style>
@@ -122,7 +123,7 @@
                                                   IsTabStop="False">
                                         <ItemsControl.ItemsPanel>
                                             <ItemsPanelTemplate>
-                                                <StackPanel Orientation="Horizontal"/>
+                                                <StackPanel Orientation="Horizontal" Spacing="4"/>
                                             </ItemsPanelTemplate>
                                         </ItemsControl.ItemsPanel>
                                     </ItemsControl>
@@ -138,7 +139,7 @@
                                                   IsTabStop="False">
                                         <ItemsControl.ItemsPanel>
                                             <ItemsPanelTemplate>
-                                                <StackPanel Orientation="Horizontal"/>
+                                                <StackPanel Orientation="Horizontal" Spacing="4"/>
                                             </ItemsPanelTemplate>
                                         </ItemsControl.ItemsPanel>
                                     </ItemsControl>
@@ -201,9 +202,21 @@
                                         </ItemsControl.ItemsPanel>
                                     </ItemsControl>
 
-                                    <TextBlock Margin="8,0,0,0" Style="{StaticResource SecondaryTextStyle}" VerticalAlignment="Center">
+                                    <StackPanel Orientation="Horizontal">
-                                        <Run Text="{x:Bind TargetApp}" FontWeight="SemiBold"/>
+                                        <Border VerticalAlignment="Center"
-                                    </TextBlock>
+                                                Padding="12,4,12,6"
+                                                Margin="16,0,0,0"
+                                                CornerRadius="12">
+                                            <Border.Background>
+                                                <SolidColorBrush Color="{ThemeResource SystemAccentColorLight3}"
+                                                                 Opacity="0.3"/>
+                                            </Border.Background>
+                                            <TextBlock Text="{x:Bind TargetApp}"
+                                                       Foreground="{ThemeResource SystemAccentColorDark1}"
+                                                       FontWeight="SemiBold"
+                                                       FontSize="12" />
+                                        </Border>
+                                    </StackPanel>
                                 </StackPanel>
                             </DataTemplate>
                         </ListView.ItemTemplate>

src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/PowerLauncherPage.xaml

@@ -197,8 +197,30 @@
                                                         Height="20" />
                                                 </controls:Setting.Icon>
                                                 <controls:Setting.ActionContent>
-                                                    <ToggleSwitch x:Uid="PowerLauncher_EnablePluginToggle"
+                                                    <StackPanel Orientation="Horizontal" Spacing="16">
-                                                                  IsOn="{x:Bind Path=Disabled, Converter={StaticResource BoolNegationConverter}, Mode=TwoWay}"/>
+                                                        <!-- To do: replace with InfoBadge once we move towards WinUI 2.7 -->
+                                                        <Grid VerticalAlignment="Center"
+                                                              AutomationProperties.AccessibilityView="Raw"
+                                                              Visibility="{x:Bind ShowNotAccessibleWarning}">
+                                                            <TextBlock x:Name="IconBackground"
+                                                                        VerticalAlignment="Center"
+                                                                       FontSize="{StaticResource InfoBarIconFontSize}"
+                                                                       Text="{StaticResource InfoBarIconBackgroundGlyph}"
+                                                                       Foreground="{ThemeResource InfoBarErrorSeverityIconBackground}"
+                                                                       FontFamily="{ThemeResource SymbolThemeFontFamily}"
+                                                                       AutomationProperties.AccessibilityView="Raw" />
+                                                            
+                                                            <TextBlock x:Name="StandardIcon"
+                                                                       FontSize="{StaticResource InfoBarIconFontSize}"
+                                                                       Text="{StaticResource InfoBarErrorIconGlyph}"
+                                                                       Foreground="{ThemeResource InfoBarErrorSeverityIconForeground}"
+                                                                       FontFamily="{ThemeResource SymbolThemeFontFamily}"/>
+                                                        </Grid>
+
+                                                        <ToggleSwitch x:Uid="PowerLauncher_EnablePluginToggle"
+                                                                      IsOn="{x:Bind Path=Disabled, Converter={StaticResource BoolNegationConverter}, Mode=TwoWay}"/>
+                                                    </StackPanel>
+                                                
                                                 </controls:Setting.ActionContent>
                                             </controls:Setting>
                                         </controls:SettingExpander.Header>
@@ -206,12 +228,17 @@
                                             <StackPanel>
                                                 <controls:Setting x:Uid="PowerLauncher_ActionKeyword" Style="{StaticResource ExpanderContentSettingStyle}" IsEnabled="{x:Bind Enabled, Mode=OneWay}">
                                                     <controls:Setting.ActionContent>
-                                                        <TextBox Text="{x:Bind Path=ActionKeyword, Mode=TwoWay}"
+                                                        <TextBox Text="{x:Bind Path=ActionKeyword, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
                                                                  MinWidth="{StaticResource SettingActionControlMinWidth}" />
                                                     </controls:Setting.ActionContent>
                                                 </controls:Setting>
-                                                <muxc:InfoBar Severity="Warning" x:Uid="Run_NotAccessibleWarning" IsOpen="{x:Bind ShowNotAccessibleWarning}" IsClosable="False" />
+                                                <muxc:InfoBar Severity="Error" x:Uid="Run_NotAccessibleWarning"
-                                                <muxc:InfoBar Severity="Error" x:Uid="Run_NotAllowedActionKeyword" IsOpen="{x:Bind ShowNotAllowedKeywordWarning}" IsClosable="False" />
+                                                              IsOpen="{x:Bind ShowNotAccessibleWarning}"
+                                                              IsClosable="False" />
+                                                <muxc:InfoBar Severity="Error"
+                                                              x:Uid="Run_NotAllowedActionKeyword"
+                                                              IsOpen="{x:Bind ShowNotAllowedKeywordWarning}"
+                                                              IsClosable="False" />
                                                 <Rectangle Style="{StaticResource ExpanderSeparatorStyle}" />
                                                 <CheckBox x:Uid="PowerLauncher_IncludeInGlobalResult"
                                                           IsChecked="{x:Bind Path=IsGlobal, Mode=TwoWay}"