refactor: better shortcut indication

2022-10-01 19:19:43 +05:30
parent 048ac5f7a5
commit 6330548cc0
43 changed files with 57 additions and 60 deletions
--- a/packages/hoppscotch-app/assets/scss/styles.scss
+++ b/packages/hoppscotch-app/assets/scss/styles.scss
@@ -137,7 +137,7 @@ a {
  @apply leading-body;
  font-size: 86%;

-  xmp {
+  kbd {
    @apply hidden;
    @apply font-sans;
    @apply bg-gray-500/45;
@@ -147,11 +147,6 @@ a {
    @apply my-0 ml-1;
    @apply truncate;
    @apply sm: inline-flex;
-
-    &.expand-loop {
-      @apply bg-error;
-      @apply text-accentContrast;
-    }
  }

  .tippy-svg-arrow svg {
@@ -161,7 +156,7 @@ a {

 .tippy-box[data-theme="popover"] {
  @apply flex flex-col;
-  @apply max-h-46;
+  @apply max-h-48;
  @apply items-stretch;
  @apply overflow-y-auto;
  @apply bg-popover;
@@ -457,7 +452,8 @@ pre.ace_editor {
  @apply rounded;
  @apply ml-2;
  @apply px-1;
-  @apply transition;
+  @apply border border-dividerDark;
+  @apply shadow-sm;
 }

 .capitalize-first {
--- a/packages/hoppscotch-app/locales/af.json
+++ b/packages/hoppscotch-app/locales/af.json
@@ -362,7 +362,7 @@
    "name": "Versoek naam",
    "new": "New Request",
    "override": "Override",
-    "override_help": "Set <xmp>Content-Type</xmp> in Headers",
+    "override_help": "Set <kbd>Content-Type</kbd> in Headers",
    "overriden": "Overridden",
    "parameter_list": "Navraagparameters",
    "parameters": "Grense",
--- a/packages/hoppscotch-app/locales/ar.json
+++ b/packages/hoppscotch-app/locales/ar.json
@@ -362,7 +362,7 @@
    "name": "اسم الطلب",
    "new": "New Request",
    "override": "Override",
-    "override_help": "Set <xmp>Content-Type</xmp> in Headers",
+    "override_help": "Set <kbd>Content-Type</kbd> in Headers",
    "overriden": "Overridden",
    "parameter_list": "معلمات الاستعلام",
    "parameters": "حدود",
--- a/packages/hoppscotch-app/locales/ca.json
+++ b/packages/hoppscotch-app/locales/ca.json
@@ -362,7 +362,7 @@
    "name": "Sol·licita el nom",
    "new": "Nova sol·licitud",
    "override": "Sobreescriure",
-    "override_help": "Estableix <xmp>Content-Type</xmp> a les capçaleres (Headers)",
+    "override_help": "Estableix <kbd>Content-Type</kbd> a les capçaleres (Headers)",
    "overriden": "Sobreescrit",
    "parameter_list": "Paràmetres de consulta",
    "parameters": "Paràmetres",
--- a/packages/hoppscotch-app/locales/cn.json
+++ b/packages/hoppscotch-app/locales/cn.json
@@ -362,7 +362,7 @@
    "name": "请求名称",
    "new": "新请求",
    "override": "覆盖",
-    "override_help": "设置 <xmp>Content-Type</xmp> 头",
+    "override_help": "设置 <kbd>Content-Type</kbd> 头",
    "overriden": "覆盖",
    "parameter_list": "查询参数",
    "parameters": "参数",
--- a/packages/hoppscotch-app/locales/cs.json
+++ b/packages/hoppscotch-app/locales/cs.json
@@ -362,7 +362,7 @@
    "name": "Vyžádejte si jméno",
    "new": "New Request",
    "override": "Override",
-    "override_help": "Set <xmp>Content-Type</xmp> in Headers",
+    "override_help": "Set <kbd>Content-Type</kbd> in Headers",
    "overriden": "Overridden",
    "parameter_list": "Parametry dotazu",
    "parameters": "Parametry",
--- a/packages/hoppscotch-app/locales/da.json
+++ b/packages/hoppscotch-app/locales/da.json
@@ -362,7 +362,7 @@
    "name": "Anmodningsnavn",
    "new": "New Request",
    "override": "Override",
-    "override_help": "Set <xmp>Content-Type</xmp> in Headers",
+    "override_help": "Set <kbd>Content-Type</kbd> in Headers",
    "overriden": "Overridden",
    "parameter_list": "Forespørgselsparametre",
    "parameters": "Parametre",
--- a/packages/hoppscotch-app/locales/de.json
+++ b/packages/hoppscotch-app/locales/de.json
@@ -362,7 +362,7 @@
    "name": "Anfragename",
    "new": "New Request",
    "override": "Override",
-    "override_help": "Set <xmp>Content-Type</xmp> in Headers",
+    "override_help": "Set <kbd>Content-Type</kbd> in Headers",
    "overriden": "Overridden",
    "parameter_list": "Abfrageparameter",
    "parameters": "Parameter",
--- a/packages/hoppscotch-app/locales/el.json
+++ b/packages/hoppscotch-app/locales/el.json
@@ -362,7 +362,7 @@
    "name": "Αίτημα ονόματος",
    "new": "New Request",
    "override": "Override",
-    "override_help": "Set <xmp>Content-Type</xmp> in Headers",
+    "override_help": "Set <kbd>Content-Type</kbd> in Headers",
    "overriden": "Overridden",
    "parameter_list": "Παράμετροι ερωτήματος",
    "parameters": "Παράμετροι",
--- a/packages/hoppscotch-app/locales/en.json
+++ b/packages/hoppscotch-app/locales/en.json
@@ -362,7 +362,7 @@
    "name": "Request name",
    "new": "New Request",
    "override": "Override",
-    "override_help": "Set <xmp>Content-Type</xmp> in Headers",
+    "override_help": "Set <kbd>Content-Type</kbd> in Headers",
    "overriden": "Overridden",
    "parameter_list": "Query Parameters",
    "parameters": "Parameters",
--- a/packages/hoppscotch-app/locales/es.json
+++ b/packages/hoppscotch-app/locales/es.json
@@ -362,7 +362,7 @@
    "name": "Nombre de petición",
    "new": "New Request",
    "override": "Override",
-    "override_help": "Set <xmp>Content-Type</xmp> in Headers",
+    "override_help": "Set <kbd>Content-Type</kbd> in Headers",
    "overriden": "Overridden",
    "parameter_list": "Parámetros de consulta",
    "parameters": "Parámetros",
--- a/packages/hoppscotch-app/locales/fi.json
+++ b/packages/hoppscotch-app/locales/fi.json
@@ -362,7 +362,7 @@
    "name": "Pyynnön nimi",
    "new": "New Request",
    "override": "Override",
-    "override_help": "Set <xmp>Content-Type</xmp> in Headers",
+    "override_help": "Set <kbd>Content-Type</kbd> in Headers",
    "overriden": "Overridden",
    "parameter_list": "Kyselyparametrit",
    "parameters": "Parametrit",
--- a/packages/hoppscotch-app/locales/fr.json
+++ b/packages/hoppscotch-app/locales/fr.json
@@ -362,7 +362,7 @@
    "name": "Nom de la requête",
    "new": "New Request",
    "override": "Override",
-    "override_help": "Set <xmp>Content-Type</xmp> in Headers",
+    "override_help": "Set <kbd>Content-Type</kbd> in Headers",
    "overriden": "Overridden",
    "parameter_list": "Paramètres de requête",
    "parameters": "Paramètres",
--- a/packages/hoppscotch-app/locales/he.json
+++ b/packages/hoppscotch-app/locales/he.json
@@ -362,7 +362,7 @@
    "name": "שם הבקשה",
    "new": "New Request",
    "override": "Override",
-    "override_help": "Set <xmp>Content-Type</xmp> in Headers",
+    "override_help": "Set <kbd>Content-Type</kbd> in Headers",
    "overriden": "Overridden",
    "parameter_list": "פרמטרי שאילתה",
    "parameters": "פרמטרים",
--- a/packages/hoppscotch-app/locales/hu.json
+++ b/packages/hoppscotch-app/locales/hu.json
@@ -362,7 +362,7 @@
    "name": "Kérés neve",
    "new": "Új kérés",
    "override": "Felülbírálás",
-    "override_help": "A <xmp>Content-Type</xmp> beállítása a fejlécekben",
+    "override_help": "A <kbd>Content-Type</kbd> beállítása a fejlécekben",
    "overriden": "Felülbírálva",
    "parameter_list": "Lekérdezési paraméterek",
    "parameters": "Paraméterek",
--- a/packages/hoppscotch-app/locales/it.json
+++ b/packages/hoppscotch-app/locales/it.json
@@ -362,7 +362,7 @@
    "name": "Nome richiesta",
    "new": "New Request",
    "override": "Override",
-    "override_help": "Set <xmp>Content-Type</xmp> in Headers",
+    "override_help": "Set <kbd>Content-Type</kbd> in Headers",
    "overriden": "Overridden",
    "parameter_list": "Parametri della query",
    "parameters": "Parametri",
--- a/packages/hoppscotch-app/locales/ja.json
+++ b/packages/hoppscotch-app/locales/ja.json
@@ -362,7 +362,7 @@
    "name": "Request name",
    "new": "New Request",
    "override": "Override",
-    "override_help": "Set <xmp>Content-Type</xmp> in Headers",
+    "override_help": "Set <kbd>Content-Type</kbd> in Headers",
    "overriden": "Overridden",
    "parameter_list": "Query Parameters",
    "parameters": "Parameters",
--- a/packages/hoppscotch-app/locales/ko.json
+++ b/packages/hoppscotch-app/locales/ko.json
@@ -362,7 +362,7 @@
    "name": "요청 이름",
    "new": "New Request",
    "override": "Override",
-    "override_help": "Set <xmp>Content-Type</xmp> in Headers",
+    "override_help": "Set <kbd>Content-Type</kbd> in Headers",
    "overriden": "Overridden",
    "parameter_list": "쿼리 파라미터 목록",
    "parameters": "파라미터",
--- a/packages/hoppscotch-app/locales/nl.json
+++ b/packages/hoppscotch-app/locales/nl.json
@@ -362,7 +362,7 @@
    "name": "Naam aanvragen",
    "new": "New Request",
    "override": "Override",
-    "override_help": "Set <xmp>Content-Type</xmp> in Headers",
+    "override_help": "Set <kbd>Content-Type</kbd> in Headers",
    "overriden": "Overridden",
    "parameter_list": "Queryparameters",
    "parameters": "Parameters:",
--- a/packages/hoppscotch-app/locales/no.json
+++ b/packages/hoppscotch-app/locales/no.json
@@ -362,7 +362,7 @@
    "name": "Forespørselsnavn",
    "new": "New Request",
    "override": "Override",
-    "override_help": "Set <xmp>Content-Type</xmp> in Headers",
+    "override_help": "Set <kbd>Content-Type</kbd> in Headers",
    "overriden": "Overridden",
    "parameter_list": "Spørringsparametere",
    "parameters": "Parametere",
--- a/packages/hoppscotch-app/locales/pl.json
+++ b/packages/hoppscotch-app/locales/pl.json
@@ -362,7 +362,7 @@
    "name": "Nazwa",
    "new": "New Request",
    "override": "Override",
-    "override_help": "Set <xmp>Content-Type</xmp> in Headers",
+    "override_help": "Set <kbd>Content-Type</kbd> in Headers",
    "overriden": "Overridden",
    "parameter_list": "Parametry zapytania",
    "parameters": "Parametry",
--- a/packages/hoppscotch-app/locales/pt-br.json
+++ b/packages/hoppscotch-app/locales/pt-br.json
@@ -362,7 +362,7 @@
    "name": "Nome da requisição",
    "new": "Nova requisição",
    "override": "Substituir",
-    "override_help": "Substituir <xmp>Content-Type</xmp> em Headers",
+    "override_help": "Substituir <kbd>Content-Type</kbd> em Headers",
    "overriden": "Substituído",
    "parameter_list": "Parâmetros da requisição",
    "parameters": "Parâmetros",
--- a/packages/hoppscotch-app/locales/pt.json
+++ b/packages/hoppscotch-app/locales/pt.json
@@ -362,7 +362,7 @@
    "name": "Nome do pedido",
    "new": "New Request",
    "override": "Override",
-    "override_help": "Set <xmp>Content-Type</xmp> in Headers",
+    "override_help": "Set <kbd>Content-Type</kbd> in Headers",
    "overriden": "Overridden",
    "parameter_list": "Parâmetros de consulta",
    "parameters": "Parâmetros",
--- a/packages/hoppscotch-app/locales/ro.json
+++ b/packages/hoppscotch-app/locales/ro.json
@@ -362,7 +362,7 @@
    "name": "Solicitați numele",
    "new": "New Request",
    "override": "Override",
-    "override_help": "Set <xmp>Content-Type</xmp> in Headers",
+    "override_help": "Set <kbd>Content-Type</kbd> in Headers",
    "overriden": "Overridden",
    "parameter_list": "Parametrii interogării",
    "parameters": "Parametrii",
--- a/packages/hoppscotch-app/locales/ru.json
+++ b/packages/hoppscotch-app/locales/ru.json
@@ -362,7 +362,7 @@
    "name": "Имя запроса",
    "new": "New Request",
    "override": "Override",
-    "override_help": "Set <xmp>Content-Type</xmp> in Headers",
+    "override_help": "Set <kbd>Content-Type</kbd> in Headers",
    "overriden": "Overridden",
    "parameter_list": "Параметры запроса",
    "parameters": "Параметры",
--- a/packages/hoppscotch-app/locales/sr.json
+++ b/packages/hoppscotch-app/locales/sr.json
@@ -362,7 +362,7 @@
    "name": "Назив захтева",
    "new": "New Request",
    "override": "Override",
-    "override_help": "Set <xmp>Content-Type</xmp> in Headers",
+    "override_help": "Set <kbd>Content-Type</kbd> in Headers",
    "overriden": "Overridden",
    "parameter_list": "Параметри упита",
    "parameters": "Параметри",
--- a/packages/hoppscotch-app/locales/sv.json
+++ b/packages/hoppscotch-app/locales/sv.json
@@ -362,7 +362,7 @@
    "name": "Begär namn",
    "new": "New Request",
    "override": "Override",
-    "override_help": "Set <xmp>Content-Type</xmp> in Headers",
+    "override_help": "Set <kbd>Content-Type</kbd> in Headers",
    "overriden": "Overridden",
    "parameter_list": "Frågeparametrar",
    "parameters": "Parametrar",
--- a/packages/hoppscotch-app/locales/tr.json
+++ b/packages/hoppscotch-app/locales/tr.json
@@ -362,7 +362,7 @@
    "name": "İstek adı",
    "new": "New Request",
    "override": "Override",
-    "override_help": "Set <xmp>Content-Type</xmp> in Headers",
+    "override_help": "Set <kbd>Content-Type</kbd> in Headers",
    "overriden": "Overridden",
    "parameter_list": "Sorgu parametreleri",
    "parameters": "Parametreler",
--- a/packages/hoppscotch-app/locales/tw.json
+++ b/packages/hoppscotch-app/locales/tw.json
@@ -362,7 +362,7 @@
    "name": "請求名稱",
    "new": "新請求",
    "override": "覆寫",
-    "override_help": "在標頭設置 <xmp>Content-Type</xmp>",
+    "override_help": "在標頭設置 <kbd>Content-Type</kbd>",
    "overriden": "已覆寫",
    "parameter_list": "查詢參數",
    "parameters": "參數",
--- a/packages/hoppscotch-app/locales/uk.json
+++ b/packages/hoppscotch-app/locales/uk.json
@@ -362,7 +362,7 @@
    "name": "Назва запиту",
    "new": "New Request",
    "override": "Override",
-    "override_help": "Set <xmp>Content-Type</xmp> in Headers",
+    "override_help": "Set <kbd>Content-Type</kbd> in Headers",
    "overriden": "Overridden",
    "parameter_list": "Параметри запиту",
    "parameters": "Параметри",
--- a/packages/hoppscotch-app/locales/vi.json
+++ b/packages/hoppscotch-app/locales/vi.json
@@ -362,7 +362,7 @@
    "name": "Yêu cầu tên",
    "new": "New Request",
    "override": "Override",
-    "override_help": "Set <xmp>Content-Type</xmp> in Headers",
+    "override_help": "Set <kbd>Content-Type</kbd> in Headers",
    "overriden": "Overridden",
    "parameter_list": "Tham số truy vấn",
    "parameters": "Thông số",
--- a/packages/hoppscotch-app/src/components/app/Header.vue
+++ b/packages/hoppscotch-app/src/components/app/Header.vue
@@ -22,7 +22,7 @@
        />
        <ButtonSecondary
          v-tippy="{ theme: 'tooltip', allowHTML: true }"
-          :title="`${t('app.search')} <xmp>/</xmp>`"
+          :title="`${t('app.search')} <kbd>/</kbd>`"
          :icon="IconSearch"
          class="rounded hover:bg-primaryDark focus-visible:bg-primaryDark"
          @click="invokeAction('modals.search.toggle')"
@@ -31,7 +31,7 @@
          v-tippy="{ theme: 'tooltip', allowHTML: true }"
          :title="`${
            mdAndLarger ? t('support.title') : t('app.options')
-          } <xmp>?</xmp>`"
+          } <kbd>?</kbd>`"
          :icon="IconLifeBuoy"
          class="rounded hover:bg-primaryDark focus-visible:bg-primaryDark"
          @click="invokeAction('modals.support.toggle')"
--- a/packages/hoppscotch-app/src/components/graphql/RequestOptions.vue
+++ b/packages/hoppscotch-app/src/components/graphql/RequestOptions.vue
@@ -21,7 +21,7 @@
              v-tippy="{ theme: 'tooltip', delay: [500, 20], allowHTML: true }"
              :title="`${t(
                'request.run'
-              )} <xmp>${getSpecialKey()}</xmp><xmp>G</xmp>`"
+              )} <kbd>${getSpecialKey()}</kbd><kbd>G</kbd>`"
              :label="`${t('request.run')}`"
              :icon="IconPlay"
              class="rounded-none !text-accent !hover:text-accentDark"
@@ -31,7 +31,7 @@
              v-tippy="{ theme: 'tooltip', delay: [500, 20], allowHTML: true }"
              :title="`${t(
                'request.save'
-              )} <xmp>${getSpecialKey()}</xmp><xmp>S</xmp>`"
+              )} <kbd>${getSpecialKey()}</kbd><kbd>S</kbd>`"
              :label="`${t('request.save')}`"
              :icon="IconSave"
              class="rounded-none"
--- a/packages/hoppscotch-app/src/components/graphql/Response.vue
+++ b/packages/hoppscotch-app/src/components/graphql/Response.vue
@@ -26,7 +26,7 @@
            v-tippy="{ theme: 'tooltip', allowHTML: true }"
            :title="`${t(
              'action.download_file'
-            )} <xmp>${getSpecialKey()}</xmp><xmp>J</xmp>`"
+            )} <kbd>${getSpecialKey()}</kbd><kbd>J</kbd>`"
            :icon="downloadResponseIcon"
            @click="downloadResponse"
          />
@@ -34,7 +34,7 @@
            v-tippy="{ theme: 'tooltip', allowHTML: true }"
            :title="`${t(
              'action.copy'
-            )} <xmp>${getSpecialKey()}</xmp><xmp>.</xmp>`"
+            )} <kbd>${getSpecialKey()}</kbd><kbd>.</kbd>`"
            :icon="copyResponseIcon"
            @click="copyResponse"
          />
--- a/packages/hoppscotch-app/src/components/lenses/renderers/HTMLLensRenderer.vue
+++ b/packages/hoppscotch-app/src/components/lenses/renderers/HTMLLensRenderer.vue
@@ -20,7 +20,7 @@
          v-tippy="{ theme: 'tooltip', allowHTML: true }"
          :title="`${
            previewEnabled ? t('hide.preview') : t('response.preview_html')
-          } <xmp>${getSpecialKey()}</xmp><xmp>Shift</xmp><xmp>P</xmp>`"
+          } <kbd>${getSpecialKey()}</kbd><kbd>Shift</kbd><kbd>P</kbd>`"
          :icon="!previewEnabled ? IconEye : IconEyeOff"
          @click.prevent="togglePreview"
        />
@@ -29,7 +29,7 @@
          v-tippy="{ theme: 'tooltip', allowHTML: true }"
          :title="`${t(
            'action.download_file'
-          )} <xmp>${getSpecialKey()}</xmp><xmp>J</xmp>`"
+          )} <kbd>${getSpecialKey()}</kbd><kbd>J</kbd>`"
          :icon="downloadIcon"
          @click="downloadResponse"
        />
@@ -38,7 +38,7 @@
          v-tippy="{ theme: 'tooltip', allowHTML: true }"
          :title="`${t(
            'action.copy'
-          )} <xmp>${getSpecialKey()}</xmp><xmp>.</xmp>`"
+          )} <kbd>${getSpecialKey()}</kbd><kbd>.</kbd>`"
          :icon="copyIcon"
          @click="copyResponse"
        />
--- a/packages/hoppscotch-app/src/components/lenses/renderers/ImageLensRenderer.vue
+++ b/packages/hoppscotch-app/src/components/lenses/renderers/ImageLensRenderer.vue
@@ -12,7 +12,7 @@
          v-tippy="{ theme: 'tooltip', allowHTML: true }"
          :title="`${t(
            'action.download_file'
-          )} <xmp>${getSpecialKey()}</xmp><xmp>J</xmp>`"
+          )} <kbd>${getSpecialKey()}</kbd><kbd>J</kbd>`"
          :icon="downloadIcon"
          @click="downloadResponse"
        />
--- a/packages/hoppscotch-app/src/components/lenses/renderers/JSONLensRenderer.vue
+++ b/packages/hoppscotch-app/src/components/lenses/renderers/JSONLensRenderer.vue
@@ -31,7 +31,7 @@
          v-tippy="{ theme: 'tooltip', allowHTML: true }"
          :title="`${t(
            'action.download_file'
-          )} <xmp>${getSpecialKey()}</xmp><xmp>J</xmp>`"
+          )} <kbd>${getSpecialKey()}</kbd><kbd>J</kbd>`"
          :icon="downloadIcon"
          @click="downloadResponse"
        />
@@ -40,7 +40,7 @@
          v-tippy="{ theme: 'tooltip', allowHTML: true }"
          :title="`${t(
            'action.copy'
-          )} <xmp>${getSpecialKey()}</xmp><xmp>.</xmp>`"
+          )} <kbd>${getSpecialKey()}</kbd><kbd>.</kbd>`"
          :icon="copyIcon"
          @click="copyResponse"
        />
--- a/packages/hoppscotch-app/src/components/lenses/renderers/PDFLensRenderer.vue
+++ b/packages/hoppscotch-app/src/components/lenses/renderers/PDFLensRenderer.vue
@@ -12,7 +12,7 @@
          v-tippy="{ theme: 'tooltip', allowHTML: true }"
          :title="`${t(
            'action.download_file'
-          )} <xmp>${getSpecialKey()}</xmp><xmp>J</xmp>`"
+          )} <kbd>${getSpecialKey()}</kbd><kbd>J</kbd>`"
          :icon="downloadIcon"
          @click="downloadResponse"
        />
--- a/packages/hoppscotch-app/src/components/lenses/renderers/RawLensRenderer.vue
+++ b/packages/hoppscotch-app/src/components/lenses/renderers/RawLensRenderer.vue
@@ -20,7 +20,7 @@
          v-tippy="{ theme: 'tooltip', allowHTML: true }"
          :title="`${t(
            'action.download_file'
-          )} <xmp>${getSpecialKey()}</xmp><xmp>J</xmp>`"
+          )} <kbd>${getSpecialKey()}</kbd><kbd>J</kbd>`"
          :icon="downloadIcon"
          @click="downloadResponse"
        />
@@ -29,7 +29,7 @@
          v-tippy="{ theme: 'tooltip', allowHTML: true }"
          :title="`${t(
            'action.copy'
-          )} <xmp>${getSpecialKey()}</xmp><xmp>.</xmp>`"
+          )} <kbd>${getSpecialKey()}</kbd><kbd>.</kbd>`"
          :icon="copyIcon"
          @click="copyResponse"
        />
--- a/packages/hoppscotch-app/src/components/lenses/renderers/XMLLensRenderer.vue
+++ b/packages/hoppscotch-app/src/components/lenses/renderers/XMLLensRenderer.vue
@@ -20,7 +20,7 @@
          v-tippy="{ theme: 'tooltip', allowHTML: true }"
          :title="`${t(
            'action.download_file'
-          )} <xmp>${getSpecialKey()}</xmp><xmp>J</xmp>`"
+          )} <kbd>${getSpecialKey()}</kbd><kbd>J</kbd>`"
          :icon="downloadIcon"
          @click="downloadResponse"
        />
@@ -29,7 +29,7 @@
          v-tippy="{ theme: 'tooltip', allowHTML: true }"
          :title="`${t(
            'action.copy'
-          )} <xmp>${getSpecialKey()}</xmp><xmp>.</xmp>`"
+          )} <kbd>${getSpecialKey()}</kbd><kbd>.</kbd>`"
          :icon="copyIcon"
          @click="copyResponse"
        />
--- a/packages/hoppscotch-app/src/components/smart/Item.vue
+++ b/packages/hoppscotch-app/src/components/smart/Item.vue
@@ -51,7 +51,7 @@
      class="items-center self-center ml-4 svg-icons"
      :class="{ 'text-accent': activeInfoIcon }"
    />
-    <div v-if="shortcut.length" class="ml-2 <sm:hidden font-medium">
+    <div v-if="shortcut.length" class="ml-4 <sm:hidden font-medium">
      <kbd
        v-for="(key, index) in shortcut"
        :key="`key-${index}`"
--- a/packages/hoppscotch-app/src/components/smart/Modal.vue
+++ b/packages/hoppscotch-app/src/components/smart/Modal.vue
@@ -43,8 +43,9 @@
              <h3 class="heading" :class="{ 'ml-4': !fullWidth }">
                {{ title }}
              </h3>
-              <span class="flex">
+              <span class="flex items-center">
                <slot name="actions"></slot>
+                <kbd class="mr-2 shortcut-key">ESC</kbd>
                <ButtonSecondary
                  v-if="dimissible"
                  v-tippy="{ theme: 'tooltip', delay: [500, 20] }"
--- a/packages/hoppscotch-app/src/helpers/editor/extensions/HoppEnvironment.ts
+++ b/packages/hoppscotch-app/src/helpers/editor/extensions/HoppEnvironment.ts
@@ -80,10 +80,10 @@ const cursorTooltipField = (aggregateEnvs: AggregateEnvironment[]) =>
        arrow: true,
        create() {
          const dom = document.createElement("span")
-          const xmp = document.createElement("xmp")
-          xmp.textContent = finalEnv
+          const kbd = document.createElement("kbd")
+          kbd.textContent = finalEnv
          dom.appendChild(document.createTextNode(`${envName} `))
-          dom.appendChild(xmp)
+          dom.appendChild(kbd)
          dom.className = "tippy-box"
          dom.dataset.theme = "tooltip"
          return { dom }