Replaced all alertMessage calls with notiwind

src/App.vue

@@ -27,12 +27,36 @@
             class="w-full max-w-sm mx-auto mb-3 overflow-hidden bg-slate-900/90 text-white rounded-lg shadow-md"
           >
             <div class="w-full px-4 py-3">
+              <span class="font-semibold">{{ notification.title }}</span>
               <p class="text-sm">{{ notification.text }}</p>
             </div>
           </div>
 
           <div
             v-if="notification.type === 'info'"
+            class="flex w-full max-w-sm mx-auto mb-3 overflow-hidden bg-slate-100 rounded-lg shadow-md"
+          >
+            <div
+              class="flex items-center justify-center w-12 bg-slate-600 text-slate-100"
+            >
+              <fa icon="circle-info" class="fa-fw fa-xl"></fa>
+            </div>
+
+            <div class="relative w-full pl-4 pr-8 py-2 text-slate-900">
+              <span class="font-semibold">{{ notification.title }}</span>
+              <p class="text-sm">{{ notification.text }}</p>
+
+              <button
+                @click="close(notification.id)"
+                class="absolute top-2 right-2 px-0.5 py-0 rounded-full bg-slate-200 text-slate-600"
+              >
+                <fa icon="xmark" class="fa-fw"></fa>
+              </button>
+            </div>
+          </div>
+
+          <div
+            v-if="notification.type === 'success'"
             class="flex w-full max-w-sm mx-auto mb-3 overflow-hidden bg-emerald-100 rounded-lg shadow-md"
           >
             <div

src/views/AccountViewView.vue

@@ -400,13 +400,19 @@ export default class AccountViewView extends Vue {
         this.limitsMessage = "No identity.";
         this.loadingLimits = false;
       } else {
-        this.alertMessage =
+        this.$notify(
-          "Clear your cache and start over (after data backup).";
+          {
+            group: "alert",
+            type: "danger",
+            title: "Error Creating Account",
+            text: "Clear your cache and start over (after data backup).",
+          },
+          -1,
+        );
         console.error(
           "Telling user to clear cache at page create because:",
           err,
         );
-        this.alertTitle = "Error Creating Account";
       }
     }
   }
@@ -418,13 +424,19 @@ export default class AccountViewView extends Vue {
         showContactGivesInline: this.showContactGives,
       });
     } catch (err) {
-      this.alertMessage =
+      this.$notify(
-        "Clear your cache and start over (after data backup).";
+        {
+          group: "alert",
+          type: "danger",
+          title: "Error Updating Contact Setting",
+          text: "Clear your cache and start over (after data backup).",
+        },
+        -1,
+      );
       console.error(
         "Telling user to clear cache after contact setting update because:",
         err,
       );
-      this.alertTitle = "Error Updating Contact Setting";
     }
   }
 
@@ -440,11 +452,25 @@ export default class AccountViewView extends Vue {
 
       URL.revokeObjectURL(url);
 
-      this.alertTitle = "Download Started";
+      this.$notify(
-      this.alertMessage = "See your downloads directory for the backup.";
+        {
+          group: "alert",
+          type: "toast",
+          title: "Download Started",
+          text: "See your downloads directory for the backup.",
+        },
+        5000,
+      );
     } catch (error) {
-      this.alertTitle = "Export Error";
+      this.$notify(
-      this.alertMessage = "See console logs for more info.";
+        {
+          group: "alert",
+          type: "danger",
+          title: "Export Error",
+          text: "See console logs for more info.",
+        },
+        -1,
+      );
       console.error("Export Error:", error);
     }
   }

src/views/ContactAmountsView.vue

@@ -146,10 +146,17 @@ export default class ContactsView extends Vue {
         this.loadGives(this.activeDid, this.contact);
       }
     } catch (err) {
-      this.alertTitle = "Error";
+      this.$notify(
-      this.alertMessage =
+        {
-        err.userMessage ||
+          group: "alert",
-        "There was an error retrieving the latest sweet, sweet action.";
+          type: "danger",
+          title: "Error",
+          text:
+            err.userMessage ||
+            "There was an error retrieving the latest sweet, sweet action.",
+        },
+        -1,
+      );
     }
   }
 
@@ -173,9 +180,15 @@ export default class ContactsView extends Vue {
           resp.status,
           resp.data,
         );
-        this.alertTitle = "Error With Server";
+        this.$notify(
-        this.alertMessage =
+          {
-          "Got an error retrieving your given time from the server.";
+            group: "alert",
+            type: "danger",
+            title: "Error With Server",
+            text: "Got an error retrieving your given time from the server.",
+          },
+          -1,
+        );
       }
 
       const url2 =
@@ -194,9 +207,15 @@ export default class ContactsView extends Vue {
           resp2.status,
           resp2.data,
         );
-        this.alertTitle = "Error With Server";
+        this.$notify(
-        this.alertMessage =
+          {
-          "Got an error retrieving your given time from the server.";
+            group: "alert",
+            type: "danger",
+            title: "Error With Server",
+            text: "Got an error retrieving your given time from the server.",
+          },
+          -1,
+        );
       }
 
       const sortedResult: Array<GiveServerRecord> = R.sort(
@@ -206,8 +225,15 @@ export default class ContactsView extends Vue {
       );
       this.giveRecords = sortedResult;
     } catch (error) {
-      this.alertTitle = "Error With Server";
+      this.$notify(
-      this.alertMessage = error as string;
+        {
+          group: "alert",
+          type: "danger",
+          title: "Error With Server",
+          text: error as string,
+        },
+        -1,
+      );
     }
   }
 
@@ -276,15 +302,29 @@ export default class ContactsView extends Vue {
           userMessage = error as string;
         }
         // Now set that error for the user to see.
-        this.alertTitle = "Error With Server";
+        this.$notify(
-        this.alertMessage = userMessage;
+          {
+            group: "alert",
+            type: "danger",
+            title: "Error With Server",
+            text: userMessage,
+          },
+          -1,
+        );
       }
     }
   }
 
   cannotConfirmMessage() {
-    this.alertTitle = "Not Allowed";
+    this.$notify(
-    this.alertMessage = "Only the recipient can confirm final receipt.";
+      {
+        group: "alert",
+        type: "danger",
+        title: "Not Allowed",
+        text: "Only the recipient can confirm final receipt.",
+      },
+      -1,
+    );
   }
 }
 </script>

src/views/ContactGiftingView.vue

@@ -145,10 +145,17 @@ export default class HomeView extends Vue {
       this.feedLastViewedId = settings?.lastViewedClaimId;
       this.updateAllFeed();
     } catch (err) {
-      this.alertTitle = "Error";
+      this.$notify(
-      this.alertMessage =
+        {
-        err.userMessage ||
+          group: "alert",
-        "There was an error retrieving the latest sweet, sweet action.";
+          type: "danger",
+          title: "Error",
+          text:
+            err.userMessage ||
+            "There was an error retrieving the latest sweet, sweet action.",
+        },
+        -1,
+      );
     }
   }
 
@@ -197,17 +204,27 @@ export default class HomeView extends Vue {
    */
   public async recordGive(giverDid, description, hours) {
     if (!this.activeDid) {
-      this.setAlert(
+      this.$notify(
-        "Error",
+        {
-        "You must select an identity before you can record a give.",
+          group: "alert",
+          type: "danger",
+          title: "Error",
+          text: "You must select an identity before you can record a give.",
+        },
+        -1,
       );
       return;
     }
 
     if (!description && !hours) {
-      this.setAlert(
+      this.$notify(
-        "Error",
+        {
-        "You must enter a description or some number of hours.",
+          group: "alert",
+          type: "danger",
+          title: "Error",
+          text: "You must enter a description or some number of hours.",
+        },
+        -1,
       );
       return;
     }
@@ -227,18 +244,38 @@ export default class HomeView extends Vue {
       if (isGiveCreationError(result)) {
         const errorMessage = getGiveCreationErrorMessage(result);
         console.log("Error with give result:", result);
-        this.setAlert(
+        this.$notify(
-          "Error",
+          {
-          errorMessage || "There was an error recording the give.",
+            group: "alert",
+            type: "danger",
+            title: "Error",
+            text: errorMessage || "There was an error recording the give.",
+          },
+          -1,
         );
       } else {
-        this.setAlert("Success", "That gift was recorded.");
+        this.$notify(
+          {
+            group: "alert",
+            type: "success",
+            title: "Success",
+            text: "That gift was recorded.",
+          },
+          -1,
+        );
       }
     } catch (error) {
       console.log("Error with give caught:", error);
-      this.setAlert(
+      this.$notify(
-        "Error",
+        {
-        getGiveErrorMessage(error) || "There was an error recording the give.",
+          group: "alert",
+          type: "danger",
+          title: "Error",
+          text:
+            getGiveErrorMessage(error) ||
+            "There was an error recording the give.",
+        },
+        -1,
       );
     }
   }

src/views/ContactQRScanShowView.vue

@@ -85,7 +85,15 @@ export default class ContactQRScanShow extends Vue {
     const accounts = await accountsDB.accounts.toArray();
     const account = R.find((acc) => acc.did === this.activeDid, accounts);
     if (!account) {
-      this.alertMessage = "You have no identity yet.";
+      this.$notify(
+        {
+          group: "alert",
+          type: "warning",
+          title: "",
+          text: "You have no identity yet.",
+        },
+        -1,
+      );
     } else {
       const identity = await this.getIdentity(this.activeDid);
       const publicKeyHex = identity.keys[0].publicKeyHex;

src/views/ContactsView.vue

@@ -317,12 +317,19 @@ export default class ContactsView extends Vue {
           resp.status,
           resp.data,
         );
-        this.alertTitle = "Error With Server";
+        this.$notify(
-        this.alertMessage =
+          {
-          "Got an error retrieving your " +
+            group: "alert",
-          resp.config.url.includes("recipientDid")
+            type: "danger",
-            ? "received"
+            title: "Error With Server",
-            : "given" + " time from the server.";
+            text:
+              "Got an error retrieving your " +
+              resp.config.url.includes("recipientDid")
+                ? "received"
+                : "given" + " time from the server.",
+          },
+          -1,
+        );
       }
     };
 
@@ -370,8 +377,15 @@ export default class ContactsView extends Vue {
       this.givenToMeConfirmed = givenToMeConfirmed;
       this.givenToMeUnconfirmed = givenToMeUnconfirmed;
     } catch (error) {
-      this.alertTitle = "Error With Server";
+      this.$notify(
-      this.alertMessage = error as string;
+        {
+          group: "alert",
+          type: "danger",
+          title: "Error With Server",
+          text: error as string,
+        },
+        -1,
+      );
     }
   }
 
@@ -464,18 +478,32 @@ export default class ContactsView extends Vue {
         try {
           const resp = await this.axios.post(url, payload, { headers });
           if (resp.data?.success?.embeddedRecordError) {
-            this.alertTitle = "Registration Still Unknown";
             let message = "There was some problem with the registration.";
             if (typeof resp.data.success.embeddedRecordError == "string") {
               message += " " + resp.data.success.embeddedRecordError;
             }
-            this.alertMessage = message;
+            this.$notify(
+              {
+                group: "alert",
+                type: "danger",
+                title: "Registration Still Unknown",
+                text: message,
+              },
+              -1,
+            );
           } else if (resp.data?.success?.handleId) {
             contact.registered = true;
             db.contacts.update(contact.did, { registered: true });
 
-            this.alertTitle = "Registration Success";
+            this.$notify(
-            this.alertMessage = contact.name + " has been registered.";
+              {
+                group: "alert",
+                type: "info",
+                title: "Registration Success",
+                text: contact.name + " has been registered.",
+              },
+              -1,
+            );
           }
         } catch (error) {
           let userMessage = "There was an error. See logs for more info.";
@@ -490,8 +518,15 @@ export default class ContactsView extends Vue {
             userMessage = error as string;
           }
           // Now set that error for the user to see.
-          this.alertTitle = "Error With Server";
+          this.$notify(
-          this.alertMessage = userMessage;
+            {
+              group: "alert",
+              type: "danger",
+              title: "Error With Server",
+              text: userMessage,
+            },
+            -1,
+          );
         }
       }
     }
@@ -512,17 +547,39 @@ export default class ContactsView extends Vue {
         contact.seesMe = visibility;
         db.contacts.update(contact.did, { seesMe: visibility });
       } else {
-        this.alertTitle = "Error With Server";
         console.error("Bad response setting visibility: ", resp.data);
         if (resp.data.error?.message) {
-          this.alertMessage = resp.data.error?.message;
+          this.$notify(
+            {
+              group: "alert",
+              type: "danger",
+              title: "Error With Server",
+              text: resp.data.error?.message,
+            },
+            -1,
+          );
         } else {
-          this.alertMessage = "Bad server response of " + resp.status;
+          this.$notify(
+            {
+              group: "alert",
+              type: "danger",
+              title: "Error With Server",
+              text: "Bad server response of " + resp.status,
+            },
+            -1,
+          );
         }
       }
     } catch (err) {
-      this.alertTitle = "Error With Server";
+      this.$notify(
-      this.alertMessage = err as string;
+        {
+          group: "alert",
+          type: "danger",
+          title: "Error With Server",
+          text: err as string,
+        },
+        -1,
+      );
     }
   }
 
@@ -539,23 +596,52 @@ export default class ContactsView extends Vue {
         contact.seesMe = visibility;
         db.contacts.update(contact.did, { seesMe: visibility });
 
-        this.alertTitle = "Refreshed";
+        this.$notify(
-        this.alertMessage =
+          {
-          this.nameForContact(contact, true) +
+            group: "alert",
-          " can " +
+            type: "toast",
-          (visibility ? "" : "not ") +
+            title: "Refreshed",
-          "see your activity.";
+            text:
+              this.nameForContact(contact, true) +
+              " can " +
+              (visibility ? "" : "not ") +
+              "see your activity.",
+          },
+          5000,
+        );
       } else {
-        this.alertTitle = "Error With Server";
         if (resp.data.error?.message) {
-          this.alertMessage = resp.data.error?.message;
+          this.$notify(
+            {
+              group: "alert",
+              type: "danger",
+              title: "Error With Server",
+              text: resp.data.error?.message,
+            },
+            -1,
+          );
         } else {
-          this.alertMessage = "Bad server response of " + resp.status;
+          this.$notify(
+            {
+              group: "alert",
+              type: "danger",
+              title: "Error With Server",
+              text: "Bad server response of " + resp.status,
+            },
+            -1,
+          );
         }
       }
     } catch (err) {
-      this.alertTitle = "Error With Server";
+      this.$notify(
-      this.alertMessage = err as string;
+        {
+          group: "alert",
+          type: "danger",
+          title: "Error With Server",
+          text: err as string,
+        },
+        -1,
+      );
     }
   }
 
@@ -594,15 +680,35 @@ export default class ContactsView extends Vue {
       }
     }
     if (!this.isNumeric(this.hourInput)) {
-      this.alertTitle = "Input Error";
+      this.$notify(
-      this.alertMessage =
+        {
-        "This is not a valid number of hours: " + this.hourInput;
+          group: "alert",
+          type: "danger",
+          title: "Input Error",
+          text: "This is not a valid number of hours: " + this.hourInput,
+        },
+        -1,
+      );
     } else if (!parseFloat(this.hourInput)) {
-      this.alertTitle = "Input Error";
+      this.$notify(
-      this.alertMessage = "Giving 0 hours does nothing.";
+        {
+          group: "alert",
+          type: "danger",
+          title: "Input Error",
+          text: "Giving 0 hours does nothing.",
+        },
+        -1,
+      );
     } else if (!identity) {
-      this.alertTitle = "Status Error";
+      this.$notify(
-      this.alertMessage = "No identity is available.";
+        {
+          group: "alert",
+          type: "danger",
+          title: "Status Error",
+          text: "No identity is available.",
+        },
+        -1,
+      );
     } else {
       // ask to confirm amount
       let toFrom;
@@ -686,8 +792,15 @@ export default class ContactsView extends Vue {
       try {
         const resp = await this.axios.post(url, payload, { headers });
         if (resp.data?.success?.handleId) {
-          this.alertTitle = "Done";
+          this.$notify(
-          this.alertMessage = "Successfully logged time to the server.";
+            {
+              group: "alert",
+              type: "success",
+              title: "Done",
+              text: "Successfully logged time to the server.",
+            },
+            -1,
+          );
 
           if (fromDid === identity.did) {
             const newList = R.clone(this.givenByMeUnconfirmed);
@@ -712,8 +825,15 @@ export default class ContactsView extends Vue {
           userMessage = error as string;
         }
         // Now set that error for the user to see.
-        this.alertTitle = "Error With Server";
+        this.$notify(
-        this.alertMessage = userMessage;
+          {
+            group: "alert",
+            type: "danger",
+            title: "Error With Server",
+            text: userMessage,
+          },
+          -1,
+        );
       }
     }
   }

src/views/HomeView.vue

@@ -37,11 +37,28 @@
             -1,
           )
         "
-        class="font-bold uppercase bg-emerald-600 text-white px-3 py-2 rounded-md mr-2"
+        class="font-bold uppercase bg-slate-600 text-white px-3 py-2 rounded-md mr-2"
       >
         Info
       </button>
 
+      <button
+        @click="
+          this.$notify(
+            {
+              group: 'alert',
+              type: 'success',
+              title: 'Success Alert',
+              text: 'Congratulations!',
+            },
+            -1,
+          )
+        "
+        class="font-bold uppercase bg-emerald-600 text-white px-3 py-2 rounded-md mr-2"
+      >
+        Success
+      </button>
+
       <button
         @click="
           this.$notify(
@@ -228,10 +245,17 @@ export default class HomeView extends Vue {
       this.feedLastViewedId = settings?.lastViewedClaimId;
       this.updateAllFeed();
     } catch (err) {
-      this.alertTitle = "Error";
+      this.$notify(
-      this.alertMessage =
+        {
-        err.userMessage ||
+          group: "alert",
-        "There was an error retrieving the latest sweet, sweet action.";
+          type: "danger",
+          title: "Error",
+          text:
+            err.userMessage ||
+            "There was an error retrieving the latest sweet, sweet action.",
+        },
+        -1,
+      );
     }
   }
 
@@ -280,9 +304,15 @@ export default class HomeView extends Vue {
       })
       .catch((e) => {
         console.log("Error with feed load:", e);
-        this.alertMessage =
+        this.$notify(
-          e.userMessage || "There was an error retrieving feed data.";
+          {
-        this.alertTitle = "Error";
+            group: "alert",
+            type: "danger",
+            title: "Export Error",
+            text: e.userMessage || "There was an error retrieving feed data.",
+          },
+          -1,
+        );
       });
 
     this.isHiddenSpinner = true;
@@ -373,17 +403,27 @@ export default class HomeView extends Vue {
    */
   public async recordGive(giverDid, description, hours) {
     if (!this.activeDid) {
-      this.setAlert(
+      this.$notify(
-        "Error",
+        {
-        "You must select an identity before you can record a give.",
+          group: "alert",
+          type: "danger",
+          title: "Error",
+          text: "You must select an identity before you can record a give.",
+        },
+        -1,
       );
       return;
     }
 
     if (!description && !hours) {
-      this.setAlert(
+      this.$notify(
-        "Error",
+        {
-        "You must enter a description or some number of hours.",
+          group: "alert",
+          type: "danger",
+          title: "Error",
+          text: "You must enter a description or some number of hours.",
+        },
+        -1,
       );
       return;
     }
@@ -403,19 +443,38 @@ export default class HomeView extends Vue {
       if (this.isGiveCreationError(result)) {
         const errorMessage = this.getGiveCreationErrorMessage(result);
         console.log("Error with give result:", result);
-        this.setAlert(
+        this.$notify(
-          "Error",
+          {
-          errorMessage || "There was an error recording the give.",
+            group: "alert",
+            type: "danger",
+            title: "Error",
+            text: errorMessage || "There was an error recording the give.",
+          },
+          -1,
         );
       } else {
-        this.setAlert("Success", "That gift was recorded.");
+        this.$notify(
+          {
+            group: "alert",
+            type: "success",
+            title: "Success",
+            text: "That gift was recorded.",
+          },
+          -1,
+        );
       }
     } catch (error) {
       console.log("Error with give caught:", error);
-      this.setAlert(
+      this.$notify(
-        "Error",
+        {
-        this.getGiveErrorMessage(error) ||
+          group: "alert",
-          "There was an error recording the give.",
+          type: "danger",
+          title: "Error",
+          text:
+            this.getGiveErrorMessage(error) ||
+            "There was an error recording the give.",
+        },
+        -1,
       );
     }
   }

src/views/IdentitySwitcherView.vue

@@ -133,13 +133,19 @@ export default class IdentitySwitcherView extends Vue {
         this.limitsMessage = "No identity.";
         this.loadingLimits = false;
       } else {
-        this.alertMessage =
+        this.$notify(
-          "Clear your cache and start over (after data backup).";
+          {
+            group: "alert",
+            type: "danger",
+            title: "Error Creating Account",
+            text: "Clear your cache and start over (after data backup).",
+          },
+          -1,
+        );
         console.error(
           "Telling user to clear cache at page create because:",
           err,
         );
-        this.alertTitle = "Error Creating Account";
       }
     }
   }

src/views/NewEditProjectView.vue

@@ -245,20 +245,41 @@ export default class NewEditProjectView extends Vue {
         if (serverError) {
           if (Object.prototype.hasOwnProperty.call(serverError, "message")) {
             console.log(serverError);
-            this.alertTitle = "User Message";
             userMessage = serverError.response.data.error.message; // This is info for the user.
-            this.alertMessage = userMessage;
+            this.$notify(
+              {
+                group: "alert",
+                type: "danger",
+                title: "User Message",
+                text: userMessage,
+              },
+              -1,
+            );
           } else {
-            this.alertTitle = "Server Message";
+            this.$notify(
-            this.alertMessage = JSON.stringify(serverError.toJSON());
+              {
+                group: "alert",
+                type: "danger",
+                title: "Server Message",
+                text: JSON.stringify(serverError.toJSON()),
+              },
+              -1,
+            );
           }
         } else {
           console.error(
             "Here's the full error trying to save the claim:",
             error,
           );
-          this.alertTitle = "Claim Error";
+          this.$notify(
-          this.alertMessage = error as string;
+            {
+              group: "alert",
+              type: "danger",
+              title: "Claim Error",
+              text: error as string,
+            },
+            -1,
+          );
         }
         // Now set that error for the user to see.
         this.errorMessage = userMessage;

src/views/ProjectViewView.vue

@@ -285,16 +285,38 @@ export default class ProjectViewView extends Vue {
         this.truncatedDesc = this.description.slice(0, this.truncateLength);
       } else if (resp.status === 404) {
         // actually, axios throws an error so we never get here
-        this.alertMessage = "That project does not exist.";
+        this.$notify(
+          {
+            group: "alert",
+            type: "danger",
+            title: "Error",
+            text: "That project does not exist.",
+          },
+          -1,
+        );
       }
     } catch (error: unknown) {
       const serverError = error as AxiosError;
       if (serverError.response?.status === 404) {
-        this.alertMessage = "That project does not exist.";
+        this.$notify(
+          {
+            group: "alert",
+            type: "danger",
+            title: "Error",
+            text: "That project does not exist.",
+          },
+          -1,
+        );
       } else {
-        this.alertMessage =
+        this.$notify(
-          "Something went wrong retrieving that project." +
+          {
-          " See logs for more info.";
+            group: "alert",
+            type: "danger",
+            title: "Error",
+            text: "Something went wrong retrieving that project. See logs for more info.",
+          },
+          -1,
+        );
         console.error("Error retrieving project:", serverError.message);
       }
     }
@@ -308,12 +330,27 @@ export default class ProjectViewView extends Vue {
       if (resp.status === 200 && resp.data.data) {
         this.givesToThis = resp.data.data;
       } else {
-        this.alertMessage = "Failed to retrieve gives to this project.";
+        this.$notify(
+          {
+            group: "alert",
+            type: "danger",
+            title: "Error",
+            text: "Failed to retrieve gives to this project.",
+          },
+          -1,
+        );
       }
     } catch (error: unknown) {
       const serverError = error as AxiosError;
-      this.alertMessage =
+      this.$notify(
-        "Something went wrong retrieving gives to this project.";
+        {
+          group: "alert",
+          type: "danger",
+          title: "Error",
+          text: "Something went wrong retrieving gives to this project.",
+        },
+        -1,
+      );
       console.error(
         "Error retrieving gives to this project:",
         serverError.message,
@@ -329,11 +366,27 @@ export default class ProjectViewView extends Vue {
       if (resp.status === 200 && resp.data.data) {
         this.givesByThis = resp.data.data;
       } else {
-        this.alertMessage = "Failed to retrieve gives by this project.";
+        this.$notify(
+          {
+            group: "alert",
+            type: "danger",
+            title: "Error",
+            text: "Failed to retrieve gives by this project.",
+          },
+          -1,
+        );
       }
     } catch (error: unknown) {
       const serverError = error as AxiosError;
-      this.alertMessage = "Something went wrong retrieving gives by project.";
+      this.$notify(
+        {
+          group: "alert",
+          type: "danger",
+          title: "Error",
+          text: "Something went wrong retrieving gives by project.",
+        },
+        -1,
+      );
       console.error(
         "Error retrieving gives by this project:",
         serverError.message,
@@ -364,16 +417,28 @@ export default class ProjectViewView extends Vue {
    */
   async recordGive(giverDid, description, hours) {
     if (!this.activeDid) {
-      this.alertTitle = "Error";
+      this.$notify(
-      this.alertMessage =
+        {
-        "You must select an identity before you can record a give.";
+          group: "alert",
+          type: "danger",
+          title: "Error",
+          text: "You must select an identity before you can record a give.",
+        },
+        -1,
+      );
       return;
     }
 
     if (!description && !hours) {
-      this.alertTitle = "Error";
+      this.$notify(
-      this.alertMessage =
+        {
-        "You must enter a description or some number of hours.";
+          group: "alert",
+          type: "danger",
+          title: "Error",
+          text: "You must enter a description or some number of hours.",
+        },
+        -1,
+      );
       return;
     }
 
@@ -392,21 +457,42 @@ export default class ProjectViewView extends Vue {
 
       if (result.status !== 201 || result.data?.error) {
         console.log("Error with give result:", result);
-        this.alertTitle = "Error";
+        this.$notify(
-        this.alertMessage =
+          {
-          result.data?.error?.message ||
+            group: "alert",
-          "There was an error recording the give.";
+            type: "danger",
+            title: "Error",
+            text:
+              result.data?.error?.message ||
+              "There was an error recording the give.",
+          },
+          -1,
+        );
       } else {
-        this.alertTitle = "Success";
+        this.$notify(
-        this.alertMessage = "That gift was recorded.";
+          {
+            group: "alert",
+            type: "success",
+            title: "Success",
+            text: "That gift was recorded.",
+          },
+          -1,
+        );
       }
     } catch (e) {
       console.log("Error with give caught:", e);
-      this.alertTitle = "Error";
+      this.$notify(
-      this.alertMessage =
+        {
-        e.userMessage ||
+          group: "alert",
-        e.response?.data?.error?.message ||
+          type: "danger",
-        "There was an error recording the give.";
+          title: "Error",
+          text:
+            e.userMessage ||
+            e.response?.data?.error?.message ||
+            "There was an error recording the give.",
+        },
+        -1,
+      );
     }
   }
 }

src/views/ProjectsView.vue

@@ -126,8 +126,15 @@ export default class ProjectsView extends Vue {
       }
     } catch (error) {
       console.error("Got error loading projects:", error.message);
-      this.alertTitle = "Error";
+      this.$notify(
-      this.alertMessage = "Got an error loading projects:" + error.message;
+        {
+          group: "alert",
+          type: "danger",
+          title: "Error",
+          text: "Got an error loading projects: " + error.message,
+        },
+        -1,
+      );
     } finally {
       this.isLoading = false;
     }
@@ -196,8 +203,15 @@ export default class ProjectsView extends Vue {
 
       if (this.numAccounts === 0) {
         console.error("No accounts found.");
-        this.alertTitle = "Error";
+        this.$notify(
-        this.alertMessage = "You need an identity to load your projects.";
+          {
+            group: "alert",
+            type: "danger",
+            title: "Error",
+            text: "You need an identity to load your projects.",
+          },
+          -1,
+        );
       } else {
         const identity = await this.getIdentity(activeDid);
         this.current = identity;
@@ -205,8 +219,15 @@ export default class ProjectsView extends Vue {
       }
     } catch (err) {
       console.log("Error initializing:", err);
-      this.alertTitle = "Error";
+      this.$notify(
-      this.alertMessage = "Something went wrong loading your projects.";
+        {
+          group: "alert",
+          type: "danger",
+          title: "Error",
+          text: "Something went wrong loading your projects.",
+        },
+        -1,
+      );
     }
   }
 

src/views/SeedBackupView.vue

@@ -72,8 +72,15 @@ export default class SeedBackupView extends Vue {
       this.activeAccount = R.find((acc) => acc.did === activeDid, accounts);
     } catch (err) {
       console.error("Got an error loading an identity:", err);
-      this.alertTitle = "Error Loading Account";
+      this.$notify(
-      this.alertMessage = "Got an error loading your seed data.";
+        {
+          group: "alert",
+          type: "danger",
+          title: "Error Loading Account",
+          text: "Got an error loading your seed data.",
+        },
+        -1,
+      );
     }
   }
 

src/views/StatisticsView.vue

@@ -62,8 +62,15 @@ export default class StatisticsView extends Vue {
       this.world = newWorld;
     } catch (err) {
       console.log(err);
-      this.alertTitle = "Mounting error";
+      this.$notify(
-      this.alertMessage = err.message;
+        {
+          group: "alert",
+          type: "danger",
+          title: "Mounting Error",
+          text: err.message,
+        },
+        -1,
+      );
     }
   }