Improved styling of the version file upload button (#492)

* Update SmartFileInput to be styled like the other file input

* Fix gallery upload layout

components/ui/SmartFileInput.vue

@@ -1,8 +1,10 @@
 <template>
   <div class="columns">
-    <label class="iconified-button" @drop.prevent="addFile" @dragover.prevent>
+    <label class="button" @drop.prevent="addFile" @dragover.prevent>
-      <UploadIcon />
+      <span>
-      {{ prompt }}
+        <UploadIcon />
+        {{ prompt }}
+      </span>
       <input
         type="file"
         :multiple="multiple"
@@ -67,6 +69,27 @@ export default {
 <style lang="scss" scoped>
 label {
   cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: var(--spacing-card-sm) var(--spacing-card-md);
+  margin-bottom: var(--spacing-card-sm);
+}
+
+span {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  gap: 0.5rem;
+  border: 2px dashed var(--color-divider-dark);
+  border-radius: var(--size-rounded-control);
+  padding: var(--spacing-card-md) var(--spacing-card-lg);
+
+  svg {
+    height: 1.25rem;
+  }
 }
 
 input {

pages/_type/_id/gallery.vue

@@ -213,19 +213,21 @@
           </div>
         </div>
         <div class="gallery-bottom">
+          <SmartFileInput
+            accept="image/png,image/jpeg,image/gif,image/webp,.png,.jpeg,.gif,.webp"
+            prompt="Choose image or drag it here"
+            @change="(files) => showPreviewImage(files, index)"
+          />
           <div class="gallery-buttons">
-            <SmartFileInput
+            <div class="delete-button-container">
-              accept="image/png,image/jpeg,image/gif,image/webp,.png,.jpeg,.gif,.webp"
+              <button
-              prompt="Upload"
+                class="iconified-button"
-              @change="(files) => showPreviewImage(files, index)"
+                @click="newGalleryItems.splice(index, 1)"
-            />
+              >
-            <button
+                <TrashIcon />
-              class="iconified-button"
+                Delete
-              @click="newGalleryItems.splice(index, 1)"
+              </button>
-            >
+            </div>
-              <TrashIcon />
-              Delete
-            </button>
           </div>
         </div>
       </div>
@@ -609,11 +611,11 @@ export default {
     }
 
     .textarea-wrapper {
-      width: 14rem;
+      width: 100%;
     }
 
     input {
-      width: calc(14rem - 2rem - 4px);
+      width: calc(100% - 2rem - 4px);
       margin: 0 0 0.25rem;
     }
 

pages/_type/_id/version.vue

@@ -486,8 +486,9 @@
         <SmartFileInput
           v-if="mode === 'edit' || mode === 'create'"
           multiple
+          class="choose-files"
           accept=".jar,application/java-archive,.zip,application/zip,.mrpack"
-          prompt="Upload files"
+          prompt="Choose files or drag them here"
           @change="(x) => x.forEach((y) => newFiles.push(y))"
         />
       </section>

pages/create/project.vue

@@ -467,7 +467,7 @@
               class="file-input"
               multiple
               accept=".jar,application/java-archive,.zip,application/zip,.mrpack"
-              prompt="Upload files"
+              prompt="Choose files or drag them here"
               @change="
                 (x) =>
                   x.forEach((y) => versions[currentVersionIndex].files.push(y))