Move everything to components, (WIP) Version creation

components/FileInput.vue

@@ -0,0 +1,86 @@
+<template>
+  <div>
+    <slot></slot>
+    <input
+      :id="id"
+      class="file-input"
+      type="file"
+      :accept="accept"
+      :multiple="multiple"
+      @change="onChange"
+    />
+    <label :for="id">{{ text }}</label>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'FileInput',
+  props: {
+    defaultText: {
+      type: String,
+      default: '',
+    },
+    inputId: {
+      type: String,
+      default: '',
+    },
+    inputAccept: {
+      type: String,
+      default: '',
+    },
+    inputMultiple: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  data() {
+    return {
+      text: this.defaultText,
+    }
+  },
+  methods: {
+    onChange(files) {
+      const length = files.target.length
+
+      if (length === 0) {
+        this.text = this.defaultText
+      } else if (length === 1) {
+        this.text = '1 file selected'
+      } else if (length > 1) {
+        this.text = length + ' files selected'
+      }
+
+      this.$emit('change', files)
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+[type='file'] {
+  border: 0;
+  clip: rect(0, 0, 0, 0);
+  height: 1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute !important;
+  white-space: nowrap;
+  width: 1px;
+
+  + label {
+    cursor: pointer;
+    border-radius: 5px;
+    color: var(--color-grey-5);
+    background-color: var(--color-grey-1);
+    padding: 10px 20px;
+  }
+
+  &:focus + label,
+  + label:hover,
+  &:focus + label {
+    background-color: var(--color-grey-2);
+    color: var(--color-text);
+  }
+}
+</style>

components/ModPage.vue

@@ -6,7 +6,7 @@
           :src="
             mod.icon_url
               ? mod.icon_url
-              : 'https://cdn.modrinth.com/placeholder.png'
+              : 'https://cdn.modrinth.com/placeholder.svg'
           "
           alt="mod-icon"
         />
@@ -268,6 +268,7 @@ export default {
 
   .team-member {
     margin-left: 5px;
+    margin-bottom: 10px;
     border: 1px solid var(--color-grey-1);
     border-radius: var(--size-rounded-sm);
 
@@ -297,6 +298,7 @@ export default {
 
   .featured-version {
     margin-left: 5px;
+    margin-bottom: 10px;
     border: 1px solid var(--color-grey-1);
     border-radius: var(--size-rounded-sm);
 

components/ModResult.vue

@@ -2,7 +2,7 @@
   <div class="result rows">
     <img
       class="result-icon"
-      :src="iconUrl ? iconUrl : 'https://cdn.modrinth.com/placeholder.png'"
+      :src="iconUrl ? iconUrl : 'https://cdn.modrinth.com/placeholder.svg'"
       :alt="name"
     />
     <div class="rows result-name-author">

components/Popup.vue

@@ -0,0 +1,50 @@
+<template>
+  <div v-if="showPopup">
+    <div class="popup-overlay" />
+    <div class="popup-body">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Popup',
+  props: {
+    showPopup: {
+      type: Boolean,
+      default: false,
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.popup-overlay {
+  top: 0;
+  left: 0;
+  z-index: 1;
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  background-color: var(--color-grey-3);
+  border: none;
+  opacity: 0.6;
+  overflow-x: hidden;
+  cursor: pointer;
+}
+
+.popup-body {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 2;
+  box-shadow: 0 2px 3px 1px var(--color-grey-2);
+  padding: 5px 60px 60px 20px;
+  border-radius: 10px;
+  max-height: 80%;
+  overflow-y: auto;
+  background-color: var(--color-bg);
+}
+</style>