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' })
       }
 

pages/mod/create.vue

@@ -1,10 +1,6 @@
 <template>
   <div class="content">
     <h2>Create Mod</h2>
-    <section v-if="currentError" class="error">
-      <h3>Error</h3>
-      <p>{{ currentError }}</p>
-    </section>
     <section>
       <h3>Initial Data</h3>
       <div class="initial">
@@ -315,7 +311,6 @@ export default {
   data() {
     return {
       previewImage: null,
-      currentError: null,
       compiledBody: '',
       releaseChannels: ['beta', 'alpha', 'release'],
       currentVersionIndex: -1,
@@ -334,7 +329,6 @@ export default {
   methods: {
     async createMod() {
       this.$nuxt.$loading.start()
-      this.currentError = null
 
       const formData = new FormData()
 
@@ -386,7 +380,13 @@ export default {
 
         await this.$router.replace('/dashboard/projects')
       } 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' })
       }
 
@@ -438,10 +438,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.error {
-  border-left: #e04e3e 7px solid;
-}
-
 section {
   box-shadow: 0 2px 3px 1px var(--color-grey-2);
   margin: 50px 25px;

pages/user/_id.vue

@@ -11,7 +11,7 @@
         <p v-if="user.role === 'developer'" class="badge green">Developer</p>
       </div>
     </div>
-    <div data-ea-publisher="modrinth-com" data-ea-type="text" />
+    <EthicalAd />
     <div class="user-mods">
       <SearchResult
         v-for="result in mods"
@@ -35,10 +35,12 @@
 <script>
 import axios from 'axios'
 import SearchResult from '@/components/ModResult'
+import EthicalAd from '@/components/EthicalAd'
 
 export default {
   auth: false,
   components: {
+    EthicalAd,
     SearchResult,
   },
   async asyncData(data) {