More shortcut visual refactoring

2026-02-23 19:49:43 +01:00 · 2025-06-27 16:20:50 +02:00
parent c1564db865
commit 40fc4561ee
10 changed files with 226 additions and 106 deletions
--- a/src/settings-ui/Settings.UI/SettingsXAML/Controls/KeyVisual.xaml
+++ b/src/settings-ui/Settings.UI/SettingsXAML/Controls/KeyVisual.xaml
@@ -6,17 +6,20 @@
    <Style BasedOn="{StaticResource DefaultKeyVisualStyle}" TargetType="controls:KeyVisual" />

    <Style x:Key="DefaultKeyVisualStyle" TargetType="controls:KeyVisual">
-        <Setter Property="MinWidth" Value="12" />
-        <Setter Property="MinHeight" Value="12" />
-        <Setter Property="Background" Value="{ThemeResource ControlFillColorDefaultBrush}" />
+        <Setter Property="MinWidth" Value="16" />
+        <Setter Property="MinHeight" Value="16" />
+        <Setter Property="Background" Value="{ThemeResource SubtleFillColorTransparentBrush}" />
        <Setter Property="Foreground" Value="{ThemeResource TextFillColorPrimaryBrush}" />
-        <Setter Property="BorderBrush" Value="{ThemeResource CardStrokeColorDefaultSolid}" />
+        <Setter Property="BorderBrush" Value="{ThemeResource ControlStrokeColorDefaultBrush}" />
        <Setter Property="BorderThickness" Value="1" />
-        <Setter Property="Padding" Value="4,4,4,4" />
-        <Setter Property="FontWeight" Value="SemiBold" />
-        <Setter Property="CornerRadius" Value="{StaticResource ControlCornerRadius}" />
+        <Setter Property="Padding" Value="4,0,4,0" />
+        <Setter Property="FontWeight" Value="Normal" />
+        <Setter Property="FontSize" Value="12" />
+        <Setter Property="CornerRadius" Value="2" />
        <Setter Property="HorizontalAlignment" Value="Center" />
        <Setter Property="HorizontalContentAlignment" Value="Center" />
+        <Setter Property="VerticalContentAlignment" Value="Center" />
+        <Setter Property="VerticalAlignment" Value="Center" />
        <Setter Property="FontSize" Value="{StaticResource ControlContentThemeFontSize}" />
        <Setter Property="Template">
            <Setter.Value>
@@ -25,7 +28,8 @@
                        x:Name="ContentHolder"
                        Width="{TemplateBinding Width}"
                        Height="{TemplateBinding Height}"
-                        MinHeight="{TemplateBinding FontSize}"
+                        MinWidth="{TemplateBinding MinWidth}"
+                        MinHeight="{TemplateBinding MinHeight}"
                        Padding="{TemplateBinding Padding}"
                        HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
                        VerticalAlignment="{TemplateBinding VerticalAlignment}"
@@ -40,15 +44,16 @@
                            Content="{TemplateBinding Content}"
                            FontSize="{TemplateBinding FontSize}"
                            FontWeight="{TemplateBinding FontWeight}"
-                            Foreground="{TemplateBinding Foreground}" />
+                            Foreground="{TemplateBinding Foreground}"
+                            TextLineBounds="Tight" />
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal" />
                                <VisualState x:Name="Disabled">
                                    <VisualState.Setters>
-                                        <Setter Target="ContentHolder.Background" Value="{ThemeResource ControlFillColorDisabledBrush}" />
+                                        <Setter Target="ContentHolder.Background" Value="{ThemeResource SubtleFillColorTransparentBrush}" />
                                        <Setter Target="ContentHolder.BorderBrush" Value="{ThemeResource CardStrokeColorDefaultSolidBrush}" />
-                                        <Setter Target="KeyPresenter.Foreground" Value="{ThemeResource TextFillColorDisabledBrush}" />
+                                        <Setter Target="KeyPresenter.Foreground" Value="{ThemeResource ControlStrokeColorDefaultBrush}" />
                                    </VisualState.Setters>
                                </VisualState>
                                <VisualState x:Name="Invalid">
@@ -79,6 +84,10 @@
                <ControlTemplate TargetType="controls:KeyVisual">
                    <Grid
                        x:Name="ContentHolder"
+                        Width="{TemplateBinding Width}"
+                        Height="{TemplateBinding Height}"
+                        MinWidth="{TemplateBinding MinWidth}"
+                        MinHeight="{TemplateBinding MinHeight}"
                        Padding="{TemplateBinding Padding}"
                        HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
                        VerticalAlignment="{TemplateBinding VerticalAlignment}"
@@ -93,7 +102,8 @@
                            Content="{TemplateBinding Content}"
                            FontSize="{TemplateBinding FontSize}"
                            FontWeight="{TemplateBinding FontWeight}"
-                            Foreground="{TemplateBinding Foreground}" />
+                            Foreground="{TemplateBinding Foreground}"
+                            TextLineBounds="Tight" />
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal" />
@@ -127,9 +137,13 @@
                <ControlTemplate TargetType="controls:KeyVisual">
                    <Grid
                        x:Name="ContentHolder"
+                        Width="{TemplateBinding Width}"
+                        Height="{TemplateBinding Height}"
+                        MinWidth="{TemplateBinding MinWidth}"
+                        MinHeight="{TemplateBinding MinHeight}"
                        Padding="{TemplateBinding Padding}"
                        HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
-                        VerticalAlignment="Stretch"
+                        VerticalAlignment="{TemplateBinding VerticalAlignment}"
                        Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}"
@@ -141,7 +155,8 @@
                            Content="{TemplateBinding Content}"
                            FontSize="{TemplateBinding FontSize}"
                            FontWeight="{TemplateBinding FontWeight}"
-                            Foreground="{TemplateBinding Foreground}" />
+                            Foreground="{TemplateBinding Foreground}"
+                            TextLineBounds="Tight" />
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal" />
--- a/src/settings-ui/Settings.UI/SettingsXAML/Controls/KeyVisual.xaml.cs
+++ b/src/settings-ui/Settings.UI/SettingsXAML/Controls/KeyVisual.xaml.cs
@@ -92,7 +92,7 @@ namespace Microsoft.PowerToys.Settings.UI.Controls
                }
                else
                {
-                    _keyVisual._keyPresenter.Margin = new Thickness(0, 2, 0, 2);
+                    _keyVisual._keyPresenter.FontSize = _keyVisual.FontSize * 0.8;
                    _keyVisual._keyPresenter.FontFamily = new FontFamily("Segoe Fluent Icons, Segoe MDL2 Assets");
                    switch ((int)_keyVisual.Content)
                    {
@@ -120,7 +120,7 @@ namespace Microsoft.PowerToys.Settings.UI.Controls
                            winIconContainer.HorizontalAlignment = HorizontalAlignment.Center;
                            winIconContainer.VerticalAlignment = VerticalAlignment.Center;

-                            double iconDimensions = _keyVisual.FontSize * 0.9; // Adjust the size of the icon based on the font size
+                            double iconDimensions = _keyVisual.FontSize * 0.8; // Adjust the size of the icon based on the font size
                            winIconContainer.Height = iconDimensions;
                            winIconContainer.Width = iconDimensions;
                            _keyVisual._keyPresenter.Content = winIconContainer;
--- a/src/settings-ui/Settings.UI/SettingsXAML/Controls/ShortcutControl/ShortcutControl.xaml
+++ b/src/settings-ui/Settings.UI/SettingsXAML/Controls/ShortcutControl/ShortcutControl.xaml
@@ -11,45 +11,67 @@
    mc:Ignorable="d">

    <Grid HorizontalAlignment="Right">
-        <StackPanel Orientation="Horizontal">
-            <Button
-                x:Name="EditButton"
-                Padding="0"
-                Click="OpenDialogButton_Click"
-                CornerRadius="8">
-                <Grid Margin="12,6,12,6">
-                    <StackPanel Orientation="Horizontal" Spacing="16">
-                        <ItemsControl
-                            x:Name="PreviewKeysControl"
-                            VerticalAlignment="Center"
-                            IsEnabled="{Binding ElementName=EditButton, Path=IsEnabled}"
-                            IsTabStop="False">
-                            <ItemsControl.ItemsPanel>
-                                <ItemsPanelTemplate>
-                                    <StackPanel Orientation="Horizontal" Spacing="4" />
-                                </ItemsPanelTemplate>
-                            </ItemsControl.ItemsPanel>
-                            <ItemsControl.ItemTemplate>
-                                <DataTemplate>
-                                    <controls:KeyVisual
-                                        VerticalAlignment="Center"
-                                        AutomationProperties.AccessibilityView="Raw"
-                                        Content="{Binding}"
-                                        Padding="12,8,12,8"
-                                        IsTabStop="False"
-                                        Style="{StaticResource AccentKeyVisualStyle}" />
-                                </DataTemplate>
-                            </ItemsControl.ItemTemplate>
-                        </ItemsControl>
-                        <FontIcon
-                            FontFamily="{ThemeResource SymbolThemeFontFamily}"
-                            FontSize="14"
-                            Foreground="{ThemeResource TextFillColorSecondaryBrush}"
-                            Glyph="&#xE70F;" />
-                    </StackPanel>
-                    <!--<TextBlock Text="No shortcut configured" />-->
-                </Grid>
-            </Button>
-        </StackPanel>
+        <Button
+            x:Name="EditButton"
+            Padding="0"
+            Click="OpenDialogButton_Click"
+            Style="{StaticResource SubtleButtonStyle}">
+            <Grid>
+                <ItemsControl
+                    x:Name="PreviewKeysControl"
+                    Margin="2"
+                    VerticalAlignment="Center"
+                    IsEnabled="{Binding ElementName=EditButton, Path=IsEnabled}"
+                    IsTabStop="False"
+                    Visibility="Collapsed">
+                    <ItemsControl.ItemsPanel>
+                        <ItemsPanelTemplate>
+                            <StackPanel Orientation="Horizontal" Spacing="4" />
+                        </ItemsPanelTemplate>
+                    </ItemsControl.ItemsPanel>
+                    <ItemsControl.ItemTemplate>
+                        <DataTemplate>
+                            <controls:KeyVisual
+                                Height="30              "
+                                Padding="12,4,12,4"
+                                VerticalAlignment="Center"
+                                AutomationProperties.AccessibilityView="Raw"
+                                Content="{Binding}"
+                                CornerRadius="{StaticResource ControlCornerRadius}"
+                                FontWeight="SemiBold"
+                                IsTabStop="False"
+                                Style="{StaticResource AccentKeyVisualStyle}" />
+                        </DataTemplate>
+                    </ItemsControl.ItemTemplate>
+                </ItemsControl>
+                <StackPanel
+                    x:Name="PlaceholderPanel"
+                    Padding="8,4"
+                    BorderThickness="1"
+                    CornerRadius="{StaticResource ControlCornerRadius}"
+                    Orientation="Horizontal"
+                    Spacing="8">
+                    <!--<FontIcon
+                        AutomationProperties.AccessibilityView="Raw"
+                        FontSize="12"
+                        Glyph="&#xEDA7;" />-->
+                    <TextBlock
+                        x:Uid="ConfigureShortcutText"
+                        VerticalAlignment="Center"
+                        Foreground="{ThemeResource TextFillColorSecondaryBrush}" />
+                </StackPanel>
+            </Grid>
+        </Button>
+        <VisualStateManager.VisualStateGroups>
+            <VisualStateGroup x:Name="CommonStates">
+                <VisualState x:Name="Normal" />
+                <VisualState x:Name="Configured">
+                    <VisualState.Setters>
+                        <Setter Target="PlaceholderPanel.Visibility" Value="Collapsed" />
+                        <Setter Target="PreviewKeysControl.Visibility" Value="Visible" />
+                    </VisualState.Setters>
+                </VisualState>
+            </VisualStateGroup>
+        </VisualStateManager.VisualStateGroups>
    </Grid>
 </UserControl>
--- a/src/settings-ui/Settings.UI/SettingsXAML/Controls/ShortcutControl/ShortcutControl.xaml.cs
+++ b/src/settings-ui/Settings.UI/SettingsXAML/Controls/ShortcutControl/ShortcutControl.xaml.cs
@@ -3,7 +3,6 @@
 // See the LICENSE file in the project root for more information.

 using System;
-
 using CommunityToolkit.WinUI;
 using Microsoft.PowerToys.Settings.UI.Helpers;
 using Microsoft.PowerToys.Settings.UI.Library;
@@ -11,6 +10,7 @@ using Microsoft.UI.Xaml;
 using Microsoft.UI.Xaml.Automation;
 using Microsoft.UI.Xaml.Controls;
 using Microsoft.UI.Xaml.Input;
+using Microsoft.Windows.ApplicationModel.Resources;
 using Windows.System;

 namespace Microsoft.PowerToys.Settings.UI.Controls
@@ -36,6 +36,8 @@ namespace Microsoft.PowerToys.Settings.UI.Controls

        public static readonly DependencyProperty AllowDisableProperty = DependencyProperty.Register("AllowDisable", typeof(bool), typeof(ShortcutControl), new PropertyMetadata(false, OnAllowDisableChanged));

+        private static ResourceLoader resourceLoader = Helpers.ResourceLoaderInstance.ResourceLoader;
+
        private static void OnAllowDisableChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            var me = d as ShortcutControl;
@@ -50,8 +52,6 @@ namespace Microsoft.PowerToys.Settings.UI.Controls
                return;
            }

-            var resourceLoader = Helpers.ResourceLoaderInstance.ResourceLoader;
-
            var newValue = (bool)(e?.NewValue ?? false);

            var text = newValue ? resourceLoader.GetString("Activation_Shortcut_With_Disable_Description") : resourceLoader.GetString("Activation_Shortcut_Description");
@@ -103,8 +103,7 @@ namespace Microsoft.PowerToys.Settings.UI.Controls
                {
                    hotkeySettings = value;
                    SetValue(HotkeySettingsProperty, value);
-                    PreviewKeysControl.ItemsSource = HotkeySettings.GetKeysList();
-                    AutomationProperties.SetHelpText(EditButton, HotkeySettings.ToString());
+                    SetKeys();
                    c.Keys = HotkeySettings.GetKeysList();
                }
            }
@@ -118,8 +117,6 @@ namespace Microsoft.PowerToys.Settings.UI.Controls
            this.Unloaded += ShortcutControl_Unloaded;
            this.Loaded += ShortcutControl_Loaded;

-            var resourceLoader = Helpers.ResourceLoaderInstance.ResourceLoader;
-
            // We create the Dialog in C# because doing it in XAML is giving WinUI/XAML Island bugs when using dark theme.
            shortcutDialog = new ContentDialog
            {
@@ -433,11 +430,9 @@ namespace Microsoft.PowerToys.Settings.UI.Controls
            hotkeySettings = null;

            SetValue(HotkeySettingsProperty, hotkeySettings);
-            PreviewKeysControl.ItemsSource = HotkeySettings.GetKeysList();
+            SetKeys();

            lastValidSettings = hotkeySettings;
-
-            AutomationProperties.SetHelpText(EditButton, HotkeySettings.ToString());
            shortcutDialog.Hide();
        }

@@ -448,8 +443,7 @@ namespace Microsoft.PowerToys.Settings.UI.Controls
                HotkeySettings = lastValidSettings with { };
            }

-            PreviewKeysControl.ItemsSource = hotkeySettings.GetKeysList();
-            AutomationProperties.SetHelpText(EditButton, HotkeySettings.ToString());
+            SetKeys();
            shortcutDialog.Hide();
        }

@@ -462,9 +456,7 @@ namespace Microsoft.PowerToys.Settings.UI.Controls

            var empty = new HotkeySettings();
            HotkeySettings = empty;
-
-            PreviewKeysControl.ItemsSource = HotkeySettings.GetKeysList();
-            AutomationProperties.SetHelpText(EditButton, HotkeySettings.ToString());
+            SetKeys();
            shortcutDialog.Hide();
        }

@@ -525,5 +517,22 @@ namespace Microsoft.PowerToys.Settings.UI.Controls
            Dispose(disposing: true);
            GC.SuppressFinalize(this);
        }
+
+        private void SetKeys()
+        {
+            var keys = HotkeySettings.GetKeysList();
+
+            if (keys != null && keys.Count > 0)
+            {
+                VisualStateManager.GoToState(this, "Configured", true);
+                PreviewKeysControl.ItemsSource = keys;
+                AutomationProperties.SetHelpText(EditButton, HotkeySettings.ToString());
+            }
+            else
+            {
+                VisualStateManager.GoToState(this, "Normal", true);
+                AutomationProperties.SetHelpText(EditButton, resourceLoader.GetString("ConfigureShortcut"));
+            }
+        }
    }
 }
--- a/src/settings-ui/Settings.UI/SettingsXAML/Controls/ShortcutControl/ShortcutDialogContentControl.xaml
+++ b/src/settings-ui/Settings.UI/SettingsXAML/Controls/ShortcutControl/ShortcutDialogContentControl.xaml
@@ -34,12 +34,16 @@
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <controls:KeyVisual
-                        Height="56" Padding="20,8,20,8"
+                        Height="56"
+                        Padding="20,8,20,8"
                        AutomationProperties.AccessibilityView="Raw"
                        Content="{Binding}"
-                        FontSize="20" Style="{StaticResource AccentKeyVisualStyle}"
+                        CornerRadius="{StaticResource ControlCornerRadius}"
+                        FontSize="19"
+                        FontWeight="SemiBold"
                        IsInvalid="{Binding ElementName=ShortcutContentControl, Path=IsError, Mode=OneWay}"
-                        IsTabStop="False" />
+                        IsTabStop="False"
+                        Style="{StaticResource AccentKeyVisualStyle}" />
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
@@ -51,14 +55,12 @@
            Orientation="Vertical"
            Spacing="8">
            <Grid Height="62">
-
                <InfoBar
                    x:Uid="InvalidShortcut"
                    IsClosable="False"
                    IsOpen="{Binding ElementName=ShortcutContentControl, Path=IsError, Mode=OneWay}"
                    IsTabStop="{Binding ElementName=ShortcutContentControl, Path=IsError, Mode=OneWay}"
                    Severity="Error" />
-
                <InfoBar
                    x:Uid="WarningShortcutAltGr"
                    IsClosable="False"
--- a/src/settings-ui/Settings.UI/SettingsXAML/Themes/Generic.xaml
+++ b/src/settings-ui/Settings.UI/SettingsXAML/Themes/Generic.xaml
@@ -2,7 +2,7 @@

    <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="ms-appx:///SettingsXAML/Controls/SettingsGroup/SettingsGroup.xaml" />
-        <ResourceDictionary Source="ms-appx:///SettingsXAML/Controls/IsEnabledTextBlock/IsEnabledTextBlock.xaml" />
-        <ResourceDictionary Source="ms-appx:///SettingsXAML/Controls/FlyoutMenuButton/FlyoutMenuButton.xaml" />
+        <ResourceDictionary Source="ms-appx:///SettingsXAML/Controls/IsEnabledTextBlock.xaml" />
+        <ResourceDictionary Source="ms-appx:///SettingsXAML/Controls/FlyoutMenuButton.xaml" />
    </ResourceDictionary.MergedDictionaries>
 </ResourceDictionary>
--- a/src/settings-ui/Settings.UI/SettingsXAML/Views/DashboardPage.xaml
+++ b/src/settings-ui/Settings.UI/SettingsXAML/Views/DashboardPage.xaml
@@ -42,18 +42,16 @@
                    ItemsSource="{x:Bind Shortcut, Mode=OneWay}">
                    <ItemsControl.ItemsPanel>
                        <ItemsPanelTemplate>
-                            <StackPanel Orientation="Horizontal" Spacing="2" />
+                            <StackPanel Orientation="Horizontal" Spacing="4" />
                        </ItemsPanelTemplate>
                    </ItemsControl.ItemsPanel>
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <controls:KeyVisual
-                                Padding="8,4,8,4"
                                VerticalAlignment="Center"
                                AutomationProperties.AccessibilityView="Raw"
                                Content="{Binding}"
                                FontSize="12"
-                                Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                                IsTabStop="False" />
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
@@ -130,11 +128,11 @@
                        Grid.Column="1"
                        VerticalAlignment="Center"
                        Orientation="Vertical">
-                        <TextBlock FontWeight="SemiBold" Text="Learn what's new" />
+                        <TextBlock x:Uid="LearnWhatsNew" FontWeight="SemiBold" />
                        <TextBlock
                            Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                            Style="{StaticResource CaptionTextBlockStyle}"
-                            Text="Version 0.91" />
+                            Text="{x:Bind ViewModel.PowerToysVersion, Mode=OneWay}" />
                    </StackPanel>
                </Grid>
            </Button>
@@ -143,8 +141,8 @@
                Grid.Column="1"
                Orientation="Horizontal"
                Spacing="16">
+                <!-- // TO DO: Shortcut conflicts
                <Button Style="{StaticResource SubtleButtonStyle}">
-                    <!--  Visibility="{x:Bind ViewModel.UpdateAvailable, Mode=OneWay}"  -->
                    <Grid ColumnSpacing="16">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" />
@@ -163,28 +161,74 @@
                                Text="2 conflicts found" />
                        </StackPanel>
                    </Grid>
-                </Button>
-                <Button Click="SWVersionButtonClicked" Style="{StaticResource SubtleButtonStyle}">
-                    <!--  Visibility="{x:Bind ViewModel.UpdateAvailable, Mode=OneWay}"  -->
+                </Button>-->
+                <Button
+                    Click="SWVersionButtonClicked"
+                    Style="{StaticResource SubtleButtonStyle}"
+                    Visibility="{x:Bind ViewModel.UpdateAvailable, Mode=OneWay}">
                    <Grid ColumnSpacing="16">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>
-                        <FontIcon
-                            AutomationProperties.AccessibilityView="Raw"
-                            FontSize="20"
-                            Foreground="{ThemeResource AccentTextFillColorTertiaryBrush}"
-                            Glyph="&#xE895;" />
+                        <Border
+                            Width="20"
+                            Height="20"
+                            CornerRadius="10">
+                            <Border.Background>
+                                <LinearGradientBrush StartPoint="0,0" EndPoint="0.5,1">
+                                    <GradientStop Offset="0.0" Color="#239DE0" />
+                                    <GradientStop Offset="1.0" Color="#037CD6" />
+                                </LinearGradientBrush>
+                            </Border.Background>
+                            <FontIcon
+                                AutomationProperties.AccessibilityView="Raw"
+                                FontSize="11"
+                                Foreground="White"
+                                Glyph="&#xE895;" />
+                        </Border>
                        <StackPanel Grid.Column="1" Orientation="Vertical">
                            <TextBlock x:Uid="UpdateAvailable" FontWeight="SemiBold" />
-                            <TextBlock
-                                x:Uid="LearnMore"
-                                Foreground="{ThemeResource TextFillColorSecondaryBrush}"
-                                Style="{StaticResource CaptionTextBlockStyle}" />
+                            <TextBlock Foreground="{ThemeResource TextFillColorSecondaryBrush}" Style="{StaticResource CaptionTextBlockStyle}">
+                                <Run x:Uid="GeneralVersion" />
+                                <Run Text="{x:Bind ViewModel.UpdateSettingsConfig.NewVersion, Mode=OneWay}" />
+                            </TextBlock>
                        </StackPanel>
                    </Grid>
                </Button>
+                <Grid
+                    Padding="0,0,4,0"
+                    VerticalAlignment="Center"
+                    ColumnSpacing="16"
+                    Visibility="{x:Bind ViewModel.UpdateAvailable, Converter={StaticResource ReverseBoolToVisibilityConverter}, Mode=OneWay}">
+                    <Grid.ColumnDefinitions>
+                        <ColumnDefinition Width="Auto" />
+                        <ColumnDefinition Width="*" />
+                    </Grid.ColumnDefinitions>
+                    <Border
+                        Width="20"
+                        Height="20"
+                        CornerRadius="10">
+                        <Border.Background>
+                            <LinearGradientBrush StartPoint="0,0" EndPoint="0.5,1">
+                                <GradientStop Offset="0.0" Color="#6FB538" />
+                                <GradientStop Offset="1.0" Color="#397A24" />
+                            </LinearGradientBrush>
+                        </Border.Background>
+                        <FontIcon
+                            AutomationProperties.AccessibilityView="Raw"
+                            FontSize="11"
+                            Foreground="White"
+                            Glyph="&#xE73E;" />
+                    </Border>
+                    <StackPanel Grid.Column="1" Orientation="Vertical">
+                        <TextBlock x:Uid="YoureUpToDate" FontWeight="SemiBold" />
+                        <TextBlock Foreground="{ThemeResource TextFillColorSecondaryBrush}" Style="{StaticResource CaptionTextBlockStyle}">
+                            <Run x:Uid="General_VersionLastChecked" />
+                            <Run Text="{x:Bind ViewModel.UpdateSettingsConfig.LastCheckedDateLocalized, Mode=OneWay}" />
+                        </TextBlock>
+                    </StackPanel>
+                </Grid>
            </StackPanel>
        </Grid>

@@ -302,9 +346,6 @@
                        Padding="0"
                        VerticalAlignment="Top"
                        DividerVisibility="Collapsed">
-                        <!--<controls:Card.TitleContent>
-                            <Button Content="Click" />
-                        </controls:Card.TitleContent>-->
                        <ItemsRepeater
                            x:Name="DashboardView"
                            Grid.Row="2"
@@ -372,8 +413,6 @@
                                            OffContent=" "
                                            OnContent=" " />
                                    </tkcontrols:SettingsCard>
-
-
                                </DataTemplate>
                            </ItemsRepeater.ItemTemplate>
                        </ItemsRepeater>
--- a/src/settings-ui/Settings.UI/SettingsXAML/Views/KeyboardManagerPage.xaml
+++ b/src/settings-ui/Settings.UI/SettingsXAML/Views/KeyboardManagerPage.xaml
@@ -25,11 +25,18 @@
        </Style>

        <DataTemplate x:Key="OriginalKeyTemplate" x:DataType="x:String">
-            <controls:KeyVisual Content="{Binding}" />
+            <controls:KeyVisual
+                Padding="8"
+                Content="{Binding}"
+                CornerRadius="{StaticResource ControlCornerRadius}" />
        </DataTemplate>

        <DataTemplate x:Key="RemappedKeyTemplate" x:DataType="x:String">
-            <controls:KeyVisual Content="{Binding}" />
+            <controls:KeyVisual
+                Padding="8"
+                Content="{Binding}"
+                CornerRadius="{StaticResource ControlCornerRadius}"
+                Style="{StaticResource AccentKeyVisualStyle}" />
        </DataTemplate>

        <!--<DataTemplate x:Name="KeysListViewTemplate" x:DataType="Lib:KeysDataModel">
--- a/src/settings-ui/Settings.UI/Strings/en-us/Resources.resw
+++ b/src/settings-ui/Settings.UI/Strings/en-us/Resources.resw
@@ -4947,7 +4947,7 @@ To record a specific window, enter the hotkey with the Alt key in the opposite m
  <data name="CmdPal_ShortDescription" xml:space="preserve">
    <value>A better quick launcher</value>
  </data>
-   <data name="CmdPal_ActivationDescription" xml:space="preserve">
+  <data name="CmdPal_ActivationDescription" xml:space="preserve">
    <value>Launch Command Palette</value>
  </data>
  <data name="CmdPal_Enable_CmdPal.Header" xml:space="preserve">
@@ -5055,4 +5055,19 @@ To record a specific window, enter the hotkey with the Alt key in the opposite m
  <data name="BugReportUnderConstruction" xml:space="preserve">
    <value>Bug report package is being created</value>
  </data>
+  <data name="YoureUpToDate.Text" xml:space="preserve">
+    <value>You're up to date</value>
+  </data>
+  <data name="GeneralVersion.Text" xml:space="preserve">
+    <value>Version</value>
+  </data>
+  <data name="LearnWhatsNew.Text" xml:space="preserve">
+    <value>Learn what's new</value>
+  </data>
+  <data name="ConfigureShortcut" xml:space="preserve">
+    <value>Configure shortcut</value>
+  </data>
+  <data name="ConfigureShortcutText.Text" xml:space="preserve">
+    <value>Configure shortcut</value>
+  </data>
 </root>
--- a/src/settings-ui/Settings.UI/ViewModels/DashboardViewModel.cs
+++ b/src/settings-ui/Settings.UI/ViewModels/DashboardViewModel.cs
@@ -15,6 +15,7 @@ using Microsoft.PowerToys.Settings.UI.Helpers;
 using Microsoft.PowerToys.Settings.UI.Library;
 using Microsoft.PowerToys.Settings.UI.Library.Helpers;
 using Microsoft.PowerToys.Settings.UI.Library.Interfaces;
+using Microsoft.PowerToys.Settings.UI.Library.Utilities;
 using Microsoft.PowerToys.Settings.UI.Services;
 using Microsoft.PowerToys.Settings.UI.Views;
 using Microsoft.UI.Xaml;
@@ -35,8 +36,18 @@ namespace Microsoft.PowerToys.Settings.UI.ViewModels

        public ObservableCollection<DashboardListItem> ActionModules { get; set; } = new ObservableCollection<DashboardListItem>();

+        public string PowerToysVersion
+        {
+            get
+            {
+                return Helper.GetProductVersion();
+            }
+        }
+
        public bool UpdateAvailable { get; set; }

+        public UpdatingSettings UpdateSettingsConfig { get; set; }
+
        private ISettingsRepository<GeneralSettings> _settingsRepository;
        private GeneralSettings generalSettingsConfig;
        private Windows.ApplicationModel.Resources.ResourceLoader resourceLoader = Helpers.ResourceLoaderInstance.ResourceLoader;
@@ -58,8 +69,8 @@ namespace Microsoft.PowerToys.Settings.UI.ViewModels

            GetShortcutModules();

-            UpdatingSettings updatingSettingsConfig = UpdatingSettings.LoadSettings();
-            UpdateAvailable = updatingSettingsConfig != null && (updatingSettingsConfig.State == UpdatingSettings.UpdatingState.ReadyToInstall || updatingSettingsConfig.State == UpdatingSettings.UpdatingState.ReadyToDownload);
+            UpdateSettingsConfig = UpdatingSettings.LoadSettings();
+            UpdateAvailable = UpdateSettingsConfig != null && (UpdateSettingsConfig.State == UpdatingSettings.UpdatingState.ReadyToInstall || UpdateSettingsConfig.State == UpdatingSettings.UpdatingState.ReadyToDownload);
        }

        private void AddDashboardListItem(ModuleType moduleType)