refactor: better shortcut indication

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 {

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",

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": "حدود",

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",

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": "参数",

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",

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",

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",

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": "Παράμετροι",

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",

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",

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",

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",

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": "פרמטרים",

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",

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",

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",

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": "파라미터",

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:",

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",

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",

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",

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",

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",

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": "Параметры",

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": "Параметри",

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",

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",

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": "參數",

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": "Параметри",

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ố",

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')"

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"

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"
           />

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"
         />

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"
         />

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"
         />

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"
         />

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"
         />

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"
         />

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}`"

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] }"

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")
+          const kbd = document.createElement("kbd")
-          xmp.textContent = finalEnv
+          kbd.textContent = finalEnv
           dom.appendChild(document.createTextNode(`${envName} `))
-          dom.appendChild(xmp)
+          dom.appendChild(kbd)
           dom.className = "tippy-box"
           dom.dataset.theme = "tooltip"
           return { dom }