From 8a0686459dcf944868d3afb20f929f3678d2b524 Mon Sep 17 00:00:00 2001
From: Konstantin Schaper <konstantin.schaper@cloudogu.com>
Date: Mon, 24 Oct 2022 10:16:08 +0200
Subject: [PATCH] improve visibility of shortcut keys in the documentation by
 adding a contrasting border (#2135)

---
 scm-ui/ui-webapp/src/shortcuts/ShortcutDocsModal.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/scm-ui/ui-webapp/src/shortcuts/ShortcutDocsModal.tsx b/scm-ui/ui-webapp/src/shortcuts/ShortcutDocsModal.tsx
index cef2f8ab64..451fcf31e8 100644
--- a/scm-ui/ui-webapp/src/shortcuts/ShortcutDocsModal.tsx
+++ b/scm-ui/ui-webapp/src/shortcuts/ShortcutDocsModal.tsx
@@ -27,9 +27,14 @@ import { Column, Modal, Table } from "@scm-manager/ui-components";
 import { useTranslation } from "react-i18next";
 import classNames from "classnames";
 import splitKeyCombination from "./splitKeyCombination";
+import styled from "styled-components";
 
 const keyComparator = ([a]: [string, string], [b]: [string, string]) => (a > b ? 1 : -1);
 
+const KeyDisplay = styled.span`
+  border: 1px solid var(--scm-border-color);
+`;
+
 const ShortcutDocsModal = () => {
   const { docs } = useShortcutDocs();
   const [open, setOpen] = useState(false);
@@ -43,7 +48,7 @@ const ShortcutDocsModal = () => {
         <Column header={t("shortcutDocsModal.table.headers.keyCombination")}>
           {([key]: [string, string]) =>
             splitKeyCombination(key).map((k, i) => (
-              <span
+              <KeyDisplay
                 className={classNames(
                   "has-background-secondary-less has-text-secondary-most py-1 px-2 has-rounded-border",
                   {
@@ -52,7 +57,7 @@ const ShortcutDocsModal = () => {
                 )}
               >
                 {k}
-              </span>
+              </KeyDisplay>
             ))
           }
         </Column>