refactor: minor ui improvements

assets/scss/styles.scss

@@ -38,7 +38,7 @@
 input::placeholder,
 textarea::placeholder,
 .CodeMirror-empty {
-  @apply text-secondaryDark;
+  @apply text-secondary;
   @apply opacity-25;
 }
 

components/graphql/RequestOptions.vue

@@ -356,6 +356,7 @@ const variableEditor = ref<any | null>(null)
 useCodemirror(variableEditor, variableString, {
   extendedEditorConfig: {
     mode: "application/ld+json",
+    placeholder: t("request.variables").toString(),
   },
   linter: jsonLinter,
   completer: null,
@@ -367,6 +368,7 @@ const schemaString = useReadonlyStream(props.conn.schema$, null)
 useCodemirror(queryEditor, gqlQueryString, {
   extendedEditorConfig: {
     mode: "graphql",
+    placeholder: t("request.query").toString(),
   },
   linter: createGQLQueryLinter(schemaString),
   completer: queryCompleter(schemaString),

components/graphql/Response.vue

@@ -52,6 +52,24 @@
         justify-center
       "
     >
+      <div class="flex space-x-2 pb-4">
+        <div class="flex flex-col space-y-4 items-end">
+          <span class="flex flex-1 items-center">
+            {{ $t("shortcut.general.command_menu") }}
+          </span>
+          <span class="flex flex-1 items-center">
+            {{ $t("shortcut.general.help_menu") }}
+          </span>
+        </div>
+        <div class="flex flex-col space-y-4">
+          <div class="flex">
+            <span class="shortcut-key">/</span>
+          </div>
+          <div class="flex">
+            <span class="shortcut-key">?</span>
+          </div>
+        </div>
+      </div>
       <ButtonSecondary
         :label="$t('app.documentation')"
         to="https://docs.hoppscotch.io"

components/http/CodegenModal.vue

@@ -46,13 +46,17 @@
       </div>
     </template>
     <template #footer>
-      <ButtonPrimary
+      <span class="flex">
-        ref="copyRequestCode"
+        <ButtonPrimary
-        :label="t('action.copy')"
+          :label="t('action.copy').toString()"
-        :svg="copyIcon"
+          :svg="copyIcon"
-        @click.native="copyRequestCode"
+          @click.native="copyRequestCode"
-      />
+        />
-      <ButtonSecondary :label="t('action.dismiss')" @click.native="hideModal" />
+        <ButtonSecondary
+          :label="t('action.dismiss').toString()"
+          @click.native="hideModal"
+        />
+      </span>
     </template>
   </SmartModal>
 </template>

components/http/ImportCurl.vue

@@ -13,7 +13,7 @@
       </div>
     </template>
     <template #footer>
-      <span>
+      <span class="flex">
         <ButtonPrimary
           :label="$t('import.title').toString()"
           @click.native="handleImport"

components/http/PreRequestScript.vue

@@ -82,7 +82,7 @@
 </template>
 
 <script setup lang="ts">
-import { reactive, ref } from "@nuxtjs/composition-api"
+import { reactive, ref, useContext } from "@nuxtjs/composition-api"
 import { usePreRequestScript } from "~/newstore/RESTSession"
 import snippets from "~/helpers/preRequestScriptSnippets"
 import "codemirror/mode/javascript/javascript"
@@ -90,6 +90,11 @@ import { useCodemirror } from "~/helpers/editor/codemirror"
 import linter from "~/helpers/editor/linting/preRequest"
 import completer from "~/helpers/editor/completion/preRequest"
 
+const {
+  app: { i18n },
+} = useContext()
+const t = i18n.t.bind(i18n)
+
 const preRequestScript = usePreRequestScript()
 
 const preRrequestEditor = ref<any | null>(null)
@@ -102,6 +107,7 @@ useCodemirror(
     extendedEditorConfig: {
       mode: "application/javascript",
       lineWrapping: linewrapEnabled,
+      placeholder: t("preRequest.javascript_code").toString(),
     },
     linter,
     completer,

components/http/RawBody.vue

@@ -106,6 +106,7 @@ useCodemirror(
     extendedEditorConfig: {
       lineWrapping: linewrapEnabled,
       mode: rawInputEditorLang,
+      placeholder: t("request.raw_body").toString(),
     },
     linter: null,
     completer: null,

components/http/ResponseMeta.vue

@@ -9,6 +9,38 @@
         justify-center
       "
     >
+      <div class="flex space-x-2 pb-4">
+        <div class="flex flex-col space-y-4 items-end">
+          <span class="flex flex-1 items-center">
+            {{ $t("shortcut.request.send_request") }}
+          </span>
+          <span class="flex flex-1 items-center">
+            {{ $t("shortcut.general.show_all") }}
+          </span>
+          <span class="flex flex-1 items-center">
+            {{ $t("shortcut.general.command_menu") }}
+          </span>
+          <span class="flex flex-1 items-center">
+            {{ $t("shortcut.general.help_menu") }}
+          </span>
+        </div>
+        <div class="flex flex-col space-y-4">
+          <div class="flex">
+            <span class="shortcut-key">{{ getSpecialKey() }}</span>
+            <span class="shortcut-key">G</span>
+          </div>
+          <div class="flex">
+            <span class="shortcut-key">{{ getSpecialKey() }}</span>
+            <span class="shortcut-key">K</span>
+          </div>
+          <div class="flex">
+            <span class="shortcut-key">/</span>
+          </div>
+          <div class="flex">
+            <span class="shortcut-key">?</span>
+          </div>
+        </div>
+      </div>
       <ButtonSecondary
         :label="$t('app.documentation')"
         to="https://docs.hoppscotch.io"
@@ -74,6 +106,7 @@
 import { computed } from "@nuxtjs/composition-api"
 import findStatusGroup from "~/helpers/findStatusGroup"
 import { HoppRESTResponse } from "~/helpers/types/HoppRESTResponse"
+import { getPlatformSpecialKey as getSpecialKey } from "~/helpers/platformutils"
 
 const props = defineProps<{
   response: HoppRESTResponse

components/http/Tests.vue

@@ -82,7 +82,7 @@
 </template>
 
 <script setup lang="ts">
-import { reactive, ref } from "@nuxtjs/composition-api"
+import { reactive, ref, useContext } from "@nuxtjs/composition-api"
 import { useTestScript } from "~/newstore/RESTSession"
 import testSnippets from "~/helpers/testSnippets"
 import "codemirror/mode/javascript/javascript"
@@ -90,6 +90,11 @@ import { useCodemirror } from "~/helpers/editor/codemirror"
 import linter from "~/helpers/editor/linting/testScript"
 import completer from "~/helpers/editor/completion/testScript"
 
+const {
+  app: { i18n },
+} = useContext()
+const t = i18n.t.bind(i18n)
+
 const testScript = useTestScript()
 
 const testScriptEditor = ref<any | null>(null)
@@ -102,6 +107,7 @@ useCodemirror(
     extendedEditorConfig: {
       mode: "application/javascript",
       lineWrapping: linewrapEnabled,
+      placeholder: t("test.javascript_code").toString(),
     },
     linter,
     completer,

components/smart/EnvInput.vue

@@ -483,7 +483,7 @@ export default defineComponent({
     line-height: 1.9;
 
     &::before {
-      @apply text-secondaryDark;
+      @apply text-secondary;
       @apply opacity-25;
       @apply pointer-events-none;