From ed1ca65ad5d43a544a3cf4ba88230c51b28b1699 Mon Sep 17 00:00:00 2001
From: Deluan <deluan@navidrome.org>
Date: Mon, 25 Oct 2021 10:52:43 -0400
Subject: [PATCH] Show hotkeys as chips, for easier reading

---
 ui/src/dialogs/HelpDialog.js | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/ui/src/dialogs/HelpDialog.js b/ui/src/dialogs/HelpDialog.js
index 0e7621fe6..462a8c1ba 100644
--- a/ui/src/dialogs/HelpDialog.js
+++ b/ui/src/dialogs/HelpDialog.js
@@ -1,6 +1,6 @@
 import React, { useCallback, useState } from 'react'
 import ReactDOM from 'react-dom'
-import { Dialog } from '@material-ui/core'
+import { Chip, Dialog } from '@material-ui/core'
 import { getApplicationKeyMap, GlobalHotKeys } from 'react-hotkeys'
 import TableContainer from '@material-ui/core/TableContainer'
 import Paper from '@material-ui/core/Paper'
@@ -38,7 +38,11 @@ const HelpTable = (props) => {
                     </TableCell>
                     <TableCell align="left">
                       {sequences.map(({ sequence }) => (
-                        <span key={sequence}>{sequence}</span>
+                        <Chip
+                          label={<kbd key={sequence}>{sequence}</kbd>}
+                          size="small"
+                          variant={'outlined'}
+                        />
                       ))}
                     </TableCell>
                   </TableRow>