General UI Improvement (again) (#255)

* Add and fix some stuff

* Add warning when leaving to `mod/create`

* Fix mods/create not working

pages/mod/_id/version/_version/edit.vue

@@ -165,6 +165,7 @@ export default {
   data() {
     return {
       version: {},
+      isEditing: true,
     }
   },
   mounted() {
@@ -173,6 +174,23 @@ export default {
       [this.version.name, 'versions/' + this.version.id],
       ['Edit Version', 'versions/' + this.version.id + '/edit'],
     ])
+    function preventLeave(e) {
+      e.preventDefault()
+      e.returnValue = ''
+    }
+    window.addEventListener('beforeunload', preventLeave)
+    this.$once('hook:beforeDestroy', () => {
+      window.removeEventListener('beforeunload', preventLeave)
+    })
+  },
+  beforeRouteLeave(to, from, next) {
+    if (
+      this.isEditing &&
+      !window.confirm('Are you sure that you want to leave without saving?')
+    ) {
+      return
+    }
+    next()
   },
   methods: {
     async saveVersion() {
@@ -184,6 +202,7 @@ export default {
           this.version,
           this.$auth.headers
         )
+        this.isEditing = false
         await this.$router.replace(
           `/mod/${this.mod.slug ? this.mod.slug : this.mod.id}/version/${
             this.version.id

pages/mod/_id/version/_version/index.vue

@@ -60,7 +60,7 @@
           <a
             v-if="primaryFile"
             :href="primaryFile.url"
-            class="action iconified-button"
+            class="action iconified-button download"
             @click.prevent="
               $parent.downloadFile(primaryFile.hashes.sha1, primaryFile.url)
             "
@@ -333,6 +333,13 @@ export default {
         margin: 0 0 0 0.5rem;
       }
     }
+    .download {
+      background-color: var(--color-brand);
+      color: white;
+      &:hover {
+        background-color: var(--color-brand-hover);
+      }
+    }
   }
 
   .markdown-body {
@@ -408,8 +415,6 @@ export default {
 
     svg {
       padding: 0.25rem;
-      border-radius: 50%;
-      background-color: var(--color-button-bg);
     }
   }
 }