fix(protocol-designer): fix hotkey text based on PC or Mac

fix RQA-3668
Opentrons · Nov 21, 2024 · f585428 · f585428
1 parent 060bde1
commit f585428
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 5 deletions.
diff --git a/protocol-designer/src/assets/localization/en/starting_deck_state.json b/protocol-designer/src/assets/localization/en/starting_deck_state.json
@@ -14,6 +14,8 @@
   "clear_slot": "Clear slot",
   "clear": "Clear",
   "command_click_to_multi_select": "^/⌘ + click to select multiple",
+  "mac_command_click_to_multi_select": "⌘ + click to select multiple",
+  "windows_command_click_to_multi_select": "^ + click to select multiple",
   "convert_gen1_to_gen2": "To convert engage heights from GEN1 to GEN2, divide your engage height by 2.",
   "convert_gen2_to_gen1": "To convert engage heights from GEN2 to GEN1, multiply your engage height by 2.",
   "custom": "Custom labware definitions",

diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/index.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/index.tsx
@@ -62,6 +62,15 @@ export function ProtocolSteps(): JSX.Element {
       : null
 
   const stepDetails = currentStep?.stepDetails ?? null
+
+  let commandText = t('command_click_to_multi_select')
+
+  if (navigator.userAgent.includes('Mac')) {
+    commandText = t('mac_command_click_to_multi_select')
+  } else if (navigator.userAgent.includes('Windows')) {
+    commandText = t('windows_command_click_to_multi_select')
+  }
+
   return (
     <Flex
       backgroundColor={COLORS.grey10}
@@ -142,11 +151,7 @@ export function ProtocolSteps(): JSX.Element {
               type="default"
               shrinkToContent
             />
-            <Tag
-              text={t('command_click_to_multi_select')}
-              type="default"
-              shrinkToContent
-            />
+            <Tag text={commandText} type="default" shrinkToContent />
           </Flex>
         ) : null}
       </Flex>