refactor: remove icons from toast

packages/hoppscotch-app/assets/scss/styles.scss

@@ -313,7 +313,7 @@ pre.ace_editor {
     &.toasted-primary {
       @apply bg-tooltip;
       @apply text-primary;
-      @apply justify-start;
+      @apply justify-between;
       @apply shadow;
       @apply font-medium;
       @apply transition;

packages/hoppscotch-app/components/app/Header.vue

@@ -160,12 +160,11 @@ onMounted(() => {
 
   const cookiesAllowed = getLocalConfig("cookiesAllowed") === "yes"
   if (!cookiesAllowed) {
-    $toast.show(t("app.we_use_cookies").toString(), {
+    $toast.show(`${t("app.we_use_cookies")}`, {
-      icon: "cookie",
       duration: 0,
       action: [
         {
-          text: t("action.learn_more").toString(),
+          text: `${t("action.learn_more")}`,
           onClick: (_, toastObject) => {
             setLocalConfig("cookiesAllowed", "yes")
             toastObject.goAway(0)
@@ -173,7 +172,7 @@ onMounted(() => {
           },
         },
         {
-          text: t("action.dismiss").toString(),
+          text: `${t("action.dismiss")}`,
           onClick: (_, toastObject) => {
             setLocalConfig("cookiesAllowed", "yes")
             toastObject.goAway(0)

packages/hoppscotch-app/components/app/Share.vue

@@ -92,9 +92,7 @@ const platforms = [
 const copyAppLink = () => {
   copyToClipboard(url)
   copyIcon.value = "check"
-  $toast.success(t("state.copied_to_clipboard").toString(), {
+  $toast.success(`${t("state.copied_to_clipboard")}`)
-    icon: "content_paste",
-  })
   setTimeout(() => (copyIcon.value = "copy"), 1000)
 }
 

packages/hoppscotch-app/components/collections/Add.vue

@@ -47,9 +47,7 @@ export default defineComponent({
   methods: {
     addNewCollection() {
       if (!this.name) {
-        this.$toast.error(this.$t("collection.invalid_name"), {
+        this.$toast.error(this.$t("collection.invalid_name"))
-          icon: "error_outline",
-        })
         return
       }
       this.$emit("submit", this.name)

packages/hoppscotch-app/components/collections/AddFolder.vue

@@ -51,9 +51,7 @@ export default defineComponent({
   methods: {
     addFolder() {
       if (!this.name) {
-        this.$toast.error(this.$t("folder.invalid_name"), {
+        this.$toast.error(this.$t("folder.invalid_name"))
-          icon: "error_outline",
-        })
         return
       }
       this.$emit("add-folder", {

packages/hoppscotch-app/components/collections/Edit.vue

@@ -48,9 +48,7 @@ export default defineComponent({
   methods: {
     saveCollection() {
       if (!this.name) {
-        this.$toast.error(this.$t("collection.invalid_name"), {
+        this.$toast.error(this.$t("collection.invalid_name"))
-          icon: "error_outline",
-        })
         return
       }
       this.$emit("submit", this.name)

packages/hoppscotch-app/components/collections/EditFolder.vue

@@ -48,9 +48,7 @@ export default defineComponent({
   methods: {
     editFolder() {
       if (!this.name) {
-        this.$toast.error(this.$t("folder.invalid_name"), {
+        this.$toast.error(this.$t("folder.invalid_name"))
-          icon: "error_outline",
-        })
         return
       }
       this.$emit("submit", this.name)

packages/hoppscotch-app/components/collections/EditRequest.vue

@@ -47,9 +47,7 @@ export default defineComponent({
   methods: {
     saveRequest() {
       if (!this.requestUpdateData.name) {
-        this.$toast.error(this.$t("request.invalid_name"), {
+        this.$toast.error(this.$t("request.invalid_name"))
-          icon: "error_outline",
-        })
         return
       }
       this.$emit("submit", this.requestUpdateData)

packages/hoppscotch-app/components/collections/ImportExport.vue

@@ -229,15 +229,11 @@ export default defineComponent({
           }
         )
         .then((res) => {
-          this.$toast.success(this.$t("export.gist_created"), {
+          this.$toast.success(this.$t("export.gist_created"))
-            icon: "done",
-          })
           window.open(res.html_url)
         })
         .catch((e) => {
-          this.$toast.error(this.$t("error.something_went_wrong"), {
+          this.$toast.error(this.$t("error.something_went_wrong"))
-            icon: "error_outline",
-          })
           console.error(e)
         })
     },
@@ -415,23 +411,17 @@ export default defineComponent({
       a.download = `${url.split("/").pop().split("#")[0].split("?")[0]}.json`
       document.body.appendChild(a)
       a.click()
-      this.$toast.success(this.$t("state.download_started"), {
+      this.$toast.success(this.$t("state.download_started"))
-        icon: "downloading",
-      })
       setTimeout(() => {
         document.body.removeChild(a)
         URL.revokeObjectURL(url)
       }, 1000)
     },
     fileImported() {
-      this.$toast.success(this.$t("state.file_imported"), {
+      this.$toast.success(this.$t("state.file_imported"))
-        icon: "folder_shared",
-      })
     },
     failedImport() {
-      this.$toast.error(this.$t("import.failed"), {
+      this.$toast.error(this.$t("import.failed"))
-        icon: "error_outline",
-      })
     },
     parsePostmanCollection({ info, name, item }) {
       const hoppscotchCollection = {

packages/hoppscotch-app/components/collections/SaveRequest.vue

@@ -194,15 +194,11 @@ const hideModal = () => {
 
 const saveRequestAs = async () => {
   if (!requestName.value) {
-    $toast.error(`${t("error.empty_req_name")}`, {
+    $toast.error(`${t("error.empty_req_name")}`)
-      icon: "error_outline",
-    })
     return
   }
   if (picked.value === null) {
-    $toast.error(`${t("collection.select")}`, {
+    $toast.error(`${t("collection.select")}`)
-      icon: "error_outline",
-    })
     return
   }
 
@@ -283,9 +279,7 @@ const saveRequestAs = async () => {
         requestSaved()
       })
       .catch((error) => {
-        $toast.error(t("profile.no_permission").toString(), {
+        $toast.error(`${t("profile.no_permission")}`)
-          icon: "error_outline",
-        })
         throw new Error(error)
       })
 
@@ -320,9 +314,7 @@ const saveRequestAs = async () => {
 
       requestSaved()
     } catch (error) {
-      $toast.error(t("profile.no_permission").toString(), {
+      $toast.error(`${t("profile.no_permission")}`)
-        icon: "error_outline",
-      })
       console.error(error)
     }
   } else if (picked.value.pickedType === "teams-collection") {
@@ -352,9 +344,7 @@ const saveRequestAs = async () => {
 
       requestSaved()
     } catch (error) {
-      $toast.error(t("profile.no_permission").toString(), {
+      $toast.error(`${t("profile.no_permission")}`)
-        icon: "error_outline",
-      })
       console.error(error)
     }
   } else if (picked.value.pickedType === "gql-my-request") {
@@ -386,9 +376,7 @@ const saveRequestAs = async () => {
 }
 
 const requestSaved = () => {
-  $toast.success(`${t("request.added")}`, {
+  $toast.success(`${t("request.added")}`)
-    icon: "post_add",
-  })
   hideModal()
 }
 

packages/hoppscotch-app/components/collections/graphql/Add.vue

@@ -49,9 +49,7 @@ export default defineComponent({
   methods: {
     addNewCollection() {
       if (!this.name) {
-        this.$toast.error(`${this.$t("collection.invalid_name")}`, {
+        this.$toast.error(`${this.$t("collection.invalid_name")}`)
-          icon: "error_outline",
-        })
         return
       }
 

packages/hoppscotch-app/components/collections/graphql/Collection.vue

@@ -251,9 +251,7 @@ export default defineComponent({
         this.$emit("select", { picked: null })
       }
       removeGraphqlCollection(this.collectionIndex)
-      this.$toast.success(`${this.$t("state.deleted")}`, {
+      this.$toast.success(`${this.$t("state.deleted")}`)
-        icon: "delete",
-      })
     },
     dropEvent({ dataTransfer }: any) {
       this.dragging = !this.dragging

packages/hoppscotch-app/components/collections/graphql/Edit.vue

@@ -54,9 +54,7 @@ export default defineComponent({
   methods: {
     saveCollection() {
       if (!this.name) {
-        this.$toast.error(`${this.$t("collection.invalid_name")}`, {
+        this.$toast.error(`${this.$t("collection.invalid_name")}`)
-          icon: "error_outline",
-        })
         return
       }
       const collectionUpdated = {

packages/hoppscotch-app/components/collections/graphql/EditFolder.vue

@@ -54,9 +54,7 @@ export default defineComponent({
   methods: {
     editFolder() {
       if (!this.name) {
-        this.$toast.error(`${this.$t("collection.invalid_name")}`, {
+        this.$toast.error(`${this.$t("collection.invalid_name")}`)
-          icon: "error_outline",
-        })
         return
       }
       editGraphqlFolder(this.folderPath, {

packages/hoppscotch-app/components/collections/graphql/EditRequest.vue

@@ -58,9 +58,7 @@ export default defineComponent({
   methods: {
     saveRequest() {
       if (!this.requestUpdateData.name) {
-        this.$toast.error(`${this.$t("collection.invalid_name")}`, {
+        this.$toast.error(`${this.$t("collection.invalid_name")}`)
-          icon: "error_outline",
-        })
         return
       }
       const requestUpdated = {

packages/hoppscotch-app/components/collections/graphql/Folder.vue

@@ -250,9 +250,7 @@ export default defineComponent({
       }
 
       removeGraphqlFolder(this.folderPath)
-      this.$toast.success(`${this.$t("state.deleted")}`, {
+      this.$toast.success(`${this.$t("state.deleted")}`)
-        icon: "delete",
-      })
     },
     dropEvent({ dataTransfer }: any) {
       this.dragging = !this.dragging

packages/hoppscotch-app/components/collections/graphql/ImportExport.vue

@@ -140,15 +140,11 @@ export default defineComponent({
           }
         )
         .then((res) => {
-          this.$toast.success(this.$t("export.gist_created"), {
+          this.$toast.success(this.$t("export.gist_created"))
-            icon: "done",
-          })
           window.open(res.html_url)
         })
         .catch((e) => {
-          this.$toast.error(this.$t("error.something_went_wrong"), {
+          this.$toast.error(this.$t("error.something_went_wrong"))
-            icon: "error_outline",
-          })
           console.error(e)
         })
     },
@@ -252,23 +248,17 @@ export default defineComponent({
       a.download = `${url.split("/").pop().split("#")[0].split("?")[0]}.json`
       document.body.appendChild(a)
       a.click()
-      this.$toast.success(this.$t("state.download_started"), {
+      this.$toast.success(this.$t("state.download_started"))
-        icon: "downloading",
-      })
       setTimeout(() => {
         document.body.removeChild(a)
         URL.revokeObjectURL(url)
       }, 1000)
     },
     fileImported() {
-      this.$toast.success(this.$t("state.file_imported"), {
+      this.$toast.success(this.$t("state.file_imported"))
-        icon: "folder_shared",
-      })
     },
     failedImport() {
-      this.$toast.error(this.$t("import.failed"), {
+      this.$toast.error(this.$t("import.failed"))
-        icon: "error_outline",
-      })
     },
     parsePostmanCollection({ info, name, item }) {
       const hoppscotchCollection = {

packages/hoppscotch-app/components/collections/graphql/Request.vue

@@ -194,9 +194,7 @@ export default defineComponent({
       }
 
       removeGraphqlRequest(this.folderPath, this.requestIndex)
-      this.$toast.success(`${this.$t("state.deleted")}`, {
+      this.$toast.success(`${this.$t("state.deleted")}`)
-        icon: "delete",
-      })
     },
   },
 })

packages/hoppscotch-app/components/collections/index.vue

@@ -361,14 +361,10 @@ export default defineComponent({
             this.collectionsType.selectedTeam.id
           )
           .then(() => {
-            this.$toast.success(this.$t("collection.created"), {
+            this.$toast.success(this.$t("collection.created"))
-              icon: "done",
-            })
           })
           .catch((e) => {
-            this.$toast.error(this.$t("error.something_went_wrong"), {
+            this.$toast.error(this.$t("error.something_went_wrong"))
-              icon: "error_outline",
-            })
             console.error(e)
           })
       }
@@ -377,9 +373,7 @@ export default defineComponent({
     // Intented to be called by CollectionEdit modal submit event
     updateEditingCollection(newName) {
       if (!newName) {
-        this.$toast.error(this.$t("collection.invalid_name"), {
+        this.$toast.error(this.$t("collection.invalid_name"))
-          icon: "error_outline",
-        })
         return
       }
       if (this.collectionsType.type === "my-collections") {
@@ -396,14 +390,10 @@ export default defineComponent({
         teamUtils
           .renameCollection(this.$apollo, newName, this.editingCollection.id)
           .then(() => {
-            this.$toast.success(this.$t("collection.renamed"), {
+            this.$toast.success(this.$t("collection.renamed"))
-              icon: "done",
-            })
           })
           .catch((e) => {
-            this.$toast.error(this.$t("error.something_went_wrong"), {
+            this.$toast.error(this.$t("error.something_went_wrong"))
-              icon: "error_outline",
-            })
             console.error(e)
           })
       }
@@ -420,14 +410,10 @@ export default defineComponent({
         teamUtils
           .renameCollection(this.$apollo, name, this.editingFolder.id)
           .then(() => {
-            this.$toast.success(this.$t("folder.renamed"), {
+            this.$toast.success(this.$t("folder.renamed"))
-              icon: "done",
-            })
           })
           .catch((e) => {
-            this.$toast.error(this.$t("error.something_went_wrong"), {
+            this.$toast.error(this.$t("error.something_went_wrong"))
-              icon: "error_outline",
-            })
             console.error(e)
           })
       }
@@ -460,15 +446,11 @@ export default defineComponent({
             this.editingRequestIndex
           )
           .then(() => {
-            this.$toast.success(this.$t("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"), {
+            this.$toast.error(this.$t("error.something_went_wrong"))
-              icon: "error_outline",
-            })
             console.error(e)
           })
       }
@@ -533,15 +515,11 @@ export default defineComponent({
               },
             })
             .then(() => {
-              this.$toast.success(this.$t("folder.created"), {
+              this.$toast.success(this.$t("folder.created"))
-                icon: "done",
-              })
               this.$emit("update-team-collections")
             })
             .catch((e) => {
-              this.$toast.error(this.$t("error.something_went_wrong"), {
+              this.$toast.error(this.$t("error.something_went_wrong"))
-                icon: "error_outline",
-              })
               console.error(e)
             })
         }
@@ -605,9 +583,7 @@ export default defineComponent({
         }
 
         removeRESTCollection(collectionIndex)
-        this.$toast.success(this.$t("state.deleted"), {
+        this.$toast.success(this.$t("state.deleted"))
-          icon: "delete",
-        })
       } else if (collectionsType.type === "team-collections") {
         // Cancel pick if picked collection is deleted
         if (
@@ -633,14 +609,10 @@ export default defineComponent({
               },
             })
             .then(() => {
-              this.$toast.success(this.$t("state.deleted"), {
+              this.$toast.success(this.$t("state.deleted"))
-                icon: "delete",
-              })
             })
             .catch((e) => {
-              this.$toast.error(this.$t("error.something_went_wrong"), {
+              this.$toast.error(this.$t("error.something_went_wrong"))
-                icon: "error_outline",
-              })
               console.error(e)
             })
         }
@@ -658,9 +630,7 @@ export default defineComponent({
           this.$emit("select", { picked: null })
         }
         removeRESTRequest(folderPath, requestIndex)
-        this.$toast.success(this.$t("state.deleted"), {
+        this.$toast.success(this.$t("state.deleted"))
-          icon: "delete",
-        })
       } else if (this.collectionsType.type === "team-collections") {
         // Cancel pick if the picked item is being deleted
         if (
@@ -674,14 +644,10 @@ export default defineComponent({
         teamUtils
           .deleteRequest(this.$apollo, requestIndex)
           .then(() => {
-            this.$toast.success(this.$t("state.deleted"), {
+            this.$toast.success(this.$t("state.deleted"))
-              icon: "delete",
-            })
           })
           .catch((e) => {
-            this.$toast.error(this.$t("error.something_went_wrong"), {
+            this.$toast.error(this.$t("error.something_went_wrong"))
-              icon: "error_outline",
-            })
             console.error(e)
           })
       }

packages/hoppscotch-app/components/collections/my/Folder.vue

@@ -262,9 +262,7 @@ export default defineComponent({
         this.$emit("select", { picked: null })
       }
       removeRESTFolder(this.folderPath)
-      this.$toast.success(this.$t("state.deleted"), {
+      this.$toast.success(this.$t("state.deleted"))
-        icon: "delete",
-      })
     },
     dropEvent({ dataTransfer }) {
       this.dragging = !this.dragging

packages/hoppscotch-app/components/collections/teams/Folder.vue

@@ -253,15 +253,11 @@ export default defineComponent({
         teamUtils
           .deleteCollection(this.$apollo, this.folder.id)
           .then(() => {
-            this.$toast.success(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"), {
+            this.$toast.error(this.$t("error.something_went_wrong"))
-              icon: "error_outline",
-            })
             console.error(e)
           })
         this.$emit("update-team-collections")

packages/hoppscotch-app/components/environments/Add.vue

@@ -52,9 +52,7 @@ export default defineComponent({
   methods: {
     addNewEnvironment() {
       if (!this.name) {
-        this.$toast.error(`${this.$t("environment.invalid_name")}`, {
+        this.$toast.error(`${this.$t("environment.invalid_name")}`)
-          icon: "error_outline",
-        })
         return
       }
       createEnvironment(this.name)

packages/hoppscotch-app/components/environments/Edit.vue

@@ -177,9 +177,7 @@ export default defineComponent({
     clearContent() {
       this.vars = []
       this.clearIcon = "check"
-      this.$toast.success(`${this.$t("state.cleared")}`, {
+      this.$toast.success(`${this.$t("state.cleared")}`)
-        icon: "clear_all",
-      })
       setTimeout(() => (this.clearIcon = "trash-2"), 1000)
     },
     addEnvironmentVariable() {
@@ -193,9 +191,7 @@ export default defineComponent({
     },
     saveEnvironment() {
       if (!this.name) {
-        this.$toast.error(`${this.$t("environment.invalid_name")}`, {
+        this.$toast.error(`${this.$t("environment.invalid_name")}`)
-          icon: "error_outline",
-        })
         return
       }
 

packages/hoppscotch-app/components/environments/Environment.vue

@@ -102,9 +102,7 @@ export default defineComponent({
     removeEnvironment() {
       if (this.environmentIndex !== "Global")
         deleteEnvironment(this.environmentIndex)
-      this.$toast.success(`${this.$t("state.deleted")}`, {
+      this.$toast.success(`${this.$t("state.deleted")}`)
-        icon: "delete",
-      })
     },
     duplicateEnvironment() {
       if (this.environmentIndex === "Global") {

packages/hoppscotch-app/components/environments/ImportExport.vue

@@ -140,15 +140,11 @@ export default defineComponent({
           }
         )
         .then((res) => {
-          this.$toast.success(this.$t("export.gist_created"), {
+          this.$toast.success(this.$t("export.gist_created"))
-            icon: "done",
-          })
           window.open(res.html_url)
         })
         .catch((e) => {
-          this.$toast.error(this.$t("error.something_went_wrong"), {
+          this.$toast.error(this.$t("error.something_went_wrong"))
-            icon: "error_outline",
-          })
           console.error(e)
         })
     },
@@ -230,18 +226,14 @@ export default defineComponent({
       a.download = `${url.split("/").pop().split("#")[0].split("?")[0]}.json`
       document.body.appendChild(a)
       a.click()
-      this.$toast.success(this.$t("state.download_started"), {
+      this.$toast.success(this.$t("state.download_started"))
-        icon: "downloading",
-      })
       setTimeout(() => {
         document.body.removeChild(a)
         URL.revokeObjectURL(url)
       }, 1000)
     },
     fileImported() {
-      this.$toast.success(this.$t("state.file_imported"), {
+      this.$toast.success(this.$t("state.file_imported"))
-        icon: "folder_shared",
-      })
     },
   },
 })

packages/hoppscotch-app/components/firebase/Login.vue

@@ -155,9 +155,7 @@ export default defineComponent({
   },
   methods: {
     showLoginSuccess() {
-      this.$toast.success(`${this.$t("auth.login_success")}`, {
+      this.$toast.success(`${this.$t("auth.login_success")}`)
-        icon: "vpn_key",
-      })
     },
     async signInWithGoogle() {
       this.signingInWithGoogle = true
@@ -174,7 +172,6 @@ export default defineComponent({
           // The pending Google credential.
           const pendingCred = e.credential
           this.$toast.info(`${this.$t("auth.account_exists")}`, {
-            icon: "vpn_key",
             duration: 0,
             closeOnSwipe: false,
             action: {
@@ -190,9 +187,7 @@ export default defineComponent({
             },
           })
         } else {
-          this.$toast.error(`${this.$t("error.something_went_wrong")}`, {
+          this.$toast.error(`${this.$t("error.something_went_wrong")}`)
-            icon: "error_outline",
-          })
         }
       }
 
@@ -218,7 +213,6 @@ export default defineComponent({
           // The pending Google credential.
           const pendingCred = e.credential
           this.$toast.info(`${this.$t("auth.account_exists")}`, {
-            icon: "vpn_key",
             duration: 0,
             closeOnSwipe: false,
             action: {
@@ -234,9 +228,7 @@ export default defineComponent({
             },
           })
         } else {
-          this.$toast.error(`${this.$t("error.something_went_wrong")}`, {
+          this.$toast.error(`${this.$t("error.something_went_wrong")}`)
-            icon: "error_outline",
-          })
         }
       }
 
@@ -256,9 +248,7 @@ export default defineComponent({
         })
         .catch((e) => {
           console.error(e)
-          this.$toast.error(e.message, {
+          this.$toast.error(e.message)
-            icon: "error_outline",
-          })
           this.signingInWithEmail = false
         })
         .finally(() => {

packages/hoppscotch-app/components/firebase/Logout.vue

@@ -40,14 +40,10 @@ export default defineComponent({
     async logout() {
       try {
         await signOutUser()
-        this.$toast.success(`${this.$t("auth.logged_out")}`, {
+        this.$toast.success(`${this.$t("auth.logged_out")}`)
-          icon: "vpn_key",
-        })
       } catch (e) {
         console.error(e)
-        this.$toast.error(`${this.$t("error.something_went_wrong")}`, {
+        this.$toast.error(`${this.$t("error.something_went_wrong")}`)
-          icon: "error_outline",
-        })
       }
     },
   },

packages/hoppscotch-app/components/graphql/RequestOptions.vue

@@ -337,9 +337,7 @@ watch(bulkHeaders, () => {
     }))
     setGQLHeaders(transformation as GQLHeader[])
   } catch (e) {
-    $toast.error(`${t("error.something_went_wrong")}`, {
+    $toast.error(`${t("error.something_went_wrong")}`)
-      icon: "error_outline",
-    })
     console.error(e)
   }
 })
@@ -428,6 +426,7 @@ onMounted(() => {
 const copyQuery = () => {
   copyToClipboard(gqlQueryString.value)
   copyQueryIcon.value = "check"
+  $toast.success(`${t("state.copied_to_clipboard")}`)
   setTimeout(() => (copyQueryIcon.value = "copy"), 1000)
 }
 
@@ -471,18 +470,14 @@ const runQuery = async () => {
       })
     )
 
-    $toast.success(`${t("state.finished_in", { duration })}`, {
+    $toast.success(`${t("state.finished_in", { duration })}`)
-      icon: "done",
-    })
   } catch (e: any) {
     response.value = `${e}`
     nuxt.value.$loading.finish()
 
     $toast.error(
       `${t("error.something_went_wrong")}. ${t("error.check_console_details")}`,
-      {
+      {}
-        icon: "error_outline",
-      }
     )
     console.error(e)
   }
@@ -500,12 +495,11 @@ const hideRequestModal = () => {
 const prettifyQuery = () => {
   try {
     gqlQueryString.value = gql.print(gql.parse(gqlQueryString.value))
-  } catch (e) {
-    $toast.error(`${t("error.gql_prettify_invalid_query")}`, {
-      icon: "error_outline",
-    })
-  }
     prettifyQueryIcon.value = "check"
+  } catch (e) {
+    $toast.error(`${t("error.gql_prettify_invalid_query")}`)
+    prettifyQueryIcon.value = "info"
+  }
   setTimeout(() => (prettifyQueryIcon.value = "wand"), 1000)
 }
 
@@ -516,6 +510,7 @@ const saveRequest = () => {
 const copyVariables = () => {
   copyToClipboard(variableString.value)
   copyVariablesIcon.value = "check"
+  $toast.success(`${t("state.copied_to_clipboard")}`)
   setTimeout(() => (copyVariablesIcon.value = "copy"), 1000)
 }
 
@@ -543,11 +538,10 @@ const removeRequestHeader = (index: number) => {
 
   const deletedItem = headersBeforeDeletion[index]
   if (deletedItem.key || deletedItem.value) {
-    $toast.success(t("state.deleted").toString(), {
+    $toast.success(`${t("state.deleted")}`, {
-      icon: "delete",
       action: [
         {
-          text: t("action.undo").toString(),
+          text: `${t("action.undo")}`,
           onClick: (_, toastObject) => {
             setGQLHeaders(headersBeforeDeletion as GQLHeader[])
             editBulkHeadersLine(index, deletedItem)

packages/hoppscotch-app/components/graphql/Response.vue

@@ -128,6 +128,7 @@ const copyResponseIcon = ref("copy")
 const copyResponse = () => {
   copyToClipboard(responseString.value!)
   copyResponseIcon.value = "check"
+  $toast.success(`${t("state.copied_to_clipboard")}`)
   setTimeout(() => (copyResponseIcon.value = "copy"), 1000)
 }
 
@@ -141,9 +142,7 @@ const downloadResponse = () => {
   document.body.appendChild(a)
   a.click()
   downloadResponseIcon.value = "check"
-  $toast.success(`${t("state.download_started")}`, {
+  $toast.success(`${t("state.download_started")}`)
-    icon: "downloading",
-  })
   setTimeout(() => {
     document.body.removeChild(a)
     URL.revokeObjectURL(url)

packages/hoppscotch-app/components/graphql/Sidebar.vue

@@ -449,9 +449,7 @@ const downloadSchema = () => {
   document.body.appendChild(a)
   a.click()
   downloadSchemaIcon.value = "check"
-  $toast.success(`${t("state.download_started")}`, {
+  $toast.success(`${t("state.download_started")}`)
-    icon: "downloading",
-  })
   setTimeout(() => {
     document.body.removeChild(a)
     URL.revokeObjectURL(url)

packages/hoppscotch-app/components/history/index.vue

@@ -140,9 +140,7 @@ export default defineComponent({
     clearHistory() {
       if (this.page === "rest") clearRESTHistory()
       else clearGraphqlHistory()
-      this.$toast.success(`${this.$t("state.history_deleted")}`, {
+      this.$toast.success(`${this.$t("state.history_deleted")}`)
-        icon: "delete",
-      })
     },
     useHistory(entry: any) {
       if (this.page === "rest") setRESTRequest(entry.request)
@@ -150,9 +148,7 @@ export default defineComponent({
     deleteHistory(entry: any) {
       if (this.page === "rest") deleteRESTHistoryEntry(entry)
       else deleteGraphqlHistoryEntry(entry)
-      this.$toast.success(`${this.$t("state.deleted")}`, {
+      this.$toast.success(`${this.$t("state.deleted")}`)
-        icon: "delete",
-      })
     },
     toggleStar(entry: any) {
       if (this.page === "rest") toggleRESTHistoryEntryStar(entry)

packages/hoppscotch-app/components/http/CodegenModal.vue

@@ -126,9 +126,7 @@ const hideModal = () => emit("hide-modal")
 const copyRequestCode = () => {
   copyToClipboard(requestCode.value)
   copyIcon.value = "check"
-  $toast.success(`${t("state.copied_to_clipboard")}`, {
+  $toast.success(`${t("state.copied_to_clipboard")}`)
-    icon: "content_paste",
-  })
   setTimeout(() => (copyIcon.value = "copy"), 1000)
 }
 </script>

packages/hoppscotch-app/components/http/Headers.vue

@@ -214,9 +214,7 @@ watch(bulkHeaders, () => {
     }))
     setRESTHeaders(transformation as HoppRESTHeader[])
   } catch (e) {
-    $toast.error(`${t("error.something_went_wrong")}`, {
+    $toast.error(`${t("error.something_went_wrong")}`)
-      icon: "error_outline",
-    })
     console.error(e)
   }
 })
@@ -278,11 +276,10 @@ const deleteHeader = (index: number) => {
 
   const deletedItem = headersBeforeDeletion[index]
   if (deletedItem.key || deletedItem.value) {
-    $toast.success(t("state.deleted").toString(), {
+    $toast.success(`${t("state.deleted")}`, {
-      icon: "delete",
       action: [
         {
-          text: t("action.undo").toString(),
+          text: `${t("action.undo")}`,
           onClick: (_, toastObject) => {
             setRESTHeaders(headersBeforeDeletion as HoppRESTHeader[])
             editBulkHeadersLine(index, deletedItem)

packages/hoppscotch-app/components/http/ImportCurl.vue

@@ -123,9 +123,7 @@ const handleImport = () => {
     )
   } catch (e) {
     console.error(e)
-    $toast.error(`${t("error.curl_invalid_format")}`, {
+    $toast.error(`${t("error.curl_invalid_format")}`)
-      icon: "error_outline",
-    })
   }
   hideModal()
 }

packages/hoppscotch-app/components/http/OAuth2Authorization.vue

@@ -97,9 +97,7 @@ export default {
         oidcDiscoveryURL.value === "" &&
         (authURL.value === "" || accessTokenURL.value === "")
       ) {
-        $toast.error(`${$t("complete_config_urls")}`, {
+        $toast.error(`${$t("complete_config_urls")}`)
-          icon: "error",
-        })
         return
       }
       try {
@@ -113,9 +111,7 @@ export default {
         }
         await tokenRequest(tokenReqParams)
       } catch (e) {
-        $toast.error(`${e}`, {
+        $toast.error(`${e}`)
-          icon: "code",
-        })
       }
     }
 

packages/hoppscotch-app/components/http/Parameters.vue

@@ -196,9 +196,7 @@ watch(bulkParams, () => {
     }))
     setRESTParams(transformation as HoppRESTParam[])
   } catch (e) {
-    $toast.error(`${t("error.something_went_wrong")}`, {
+    $toast.error(`${t("error.something_went_wrong")}`)
-      icon: "error_outline",
-    })
     console.error(e)
   }
 })
@@ -271,11 +269,10 @@ const deleteParam = (index: number) => {
 
   const deletedItem = parametersBeforeDeletion[index]
   if (deletedItem.key || deletedItem.value) {
-    $toast.success(t("state.deleted").toString(), {
+    $toast.success(`${t("state.deleted")}`, {
-      icon: "delete",
       action: [
         {
-          text: t("action.undo").toString(),
+          text: `${t("action.undo")}`,
           onClick: (_, toastObject) => {
             setRESTParams(parametersBeforeDeletion as HoppRESTParam[])
             editBulkParamsLine(index, deletedItem)

packages/hoppscotch-app/components/http/RawBody.vue

@@ -118,13 +118,9 @@ const uploadPayload = (e: InputEvent) => {
       rawParamsBody.value = target?.result
     }
     reader.readAsText(file)
-    $toast.success(`${t("state.file_imported")}`, {
+    $toast.success(`${t("state.file_imported")}`)
-      icon: "attach_file",
-    })
   } else {
-    $toast.error(`${t("action.choose_file")}`, {
+    $toast.error(`${t("action.choose_file")}`)
-      icon: "attach_file",
-    })
   }
 }
 const prettifyRequestBody = () => {
@@ -135,9 +131,7 @@ const prettifyRequestBody = () => {
     setTimeout(() => (prettifyIcon.value = "wand"), 1000)
   } catch (e) {
     console.error(e)
-    $toast.error(`${t("error.json_prettify_invalid_body")}`, {
+    $toast.error(`${t("error.json_prettify_invalid_body")}`)
-      icon: "error_outline",
-    })
   }
 }
 </script>

packages/hoppscotch-app/components/http/Request.vue

@@ -341,9 +341,7 @@ const copyRequest = () => {
       .catch(() => {})
   } else {
     copyToClipboard(window.location.href)
-    $toast.success(`${t("state.copied_to_clipboard")}`, {
+    $toast.success(`${t("state.copied_to_clipboard")}`)
-      icon: "content_paste",
-    })
   }
 }
 
@@ -382,9 +380,7 @@ const saveRequest = () => {
 
   if (saveCtx.originLocation === "user-collection") {
     editRESTRequest(saveCtx.folderPath, saveCtx.requestIndex, getRESTRequest())
-    $toast.success(`${t("request.saved")}`, {
+    $toast.success(`${t("request.saved")}`)
-      icon: "playlist_add_check",
-    })
   } else if (saveCtx.originLocation === "team-collection") {
     const req = getRESTRequest()
 
@@ -397,20 +393,14 @@ const saveRequest = () => {
         saveCtx.requestID
       )
         .then(() => {
-          $toast.success(`${t("request.saved")}`, {
+          $toast.success(`${t("request.saved")}`)
-            icon: "playlist_add_check",
-          })
         })
         .catch(() => {
-          $toast.error(t("profile.no_permission").toString(), {
+          $toast.error(`${t("profile.no_permission")}`)
-            icon: "error_outline",
-          })
         })
     } catch (error) {
       showSaveRequestModal.value = true
-      $toast.error(t("error.something_went_wrong").toString(), {
+      $toast.error(`${t("error.something_went_wrong")}`)
-        icon: "error_outline",
-      })
       console.error(error)
     }
   }

packages/hoppscotch-app/components/http/ResponseMeta.vue

@@ -73,7 +73,7 @@
             w-32
             inline-flex
           "
-          :alt="$t('empty.network_fail')"
+          :alt="$t('error.network_fail')"
         />
         <span class="text-center font-semibold mb-2">
           {{ $t("error.network_fail") }}

packages/hoppscotch-app/components/lenses/HeadersRenderer.vue

@@ -89,9 +89,7 @@ const copyIcon = ref("copy")
 const copyHeaders = () => {
   copyToClipboard(JSON.stringify(props.headers))
   copyIcon.value = "check"
-  $toast.success(t("state.copied_to_clipboard").toString(), {
+  $toast.success(`${t("state.copied_to_clipboard")}`)
-    icon: "content_paste",
-  })
   setTimeout(() => (copyIcon.value = "copy"), 1000)
 }
 </script>

packages/hoppscotch-app/components/lenses/renderers/HTMLLensRenderer.vue

@@ -127,9 +127,7 @@ const downloadResponse = () => {
   document.body.appendChild(a)
   a.click()
   downloadIcon.value = "check"
-  $toast.success(`${t("state.download_started")}`, {
+  $toast.success(`${t("state.download_started")}`)
-    icon: "downloading",
-  })
   setTimeout(() => {
     document.body.removeChild(a)
     URL.revokeObjectURL(url)
@@ -140,9 +138,7 @@ const downloadResponse = () => {
 const copyResponse = () => {
   copyToClipboard(responseBodyText.value)
   copyIcon.value = "check"
-  $toast.success(`${t("state.copied_to_clipboard")}`, {
+  $toast.success(`${t("state.copied_to_clipboard")}`)
-    icon: "content_paste",
-  })
   setTimeout(() => (copyIcon.value = "copy"), 1000)
 }
 

packages/hoppscotch-app/components/lenses/renderers/ImageLensRenderer.vue

@@ -103,9 +103,7 @@ export default defineComponent({
       document.body.appendChild(a)
       a.click()
       this.downloadIcon = "check"
-      this.$toast.success(this.$t("state.download_started"), {
+      this.$toast.success(this.$t("state.download_started"))
-        icon: "downloading",
-      })
       setTimeout(() => {
         document.body.removeChild(a)
         URL.revokeObjectURL(url)

packages/hoppscotch-app/components/lenses/renderers/JSONLensRenderer.vue

@@ -234,9 +234,7 @@ const downloadResponse = () => {
   document.body.appendChild(a)
   a.click()
   downloadIcon.value = "check"
-  $toast.success(`${t("state.download_started")}`, {
+  $toast.success(`${t("state.download_started")}`)
-    icon: "downloading",
-  })
   setTimeout(() => {
     document.body.removeChild(a)
     URL.revokeObjectURL(url)
@@ -256,9 +254,7 @@ const outlinePath = computed(() => {
 const copyResponse = () => {
   copyToClipboard(responseBodyText.value)
   copyIcon.value = "check"
-  $toast.success(`${t("state.copied_to_clipboard")}`, {
+  $toast.success(`${t("state.copied_to_clipboard")}`)
-    icon: "content_paste",
-  })
   setTimeout(() => (copyIcon.value = "copy"), 1000)
 }
 </script>

packages/hoppscotch-app/components/lenses/renderers/RawLensRenderer.vue

@@ -117,9 +117,7 @@ const downloadResponse = () => {
   document.body.appendChild(a)
   a.click()
   downloadIcon.value = "check"
-  $toast.success(`${t("state.download_started")}`, {
+  $toast.success(`${t("state.download_started")}`)
-    icon: "downloading",
-  })
   setTimeout(() => {
     document.body.removeChild(a)
     URL.revokeObjectURL(url)
@@ -130,9 +128,7 @@ const downloadResponse = () => {
 const copyResponse = () => {
   copyToClipboard(responseBodyText.value)
   copyIcon.value = "check"
-  $toast.success(`${t("state.copied_to_clipboard")}`, {
+  $toast.success(`${t("state.copied_to_clipboard")}`)
-    icon: "content_paste",
-  })
   setTimeout(() => (copyIcon.value = "copy"), 1000)
 }
 </script>

packages/hoppscotch-app/components/lenses/renderers/XMLLensRenderer.vue

@@ -117,9 +117,7 @@ const downloadResponse = () => {
   document.body.appendChild(a)
   a.click()
   downloadIcon.value = "check"
-  $toast.success(`${t("state.download_started")}`, {
+  $toast.success(`${t("state.download_started")}`)
-    icon: "downloading",
-  })
   setTimeout(() => {
     document.body.removeChild(a)
     URL.revokeObjectURL(url)
@@ -130,9 +128,7 @@ const downloadResponse = () => {
 const copyResponse = () => {
   copyToClipboard(responseBodyText.value)
   copyIcon.value = "check"
-  $toast.success(`${t("state.copied_to_clipboard")}`, {
+  $toast.success(`${t("state.copied_to_clipboard")}`)
-    icon: "content_paste",
-  })
   setTimeout(() => (copyIcon.value = "copy"), 1000)
 }
 </script>

packages/hoppscotch-app/components/realtime/Mqtt.vue

@@ -288,9 +288,7 @@ export default defineComponent({
         color: "var(--accent-color)",
         ts: new Date().toLocaleTimeString(),
       })
-      this.$toast.success(this.$t("state.connected"), {
+      this.$toast.success(this.$t("state.connected"))
-        icon: "sync",
-      })
     },
     onMessageArrived({ payloadString, destinationName }) {
       this.log.push({
@@ -321,13 +319,9 @@ export default defineComponent({
       this.connectingState = false
       this.connectionState = false
       if (this.manualDisconnect) {
-        this.$toast.error(this.$t("state.disconnected"), {
+        this.$toast.error(this.$t("state.disconnected"))
-          icon: "sync_disabled",
-        })
       } else {
-        this.$toast.error(this.$t("error.something_went_wrong"), {
+        this.$toast.error(this.$t("error.something_went_wrong"))
-          icon: "error_outline",
-        })
       }
       this.manualDisconnect = false
       this.subscriptionState = false

packages/hoppscotch-app/components/realtime/Socketio.vue

@@ -325,9 +325,7 @@ export default defineComponent({
               ts: new Date().toLocaleTimeString(),
             },
           ]
-          this.$toast.success(this.$t("state.connected"), {
+          this.$toast.success(this.$t("state.connected"))
-            icon: "sync",
-          })
         })
         this.io.on("*", ({ data }) => {
           const [eventName, message] = data
@@ -355,15 +353,11 @@ export default defineComponent({
             color: "#ff5555",
             ts: new Date().toLocaleTimeString(),
           })
-          this.$toast.error(this.$t("state.disconnected"), {
+          this.$toast.error(this.$t("state.disconnected"))
-            icon: "sync_disabled",
-          })
         })
       } catch (e) {
         this.handleError(e)
-        this.$toast.error(this.$t("error.something_went_wrong"), {
+        this.$toast.error(this.$t("error.something_went_wrong"))
-          icon: "error_outline",
-        })
       }
 
       logHoppRequestRunToAnalytics({

packages/hoppscotch-app/components/realtime/Sse.vue

@@ -171,9 +171,7 @@ export default defineComponent({
                 ts: new Date().toLocaleTimeString(),
               },
             ]
-            this.$toast.success(this.$t("state.connected"), {
+            this.$toast.success(this.$t("state.connected"))
-              icon: "sync",
-            })
           }
           this.sse.onerror = () => {
             this.handleSSEError()
@@ -188,9 +186,7 @@ export default defineComponent({
               color: "#ff5555",
               ts: new Date().toLocaleTimeString(),
             })
-            this.$toast.error(this.$t("state.disconnected"), {
+            this.$toast.error(this.$t("state.disconnected"))
-              icon: "sync_disabled",
-            })
           }
           this.sse.addEventListener(this.eventType, ({ data }) => {
             this.events.log.push({
@@ -201,9 +197,7 @@ export default defineComponent({
           })
         } catch (e) {
           this.handleSSEError(e)
-          this.$toast.error(this.$t("error.something_went_wrong"), {
+          this.$toast.error(this.$t("error.something_went_wrong"))
-            icon: "error_outline",
-          })
         }
       } else {
         this.events.log = [

packages/hoppscotch-app/components/realtime/Websocket.vue

@@ -319,9 +319,7 @@ export default defineComponent({
               ts: new Date().toLocaleTimeString(),
             },
           ]
-          this.$toast.success(this.$t("state.connected"), {
+          this.$toast.success(this.$t("state.connected"))
-            icon: "sync",
-          })
         }
         this.socket.onerror = () => {
           this.handleError()
@@ -334,9 +332,7 @@ export default defineComponent({
             color: "#ff5555",
             ts: new Date().toLocaleTimeString(),
           })
-          this.$toast.error(this.$t("state.disconnected"), {
+          this.$toast.error(this.$t("state.disconnected"))
-            icon: "sync_disabled",
-          })
         }
         this.socket.onmessage = ({ data }) => {
           this.communication.log.push({
@@ -347,9 +343,7 @@ export default defineComponent({
         }
       } catch (e) {
         this.handleError(e)
-        this.$toast.error(this.$t("error.something_went_wrong"), {
+        this.$toast.error(this.$t("error.something_went_wrong"))
-          icon: "error_outline",
-        })
       }
 
       logHoppRequestRunToAnalytics({
@@ -433,7 +427,6 @@ export default defineComponent({
       const oldProtocols = this.protocols.slice()
       this.$delete(this.protocols, index)
       this.$toast.success(this.$t("state.deleted"), {
-        icon: "delete",
         action: {
           text: this.$t("action.undo"),
           duration: 4000,

packages/hoppscotch-app/components/teams/Add.vue

@@ -1,5 +1,5 @@
 <template>
-  <SmartModal v-if="show" :title="$t('team.new').toString()" @close="hideModal">
+  <SmartModal v-if="show" :title="$t('team.new')" @close="hideModal">
     <template #body>
       <div class="flex flex-col px-2">
         <input
@@ -19,12 +19,9 @@
     </template>
     <template #footer>
       <span>
-        <ButtonPrimary
+        <ButtonPrimary :label="$t('action.save')" @click.native="addNewTeam" />
-          :label="$t('action.save').toString()"
-          @click.native="addNewTeam"
-        />
         <ButtonSecondary
-          :label="$t('action.cancel').toString()"
+          :label="$t('action.cancel')"
           @click.native="hideModal"
         />
       </span>
@@ -66,9 +63,7 @@ const addNewTeam = () =>
       (err) => {
         // err is of type "invalid_name" | GQLError<Err>
         if (err === "invalid_name") {
-          $toast.error(t("team.name_length_insufficient").toString(), {
+          $toast.error(`${t("team.name_length_insufficient")}`)
-            icon: "error_outline",
-          })
         } else {
           // Handle GQL errors (use err obj)
         }

packages/hoppscotch-app/components/teams/Edit.vue

@@ -361,13 +361,9 @@ const removeExistingTeamMember = async (userID: string) => {
     props.editingTeamID
   )()
   if (E.isLeft(removeTeamMemberResult)) {
-    $toast.error(t("error.something_went_wrong"), {
+    $toast.error(`${t("error.something_went_wrong")}`)
-      icon: "error",
-    })
   } else {
-    $toast.success(t("team.member_removed"), {
+    $toast.success(`${t("team.member_removed")}`)
-      icon: "done",
-    })
   }
 }
 
@@ -379,9 +375,7 @@ const saveTeam = async () => {
         name.value
       )()
       if (E.isLeft(updateTeamNameResult)) {
-        $toast.error(t("error.something_went_wrong"), {
+        $toast.error(`${t("error.something_went_wrong")}`)
-          icon: "error",
-        })
       } else {
         roleUpdates.value.forEach(async (update) => {
           const updateMemberRoleResult = await updateTeamMemberRole(
@@ -390,26 +384,18 @@ const saveTeam = async () => {
             update.role
           )()
           if (E.isLeft(updateMemberRoleResult)) {
-            $toast.error(t("error.something_went_wrong"), {
+            $toast.error(`${t("error.something_went_wrong")}`)
-              icon: "error",
-            })
             console.error(updateMemberRoleResult.left.error)
           }
         })
       }
       hideModal()
-      $toast.success(t("team.saved"), {
+      $toast.success(`${t("team.saved")}`)
-        icon: "done",
-      })
     } else {
-      return $toast.error(t("team.name_length_insufficient"), {
+      return $toast.error(`${t("team.name_length_insufficient")}`)
-        icon: "error_outline",
-      })
     }
   } else {
-    return $toast.error(t("empty.team_name"), {
+    return $toast.error(`${t("empty.team_name")}`)
-      icon: "error_outline",
-    })
   }
 }
 

packages/hoppscotch-app/components/teams/Invite.vue

@@ -491,13 +491,9 @@ watch(
 const removeInvitee = async (id: string) => {
   const result = await revokeTeamInvitation(id)()
   if (E.isLeft(result)) {
-    $toast.error(`${t("error.something_went_wrong")}`, {
+    $toast.error(`${t("error.something_went_wrong")}`)
-      icon: "error_outline",
-    })
   } else {
-    $toast.success(`${t("team.member_removed")}`, {
+    $toast.success(`${t("team.member_removed")}`)
-      icon: "person",
-    })
   }
 }
 
@@ -557,9 +553,7 @@ const sendInvites = async () => {
 
   if (O.isNone(validationResult)) {
     // Error handling for no validation
-    $toast.error(`${t("error.incorrect_email")}`, {
+    $toast.error(`${t("error.incorrect_email")}`)
-      icon: "error_outline",
-    })
     return
   }
 

packages/hoppscotch-app/components/teams/Team.vue

@@ -44,7 +44,7 @@
           v-if="team.myRole === 'OWNER'"
           svg="edit"
           class="rounded-none"
-          :label="$t('action.edit').toString()"
+          :label="$t('action.edit')"
           @click.native="
             () => {
               $emit('edit-team')
@@ -75,7 +75,7 @@
           <SmartItem
             v-if="team.myRole === 'OWNER'"
             svg="edit"
-            :label="$t('action.edit').toString()"
+            :label="$t('action.edit')"
             @click.native="
               () => {
                 $emit('edit-team')
@@ -87,7 +87,7 @@
             v-if="team.myRole === 'OWNER'"
             svg="trash-2"
             color="red"
-            :label="$t('action.delete').toString()"
+            :label="$t('action.delete')"
             @click.native="
               () => {
                 deleteTeam()
@@ -98,7 +98,7 @@
           <SmartItem
             v-if="!(team.myRole === 'OWNER' && team.ownersCount == 1)"
             svg="trash"
-            :label="$t('team.exit').toString()"
+            :label="$t('team.exit')"
             @click.native="
               () => {
                 exitTeam()
@@ -150,22 +150,18 @@ const {
 const t = i18n.t.bind(i18n)
 
 const deleteTeam = () => {
-  if (!confirm(t("confirm.remove_team").toString())) return
+  if (!confirm(`${t("confirm.remove_team")}`)) return
 
   pipe(
     backendDeleteTeam(props.teamID),
     TE.match(
       (err) => {
         // TODO: Better errors ? We know the possible errors now
-        $toast.error(t("error.something_went_wrong").toString(), {
+        $toast.error(`${t("error.something_went_wrong")}`)
-          icon: "error_outline",
-        })
         console.error(err)
       },
       () => {
-        $toast.success(t("team.deleted").toString(), {
+        $toast.success(`${t("team.deleted")}`)
-          icon: "done",
-        })
       }
     )
   )() // Tasks (and TEs) are lazy, so call the function returned
@@ -179,23 +175,17 @@ const exitTeam = () => {
     TE.match(
       (err) => {
         // TODO: Better errors ?
-        $toast.error(t("error.something_went_wrong").toString(), {
+        $toast.error(`${t("error.something_went_wrong")}`)
-          icon: "error_outline",
-        })
         console.error(err)
       },
       () => {
-        $toast.success(t("team.left").toString(), {
+        $toast.success(`${t("team.left")}`)
-          icon: "done",
-        })
       }
     )
   )() // Tasks (and TEs) are lazy, so call the function returned
 }
 
 const noPermission = () => {
-  $toast.error(t("profile.no_permission").toString(), {
+  $toast.error(`${t("profile.no_permission")}`)
-    icon: "error_outline",
-  })
 }
 </script>

packages/hoppscotch-app/layouts/default.vue

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

packages/hoppscotch-app/pages/documentation.vue

@@ -230,15 +230,11 @@ export default defineComponent({
           }
         )
         .then((res) => {
-          this.$toast.success(this.$t("export.gist_created"), {
+          this.$toast.success(this.$t("export.gist_created"))
-            icon: "done",
-          })
           window.open(res.html_url)
         })
         .catch((e) => {
-          this.$toast.error(this.$t("error.something_went_wrong"), {
+          this.$toast.error(this.$t("error.something_went_wrong"))
-            icon: "error_outline",
-          })
           console.error(e)
         })
     },
@@ -251,13 +247,9 @@ export default defineComponent({
           this.collectionJSON = target.result
         }
         reader.readAsText(file)
-        this.$toast.success(this.$t("state.file_imported"), {
+        this.$toast.success(this.$t("state.file_imported"))
-          icon: "attach_file",
-        })
       } else {
-        this.$toast.error(this.$t("action.choose_file"), {
+        this.$toast.error(this.$t("action.choose_file"))
-          icon: "attach_file",
-        })
       }
       this.$refs.collectionUpload.value = ""
     },
@@ -288,9 +280,7 @@ export default defineComponent({
         this.items = JSON.parse(this.collectionJSON)
         this.assignIDs(this.items, "", "#")
         this.$toast.clear()
-        this.$toast.success(this.$t("state.docs_generated"), {
+        this.$toast.success(this.$t("state.docs_generated"))
-          icon: "book",
-        })
         const docsMarkdown = Mustache.render(
           DocsTemplate,
           {
@@ -325,9 +315,7 @@ export default defineComponent({
         this.docsMarkdown = docsMarkdown.replace(/^\s*[\r\n]/gm, "\n\n")
       } catch (e) {
         console.error(e)
-        this.$toast.error(this.$t("error.something_went_wrong"), {
+        this.$toast.error(this.$t("error.something_went_wrong"))
-          icon: "error_outline",
-        })
       }
     },
 

packages/hoppscotch-app/pages/join-team.vue

@@ -238,9 +238,7 @@ export default defineComponent({
         TE.matchW(
           () => {
             this.loading = false
-            this.$toast.error(this.$t("error.something_went_wrong"), {
+            this.$toast.error(`${this.$t("error.something_went_wrong")}`)
-              icon: "error_outline",
-            })
           },
           () => {
             this.joinTeamSuccess = true

packages/hoppscotch-app/pages/profile.vue

@@ -99,7 +99,7 @@
                       required
                     />
                     <ButtonPrimary
-                      :label="$t('action.save').toString()"
+                      :label="$t('action.save')"
                       class="ml-2 min-w-16"
                       type="submit"
                       :loading="updatingDisplayName"

packages/hoppscotch-app/pages/settings.vue

@@ -328,9 +328,7 @@ export default defineComponent({
     resetProxy() {
       applySetting("PROXY_URL", `https://proxy.hoppscotch.io/`)
       this.clearIcon = "check"
-      this.$toast.success(`${this.$t("state.cleared")}`, {
+      this.$toast.success(`${this.$t("state.cleared")}`)
-        icon: "clear_all",
-      })
       setTimeout(() => (this.clearIcon = "rotate-ccw"), 1000)
     },
     getColorModeName(colorMode: string) {