KBM - Fix all descriptions and text and minor UI tweaks (#2705)

* Add new text for Remap Keyboard

* Added text in KBM windows

* Tweaked KBM landing page view

* Changed to transparent background

* Tweaked text

* Tweaked text

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

@@ -139,13 +139,13 @@
             <TextBlock x:Uid="KeyboardManager_RemapKeyboardHeader"
                        Style="{StaticResource SettingsGroupTitleStyle}"/>
 
-            <TextBlock Text="Description of the Remap Keyboard (subfeature)"
+            <TextBlock Text="Click below to remap a single key to another key"
                        Margin="{StaticResource SmallTopMargin}"
                        TextWrapping="Wrap"/>
 
             <Button x:Uid="KeyboardManager_RemapKeyboardButton"
                     Margin="{StaticResource SmallTopMargin}"
-                    Style="{StaticResource ButtonRevealStyle}"
+                    Style="{StaticResource AccentButtonStyle}"
                     Command="{Binding Path=RemapKeyboardCommand}"
                     IsEnabled="{x:Bind Path=ViewModel.Enabled, Mode=OneWay}"/>
 
@@ -169,12 +169,12 @@
             <TextBlock x:Uid="KeyboardManager_RemapShortcutsHeader"
                        Style="{StaticResource SettingsGroupTitleStyle}"/>
 
-            <TextBlock Text="Description of the Remap Shortcuts (subfeature)"
+            <TextBlock Text="Click below to remap a shortcut (hotkey) to another shortcut"
                        TextWrapping="Wrap" Margin="{StaticResource SmallTopMargin}"/>
 
             <Button x:Uid="KeyboardManager_RemapShortcutsButton"
                     Margin="{StaticResource SmallTopMargin}"
-                    Style="{StaticResource ButtonRevealStyle}"
+                    Style="{StaticResource AccentButtonStyle}"
                     Command="{Binding Path=EditShortcutCommand}"
                     IsEnabled="{x:Bind Path=ViewModel.Enabled, Mode=OneWay}"
                     />

src/modules/keyboardmanager/ui/EditKeyboardWindow.cpp

@@ -96,8 +96,14 @@ void createEditKeyboardWindow(HINSTANCE hInst, KeyboardManagerState& keyboardMan
 
     //  Text block for information about remap key section.
     TextBlock keyRemapInfoHeader;
-    keyRemapInfoHeader.Text(L"Select the key you want to remap, original key, and it's new output when pressed, the new key");
+    keyRemapInfoHeader.Text(L"Select the key you want to change (Original Key) and the key you want it to become (New Key).");
     keyRemapInfoHeader.Margin({ 10, 0, 0, 10 });
+    keyRemapInfoHeader.FontWeight(Text::FontWeights::SemiBold());
+
+    TextBlock keyRemapInfoExample;
+    keyRemapInfoExample.Text(L"For example, if you want to press A and get B, Key A would be your \"Original Key\" and Key B would be your \"New Key\".");
+    keyRemapInfoExample.Margin({ 10, 0, 0, 20 });
+    keyRemapInfoExample.FontStyle(Text::FontStyle::Italic);
 
     // Table to display the key remaps
     Grid keyRemapTable;
@@ -304,6 +310,7 @@ void createEditKeyboardWindow(HINSTANCE hInst, KeyboardManagerState& keyboardMan
 
     StackPanel mappingsPanel;
     mappingsPanel.Children().Append(keyRemapInfoHeader);
+    mappingsPanel.Children().Append(keyRemapInfoExample);
     mappingsPanel.Children().Append(keyRemapTable);
     mappingsPanel.Children().Append(addRemapKey);
 

src/modules/keyboardmanager/ui/EditShortcutsWindow.cpp

@@ -95,6 +95,17 @@ void createEditShortcutsWindow(HINSTANCE hInst, KeyboardManagerState& keyboardMa
         PostMessage(_hWndEditShortcutsWindow, WM_CLOSE, 0, 0);
     });
 
+    //  Text block for information about remap key section.
+    TextBlock shortcutRemapInfoHeader;
+    shortcutRemapInfoHeader.Text(L"Select shortcut you want to change (Original Shortcut) and the shortcut (New Shortcut) you want it to invoke.");
+    shortcutRemapInfoHeader.Margin({ 10, 0, 0, 10 });
+    shortcutRemapInfoHeader.FontWeight(Text::FontWeights::SemiBold());
+
+    TextBlock shortcutRemapInfoExample;
+    shortcutRemapInfoExample.Text(L"For example, if you want Ctrl+C to paste, Ctrl+C is the Original Shortcut and Ctrl+V is the New Shortcut.");
+    shortcutRemapInfoExample.Margin({ 10, 0, 0, 20 });
+    shortcutRemapInfoExample.FontStyle(Text::FontStyle::Italic);
+
     // Table to display the shortcuts
     Windows::UI::Xaml::Controls::Grid shortcutTable;
     ColumnDefinition firstColumn;
@@ -228,6 +239,8 @@ void createEditShortcutsWindow(HINSTANCE hInst, KeyboardManagerState& keyboardMa
     });
 
     StackPanel mappingsPanel;
+    mappingsPanel.Children().Append(shortcutRemapInfoHeader);
+    mappingsPanel.Children().Append(shortcutRemapInfoExample);
     mappingsPanel.Children().Append(shortcutTable);
     mappingsPanel.Children().Append(addShortcut);
 

src/modules/keyboardmanager/ui/ShortcutControl.cpp

@@ -40,6 +40,7 @@ void ShortcutControl::AddNewShortcutControlRow(Grid& parent, std::vector<std::ve
     deleteSymbol.FontFamily(Xaml::Media::FontFamily(L"Segoe MDL2 Assets"));
     deleteSymbol.Glyph(L"\xE74D");
     deleteShortcut.Content(deleteSymbol);
+    deleteShortcut.Background(Media::SolidColorBrush(Colors::Transparent()));
     deleteShortcut.Click([&](winrt::Windows::Foundation::IInspectable const& sender, RoutedEventArgs const&) {
         Button currentButton = sender.as<Button>();
         uint32_t index;

src/modules/keyboardmanager/ui/SingleKeyRemapControl.cpp

@@ -63,6 +63,7 @@ void SingleKeyRemapControl::AddNewControlKeyRemapRow(Grid& parent, std::vector<s
     deleteSymbol.FontFamily(Xaml::Media::FontFamily(L"Segoe MDL2 Assets"));
     deleteSymbol.Glyph(L"\xE74D");
     deleteRemapKeys.Content(deleteSymbol);
+    deleteRemapKeys.Background(Media::SolidColorBrush(Colors::Transparent()));
     deleteRemapKeys.Click([&](winrt::Windows::Foundation::IInspectable const& sender, RoutedEventArgs const&) {
         Button currentButton = sender.as<Button>();
         uint32_t index;