Improve toast message styling

diff --git a/client/api.js b/client/api.js
index 16b4b5b70a308f27e237724d7c9e5d29d004e061..11a3731f8f0341dce641eb6281bdbef8b00a70ad 100644 (file)
--- a/client/api.js
+++ b/client/api.js
@@ -34,9 +34,9 @@ export function apiErrorHandler(error, toast) {
     console.error(error);
     toast.add(
       getToastOptions(
-        "Unknown Error",
         "Unknown error communicating with the server. Please try again.",
-        true,
+        "Unknown Error",
+        "error",
       ),
     );
   }

diff --git a/client/helpers.js b/client/helpers.js
index a144ba08620c0f75ad5064446610d32d763cef41..9e218f7746a8ae6d2f9ecdce48279e25fc954fff 100644 (file)
--- a/client/helpers.js
+++ b/client/helpers.js
@@ -1,8 +1,8 @@
-export function getToastOptions(title, description, isFailure = false) {
+export function getToastOptions(description, title, severity) {
   return {
     summary: title,
     detail: description,
-    severity: isFailure ? "error" : "success",
+    severity: severity,
     closable: false,
     life: 5000,
   };

diff --git a/client/partials/SearchInput.vue b/client/partials/SearchInput.vue
index 67d9cff76bd70a8485567a50d41ed1e2a7ef7e36..4b79d0f239e60f63986209feef7262ba81a61088 100644 (file)
--- a/client/partials/SearchInput.vue
+++ b/client/partials/SearchInput.vue
@@ -112,7 +112,9 @@ function search() {
     });
     emit("search");
   } else {
-    toast.add(getToastOptions("Error", "Please enter a search term.", true));
+    toast.add(
+      getToastOptions("Please enter a search term.", "Error", "error"),
+    );
   }
 }
 

diff --git a/client/views/LogIn.vue b/client/views/LogIn.vue
index 9c0edbea49514f8b13122cca55d55fed73a53ad5..16d4437456c2998cf5d3e635d9b019d7e9c60c34 100644 (file)
--- a/client/views/LogIn.vue
+++ b/client/views/LogIn.vue
@@ -83,9 +83,9 @@ function logIn() {
       if (error.response?.status === 401) {
         toast.add(
           getToastOptions(
-            "Login Failed",
             "Please check your credentials and try again.",
-            true,
+            "Login Failed",
+            "error",
           ),
         );
       } else {

diff --git a/client/views/Note.vue b/client/views/Note.vue
index 136faa4446acb8e69a63b3c51f1fa5f96b8365de..c032169fd021ddd42a66944618872338873663bd 100644 (file)
--- a/client/views/Note.vue
+++ b/client/views/Note.vue
@@ -171,9 +171,9 @@ function init() {
 function entityTooLargeToast(entityName) {
   toast.add(
     getToastOptions(
-      "Failure",
       `This ${entityName} is too large. Please try again with a smaller ${entityName} or adjust your server configuration.`,
-      true,
+      "Failure",
+      "error",
     ),
   );
 }
@@ -181,9 +181,9 @@ function entityTooLargeToast(entityName) {
 function badFilenameToast(entityName) {
   toast.add(
     getToastOptions(
-      `Invalid ${entityName}`,
       'Due to filename restrictions, the following characters are not allowed: <>:"/\\|?*',
-      true,
+      `Invalid ${entityName}`,
+      "error",
     ),
   );
 }
@@ -240,7 +240,7 @@ function saveHandler() {
   // Empty Title Validation
   if (!newTitle.value) {
     toast.add(
-      getToastOptions("Invalid", "Cannot save note without a title", true),
+      getToastOptions("Cannot save note without a title.", "Invalid", "error"),
     );
     return;
   }
@@ -274,7 +274,7 @@ function cancelConfirmedHandler() {
 function deleteConfirmedHandler() {
   deleteNote(note.value.title)
     .then(() => {
-      toast.add(getToastOptions("Success", "Note deleted."));
+      toast.add(getToastOptions("Note deleted ✓", "Success", "success"));
       router.push({ name: "home" });
     })
     .catch((error) => {
@@ -312,9 +312,9 @@ function noteSaveFailure(error) {
   if (error.response?.status === 409) {
     toast.add(
       getToastOptions(
-        "Duplicate",
         "A note with this title already exists. Please try again with a new title.",
-        true,
+        "Duplicate",
+        "error",
       ),
     );
   } else if (error.response?.status === 413) {
@@ -327,7 +327,7 @@ function noteSaveFailure(error) {
 function noteSaveSuccess() {
   setBeforeUnloadConfirmation(false);
   editMode.value = false;
-  toast.add(getToastOptions("Success", "Note saved successfully."));
+  toast.add(getToastOptions("Note saved successfully ✓", "Success", "success"));
 }
 
 function addImageBlobHook(file, callback) {
@@ -353,14 +353,18 @@ function postAttachment(file) {
   }
 
   // Uploading Toast
-  toast.add(getToastOptions("Uploading", "Uploading attachment..."));
+  toast.add(getToastOptions("Uploading attachment..."));
 
   // Upload the attachment
   return createAttachment(file)
     .then((data) => {
       // Success Toast
       toast.add(
-        getToastOptions("Success", "Attachment uploaded successfully."),
+        getToastOptions(
+          "Attachment uploaded successfully ✓",
+          "Success",
+          "success",
+        ),
       );
       return data;
     })
@@ -370,9 +374,9 @@ function postAttachment(file) {
         // Error Toast
         toast.add(
           getToastOptions(
-            "Duplicate",
             "An attachment with this filename already exists.",
-            true,
+            "Duplicate",
+            "error",
           ),
         );
       } else if (error.response?.status == 413) {