Shortcut control visual tweaks (#42302)

## Summary of the Pull Request

Small design tweaks, resolving a visual glitch where the bottom border
of wasn't displayed correctly, and looked jagged on higher res displays

Before vs after

<img width="654" height="450" alt="image"
src="https://github.com/user-attachments/assets/68ab3d24-d18b-4fae-9ffa-3548ce440798"
/>


<!-- Please review the items on the PR checklist before submitting-->
## PR Checklist

- [ ] Closes: #xxx
- [ ] **Communication:** I've discussed this with core contributors
already. If the work hasn't been agreed, this work might be rejected
- [ ] **Tests:** Added/updated and all pass
- [ ] **Localization:** All end-user-facing strings can be localized
- [ ] **Dev docs:** Added/updated
- [ ] **New binaries:** Added on the required places
- [ ] [JSON for
signing](https://github.com/microsoft/PowerToys/blob/main/.pipelines/ESRPSigning_core.json)
for new binaries
- [ ] [WXS for
installer](https://github.com/microsoft/PowerToys/blob/main/installer/PowerToysSetup/Product.wxs)
for new binaries and localization folder
- [ ] [YML for CI
pipeline](https://github.com/microsoft/PowerToys/blob/main/.pipelines/ci/templates/build-powertoys-steps.yml)
for new test projects
- [ ] [YML for signed
pipeline](https://github.com/microsoft/PowerToys/blob/main/.pipelines/release.yml)
- [ ] **Documentation updated:** If checked, please file a pull request
on [our docs
repo](https://github.com/MicrosoftDocs/windows-uwp/tree/docs/hub/powertoys)
and link it here: #xxx

<!-- Provide a more detailed description of the PR, other things fixed,
or any additional comments/features here -->
## Detailed Description of the Pull Request / Additional comments

<!-- Describe how you validated the behavior. Add automated tests
wherever possible, but list manual validation steps taken as well -->
## Validation Steps Performed

src/settings-ui/Settings.UI/SettingsXAML/Controls/KeyVisual/KeyVisual.xaml

@@ -10,10 +10,10 @@
         <Setter Property="AutomationProperties.AccessibilityView" Value="Raw" />
         <Setter Property="IsTabStop" Value="False" />
         <Setter Property="MinHeight" Value="16" />
-        <Setter Property="Background" Value="{ThemeResource SubtleFillColorTransparentBrush}" />
+        <Setter Property="Background" Value="{ThemeResource CardBackgroundFillColorSecondaryBrush}" />
         <Setter Property="Foreground" Value="{ThemeResource TextFillColorPrimaryBrush}" />
-        <Setter Property="BorderBrush" Value="{ThemeResource ControlStrokeColorDefaultBrush}" />
+        <Setter Property="BorderBrush" Value="{ThemeResource CardStrokeColorDefaultBrush}" />
-        <Setter Property="BorderThickness" Value="1" />
+        <Setter Property="BorderThickness" Value="{ThemeResource ButtonBorderThemeThickness}" />
         <Setter Property="Padding" Value="4,4,4,4" />
         <Setter Property="FontWeight" Value="Normal" />
         <Setter Property="FontSize" Value="14" />
@@ -33,6 +33,7 @@
                         HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
                         VerticalAlignment="{TemplateBinding VerticalAlignment}"
                         Background="{TemplateBinding Background}"
+                        BackgroundSizing="{TemplateBinding BackgroundSizing}"
                         BorderBrush="{TemplateBinding BorderBrush}"
                         BorderThickness="{TemplateBinding BorderThickness}"
                         CornerRadius="{TemplateBinding CornerRadius}">
@@ -145,7 +146,6 @@
         x:Key="AccentKeyVisualStyle"
         BasedOn="{StaticResource DefaultKeyVisualStyle}"
         TargetType="local:KeyVisual">
-
         <Setter Property="Background" Value="{ThemeResource AccentFillColorDefaultBrush}" />
         <Setter Property="Foreground" Value="{ThemeResource TextOnAccentFillColorPrimaryBrush}" />
         <Setter Property="BorderBrush" Value="{ThemeResource AccentControlElevationBorderBrush}" />
@@ -161,6 +161,7 @@
                         VerticalAlignment="{TemplateBinding VerticalAlignment}"
                         AutomationProperties.AccessibilityView="Raw"
                         Background="{TemplateBinding Background}"
+                        BackgroundSizing="{TemplateBinding BackgroundSizing}"
                         BorderBrush="{TemplateBinding BorderBrush}"
                         BorderThickness="{TemplateBinding BorderThickness}"
                         CornerRadius="{TemplateBinding CornerRadius}">

src/settings-ui/Settings.UI/SettingsXAML/Controls/ShortcutControl/ShortcutControl.xaml

@@ -21,7 +21,7 @@
             HorizontalAlignment="Right"
             Click="OpenDialogButton_Click"
             Style="{StaticResource SubtleButtonStyle}">
-            <StackPanel Orientation="Horizontal" Spacing="8">
+            <StackPanel Orientation="Horizontal" Spacing="4">
                 <ItemsControl
                     x:Name="PreviewKeysControl"
                     Margin="2"
@@ -37,12 +37,12 @@
                     <ItemsControl.ItemTemplate>
                         <DataTemplate>
                             <controls:KeyVisual
-                                Padding="12,8,12,8"
+                                MinWidth="36"
+                                Padding="8,8,8,8"
                                 VerticalAlignment="Center"
                                 AutomationProperties.AccessibilityView="Raw"
                                 Content="{Binding}"
                                 CornerRadius="{StaticResource ControlCornerRadius}"
-                                FontWeight="SemiBold"
                                 IsTabStop="False"
                                 State="{Binding ElementName=LayoutRoot, Path=KeyVisualShouldShowConflict, Mode=OneWay, Converter={StaticResource BoolToKeyVisualStateConverter}, ConverterParameter=Warning}"
                                 Style="{StaticResource AccentKeyVisualStyle}" />
@@ -57,24 +57,28 @@
                     CornerRadius="{StaticResource ControlCornerRadius}"
                     Orientation="Horizontal"
                     Spacing="8">
-                    <!--<FontIcon
+                    <controls:IsEnabledTextBlock
-                        AutomationProperties.AccessibilityView="Raw"
+                        VerticalAlignment="Center"
+                        FontFamily="Segoe Fluent Icons"
                         FontSize="12"
-                        Glyph="&#xEDA7;" />-->
+                        Text="&#xE710;" />
-                    <TextBlock
+                    <controls:IsEnabledTextBlock
                         x:Uid="ConfigureShortcutText"
+                        Margin="0,-1,0,0"
                         VerticalAlignment="Center"
                         Foreground="{ThemeResource TextFillColorSecondaryBrush}" />
                 </StackPanel>
                 <controls:IsEnabledTextBlock
+                    x:Name="EditIcon"
                     Margin="0,0,4,0"
                     VerticalAlignment="Center"
                     AutomationProperties.AccessibilityView="Raw"
                     AutomationProperties.Name=""
                     FontFamily="{ThemeResource SymbolThemeFontFamily}"
-                    FontSize="14"
+                    FontSize="12"
                     Foreground="{ThemeResource TextFillColorSecondaryBrush}"
-                    Text="&#xE70F;" />
+                    Text="&#xE70F;"
+                    Visibility="Collapsed" />
             </StackPanel>
         </Button>
         <VisualStateManager.VisualStateGroups>
@@ -84,6 +88,7 @@
                     <VisualState.Setters>
                         <Setter Target="PlaceholderPanel.Visibility" Value="Collapsed" />
                         <Setter Target="PreviewKeysControl.Visibility" Value="Visible" />
+                        <Setter Target="EditIcon.Visibility" Value="Visible" />
                     </VisualState.Setters>
                 </VisualState>
             </VisualStateGroup>

src/settings-ui/Settings.UI/SettingsXAML/Controls/ShortcutControl/ShortcutDialogContentControl.xaml

@@ -231,7 +231,7 @@
                             Padding="20,16"
                             AutomationProperties.AccessibilityView="Raw"
                             Content="{Binding}"
-                            CornerRadius="{StaticResource ControlCornerRadius}"
+                            CornerRadius="{StaticResource OverlayCornerRadius}"
                             FontSize="16"
                             FontWeight="SemiBold"
                             IsTabStop="False"

src/settings-ui/Settings.UI/Strings/en-us/Resources.resw

@@ -5173,7 +5173,7 @@ To record a specific window, enter the hotkey with the Alt key in the opposite m
     <value>Configure shortcut</value>
   </data>
   <data name="ConfigureShortcutText.Text" xml:space="preserve">
-    <value>Configure shortcut</value>
+    <value>Assign shortcut</value>
   </data>
   <data name="QuickAccessTitle.Title" xml:space="preserve">
     <value>Quick access</value>