From 1de3e01216a2a8ff963f6d347790f6f3ef8a06e4 Mon Sep 17 00:00:00 2001
From: Carlos Valente <34649812+cpvalente@users.noreply.github.com>
Date: Sun, 3 Sep 2023 09:13:56 +0200
Subject: [PATCH] style: localise labels to user device (#509)

---
 apps/client/src/common/utils/deviceUtils.ts                | 6 ++++++
 .../src/features/rundown/quick-add-block/QuickAddBlock.tsx | 7 ++++---
 2 files changed, 10 insertions(+), 3 deletions(-)
 create mode 100644 apps/client/src/common/utils/deviceUtils.ts

diff --git a/apps/client/src/common/utils/deviceUtils.ts b/apps/client/src/common/utils/deviceUtils.ts
new file mode 100644
index 000000000..9a8cdfde4
--- /dev/null
+++ b/apps/client/src/common/utils/deviceUtils.ts
@@ -0,0 +1,6 @@
+export function isMacOS() {
+  const userAgent = navigator.userAgent.toLowerCase();
+  return userAgent.includes('macintosh') || userAgent.includes('mac os');
+}
+
+export const deviceAlt = isMacOS() ? '⌥' : 'Alt';
diff --git a/apps/client/src/features/rundown/quick-add-block/QuickAddBlock.tsx b/apps/client/src/features/rundown/quick-add-block/QuickAddBlock.tsx
index 93862f63e..abf20135f 100644
--- a/apps/client/src/features/rundown/quick-add-block/QuickAddBlock.tsx
+++ b/apps/client/src/features/rundown/quick-add-block/QuickAddBlock.tsx
@@ -5,6 +5,7 @@ import { SupportedEvent } from 'ontime-types';
 import { useEventAction } from '../../../common/hooks/useEventAction';
 import { useEditorSettings } from '../../../common/stores/editorSettings';
 import { useEmitLog } from '../../../common/stores/logger';
+import { deviceAlt } from '../../../common/utils/deviceUtils';
 import { tooltipDelayMid } from '../../../ontimeConfig';
 
 import style from './QuickAddBlock.module.scss';
@@ -82,7 +83,7 @@ const QuickAddBlock = (props: QuickAddBlockProps) => {
             className={style.quickBtn}
             data-testid='quick-add-event'
           >
-            Event {showKbd && <span className={style.keyboard}>Alt + E</span>}
+            Event {showKbd && <span className={style.keyboard}>{`${deviceAlt} + E`}</span>}
           </Button>
         </Tooltip>
         <Tooltip label='Add Delay' openDelay={tooltipDelayMid}>
@@ -94,7 +95,7 @@ const QuickAddBlock = (props: QuickAddBlockProps) => {
             className={style.quickBtn}
             data-testid='quick-add-delay'
           >
-            Delay {showKbd && <span className={style.keyboard}>Alt + D</span>}
+            Delay {showKbd && <span className={style.keyboard}>{`${deviceAlt} + D`}</span>}
           </Button>
         </Tooltip>
         <Tooltip label='Add Block' openDelay={tooltipDelayMid}>
@@ -106,7 +107,7 @@ const QuickAddBlock = (props: QuickAddBlockProps) => {
             className={style.quickBtn}
             data-testid='quick-add-block'
           >
-            Block {showKbd && <span className={style.keyboard}>Alt + B</span>}
+            Block {showKbd && <span className={style.keyboard}>{`${deviceAlt} + B`}</span>}
           </Button>
         </Tooltip>
       </div>