From 000a4814e8aedd3d9b5a7b240bcc2be5372e9d72 Mon Sep 17 00:00:00 2001
From: Faton Ramadani <faton.ramadani14@gmail.com>
Date: Mon, 26 Feb 2024 10:30:16 +0100
Subject: [PATCH] feat(frontend): Update shortcuts design (#3285)

* feat(frontend): Improve text colors + button shortcuts

* feat(frontend): revert theme changes

* fix(frontend): fix shortcuts

* fix(frontend): fix delete shortcut
---
 frontend/src/lib/components/Dev.svelte        | 14 ++---
 .../src/lib/components/FlowBuilder.svelte     |  7 ++-
 .../FlowLoopIterationPreview.svelte           | 11 ++--
 .../lib/components/FlowPreviewContent.svelte  | 10 ++--
 .../src/lib/components/ModulePreview.svelte   | 17 +++---
 frontend/src/lib/components/RunForm.svelte    | 20 +++----
 .../src/lib/components/ScriptBuilder.svelte   | 11 ++--
 .../src/lib/components/ScriptEditor.svelte    | 10 ++--
 .../apps/editor/AppEditorHeader.svelte        | 14 ++---
 .../apps/editor/GridEditorMenu.svelte         |  6 +--
 .../InlineScriptEditor.svelte                 | 15 ++----
 .../inlineScriptsPanel/RunButton.svelte       | 16 ++----
 .../settingsPanel/ComponentPanel.svelte       | 52 ++++++++++---------
 .../components/common/button/Button.svelte    | 21 +++++++-
 .../ConfirmationModal.svelte                  | 21 ++++----
 frontend/src/lib/utils.ts                     |  2 +-
 16 files changed, 125 insertions(+), 122 deletions(-)

diff --git a/frontend/src/lib/components/Dev.svelte b/frontend/src/lib/components/Dev.svelte
index 0fc5866967..d77de3a91f 100644
--- a/frontend/src/lib/components/Dev.svelte
+++ b/frontend/src/lib/components/Dev.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import SchemaForm from '$lib/components/SchemaForm.svelte'
 	import TestJobLoader from '$lib/components/TestJobLoader.svelte'
-	import { Button, Kbd } from '$lib/components/common'
+	import { Button } from '$lib/components/common'
 	import { WindmillIcon } from '$lib/components/icons'
 	import LogPanel from '$lib/components/scriptEditor/LogPanel.svelte'
 	import {
@@ -11,11 +11,11 @@
 		OpenAPI,
 		Preview,
 		type OpenFlow,
-		type FlowModule,
+		type FlowModule
 	} from '$lib/gen'
 	import { inferArgs } from '$lib/infer'
-	import {  userStore, workspaceStore } from '$lib/stores'
-	import { emptySchema, getModifierKey, sendUserToast } from '$lib/utils'
+	import { userStore, workspaceStore } from '$lib/stores'
+	import { emptySchema, sendUserToast } from '$lib/utils'
 	import { Pane, Splitpanes } from 'svelte-splitpanes'
 	import { onDestroy, onMount, setContext } from 'svelte'
 	import DarkModeToggle from '$lib/components/sidebar/DarkModeToggle.svelte'
@@ -31,7 +31,7 @@
 	import type { FlowEditorContext } from './flows/types'
 	import { dfs } from './flows/dfs'
 	import { loadSchemaFromModule } from './flows/flowInfers'
-	import { Play } from 'lucide-svelte'
+	import { CornerDownLeft, Play } from 'lucide-svelte'
 	import Toggle from './Toggle.svelte'
 	import { setLicense } from '$lib/enterpriseUtils'
 
@@ -418,12 +418,12 @@
 							icon: Play,
 							classes: 'animate-none'
 						}}
+						shortCut={{ Icon: CornerDownLeft, hide: testIsLoading }}
 					>
 						{#if testIsLoading}
 							Running
 						{:else}
-							Test&nbsp;<Kbd small isModifier>{getModifierKey()}</Kbd>
-							<Kbd small><span class="text-lg font-bold">⏎</span></Kbd>
+							Test
 						{/if}
 					</Button>
 				{/if}
diff --git a/frontend/src/lib/components/FlowBuilder.svelte b/frontend/src/lib/components/FlowBuilder.svelte
index ca72329889..43a713033b 100644
--- a/frontend/src/lib/components/FlowBuilder.svelte
+++ b/frontend/src/lib/components/FlowBuilder.svelte
@@ -34,7 +34,7 @@
 	import { setContext, tick } from 'svelte'
 	import { writable, type Writable } from 'svelte/store'
 	import CenteredPage from './CenteredPage.svelte'
-	import { Badge, Button, Kbd, UndoRedo } from './common'
+	import { Badge, Button, UndoRedo } from './common'
 	import FlowEditor from './flows/FlowEditor.svelte'
 	import ScriptEditorDrawer from './flows/content/ScriptEditorDrawer.svelte'
 	import type { FlowState } from './flows/flowState'
@@ -1117,8 +1117,11 @@
 						startIcon={{ icon: Save }}
 						on:click={() => saveDraft()}
 						disabled={!newFlow && !savedFlow}
+						shortCut={{
+							key: 'S'
+						}}
 					>
-						Draft&nbsp;<Kbd small>Ctrl</Kbd><Kbd small>S</Kbd>
+						Draft
 					</Button>
 					<Button
 						loading={loadingSave}
diff --git a/frontend/src/lib/components/FlowLoopIterationPreview.svelte b/frontend/src/lib/components/FlowLoopIterationPreview.svelte
index af3a198c49..f5e03a3627 100644
--- a/frontend/src/lib/components/FlowLoopIterationPreview.svelte
+++ b/frontend/src/lib/components/FlowLoopIterationPreview.svelte
@@ -1,15 +1,14 @@
 <script lang="ts">
 	import { Job, JobService, type FlowModule, type RestartedFrom } from '$lib/gen'
 	import { workspaceStore } from '$lib/stores'
-	import { Button, Kbd } from './common'
+	import { Button } from './common'
 	import { createEventDispatcher, getContext } from 'svelte'
 	import type { FlowEditorContext } from './flows/types'
 	import { runFlowPreview } from './flows/utils'
 	import SchemaForm from './SchemaForm.svelte'
 	import FlowStatusViewer from '../components/FlowStatusViewer.svelte'
 	import FlowProgressBar from './flows/FlowProgressBar.svelte'
-	import { Play, RefreshCw, X } from 'lucide-svelte'
-	import { getModifierKey } from '$lib/utils'
+	import { CornerDownLeft, Play, RefreshCw, X } from 'lucide-svelte'
 	import type { Schema } from '$lib/common'
 
 	export let open: boolean
@@ -123,9 +122,11 @@
 				btnClasses="w-full max-w-lg"
 				on:click={() => runPreview(previewArgs, undefined)}
 				id="flow-editor-test-flow-drawer"
+				shortCut={{
+					Icon: CornerDownLeft
+				}}
 			>
-				Test iteration &nbsp;<Kbd small isModifier>{getModifierKey()}</Kbd>
-				<Kbd small><span class="text-lg font-bold">⏎</span></Kbd>
+				Test iteration
 			</Button>
 		{/if}
 		<div />
diff --git a/frontend/src/lib/components/FlowPreviewContent.svelte b/frontend/src/lib/components/FlowPreviewContent.svelte
index 7fb395562d..77d556ee1f 100644
--- a/frontend/src/lib/components/FlowPreviewContent.svelte
+++ b/frontend/src/lib/components/FlowPreviewContent.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { Job, JobService, type Flow, type RestartedFrom, type OpenFlow } from '$lib/gen'
 	import { workspaceStore } from '$lib/stores'
-	import { Badge, Button, Drawer, Kbd, Popup } from './common'
+	import { Badge, Button, Drawer, Popup } from './common'
 	import { createEventDispatcher, getContext } from 'svelte'
 	import type { FlowEditorContext } from './flows/types'
 	import { runFlowPreview } from './flows/utils'
@@ -9,8 +9,8 @@
 	import FlowStatusViewer from '../components/FlowStatusViewer.svelte'
 	import FlowProgressBar from './flows/FlowProgressBar.svelte'
 	import CapturePayload from './flows/content/CapturePayload.svelte'
-	import { AlertTriangle, ArrowRight, Play, RefreshCw, X } from 'lucide-svelte'
-	import { emptyString, getModifierKey } from '$lib/utils'
+	import { AlertTriangle, ArrowRight, CornerDownLeft, Play, RefreshCw, X } from 'lucide-svelte'
+	import { emptyString } from '$lib/utils'
 	import DrawerContent from './common/drawer/DrawerContent.svelte'
 	import SavedInputs from './SavedInputs.svelte'
 	import { dfs } from './flows/dfs'
@@ -261,9 +261,9 @@
 					btnClasses="w-full max-w-lg"
 					on:click={() => runPreview($previewArgs, undefined)}
 					id="flow-editor-test-flow-drawer"
+					shortCut={{ Icon: CornerDownLeft }}
 				>
-					Test flow &nbsp;<Kbd small isModifier>{getModifierKey()}</Kbd>
-					<Kbd small><span class="text-lg font-bold">⏎</span></Kbd>
+					Test flow
 				</Button>
 			</div>
 		{/if}
diff --git a/frontend/src/lib/components/ModulePreview.svelte b/frontend/src/lib/components/ModulePreview.svelte
index 776c5d34a9..da7749eddb 100644
--- a/frontend/src/lib/components/ModulePreview.svelte
+++ b/frontend/src/lib/components/ModulePreview.svelte
@@ -2,10 +2,9 @@
 	import type { Schema } from '$lib/common'
 	import { ScriptService, type FlowModule, type Job, Script, JobService } from '$lib/gen'
 	import { workspaceStore } from '$lib/stores'
-	import { getModifierKey } from '$lib/utils'
 	import { getScriptByPath } from '$lib/scripts'
 
-	import { Loader2 } from 'lucide-svelte'
+	import { CornerDownLeft, Loader2 } from 'lucide-svelte'
 	import { getContext } from 'svelte'
 	import { Pane, Splitpanes } from 'svelte-splitpanes'
 	import Button from './common/button/Button.svelte'
@@ -14,7 +13,6 @@
 	import LogViewer from './LogViewer.svelte'
 	import TestJobLoader from './TestJobLoader.svelte'
 	import ModulePreviewForm from './ModulePreviewForm.svelte'
-	import { Kbd } from './common'
 	import { evalValue } from './flows/utils'
 	import type { PickableProperties } from './flows/previousResults'
 	import type DiffEditor from './DiffEditor.svelte'
@@ -111,10 +109,17 @@
 					Cancel
 				</Button>
 			{:else}
-				<Button color="dark" btnClasses="truncate" size="sm" on:click={() => runTest(stepArgs)}
-					>Run&nbsp; <Kbd small isModifier>{getModifierKey()}</Kbd>
-					<Kbd small><span class="text-lg font-bold">⏎</span></Kbd></Button
+				<Button
+					color="dark"
+					btnClasses="truncate"
+					size="sm"
+					on:click={() => runTest(stepArgs)}
+					shortCut={{
+						Icon: CornerDownLeft
+					}}
 				>
+					Run
+				</Button>
 			{/if}
 		</div>
 
diff --git a/frontend/src/lib/components/RunForm.svelte b/frontend/src/lib/components/RunForm.svelte
index b46c94658e..31efe857c9 100644
--- a/frontend/src/lib/components/RunForm.svelte
+++ b/frontend/src/lib/components/RunForm.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
-	import { defaultIfEmptyString, emptyString, getModifierKey, truncateHash } from '$lib/utils'
+	import { defaultIfEmptyString, emptyString, truncateHash } from '$lib/utils'
 
 	import type { Schema } from '$lib/common'
 	import CliHelpBox from './CliHelpBox.svelte'
-	import { Badge, Button, Kbd } from './common'
+	import { Badge, Button } from './common'
 	import SchemaForm from './SchemaForm.svelte'
 	import SharedBadge from './SharedBadge.svelte'
 
@@ -13,7 +13,7 @@
 	import ClipboardPanel from './details/ClipboardPanel.svelte'
 	import Popup from './common/popup/Popup.svelte'
 	import { autoPlacement } from '@floating-ui/core'
-	import { Calendar } from 'lucide-svelte'
+	import { Calendar, CornerDownLeft } from 'lucide-svelte'
 	import RunFormAdvancedPopup from './RunFormAdvancedPopup.svelte'
 
 	export let runnable:
@@ -154,14 +154,9 @@
 					btnClasses="!px-6 !py-1 !h-8 inline-flex gap-2"
 					disabled={!isValid}
 					on:click={() => runAction(scheduledForStr, args, invisible_to_owner, overrideTag)}
+					shortCut={{ Icon: CornerDownLeft, hide: !viewKeybinding }}
 				>
-					{#if viewKeybinding}
-						<div class="inline-flex gap-0 items-center">
-							<Kbd small isModifier>{getModifierKey()}</Kbd><Kbd small>Enter</Kbd>
-						</div>{/if}
-					<div>
-						{scheduledForStr ? 'Schedule to run later' : buttonText}
-					</div>
+					{scheduledForStr ? 'Schedule to run later' : buttonText}
 				</Button>
 				<div>
 					<Popup
@@ -213,11 +208,8 @@
 			btnClasses="!px-6 !py-1 w-full"
 			disabled={!isValid}
 			on:click={() => runAction(undefined, args, invisible_to_owner, overrideTag)}
+			shortCut={{ Icon: CornerDownLeft, hide: !viewKeybinding }}
 		>
-			{#if viewKeybinding}
-				<div>
-					<Kbd small isModifier>{getModifierKey()}</Kbd>+<Kbd small>Enter</Kbd>
-				</div>{/if}
 			{buttonText}
 		</Button>
 	{/if}
diff --git a/frontend/src/lib/components/ScriptBuilder.svelte b/frontend/src/lib/components/ScriptBuilder.svelte
index dbadda4f03..2716ba8a40 100644
--- a/frontend/src/lib/components/ScriptBuilder.svelte
+++ b/frontend/src/lib/components/ScriptBuilder.svelte
@@ -10,12 +10,11 @@
 		emptySchema,
 		emptyString,
 		encodeState,
-		getModifierKey,
 		orderedJsonStringify
 	} from '$lib/utils'
 	import Path from './Path.svelte'
 	import ScriptEditor from './ScriptEditor.svelte'
-	import { Alert, Badge, Button, Drawer, Kbd, SecondsInput, Tab, TabContent, Tabs } from './common'
+	import { Alert, Badge, Button, Drawer, SecondsInput, Tab, TabContent, Tabs } from './common'
 	import LanguageIcon from './common/languageIcons/LanguageIcon.svelte'
 	import type { SupportedLanguage } from '$lib/common'
 	import Tooltip from './Tooltip.svelte'
@@ -962,11 +961,11 @@
 						startIcon={{ icon: Save }}
 						on:click={() => saveDraft()}
 						disabled={initialPath != '' && !savedScript}
+						shortCut={{
+							key: 'S'
+						}}
 					>
-						<span class="hidden lg:flex">
-							Draft&nbsp;<Kbd small isModifier>{getModifierKey()}</Kbd>
-						</span>
-						<Kbd small>S</Kbd>
+						<span class="hidden lg:flex"> Draft </span>
 					</Button>
 					<Button
 						loading={loadingSave}
diff --git a/frontend/src/lib/components/ScriptEditor.svelte b/frontend/src/lib/components/ScriptEditor.svelte
index 7d6fde92d7..81cb4dc627 100644
--- a/frontend/src/lib/components/ScriptEditor.svelte
+++ b/frontend/src/lib/components/ScriptEditor.svelte
@@ -4,7 +4,7 @@
 	import type { Schema, SupportedLanguage } from '$lib/common'
 	import { CompletedJob, Job, JobService } from '$lib/gen'
 	import { enterpriseLicense, userStore, workspaceStore } from '$lib/stores'
-	import { copyToClipboard, emptySchema, getModifierKey, sendUserToast } from '$lib/utils'
+	import { copyToClipboard, emptySchema, sendUserToast } from '$lib/utils'
 	import Editor from './Editor.svelte'
 	import { inferArgs } from '$lib/infer'
 	import type { Preview } from '$lib/gen/models/Preview'
@@ -14,7 +14,7 @@
 	import EditorBar, { EDITOR_BAR_WIDTH_THRESHOLD } from './EditorBar.svelte'
 	import TestJobLoader from './TestJobLoader.svelte'
 	import { createEventDispatcher, onDestroy, onMount } from 'svelte'
-	import { Button, Kbd } from './common'
+	import { Button } from './common'
 	import SplitPanesWrapper from './splitPanes/SplitPanesWrapper.svelte'
 	import WindmillIcon from './icons/WindmillIcon.svelte'
 	import * as Y from 'yjs'
@@ -22,7 +22,7 @@
 	import { WebsocketProvider } from 'y-websocket'
 	import Modal from './common/modal/Modal.svelte'
 	import DiffEditor from './DiffEditor.svelte'
-	import { Clipboard, Github, Play } from 'lucide-svelte'
+	import { Clipboard, CornerDownLeft, Github, Play } from 'lucide-svelte'
 	import { setLicense } from '$lib/enterpriseUtils'
 
 	// Exported
@@ -345,12 +345,12 @@
 								icon: Play,
 								classes: 'animate-none'
 							}}
+							shortCut={{ Icon: CornerDownLeft, hide: testIsLoading }}
 						>
 							{#if testIsLoading}
 								Running
 							{:else}
-								Test&nbsp;<Kbd small isModifier>{getModifierKey()}</Kbd>
-								<Kbd small><span class="text-lg font-bold">⏎</span></Kbd>
+								Test
 							{/if}
 						</Button>
 					{/if}
diff --git a/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte b/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte
index 4a066bd2e8..a562437e42 100644
--- a/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte
+++ b/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte
@@ -1,16 +1,7 @@
 <script lang="ts">
 	import { goto } from '$app/navigation'
 	import { page } from '$app/stores'
-	import {
-		Alert,
-		Badge,
-		Drawer,
-		DrawerContent,
-		Kbd,
-		Tab,
-		Tabs,
-		UndoRedo
-	} from '$lib/components/common'
+	import { Alert, Badge, Drawer, DrawerContent, Tab, Tabs, UndoRedo } from '$lib/components/common'
 	import Button from '$lib/components/common/button/Button.svelte'
 	import DisplayResult from '$lib/components/DisplayResult.svelte'
 	import FlowProgressBar from '$lib/components/flows/FlowProgressBar.svelte'
@@ -1325,8 +1316,9 @@
 			on:click={() => saveDraft()}
 			size="xs"
 			disabled={$page.params.path !== undefined && !savedApp}
+			shortCut={{ key: 'S' }}
 		>
-			Draft&nbsp;<Kbd small>Ctrl</Kbd><Kbd small>S</Kbd>
+			Draft
 		</Button>
 		<Button
 			loading={loading.save}
diff --git a/frontend/src/lib/components/apps/editor/GridEditorMenu.svelte b/frontend/src/lib/components/apps/editor/GridEditorMenu.svelte
index 82a2983f22..b41d5a59ce 100644
--- a/frontend/src/lib/components/apps/editor/GridEditorMenu.svelte
+++ b/frontend/src/lib/components/apps/editor/GridEditorMenu.svelte
@@ -29,7 +29,7 @@
 					componentCallbacks?.handleCut(new KeyboardEvent('keydown'))
 				},
 				icon: Scissors,
-				shortcut: `${getModifierKey()} + X`,
+				shortcut: `${getModifierKey()}X`,
 				disabled: $movingcomponents?.includes($selectedComponent?.[0] ?? '')
 			},
 			{
@@ -38,7 +38,7 @@
 					componentCallbacks?.handleCopy(new KeyboardEvent('keydown'))
 				},
 				icon: Copy,
-				shortcut: `${getModifierKey()} + C`
+				shortcut: `${getModifierKey()}C`
 			},
 
 			{
@@ -47,7 +47,7 @@
 					deleteComponent?.removeGridElement()
 				},
 				icon: Trash,
-				shortcut: `${getModifierKey()} + Del`,
+				shortcut: `Del`,
 				color: 'red'
 			}
 		]
diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte
index 3cc98a5030..4a67946189 100644
--- a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte
@@ -8,11 +8,10 @@
 	import { inferArgs, parseOutputs } from '$lib/infer'
 	import type { Schema } from '$lib/common'
 	import Editor from '$lib/components/Editor.svelte'
-	import { defaultIfEmptyString, emptySchema, getModifierKey, itemsExists } from '$lib/utils'
+	import { defaultIfEmptyString, emptySchema, itemsExists } from '$lib/utils'
 	import { computeFields } from './utils'
 	import { deepEqual } from 'fast-equals'
 	import type { AppInput } from '../../inputType'
-	import Kbd from '$lib/components/common/kbd/Kbd.svelte'
 	import SimpleEditor from '$lib/components/SimpleEditor.svelte'
 	import { buildExtraLib } from '../../utils'
 	import RunButton from './RunButton.svelte'
@@ -239,15 +238,11 @@
 						editor?.format()
 						simpleEditor?.format()
 					}}
+					shortCut={{
+						key: 'S'
+					}}
 				>
-					<div class="flex flex-row gap-1 items-center">
-						Format
-
-						<div class="flex flex-row items-center">
-							<Kbd small isModifier>{getModifierKey()}</Kbd>
-							<Kbd small>S</Kbd>
-						</div>
-					</div>
+					Format
 				</Button>
 				<RunButton bind:runLoading {id} inlineScript={!transformer ? inlineScript : undefined} />
 			</div>
diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/RunButton.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/RunButton.svelte
index 6a2e1f20cc..ab173244b9 100644
--- a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/RunButton.svelte
+++ b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/RunButton.svelte
@@ -6,9 +6,8 @@
 		CancelablePromise,
 		InlineScript
 	} from '../../types'
-	import { Button, Kbd } from '$lib/components/common'
-	import { getModifierKey } from '$lib/utils'
-	import { Loader2 } from 'lucide-svelte'
+	import { Button } from '$lib/components/common'
+	import { CornerDownLeft, Loader2 } from 'lucide-svelte'
 
 	export let id: string
 	export let inlineScript: InlineScript | undefined = undefined
@@ -36,16 +35,9 @@
 				} catch {}
 				runLoading = false
 			}}
+			shortCut={{ Icon: CornerDownLeft, hide: hideShortcut }}
 		>
-			<div class="flex flex-row gap-1 items-center">
-				Run
-				{#if !hideShortcut}
-					<div class="flex flex-row items-center">
-						<Kbd small isModifier>{getModifierKey()}</Kbd>
-						<Kbd small><span class="text-lg font-bold">⏎</span></Kbd>
-					</div>
-				{/if}
-			</div>
+			Run
 		</Button>
 	{:else}
 		<Button
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte
index b837c847f9..fd14aa875c 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte
@@ -7,7 +7,7 @@
 	import TableActions from './TableActions.svelte'
 	import StaticInputEditor from './inputEditor/StaticInputEditor.svelte'
 	import ConnectedInputEditor from './inputEditor/ConnectedInputEditor.svelte'
-	import { classNames, getModifierKey, isMac } from '$lib/utils'
+	import { classNames, getModifierKey } from '$lib/utils'
 	import { buildExtraLib } from '../../utils'
 	import Recompute from './Recompute.svelte'
 	import Tooltip from '$lib/components/Tooltip.svelte'
@@ -22,9 +22,8 @@
 	import GridPane from './GridPane.svelte'
 	import { slide } from 'svelte/transition'
 	import { push } from '$lib/history'
-	import Kbd from '$lib/components/common/kbd/Kbd.svelte'
 	import StylePanel from './StylePanel.svelte'
-	import { ChevronLeft, Delete, ExternalLink } from 'lucide-svelte'
+	import { ChevronLeft, ExternalLink, ArrowBigUp } from 'lucide-svelte'
 	import GridCondition from './GridCondition.svelte'
 	import { isTriggerable } from './script/utils'
 	import { inferDeps } from '../appUtilsInfer'
@@ -446,39 +445,44 @@
 		{#if duplicateMoveAllowed}
 			<PanelSection title="Copy/Move">
 				<div slot="action">
-					<Button size="xs" color="red" variant="border" on:click={removeGridElement}>
-						Delete&nbsp;&nbsp;
-						{#if isMac()}
-							<Kbd kbdClass="center-center">
-								<span class="text-lg leading-none">⌘</span>
-								<span class="px-0.5">+</span>
-								<Delete size={16} />
-							</Kbd>
-						{:else}
-							<Kbd>Del</Kbd>
-						{/if}
+					<Button
+						size="xs"
+						color="red"
+						variant="border"
+						on:click={removeGridElement}
+						shortCut={{
+							key: 'Del',
+							withoutModifier: true
+						}}
+					>
+						Delete
 					</Button>
 				</div>
-				<div class="flex flex-col gap-1">
+				<div class="flex flex-col gap-1 text-tertiary">
 					<div>
 						<span class="text-secondary text-xs mr-2"> Copy:</span>
-						<Kbd>{getModifierKey()}</Kbd>+<Kbd>C</Kbd>,
-						<Kbd>{getModifierKey()}</Kbd>+<Kbd>V</Kbd>
+						<span class="text-xs border py-1 px-1.5 rounded-md">{getModifierKey() + 'C'}</span>
+						<span class="text-xs">{'->'}</span>
+						<span class="text-xs border py-1 px-1.5 rounded-md">{getModifierKey() + 'V'}</span>
 					</div>
 					<div>
 						<span class="text-secondary text-xs mr-2">Move: </span>
-						<Kbd>{getModifierKey()}</Kbd>+<Kbd>X</Kbd>,
-						<Kbd>{getModifierKey()}</Kbd>+<Kbd>V</Kbd>
+						<span class="text-xs border py-1 px-1.5 rounded-md">{getModifierKey() + 'X'}</span>
+						<span class="text-xs">{'->'}</span>
+						<span class="text-xs border py-1 px-1.5 rounded-md">{getModifierKey() + 'V'}</span>
 					</div>
 					<div>
 						<span class="text-secondary text-xs mr-2">Navigate:</span>
-						<Kbd>&leftarrow;</Kbd>
-						<Kbd>&uparrow;</Kbd><Kbd>&rightarrow;</Kbd>
-						<Kbd>ESC</Kbd>
+						<span class="text-xs border py-1 px-1.5 rounded-md">&leftarrow;</span>
+						<span class="text-xs border py-1 px-1.5 rounded-md">&uparrow;</span>
+						<span class="text-xs border py-1 px-1.5 rounded-md">&rightarrow;</span>
+						<span class="text-xs border py-1 px-1.5 rounded-md">ESC</span>
 					</div>
-					<div>
+					<div class="flex flex-row items-center gap-1">
 						<span class="text-secondary text-xs mr-2">Add to selection:</span>
-						<Kbd>&DoubleUpArrow;</Kbd>+<Kbd>click</Kbd>
+						<span class="text-xs border py-1 px-1.5 rounded-md">
+							<ArrowBigUp size="14" />
+						</span>+<span class="text-xs border py-1 px-1.5 rounded-md">Click</span>
 					</div>
 				</div>
 			</PanelSection>
diff --git a/frontend/src/lib/components/common/button/Button.svelte b/frontend/src/lib/components/common/button/Button.svelte
index b5cdd4dd12..def049a22a 100644
--- a/frontend/src/lib/components/common/button/Button.svelte
+++ b/frontend/src/lib/components/common/button/Button.svelte
@@ -4,7 +4,7 @@
 	import { twMerge } from 'tailwind-merge'
 	import ButtonDropdown from './ButtonDropdown.svelte'
 	import { MenuItem } from '@rgossiaux/svelte-headlessui'
-	import { classNames } from '$lib/utils'
+	import { classNames, getModifierKey } from '$lib/utils'
 	import { Loader2 } from 'lucide-svelte'
 
 	export let size: ButtonType.Size = 'md'
@@ -32,6 +32,9 @@
 	export let portalTarget: string | undefined = undefined
 	export let startIcon: ButtonType.Icon | undefined = undefined
 	export let endIcon: ButtonType.Icon | undefined = undefined
+	export let shortCut:
+		| { key?: string; hide?: boolean; Icon?: any; withoutModifier?: boolean }
+		| undefined = undefined
 
 	type MenuItem = {
 		label: string
@@ -207,6 +210,14 @@
 					size={lucideIconSize}
 				/>
 			{/if}
+			{#if shortCut && !shortCut.hide}
+				<div class="flex flex-row items-center !text-md opacity-60 gap-0 font-normal">
+					{#if shortCut.withoutModifier !== true}{getModifierKey()}{/if}{#if shortCut.Icon}<shortCut.Icon
+							class="w-4 h-4"
+							size={lucideIconSize}
+						/>{:else}{shortCut.key}{/if}
+				</div>
+			{/if}
 		</a>
 	{:else}
 		<button
@@ -245,6 +256,14 @@
 					size={lucideIconSize}
 				/>
 			{/if}
+			{#if shortCut && !shortCut.hide}
+				{@const Icon = shortCut.Icon}
+				<div class="flex flex-row items-center !text-md opacity-60 gap-0 font-normal">
+					{#if shortCut.withoutModifier !== true}{getModifierKey()}{/if}{#if shortCut.Icon}<Icon
+							size={lucideIconSize}
+						/>{:else}{shortCut.key}{/if}
+				</div>
+			{/if}
 		</button>
 	{/if}
 
diff --git a/frontend/src/lib/components/common/confirmationModal/ConfirmationModal.svelte b/frontend/src/lib/components/common/confirmationModal/ConfirmationModal.svelte
index f5f899e70f..e58db8dea6 100644
--- a/frontend/src/lib/components/common/confirmationModal/ConfirmationModal.svelte
+++ b/frontend/src/lib/components/common/confirmationModal/ConfirmationModal.svelte
@@ -3,8 +3,7 @@
 	import { createEventDispatcher } from 'svelte'
 	import { fade } from 'svelte/transition'
 	import Button from '../button/Button.svelte'
-	import Badge from '../badge/Badge.svelte'
-	import { AlertTriangle, Loader2 } from 'lucide-svelte'
+	import { AlertTriangle, CornerDownLeft, Loader2 } from 'lucide-svelte'
 
 	export let title: string
 	export let confirmationText: string
@@ -75,24 +74,26 @@
 						</div>
 					</div>
 					<div class="flex items-center space-x-2 flex-row-reverse space-x-reverse mt-4">
-						<Button disabled={loading} on:click={() => dispatch('confirmed')} color="red" size="sm">
+						<Button
+							disabled={loading}
+							on:click={() => dispatch('confirmed')}
+							color="red"
+							size="sm"
+							shortCut={{ Icon: CornerDownLeft, hide: !keyListen, withoutModifier: true }}
+						>
 							{#if loading}
 								<Loader2 class="animate-spin" />
 							{/if}
-							<span
-								>{confirmationText}
-								{#if keyListen}<Badge>Enter</Badge>{/if}</span
-							>
+							<span>{confirmationText} </span>
 						</Button>
 						<Button
 							disabled={loading}
 							on:click={() => dispatch('canceled')}
 							color="light"
 							size="sm"
+							shortCut={{ key: 'Esc', hide: !keyListen, withoutModifier: true }}
 						>
-							<span
-								>Cancel {#if keyListen}<Badge color="dark-gray">Escape</Badge>{/if}</span
-							>
+							Cancel
 						</Button>
 					</div>
 				</div>
diff --git a/frontend/src/lib/utils.ts b/frontend/src/lib/utils.ts
index a19d29ded1..314ad94256 100644
--- a/frontend/src/lib/utils.ts
+++ b/frontend/src/lib/utils.ts
@@ -501,7 +501,7 @@ export function isMac(): boolean {
 }
 
 export function getModifierKey(): string {
-	return isMac() ? '⌘' : 'Ctrl'
+	return isMac() ? '⌘' : 'Ctrl+'
 }
 
 export function isValidHexColor(color: string): boolean {