[WIP] Rework design (#34)

* WIP: Redesign the default layout

* Merge old & new default layouts

* Fix login logic; add proper user controls dropdown

* Fix latest version listing (#31) (#32)

Co-authored-by: Aeledfyr <45501007+Aeledfyr@users.noreply.github.com>

* First pass of design cleanup

* Improve ad integration and fix light theme

* Begin splitting up variables, change some styling to new mockup

* Continue redesign progress

* Work on some more pages

* Add missing dark theme variables for text

* Continue working on modularizing

* Continue progress, redo pagination

* Fix auth buttons in navbar layout

* Continue progress

* Continue progress more

* Redo ModResult

* Scope ModPage :irritater:

* Continue Dashboard

* Continue progress on Dashboard and cleanup

* Add missing variables for dark theme

* Small tweaks, cleanup, and continue mod page progress

* Fix user not being able to see hidden mods that they own

* Start reworking mod creation

* Continue revamp of mod creation page

* Yank v-html out

* Hotfix markdown rendering and some spacing issues

* Move legal; continue with mod creation; create reusable footer

* Create README.md

* Update README.md

* Update README.md

* Add in basic usage instructions

* Fix some stuff

* Continue with mod creation; fix some CSS errors

* Start user page

* Start transition to vue-select; fix a few bugs

* Continue mod creation page

* Finish mod pages

* Add very raw version editing

* Mod editing + creation

* Fixed versions that were in processing causing a 404 (#39)

Co-authored-by: Mikhail Oleynikov <falseresync@gmail.com>
Co-authored-by: Aeledfyr <45501007+Aeledfyr@users.noreply.github.com>
Co-authored-by: Jai A <jai.a@tuta.io>
Co-authored-by: MulverineX <mulverin3@gmail.com>
Co-authored-by: diabolical17 <calumproh28@gmail.com>
Co-authored-by: Geometrically <18202329+Geometrically@users.noreply.github.com>

components/FileInput.vue

@@ -1,86 +1,53 @@
 <template>
-  <div>
-    <slot></slot>
+  <label class="button">
+    <span>
+      {{ prompt }}
+    </span>
     <input
-      :id="inputId"
-      class="file-input"
       type="file"
-      :accept="inputAccept"
-      :multiple="inputMultiple"
-      @change="onChange"
+      :multiple="multiple"
+      :accept="accept"
+      @change="(files) => $emit('change', files)"
     />
-    <label :for="inputId">{{ text }}</label>
-  </div>
+  </label>
 </template>
 
 <script>
 export default {
   name: 'FileInput',
   props: {
-    defaultText: {
+    prompt: {
       type: String,
-      default: '',
+      default: 'Select file',
     },
-    inputId: {
-      type: String,
-      default: '',
-    },
-    inputAccept: {
-      type: String,
-      default: '',
-    },
-    inputMultiple: {
+    multiple: {
       type: Boolean,
-      default: true,
+      default: false,
     },
-  },
-  data() {
-    return {
-      text: this.defaultText,
-    }
-  },
-  methods: {
-    onChange(files) {
-      const length = files.target.files.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)
+    accept: {
+      type: String,
+      default: null,
     },
   },
 }
 </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 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: var(--spacing-card-sm) var(--spacing-card-md);
+}
 
-  + label {
-    cursor: pointer;
-    border-radius: 5px;
-    color: var(--color-grey-5);
-    background-color: var(--color-grey-1);
-    padding: 10px 20px;
-  }
+span {
+  border: 2px dashed var(--color-divider-dark);
+  border-radius: var(--size-rounded-control);
+  padding: var(--spacing-card-md) var(--spacing-card-lg);
+}
 
-  &:focus + label,
-  + label:hover,
-  &:focus + label {
-    background-color: var(--color-grey-2);
-    color: var(--color-text);
-  }
+input {
+  display: none;
 }
 </style>