From 2e822b1eeb734f1d86915e0728e7e975685736c7 Mon Sep 17 00:00:00 2001
From: Enrico Ros <enrico.ros@gmail.com>
Date: Thu, 4 Sep 2025 13:23:32 -0700
Subject: [PATCH] Common: KeyStroke: color support

---
 src/common/components/KeyStroke.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/common/components/KeyStroke.tsx b/src/common/components/KeyStroke.tsx
index 414c187b4..76099d1a7 100644
--- a/src/common/components/KeyStroke.tsx
+++ b/src/common/components/KeyStroke.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 import type { SxProps, VariantProp } from '@mui/joy/styles/types';
-import { Chip } from '@mui/joy';
+import { Chip, ColorPaletteProp } from '@mui/joy';
 
 import { Is } from '~/common/util/pwaUtils';
 import { hideOnMobile } from '~/common/app.theme';
@@ -24,6 +24,7 @@ export function platformAwareKeystrokes(text: string) {
 export function KeyStroke(props: {
   combo: string,
   size?: 'sm' | 'md' | 'lg',
+  color?: ColorPaletteProp,
   variant?: VariantProp,
   onClick?: (event: React.MouseEvent) => void,
   sx?: SxProps,
@@ -32,7 +33,7 @@ export function KeyStroke(props: {
     <Chip
       size={props.size ?? 'md'}
       variant={props.variant}
-      color='neutral'
+      color={props.color || 'neutral'}
       onClick={props.onClick}
       sx={props.sx ? { ...hideOnMobile, ...props.sx } : hideOnMobile}
     >