From: Adam Dullage <redacted>
Date: Wed, 15 May 2024 18:51:50 +0000 (+0100)
Subject: Improve toast message styling
X-Git-Url: http://git.99rst.org/?a=commitdiff_plain;h=1589fa7db670b2188002668032b91e0f926decd0;p=flatnotes.git

Improve toast message styling
---

diff --git a/client/api.js b/client/api.js
index 16b4b5b..11a3731 100644
--- 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 a144ba0..9e218f7 100644
--- 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 67d9cff..4b79d0f 100644
--- 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 9c0edbe..16d4437 100644
--- 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 136faa4..c032169 100644
--- 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) {