refactor(ui): minor ui improvements

assets/scss/styles.scss

@@ -56,6 +56,7 @@ body {
   @apply select-none;
   @apply overflow-x-hidden;
 
+  animation: fade 300ms forwards;
   font-size: var(--body-font-size);
   line-height: var(--body-line-height);
   overflow: overlay;
@@ -63,6 +64,15 @@ body {
   -webkit-touch-callout: none;
 }
 
+@keyframes fade {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
 .fade-enter-active,
 .fade-leave-active,
 .page-enter-active,
@@ -82,7 +92,9 @@ body {
 }
 
 .material-icons {
-  font-size: 133.4% !important;
+  font-size: var(--body-line-height) !important;
+  width: var(--body-line-height);
+  overflow: hidden;
 }
 
 .svg-icons {

assets/scss/themes.scss

@@ -1,6 +1,6 @@
 @mixin baseTheme {
-  --font-sans: "Inter", "sans-serif";
+  --font-sans: "Inter", sans-serif;
-  --font-mono: "Roboto Mono", "monospace";
+  --font-mono: "Roboto Mono", monospace;
   --font-icon: "Material Icons";
 }
 

components/app/Footer.vue

@@ -50,7 +50,7 @@
               />
               <SmartItem
                 :label="$t('app.whats_new')"
-                to="https://github.com/hoppscotch/hoppscotch/blob/main/CHANGELOG.md"
+                to="https://docs.hoppscotch.io/changelog"
                 blank
                 @click.native="$refs.options.tippy().hide()"
               />

components/app/Share.vue

@@ -87,7 +87,7 @@ export default {
       copyToClipboard(this.url)
       this.copyIcon = "done"
       this.$toast.success(this.$t("state.copied_to_clipboard").toString(), {
-        icon: "done",
+        icon: "content_paste",
       })
       setTimeout(() => (this.copyIcon = "content_copy"), 1000)
     },

components/app/Shortcuts.vue

@@ -55,9 +55,9 @@
           :key="`map-${mapIndex}`"
           class="space-y-4 py-4 px-6"
         >
-          <h5 class="font-semibold text-secondaryDark">
+          <h1 class="font-semibold text-secondaryDark">
             {{ $t(map.section) }}
-          </h5>
+          </h1>
           <div
             v-for="(shortcut, shortcutIndex) in map.shortcuts"
             :key="`map-${mapIndex}-shortcut-${shortcutIndex}`"

components/app/Support.vue

@@ -30,7 +30,7 @@
         <SmartItem
           icon="auto_awesome"
           :label="$t('app.whats_new')"
-          to="https://github.com/hoppscotch/hoppscotch/blob/main/CHANGELOG.md"
+          to="https://docs.hoppscotch.io/changelog"
           :description="$t('support.changelog')"
           info-icon="chevron_right"
           active

components/button/Primary.vue

@@ -59,7 +59,7 @@
         ]"
       />
       {{ label }}
-      <div v-if="shortcut.length && SHORTCUT_INDICATOR" class="ml-2">
+      <div v-if="shortcut.length" class="ml-2">
         <kbd
           v-for="(key, index) in shortcut"
           :key="`key-${index}`"
@@ -75,7 +75,6 @@
 
 <script lang="ts">
 import { defineComponent } from "@nuxtjs/composition-api"
-import { useSetting } from "~/newstore/settings"
 
 export default defineComponent({
   props: {
@@ -144,10 +143,5 @@ export default defineComponent({
       default: () => [],
     },
   },
-  setup() {
-    return {
-      SHORTCUT_INDICATOR: useSetting("SHORTCUT_INDICATOR"),
-    }
-  },
 })
 </script>

components/button/Secondary.vue

@@ -51,11 +51,18 @@
       ]"
     />
     {{ label }}
-    <div v-if="shortcut.length && SHORTCUT_INDICATOR" class="ml-2">
+    <div v-if="shortcut.length" class="ml-2">
       <kbd
         v-for="(key, index) in shortcut"
         :key="`key-${index}`"
-        class="bg-dividerLight text-secondaryLight ml-1 px-1 inline-flex"
+        class="
+          bg-dividerLight
+          rounded
+          text-secondaryLight
+          ml-1
+          px-1
+          inline-flex
+        "
       >
         {{ key }}
       </kbd>
@@ -65,7 +72,6 @@
 
 <script lang="ts">
 import { defineComponent } from "@nuxtjs/composition-api"
-import { useSetting } from "~/newstore/settings"
 
 export default defineComponent({
   props: {
@@ -122,10 +128,5 @@ export default defineComponent({
       default: () => [],
     },
   },
-  setup() {
-    return {
-      SHORTCUT_INDICATOR: useSetting("SHORTCUT_INDICATOR"),
-    }
-  },
 })
 </script>

components/collections/Add.vue

@@ -44,8 +44,8 @@ export default {
   methods: {
     addNewCollection() {
       if (!this.name) {
-        this.$toast.info(this.$t("collection.invalid_name"), {
+        this.$toast.error(this.$t("collection.invalid_name"), {
-          icon: "info",
+          icon: "error_outline",
         })
         return
       }

components/collections/AddFolder.vue

@@ -48,8 +48,8 @@ export default {
   methods: {
     addFolder() {
       if (!this.name) {
-        this.$toast.info(this.$t("collection.invalid_name"), {
+        this.$toast.error(this.$t("folder.invalid_name"), {
-          icon: "info",
+          icon: "error_outline",
         })
         return
       }

components/collections/Edit.vue

@@ -45,8 +45,8 @@ export default {
   methods: {
     saveCollection() {
       if (!this.name) {
-        this.$toast.info(this.$t("collection.invalid_name"), {
+        this.$toast.error(this.$t("collection.invalid_name"), {
-          icon: "info",
+          icon: "error_outline",
         })
         return
       }

components/collections/EditFolder.vue

@@ -45,8 +45,8 @@ export default {
   methods: {
     editFolder() {
       if (!this.name) {
-        this.$toast.info(this.$t("collection.invalid_name"), {
+        this.$toast.error(this.$t("folder.invalid_name"), {
-          icon: "info",
+          icon: "error_outline",
         })
         return
       }

components/collections/EditRequest.vue

@@ -44,8 +44,8 @@ export default {
   methods: {
     saveRequest() {
       if (!this.requestUpdateData.name) {
-        this.$toast.info(this.$t("collection.invalid_name"), {
+        this.$toast.error(this.$t("request.invalid_name"), {
-          icon: "info",
+          icon: "error_outline",
         })
         return
       }

components/collections/ImportExport.vue

@@ -43,7 +43,7 @@
               $refs.options.tippy().hide()
             "
           />
-          <SmartItem
+          <span
             v-tippy="{ theme: 'tooltip' }"
             :title="
               !currentUser
@@ -52,6 +52,8 @@
                 ? $t('export.require_github')
                 : null
             "
+          >
+            <SmartItem
               :disabled="
                 !currentUser
                   ? true
@@ -66,6 +68,7 @@
                 $refs.options.tippy().hide()
               "
             />
+          </span>
         </tippy>
       </span>
     </template>
@@ -225,7 +228,7 @@ export default defineComponent({
         })
         .catch((e) => {
           this.$toast.error(this.$t("error.something_went_wrong"), {
-            icon: "error",
+            icon: "error_outline",
           })
           console.error(e)
         })
@@ -405,7 +408,7 @@ export default defineComponent({
       document.body.appendChild(a)
       a.click()
       this.$toast.success(this.$t("state.download_started"), {
-        icon: "done",
+        icon: "downloading",
       })
       setTimeout(() => {
         document.body.removeChild(a)
@@ -419,7 +422,7 @@ export default defineComponent({
     },
     failedImport() {
       this.$toast.error(this.$t("import.failed"), {
-        icon: "error",
+        icon: "error_outline",
       })
     },
     parsePostmanCollection({ info, name, item }) {

components/collections/SaveRequest.vue

@@ -119,13 +119,13 @@ export default defineComponent({
     saveRequestAs() {
       if (!this.requestName) {
         this.$toast.error(this.$t("error.empty_req_name"), {
-          icon: "error",
+          icon: "error_outline",
         })
         return
       }
       if (this.picked == null) {
         this.$toast.error(this.$t("collection.select"), {
-          icon: "error",
+          icon: "error_outline",
         })
         return
       }
@@ -218,8 +218,8 @@ export default defineComponent({
       } else if (this.picked.pickedType === "gql-my-collection") {
         saveGraphqlRequestAs(`${this.picked.collectionIndex}`, requestUpdated)
       }
-      this.$toast.success("Requested added", {
+      this.$toast.success(this.$t("request.added"), {
-        icon: "done",
+        icon: "post_add",
       })
 
       this.hideModal()

components/collections/graphql/Add.vue

@@ -47,8 +47,8 @@ export default Vue.extend({
   methods: {
     addNewCollection() {
       if (!this.name) {
-        this.$toast.info(this.$t("collection.invalid_name").toString(), {
+        this.$toast.error(this.$t("collection.invalid_name").toString(), {
-          icon: "info",
+          icon: "error_outline",
         })
         return
       }

components/collections/graphql/Collection.vue

@@ -10,7 +10,7 @@
       @dragend="dragging = false"
     >
       <span
-        class="cursor-pointer flex w-10 justify-center items-center truncate"
+        class="cursor-pointer flex px-4 justify-center items-center"
         @click="toggleShowChildren()"
       >
         <i class="material-icons" :class="{ 'text-green-500': isSelected }">
@@ -93,7 +93,7 @@
       <CollectionsGraphqlFolder
         v-for="(folder, index) in collection.folders"
         :key="`folder-${index}`"
-        class="border-l border-dividerLight ml-5"
+        class="border-l border-dividerLight ml-6"
         :picked="picked"
         :saving-mode="savingMode"
         :folder="folder"
@@ -110,7 +110,7 @@
       <CollectionsGraphqlRequest
         v-for="(request, index) in collection.requests"
         :key="`request-${index}`"
-        class="border-l border-dividerLight ml-5"
+        class="border-l border-dividerLight ml-6"
         :picked="picked"
         :saving-mode="savingMode"
         :request="request"
@@ -131,7 +131,7 @@
           border-l border-dividerLight
           flex flex-col
           text-secondaryLight
-          ml-5
+          ml-6
           p-4
           items-center
           justify-center
@@ -187,8 +187,8 @@ export default Vue.extend({
     },
     getCollectionIcon() {
       if (this.isSelected) return "check_circle_outline"
-      else if (!this.showChildren && !this.isFiltered) return "arrow_right"
+      else if (!this.showChildren && !this.isFiltered) return "folder"
-      else if (this.showChildren || this.isFiltered) return "arrow_drop_down"
+      else if (this.showChildren || this.isFiltered) return "folder_open"
       else return "folder"
     },
   },
@@ -218,8 +218,7 @@ export default Vue.extend({
         this.$emit("select", { picked: null })
       }
       removeGraphqlCollection(this.collectionIndex)
-
+      this.$toast.success(this.$t("state.deleted").toString(), {
-      this.$toast.error(this.$t("state.deleted").toString(), {
         icon: "delete",
       })
     },

components/collections/graphql/Edit.vue

@@ -49,8 +49,8 @@ export default Vue.extend({
   methods: {
     saveCollection() {
       if (!this.name) {
-        this.$toast.info(this.$t("collection.invalid_name").toString(), {
+        this.$toast.error(this.$t("collection.invalid_name").toString(), {
-          icon: "info",
+          icon: "error_outline",
         })
         return
       }

components/collections/graphql/EditFolder.vue

@@ -50,8 +50,8 @@ export default Vue.extend({
   methods: {
     editFolder() {
       if (!this.name) {
-        this.$toast.info(this.$t("collection.invalid_name").toString(), {
+        this.$toast.error(this.$t("collection.invalid_name").toString(), {
-          icon: "info",
+          icon: "error_outline",
         })
         return
       }

components/collections/graphql/EditRequest.vue

@@ -49,8 +49,8 @@ export default Vue.extend({
   methods: {
     saveRequest() {
       if (!this.requestUpdateData.name) {
-        this.$toast.info(this.$t("collection.invalid_name").toString(), {
+        this.$toast.error(this.$t("collection.invalid_name").toString(), {
-          icon: "info",
+          icon: "error_outline",
         })
         return
       }

components/collections/graphql/Folder.vue

@@ -10,7 +10,7 @@
       @dragend="dragging = false"
     >
       <span
-        class="cursor-pointer flex w-10 justify-center items-center truncate"
+        class="cursor-pointer flex px-4 justify-center items-center"
         @click="toggleShowChildren()"
       >
         <i class="material-icons" :class="{ 'text-green-500': isSelected }">
@@ -89,7 +89,7 @@
       <CollectionsGraphqlFolder
         v-for="(subFolder, subFolderIndex) in folder.folders"
         :key="`subFolder-${subFolderIndex}`"
-        class="border-l border-dividerLight ml-5"
+        class="border-l border-dividerLight ml-6"
         :picked="picked"
         :saving-mode="savingMode"
         :folder="subFolder"
@@ -106,7 +106,7 @@
       <CollectionsGraphqlRequest
         v-for="(request, index) in folder.requests"
         :key="`request-${index}`"
-        class="border-l border-dividerLight ml-5"
+        class="border-l border-dividerLight ml-6"
         :picked="picked"
         :saving-mode="savingMode"
         :request="request"
@@ -130,7 +130,7 @@
           border-l border-dividerLight
           flex flex-col
           text-secondaryLight
-          ml-5
+          ml-6
           p-4
           items-center
           justify-center
@@ -185,8 +185,8 @@ export default Vue.extend({
     },
     getCollectionIcon() {
       if (this.isSelected) return "check_circle_outline"
-      else if (!this.showChildren && !this.isFiltered) return "arrow_right"
+      else if (!this.showChildren && !this.isFiltered) return "folder"
-      else if (this.showChildren || this.isFiltered) return "arrow_drop_down"
+      else if (this.showChildren || this.isFiltered) return "folder_open"
       else return "folder"
     },
   },
@@ -217,7 +217,7 @@ export default Vue.extend({
       }
 
       removeGraphqlFolder(this.folderPath)
-      this.$toast.error(this.$t("state.deleted").toString(), {
+      this.$toast.success(this.$t("state.deleted").toString(), {
         icon: "delete",
       })
     },

components/collections/graphql/ImportExport.vue

@@ -23,7 +23,7 @@
               $refs.options.tippy().hide()
             "
           />
-          <SmartItem
+          <span
             v-tippy="{ theme: 'tooltip' }"
             :title="
               !currentUser
@@ -32,6 +32,8 @@
                 ? $t('export.require_github')
                 : null
             "
+          >
+            <SmartItem
               :disabled="
                 !currentUser
                   ? true
@@ -46,6 +48,7 @@
                 $refs.options.tippy().hide()
               "
             />
+          </span>
         </tippy>
       </span>
     </template>
@@ -143,7 +146,7 @@ export default defineComponent({
         })
         .catch((e) => {
           this.$toast.error(this.$t("error.something_went_wrong"), {
-            icon: "error",
+            icon: "error_outline",
           })
           console.error(e)
         })
@@ -249,7 +252,7 @@ export default defineComponent({
       document.body.appendChild(a)
       a.click()
       this.$toast.success(this.$t("state.download_started"), {
-        icon: "done",
+        icon: "downloading",
       })
       setTimeout(() => {
         document.body.removeChild(a)
@@ -257,13 +260,13 @@ export default defineComponent({
       }, 1000)
     },
     fileImported() {
-      this.$toast.info(this.$t("state.file_imported"), {
+      this.$toast.success(this.$t("state.file_imported"), {
         icon: "folder_shared",
       })
     },
     failedImport() {
       this.$toast.error(this.$t("import.failed"), {
-        icon: "error",
+        icon: "error_outline",
       })
     },
     parsePostmanCollection({ info, name, item }) {

components/collections/graphql/Request.vue

@@ -12,8 +12,8 @@
         class="
           cursor-pointer
           flex
-          mx-2
+          px-2
-          w-12
+          w-16
           justify-center
           items-center
           truncate
@@ -171,7 +171,7 @@ export default Vue.extend({
       }
 
       removeGraphqlRequest(this.folderPath, this.requestIndex)
-      this.$toast.error(this.$t("state.deleted").toString(), {
+      this.$toast.success(this.$t("state.deleted").toString(), {
         icon: "delete",
       })
     },

components/collections/index.vue

@@ -351,7 +351,7 @@ export default defineComponent({
           })
           .catch((e) => {
             this.$toast.error(this.$t("error.something_went_wrong"), {
-              icon: "error",
+              icon: "error_outline",
             })
             console.error(e)
           })
@@ -361,8 +361,8 @@ export default defineComponent({
     // Intented to be called by CollectionEdit modal submit event
     updateEditingCollection(newName) {
       if (!newName) {
-        this.$toast.info(this.$t("collection.invalid_name"), {
+        this.$toast.error(this.$t("collection.invalid_name"), {
-          icon: "info",
+          icon: "error_outline",
         })
         return
       }
@@ -380,14 +380,13 @@ export default defineComponent({
         teamUtils
           .renameCollection(this.$apollo, newName, this.editingCollection.id)
           .then(() => {
-            // TODO: $t translations ?
+            this.$toast.success(this.$t("collection.renamed"), {
-            this.$toast.success("Collection Renamed", {
               icon: "done",
             })
           })
           .catch((e) => {
             this.$toast.error(this.$t("error.something_went_wrong"), {
-              icon: "error",
+              icon: "error_outline",
             })
             console.error(e)
           })
@@ -411,7 +410,7 @@ export default defineComponent({
           })
           .catch((e) => {
             this.$toast.error(this.$t("error.something_went_wrong"), {
-              icon: "error",
+              icon: "error_outline",
             })
             console.error(e)
           })
@@ -445,14 +444,14 @@ export default defineComponent({
             this.editingRequestIndex
           )
           .then(() => {
-            this.$toast.success("Request Renamed", {
+            this.$toast.success(this.$t("request.renamed"), {
               icon: "done",
             })
             this.$emit("update-team-collections")
           })
           .catch((e) => {
             this.$toast.error(this.$t("error.something_went_wrong"), {
-              icon: "error",
+              icon: "error_outline",
             })
             console.error(e)
           })
@@ -525,7 +524,7 @@ export default defineComponent({
             })
             .catch((e) => {
               this.$toast.error(this.$t("error.something_went_wrong"), {
-                icon: "error",
+                icon: "error_outline",
               })
               console.error(e)
             })
@@ -590,8 +589,7 @@ export default defineComponent({
         }
 
         removeRESTCollection(collectionIndex)
-
+        this.$toast.success(this.$t("state.deleted"), {
-        this.$toast.error(this.$t("state.deleted"), {
           icon: "delete",
         })
       } else if (collectionsType.type === "team-collections") {
@@ -619,13 +617,13 @@ export default defineComponent({
               },
             })
             .then(() => {
-              this.$toast.error(this.$t("state.deleted"), {
+              this.$toast.success(this.$t("state.deleted"), {
                 icon: "delete",
               })
             })
             .catch((e) => {
               this.$toast.error(this.$t("error.something_went_wrong"), {
-                icon: "error",
+                icon: "error_outline",
               })
               console.error(e)
             })
@@ -644,8 +642,7 @@ export default defineComponent({
           this.$emit("select", { picked: null })
         }
         removeRESTRequest(folderPath, requestIndex)
-
+        this.$toast.success(this.$t("state.deleted"), {
-        this.$toast.error(this.$t("state.deleted"), {
           icon: "delete",
         })
       } else if (this.collectionsType.type === "team-collections") {
@@ -661,13 +658,13 @@ export default defineComponent({
         teamUtils
           .deleteRequest(this.$apollo, requestIndex)
           .then(() => {
-            this.$toast.error(this.$t("state.deleted"), {
+            this.$toast.success(this.$t("state.deleted"), {
               icon: "delete",
             })
           })
           .catch((e) => {
             this.$toast.error(this.$t("error.something_went_wrong"), {
-              icon: "error",
+              icon: "error_outline",
             })
             console.error(e)
           })

components/collections/my/Collection.vue

@@ -10,7 +10,7 @@
       @dragend="dragging = false"
     >
       <span
-        class="cursor-pointer flex w-10 justify-center items-center truncate"
+        class="cursor-pointer flex px-4 justify-center items-center"
         @click="toggleShowChildren()"
       >
         <i class="material-icons" :class="{ 'text-green-500': isSelected }">
@@ -112,7 +112,7 @@
       <CollectionsMyFolder
         v-for="(folder, index) in collection.folders"
         :key="`folder-${index}`"
-        class="border-l border-dividerLight ml-5"
+        class="border-l border-dividerLight ml-6"
         :folder="folder"
         :folder-index="index"
         :folder-path="`${collectionIndex}/${index}`"
@@ -131,7 +131,7 @@
       <CollectionsMyRequest
         v-for="(request, index) in collection.requests"
         :key="`request-${index}`"
-        class="border-l border-dividerLight ml-5"
+        class="border-l border-dividerLight ml-6"
         :request="request"
         :collection-index="collectionIndex"
         :folder-index="-1"
@@ -156,7 +156,7 @@
           border-l border-dividerLight
           flex flex-col
           text-secondaryLight
-          ml-5
+          ml-6
           p-4
           items-center
           justify-center
@@ -212,8 +212,8 @@ export default {
     },
     getCollectionIcon() {
       if (this.isSelected) return "check_circle_outline"
-      else if (!this.showChildren && !this.isFiltered) return "arrow_right"
+      else if (!this.showChildren && !this.isFiltered) return "folder"
-      else if (this.showChildren || this.isFiltered) return "arrow_drop_down"
+      else if (this.showChildren || this.isFiltered) return "folder_open"
       else return "folder"
     },
   },

components/collections/my/Folder.vue

@@ -10,7 +10,7 @@
       @dragend="dragging = false"
     >
       <span
-        class="cursor-pointer flex w-10 justify-center items-center truncate"
+        class="cursor-pointer flex px-4 justify-center items-center"
         @click="toggleShowChildren()"
       >
         <i class="material-icons" :class="{ 'text-green-500': isSelected }">
@@ -94,7 +94,7 @@
       <CollectionsMyFolder
         v-for="(subFolder, subFolderIndex) in folder.folders"
         :key="`subFolder-${subFolderIndex}`"
-        class="border-l border-dividerLight ml-5"
+        class="border-l border-dividerLight ml-6"
         :folder="subFolder"
         :folder-index="subFolderIndex"
         :collection-index="collectionIndex"
@@ -113,7 +113,7 @@
       <CollectionsMyRequest
         v-for="(request, index) in folder.requests"
         :key="`request-${index}`"
-        class="border-l border-dividerLight ml-5"
+        class="border-l border-dividerLight ml-6"
         :request="request"
         :collection-index="collectionIndex"
         :folder-index="folderIndex"
@@ -139,7 +139,7 @@
           border-l border-dividerLight
           flex flex-col
           text-secondaryLight
-          ml-5
+          ml-6
           p-4
           items-center
           justify-center
@@ -199,8 +199,8 @@ export default {
     },
     getCollectionIcon() {
       if (this.isSelected) return "check_circle_outline"
-      else if (!this.showChildren && !this.isFiltered) return "arrow_right"
+      else if (!this.showChildren && !this.isFiltered) return "folder"
-      else if (this.showChildren || this.isFiltered) return "arrow_drop_down"
+      else if (this.showChildren || this.isFiltered) return "folder_open"
       else return "folder"
     },
   },
@@ -228,8 +228,7 @@ export default {
         this.$emit("select", { picked: null })
       }
       removeRESTFolder(this.folderPath)
-
+      this.$toast.success(this.$t("state.deleted"), {
-      this.$toast.error(this.$t("state.deleted"), {
         icon: "delete",
       })
     },

components/collections/my/Request.vue

@@ -12,8 +12,8 @@
         class="
           cursor-pointer
           flex
-          mx-2
+          px-2
-          w-12
+          w-16
           justify-center
           items-center
           truncate
@@ -28,7 +28,7 @@
         >
           check_circle_outline
         </i>
-        <span v-else>
+        <span v-else class="truncate">
           {{ request.method }}
         </span>
       </span>

components/collections/teams/Collection.vue

@@ -2,7 +2,7 @@
   <div class="flex flex-col">
     <div class="flex items-center group">
       <span
-        class="cursor-pointer flex w-10 justify-center items-center truncate"
+        class="cursor-pointer flex px-4 justify-center items-center"
         @click="toggleShowChildren()"
       >
         <i class="material-icons" :class="{ 'text-green-500': isSelected }">
@@ -108,7 +108,7 @@
       <CollectionsTeamsFolder
         v-for="(folder, index) in collection.children"
         :key="`folder-${folder}`"
-        class="border-l border-dividerLight ml-5"
+        class="border-l border-dividerLight ml-6"
         :folder="folder"
         :folder-index="index"
         :folder-path="`${collectionIndex}/${index}`"
@@ -128,7 +128,7 @@
       <CollectionsTeamsRequest
         v-for="(request, index) in collection.requests"
         :key="`request-${index}`"
-        class="border-l border-dividerLight ml-5"
+        class="border-l border-dividerLight ml-6"
         :request="request.request"
         :collection-index="collectionIndex"
         :folder-index="-1"
@@ -152,7 +152,7 @@
           border-l border-dividerLight
           flex flex-col
           text-secondaryLight
-          ml-5
+          ml-6
           p-4
           items-center
           justify-center
@@ -205,8 +205,8 @@ export default {
     },
     getCollectionIcon() {
       if (this.isSelected) return "check_circle_outline"
-      else if (!this.showChildren && !this.isFiltered) return "arrow_right"
+      else if (!this.showChildren && !this.isFiltered) return "folder"
-      else if (this.showChildren || this.isFiltered) return "arrow_drop_down"
+      else if (this.showChildren || this.isFiltered) return "folder_open"
       else return "folder"
     },
   },

components/collections/teams/Folder.vue

@@ -2,7 +2,7 @@
   <div class="flex flex-col">
     <div class="flex items-center group">
       <span
-        class="cursor-pointer flex w-10 justify-center items-center truncate"
+        class="cursor-pointer flex px-4 justify-center items-center"
         @click="toggleShowChildren()"
       >
         <i class="material-icons" :class="{ 'text-green-500': isSelected }">
@@ -91,7 +91,7 @@
       <CollectionsTeamsFolder
         v-for="(subFolder, subFolderIndex) in folder.children"
         :key="`subFolder-${subFolderIndex}`"
-        class="border-l border-dividerLight ml-5"
+        class="border-l border-dividerLight ml-6"
         :folder="subFolder"
         :folder-index="subFolderIndex"
         :collection-index="collectionIndex"
@@ -111,7 +111,7 @@
       <CollectionsTeamsRequest
         v-for="(request, index) in folder.requests"
         :key="`request-${index}`"
-        class="border-l border-dividerLight ml-5"
+        class="border-l border-dividerLight ml-6"
         :request="request.request"
         :collection-index="collectionIndex"
         :folder-index="folderIndex"
@@ -134,7 +134,7 @@
           border-l border-dividerLight
           flex flex-col
           text-secondaryLight
-          ml-5
+          ml-6
           p-4
           items-center
           justify-center
@@ -189,8 +189,8 @@ export default {
     },
     getCollectionIcon() {
       if (this.isSelected) return "check_circle_outline"
-      else if (!this.showChildren && !this.isFiltered) return "arrow_right"
+      else if (!this.showChildren && !this.isFiltered) return "folder"
-      else if (this.showChildren || this.isFiltered) return "arrow_drop_down"
+      else if (this.showChildren || this.isFiltered) return "folder_open"
       else return "folder"
     },
   },
@@ -221,14 +221,14 @@ export default {
         teamUtils
           .deleteCollection(this.$apollo, this.folder.id)
           .then(() => {
-            this.$toast.error(this.$t("state.deleted"), {
+            this.$toast.success(this.$t("state.deleted"), {
               icon: "delete",
             })
             this.$emit("update-team-collections")
           })
           .catch((e) => {
             this.$toast.error(this.$t("error.something_went_wrong"), {
-              icon: "error",
+              icon: "error_outline",
             })
             console.error(e)
           })

components/collections/teams/Request.vue

@@ -5,8 +5,8 @@
         class="
           cursor-pointer
           flex
-          mx-2
+          px-2
-          w-12
+          w-16
           justify-center
           items-center
           truncate

components/environments/Add.vue

@@ -47,8 +47,8 @@ export default Vue.extend({
   methods: {
     addNewEnvironment() {
       if (!this.name) {
-        this.$toast.info(this.$t("environment.invalid_name").toString(), {
+        this.$toast.error(this.$t("environment.invalid_name").toString(), {
-          icon: "info",
+          icon: "error_outline",
         })
         return
       }

components/environments/Edit.vue

@@ -159,7 +159,7 @@ export default defineComponent({
     clearContent() {
       this.vars = []
       this.clearIcon = "done"
-      this.$toast.info(this.$t("state.cleared").toString(), {
+      this.$toast.success(this.$t("state.cleared").toString(), {
         icon: "clear_all",
       })
       setTimeout(() => (this.clearIcon = "clear_all"), 1000)
@@ -175,8 +175,8 @@ export default defineComponent({
     },
     saveEnvironment() {
       if (!this.name) {
-        this.$toast.info(this.$t("environment.invalid_name").toString(), {
+        this.$toast.error(this.$t("environment.invalid_name").toString(), {
-          icon: "info",
+          icon: "error_outline",
         })
         return
       }

components/environments/Environment.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="flex items-center group">
     <span
-      class="cursor-pointer flex w-10 justify-center items-center truncate"
+      class="cursor-pointer flex px-4 justify-center items-center"
       @click="$emit('edit-environment')"
     >
       <i class="material-icons">layers</i>
@@ -82,7 +82,7 @@ export default Vue.extend({
     removeEnvironment() {
       if (this.environmentIndex !== "Global")
         deleteEnvironment(this.environmentIndex)
-      this.$toast.error(this.$t("state.deleted").toString(), {
+      this.$toast.success(this.$t("state.deleted").toString(), {
         icon: "delete",
       })
     },

components/environments/ImportExport.vue

@@ -23,7 +23,7 @@
               $refs.options.tippy().hide()
             "
           />
-          <SmartItem
+          <span
             v-tippy="{ theme: 'tooltip' }"
             :title="
               !currentUser
@@ -32,6 +32,8 @@
                 ? $t('export.require_github')
                 : null
             "
+          >
+            <SmartItem
               :disabled="
                 !currentUser
                   ? true
@@ -46,6 +48,7 @@
                 $refs.options.tippy().hide()
               "
             />
+          </span>
         </tippy>
       </span>
     </template>
@@ -143,7 +146,7 @@ export default defineComponent({
         })
         .catch((e) => {
           this.$toast.error(this.$t("error.something_went_wrong"), {
-            icon: "error",
+            icon: "error_outline",
           })
           console.error(e)
         })
@@ -227,7 +230,7 @@ export default defineComponent({
       document.body.appendChild(a)
       a.click()
       this.$toast.success(this.$t("state.download_started"), {
-        icon: "done",
+        icon: "downloading",
       })
       setTimeout(() => {
         document.body.removeChild(a)
@@ -235,7 +238,7 @@ export default defineComponent({
       }, 1000)
     },
     fileImported() {
-      this.$toast.info(this.$t("state.file_imported"), {
+      this.$toast.success(this.$t("state.file_imported"), {
         icon: "folder_shared",
       })
     },

components/firebase/Login.vue

@@ -163,7 +163,7 @@ export default {
   },
   methods: {
     showLoginSuccess() {
-      this.$toast.info(this.$t("auth.login_success"), {
+      this.$toast.success(this.$t("auth.login_success"), {
         icon: "vpn_key",
       })
     },
@@ -222,7 +222,6 @@ export default {
 
             return
           }
-
           this.$toast.info(`${this.$t("auth.account_exists")}`, {
             icon: "vpn_key",
             duration: null,
@@ -241,7 +240,7 @@ export default {
           })
         } else {
           this.$toast.error(this.$t("error.something_went_wrong"), {
-            icon: "error",
+            icon: "error_outline",
           })
         }
       }
@@ -305,7 +304,6 @@ export default {
 
             return
           }
-
           this.$toast.info(`${this.$t("auth.account_exists")}`, {
             icon: "vpn_key",
             duration: null,
@@ -324,7 +322,7 @@ export default {
           })
         } else {
           this.$toast.error(this.$t("error.something_went_wrong"), {
-            icon: "error",
+            icon: "error_outline",
           })
         }
       }
@@ -346,7 +344,7 @@ export default {
         .catch((e) => {
           console.error(e)
           this.$toast.error(e.message, {
-            icon: "error",
+            icon: "error_outline",
           })
           this.signingInWithEmail = false
         })

components/firebase/Logout.vue

@@ -31,14 +31,13 @@ export default Vue.extend({
     async logout() {
       try {
         await signOutUser()
-
+        this.$toast.success(this.$t("auth.logged_out").toString(), {
-        this.$toast.info(this.$t("auth.logged_out").toString(), {
           icon: "vpn_key",
         })
       } catch (e) {
         console.error(e)
         this.$toast.error(this.$t("error.something_went_wrong").toString(), {
-          icon: "error",
+          icon: "error_outline",
         })
       }
     },

components/graphql/QueryEditor.vue

@@ -182,7 +182,7 @@ export default {
         this.$emit("update-query", gql.print(gql.parse(this.editor.getValue())))
       } catch (e) {
         this.$toast.error(this.$t("error.gql_prettify_invalid_query"), {
-          icon: "error",
+          icon: "error_outline",
         })
       }
     },

components/graphql/RequestOptions.vue

@@ -23,7 +23,6 @@
             <div class="flex">
               <ButtonSecondary
                 :label="$t('request.run')"
-                :shortcut="[getSpecialKey(), 'Enter']"
                 icon="play_arrow"
                 class="rounded-none !text-accent"
                 @click.native="runQuery()"
@@ -401,7 +400,7 @@ export default defineComponent({
         nuxt.value.$loading.finish()
 
         $toast.error(`${e} ${t("error.f12_details").toString()}`, {
-          icon: "error",
+          icon: "error_outline",
         })
         console.error(e)
       }

components/graphql/Response.vue

@@ -152,7 +152,7 @@ export default defineComponent({
       a.click()
       downloadResponseIcon.value = "done"
       $toast.success(t("state.download_started").toString(), {
-        icon: "done",
+        icon: "downloading",
       })
       setTimeout(() => {
         document.body.removeChild(a)

components/graphql/Sidebar.vue

@@ -416,7 +416,7 @@ export default defineComponent({
       a.click()
       downloadSchemaIcon.value = "done"
       $toast.success(t("state.download_started").toString(), {
-        icon: "done",
+        icon: "downloading",
       })
       setTimeout(() => {
         document.body.removeChild(a)

components/history/index.vue

@@ -136,8 +136,7 @@ export default defineComponent({
     clearHistory() {
       if (this.page === "rest") clearRESTHistory()
       else clearGraphqlHistory()
-
+      this.$toast.success(this.$t("state.history_deleted").toString(), {
-      this.$toast.error(this.$t("state.history_deleted").toString(), {
         icon: "delete",
       })
     },
@@ -147,8 +146,7 @@ export default defineComponent({
     deleteHistory(entry: any) {
       if (this.page === "rest") deleteRESTHistoryEntry(entry)
       else deleteGraphqlHistoryEntry(entry)
-
+      this.$toast.success(this.$t("state.deleted").toString(), {
-      this.$toast.error(this.$t("state.deleted").toString(), {
         icon: "delete",
       })
     },

components/history/rest/Card.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="flex items-center group">
     <span
-      class="cursor-pointer flex mx-2 w-12 justify-center items-center truncate"
+      class="cursor-pointer flex px-2 w-16 justify-center items-center truncate"
       :class="entryStatus.className"
       data-testid="restore_history_entry"
       :title="duration"
@@ -32,7 +32,7 @@
       icon="remove_circle_outline"
       color="red"
       :title="$t('action.remove')"
-      class="group-hover:inline-flex hidden"
+      class="hidden group-hover:inline-flex"
       data-testid="delete_history_entry"
       @click.native="$emit('delete-entry')"
     />

components/http/CodegenModal.vue

@@ -140,7 +140,7 @@ export default defineComponent({
       copyToClipboard(this.requestCode)
       this.copyIcon = "done"
       this.$toast.success(this.$t("state.copied_to_clipboard").toString(), {
-        icon: "done",
+        icon: "content_paste",
       })
       setTimeout(() => (this.copyIcon = "content_copy"), 1000)
     },

components/http/ImportCurl.vue

@@ -128,7 +128,7 @@ export default defineComponent({
       } catch (e) {
         console.error(e)
         this.$toast.error(this.$t("error.curl_invalid_format").toString(), {
-          icon: "error",
+          icon: "error_outline",
         })
       }
       this.hideModal()

components/http/RawBody.vue

@@ -108,7 +108,7 @@ export default defineComponent({
           this.rawParamsBody = target.result
         }
         reader.readAsText(file)
-        this.$toast.info(this.$t("state.file_imported"), {
+        this.$toast.success(this.$t("state.file_imported"), {
           icon: "attach_file",
         })
       } else {
@@ -127,7 +127,7 @@ export default defineComponent({
       } catch (e) {
         console.error(e)
         this.$toast.error(`${this.$t("error.json_prettify_invalid_body")}`, {
-          icon: "error",
+          icon: "error_outline",
         })
       }
     },

components/http/Request.vue

@@ -1,7 +1,8 @@
 <template>
-  <div class="bg-primary flex space-x-2 p-4 top-0 z-10 sticky">
+  <div class="bg-primary flex p-4 top-0 z-10 sticky">
     <div class="flex flex-1">
       <div class="flex relative">
+        <label for="method">
           <tippy
             ref="methodOptions"
             interactive
@@ -29,6 +30,7 @@
                   "
                   :value="newMethod"
                   :readonly="!isCustomMethod"
+                  :placeholder="$t('request.method')"
                   @input="onSelectMethod($event.target.value)"
                 />
               </span>
@@ -40,6 +42,7 @@
               @click.native="onSelectMethod(method)"
             />
           </tippy>
+        </label>
       </div>
       <div class="flex flex-1">
         <SmartEnvInput
@@ -50,7 +53,6 @@
           bg-primaryLight
           border border-divider
           flex
-          rounded-r
           flex-1
           text-secondaryDark
           py-1
@@ -68,7 +70,6 @@
           class="
             bg-primaryLight
             border border-divider
-            rounded-r
             flex
             text-secondaryDark
             w-full
@@ -88,9 +89,8 @@
     <div class="flex">
       <ButtonPrimary
         id="send"
-        class="rounded-r-none flex-1 min-w-20"
+        class="rounded-none flex-1 min-w-24"
         :label="!loading ? $t('action.send') : $t('action.cancel')"
-        :shortcut="[getSpecialKey(), 'G']"
         @click.native="!loading ? newSendRequest() : cancelRequest()"
       />
       <span class="flex">
@@ -136,10 +136,10 @@
         </tippy>
       </span>
       <ButtonSecondary
-        class="rounded-r-none flex-1 ml-2"
+        class="rounded-r-none ml-2"
         :label="$t('request.save')"
-        :shortcut="[getSpecialKey(), 'S']"
         outline
+        icon="save"
         @click.native="saveRequest()"
       />
       <span class="flex">
@@ -223,7 +223,6 @@ import {
   getRESTRequest,
 } from "~/newstore/RESTSession"
 import { editRESTRequest } from "~/newstore/collections"
-import { getPlatformSpecialKey } from "~/helpers/platformutils"
 import { runRESTRequest$ } from "~/helpers/RequestRunner"
 import {
   useStreamSubscriber,
@@ -339,8 +338,8 @@ export default defineComponent({
           .catch(() => {})
       } else {
         copyToClipboard(window.location.href)
-        $toast.info(t("state.copied_to_clipboard").toString(), {
+        $toast.success(t("state.copied_to_clipboard").toString(), {
-          icon: "done",
+          icon: "content_paste",
         })
       }
     }
@@ -401,7 +400,7 @@ export default defineComponent({
         }
       }
       $toast.success(t("request.saved").toString(), {
-        icon: "done",
+        icon: "playlist_add_check",
       })
     }
 
@@ -431,7 +430,6 @@ export default defineComponent({
       loading,
       newSendRequest,
       requestName: useRESTRequestName(),
-      getSpecialKey: getPlatformSpecialKey,
       showCurlImportModal,
       showCodegenModal,
       showSaveRequestModal,

components/lenses/renderers/HTMLLensRenderer.vue

@@ -97,7 +97,7 @@ export default {
       a.click()
       this.downloadIcon = "done"
       this.$toast.success(this.$t("state.download_started"), {
-        icon: "done",
+        icon: "downloading",
       })
       setTimeout(() => {
         document.body.removeChild(a)
@@ -109,7 +109,7 @@ export default {
       copyToClipboard(this.responseBodyText)
       this.copyIcon = "done"
       this.$toast.success(this.$t("state.copied_to_clipboard"), {
-        icon: "done",
+        icon: "content_paste",
       })
       setTimeout(() => (this.copyIcon = "content_copy"), 1000)
     },

components/lenses/renderers/ImageLensRenderer.vue

@@ -102,7 +102,7 @@ export default {
       a.click()
       this.downloadIcon = "done"
       this.$toast.success(this.$t("state.download_started"), {
-        icon: "done",
+        icon: "downloading",
       })
       setTimeout(() => {
         document.body.removeChild(a)

components/lenses/renderers/JSONLensRenderer.vue

@@ -101,7 +101,7 @@ export default {
       a.click()
       this.downloadIcon = "done"
       this.$toast.success(this.$t("state.download_started"), {
-        icon: "done",
+        icon: "downloading",
       })
       setTimeout(() => {
         document.body.removeChild(a)
@@ -113,7 +113,7 @@ export default {
       copyToClipboard(this.responseBodyText)
       this.copyIcon = "done"
       this.$toast.success(this.$t("state.copied_to_clipboard"), {
-        icon: "done",
+        icon: "content_paste",
       })
       setTimeout(() => (this.copyIcon = "content_copy"), 1000)
     },

components/lenses/renderers/RawLensRenderer.vue

@@ -93,7 +93,7 @@ export default {
       a.click()
       this.downloadIcon = "done"
       this.$toast.success(this.$t("state.download_started"), {
-        icon: "done",
+        icon: "downloading",
       })
       setTimeout(() => {
         document.body.removeChild(a)
@@ -105,7 +105,7 @@ export default {
       copyToClipboard(this.responseBodyText)
       this.copyIcon = "done"
       this.$toast.success(this.$t("state.copied_to_clipboard"), {
-        icon: "done",
+        icon: "content_paste",
       })
       setTimeout(() => (this.copyIcon = "content_copy"), 1000)
     },

components/lenses/renderers/XMLLensRenderer.vue

@@ -92,7 +92,7 @@ export default {
       a.click()
       this.downloadIcon = "done"
       this.$toast.success(this.$t("state.download_started"), {
-        icon: "done",
+        icon: "downloading",
       })
       setTimeout(() => {
         document.body.removeChild(a)
@@ -104,7 +104,7 @@ export default {
       copyToClipboard(this.responseBodyText)
       this.copyIcon = "done"
       this.$toast.success(this.$t("state.copied_to_clipboard"), {
-        icon: "done",
+        icon: "content_paste",
       })
       setTimeout(() => (this.copyIcon = "content_copy"), 1000)
     },

components/realtime/Mqtt.vue

@@ -280,7 +280,7 @@ export default defineComponent({
         })
       } else {
         this.$toast.error(this.$t("error.something_went_wrong"), {
-          icon: "error",
+          icon: "error_outline",
         })
       }
       this.manualDisconnect = false

components/realtime/Socketio.vue

@@ -282,7 +282,7 @@ export default defineComponent({
       } catch (e) {
         this.handleError(e)
         this.$toast.error(this.$t("error.something_went_wrong"), {
-          icon: "error",
+          icon: "error_outline",
         })
       }
 

components/realtime/Sse.vue

@@ -187,7 +187,7 @@ export default {
         } catch (e) {
           this.handleSSEError(e)
           this.$toast.error(this.$t("error.something_went_wrong"), {
-            icon: "error",
+            icon: "error_outline",
           })
         }
       } else {

components/realtime/Websocket.vue

@@ -322,7 +322,7 @@ export default defineComponent({
       } catch (e) {
         this.handleError(e)
         this.$toast.error(this.$t("error.something_went_wrong"), {
-          icon: "error",
+          icon: "error_outline",
         })
       }
 
@@ -406,7 +406,7 @@ export default defineComponent({
     deleteProtocol({ index }) {
       const oldProtocols = this.protocols.slice()
       this.$delete(this.protocols, index)
-      this.$toast.error(this.$t("state.deleted"), {
+      this.$toast.success(this.$t("state.deleted"), {
         icon: "delete",
         action: {
           text: this.$t("action.undo"),

components/teams/Add.vue

@@ -47,14 +47,14 @@ export default {
       // We clear it early to give the UI a snappy feel
       this.name = ""
       if (!name) {
-        this.$toast.info(this.$t("empty.team_name"), {
+        this.$toast.error(this.$t("empty.team_name"), {
-          icon: "info",
+          icon: "error_outline",
         })
         return
       }
       if (name !== null && name.replace(/\s/g, "").length < 6) {
         this.$toast.error(this.$t("team.name_length_insufficient"), {
-          icon: "error",
+          icon: "error_outline",
         })
         return
       }

components/teams/Edit.vue

@@ -251,7 +251,7 @@ export default defineComponent({
         })
         .catch((e) => {
           this.$toast.error(this.$t("error.something_went_wrong"), {
-            icon: "error",
+            icon: "error_outline",
           })
           console.error(e)
         })
@@ -275,7 +275,7 @@ export default defineComponent({
         this.$data.rename.replace(/\s/g, "").length < 6
       ) {
         this.$toast.error(this.$t("team.name_length_insufficient"), {
-          icon: "error",
+          icon: "error_outline",
         })
         return
       }
@@ -283,7 +283,7 @@ export default defineComponent({
       this.$data.newMembers.forEach((element) => {
         if (!this.validateEmail(element.key)) {
           this.$toast.error(this.$t("team.invalid_email_format"), {
-            icon: "error",
+            icon: "error_outline",
           })
           invalidEmail = true
         }
@@ -293,7 +293,7 @@ export default defineComponent({
       this.$data.newMembers.forEach((element) => {
         if (!element.value) {
           this.$toast.error(this.$t("invalid_member_permission"), {
-            icon: "error",
+            icon: "error_outline",
           })
           invalidPermission = true
         }
@@ -315,7 +315,7 @@ export default defineComponent({
           })
           .catch((e) => {
             this.$toast.error(e, {
-              icon: "done",
+              icon: "error_outline",
             })
             console.error(e)
           })
@@ -335,7 +335,7 @@ export default defineComponent({
           })
           .catch((e) => {
             this.$toast.error(e, {
-              icon: "done",
+              icon: "error_outline",
             })
             console.error(e)
           })
@@ -345,7 +345,7 @@ export default defineComponent({
           this.name === this.$data.rename ? this.name : this.$data.rename
         if (!/\S/.test(newName))
           return this.$toast.error(this.$t("empty.team_name"), {
-            icon: "error",
+            icon: "error_outline",
           })
         // Call to the graphql mutation
         if (this.name !== this.rename)
@@ -358,7 +358,7 @@ export default defineComponent({
             })
             .catch((e) => {
               this.$toast.error(this.$t("error.something_went_wrong"), {
-                icon: "error",
+                icon: "error_outline",
               })
               console.error(e)
             })

components/teams/Team.vue

@@ -88,7 +88,7 @@ export default {
         })
         .catch((e) => {
           this.$toast.error(this.$t("error.something_went_wrong"), {
-            icon: "error",
+            icon: "error_outline",
           })
           console.error(e)
         })
@@ -104,7 +104,7 @@ export default {
         })
         .catch((e) => {
           this.$toast.error(this.$t("error.something_went_wrong"), {
-            icon: "error",
+            icon: "error_outline",
           })
           console.error(e)
         })

layouts/default.vue

@@ -155,7 +155,7 @@ export default defineComponent({
       workbox.addEventListener("installed", (event: any) => {
         if (event.isUpdate) {
           this.$toast.show(this.$t("app.new_version_found").toString(), {
-            icon: "info",
+            icon: "download_for_offline",
             duration: 0,
             action: [
               {

locales/en.json

@@ -46,7 +46,7 @@
     "reload": "Reload",
     "home": "Home",
     "invite": "Invite",
-    "invite_description": "In Hoppscotch, we designed a simple and intuitive interface for creating and managing your APIs. Hoppscotch is a tool that helps you build, test, document and share your APIs.",
+    "invite_description": "Hoppscotch is an open source API development ecosystem. We designed a simple and intuitive interface for creating and managing your APIs. Hoppscotch is a tool that helps you build, test, document and share your APIs.",
     "invite_your_friends": "Invite your friends",
     "join_discord_community": "Join our Discord community",
     "keyboard_shortcuts": "Keyboard shortcuts",
@@ -94,11 +94,12 @@
   "collection": {
     "created": "Collection created",
     "edit": "Edit Collection",
-    "invalid_name": "Please provide a valid name for the collection",
+    "invalid_name": "Please provide a name for the collection",
     "my_collections": "My Collections",
     "name": "My New Collection",
     "new": "New Collection",
     "save_as": "Save as",
+    "renamed": "Collection renamed",
     "select": "Select a Collection",
     "select_location": "Select location",
     "select_team": "Select a team",
@@ -147,7 +148,7 @@
   "environment": {
     "create_new": "Create new environment",
     "edit": "Edit Environment",
-    "invalid_name": "Please provide a valid name for the environment",
+    "invalid_name": "Please provide a name for the environment",
     "new": "New Environment",
     "no_environment": "No environment",
     "select": "Select environment",
@@ -175,6 +176,7 @@
   "folder": {
     "created": "Folder created",
     "edit": "Edit Folder",
+    "invalid_name": "Please provide a name for the folder",
     "new": "New Folder",
     "renamed": "Folder renamed"
   },
@@ -255,9 +257,12 @@
     "body": "Request Body",
     "choose_language": "Choose language",
     "content_type": "Content Type",
+    "invalid_name": "Please provide a name for the request",
     "copy_link": "Copy link",
     "duration": "Duration",
+    "added": "Request added",
     "enter_curl": "Enter cURL",
+    "renamed": "Request renamed",
     "generate_code": "Generate code",
     "generated_code": "Generated code",
     "header_list": "Header List",
@@ -325,7 +330,6 @@
     "proxy_use_toggle": "Use the proxy middleware to send requests",
     "read_the": "Read the",
     "reset_default": "Reset to default",
-    "shortcuts_indicator": "Shortcuts indicator",
     "sync": "Synchronise",
     "sync_collections": "Collections",
     "sync_description": "These settings are synced to cloud.",

newstore/settings.ts

@@ -47,7 +47,6 @@ export type SettingsType = {
   THEME_COLOR: HoppAccentColor
   BG_COLOR: HoppBgColor
   TELEMETRY_ENABLED: boolean
-  SHORTCUT_INDICATOR: boolean
   LEFT_SIDEBAR: boolean
   RIGHT_SIDEBAR: boolean
   ZEN_MODE: boolean
@@ -73,7 +72,6 @@ export const defaultSettings: SettingsType = {
   THEME_COLOR: "blue",
   BG_COLOR: "system",
   TELEMETRY_ENABLED: true,
-  SHORTCUT_INDICATOR: false,
   LEFT_SIDEBAR: true,
   RIGHT_SIDEBAR: true,
   ZEN_MODE: false,

pages/documentation.vue

@@ -119,7 +119,7 @@
                   sticky
                 "
               >
-                <div
+                <span
                   v-tippy="{ theme: 'tooltip' }"
                   :title="
                     !currentUser
@@ -140,7 +140,7 @@
                     :label="$t('export.create_secret_gist')"
                     @click.native="createDocsGist"
                   />
-                </div>
+                </span>
               </div>
               <div
                 v-for="(collection, index) in items"
@@ -236,7 +236,7 @@ export default defineComponent({
         })
         .catch((e) => {
           this.$toast.error(this.$t("error.something_went_wrong"), {
-            icon: "error",
+            icon: "error_outline",
           })
           console.error(e)
         })
@@ -250,7 +250,7 @@ export default defineComponent({
           this.collectionJSON = target.result
         }
         reader.readAsText(file)
-        this.$toast.info(this.$t("state.file_imported"), {
+        this.$toast.success(this.$t("state.file_imported"), {
           icon: "attach_file",
         })
       } else {
@@ -287,7 +287,7 @@ export default defineComponent({
         this.items = JSON.parse(this.collectionJSON)
         this.assignIDs(this.items, "", "#")
         this.$toast.clear()
-        this.$toast.info(this.$t("state.docs_generated"), {
+        this.$toast.success(this.$t("state.docs_generated"), {
           icon: "book",
         })
         const docsMarkdown = Mustache.render(
@@ -325,7 +325,7 @@ export default defineComponent({
       } catch (e) {
         console.error(e)
         this.$toast.error(this.$t("error.something_went_wrong"), {
-          icon: "error",
+          icon: "error_outline",
         })
       }
     },

pages/settings.vue

@@ -185,19 +185,6 @@
                   }}
                 </SmartToggle>
               </div>
-              <div class="flex items-center">
-                <SmartToggle
-                  :on="SHORTCUT_INDICATOR"
-                  @change="toggleSetting('SHORTCUT_INDICATOR')"
-                >
-                  {{ $t("settings.shortcuts_indicator") }}
-                  {{
-                    SHORTCUT_INDICATOR
-                      ? $t("state.enabled")
-                      : $t("state.disabled")
-                  }}
-                </SmartToggle>
-              </div>
               <div class="flex items-center">
                 <SmartToggle
                   :on="LEFT_SIDEBAR"
@@ -385,7 +372,6 @@ export default defineComponent({
       SYNC_ENVIRONMENTS: useSetting("syncEnvironments"),
       SYNC_HISTORY: useSetting("syncHistory"),
       TELEMETRY_ENABLED: useSetting("TELEMETRY_ENABLED"),
-      SHORTCUT_INDICATOR: useSetting("SHORTCUT_INDICATOR"),
       LEFT_SIDEBAR: useSetting("LEFT_SIDEBAR"),
       ZEN_MODE: useSetting("ZEN_MODE"),
       currentUser: useReadonlyStream(currentUser$, currentUser$.value),
@@ -464,7 +450,7 @@ export default defineComponent({
     resetProxy() {
       applySetting("PROXY_URL", `https://proxy.hoppscotch.io/`)
       this.clearIcon = "done"
-      this.$toast.info(this.$t("state.cleared").toString(), {
+      this.$toast.success(this.$t("state.cleared").toString(), {
         icon: "clear_all",
       })
       setTimeout(() => (this.clearIcon = "clear_all"), 1000)