Tooltips, alternate ad text, better error messages

pages/mod/_id/version/_version.vue

@@ -54,10 +54,6 @@
     </div>
     <Popup :show-popup="showPopup">
       <h3 class="popup-title">Upload Files</h3>
-      <div v-if="currentError" class="error">
-        <h4>Error</h4>
-        <p>{{ currentError }}</p>
-      </div>
       <FileInput
         input-id="version-files"
         input-accept="application/*"
@@ -157,7 +153,6 @@ export default {
   data() {
     return {
       showPopup: false,
-      currentError: null,
       filesToUpload: [],
     }
   },
@@ -173,7 +168,6 @@ export default {
     },
     async uploadFiles() {
       this.$nuxt.$loading.start()
-      this.currentError = null
 
       const formData = new FormData()
 
@@ -200,7 +194,12 @@ export default {
 
         await this.$router.go(null)
       } catch (err) {
-        this.currentError = err.response.data.description
+        this.$notify({
+          group: 'main',
+          title: 'An Error Occurred',
+          text: err.response.data.description,
+          type: 'error',
+        })
         window.scrollTo({ top: 0, behavior: 'smooth' })
       }
 
@@ -394,10 +393,4 @@ export default {
     background-color: var(--color-bg);
   }
 }
-
-.error {
-  margin: 20px 0;
-  border-left: #e04e3e 7px solid;
-  padding: 5px 20px 20px 20px;
-}
 </style>

pages/mod/_id/versions.vue

@@ -261,7 +261,6 @@ export default {
   data() {
     return {
       showPopup: false,
-      currentError: null,
       createdVersion: {},
     }
   },
@@ -278,7 +277,6 @@ export default {
     },
     async createVersion() {
       this.$nuxt.$loading.start()
-      this.currentError = null
 
       const formData = new FormData()
 
@@ -310,7 +308,12 @@ export default {
 
         await this.$router.go(null)
       } catch (err) {
-        this.currentError = err.response.data.description
+        this.$notify({
+          group: 'main',
+          title: 'An Error Occurred',
+          text: err.response.data.description,
+          type: 'error',
+        })
         window.scrollTo({ top: 0, behavior: 'smooth' })
       }